/* =========================================================
   Buteus  ·  style.css
   Landingpage im Layout von ada.cx, Inhalt Buteus
   ========================================================= */

:root{
  /* Flächen */
  --ink:        #080D0A;   /* Ankündigungsleiste, Pfeilkreise */
  --green-900:  #0D1620;   /* tiefstes Grün, Footer */
  --green-800:  #132131;   /* dunkler Abschnitt */
  --green-700:  #1B2D40;
  --paper:      #E7ECF1;   /* warme helle Fläche */
  --paper-2:    #F5F8FA;
  --white:      #FFFFFF;

  /* Akzent */
  --accent:     #2F6690;
  --accent-600: #255478;

  /* Eine Farbe je Produkt. Sie tragen die Kennzahlenkarten, die Kanten der
     Produktkarten und die Meldungen auf dem Bild, damit man ein Produkt an
     der Farbe wiedererkennt. Sie hängen bewusst NICHT am Akzent. */
  --p-vertrieb:      #1C4630;
  --p-vertrieb-soft: #D3E1D9;
  --p-cash:          #E8501A;
  --p-cash-soft:     #FBDDD1;
  --p-daten:         #3F7D8C;
  --p-daten-soft:    #D6E5E9;
  --p-brain:         #E0A63C;
  --p-brain-soft:    #F7E6C4;

  /* Text */
  --text:       #12190F;
  --text-2:     #55605A;
  --text-3:     #626B65;
  --on-dark:    #FFFFFF;
  --on-dark-2:  #C6D2C9;

  /* Linien */
  --line:       #E3DED4;
  --line-2:     #EDE9E1;

  /* Zustaende in den nachgebauten Produktoberflaechen */
  --ok-bg:      #E7F0E9;
  --ok-text:    #1F5136;
  --bad-bg:     #F6DCD6;
  --bad-text:   #8A2B18;
  --bad-flaeche:#FDF3F1;

  /* Maße */
  --wrap:       1248px;
  --gutter:     24px;
  /* Eine Formenskala fuer die ganze Seite:
     Bedienelemente sind Pillen, Karten und Buehnen 12px, Flaechen darin 8px. */
  --r-pill:     999px;
  --r-card:     12px;
  --r-soft:     8px;

  --shadow-card: 0 1px 2px rgba(18,25,15,.05), 0 10px 30px rgba(18,25,15,.06);
  --shadow-float: 0 2px 4px rgba(18,25,15,.06), 0 18px 50px rgba(18,25,15,.14);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

/* Bewusst ohne Webfont. Die Seite laedt keine einzige Datei von fremden Servern,
   damit beim Aufruf keine Besucher IP das Haus verlaesst. Der Systemschnitt hat auf
   macOS, Windows und Android einen echten leichten Schnitt fuer die grosse Schrift,
   deshalb traegt er dieses Layout ohne Ersatz. */
body{
  margin:0;
  /* system-ui loest auf Android ohnehin auf Roboto auf, deshalb steht der Name
     hier nicht noch einmal als eigene Wahl in der Liste. */
  font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size:16px;
  line-height:1.55;
  color:var(--text);
  background:var(--white);
  font-optical-sizing:auto;
}

img{ max-width:100%; height:auto; display:block; }
/* Der Bildwelten Umschalter blendet Bildhüllen über hidden aus */
[hidden]{ display:none !important; }
ul{ list-style:none; margin:0; padding:0; }
p{ margin:0; }
h1,h2,h3{ margin:0; font-weight:400; letter-spacing:-.02em; }
a{ color:inherit; text-decoration:none; }

:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
  box-shadow:0 0 0 5px rgba(8,13,10,.55);
  border-radius:var(--r-soft);
}

.wrap{
  width:100%;
  max-width:calc(var(--wrap) + var(--gutter)*2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.center{ text-align:center; }
/* Umbruch ohne <br>: ab 900px wird jede Zeile ein Block, darunter laufen sie
   inline weiter und das Leerzeichen im Markup trennt sie. Ein <br> braeuchte
   dahinter ein Leerzeichen, das sich im Editor nicht loeschen laesst und ohne
   das die Woerter auf schmalen Geraeten zusammenkleben. */
@media (min-width:900px){ .zl{ display:block; } }

.skiplink{
  position:absolute; left:12px; top:-60px; z-index:200;
  background:var(--white); color:var(--text);
  padding:10px 16px; border-radius:var(--r-pill); font-size:14px;
  box-shadow:var(--shadow-float);
  transition:top .18s ease;
}
.skiplink:focus{ top:12px; }

/* ---------- Typo Skala ---------- */
h1{
  font-size:clamp(2.375rem, 4.3vw, 3.75rem);
  line-height:1.06;
  font-weight:300;
  letter-spacing:-.028em;
}
.h2{
  font-size:clamp(1.95rem, 3.85vw, 3.25rem);
  line-height:1.14;
  font-weight:400;
  letter-spacing:-.025em;
}
.h2.light{ color:var(--on-dark); }
.lead{
  margin-top:18px;
  font-size:clamp(1rem,1.15vw,1.0625rem);
  line-height:1.6;
  color:var(--text-2);
  max-width:640px;
}
.lead.center{ margin-inline:auto; }
.eyebrow{
  font-size:.8125rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--text-3);
  margin-bottom:14px;
}

/* Der Zeichenvorrat steht als erstes im Text und darf nichts verschieben. */
.zeichenvorrat{ position:absolute; width:0; height:0; overflow:hidden; }

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; gap:14px;
  padding:8px 8px 8px 22px;
  border-radius:var(--r-pill);
  font-size:.9375rem; line-height:1.2; font-weight:400;
  white-space:nowrap;
  transition:background-color .18s ease, color .18s ease, transform .18s ease;
}
.btn-arrow{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; flex:0 0 34px;
  border-radius:var(--r-pill);
  background:var(--ink); color:var(--white);
}
.btn-accent{ background:var(--accent); color:var(--white); }
.btn-accent:hover{ background:var(--accent-600); }
/* Im Kopf steht dieselbe Handlung wie im Hero. Zwei gefuellte Pillen
   nebeneinander lassen offen, welche die wichtigere ist, deshalb tritt die
   im Kopf auf eine Kontur zurueck. */
.btn-linie{ background:none; color:var(--text); box-shadow:inset 0 0 0 1px #CFC8BB; }
.btn-linie:hover{ background:var(--paper-2); box-shadow:inset 0 0 0 1px #ADA495; }
.btn-linie .btn-arrow{ background:var(--ink); color:var(--white); }
.btn-soft{ background:var(--cs,#EDE9E1); color:var(--ink); }
.btn-soft:hover{ filter:brightness(.96); }
.btn-lg{ padding:10px 10px 10px 26px; font-size:1rem; }
.btn-lg .btn-arrow{ width:38px; height:38px; flex-basis:38px; }
@media (prefers-reduced-motion: no-preference){
  .btn:hover .btn-arrow{ transform:translateX(2px); }
  .btn-arrow{ transition:transform .18s ease; }
}


/* =========================================================
   Navigation
   ========================================================= */
.siteheader{
  position:sticky; top:0; z-index:80;
  padding-top:17px;
  margin-bottom:-71px;
}
.nav{
  height:54px;
  background:var(--white);
  border-radius:var(--r-pill);
  display:flex; align-items:center; gap:14px;
  padding:0 6px 0 24px;
  box-shadow:0 1px 2px rgba(18,25,15,.06), 0 12px 34px rgba(18,25,15,.12);
}

.brand{ display:inline-flex; align-items:center; }
/* Wortmarke aus dem Markenpaket. Schutzraum ist die Cap-Höhe des B, deshalb
   sitzt sie nur über die Höhe, ohne eigene Innenabstände. */
.brand-img{ display:block; width:auto; height:18px; }
.footbrand .brand-img{ height:16px; }

.navlist{ display:none; align-items:center; gap:4px; margin-left:12px; }
@media (min-width:1100px){ .navlist{ display:flex; } }

.navlist > li{ position:relative; }
.navlink{
  display:inline-flex; align-items:center; gap:7px;
  font:inherit; font-size:.9375rem; color:var(--text);
  background:none; border:0; cursor:pointer;
  padding:8px 12px; border-radius:var(--r-soft);
}
a.navlink{ cursor:pointer; }
.navlink:hover{ color:#000; }
.chev{
  width:9px; height:9px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  opacity:.65;
}
.subnav{
  position:absolute; top:calc(100% + 12px); left:0;
  min-width:250px; padding:10px;
  background:var(--white); border-radius:var(--r-card);
  box-shadow:var(--shadow-float);
  display:grid; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.subnav a{ padding:10px 12px; border-radius:var(--r-soft); font-size:.9375rem; color:var(--text-2); }
.subnav a:hover{ background:var(--paper); color:var(--text); }
.has-sub:hover .subnav,
.has-sub:focus-within .subnav,
.has-sub.open .subnav{ opacity:1; visibility:visible; transform:translateY(0); }

.navright{ margin-left:auto; display:flex; align-items:center; gap:10px; }

.navright .btn{ display:none; }
/* Eine Stufe kleiner als die Knoepfe im Inhalt, die Leiste soll ruhig bleiben. */
@media (min-width:760px){
  .navright .btn{
    display:inline-flex;
    padding:6px 6px 6px 18px; gap:11px; font-size:.875rem;
  }
  .navright .btn .btn-arrow{ width:30px; height:30px; flex-basis:30px; }
}

/* Mobiles Menü, funktioniert ohne JavaScript */
.mobmenu{ position:relative; }
@media (min-width:1100px){ .mobmenu{ display:none; } }
.mobmenu > summary{
  list-style:none; cursor:pointer;
  width:42px; height:42px; border-radius:var(--r-pill);
  background:var(--paper);
  display:flex; align-items:center; justify-content:center;
}
.mobmenu > summary::-webkit-details-marker{ display:none; }
.burger, .burger::before, .burger::after{
  display:block; width:17px; height:1.7px; background:var(--text); border-radius:2px;
}
.burger{ position:relative; }
.burger::before, .burger::after{ content:""; position:absolute; left:0; }
.burger::before{ top:-5.5px; }
.burger::after{ top:5.5px; }
.mobmenu[open] > summary{ background:var(--line-2); }
.mobpanel{
  position:absolute; right:0; top:calc(100% + 14px);
  width:min(84vw, 300px);
  background:var(--white); border-radius:var(--r-card); padding:10px;
  box-shadow:var(--shadow-float);
  display:grid; gap:2px;
}
.mobpanel a{ padding:12px 14px; border-radius:var(--r-soft); font-size:1rem; color:var(--text); }
.mobpanel a:hover{ background:var(--paper); }
.mobpanel .mobcta{
  margin-top:6px; background:var(--accent); color:var(--white); text-align:center; font-size:.9375rem;
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--green-800);
  color:var(--on-dark);
  padding:132px 0 88px;
  min-height:min(760px, 100svh);
  display:flex; align-items:center;
}
.hero-wrap{ position:relative; z-index:2; }
.hero-copy{ max-width:34rem; }

/* Rechte Haelfte, randlos bis zur Fensterkante. Der Verlauf laeuft nur ueber
   das linke Viertel des Bildes, damit die Kante zum Gruen verschwindet und
   der Rest des Rasters unangetastet bleibt. */
.hero-bild{ position:absolute; inset:0 0 0 auto; width:52%; z-index:1; }
.hero-bild img{ width:100%; height:100%; object-fit:cover; object-position:38% center; }
.hero-bild::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,
    var(--green-800) 0%, rgba(19,33,49,.86) 12%, rgba(19,33,49,.3) 32%, rgba(19,33,49,0) 58%);
}

.hero-sub{
  margin-top:24px;
  max-width:40ch;
  font-size:1.0625rem; line-height:1.62;
  color:rgba(255,255,255,.9);
}
.hero-actions{ margin-top:32px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; }

/* Drei Zusagen unter dem Knopf. Sie stehen bewusst nicht als Balken ueber der
   Leiste, dieser Balken ist frueher absichtlich verschwunden. */
.siegel{
  margin-top:30px;
  /* Die Spalte ist 544px breit, die drei Pillen brauchen zusammen 530.
     Deshalb sitzen sie eng, sonst kippt die dritte in die zweite Zeile. */
  display:flex; flex-wrap:wrap; gap:8px;
}
.siegel li{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 11px 6px 9px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  font-size:.8125rem; line-height:1.3; color:rgba(255,255,255,.92);
  white-space:nowrap;
}
.siegel-ico{ width:15px; height:15px; flex:none; color:rgba(255,255,255,.7); }
/* Die Flagge kommt aus der Systemschrift und sitzt sonst zu hoch. */
.siegel-flagge{ font-size:.9375rem; line-height:1; flex:none; }

@media (max-width:1000px){
  /* Nebeneinander wird die Spalte zu schmal. Das Bild rutscht unter den Text
     und bleibt dort ein eigenes Band statt Hintergrund zu sein. */
  .hero{ display:block; min-height:0; padding:104px 0 0; }
  .hero-copy{ max-width:none; }
  .hero-bild{
    position:relative; inset:auto; width:auto; margin-top:52px;
    aspect-ratio:16 / 9;
  }
  .hero-bild::after{
    background:linear-gradient(180deg, var(--green-800) 0%, rgba(19,33,49,0) 22%);
  }
}

/* =========================================================
   Vertrauensanker: laufendes Kundenband
   Nach dem Vorbild von ada.cx, dort eine reine CSS Keyframe ohne Bibliothek.
   Unterschied: ada misst die Satzbreite per JavaScript und faehrt auf einen
   Pixelwert. Hier stehen die sieben Marken zweimal in EINER Spur, die auf
   -50% faeuft. Das braucht kein Skript und geht immer nahtlos auf.
   Wichtig: der Abstand sitzt als padding-inline an den Elementen, nicht als
   gap an der Spur. Bei gap waere die Naht um einen halben Abstand daneben.
   ========================================================= */
.proof{
  background:var(--white);
  padding:46px 0 44px;
  border-bottom:1px solid var(--line-2);
  text-align:center;
}
.logoband{
  overflow:hidden;
  user-select:none; -webkit-user-select:none;
  --fade:clamp(28px, 9vw, 130px);
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
}
.logotrack{
  display:flex; align-items:center;
  width:max-content;
  animation:logoband 87s linear infinite;
}
.logoitem{
  flex:0 0 auto;
  display:inline-flex; align-items:center;
  padding-inline:30px;
}
/* Die Marken kommen in ihren Originaldateien, aber grau und leicht
   zurueckgenommen. Sieben Hausfarben nebeneinander wuerden das ruhige Band
   zerreissen. Wer auf ein einzelnes Logo zeigt, bekommt dessen Farbe zurueck. */
.logoitem img{
  display:block; width:auto; height:var(--h, 20px);
  filter:grayscale(1); opacity:.6;
  transition:filter .25s ease, opacity .25s ease;
}

/* Nur dort, wo wirklich mit einem Zeiger gehovert wird. Auf dem Telefon bliebe
   der Farbzustand sonst nach dem Antippen kleben. Das Band laeuft beim Zeigen
   bewusst weiter, die Farbe wandert also mit dem Logo aus dem Zeiger heraus. */
@media (hover:hover){
  .logoitem img:hover{ filter:grayscale(0); opacity:1; }
}

/* Eine Zeile ueber dem Band, damit die Namen nicht als Kundenliste gelesen
   werden. Wortlaut wie auf buteus.de. */
.proof-zeile{
  margin-bottom:24px;
  font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-3);
}


@keyframes logoband{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}

@media (max-width:640px){
  .proof{ padding:34px 0 32px; }
  .logoitem{ padding-inline:22px; }
  }

/* =========================================================
   Kennzahlen, im Schnitt von ada
   Quadratische weisse Karte, farbiger Balken links als echtes border-left,
   Zahl oben, Beschriftung unten, dazwischen Luft ueber space-between.
   Kein Schatten, kein Rahmen ausser links.
   ========================================================= */
.stats{ background:var(--paper); padding:104px 0 110px; }
.statgrid{
  margin-top:66px;
  display:grid; gap:20px;
  grid-template-columns:repeat(2,1fr);
  max-width:1120px; margin-inline:auto;
}
@media (min-width:760px){ .statgrid{ grid-template-columns:repeat(4,1fr); } }

.statcard{
  position:relative; overflow:hidden;
  background:var(--white);
  border-radius:var(--r-card);
  --pad:18px;
  padding:0 var(--pad) var(--pad);
  min-height:190px;
  display:flex; flex-direction:column; gap:12px;
}
.statcard:nth-child(1){ --bar:var(--p-vertrieb); --weich:var(--p-vertrieb-soft); }
.statcard:nth-child(2){ --bar:var(--p-cash); --weich:var(--p-cash-soft); }
.statcard:nth-child(3){ --bar:var(--p-daten); --weich:var(--p-daten-soft); }
.statcard:nth-child(4){ --bar:var(--p-brain); --weich:var(--p-brain-soft); }
@media (max-width:559px){ .statcard{ min-height:150px; } }
@media (min-width:1000px){ .statcard{ --pad:26px; gap:14px; min-height:210px; } }

/* Welches Produkt die Zahl liefert. Die Marke sitzt auf der Oberkante der
   Karte, halb darauf und halb darueber, deshalb absolut und um die halbe
   eigene Hoehe nach oben geschoben. */
/* Der Produktname traegt die Karte, deshalb steht er als Kopfleiste darin und
   nicht mehr als Pille auf der Kante. Eine Pille auf der Kante liest sich als
   Etikett am Kasten, also als Status oder Kategorie, und genau das sind die
   vier nicht. Die Leiste ist getoent statt vollfarbig: Weiss auf dem Bernstein
   kommt nur auf 2,2:1, dunkel auf der weichen Flaeche auf ueber 13:1. */
.statprod{
  display:flex; align-items:center; gap:9px;
  margin-inline:calc(var(--pad) * -1);
  margin-bottom:8px;
  padding:12px var(--pad);
  background:var(--weich);
  font-size:1rem; font-weight:500; letter-spacing:-.01em; color:var(--text);
}
.sp-ico{ width:20px; height:20px; flex:none; color:var(--bar); }

.statnum{
  font-size:1.4375rem; line-height:1.08;
  letter-spacing:-.03em; font-weight:300;
  font-variant-numeric:tabular-nums;
  text-wrap:balance;
}
@media (min-width:1000px){ .statnum{ font-size:2rem; } }
.statlabel{ font-size:.8125rem; line-height:1.45; color:var(--text-2); }
@media (min-width:1000px){ .statlabel{ font-size:.9375rem; line-height:1.5; } }



/* =========================================================
   Die Antwort
   Drei Aussagen an senkrechten Haarlinien. Bewusst keine Karten: die
   Kennzahlen darueber und die Schrittkarten darunter sind schon Kaesten,
   ein dritter Kastensatz waere reine Wiederholung.
   ========================================================= */
.answer{
  background:var(--white);
  padding:92px 0 96px;
  border-bottom:1px solid var(--line-2);
}
.claims{
  margin-top:52px;
  display:grid; gap:34px;
  grid-template-columns:1fr;
  max-width:1080px; margin-inline:auto;
}
@media (min-width:860px){
  .claims{ grid-template-columns:repeat(3,1fr); gap:0; }
  .claims li{ padding:2px 34px; border-left:1px solid var(--line); }
  .claims li:first-child{ padding-left:0; border-left:0; }
  .claims li:last-child{ padding-right:0; }
}
/* Gleiche Zeichensprache wie bei den Produkten und der Sicherheit */
.claimico{ display:block; width:38px; height:38px; color:var(--text); margin-bottom:16px; }
.claimico .ico-hit{ stroke:var(--accent); }
.claims h3{
  font-size:1.125rem; line-height:1.34; font-weight:500; letter-spacing:-.015em;
  min-height:2.68em;
}
.claims p{
  margin-top:12px;
  font-size:.9375rem; line-height:1.62; color:var(--text-2);
}
@media (max-width:640px){
  .answer{ padding:64px 0 66px; }
  .claims{ margin-top:36px; gap:26px; }
}

/* =========================================================
   Dunkler Abschnitt
   ========================================================= */
.dark{ background:var(--green-800); padding:104px 0 112px; color:var(--on-dark); }
.darkgrid{
  margin-top:60px;
  display:grid; gap:22px;
  grid-template-columns:1fr;
}
@media (min-width:1060px){
  .darkgrid{ grid-template-columns:minmax(0,1fr) 300px; }
}

.tabs{
  display:grid; gap:14px;
  grid-template-columns:1fr;
}
@media (min-width:820px){
  .tabs{
    grid-template-columns:272px minmax(0,1fr);
    grid-template-rows:auto auto auto auto auto auto auto 1fr;
    gap:14px 22px; align-items:start; height:100%;
  }
}
.tabs input[type="radio"]{
  position:absolute; opacity:0; width:1px; height:1px;
  overflow:hidden; white-space:nowrap;
}
.tabs label{
  display:flex; align-items:center; min-height:46px; cursor:pointer;
  padding:11px 18px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.09);
  color:rgba(255,255,255,.86);
  font-size:.9375rem; line-height:1.3;
  transition:background-color .16s ease, color .16s ease;
}
.tabs label:hover{ background:rgba(255,255,255,.16); }
@media (min-width:820px){
  .tabs label{ grid-column:1; }
  #prob1 ~ label:nth-of-type(1){ grid-row:1; }
  #prob1 ~ label:nth-of-type(2){ grid-row:2; }
  #prob1 ~ label:nth-of-type(3){ grid-row:3; }
  #prob1 ~ label:nth-of-type(4){ grid-row:4; }
  #prob1 ~ label:nth-of-type(5){ grid-row:5; }
  #prob1 ~ label:nth-of-type(6){ grid-row:6; }
  .tabstage{ grid-column:2; grid-row:1 / span 8; }
}
.tabs input:checked + label{ background:var(--white); color:var(--green-900); }
.tabs input:focus-visible + label{ outline:3px solid var(--accent); outline-offset:3px; }

.tabstage{
  position:relative; overflow:hidden;
  border-radius:var(--r-card);
  min-height:340px;
  background:var(--green-700);
}
@media (min-width:820px){ .tabstage{ min-height:402px; height:100%; } }
.tabpanel{
  position:relative; z-index:2;
  display:none;
  margin:34px 24px;
  max-width:400px;
  background:var(--white); color:var(--text);
  border-radius:var(--r-card); padding:22px 24px;
  box-shadow:var(--shadow-float);
}
.tab-k{ font-size:1.0625rem; font-weight:500; letter-spacing:-.01em; }
.tab-t{ margin-top:10px; font-size:.9375rem; line-height:1.55; color:var(--text-2); }
#prob1:checked ~ .tabstage #panel1,
#prob2:checked ~ .tabstage #panel2,
#prob3:checked ~ .tabstage #panel3,
#prob4:checked ~ .tabstage #panel4,
#prob5:checked ~ .tabstage #panel5,
#prob6:checked ~ .tabstage #panel6,
#prob7:checked ~ .tabstage #panel7{ display:block; }

.stage-btn{
  position:absolute; z-index:2; right:22px; bottom:22px;
  box-shadow:0 8px 22px rgba(8,22,14,.28);
}
@media (max-width:520px){
  .stage-btn{ right:16px; bottom:16px; font-size:.875rem; padding-left:16px; }
}

.whocard{
  position:relative; overflow:hidden;
  background:var(--white); color:var(--text);
  border-radius:var(--r-card);
  padding:30px 28px 28px;
}
.who-eyebrow{ font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); }
.who-num{ margin-top:18px; font-size:2.5rem; line-height:1.05; letter-spacing:-.03em; }
.who-label{ margin-top:8px; font-size:.9375rem; line-height:1.45; }
.who-text{ margin-top:18px; font-size:.875rem; line-height:1.6; color:var(--text-2); }
.who-quelle{ margin-top:16px; font-size:.6875rem; line-height:1.5; color:var(--text-3); }
.who-link{ margin-top:18px; display:inline-flex; align-items:center; gap:7px; font-size:.9375rem; border-bottom:1px solid var(--line); padding-bottom:3px; }
.who-arrow{ flex:none; }
.who-link:hover{ border-color:var(--text); }

/* Bildband am Fuß des dunklen Abschnitts, umschaltbarer Bildslot */
.darkshot{
  margin:56px 0 0;
  border-radius:var(--r-card);
  overflow:hidden;
  background:var(--green-700);
  position:relative;
}
.darkshot img{
  width:100%; height:auto;
  aspect-ratio:2.4 / 1;
  object-fit:cover;
}
/* Meldungen auf der Szene. Sie zeigen, was nebenher läuft, während der Mann
   an der Bank steht. Auf schmalen Geräten liegen sie als Liste unter dem Bild,
   dort würden sie einander überdecken. */
.popups{ display:grid; gap:10px; margin-top:14px; }
.popup{
  background:var(--white); color:var(--text);
  border-radius:var(--r-soft);
  padding:11px 14px;
  box-shadow:0 8px 26px rgba(0,0,0,.34);
  font-size:.8125rem; line-height:1.45;
}
.pu-kopf{ display:flex; align-items:center; gap:7px; font-weight:600; font-size:.75rem; letter-spacing:-.01em; }
.pu-dot{ width:8px; height:8px; flex:none; border-radius:var(--r-pill); background:var(--pu); }
.pu-text{ margin-top:4px; color:var(--text-2); }
.pu-text strong{ font-weight:600; color:var(--text); }
.pu-frage{ margin-top:7px; padding:7px 9px; border-radius:var(--r-soft); background:var(--paper-2); font-size:.75rem; }
.pu-antwort{ margin-top:5px; padding:7px 9px; border-radius:var(--r-soft); background:var(--pu-soft); font-size:.75rem; }
.pu-vertrieb{ --pu:var(--p-vertrieb); --pu-soft:var(--p-vertrieb-soft); }
.pu-cash{ --pu:var(--p-cash); --pu-soft:var(--p-cash-soft); }
.pu-daten{ --pu:var(--p-daten); --pu-soft:var(--p-daten-soft); }
.pu-brain{ --pu:var(--p-brain); --pu-soft:var(--p-brain-soft); }

@media (min-width:900px){
  .popups{ display:block; margin-top:0; }
  .popup{
    position:absolute; z-index:2; width:232px;
    animation:pu-auf .5s cubic-bezier(.23,1,.32,1) backwards;
  }
  /* Die Mitte rechts bleibt frei, dort steht der leuchtende Bildschirm. */
  .pu-1{ left:1.5%;  top:5%;    animation-delay:.10s; }
  .pu-2{ left:27%;   top:3%;    animation-delay:.24s; }
  .pu-3{ left:52.5%; top:6%;    animation-delay:.38s; }
  .pu-4{ left:1.5%;  bottom:5%; animation-delay:.52s; }
  .pu-5{ left:27%;   bottom:4%; animation-delay:.66s; }
  .pu-6{ right:1.5%; top:5%;    animation-delay:.80s; }
  .pu-7{ right:1.5%; bottom:4%; width:256px; animation-delay:.94s; }
}
/* Nichts erscheint aus dem Nichts, deshalb 0.96 statt 0. */
@keyframes pu-auf{
  from{ opacity:0; transform:translateY(8px) scale(.96); }
  to{ opacity:1; transform:none; }
}

@media (max-width:700px){
  .darkshot{ margin-top:40px; }
  .darkshot img{ aspect-ratio:16 / 9; }
}

/* =========================================================
   Die vier KI Mitarbeiter
   ========================================================= */
.crew{ background:var(--paper); padding:104px 0 108px; }
.crewcard{
  position:relative;
  margin-top:34px;
  border-radius:var(--r-card);
  background:var(--white);
  box-shadow:var(--shadow-card);
  overflow:hidden;
}
.crew .crewcard:first-of-type{ margin-top:62px; }
.crewedge{ display:block; height:14px; background:var(--c); }

.crewgrid{
  display:grid;
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .crewgrid{ grid-template-columns:248px minmax(0,1fr); }
}
@media (min-width:900px) and (max-width:1179px){
  .crewmedia{ grid-row:1; grid-column:1; }
  .crewbody{ grid-row:1; grid-column:2; }
  .crewviz{ grid-row:2; grid-column:1 / -1; padding:0 30px 34px; }
  .crewviz .ui{ max-width:560px; }
}
@media (min-width:1180px){
  .crewgrid{ grid-template-columns:252px minmax(0,1fr) 420px; }
}

/* Das gezeichnete Produktzeichen steht frei über dem Namen, ohne Rahmen und ohne Fläche */
.crewmedia{
  padding:34px 30px 0;
  /* stretch, nicht flex-start: sonst nimmt der Produktname seine
     Inhaltsbreite und laeuft bei "Dokumentenverarbeitung" aus der Spalte
     heraus in den Fliesstext. */
  display:flex; flex-direction:column; align-items:stretch; gap:18px;
}
@media (min-width:1180px){ .crewmedia{ padding:40px 30px 0 40px; } }
.crewico{
  flex:none; width:56px; height:56px;
  color:var(--text);
}
.crewico .ico-hit{ stroke:var(--accent); }
.crewrole{
  color:var(--text);
  font-size:clamp(1.25rem,2vw,1.5rem);
  font-weight:500; letter-spacing:-.02em;
}

.crewbody{ padding:34px 30px 30px; display:flex; flex-direction:column; }
@media (min-width:1180px){ .crewbody{ padding:40px 40px 34px; } }
.crewtitle{
  font-size:clamp(1.5rem,2.6vw,2.25rem);
  line-height:1.16; font-weight:400; letter-spacing:-.025em;
}
.crewtitle em{ font-style:italic; font-weight:300; }
.crewtext{ margin-top:16px; font-size:.9375rem; line-height:1.6; color:var(--text-2); max-width:46ch; }

.chiprow{ margin-top:20px; display:flex; flex-wrap:wrap; gap:8px; }
.chiprow li{
  font-size:.75rem; letter-spacing:.03em;
  padding:5px 12px; border-radius:var(--r-pill);
  border:1px solid var(--line); color:var(--text-2);
  background:var(--paper-2);
}
/* Der Hinweis ist kein System, also traegt er auch keinen Rahmen. Er steht
   da, damit niemand aussteigt, der keines der genannten Systeme nutzt. */
.chiprow .chipmehr{
  border-color:transparent; background:none;
  color:var(--text-3, var(--text-2)); opacity:.75;
}
.crewfoot{
  margin-top:auto; padding-top:34px;
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:20px 28px;
  justify-content:space-between;
}
.crewkpi strong{ display:block; font-size:1.5rem; font-weight:400; letter-spacing:-.02em; line-height:1.15; }
.crewkpi span{ display:block; margin-top:4px; font-size:.875rem; color:var(--text-2); max-width:24ch; }

.crewviz{
  padding:0 30px 30px;
  display:flex; align-items:center;
}
@media (min-width:1180px){
  .crewviz{ padding:34px 34px 34px 0; border-left:1px solid var(--line-2); padding-left:30px; }
}

/* ---------- gemeinsame Oberflächen Bausteine ---------- */
.ui{
  width:100%;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-soft);
  overflow:hidden;
  font-size:.75rem;
  box-shadow:0 1px 2px rgba(18,25,15,.04);
}
.ui-top{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 14px;
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
}
.ui-title{ font-weight:500; font-size:.8125rem; letter-spacing:-.01em; }
.ui-tag{
  font-size:.6875rem; color:var(--text-2);
  border:1px solid var(--line); border-radius:var(--r-pill); padding:2px 9px; background:var(--white);
}
.ui-head{
  display:grid; grid-template-columns:1.1fr 1fr auto; gap:10px;
  padding:8px 14px;
  font-size:.6875rem; letter-spacing:.05em; text-transform:uppercase; color:var(--text-3);
  border-bottom:1px solid var(--line-2);
}
.ta-r{ text-align:right; }
.ui-row{
  display:grid; grid-template-columns:1.1fr 1fr auto; gap:10px; align-items:center;
  padding:11px 14px;
  border-bottom:1px solid var(--line-2);
}
.ui-row.alarm{ background:var(--bad-flaeche); }
.ui-name{ font-size:.75rem; font-weight:500; }
.ui-state{ font-size:.6875rem; padding:3px 9px; border-radius:var(--r-pill); white-space:nowrap; }
.ui-state.ok{ background:var(--ok-bg); color:var(--ok-text); }
.ui-state.bad{ background:var(--bad-bg); color:var(--bad-text); }

.spark{ display:flex; align-items:flex-end; gap:4px; height:36px; }
.spark i{ flex:0 0 5px; height:var(--h); background:#C7D3C9; border-radius:2px; min-height:2px; }
.spark.down i{ background:#E0AFA3; }

.ui-note{
  padding:8px 14px;
  font-size:.6875rem; color:var(--bad-text); background:var(--bad-flaeche);
  border-bottom:1px solid var(--line-2);
}
.ui-task{
  display:flex; align-items:flex-start; gap:8px;
  padding:10px 14px;
  font-size:.75rem; color:var(--text);
  background:#F2F7F2;
  border-bottom:1px solid var(--line-2);
}
.tick{
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; flex:0 0 15px; border-radius:var(--r-pill);
  background:var(--ok-text); color:#fff;
}
.tick svg{ display:block; }
.ui-sum{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px;
  background:var(--paper-2);
  font-size:.75rem; color:var(--text-2);
}
.ui-sum strong{ font-weight:500; color:var(--text); font-size:.8125rem; }

/* Cash Radar Zeilen */
.pay{
  display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px 12px; align-items:center;
  padding:10px 14px;
  border-bottom:1px solid var(--line-2);
}
.pay-name{ font-size:.75rem; font-weight:500; min-width:0; }
.pay-name small{ display:block; font-weight:400; font-size:.6875rem; color:var(--text-3); margin-top:2px; }
.pay-sum{ font-size:.75rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.pay-state{ font-size:.6875rem; padding:3px 9px; border-radius:var(--r-pill); white-space:nowrap; }
.pay-state.ok{ background:var(--ok-bg); color:var(--ok-text); }
.pay-state.bad{ background:var(--bad-bg); color:var(--bad-text); }
/* Trennt Ausgang und Eingang in derselben Kachel. */
.ui-split{
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  font-size:.625rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-3);
}
.pay.overfaellig{ background:var(--bad-flaeche); }
.pay.blocked{ background:var(--bad-flaeche); }
.pay.blocked .pay-sum{ text-decoration:line-through; color:var(--bad-text); }

/* Datenverarbeitung */
.extract{
  display:grid; grid-template-columns:80px 22px minmax(0,1fr);
  align-items:center; gap:8px;
  padding:16px 14px;
  border-bottom:1px solid var(--line-2);
}
.doc{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-soft);
  padding:10px 9px; display:grid; gap:6px;
}
.doc-line{ display:block; height:4px; border-radius:2px; background:#D9D4C9; }
.doc-line.w80{ width:80%; } .doc-line.w70{ width:70%; }
.doc-line.w65{ width:65%; } .doc-line.w60{ width:60%; } .doc-line.w45{ width:45%; }
.doc-amount{ margin-top:5px; font-size:.6875rem; font-weight:500; color:var(--text); }
.extract-arrow{ display:flex; justify-content:center; color:var(--text-3); }
.fields{ display:grid; gap:7px; min-width:0; }
.fields li{
  display:grid; grid-template-columns:15px minmax(0,1fr) auto; gap:8px; align-items:center;
}
.f-k{ font-size:.6875rem; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.f-v{ font-size:.75rem; text-align:right; font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Company Brain */
.chat{ padding:16px 14px; display:grid; gap:10px; }
.bubble{ border-radius:var(--r-soft); padding:11px 13px; font-size:.75rem; line-height:1.5; max-width:94%; }
.bubble.ask{ background:var(--paper-2); border:1px solid var(--line); justify-self:end; border-bottom-right-radius:4px; }
.bubble.ans{ background:#EDF3EF; border:1px solid #D7E4DB; justify-self:start; border-bottom-left-radius:4px; }
.source{
  display:flex; align-items:center; gap:7px;
  padding:8px 11px; border-radius:var(--r-soft);
  background:var(--white); border:1px dashed var(--line);
  font-size:.6875rem; color:var(--text-2);
}
.src-ic{ color:var(--text-3); display:inline-flex; }
.chatmeta{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.6875rem; }
.leseok{ color:var(--ok-text); background:var(--ok-bg); padding:3px 9px; border-radius:var(--r-pill); }
.time{ color:var(--text-3); }

/* =========================================================
   Kundenstimme
   ========================================================= */
.voice{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--green-800); color:var(--on-dark);
  padding:104px 0 108px;
}
.voiceshot{ position:absolute; inset:0; z-index:-1; }
/* Der Ausschnitt liegt tief auf der Tischplatte. Bei 42 % schnitt das Band
   quer durch den hellen Bogen Papier, und der stand dann als harte helle
   Flaeche in der Ecke, was wie ein Darstellungsfehler aussah. */
.voiceshot img{ width:100%; height:100%; object-fit:cover; object-position:center 82%; opacity:.42; }
.voiceshot::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    var(--green-800) 0%, rgba(19,33,49,.72) 30%,
    rgba(19,33,49,.72) 70%, var(--green-800) 100%);
}
.quote{
  max-width:760px; margin:0 auto;
  padding:0;
  text-align:center;
}
.quote blockquote{
  margin:0;
  font-size:clamp(1.375rem,2.6vw,2rem);
  line-height:1.32; font-weight:400; letter-spacing:-.02em;
  text-wrap:balance; color:var(--on-dark);
}
.quote figcaption{
  margin-top:26px;
  font-size:.9375rem; color:var(--on-dark-2);
}
@media (max-width:640px){
  .voice{ padding:64px 0 68px; }
}

/* =========================================================
   FAQ
   ========================================================= */
.faq{ background:var(--paper); padding:104px 0 108px; }
.faqgrid{
  margin-top:60px;
  display:grid; gap:32px;
  grid-template-columns:1fr;
  align-items:start;
}
/* Neben den Fragen steht ein Bild statt der alten Faktenbox, die nur
   wiederholte, was in den Antworten selbst steht. Es klebt mit, damit es
   ueber die ganze Liste hinweg im Blick bleibt. */
.faqbild{ display:none; }
@media (min-width:960px){
  .faqgrid{
    max-width:1180px; margin-inline:auto;
    grid-template-columns:minmax(0,1fr) clamp(240px,24vw,320px);
    gap:clamp(32px,4vw,64px);
    align-items:stretch;
  }
  /* Das Bild fuellt die Spalte auf volle Listenhoehe. Vorher klebte es oben
     und liess darunter ein leeres Drittel stehen. */
  .faqbild{
    display:block;
    border-radius:var(--r-card); overflow:hidden; background:var(--ink);
  }
  .faqbild img{ display:block; width:100%; height:100%; object-fit:cover; }
}

.acc details{ border-bottom:1px solid var(--line); }
.acc details:first-child{ border-top:1px solid var(--line); }
.acc summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  padding:22px 2px;
  font-size:1.0625rem; line-height:1.4; letter-spacing:-.01em;
}
.acc summary::-webkit-details-marker{ display:none; }
.acc-ic{ position:relative; width:15px; height:15px; flex:0 0 15px; margin-top:5px; }
.acc-ic::before, .acc-ic::after{
  content:""; position:absolute; left:0; top:7px; width:15px; height:1.6px; background:var(--text);
}
.acc-ic::after{ transform:rotate(90deg); transition:transform .2s ease; }
.acc details[open] .acc-ic::after{ transform:rotate(0deg); }
.acc-body{ padding:0 40px 24px 2px; }
.acc-body p{ font-size:.9375rem; line-height:1.65; color:var(--text-2); }

/* Zweierraster, keine Viererreihe. Bei vier Spalten bleiben je 270 px, dann
   bricht jede Ueberschrift um und der Abschnitt liest sich wie eine Fussnote.
   Sicherheit ist hier das staerkste Argument und braucht Flaeche. */
.secure{ background:var(--white); padding:104px 0 108px; }
.securegrid{
  margin-top:54px;
  display:grid; gap:0 56px;
  grid-template-columns:1fr;
}
@media (min-width:720px){ .securegrid{ grid-template-columns:repeat(2,1fr); } }
.securegrid li{ border-top:1px solid var(--line); padding:28px 0 34px; }
/* Gleiche Strichstärke und dieselbe Akzentregel wie bei den vier Produktzeichen,
   damit die Seite eine Zeichensprache hat und nicht zwei. */
.secico{ display:block; width:40px; height:40px; color:var(--text); margin-bottom:18px; }
.secico .ico-hit{ stroke:var(--accent); }
.securegrid h3{ margin-top:0; font-size:1.125rem; line-height:1.32; font-weight:500; letter-spacing:-.015em; }
.securegrid p{ margin-top:10px; font-size:.9375rem; line-height:1.6; color:var(--text-2); }
/* Gleiche Unterkante je Zeile, ohne die Felder auseinanderzuziehen. */
@media (min-width:720px){ .securegrid h3{ min-height:1.32em; } }
.secure-note{
  margin-top:26px; padding-top:26px; border-top:1px solid var(--line);
  font-size:.9375rem; color:var(--text-2); text-align:center;
}

/* =========================================================
   CTA
   ========================================================= */
/* Derselbe Ton wie die Fußzeile, beide bilden am Seitenende einen Block */
.cta{
  position:relative; color:var(--on-dark);
  padding:112px 0 118px; text-align:center;
}
.cta-actions{
  margin-top:38px; display:flex; flex-wrap:wrap; gap:18px 26px;
  align-items:center; justify-content:center;
}
.cta-mail{
  display:inline-flex; flex-wrap:wrap; align-items:center; gap:8px 16px;
  justify-content:center;
  font-size:1rem; color:var(--on-dark);
}
.cta-mail a{ border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:3px; }
.cta-mail a:hover{ border-color:var(--accent); }
/* Zweitweg für Rechner ohne eingerichtetes Mailprogramm */
.copybtn{ display:none; }
.js .copybtn{
  display:inline-flex; align-items:center;
  font:inherit; font-size:.875rem; cursor:pointer;
  color:var(--on-dark); background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.28); border-radius:var(--r-pill);
  padding:7px 16px;
  transition:background-color .18s ease;
}
.js .copybtn:hover{ background:rgba(255,255,255,.2); }
.copystate{ margin-top:16px; min-height:1.4em; font-size:.875rem; color:var(--accent); }

/* =========================================================
   Seitenende
   Abschluss und Fusszeile liegen in einer gemeinsamen Huelle mit einem Bild
   dahinter. Ein Bild nur in der Fusszeile ergaebe oben eine sichtbare Kante
   zum schwarzen Abschluss, weil es dort schlagartig anfangen wuerde.
   ========================================================= */
.ende{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--ink);
}
.endebild{ position:absolute; inset:0; z-index:-1; }
.endebild img{ width:100%; height:100%; object-fit:cover; object-position:center 62%; opacity:.66; }
/* Oben schwarz, zur Fusszeile hin offen, zum Seitenende wieder ins Schwarz. */
.endebild::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    #080D0A 0%, #080D0A 34%, rgba(8,13,10,.72) 48%,
    rgba(8,13,10,.34) 66%, rgba(8,13,10,.34) 100%);
}
/* Nur Fusszeile, ohne Abschlussblock darueber */
.ende:not(:has(.cta)) .endebild::after{
  background:linear-gradient(180deg,
    #080D0A 0%, #080D0A 9%, rgba(8,13,10,.76) 22%,
    rgba(8,13,10,.34) 42%, rgba(8,13,10,.34) 100%);
}
.site-footer{
  position:relative;
  color:var(--on-dark);
  padding:96px 0 34px;
}
.footgrid{
  display:grid; gap:38px;
  grid-template-columns:1fr;
}
@media (min-width:700px){ .footgrid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .footgrid{ grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; } }
.footbrand p{ margin-top:18px; font-size:.9375rem; line-height:1.6; color:#9EA9A2; max-width:32ch; }
.footcol{ display:grid; gap:12px; align-content:start; }
.footcol h2{ font-size:.75rem; letter-spacing:.13em; text-transform:uppercase; color:#8A948D; font-weight:400; margin-bottom:4px; }
.footcol a{ font-size:.9375rem; color:#D8DED9; }
.footcol a:hover{ color:var(--white); }
.footbottom{
  margin-top:56px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;
  font-size:.8125rem; color:#8A948D;
}

/* =========================================================
   Rechtsseiten
   ========================================================= */
.legal{ background:var(--white); padding:150px 0 96px; }
.legal .wrap{ max-width:820px; }
.legal h1{ font-size:clamp(2rem,4vw,3rem); font-weight:400; }
.legal .legal-lead{ margin-top:20px; font-size:1.0625rem; line-height:1.6; color:var(--text-2); }
.legal h2{
  margin-top:52px; font-size:1.25rem; font-weight:500; letter-spacing:-.015em;
  padding-top:22px; border-top:1px solid var(--line);
}
.legal h3{ margin-top:28px; font-size:1rem; font-weight:500; }
.legal p, .legal li{ margin-top:12px; font-size:.9375rem; line-height:1.7; color:var(--text-2); }
.legal ul{ list-style:disc; padding-left:20px; }
.legal ul li{ margin-top:8px; }

/* =========================================================
   Bewegung
   ========================================================= */
.js .reveal{ opacity:0; transform:translateY(16px); }
.js .reveal.in{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }

/* Kennzahlenkarten, nach der Choreografie von ada.cx:
   die Karte klappt aus ihrer Mittellinie senkrecht auf, danach faehrt der Text
   zusammen, die Zahl von oben und die Beschriftung von unten.
   ada laesst 500ms zwischen den Karten und braucht damit zwei Sekunden Aufbau.
   Hier sind es 170ms, das liest sich weiter als Reihe und passt zur 600ms
   Blende, die auf der Seite sonst laeuft. */
.js .statgrid.seq .statcard{ opacity:0; transform:scaleY(0); }
.js .statgrid.seq .statcard > p{ opacity:0; }
.js .statgrid.seq .statnum{ transform:translateY(-10%); }
.js .statgrid.seq .statlabel{ transform:translateY(10%); }

.js .statgrid.seq.in .statcard{
  opacity:1; transform:none;
  transition:opacity .34s ease-out, transform .5s cubic-bezier(.5,1,.89,1);
}
.js .statgrid.seq.in .statcard > p{
  opacity:1; transform:none;
  transition:opacity .42s ease-out, transform .42s cubic-bezier(.2,.7,.3,1);
}
.js .statgrid.seq.in .statcard:nth-child(1){ transition-delay:0s; }
.js .statgrid.seq.in .statcard:nth-child(2){ transition-delay:.17s; }
.js .statgrid.seq.in .statcard:nth-child(3){ transition-delay:.34s; }
.js .statgrid.seq.in .statcard:nth-child(4){ transition-delay:.51s; }
.js .statgrid.seq.in .statcard:nth-child(1) > p{ transition-delay:.50s; }
.js .statgrid.seq.in .statcard:nth-child(2) > p{ transition-delay:.67s; }
.js .statgrid.seq.in .statcard:nth-child(3) > p{ transition-delay:.84s; }
.js .statgrid.seq.in .statcard:nth-child(4) > p{ transition-delay:1.01s; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  .js .reveal{ opacity:1; transform:none; }

  /* Die Sternregel oben setzt nur die Dauer. Bei einer endlosen Animation
     heisst das nicht aus, sondern tausend Durchlaeufe je Sekunde. Erst
     animation:none loescht den Namen und haelt das Band wirklich an. */
  .logotrack{
    animation:none;
    width:auto; flex-wrap:wrap; justify-content:center; row-gap:18px;
  }
  .logoband{ -webkit-mask-image:none; mask-image:none; }
  .logoitem:nth-child(n+8){ display:none; }

  .js .statgrid.seq .statcard,
  .js .statgrid.seq .statcard > p{ opacity:1; transform:none; }
}

/* =========================================================
   Telefon
   Drei Dinge: die Abschnitte atmen weniger, damit die Seite nicht endlos
   scrollt, jedes Tippziel wird mindestens 44px hoch, und der Hero rückt
   zusammen, damit die Produktkarte darunter noch angerissen wird.
   ========================================================= */
@media (max-width:760px){
  /* --- Naehte ---
     Auf dem Telefon lagen alle Abstaende bei 124 bis 132px, gleichmaessig,
     aber zu weit fuer einen Daumen. */
  .stats, .crew, .secure, .faq, .dark{ padding-top:56px; padding-bottom:58px; }
  .answer{ padding:56px 0 58px; }
  .voice{ padding:56px 0 60px; }
  .cta{ padding:60px 0 56px; }
  .site-footer{ padding-top:56px; }
  .footgrid{ gap:26px; }
  .statgrid{ margin-top:36px; }
  .darkgrid, .securegrid, .faqgrid{ margin-top:38px; }
  .crew .crewcard:first-of-type{ margin-top:38px; }
  .lead{ margin-top:14px; }
  .faqgrid{ gap:0; }
  /* Nach dieser Regel, sonst gewinnt die Naht darueber. Der Fragenblock soll
     buendig auf dem schwarzen Abschluss sitzen. */
  .faq{ padding-bottom:0; }

  .hero{ padding:104px 0 64px; }
  .hero-wrap{ gap:34px; }
  .hero-sub{ margin-top:20px; }
  .hero-actions{ margin-top:26px; }

  /* --- Tippziele ---
     Finger statt Mauszeiger. Nachgemessen, 44px ist die Grenze, ab der der
     Daumen zuverlaessig trifft. */
  .footcol a, .footcol h2{ padding-block:9px; }
  .footcol{ gap:2px; }
  .subnav a, .mobpanel a{ padding-block:14px; }
  .who-link, .cta-mail a{ padding-block:10px; }
  .copybtn{ padding-block:14px; }
  .acc summary{ padding-block:20px; }
  .skiplink, .copybtn, .footcol a, .subnav a, .mobpanel a, .cta-mail a{
    min-height:44px; display:flex; align-items:center;
  }
  .cta-mail a{ justify-content:center; }
  .brand{ padding-block:11px; min-height:44px; display:inline-flex; align-items:center; }
  .mobmenu > summary{ min-width:44px; min-height:44px; }

  /* --- Einzelne Bausteine ---
     Sechs Schalter untereinander waren 369px reine Beschriftung, deshalb
     stehen sie hier als Tastenfeld. */
  .tabs{ grid-template-columns:1fr 1fr; gap:8px; }
  .tabs .tabstage{ grid-column:1 / -1; }
  .tabs label{ padding:11px 14px; font-size:.875rem; min-height:0; }

  /* Die laengste Produktmarke stand sonst ueber die Kartenkante hinaus, und
     die Zahl darunter braucht Luft, sonst schiebt sie sich dahinter. */
  .statprod{ padding:11px 14px; gap:8px; font-size:.9375rem; }
  .sp-ico{ width:18px; height:18px; }
  .statcard{ --pad:14px; }

  /* Hochkant ist der Ausschnitt sehr schmal, deshalb ein anderer Bildpunkt. */
  .endebild img{ object-position:center 40%; }

  /* Weisser Abschnitt ueber grauem braucht eine Kante. */
  .secure{ border-bottom:1px solid var(--line-2); }
}

/* Schmale Geräte */
@media (max-width:400px){
  :root{ --gutter:18px; }
  /* lange Beschriftungen dürfen umbrechen, sonst schiebt der Button die Seite auf */
  .btn{ white-space:normal; }
  .crewmedia{ padding:26px 20px 0; gap:14px; }
  .crewbody{ padding:26px 20px 24px; }
  .crewviz{ padding:0 20px 24px; }
  .ui-head, .ui-row{ grid-template-columns:1fr auto; }
  .ui-head span:nth-child(2), .ui-row .spark{ display:none; }
  .extract{ grid-template-columns:66px 16px minmax(0,1fr); gap:6px; padding:14px 12px; }
  .f-k{ font-size:.625rem; }
  .doc{ padding:7px 6px; gap:5px; }
  .doc-amount{ font-size:.625rem; white-space:nowrap; }
  .fields li{ gap:6px; }
}


/* ============================================================
   Schmale Bildschirme, drei Korrekturen
   ============================================================ */

/* Sprungziele landen sonst unter der schwebenden Kopfzeile. */
html{ scroll-padding-top:88px; }

@media (max-width:760px){
  /* Die Kopfzeile liegt ueber dem Inhalt. Beim Herunterscrollen faehrt sie weg,
     sonst schneidet sie mitten durch die Zeile, die man gerade liest. */
  .siteheader{ transition:transform .28s ease; }
  .siteheader.weg{ transform:translateY(calc(-100% - 10px)); }

  /* Der Knopf sass in der Ecke der Buehne und lag damit auf dem Text.
     Auf schmalen Bildschirmen steht er unter der Karte. */
  .stage-btn{
    position:static;
    margin:18px 16px 18px auto;
    box-shadow:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .siteheader{ transition:none; }
}

/* Zwei Kennzahlenkarten nebeneinander ergeben auf dem Telefon 160px breite
   Spalten, in denen jeder Satz siebenmal umbricht. Untereinander. */
@media (max-width:559px){
  .statgrid{ grid-template-columns:1fr; }
}

/* Die Wortmarke stand mit 18px in einer 71px hohen Leiste. Auf dem Telefon
   passt das, auf dem Schreibtisch war sie zu leise. */
@media (min-width:760px){
  .brand-img{ height:21px; }
}

/* Der Sicherheitsblock steht unter einer zentrierten Ueberschrift und ueber
   einer zentrierten Schlusszeile. Die vier Punkte linksbuendig dazwischen
   brechen die Achse. Absatzbreite begrenzt, sonst franst zentrierter Text aus. */
.securegrid li{ text-align:center; }
.securegrid .secico{ margin-inline:auto; }
.securegrid p{ max-width:42ch; margin-inline:auto; }

/* Die Wortmarke im Fuss stand mit 16px kleiner da als die im Kopf. Ein
   Abbinder traegt sie normalerweise groesser, nicht kleiner. */
.footbrand .brand-img{ height:18px; }
@media (min-width:760px){
  .footbrand .brand-img{ height:23px; }
}

/* Die Wortmarke ist randlos beschnitten, das B steht also exakt auf der
   Spaltenkante. Jede Textzeile daneben traegt die Seitenvorbreite ihrer
   Schrift und beginnt dadurch 1,3px weiter rechts. Im Fuss stehen Marke und
   Satz uebereinander, dort sieht man den Versatz. Ausgleich fuer die Marke,
   damit die Stiele fluchten. */
.footbrand .brand-img{ margin-left:1.3px; }

/* Die Marke sass als Inline-Element auf der Textlinie, darunter blieb Platz
   fuer Unterlaengen stehen. Mit der groesseren Marke wuchs der mit. */
.footbrand .brand{ display:flex; width:max-content; }

/* LinkedIn im Abbinder. Die Marke steht als Flaeche, nicht als Kontur, damit
   sie neben der Wortmarke nicht duenner wirkt als der Satz darueber. Der
   Ausgleich links haelt sie auf derselben Kante wie Marke und Text. */
.soziallink{
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:22px;
  /* Das Tippziel ist 40px breit, die Marke darin 20px. Der Zug nach links
     stellt die Marke selbst auf die Textkante, nicht ihren Kasten. */
  margin-left:-8.7px;
  width:40px; height:40px;
  color:#9EA9A2;
  border-radius:var(--r-soft);
  transition:color .18s ease;
}
.soziallink:hover{ color:var(--on-dark); }