/* =========================================================================
   od | web TV — Rest-Website im opta data Performance Layout
   -------------------------------------------------------------------------
   Palette aus dem Styleguide:
     hell            RGB 118 196 183  -> #76c4b7
     logo dunkel     RGB   0 105 134  -> #006986
     hintergrund     RGB   5  36  48  -> #052430
   Lila kommt genau einmal vor: im Verlauf des Header-Bildes, als Bild fuer
   den Uebergang aus der alten in die neue Welt.
   ========================================================================= */

:root {
  /* Grundflaechen */
  --ci-grund:        #052430;   /* Seitenhintergrund                     */
  --ci-grund-tief:   #03161e;   /* Fussbereich, Metaleiste               */
  --ci-flaeche:      #093344;   /* abgesetzte Abschnitte und Karten      */
  --ci-linie:        #16495c;   /* Trennlinien, Kartenrahmen             */

  /* Marke */
  --ci-petrol:       #006986;   /* Logo dunkel, Flaechen                 */
  --ci-mint:         #76c4b7;   /* Primaerton fuer Buttons und Akzente   */
  --ci-mint-hell:    #a9ddd4;   /* Hover                                 */

  /* Schrift */
  --ci-text:         #e7f2f0;
  --ci-text-leise:   #9bb8b8;

  /* Lila kommt nur im Hero-Verlauf vor. Grundton zur Orientierung:
     #5c2483 — die Stops stehen dort direkt als rgba, weil sie eigene
     Deckkraftwerte brauchen. */

  /* CI-Hausschrift hier eintragen und selbst hosten (nicht Google Fonts).
     Die Performance-Seite nutzt eine geometrische Grotesk mit runden
     Punzen — als Fallback kommt eine Systemschrift zum Einsatz. */
  --schrift: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --spalte: 1180px;
  --radius: 14px;
  --radius-gross: 20px;
}

/* --- Grundlagen ------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ci-text);
  /* Ruhige, organische Aufhellungen wie auf der Performance-Seite. */
  background:
    radial-gradient(58% 42% at 10% 14%, rgba(0,105,134,.32) 0%, rgba(0,105,134,0) 62%),
    radial-gradient(52% 38% at 92% 4%,  rgba(118,196,183,.12) 0%, rgba(118,196,183,0) 66%),
    var(--ci-grund);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.16; margin: 0 0 .5em; font-weight: 600; color: #fff; }
h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); letter-spacing: -.015em; }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1em; max-width: 68ch; }

a { color: var(--ci-mint); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--ci-mint-hell); }

:focus-visible { outline: 3px solid var(--ci-mint); outline-offset: 3px; border-radius: 4px; }

img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

.spalte { width: min(100% - 2.5rem, var(--spalte)); margin-inline: auto; }

.skiplink {
  position: absolute; left: -9999px;
  background: var(--ci-mint); color: var(--ci-grund);
  padding: .7rem 1.1rem; z-index: 100; border-radius: 0 0 var(--radius) 0;
  font-weight: 600;
}
.skiplink:focus { left: 0; top: 0; }

/* Versal-Vorzeile wie auf der Performance-Seite. */
.vorzeile {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ci-mint);
  margin: 0 0 1.3rem;
}

/* --- Buttons ---------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: .85rem 1.7rem;
  border-radius: 999px;
  /* font-family und background muessen gesetzt werden, sonst zieht sich ein
     <button> die Standardschrift und die graue Flaeche des Browsers. */
  font-family: inherit;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primaer   { background: var(--ci-mint); color: var(--ci-grund); }
.btn-primaer:hover { background: var(--ci-mint-hell); color: var(--ci-grund); }
.btn-sekundaer { background: transparent; border-color: var(--ci-mint); color: var(--ci-mint); }
.btn-sekundaer:hover { background: var(--ci-mint); color: var(--ci-grund); }
.btn-hell      { background: #fff; color: var(--ci-grund); }
.btn-hell:hover { background: var(--ci-mint-hell); color: var(--ci-grund); }
.btn-rand-hell { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.btn-rand-hell:hover { background: #fff; color: var(--ci-grund); border-color: #fff; }

/* --- Kopfbereich ------------------------------------------------------ */

.kopf { background: transparent; }
.kopf .spalte { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding: 1.6rem 0 1.4rem; }

.marke { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: var(--ci-text); }
.marke:hover { color: var(--ci-text); }
.marke img { height: 46px; width: auto; }
.marke-produkt {
  padding-left: 1rem;
  border-left: 1px solid var(--ci-linie);
  font-size: 1.02rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Einziger Bedienpunkt im Kopf: der Login. Es gibt keine Hauptnavigation
   mehr — die Wege stehen als Kacheln auf der Startseite. */
.kopf-login {
  margin-left: auto;
  font-size: .84rem; padding: .7rem 1.6rem;
  text-transform: uppercase; letter-spacing: .06em;
}

/* Schmale Rueckleiste auf den beiden Unterseiten */
.zurueck { padding: .2rem 0 .6rem; }
.zurueck a {
  font-size: .88rem; color: var(--ci-text-leise);
  text-decoration: none; border-bottom: 1px solid var(--ci-linie);
  padding-bottom: .15rem;
}
.zurueck a:hover { color: var(--ci-mint); border-color: var(--ci-mint); }

/* =========================================================================
   HERO — der Übergang als Farbverlauf: Lila läuft nach Dunkeltürkis aus
   ========================================================================= */

.hero {
  position: relative;
  overflow: hidden;
  padding: 5.5rem 0 5rem;
  isolation: isolate;
}
.hero-bild {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.hero::after {
  /* Der Übergang: Lila läuft nach rechts ins Dunkeltürkis aus. */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(92, 36, 131, .94)  0%,
    rgba(58, 40, 118, .93) 24%,
    rgba(12, 74,  110, .93) 54%,
    rgba(5,  52,   70, .95) 76%,
    rgba(5,  36,   48, .97) 100%
  );
}

/* -------------------------------------------------------------------------
   Splash-Variante der Startseite: der Verlauf füllt den gesamten sichtbaren
   Bereich und läuft unten exakt in die Seitenfarbe aus. Dadurch merkt man
   den Wechsel zum Inhalt erst beim Scrollen.
   ------------------------------------------------------------------------- */
.hero-splash {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 5rem 0 6.5rem;
}
.hero-splash .hero-bild { opacity: .55; }
.hero-splash::after {
  background: linear-gradient(
    158deg,
    #4a1d6e  0%,
    #38246f 20%,
    #0d4a68 46%,
    #05384a 72%,
    #052430 100%
  );
}
.hero-logo {
  height: clamp(58px, 8vw, 92px);
  width: auto;
  margin: 0 auto 2.8rem;
}

/* Hinweis, dass unterhalb des Splashs noch etwas kommt */
.weiter {
  display: inline-block;
  margin-top: 3.4rem;
  font-size: .84rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(255,255,255,.75);
  text-decoration: none;
}
.weiter::after {
  content: "";
  display: block;
  width: 1px; height: 34px;
  margin: .9rem auto 0;
  background: linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,0));
}
.weiter:hover { color: #fff; }

.hero .spalte { position: relative; z-index: 1; text-align: center; }
.hero h1 { max-width: 20ch; margin-inline: auto; }
.hero .lead { font-size: 1.18rem; color: rgba(255,255,255,.88); max-width: 58ch; margin-inline: auto; }
.hero .aktionen { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.4rem; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* --- Umzugsanimation im Hero ------------------------------------------ */
/* Die Bewegung liegt vollstaendig in diesen Keyframes. Das Markup dazu
   steht in assets/animation.html und wird beim Bauen eingesetzt. */

@keyframes od-rise { from { transform: scaleY(0); opacity: 0 } to { transform: scaleY(1); opacity: 1 } }
@keyframes od-plate { from { opacity: 0; transform: scale(.86) } to { opacity: 1; transform: scale(1) } }
@keyframes od-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes od-out { from { opacity: 1 } to { opacity: 0 } }
@keyframes od-beam { from { transform: scaleY(0); opacity: 0 } 40% { opacity: .85 } to { transform: scaleY(1); opacity: .55 } }
@keyframes od-flow {
  0%   { transform: translateZ(4px) scale(.5); background: #8B4BC4; opacity: 0 }
  14%  { opacity: 1; transform: translateZ(40px) scale(1) }
  70%  { background: #2FB6A9 }
  90%  { opacity: 1 }
  100% { transform: translateZ(252px) scale(.7); background: #7FD4C1; opacity: 0 }
}
@keyframes od-halo { 0%,100% { opacity: .32; transform: scale(1) } 50% { opacity: .6; transform: scale(1.06) } }

.hero-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: 3.5rem;
  align-items: center;
  text-align: left;
}
.hero-raster .hero-text { text-align: left; }
/* Das Logo steht ueber beiden Spalten und bleibt mittig, auch wenn der
   Text daneben linksbuendig laeuft. */
.hero-raster .hero-logo { grid-column: 1 / -1; justify-self: center; margin: 0 0 .8rem; }
.hero-raster h1 { margin-inline: 0; max-width: 15ch; }
.hero-raster .lead { margin-inline: 0; }
.hero-raster .aktionen { justify-content: flex-start; }
.hero-raster .weiter { grid-column: 1 / -1; justify-self: center; margin-top: 1.5rem; }

.hero-figur { margin: 0; }
.anim-ersatz { display: none; width: 100%; }

/* Ohne Bewegungswunsch zeigen wir das Standbild statt der Animation. */
@media (prefers-reduced-motion: reduce) {
  #odAnim { display: none; }
  .anim-ersatz { display: block; }
}

@media (max-width: 1000px) {
  .hero-raster { grid-template-columns: 1fr; gap: 2.8rem; text-align: center; }
  .hero-raster .hero-text { text-align: center; }
  .hero-raster h1 { margin-inline: auto; max-width: 20ch; }
  .hero-raster .lead { margin-inline: auto; }
  .hero-raster .aktionen { justify-content: center; }
  .hero-figur { max-width: 460px; margin-inline: auto; }
}


/* --- Farbschleier im Hero --------------------------------------------- */
/* Ersetzt das Hintergrundfoto. Drei weiche Flecken liegen ueber dem
   Grundverlauf und driften langsam vor sich hin. Jeder sitzt bewusst dort,
   wo der Verlauf die ANDERE Farbe hat — Petrol in der lila Zone, Lila in
   der dunklen. Gleiches auf Gleiches waere zwar in Bewegung, aber nicht zu
   sehen. */

.hero-schleier { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.schleier { position: absolute; inset: 0; }
.schleier i {
  position: absolute; display: block;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}

/* Petrol in die lila Zone oben links */
.schleier-petrol i {
  width: 62%; height: 70%; left: -6%; top: -14%;
  background: radial-gradient(circle at 50% 50%, rgba(0, 138, 158, .80) 0%, rgba(0, 138, 158, 0) 66%);
  animation: schleier-a 34s ease-in-out infinite alternate;
}

/* Lila in die dunkle Zone unten rechts */
.schleier-lila i {
  width: 70%; height: 76%; right: -12%; bottom: -18%;
  background: radial-gradient(circle at 50% 50%, rgba(124, 48, 176, .72) 0%, rgba(124, 48, 176, 0) 68%);
  animation: schleier-b 46s ease-in-out infinite alternate;
}

/* Mintakzent quer durch die Mitte */
.schleier-mint i {
  width: 46%; height: 50%; left: 40%; top: 26%;
  background: radial-gradient(circle at 50% 50%, rgba(118, 196, 183, .44) 0%, rgba(118, 196, 183, 0) 68%);
  animation: schleier-c 58s ease-in-out infinite alternate;
}

@keyframes schleier-a {
  0%   { transform: translate3d(0, 0, 0)       scale(1);    }
  50%  { transform: translate3d(26%, 16%, 0)   scale(1.22); }
  100% { transform: translate3d(-12%, 30%, 0)  scale(1.06); }
}
@keyframes schleier-b {
  0%   { transform: translate3d(0, 0, 0)       scale(1.08); }
  50%  { transform: translate3d(-30%, -18%, 0) scale(1);    }
  100% { transform: translate3d(16%, -32%, 0)  scale(1.24); }
}
@keyframes schleier-c {
  0%   { transform: translate3d(0, 0, 0)       scale(1);    }
  50%  { transform: translate3d(-34%, 22%, 0)  scale(1.3);  }
  100% { transform: translate3d(28%, -20%, 0)  scale(1.1);  }
}

@media (prefers-reduced-motion: reduce) {
  .schleier i { animation: none; }
}

/* --- Abschnitte ------------------------------------------------------- */

section { padding: 4.5rem 0; }
section.eng { padding: 3.4rem 0; }
.flaeche { background: var(--ci-flaeche); }
.fuehrung { max-width: 62ch; color: var(--ci-text-leise); }

/* Petrolband für den Kontaktabschnitt */
.dunkel { background: linear-gradient(115deg, var(--ci-petrol) 0%, #04455c 55%, var(--ci-flaeche) 100%); }
.dunkel p, .dunkel dd { color: rgba(255,255,255,.9); }
.dunkel a { color: #fff; }

/* --- Karten ----------------------------------------------------------- */

.karten { display: grid; gap: 1.5rem; margin-top: 2.4rem; }
.karten-3 { grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); }
/* Feste zwei Spalten: auto-fit haette bei dieser Breite drei Kacheln in die
   erste Reihe gesetzt und die vierte allein gelassen. */
.karten-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .karten-2 { grid-template-columns: 1fr; } }

.karte {
  background: rgba(9, 51, 68, .72);
  border: 1px solid var(--ci-linie);
  border-radius: var(--radius-gross);
  padding: 1.9rem;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.flaeche .karte { background: rgba(5, 36, 48, .66); }
.karte figure { margin: -1.9rem -1.9rem 1.5rem; }
.karte figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.karte h3 { margin-bottom: .4rem; }
.karte p { color: var(--ci-text-leise); font-size: .97rem; flex: 1; }
.karte .btn { align-self: flex-start; margin-top: .6rem; }
.karte-akzent { border-color: var(--ci-mint); }

/* --- Bildstreifen Anwendungen ----------------------------------------- */

.anwendungen { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 2.4rem; }
.anwendung { position: relative; border-radius: var(--radius-gross); overflow: hidden; }
.anwendung img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.anwendung figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.6rem 1.3rem 1.1rem;
  color: #fff; font-weight: 600;
  background: linear-gradient(to top, rgba(3,18,25,.94), rgba(3,18,25,0));
}

/* --- Namens-Gegenüberstellung ----------------------------------------- */

.umbenennung { width: 100%; border-collapse: collapse; margin-top: 2rem; font-size: 1rem; }
.umbenennung caption { text-align: left; color: var(--ci-text-leise); padding-bottom: 1rem; }
.umbenennung th, .umbenennung td { text-align: left; padding: .95rem 1rem; border-bottom: 1px solid var(--ci-linie); vertical-align: top; }
.umbenennung th { font-weight: 600; color: var(--ci-text-leise); font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; }
.umbenennung td:first-child { color: var(--ci-text-leise); text-decoration: line-through; text-decoration-color: var(--ci-linie); }
.umbenennung td:nth-child(2) { font-weight: 600; color: var(--ci-mint); }
.umbenennung td:last-child { color: var(--ci-text-leise); font-size: .93rem; }

/* --- Merkmalsliste ---------------------------------------------------- */

.merkmale { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; gap: .7rem 2rem; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.merkmale li { position: relative; padding-left: 1.7rem; }
.merkmale li::before { content: ""; position: absolute; left: 0; top: .62em; width: .6rem; height: .6rem; border-radius: 50%; background: var(--ci-mint); }
.dunkel .merkmale li::before { background: #fff; }

/* --- Technik ---------------------------------------------------------- */

.geraet {
  display: grid; gap: 2.6rem;
  grid-template-columns: 330px minmax(0, 1fr);
  align-items: start;
  border-top: 1px solid var(--ci-linie);
  padding-top: 2.8rem; margin-top: 2.8rem;
}
.geraet:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.geraet-bild {
  width: 100%; aspect-ratio: 4 / 3; object-fit: contain;
  background: #fff; border-radius: var(--radius-gross); padding: 1.4rem;
}
.geraet .kopfzeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem; justify-content: space-between; }
.preis { font-size: 1.35rem; font-weight: 700; color: var(--ci-mint); white-space: nowrap; margin: 0; }
.preis small { display: block; font-size: .78rem; font-weight: 400; color: var(--ci-text-leise); }

.datenblatt { width: 100%; border-collapse: collapse; margin-top: 1.2rem; font-size: .96rem; }
.datenblatt th, .datenblatt td { text-align: left; padding: .6rem 1rem .6rem 0; border-bottom: 1px solid var(--ci-linie); vertical-align: top; }
.datenblatt th { width: 14rem; font-weight: 600; color: var(--ci-text-leise); }
.datenblatt ul { margin: 0; padding-left: 1.1rem; }

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

.faq { margin-top: 2rem; max-width: 78ch; }
.faq details { border-bottom: 1px solid var(--ci-linie); }
.faq summary { cursor: pointer; padding: 1.1rem 2.5rem 1.1rem 0; font-weight: 600; position: relative; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .4rem; top: .85rem; font-size: 1.5rem; font-weight: 400; color: var(--ci-mint); line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq details > p { padding: 0 0 1.2rem; color: var(--ci-text-leise); }

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

.kontakt { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.kontakt dl { margin: 0; }
.kontakt dt { font-weight: 600; margin-top: 1rem; }
.kontakt dd { margin: 0; color: var(--ci-text-leise); }
.telefon { font-size: 1.5rem; font-weight: 700; color: #fff; text-decoration: none; }

/* --- Fuss ------------------------------------------------------------- */

.fuss {
  background: var(--ci-grund-tief);
  color: var(--ci-text-leise);
  padding: 2.8rem 0 2rem;
  font-size: .95rem;
  text-align: center;
}
.fuss-links {
  list-style: none; margin: 0 0 2rem; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2rem;
}
.fuss-links a { color: var(--ci-text); text-decoration: none; font-weight: 600; font-size: .95rem; }
.fuss-links a:hover { color: var(--ci-mint); }

.fuss-schluss {
  padding-top: 1.5rem;
  border-top: 1px solid var(--ci-linie);
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: center;
  font-size: .87rem;
}
.fuss-schluss p { margin: 0; max-width: none; }
.fuss-schluss ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.4rem; flex-wrap: wrap; }
.fuss-schluss a { color: var(--ci-text-leise); text-decoration: none; }
.fuss-schluss a:hover { color: var(--ci-mint); }


/* --- Ikonen (Hilfeseite) ---------------------------------------------- */

.ikone {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: rgba(118,196,183,.12);
  border: 1px solid var(--ci-linie);
  display: grid; place-items: center;
  margin-bottom: 1.5rem;
  color: var(--ci-mint);
  flex: none;
}
.ikone svg {
  width: 28px; height: 28px;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* --- Lesezeichen-Assistent -------------------------------------------- */

.lz-ziele { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.lz-ziel {
  font: inherit; font-size: .95rem; font-weight: 600;
  padding: .65rem 1.4rem; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--ci-text);
  border: 1px solid var(--ci-linie);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.lz-ziel:hover { border-color: var(--ci-mint); color: var(--ci-mint); }
.lz-ziel[aria-pressed="true"] {
  background: var(--ci-mint); border-color: var(--ci-mint); color: var(--ci-grund);
}

.lz-karte {
  display: grid; gap: 2.4rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: center;
  margin-top: 1.6rem;
  padding: 2rem;
  background: rgba(5,36,48,.6);
  border: 1px solid var(--ci-linie);
  border-radius: var(--radius-gross);
}
.lz-klein {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ci-text-leise); margin: 0 0 1rem;
}
.lz-ziehbereich { border-right: 1px solid var(--ci-linie); padding-right: 2rem; }
.lz-ziehen {
  display: inline-block; cursor: grab;
  padding: .8rem 1.6rem; border-radius: var(--radius);
  background: var(--ci-petrol); color: #fff;
  font-weight: 600; text-decoration: none;
  border: 1px dashed rgba(255,255,255,.4);
}
.lz-ziehen:hover { background: #00819f; color: #fff; }
.lz-ziehen:active { cursor: grabbing; }

.lz-kuerzel { display: flex; align-items: center; gap: .5rem; margin: 0 0 1.4rem; }
.lz-kuerzel span { color: var(--ci-text-leise); }
kbd {
  font: inherit; font-size: .9rem; font-weight: 600;
  padding: .3rem .65rem; border-radius: 7px;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--ci-linie);
  border-bottom-width: 2px;
  color: var(--ci-text);
}

.lz-browser { margin-top: 2.4rem; }
.lz-reiter { display: flex; flex-wrap: wrap; gap: 1.8rem; border-bottom: 1px solid var(--ci-linie); }
.lz-reiter button {
  font: inherit; font-size: .88rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  background: none; border: 0; cursor: pointer;
  color: var(--ci-text-leise);
  padding: 0 0 .9rem; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
}
.lz-reiter button:hover { color: var(--ci-text); }
.lz-reiter button[aria-selected="true"] { color: var(--ci-mint); border-bottom-color: var(--ci-mint); }
.lz-anleitung { padding-top: 1.6rem; }
.lz-anleitung p { color: var(--ci-text-leise); max-width: 62ch; }
.lz-anleitung p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .lz-ziehbereich { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--ci-linie); padding-bottom: 1.8rem; }
}


/* --- Osterei: kleines Klickspiel ---------------------------------------
   Startet nach fuenf Klicks auf das Logo im Hero. Das Markup baut das
   Skript zur Laufzeit; hier stehen nur Aussehen und Bewegung. Gespielt
   wird mit hoechstens 14 Karten gleichzeitig, jede raeumt sich selbst ab.
   ---------------------------------------------------------------------- */

.ei {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(3, 16, 22, .93);
  display: flex; flex-direction: column;
  animation: ei-ein .25s ease-out;
}
@keyframes ei-ein { from { opacity: 0; } }

.ei-kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem 2rem;
  padding: 1.4rem clamp(1.2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--ci-linie);
}
.ei-titel {
  margin: 0; font-size: 1.05rem; font-weight: 600; color: #fff;
  text-transform: uppercase; letter-spacing: .12em;
}
.ei-stand { margin-left: auto; display: flex; gap: 1.8rem; font-variant-numeric: tabular-nums; }
.ei-stand b { color: var(--ci-mint); font-size: 1.25rem; }
.ei-stand span { color: var(--ci-text-leise); font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; }

.ei-feld { position: relative; flex: 1; overflow: hidden; }

.ei-karte {
  position: absolute; bottom: -90px;
  width: 78px; height: 54px; padding: 9px 10px;
  display: flex; flex-direction: column; gap: 5px; justify-content: center;
  border: 1px solid rgba(127, 212, 193, .5);
  border-radius: 9px;
  background: linear-gradient(150deg, #0d7d72, #06514f);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .38);
  cursor: pointer;
  animation-name: ei-auf;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.ei-karte span { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .55); }
.ei-karte span:nth-child(1) { width: 68%; background: rgba(255, 255, 255, .8); }
.ei-karte span:nth-child(2) { width: 90%; }
.ei-karte span:nth-child(3) { width: 52%; }

@keyframes ei-auf {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(var(--drift, 0px), calc(-100vh - 90px), 0) rotate(var(--dreh, 8deg)); }
}

.ei-karte.weg { animation: ei-weg .26s ease-out forwards; pointer-events: none; }
@keyframes ei-weg {
  to { transform: scale(1.5); opacity: 0; }
}

.ei-ende { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 2rem; }
.ei-ende p { color: var(--ci-text-leise); margin-inline: auto; }
.ei-punkte { font-size: clamp(3rem, 12vw, 5.5rem); font-weight: 700; color: var(--ci-mint); line-height: 1; margin: 0 0 .4rem; }

.ei-knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.8rem; }
.ei-schliessen {
  position: absolute; top: 1.1rem; right: 1.1rem;
  width: 42px; height: 42px; border-radius: 50%;
  background: transparent; border: 1px solid var(--ci-linie);
  color: var(--ci-text); font: inherit; font-size: 1.2rem; cursor: pointer;
  z-index: 2;
}
.ei-schliessen:hover { border-color: var(--ci-mint); color: var(--ci-mint); }

/* --- Schmale Bildschirme ---------------------------------------------- */

@media (max-width: 860px) {
  .geraet { grid-template-columns: 1fr; gap: 1.6rem; }
  .geraet-bild { max-width: 380px; }
}
@media (max-width: 720px) {
  .kopf-login { margin-left: 0; }
  .marke img { height: 38px; }
  .marke-produkt { padding-left: .8rem; font-size: .95rem; }
  .datenblatt th { width: auto; display: block; padding-bottom: 0; border: 0; }
  .datenblatt td { display: block; padding-top: .2rem; }
}