/* implec — Design-Tokens & gemeinsame Styles (Produktion)
   Basiert auf dem Handoff-Designsystem. Statisch, ohne Build-Schritt. */

/* ——— Hausschrift: Radikal (Nootype) ——— */
@font-face {
  font-family: 'Radikal';
  src: url('assets/fonts/radikal-light.woff2') format('woff2'), url('assets/fonts/radikal-light.woff') format('woff');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Radikal';
  src: url('assets/fonts/radikal-regular.woff2') format('woff2'), url('assets/fonts/radikal-regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Radikal';
  src: url('assets/fonts/radikal-bold.woff2') format('woff2'), url('assets/fonts/radikal-bold.woff') format('woff');
  font-weight: 500 700; font-style: normal; font-display: swap;
}

:root {
  --implec-purple: #3C005F;
  --implec-purple-deep: #25003B;
  --implec-purple-soft: #51187a;
  --implec-red: #E6002D;
  --implec-red-deep: #B80024;
  --cream: #F6F2EC;
  --cream-2: #EDE6DA;
  --paper: #FBF8F3;
  --ink: #0E0B12;
  --ink-2: #2A2530;
  --muted: #6B6470;
  --rule-soft: rgba(14,11,18,0.12);
  --serif: "Radikal", "Source Serif 4", Georgia, serif;
  --sans: "Radikal", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #fbfbfd;
  color: #2A0040;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; }
a { color: inherit; }

/* ——— Motion ——— */
@keyframes kenburns {
  0%   { transform: scale(1.0) translate(0, 0); }
  100% { transform: scale(1.12) translate(-1.5%, -1.5%); }
}
.kenburns { animation: kenburns 18s ease-out infinite alternate; }
@keyframes pulsering {
  0%   { box-shadow: 0 0 0 0 rgba(230,0,45,0.45); }
  70%  { box-shadow: 0 0 0 16px rgba(230,0,45,0); }
  100% { box-shadow: 0 0 0 0 rgba(230,0,45,0); }
}
.playring { animation: pulsering 2.4s ease-out infinite; }

/* ——— Foto-Platzhalter ———
   Im Handoff-Paket liegen keine Fotos bei. Bis echte, web-optimierte Bilder
   (WebP) eingepflegt sind, ersetzen diese Platzhalter die <img>-Flächen 1:1. */
.ph {
  background:
    repeating-linear-gradient(135deg, rgba(60,0,95,0.06) 0 2px, transparent 2px 14px),
    linear-gradient(135deg, rgba(60,0,95,0.16), rgba(230,0,45,0.10));
  background-color: #ece6f1;
}
.ph.dark {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 14px),
    linear-gradient(135deg, rgba(230,0,45,0.30), rgba(60,0,95,0.55));
  background-color: #1a0030;
}
.ph.cover { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ——— Buttons (Pill) ——— */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 980px;
  font-family: var(--sans); font-weight: 600; font-size: 14px;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn-primary { background: var(--implec-red); color: #fff; }
.btn-primary:hover { background: var(--implec-red-deep); transform: translateY(-1px); }
.btn-purple { background: var(--implec-purple); color: #fff; }
.btn-purple:hover { background: var(--implec-purple-soft); transform: translateY(-1px); }
.btn-ghost { border-color: rgba(255,255,255,0.4); color: #fff; background: rgba(255,255,255,0.12); }
.btn-ghost:hover { background: rgba(255,255,255,0.2); }

/* ——— Karten-Hover ——— */
.lift { transition: transform .2s ease, box-shadow .2s ease; }
.lift:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(60,0,95,0.10); }

/* ——— Mega-Menü (Hover, CSS-only) ——— */
.has-mega { position: relative; }
.mega {
  position: absolute; left: 0; right: 0; top: 60px;
  background: #fff; border-bottom: 1px solid rgba(60,0,95,0.08);
  box-shadow: 0 40px 80px rgba(60,0,95,0.10);
  padding: 36px 40px 28px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 50;
}
.has-mega:hover .mega,
.mega:hover { opacity: 1; visibility: visible; transform: translateY(0); }
.has-mega:hover > .nav-mega-trigger { color: var(--implec-purple); border-bottom-color: var(--implec-red) !important; font-weight: 700; }
.mega-link { display:block; padding:9px 10px; border-radius:11px; text-decoration:none; color:#2A0040; margin-bottom:1px; transition: background .15s ease; }
.mega-link:hover { background: rgba(60,0,95,0.07); }

/* ——— FAQ Accordion ——— */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] summary .faq-plus { transform: rotate(45deg); }
.faq-plus { transition: transform .2s ease; display: inline-block; }

/* ——— Links mit Hover ——— */
.txt-link { transition: opacity .15s ease; }
.txt-link:hover { opacity: 0.7; }

/* ——— Mobile-Burger (versteckt auf Desktop) ——— */
.burger { display: none; }

/* ——— Responsive ——— */
@media (max-width: 1040px) {
  .grid-resp-3, .grid-resp-2, .grid-resp-bento, .grid-resp-bento2,
  .grid-resp-6, .grid-resp-4, .grid-resp-5, .grid-resp-foot { grid-template-columns: 1fr !important; }
  .grid-resp-3 > *, .grid-resp-2 > * { min-height: auto !important; }
  .hero-h1 { font-size: 52px !important; }
  .big-h2 { font-size: 38px !important; }
  .nav-links { display: none !important; }
  .burger { display: inline-flex !important; }
  .map-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 720px) {
  .hero-h1 { font-size: 40px !important; }
  .big-h2 { font-size: 30px !important; }
  .pad-resp { padding-left: 18px !important; padding-right: 18px !important; }
  .stats-4 { grid-template-columns: 1fr 1fr !important; }
  .stats-4 > * { border-right: none !important; border-bottom: 1px solid rgba(0,0,0,0.1); }
}