/* ==========================================================
   spyke — Landingpage
   Baut ausschließlich auf den Tokens aus spyke.css auf.
   Reihenfolge der Blöcke = Reihenfolge der Sektionen im HTML.
   ========================================================== */

:root {
  /* Zwischenstufen der neutralen Treppe, die der Design-Prototyp nutzt.
     Keine neuen Markenfarben, nur Abstufungen im selben Hue (106). */
  --n-25:  oklch(0.985 0.003 106);  /* Kopfzeilen von Panels */
  --n-75:  oklch(0.95 0.006 106);   /* sehr feine Trennlinien */
  --n-150: oklch(0.90 0.006 106);   /* Standard-Rahmen der Karten */

  /* Fließtext auf hellem Grund, wärmer als --schwarz */
  --text-2: #3a3a35;

  --wipe: var(--dauer) var(--ease);
}

/* --- Grundgerüst ------------------------------------------------------- */

.lp { font-weight: 300; }

.bereich { max-width: var(--seitenbreite); margin: 0 auto; padding: 0 24px; }

.lp .label-klein {
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--n-700);
}
.lp .label-mini {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--n-600);
}

/* In em statt px: Die Schriftgroesse ist fliessend (clamp bis 54px), eine
   feste Grenze von 640px liess die Zeile auf breiten Bildschirmen
   umbrechen, obwohl Platz war. 14.5em entspricht bei mittlerer
   Schriftgroesse den bisherigen 640px und waechst mit. */
.lp h2 { max-width: 14.5em; }
.lp .fliess { color: var(--text-2); line-height: 1.6; }

/* Karte, weiß — Basis für alle Bento-Kacheln */
.karte-w {
  background: #ffffff;
  border: 1px solid var(--n-150);
  border-radius: var(--r-card);
  padding: 28px;
}

/* Buttons: Mechanik kommt aus spyke.css (.btn / .btn-primaer / …),
   hier nur die Größen, die der Prototyp verwendet. */
.btn-s  { padding: 11px 22px; }
.btn-m  { padding: 13px 26px; }
.btn-l  { padding: 15px 32px; }
.btn { text-decoration: none; background-image: linear-gradient(115deg, var(--gelb) 50%, var(--schwarz) 50%); }
a.btn:hover { background-size: 260% 100%; }
.btn-sekundaer, .btn-sekundaer-dunkel { background-image: linear-gradient(115deg, var(--gelb) 50%, rgba(0,0,0,0) 50%); }

/* Pfeil-Link: der Strich wächst beim Hover */
.pfeil-link {
  font-size: 13.5px; font-weight: 500; color: var(--schwarz);
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 10px;
  width: 158px;
  background-image: none;
  transition: width var(--wipe);
}
.pfeil-link:hover { width: 176px; background-size: 0 2px; }
.pfeil-link.breit { width: 172px; }
.pfeil-link.breit:hover { width: 190px; }
.pfeil-link > span:first-child { white-space: nowrap; }
.pfeil-strich {
  flex: 1; height: 1.5px; background: var(--schwarz);
  position: relative; min-width: 10px;
}
.pfeil-strich::after {
  content: ""; position: absolute; right: 0; top: -3.2px;
  width: 7px; height: 7px;
  border-top: 1.5px solid var(--schwarz);
  border-right: 1.5px solid var(--schwarz);
  transform: rotate(45deg);
}

/* Gelber Aufzählungspunkt in den Slider-Listen */
.bullet {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gelb); flex: none;
}

/* Fenster-Chrome (drei graue Punkte) */
.chrome-punkte { display: flex; gap: 6px; }
.chrome-punkte span {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--n-200); display: inline-block;
}

/* --- Nav --------------------------------------------------------------- */

.nav {
  position: sticky; top: 16px; z-index: 50;
  display: flex; justify-content: center; flex-wrap: wrap;
  padding: 16px 24px 0;
}
.nav-pill {
  display: flex; align-items: center; gap: 32px;
  background: #ffffff;
  border: 1px solid var(--n-100);
  border-radius: var(--r-pill);
  padding: 10px 12px 10px 24px;
  box-shadow: 0 8px 24px rgba(11, 11, 11, 0.06);
  max-width: 920px; width: 100%;
}
.nav-logo { height: 22px; display: block; }
/* Bild-Links tragen keinen Unterstrich: Der Verlauf aus spyke.css liefe
   sonst quer unter dem Logo durch. */
.nav-logo-link, .footer-marke a { background-image: none; padding-bottom: 0; }
.nav-logo-link { display: block; flex: none; }
.nav-links { display: flex; gap: 26px; margin-left: auto; align-items: center; }
.nav-links a {
  font-size: 14px; font-weight: 500;
  /* Oben dasselbe Polster wie unten: Sonst sitzt das Kaestchen tiefer als
     seine Schrift, und die Navigation zentriert daneben die Knoepfe. Die
     Schrift stuende dann drei Pixel ueber der Knopfschrift. */
  padding: var(--unterstrich-abstand) 0;
  text-decoration: none;
  /* Der Unterstrich ist ein Verlauf, keine Border: So lässt sich seine
     Breite animieren, ohne das Layout zu verschieben. */
  background-image: linear-gradient(var(--schwarz), var(--schwarz));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size var(--wipe);
}
.nav-links a:hover,
.nav-links a:focus-visible { background-size: 100% 2px; }

/* Die aktuelle Seite bleibt dauerhaft unterstrichen und animiert nicht mit. */
.nav-links a[aria-current="page"] { background-size: 100% 2px; transition: none; }
/* Im Mobilmenue bleibt die offene Seite markiert: dort ist es die einzige
   Orientierung. Im Footer nicht mehr — dort sollen Linien nur beim
   Ueberfahren erscheinen, die obere Navigation zeigt die Seite ohnehin an.
   Das aria-current-Merkmal bleibt in beiden Faellen fuer Screenreader. */
.mobile-menu a[aria-current="page"] { text-decoration: underline; text-underline-offset: var(--unterstrich-abstand); }
/* Neuer Bereich, im Entwurf gelb hervorgehoben */
.footer-liste a.neu { color: var(--gelb); }
.nav-cta { white-space: nowrap; }

.burger {
  display: none; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid var(--n-150);
  background: transparent; cursor: pointer; flex: none; padding: 0;
}
.burger span {
  width: 16px; height: 1.8px; background: var(--schwarz);
  display: block; transition: transform var(--wipe), opacity 0.3s;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); }

.mobile-menu {
  display: none;
  width: 100%; max-width: 920px;
  background: #ffffff;
  border: 0 solid var(--n-100);
  border-radius: var(--r-block);
  box-shadow: 0 8px 24px rgba(11, 11, 11, 0.06);
  margin-top: 8px;
  overflow: hidden;
  max-height: 0; opacity: 0;
  transition: max-height var(--wipe), opacity var(--wipe);
}
.mobile-menu.offen { max-height: 360px; opacity: 1; border-width: 1px; }
.mobile-menu ul { list-style: none; margin: 0; padding: 18px 24px; display: flex; flex-direction: column; gap: 4px; }
.mobile-menu a { font-size: 15px; font-weight: 500; padding: 10px 0; display: block; }

/* --- Hero -------------------------------------------------------------- */

.hero {
  max-width: var(--seitenbreite); margin: 0 auto;
  padding: 96px 24px 80px;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 48px; align-items: center;
}
.hero .label-klein { margin-bottom: 20px; }
.hero h1 { margin: 0 0 22px; }
.hero-lead { font-size: var(--fs-body-l); max-width: 520px; margin-bottom: 32px; }
.hero-ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 22px; }

.hero-karte {
  background: #ffffff;
  border: 1px solid var(--n-150);
  border-radius: var(--r-card);
  padding: 36px;
  box-shadow: var(--schatten-float);
  max-width: 490px; justify-self: end; width: 100%;
}
.hero-karte .label-mini { letter-spacing: 0.14em; margin-bottom: 24px; }
.schritte { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.schritt { display: flex; gap: 16px; cursor: pointer; }
.schritt-spalte { display: flex; flex-direction: column; align-items: center; }
.schritt-linie { width: 1.5px; flex: 1; background: var(--n-150); margin: 4px 0; }
.schritt-punkt {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
  background: var(--schwarz); color: var(--offwhite);
  transition: background var(--wipe), color var(--wipe), transform var(--wipe);
}
.schritt.aktiv .schritt-punkt { background: var(--gelb); color: var(--schwarz); }
.schritt:hover .schritt-punkt { transform: scale(1.15); }
.schritt-text { padding-bottom: 20px; }
.schritt:last-child .schritt-text { padding-bottom: 0; }
.schritt-titel { font-size: 14.5px; font-weight: 600; }
.schritt-info { font-size: 13px; line-height: 1.55; color: var(--text-2); margin-top: 3px; }

/* --- Kundenlogos ------------------------------------------------------- */

.kunden { max-width: var(--seitenbreite); margin: 0 auto; padding: 0 24px 80px; }
.kunden .label-mini {
  font-size: 12px; letter-spacing: 0.16em;
  text-align: center; margin-bottom: 28px;
  /* Ist ein h2 und erbt sonst die 640px-Begrenzung der Sektionsueberschriften,
     wodurch die Zentrierung nur innerhalb dieser 640px stattfaende. */
  max-width: none;
}
.marquee { overflow: hidden; position: relative; }
.marquee::before,
.marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0;
  width: 80px; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--offwhite), rgba(247, 247, 242, 0)); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--offwhite), rgba(247, 247, 242, 0)); }
.marquee-spur {
  display: flex; align-items: center; gap: 72px;
  width: max-content;
  animation: marquee 45s linear infinite;
}
.marquee-spur img { height: 88px; width: auto; object-fit: contain; }
.marquee-spur img.breit { height: 42px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-spur { animation: none; } }

/* --- Services / Slider ------------------------------------------------- */

.services { max-width: var(--seitenbreite); margin: 0 auto; padding: 0 24px 96px; }
.services .label-klein { margin-bottom: 12px; }
.services h2 { margin: 0 0 40px; }
.slider-huelle { display: flex; flex-direction: column; gap: 20px; }

.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab {
  padding: 8px 18px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
  color: var(--text-2);
  border: 1px solid var(--n-200);
  background-image: linear-gradient(115deg, var(--gelb) 50%, rgba(0, 0, 0, 0) 50%);
  background-size: 260% 100%; background-repeat: no-repeat; background-position: 100% 0;
  font-family: var(--font);
  transition: background-position var(--wipe), color 0.4s var(--ease), border-color var(--wipe);
}
.tab[aria-selected="true"] {
  color: var(--offwhite); border-color: var(--schwarz);
  background-image: linear-gradient(115deg, var(--gelb) 50%, var(--schwarz) 50%);
}
.tab:hover { background-position: 0% 0; color: var(--schwarz); border-color: var(--gelb); }

.slider-fenster {
  background: #ffffff;
  border: 1px solid var(--n-150);
  border-radius: var(--r-card);
  overflow: hidden; position: relative;
}
.slider-spur {
  display: flex;
  cursor: grab; touch-action: pan-y;
  transition: transform var(--wipe);
}
.slider-spur.zieht { cursor: grabbing; transition: none; }

.slide { min-width: 100%; display: grid; grid-template-columns: 1fr 1.15fr; }
.slide-grafik { position: relative; min-height: 320px; overflow: hidden; background: var(--n-900); }
.slide-grafik.hell { background: var(--gelb); }
.slide-grafik canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.slide-text { padding: 40px 44px; display: flex; flex-direction: column; gap: 12px; }
.slide-text .label-mini { letter-spacing: 0.16em; }
.slide-titel { font-size: 26px; font-weight: 600; letter-spacing: -0.015em; }
.slide-lead { font-size: 14.5px; line-height: 1.6; color: var(--text-2); max-width: 420px; }
.slide-liste {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 7px;
  font-size: 13.5px; color: var(--text-2);
}
.slide-liste li { display: flex; align-items: center; gap: 10px; }

.dots { display: flex; gap: 7px; align-items: center; justify-content: center; }
.dot {
  width: 7px; height: 7px; border-radius: var(--r-pill);
  background: var(--n-300); border: none; padding: 0; cursor: pointer;
  transition: width var(--wipe), background 0.3s ease;
}
.dot[aria-current="true"] { width: 22px; background: var(--gelb); }

/* --- Kompetenz & Connectoren ------------------------------------------- */

.kompetenz {
  max-width: var(--seitenbreite); margin: 0 auto;
  padding: 0 24px 96px;
  display: flex; flex-direction: column; gap: 20px;
}
.kompetenz .label-klein { margin-bottom: 12px; }
.kompetenz h2 { max-width: 720px; }
.bento { display: grid; gap: 20px; }
.bento-schmal-breit { grid-template-columns: 1fr 1.6fr; }
.bento-breit-schmal { grid-template-columns: 1.6fr 1fr; }
.kachel-titel { font-size: 17px; font-weight: 600; }
.kachel-text { font-size: 13.5px; font-weight: 300; line-height: 1.55; color: var(--text-2); }

.karte-w.stapel { display: flex; flex-direction: column; gap: 16px; }
.karte-w.stapel-eng { display: flex; flex-direction: column; gap: 6px; }

/* Microsoft-Quellen */
.ms-panel {
  background: var(--offwhite);
  border: 1px solid var(--n-150);
  border-radius: var(--r-tile);
  padding: 14px;
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 12px 32px rgba(11, 11, 11, 0.08);
}
.ms-suche {
  display: flex; align-items: center; gap: 8px;
  background: #ffffff; border: 1px solid var(--n-150);
  border-radius: var(--r-pill); padding: 8px 14px;
  color: var(--n-500); margin-bottom: 10px;
  font-size: 12.5px; font-weight: 300;
}
.ms-zeile {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 6px; border-radius: 10px; cursor: pointer;
  background: transparent; border: none; width: 100%;
  font-family: var(--font); text-align: left;
  transition: background var(--wipe);
}
.ms-zeile:hover { background: #ffffff; }
.ms-zeile-links { display: flex; align-items: center; gap: 11px; }
.ms-icon { width: 22px; height: 22px; flex: none; object-fit: contain; }
.ms-name { font-size: 13.5px; font-weight: 500; }

.schalter {
  width: 34px; height: 19px; border-radius: var(--r-pill);
  background: var(--n-200); position: relative; flex: none;
  transition: background var(--wipe);
}
.schalter::after {
  content: ""; position: absolute; top: 2.5px; left: 2.5px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #ffffff; box-shadow: 0 1px 3px rgba(11, 11, 11, 0.2);
  transition: left var(--wipe), background var(--wipe);
}
.schalter.an { background: var(--gelb); }
.schalter.an::after { left: 17.5px; background: var(--schwarz); }

/* Connector-Fenster, gekippt */
.connector-buehne {
  position: relative; flex: 1; min-height: 280px;
  margin-top: 8px; overflow: hidden; border-radius: 12px;
}
.connector-fenster {
  position: absolute; left: 6%; top: 22px; right: -60px;
  transform: rotate(-5deg); transform-origin: top left;
  background: #ffffff; border: 1px solid var(--n-150);
  border-radius: var(--r-tile);
  box-shadow: var(--schatten-float); overflow: hidden;
}
.connector-kopf {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--n-100);
  background: var(--n-25);
}
.connector-kopf-titel { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.connector-suche {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: #ffffff; border: 1px solid var(--n-150);
  border-radius: var(--r-pill); padding: 6px 12px;
  color: var(--n-500); font-size: 12px; font-weight: 300;
}
.connector-zahl {
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--n-600); white-space: nowrap;
}
.connector-zeile {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px; border-bottom: 1px solid var(--n-75);
}
.connector-zeile:last-child { border-bottom: none; }
.connector-zeile-links { display: flex; align-items: center; gap: 12px; }
.connector-icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--offwhite); border: 1px solid var(--n-150);
  display: flex; align-items: center; justify-content: center;
  flex: none; overflow: hidden;
}
.connector-icon img { object-fit: contain; display: block; }
.connector-name { font-size: 13px; font-weight: 500; }
.connector-meta { font-size: 11px; font-weight: 300; color: var(--n-600); }

/* Betriebsübersicht */
.betrieb-kopf {
  display: flex; align-items: center; gap: 14px;
  margin: 0 -28px; padding: 10px 28px;
  border-top: 1px solid var(--n-100);
  border-bottom: 1px solid var(--n-100);
  background: var(--n-25);
  font-size: 12px; font-weight: 500; color: var(--n-600);
}
.tabelle { display: flex; flex-direction: column; }
.tabelle-zeile {
  display: grid; grid-template-columns: 2fr 1.4fr 1fr; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--n-100);
  align-items: center;
}
.tabelle-zeile:last-child { border-bottom: none; }
.tabelle-kopf {
  padding: 8px 0; border-bottom: 1px solid var(--n-150);
  font-size: 11px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--n-600);
}
.tabelle-name { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500; }
.tabelle-name img { height: 14px; width: auto; max-width: 18px; object-fit: contain; }
.tabelle-bereich { font-size: 13px; font-weight: 300; color: var(--text-2); }
.tabelle-status { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; }
.status-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--gelb); display: inline-block; }
.status-punkt.wartet { background: var(--n-300); }

/* Warum spyke */
.warum-liste { display: flex; flex-direction: column; gap: 14px; flex: 1; list-style: none; margin: 0; padding: 0; }
.warum-item {
  border: 1px solid var(--n-150); border-radius: var(--r-tile);
  padding: 16px 18px; display: flex; align-items: center; gap: 14px; flex: 1;
  transition: transform var(--wipe), box-shadow var(--wipe), border-color var(--wipe);
}
.warum-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--schatten-hover);
  border-color: var(--gelb);
}
.warum-icon {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--schwarz);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.warum-text { font-size: 13.5px; font-weight: 300; line-height: 1.5; color: var(--text-2); }

/* Datensouveränität (dunkel) */
.souv {
  background: var(--schwarz); color: var(--offwhite);
  border-radius: var(--r-card); padding: 28px;
  display: flex; flex-direction: column; gap: 16px;
}
.souv .kachel-text { color: var(--n-300); }
.souv-pills {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 8px; align-content: flex-start;
  list-style: none; padding: 0;
}
.souv-pill {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid rgba(247, 247, 242, 0.25);
  border-radius: var(--r-pill); padding: 9px 16px; min-width: 0;
  /* Kein nowrap: "Kein Training auf Ihren Daten" ist breiter als die Spalte
     und lief sonst über den Rand. Lange Beschriftungen brechen jetzt um,
     die Pille wächst mit. */
  font-size: 13.5px; font-weight: 500;
  transition: border-color var(--wipe), background var(--wipe);
}
.souv-pill:hover { border-color: var(--gelb); background: rgba(242, 254, 19, 0.06); }
.souv-pill svg { flex: none; }

/* Souveräne KI-Plattformen */
.plattformen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.plattform {
  border: 1px solid var(--n-150); border-radius: var(--r-tile);
  padding: 20px 18px; display: flex; flex-direction: column; gap: 12px;
  transition: box-shadow var(--wipe), transform var(--wipe);
}
.plattform:hover { box-shadow: var(--schatten-hover); transform: translateY(-3px); }
.plattform-logo { height: 30px; display: flex; align-items: center; }
.plattform-logo img { max-height: 30px; max-width: 100%; width: auto; object-fit: contain; display: block; }
.plattform-logo img.klein { max-height: 26px; }
.plattform-text { font-size: 12.5px; font-weight: 300; line-height: 1.5; color: var(--text-2); }

/* Umbruch statt Ueberlauf: Text und Logo standen in einer festen Zeile
   mit 327px Mindestbreite und haben die Kachel auf schmalen Displays
   ueber die Fensterbreite gedehnt. */
.cloud-basis {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 16px;
  border: 1px solid var(--n-150); background: var(--offwhite);
  border-radius: var(--r-tile); padding: 14px 18px; margin-top: 14px;
}
.cloud-basis-links { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 13px; font-weight: 500; }
.cloud-basis img { height: 22px; width: auto; max-width: 100%; object-fit: contain; display: block; }

/* --- Academy ----------------------------------------------------------- */

.academy { background: var(--n-900); position: relative; overflow: hidden; }
.academy > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.academy-inhalt {
  position: relative; max-width: var(--seitenbreite); margin: 0 auto;
  padding: 96px 24px;
  display: flex; gap: 48px; align-items: center; flex-wrap: wrap;
}
.academy-text { max-width: 560px; }
.academy-text .label-klein { letter-spacing: 0.18em; color: var(--n-300); margin-bottom: 18px; }
.academy-text h2 { color: var(--offwhite); margin: 0 0 18px; }
.academy-lead { font-size: 15.5px; line-height: 1.6; color: var(--n-300); margin-bottom: 28px; }

.academy-kacheln {
  margin-left: auto; display: grid;
  grid-template-columns: repeat(2, minmax(160px, 248px)); gap: 14px;
}
.academy-kachel {
  background: rgba(247, 247, 242, 0.06);
  border: 1px solid rgba(247, 247, 242, 0.16);
  border-radius: var(--r-tile); padding: 18px 20px;
  transition: border-color var(--wipe);
}
.academy-kachel:hover { border-color: var(--gelb); }
.academy-kachel-titel { font-size: 14.5px; font-weight: 500; color: var(--offwhite); margin-bottom: 6px; }
.academy-kachel-text { font-size: 12.5px; line-height: 1.5; color: var(--n-300); }

/* --- Cases ------------------------------------------------------------- */

.cases { max-width: var(--seitenbreite); margin: 0 auto; padding: 96px 24px; }
.cases .label-klein { margin-bottom: 12px; }
.cases h2 { margin: 0 0 40px; }
.case-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.case {
  background: #ffffff; border: 1px solid var(--n-150);
  border-radius: var(--r-card); padding: 28px;
  transition: transform var(--wipe), box-shadow var(--wipe);
}
.case:hover { transform: translateY(-3px); box-shadow: var(--schatten-hover); }
.case.dunkel { background: var(--schwarz); color: var(--offwhite); border: none; }
.case.dunkel:hover { box-shadow: 0 14px 32px rgba(11, 11, 11, 0.18); }
.case .label-mini { margin-bottom: 16px; }
.case.dunkel .label-mini { color: var(--n-500); }
.case-zahl { font-size: 44px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; margin-bottom: 10px; }
.case-text { font-size: 14px; line-height: 1.6; color: var(--text-2); }
.case.dunkel .case-text { color: var(--n-300); }

/* --- FAQ --------------------------------------------------------------- */

.faq { max-width: var(--seitenbreite); margin: 0 auto; padding: 0 24px 96px; }
.faq .label-klein { margin-bottom: 12px; }
.faq h2 { margin: 0 0 40px; max-width: 720px; }
.faq-karte {
  background: #ffffff; border: 1px solid var(--n-150);
  border-radius: var(--r-block); padding: 16px 40px;
  box-shadow: var(--schatten-card);
  display: flex; flex-direction: column;
}
.faq details + details { border-top: 1px solid var(--n-100); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 4px; font-size: 16px; font-weight: 500;
  list-style: none; cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; border-radius: 4px; }
.faq-plus {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--schwarz); color: var(--gelb);
  display: flex; align-items: center; justify-content: center;
  flex: none; font-size: 16px; font-weight: 400;
  transition: transform var(--wipe), background var(--wipe), color var(--wipe);
}
.faq details[open] .faq-plus { transform: rotate(45deg); background: var(--gelb); color: var(--schwarz); }
.faq-antwort {
  font-size: 14.5px; line-height: 1.65; color: var(--text-2);
  padding: 0 40px 22px 4px; max-width: 860px;
}
/* Weiches Auf- und Zuklappen, wo der Browser es unterstützt */
:root { interpolate-size: allow-keywords; }
.faq details::details-content {
  block-size: 0; overflow-y: clip;
  transition: content-visibility var(--dauer) allow-discrete, block-size var(--dauer) var(--ease);
}
.faq details[open]::details-content { block-size: auto; }

/* --- Kontakt ----------------------------------------------------------- */

.kontakt { background: var(--n-100); padding: 96px 24px; text-align: center; }
.kontakt-inner { max-width: var(--seitenbreite); margin: 0 auto; }
.kontakt h2 { margin: 0 auto 18px; max-width: none; }
.kontakt-lead { font-size: 15.5px; line-height: 1.6; color: var(--text-2); margin-bottom: 32px; }

/* --- Footer ------------------------------------------------------------ */

.footer { background: var(--schwarz); color: var(--offwhite); }
.footer-inner { max-width: var(--seitenbreite); margin: 0 auto; padding: 64px 24px 40px; }

.bubble {
  background: var(--n-900); border-radius: var(--r-card);
  padding: 28px 32px; margin-bottom: 48px;
  display: flex; gap: 32px; align-items: center; flex-wrap: wrap;
  transition: background var(--wipe);
}
.bubble:hover { background: var(--gelb); }
.bubble:hover .bubble-titel,
.bubble:hover .bubble-text,
.bubble:hover .label-mini,
.bubble:hover .bubble-cta { color: var(--schwarz); }
.bubble:hover .bubble-cta { border-color: var(--schwarz); }
.bubble-text-block { max-width: 560px; }
.bubble .label-mini { margin-bottom: 10px; transition: color var(--wipe); }
.bubble-titel {
  font-size: 20px; font-weight: 500; letter-spacing: -0.015em;
  color: var(--offwhite); margin-bottom: 8px; text-wrap: pretty;
  transition: color var(--wipe);
}
.bubble-text { font-size: 13.5px; line-height: 1.6; color: var(--n-500); transition: color var(--wipe); }
.bubble-cta {
  display: inline-block; color: var(--offwhite);
  font-size: 14px; font-weight: 500; padding: 13px 26px;
  border-radius: var(--r-pill); border: 1px solid rgba(247, 247, 242, 0.3);
  /* Slash-Wipe wie bei den Buttons, hier schwarz auf der gelben Karte */
  background-image: linear-gradient(115deg, var(--schwarz) 50%, rgba(0, 0, 0, 0) 50%);
  background-repeat: no-repeat;
  background-size: 260% 100%;
  background-position: 100% 0;
  transition: background-position var(--wipe), color var(--wipe), border-color var(--wipe);
}
.bubble-cta:hover { background-position: 0 0; }
/* Schlaegt die Schwarzfaerbung der Karte, sobald der Knopf selbst gefuellt ist */
.bubble:hover .bubble-cta:hover { color: var(--offwhite); }

.footer-spalten {
  display: flex; gap: 48px; flex-wrap: wrap;
  justify-content: space-between; margin-bottom: 48px;
}
.footer-marke img { height: 24px; width: auto; display: block; filter: invert(1); margin-bottom: 14px; }
.footer-marke p { font-size: 13.5px; color: var(--n-500); max-width: 280px; line-height: 1.6; margin: 0; }
.footer-listen { display: flex; gap: 64px; flex-wrap: wrap; }
.footer-liste { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.footer-liste .label-mini { letter-spacing: 0.16em; margin-bottom: 4px; }
.footer-liste a { color: var(--offwhite); font-size: 13.5px; }
.footer-kontakt { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; font-style: normal; }
.footer-kontakt a { color: var(--offwhite); font-size: 13.5px; align-self: flex-start; }
.footer-kontakt .footer-adresse {
  font-size: 13.5px; color: var(--n-500); line-height: 1.6;
  background-image: none; transition: color var(--wipe);
}
/* Mehrzeilige Adresse: der Wisch-Unterstrich passt hier nicht, darum Aufhellen. */
.footer-kontakt .footer-adresse:hover { color: var(--offwhite); text-decoration: underline; text-underline-offset: 3px; }
/* LinkedIn: lokales SVG, im dunklen Footer invertiert wie das spyke-Logo.
   Unterstrich nur unter dem Text, nicht unter dem Zeichen. */
.footer-linkedin { display: inline-flex; align-items: center; gap: 8px; background-image: none; }
.footer-linkedin img { width: 16px; height: 16px; margin: 0; flex: none; filter: invert(1); }
.footer-linkedin span {
  padding-bottom: var(--unterstrich-abstand);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px;
  transition: background-size var(--dauer) var(--ease);
}
.footer-linkedin:hover span { background-size: 100% 2px; }
.footer-schluss {
  border-top: 1px solid var(--n-900); padding-top: 24px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--n-600);
}

/* --- Responsive -------------------------------------------------------- */

/* minmax(0, 1fr) statt 1fr: Eine blanke 1fr-Spalte schrumpft nicht unter
   die Mindestbreite ihres Inhalts und schiebt dann die ganze Seite auf. */
@media (max-width: 1080px) {
  .bento-schmal-breit,
  .bento-breit-schmal { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 980px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: 48px; }
  .hero-karte { justify-self: start; }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .burger { display: flex; }
  .mobile-menu { display: block; }
  .nav-pill { gap: 16px; }
  .nav-cta { margin-left: auto; }
}

@media (max-width: 800px) {
  .slide { grid-template-columns: 1fr; grid-template-rows: 240px 1fr; }
  .slide-grafik { min-height: 240px; height: 240px; }
  .slide-text { padding: 32px 28px; }
  .plattformen { grid-template-columns: 1fr; }
  .faq-karte { padding: 8px 24px; }
  .faq-antwort { padding-right: 8px; }
}

@media (max-width: 560px) {
  .academy-kacheln { grid-template-columns: minmax(0, 1fr); }
  .souv-pills { grid-template-columns: minmax(0, 1fr); }
  /* "Automatisierung" ist in der Hero-Groesse 354px breit und passt in
     keine 327px-Spalte. Trennung nach deutschen Regeln (lang="de"),
     Notumbruch als Rueckfall, falls der Browser nicht trennt. */
  .lp h1, .lp h2 { hyphens: auto; overflow-wrap: break-word; }
  .academy-kacheln { margin-left: 0; }
  .marquee-spur { gap: 48px; }
  .marquee-spur img { height: 64px; }
}

/* Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .slider-spur { transition: none; }
}

/* --- Rechtstexte (Impressum, Datenschutz) ------------------------------ */

.rechtstext {
  max-width: 820px; margin: 0 auto;
  padding: 56px 24px var(--abstand-sektion);
}
.rechtstext h1 { margin: 0 0 32px; }
.rechtstext h2 {
  font-size: var(--fs-h4); margin: 40px 0 12px;
  max-width: none; letter-spacing: -0.01em;
}
.rechtstext h3 { font-size: 16px; font-weight: 600; margin: 24px 0 8px; letter-spacing: 0; }
.rechtstext p { font-size: 15px; line-height: 1.7; color: var(--text-2); margin: 0 0 14px; }
.rechtstext ul { font-size: 15px; line-height: 1.7; color: var(--text-2); margin: 0 0 14px; padding-left: 22px; }
.rechtstext li { margin-bottom: 4px; }
.rechtstext a { color: var(--schwarz); }
.rechtstext .vorspann { font-size: var(--fs-body-l); color: var(--text-2); margin-bottom: 32px; }

/* Anschrift und andere Blöcke, die ihre Zeilenumbrüche behalten */
.rechtstext .block {
  background: #ffffff; border: 1px solid var(--n-150);
  border-radius: var(--r-tile); padding: 20px 24px;
  font-size: 15px; line-height: 1.7; margin: 0 0 14px;
}
.rechtstext .block strong { font-weight: 600; }

/* Inhaltsverzeichnis */
.rechtstext .inhalt {
  border-left: 2px solid var(--gelb); padding: 4px 0 4px 18px; margin: 0 0 32px;
  list-style: none;
}
.rechtstext .inhalt li { margin-bottom: 6px; font-size: 14px; }

.zurueck { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }

/* --- Einblenden beim Scrollen ------------------------------------------ */

.reveal {
  opacity: 0; transform: translateY(36px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.drin { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* --- Verweise auf PDF-Dateien ------------------------------------------ */

.pdf-link { font-weight: 500; background-image: none; }
/* Unterstrich nur unter dem Linktext, nicht unter dem PDF-Kuerzel */
.pdf-text {
  padding-bottom: var(--unterstrich-abstand);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px;
  transition: background-size var(--dauer) var(--ease);
}
.pdf-link:hover .pdf-text { background-size: 100% 2px; }
.pdf-hinweis {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--n-600);
  border: 1px solid var(--n-200);
  border-radius: var(--r-pill);
  padding: 2px 8px; margin-left: 8px;
  white-space: nowrap;
}
/* Im dunklen Footer hellere Kontur */
.footer .pdf-hinweis { color: var(--n-500); border-color: rgba(247, 247, 242, 0.25); }

/* --- Sprachumschalter --------------------------------------------------- */

/* Nutzt .btn .btn-sekundaer .btn-s aus spyke.css und hat damit dieselbe
   Groesse und denselben gelben Wipe wie der Erstgespraechs-Knopf daneben. */
.sprach-wechsel {
  flex: none;
  letter-spacing: 0.06em;
  /* Die Pille haelt 32px Abstand zwischen allen Elementen. Zwischen den
     beiden Knoepfen ist das zu viel, sie gehoeren optisch zusammen. */
  margin-left: -22px;
}

/* Unter 900px wird die Navigationspille sonst zu eng: Logo, Erstgespräch,
   Sprachknopf und Burger passen nicht nebeneinander. Der Sprachwechsel
   wandert deshalb ins Burger-Menü. */
@media (max-width: 900px) {
  .nav-pill .sprach-wechsel { display: none; }
}
.mobile-sprache { border-top: 1px solid var(--n-100); margin-top: 6px; padding-top: 6px; }