/* Cobot Sans, die Hausschrift. Lokal ausgeliefert, kein CDN, kein externer
   Request -- das ist die Zusage aus datenschutz.html, nicht nur Geschmack.
   Fork von Inclusive Sans, SIL OFL 1.1, Lizenz: assets/fonts/OFL.txt.
   format("woff2") und nicht format("woff2-variations"): der Altstring bringt
   nichts, was der schlichte nicht auch kann, faellt aber in einer Umgebung,
   die ihn nicht kennt, still auf die Systemschrift zurueck -- ohne 404 und
   ohne Fehlermeldung. Die Gewichtsachse reicht von 300 bis 700; alles
   darueber setzt der Browser auf 700, siehe font-synthesis in body. */
@font-face{font-family:"Cobot Sans";font-style:normal;font-weight:300 700;font-display:swap;src:url("assets/fonts/CobotSans-Variable.woff2") format("woff2");}
@font-face{font-family:"Cobot Sans";font-style:italic;font-weight:300 700;font-display:swap;src:url("assets/fonts/CobotSans-Italic-Variable.woff2") format("woff2");}

:root{
  /* =====================================================
     CORPORATE IDENTITY -- Cobot-Schmiede
     Quelle: Intern/gestaltung/Cobot-Schmiede_Farbpalette.md (Stand September 2026,
     lesbarkeitsgeprueft nach WCAG). Diese acht Werte SIND die Marke. Alles
     weiter unten haengt nur noch an ihnen. Wer eine Farbe braucht, nimmt
     eine von hier und erfindet keinen neuen Ton.

     Die drei Glut-Stufen sind nicht drei Wichtigkeiten, sondern drei
     Groessen-/Untergrund-Faelle. Verbindlich:
       heller Grund, ab 24px oder als Flaeche ...... --glut
       heller Grund, darunter (Fliesstext, Icons) .. --glut-tief
       dunkler Grund (Navy), kleiner Text/Icons .... --glut-hell

     Textfarbe auf farbigen Flaechen, ebenfalls verbindlich:
       auf --navy ....... --offwhite / Weiss   (15,8 / 17,0 : 1)
       auf --glut ....... --navy               ( 4,6 : 1) -- NICHT Weiss
       auf --glut-tief .. Weiss                ( 5,5 : 1)
       auf --kobalt ..... Weiss                ( 7,1 : 1) -- Navy waere 2,4
  ===================================================== */
  /* PRIMAERFARBE der Palette -- aber ein ZEICHENTON, kein Flaechenton.
     Schmiedeblau traegt das Logo, und zwar auf hellem wie auf dunklem Grund
     (auf Weiss 12,9:1, auf Off-White 12,0:1); genau das kann Navy nicht.
     Als grosse Flaeche verliert es diese Qualitaet und wirkt institutionell,
     darum liegt es hier in den Logodateien, nicht auf den Abschnitten.
     Die dunklen Flaechen der Website sind Navy. */
  --schmiedeblau:#002F6C;
  --navy:#0E1C34;       /* Flaechenton der Marke: Kopfzeile, Hero, abgesetzte
                           Abschnitte, Fuss. Dazu Ueberschriften und
                           Fliesstext auf hellem Grund.                       */
  --glut:#E2571C;       /* Akzent als Flaeche oder Grosstext ab 24px          */
  --glut-tief:#C23307;  /* Akzenttext unter 24px auf hellem Grund   (5,2:1)   */
  --glut-hell:#FD7618;  /* Akzenttext/Icons unter 24px auf dunkel   (6,3:1)   */
  --offwhite:#F9F6F0;   /* Hintergrundfarbe der Seite                         */
  --meergrau:#414A50;   /* Ambossgrau: Fliesstext, sekundaere UI, funktionale
                           Rahmen und Fokus. Auf Off-White 8,4:1.             */
  --silber:#DDE1E3;     /* Fuell- und Zonierungston, nie eine sichtbare Linie  */
  --kobalt:#2157A1;     /* Vertrauen: Links und Interaktives auf hellem Grund  */

  /* Zwei Navy-Stufen fuer dunkle Flaechen. Reines Navy mit 4 bzw. 7 Prozent
     Weissanteil, damit Klappmenue, Kartenkacheln und Verlaeufe sich vom
     Grund abheben, ohne einen zweiten Blauton in die Marke zu holen.
     Glut hell traegt auch auf der hellsten Stufe noch 5,2:1. */
  --navy-2:#18253C;
  --navy-3:#1F2C42;

  /* Rahmen. Die Palette kennt zwei Faelle und die Website braucht beide:
     - ruhige Trennlinie zwischen Flaechen: Meergrau mit 26 Prozent Deckung
       (1,5:1, also eine Linie, die man sieht, ohne dass sie die Karte
       einrahmt -- heute waren es 1,2:1, sie war praktisch unsichtbar);
     - funktionaler Rahmen (Eingabefeld, aktiver Zustand, Fokus): volles
       Meergrau, so wie die Palette es vorschreibt.
     Silbergrau ist hier bewusst NICHT vorgesehen: es erreicht auf Off-White
     nur 1,2:1 und verschwindet als Linie. Es zoniert ueber Flaeche. */
  --border:rgba(65,74,80,.26);
  --border-strong:var(--meergrau);

  /* ---------------------------------------------------------------
     ALTBESTAND: die Tokennamen der bisherigen Petrol-/Indigo-Palette.
     Sie bleiben als Aliase bestehen, damit alle Seiten und die
     Inline-var() im Markup ohne Bruch auf die neue CI umziehen. Neue
     Regeln nehmen die Namen von oben.
  --------------------------------------------------------------- */
  --petrol:var(--kobalt);            /* war Markenakzent -> jetzt das Interaktive */
  --petrol-hover:var(--navy);        /* Hover verdunkelt auf die Primaerfarbe     */
  --petrol-deep:var(--navy);
  --ink:var(--navy);
  --ink-2:var(--navy-2);
  --ink-3:var(--navy-3);
  --spark:var(--kobalt);             /* Indigo war das Interaktive auf hell       */
  --spark-2:var(--glut-hell);        /* helles Indigo lag immer auf Navy          */
  --spark-soft:rgba(33,87,161,.14);  /* Kobalt-Schleier fuer Fokusflaechen        */
  --flame:var(--glut);               /* Signalton, gross gesetzt                  */
  --rot-blue:var(--silber);          /* Gegenwort auf Navy: kalter Stahl statt Blau */
  /* Weiss steht in der Palette als vorgeschriebene Textfarbe auf Glut tief
     und Kobaltblau. Als Flaeche ist es hier die eine Stufe ueber Off-White:
     Karten und Panels heben sich damit vom Off-White-Abschnitt ab, ohne
     dass ein Rahmen noetig waere. */
  --paper:#ffffff;
  --sand:var(--offwhite);
  --sand-2:var(--silber);
  --text:var(--navy);
  --muted:var(--meergrau);
  --on-dark:var(--offwhite);
  /* Gedaempftes Licht auf Navy: Off-White mit 72 Prozent Deckung, 8,6:1.
     Ein eigener grauer Ton waere ein neunter Markenton gewesen. */
  --on-dark-muted:rgba(249,246,240,.72);
  /* geometry */
  /* EIN Radius fuer die ganze Website. Referenz sind die Produktkarten.
     Alle Flaechen nutzen ihn: Karten, Panels, Medien, CTA-Boxen, Bildflaechen. */
  --radius:36px;
  /* Ausnahme: kleine quadratische Icon-Kacheln unter ~56px, dort waere --radius ein Kreis */
  --radius-ico:12px;
  --pill:999px;
  --shadow:0 24px 60px -28px rgba(14,28,52,.45);
  --shadow-spark:0 22px 50px -20px rgba(33,87,161,.50);
  /* ================= BREITENREGEL =================
     Verbindlich fuer die ganze Website. Wer eine neue Flaeche baut, nimmt
     diese Werte und erfindet keine eigene px-Zahl.

     1. SEITENBREITE (--wrap): die Seite nimmt 80 % des Bildschirms ein.
        Auf einem 4K-Schirm (2236 CSS-px) sind das 1789px, links und rechts
        bleiben je rund 220px Rand. Unter 1475px Fensterbreite waeren 80 %
        zu schmal, dort greift die Untergrenze 1180px; unter 1180px fuellt
        die Seite den Schirm. Nach oben ist bei 1800px Schluss.
        Jeder Abschnitt legt seinen Inhalt in .wrap. Niemand baut sich eine
        eigene Seitenbreite.

     2. VOLLE BREITE, BIS AN DEN RAND: Flaechen, Raster, Formulare,
        Eingabefelder, Bilder, Buttonzeilen und Tabellen laufen bis an den
        Rand ihres Containers. Sie bekommen kein eigenes max-width.

     3. FLIESSTEXT (--measure): auch Absaetze laufen bis an den Rand ihres
        Containers. Kein 44ch hier und 62ch da, sonst springt der Umbruch von
        Abschnitt zu Abschnitt hin und her; genau das war der Grund, das
        abzuschaffen. Steht der Absatz in einer Spalte oder Karte, macht die
        Spalte die Breite. Einen zweiten Deckel gibt es nie.
        Soll der Text doch einmal schmaler werden, wird NUR dieser eine Wert
        geaendert (z. B. auf 1400px), nie ein max-width an einer Regel.

     4. UEBERSCHRIFTEN (--head-max): eigenes Mass, gemessen in ch ihrer
        Displayschrift, weil sie sehr viel groesser gesetzt sind.
        ch ist die Breite der Null, und die haengt an der Schrift: Inter
        mass bei Displaygewicht 0,7092 em, Cobot Sans misst 0,6770 em.
        Beim Schriftwechsel stand hier 34ch; unveraendert waeren alle
        Ueberschriften 4,5 Prozent schmaler gelaufen und ein Teil haette
        still eine Zeile mehr bekommen. 34 mal 0,7092 durch 0,6770 sind
        35,6 -- dasselbe Pixelmass wie vorher.

     5. Raster fuellen die Breite auch mit weniger Karten als Spalten:
        repeat(auto-fit, minmax(...,1fr)) statt fester Spaltenzahl.
  */
  --wrap:clamp(1180px, 80vw, 1800px);
  --measure:100%;
  /* Abstand ueber und unter jedem Abschnitt, auch unter dem Hero. Ein Wert fuer
     die ganze Website, damit alle Abschnitte gleich viel Luft haben. Schmal
     36px, breit 44px, siehe die Medienabfragen fuer 640px und 1435px. */
  --sec-y:40px;
  --head-max:35.6ch;
  /* Die Schrift steht an genau einer Stelle. --display und --body zeigen
     darauf, damit die Verwendungsstellen im Blatt unberuehrt bleiben.
     "Arial Black" ist aus dem Displaystapel raus: es war der Fettrueckfall
     fuer font-weight 800, eine Rolle, die es bei einem 700er-Maximum nicht
     mehr ausfuellt. Rueckfall wirkt zeichenweise -- jedes Zeichen, das der
     Erstschrift fehlt, stuende sonst als Arial-Black-Klotz in der
     Ueberschrift. */
  --schrift:"Cobot Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --display:var(--schrift);
  --body:var(--schrift);
}

*{box-sizing:border-box;margin:0;padding:0}
/* scroll-padding-top: Sprungziele (#anker) landen unter der fixierten
   Kopfzeile statt dahinter. Wert = Navigationshoehe 82px + etwas Luft. */
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{
  font-family:var(--body);
  /* Kein erfundener Schnitt: fett ist 700, kursiv ist der echte
     Kursivschnitt. Beides liegt als Datei vor, nichts wird gefaelscht. */
  font-synthesis:none;
  color:var(--text);
  background:var(--sand);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
/* Kennungen werden zeichenweise gelesen, also mit geschlitzter Null:
   Cookie-Namen und Speicherbezeichnungen auf den Rechtsseiten. */
code{font-variant-numeric:slashed-zero}

/* ---------- Fokus ----------
   Die Palette weist Meergrau ausdruecklich die funktionalen Rahmen und den
   Fokus zu. Auf Navy traegt Meergrau nur 1,9:1, dort uebernimmt Off-White.
   Beides steht hier an einer Stelle: vorher war ausser den beiden
   Karussell-Knoepfen kein einziges Bedienelement bei Tastaturbedienung
   markiert. :where() haelt die Spezifitaet bei null, damit einzelne
   Bauteile ihren eigenen Ring behalten koennen. */
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--meergrau);outline-offset:2px;
}
/* Fuss bewusst NICHT in dieser Gruppe: er ist Schliffgrau, dort waere ein
   Off-White-Ring mit 1,2:1 unsichtbar. Er nimmt den Standardring in Ambossgrau. */
.top :where(a,button):focus-visible,
.hero :where(a,button):focus-visible,
.cta-box :where(a,button):focus-visible,
.sec-dark :where(a,button):focus-visible,
.card.hot :where(a,button):focus-visible{outline-color:var(--offwhite)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}

/* ---------- reusable ---------- */
.pill{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:.8rem;font-weight:700;letter-spacing:.02em;
  padding:.5em 1em;border-radius:var(--pill);
  text-transform:uppercase;
}
.pill-spark{background:var(--spark);color:#fff}
.pill-outline{border:1.5px solid rgba(255,255,255,.28);color:var(--on-dark)}
.pill-petrol{background:rgba(33,87,161,.10);color:var(--kobalt)}
.dot{width:.5em;height:.5em;border-radius:50%;background:currentColor;display:inline-block}

.btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--body);font-weight:800;font-size:1.02rem;
  padding:1.15em 1.9em;border-radius:var(--pill);
  border:none;cursor:pointer;line-height:1;transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn svg{width:1.1em;height:1.1em}
.btn-spark{background:var(--spark);color:#fff;box-shadow:var(--shadow-spark)}
.btn-spark:hover{transform:translateY(-2px);background:var(--navy)}
/* Signalfarbener Haupt-CTA (Flame). Fuer den Abschluss-Button, der maximal
   heraussticht. */
/* Textfarbe auf Glut ist Navy, nicht Weiss: Navy traegt hier 4,6:1, Weiss
   nur 3,7:1 und damit erst ab 24px. Der Pfeil im Knopf haengt an
   currentColor und zieht mit. Beim Ueberfahren geht die Glut nicht dunkler,
   sondern heller (Glut hell) -- die Kohle glueht auf, und der Navy-Text
   gewinnt dabei sogar Kontrast (6,3:1). */
.btn-flame{background:var(--glut);color:var(--navy);box-shadow:0 20px 44px -24px rgba(14,28,52,.75)}
.btn-flame:hover{transform:translateY(-2px);background:var(--glut-hell)}
.btn-petrol{background:var(--petrol);color:#fff}
.btn-petrol:hover{transform:translateY(-2px);background:var(--petrol-hover)}
.btn-ghost{background:transparent;color:var(--on-dark);border:1.5px solid rgba(255,255,255,.3)}
.btn-lg{font-size:1.12rem;padding:1.25em 2.2em}
/* Kobaltblau ist die Interaktionsfarbe auf HELLEM Grund; auf Navy traegt es
   nur 2,4:1 und sein dunklerer Hover-Ton waere der Abschnitt selbst. Auf
   dunklen Flaechen dreht der Knopf darum um: helle Flaeche, Kobalt-Text. */
.sec-dark .btn-spark,.sec-dark .btn-petrol,
.hero .btn-spark,.hero .btn-petrol,
.figures .btn-spark,.figures .btn-petrol{
  background:var(--offwhite);color:var(--kobalt);box-shadow:0 20px 44px -24px rgba(14,28,52,.8);
}
.sec-dark .btn-spark:hover,.sec-dark .btn-petrol:hover,
.hero .btn-spark:hover,.hero .btn-petrol:hover,
.figures .btn-spark:hover,.figures .btn-petrol:hover{background:var(--silber);color:var(--kobalt)}

/* E-Mail-Adresse als Kopier-Schaltflaeche.
   Ein Klick auf die Adresse legt sie in die Zwischenablage, statt die Mail-App
   zu oeffnen (das erledigen die grossen "E-Mail an ..."-Buttons). Weil es ein
   <button> ist, greifen die bisherigen a-Farbregeln nicht mehr -- die Adresse
   bekommt ihr Link-Aussehen darum hier: Kobalt (Interaktionsfarbe auf hellem
   Grund, alle Fundstellen stehen hell), Unterstreichung als Klick-Hinweis, beim
   Ueberfahren Navy. Der Fokusring kommt aus der globalen :focus-visible-Regel. */
.mail-copy{
  display:inline;font:inherit;font-weight:600;
  color:var(--kobalt);background:none;border:0;padding:0;
  border-bottom:1px solid currentColor;
  cursor:pointer;transition:color .15s ease;
}
.mail-copy:hover{color:var(--navy)}

/* Toast, der das Kopieren bestaetigt. Unten mittig, damit er das Cookie-Symbol
   unten links nicht verdeckt. Navy traegt Off-White mit hohem Kontrast. Er ist
   zugleich die Ansage fuer Screenreader (role/aria-live setzt das Skript). Ruht
   unsichtbar und faengt keine Klicks ab. */
.mail-toast{
  position:fixed;left:50%;bottom:24px;z-index:60;
  transform:translateX(-50%) translateY(8px);
  max-width:calc(100vw - 32px);
  background:var(--navy);color:var(--offwhite);
  font-weight:700;font-size:.95rem;line-height:1.3;
  padding:.8em 1.2em;border-radius:var(--pill);
  box-shadow:0 12px 30px -12px rgba(14,28,52,.6);
  opacity:0;pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.mail-toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion:reduce){
  .mail-toast{transition:none}
}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:.82rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--glut-tief);
}
.eyebrow .bar{width:26px;height:3px;border-radius:3px;background:var(--glut-tief)}
/* Die Eyebrow trägt im Fachwissen den Weg dorthin, also einen Link. Er soll
   die Zeile nicht auffaellig machen, sondern nur anklickbar sein. */
.eyebrow a{color:inherit;border-bottom:1px solid transparent;transition:border-color .15s}
.eyebrow a:hover{border-bottom-color:currentColor}
/* on dark backgrounds keep the eyebrow a warm, high-contrast accent */
.hero .eyebrow,.figures .eyebrow,.sec-dark .eyebrow{color:var(--spark-2)}
.hero .eyebrow .bar,.figures .eyebrow .bar,.sec-dark .eyebrow .bar{background:var(--spark-2)}

h1,h2,h3{font-family:var(--display);letter-spacing:-.02em}
/* Die oberen Deckel greifen erst ab etwa 1690px Fensterbreite, darunter
   bleibt alles wie bisher. Ohne sie bliebe die Ueberschrift auf einem
   4K-Schirm exakt so gross wie auf einem Laptop und wirkte verloren. */
/* balance verteilt eine mehrzeilige Ueberschrift auf gleich lange Zeilen.
   Seit die Ueberschriften die volle Abschnittsbreite nutzen duerfen, haengt
   sonst haeufig ein einzelnes Wort in der letzten Zeile. */
.h1{font-size:clamp(2.4rem,5.2vw,5.5rem);font-weight:800;line-height:1.0;letter-spacing:-.035em;text-wrap:balance}
.h2{font-size:clamp(2rem,3.6vw,3.8rem);font-weight:800;line-height:1.03;letter-spacing:-.03em;text-wrap:balance}
/* "Dedimus"-Ueberschrift: Nur der Markenname "Dedimus" steht fett und orange.
   Im Slogan buchstabieren die Akronym-Buchstaben (De/Di/Mu/S) den Namen nach --
   diese werden nur fett hervorgehoben (kein Orange), heben sich also allein
   uebers Schriftgewicht ab. Der uebrige Slogan-Text bleibt im normalen
   H2-Gewicht dunkel, damit keine duennen Buchstaben neben dem Fettdruck stehen.
   Die Stufe ist 600 gegen 700 und nicht mehr 800 gegen 900: Cobot Sans endet
   bei 700, der Browser klemmt alles darueber dorthin. Mit 800/900 waeren
   Akronym und Umgebung exakt gleich breit gewesen -- nachgemessen 64,89 px
   gegen 64,89 px -- und das Akronym waere unsichtbar geworden. Eine Stufe
   tiefer angesetzt bleibt der Kontrast, wo er hingehoert: im Gewicht, nicht
   in der Farbe. */
.h2.dedimus{font-weight:600}
.h2.dedimus b{font-weight:700}
.h2.dedimus .dname{font-weight:700;color:var(--flame)}

/* =====================================================
   HEADER
===================================================== */
/* Kopfzeile bleibt beim Scrollen oben stehen. Der Hintergrund ist deckend,
   damit heller Seiteninhalt nicht durchscheint.
   Die Flaeche ist Navy, der Flaechenton der Marke: Weiss darauf 17,0:1, der
   gedaempfte Menuetext 8,6:1. Der Hero darunter traegt dasselbe Navy -- eine
   durchgehende Flaeche, keine Kante. Eine Trennlinie braucht es hier
   deshalb nicht. */
.top{position:sticky;top:0;z-index:20;background:var(--ink);box-shadow:0 6px 24px -12px rgba(14,28,52,.55)}
.nav{display:flex;align-items:center;gap:28px;height:82px}
/* Die Kopfzeile zeigt die vollstaendige Wort-Bild-Marke als Querfassung: Amboss
   links, darunter kein Text, sondern der Schriftzug des Logos rechts daneben.
   Der Schriftzug ist Vektor aus der Logodatei, kein Satz in der Hausschrift,
   sonst weicht die Schrift im Kopf sichtbar vom Logo ab. Amboss und Schriftzug
   stehen im Massstab der Vorlage, nur nebeneinander statt uebereinander. */
.brand{display:flex;align-items:center;color:#fff}
/* currentColor erbt das Weiss von .brand, das Logo braucht daher keine
   zweite, weisse Datei. */
.brand .brand-logo{height:40px;width:auto;display:block;flex:0 0 auto}
.menu{display:flex;align-items:center;gap:28px;margin-left:auto}
.menu a{color:var(--on-dark-muted);font-weight:600;font-size:.97rem;transition:color .15s}
.menu a:hover{color:#fff}
/* Die rechte Ecke traegt nur den Menue-Knopf. Sie steht erst mit ihm in der
   Zeile, sonst hielte ihr leerer Platz die Links vom rechten Rand fern. */
.nav .right{display:none;align-items:center;gap:16px}
.btn-sm{padding:.85em 1.35em;font-size:.92rem}

/* Menue-Knopf fuer schmale Fenster. Er steht ganz rechts in der Kopfzeile und
   ist erst unter 960px sichtbar: darueber traegt die Kopfzeile alle Links
   nebeneinander, dort waere der Knopf doppelt gemoppelt. */
.burger{
  display:none;flex:0 0 auto;width:44px;height:44px;padding:0;
  align-items:center;justify-content:center;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.2);
  border-radius:var(--radius-ico);transition:background .15s,border-color .15s;
}
.burger:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.34)}
.burger__box{position:relative;display:block;width:20px;height:14px}
.burger__box span{
  position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;
  transition:top .18s ease,transform .18s ease,opacity .12s ease;
}
.burger__box span:nth-child(1){top:0}
.burger__box span:nth-child(2){top:6px}
.burger__box span:nth-child(3){top:12px}
/* Offen: aus den drei Strichen wird ein Kreuz. */
.top.nav-open .burger__box span:nth-child(1){top:6px;transform:rotate(45deg)}
.top.nav-open .burger__box span:nth-child(2){opacity:0}
.top.nav-open .burger__box span:nth-child(3){top:6px;transform:rotate(-45deg)}

/* =====================================================
   HERO  (dark, petrol-filled, spark accent)
===================================================== */
/* Der Hero ist die grosse tragende Flaeche der Seite: Navy, dieselbe
   Flaeche wie die Kopfzeile darueber. Weiss 17,0:1, Off-White 15,8:1. */
.hero{
  position:relative;background:var(--ink);color:var(--on-dark);
  padding:24px 0 var(--sec-y);overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  /* Nur kuehles Licht. Ein warmer Verlauf hat hier nichts verloren: Orange
     ueber Navy ergibt als Flaeche kein Gluehen, sondern Braun, und er lag
     genau dort, wo der orange Knopf und das orange Riesenwort ohnehin schon
     arbeiten. Warm ist im Hero jetzt nur noch, was warm sein soll.
     Radien in Prozent, nicht in px: sonst deckt derselbe Verlauf auf einem
     Telefon die ganze Flaeche ab und der Text steht in seinem Kern.

     Die Deckung der beiden Lichter ist gerechnet, nicht gefuehlt: Kobalt
     liegt zu Navy nur 2,4:1, das Licht hellt die Flaeche also kaum auf,
     kostet aber genau den Spielraum, den die Glut hier noch hat. Glut hell
     traegt auf Navy 6,3:1 und unter dem staerkeren der beiden Lichter (.34)
     noch 4,9:1; das grosse Glut-Wort faellt dort von 4,6:1 auf 3,5:1. Mehr
     Deckung vertraegt der Claim-Satz nicht. */
  background:
    radial-gradient(72% 62% at 4% 90%, rgba(33,87,161,.34), transparent 62%),
    radial-gradient(62% 48% at 80% 2%, rgba(33,87,161,.26), transparent 60%);
}
.hero .wrap{position:relative;z-index:2}
/* minmax(0,...) haelt die Spalten fest. Mit blossem fr waechst die Textspalte,
   sobald ein Wort breiter ist als sie, und das Video daneben rueckt mit. */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
/* Startseite: seit Pill und Punkte weg sind, ist die Textspalte kuerzer als
   die Video-Spalte. Vertikal zentriert (align-items:center) entstuende oben
   ein grosser Leerraum, daher hier die Copy oben buendig. Unterseiten nutzen
   .hero--sub und bleiben zentriert. */
.hero:not(.hero--sub) .hero-grid{align-items:start}
.hero-kicker{margin-bottom:26px}
.hero h1{margin-bottom:22px;color:#fff;max-width:var(--head-max)}
/* orange hervorgehobener Teilsatz in der Hero-Ueberschrift (auf dunklem Grund);
   nowrap haelt "Jede Naht sitzt." in einer Zeile. */
.hero h1 .hl{color:var(--flame);white-space:nowrap}
/* Kein white-space:nowrap: "Schweissautomatisierung" ist ein einziges Wort
   und war damit bei jeder Fensterbreite breiter als seine Spalte. Die
   Trennstelle steht als &shy; im Markup. */
.hero h1 .glow{color:var(--spark-2)}
.hero .lead{font-size:1.42rem;color:var(--on-dark-muted);max-width:var(--measure);font-weight:500}

/* =====================================================
   HERO-ROTATOR
   Rotierende Kernaussagen in der Ueberschrift: oben das grosse Wort,
   darunter kleiner "statt <Gegenteil>". hero-rotator.js tauscht alle
   2 s nur den Wortlaut, beide Zeilen bleiben immer stehen, damit die
   Copy darunter beim Wechsel nicht springt.
   Unterseiten nutzen denselben Aufbau fest im HTML, ohne die ids, auf die
   hero-rotator.js bindet: erste Zeile gross in Glut, zweite kleiner in Silbergrau.
===================================================== */
.hero-rotator{display:flex;flex-direction:column;gap:.04em;max-width:none}
/* AAA: das grosse Wort. Skaliert mit der Fensterbreite (vw), damit auch das
   laengste Wort ("Automatisiert") in der zweispaltigen Ansicht nicht aus der
   Spalte laeuft; nach oben auf 7rem gedeckelt. 6vw ist gemessen: Am engsten
   Punkt (1480px Fensterbreite) bleiben 6px Luft, 6,4vw lief dort 30px ueber. */
.rot-top{
  display:block;color:var(--flame);
  font-size:clamp(2.6rem,6vw,7rem);line-height:.96;letter-spacing:-.04em;
}
/* BBB: "statt <Wort>", klar kleiner, sitzt unter dem grossen Wort.
   Das Gegenwort steht in Silbergrau: kalter Stahl als Gegenpol zur Glut in
   der Zeile darueber, gleiche Farbe wie die Schluesselwoerter im Claim-Satz.
   "statt" bleibt gedimmt. Ein kuehles Blau gibt es dafuer nicht mehr --
   Kobaltblau traegt auf Navy nur 2,4:1. */
.rot-bot{
  display:block;font-weight:700;color:var(--rot-blue);
  font-size:clamp(1.5rem,3.4vw,3.6rem);line-height:1.06;letter-spacing:-.02em;
}
.rot-bot .statt{color:var(--on-dark-muted);font-weight:600}

/* Claim-Satz unter dem Rotator: der Satz steht gedaempft, die
   Schluesselwoerter eine Stufe heller in Silbergrau, und das gerade im
   Rotator gezeigte Wort glueht in Glut hell auf (Steuerung: hero-rotator.js).
   Fett per text-shadow ("faux bold") statt font-weight: die Glyphenbreite
   bleibt gleich, dadurch aendert sich der Zeilenumbruch nicht und der Satz
   bleibt beim Wechsel ruhig stehen. */
/* Die Schluesselwoerter stehen ruhig in Silbergrau. Das Wort, das der
   Rotator gerade oben zeigt, wechselt nach Glut hell und wird per
   text-shadow fett -- die Glyphenbreite bleibt gleich, der Satz steht
   beim Wechsel still. Das Aufleuchten ist damit die Farbe selbst. */
.hero-claim .kw{color:var(--rot-blue);transition:color .35s ease}
.hero-claim .kw.lit{color:var(--glut-hell);text-shadow:0.5px 0 0 currentColor,-0.5px 0 0 currentColor}
/* Sanftes Ein-Faden beim Wechsel, Unterzeile minimal versetzt. */
.hero-rotator.is-swap .rot-top{animation:rotSwap .5s ease both}
.hero-rotator.is-swap .rot-bot{animation:rotSwap .5s ease .06s both}
@keyframes rotSwap{from{opacity:0;transform:translateY(.16em)}to{opacity:1;transform:none}}

.points{display:flex;flex-direction:column;gap:10px;margin:30px 0 8px}
.point{
  display:flex;align-items:center;gap:13px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);
  padding:13px 18px;border-radius:var(--pill);font-weight:600;color:var(--on-dark);font-size:1rem;
  width:fit-content;max-width:100%;
}
.point .tick{
  width:26px;height:26px;border-radius:50%;flex:0 0 auto;
  background:var(--petrol);
  display:grid;place-items:center;color:#fff;
}
.point .tick svg{width:14px;height:14px}

.hero-note{color:var(--on-dark-muted);margin:22px 0 28px;font-size:1.02rem;max-width:var(--measure)}
.hero-cta{display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center;margin-top:44px}
/* sekundaerer Textlink neben dem Hero-Button (auf dunklem Grund) */
.hero-cta .sec{color:#fff;font-weight:700;border-bottom:2px solid var(--spark-2);padding-bottom:2px}
.hero-cta .sec:hover{color:var(--spark-2)}

/* media placeholder — product-shot slot */
.stage{position:relative}
.media{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background:
    linear-gradient(160deg,var(--ink-3),var(--ink-2));
  border:2px dashed rgba(221,225,227,.45);
  aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:space-between;
  padding:26px;box-shadow:var(--shadow);
}
/* ---- Bildsprache der Zeichnung im Medienrahmen ----
   Dieselben drei Rollen wie in den Produktkarten (.card .art), damit im
   Markup kein Hexwert steht. Gerechnet ist der unguenstigste Grund: der
   Rahmen verlaeuft von Navy-3 nach Navy-2, an seiner hellsten Stelle liegt
   darauf noch das Kobaltlicht von .media::after, zusammen #20375B. Petrol
   und Indigo, die frueher in dieser Zeichnung standen, gingen auf diesem
   Grund unter.
     Werkstueck    Silber .52    3,6:1 (Flaeche, ab 3,0)
     Sensorik      volles Silber 9,1:1
     Naht/Lichtbogen Glut hell   4,4:1 (Grafikelement; auf der dunklen
                                 Verlaufsseite 5,7:1). Orange traegt hier
                                 keinen Text mehr, nur noch den Punkt. */
.media{--art-stahl:rgba(221,225,227,.52);--art-sensor:var(--silber);--art-naht:var(--glut-hell)}
/* Startseiten-Hero: Video-Platzhalter im 16:9-Format statt 4:5. Hoehere
   Spezifitaet als die mobile 1/1-Regel, gilt also auf allen Breiten.
   Unterseiten (.hero--sub) behalten 4:5. */
.hero:not(.hero--sub) .media{aspect-ratio:16/9}
.media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 52% at 70% 20%, rgba(33,87,161,.26), transparent 60%);
}
.media .scanline{
  position:absolute;left:0;right:0;top:38%;height:3px;
  background:linear-gradient(90deg,transparent,var(--silber),transparent);
  box-shadow:0 0 22px 3px rgba(221,225,227,.40);opacity:.95;
}
.media-top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start}
.media-center{position:relative;z-index:2;display:grid;place-items:center;flex:1}
/* Grund wie die Karussell-Pfeile (.mnav): halbdeckendes Navy. Der fruehere,
   fast durchsichtige Grund ging auf hellen Standbildern unter -- der weisse
   Pfeil stand dann mitten im Lichtbogen. */
.play{
  width:88px;height:88px;border-radius:50%;
  background:rgba(14,28,52,.62);border:1.5px solid var(--offwhite);
  display:grid;place-items:center;color:var(--offwhite);
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.play svg{width:34px;height:34px;margin-left:5px}
.media-cap{position:relative;z-index:2;color:var(--on-dark-muted);font-size:.92rem;font-weight:600;display:flex;align-items:center;gap:9px}
.media-cap .rec{width:9px;height:9px;border-radius:50%;background:var(--spark-2);box-shadow:0 0 10px var(--spark-2)}

/* floating stat badge on media */
.float-badge{
  position:absolute;left:auto;right:18px;bottom:150px;z-index:5;
  background:#fff;color:var(--text);border-radius:var(--radius);padding:16px 20px;
  box-shadow:var(--shadow);display:flex;align-items:center;gap:14px;transform:rotate(-4deg);
}
.float-badge .fb-ico{width:40px;height:40px;border-radius:var(--radius-ico);flex:0 0 auto;display:grid;place-items:center;background:var(--petrol);color:#fff}
.float-badge .fb-ico svg{width:21px;height:21px}
.float-badge .lbl{font-size:.82rem;font-weight:600;color:var(--muted);max-width:15ch;line-height:1.25}
.float-badge .lbl strong{display:block;color:var(--text);font-weight:800;font-size:.92rem;letter-spacing:-.01em}

/* marquee-style trust strip (motion implied, static) */
/* Die Leiste ist der Sockel des Hero: dasselbe Navy, ruhig und ohne Verlauf.
   Nach unten trennt der Wechsel auf Off-White von selbst.
   Nach oben gibt es bewusst KEINE Kante: Hero und Leiste sind beide Navy und
   gehen ohne Fuge ineinander ueber. Im Browser nachgemessen -- ueber die
   rechten zwei Drittel der Breite sind beide Flaechen exakt rgb(14,28,52),
   also 1,00:1; links zeichnet sich eine schwache Stufe ab (1,21:1), aber das
   ist nur die Stelle, an der das Kobaltlicht des Hero endet, keine Linie.
   Die Leiste liest sich damit als Sockel des Hero und nicht als eigenes
   Farbband -- so ist es gewollt, nicht vergessen.
   Die vier Piktogramme stehen in Glut hell (6,3:1 auf Navy). */
.strip{background:var(--navy);color:var(--offwhite);position:relative;z-index:3}
/* Raster statt Flexbox: bei Flexbox bricht die Leiste dort um, wo es gerade
   nicht mehr passt, und das war ueber weite Strecken drei oben und eines unten.
   Mit vorgegebener Spaltenzahl gibt es nur drei Zustaende: vier nebeneinander,
   zwei mal zwei, oder untereinander. Sieben Spalten, weil die drei Schraegstriche
   als eigene Elemente mitzaehlen. */
.strip .wrap{display:grid;grid-template-columns:repeat(7,auto);justify-content:center;
  gap:14px 28px;align-items:center;padding:16px 32px;font-weight:800;font-size:.95rem;letter-spacing:.01em}
.strip .s{display:inline-flex;align-items:center;gap:10px}
.strip .s svg{width:18px;height:18px;color:var(--glut-hell)}
.strip .sep{opacity:.55;font-weight:900}

/* Vier nebeneinander brauchen 1087,6 px Inhaltsbreite (919,6 fuer die vier
   Stichworte und die drei Schraegstriche, plus sechs Luecken zu 28). Ab hier
   reicht es nicht mehr, also zwei mal zwei -- die Schraegstriche entfallen
   dabei, sie trennen nur innerhalb einer Zeile.
   Im Browser nachgemessen, nicht gerechnet. Mit Inter waren es 1084 und die
   Schwelle lag bei 1150. Cobot Sans setzt die Stichworte enger (898,2 statt
   915,6), aber der Schraegstrich ist breiter, unterm Strich 3,6 px mehr.
   Bei 1151 px war die Vierer-Reihe deshalb zwar aktiv, der Platz reichte
   aber 0,6 px nicht und ein Stichwort brach um. 1153 laesst dieselbe knappe
   Reserve wie vorher. */
@media (max-width:1153px){
  .strip .wrap{grid-template-columns:repeat(2,auto);justify-content:center;column-gap:48px}
  .strip .sep{display:none}
}
/* Zwei nebeneinander brauchen 640 px: 527,8 fuer die beiden Spalten, 48 Luecke,
   64 Innenabstand. Darunter bricht der Text innerhalb der Stichworte um, also
   untereinander -- als zentrierter Block mit linksbuendigen Zeilen. */
@media (max-width:660px){
  .strip .wrap{grid-template-columns:max-content;justify-content:center;gap:12px}
}
/* Erst hier ist --wrap so weit gewachsen, dass die grosszuegige Luecke von
   frueher wieder hineinpasst: 919,6 fuer die Stichworte plus 336 sind 1255,6,
   verfuegbar sind bei 1700px genau 1296. */
@media (min-width:1700px){
  .strip .wrap{column-gap:56px}
}

/* =====================================================
   PROBLEM  (light warm)
===================================================== */
/* Hintergruende von Problem und Produkte wurden getauscht, als die beiden
   Abschnitte die Plaetze getauscht haben. Sonst staenden Problem und Ablauf
   beide auf Sand, und eine gruene Ueberschrift braucht immer einen Wechsel. */
.problem{background:var(--silber);padding:var(--sec-y) 0}
/* VORLAGE FUER ALLE INHALTS-ABSCHNITTE: erst Ueberschrift, dann Text, dann
   Bild. Kein Nebeneinander von Text und Abbildung. Der Text bekommt eine
   Lesebreite, die Abbildung darunter eine eigene Maximalbreite, damit sie
   auf breiten Schirmen nicht ins Riesenhafte waechst. */
.problem-grid{display:block}
/* Die Lesebreite gilt fuer den Fliesstext, nicht fuer die Ueberschrift:
   sonst waere die Ueberschrift hier auf 660px eingesperrt, waehrend sie in
   allen anderen Abschnitten bis --head-max laufen darf. */
.problem h2{margin:0;max-width:var(--head-max)}
/* Eyebrow ueber der Abschnitts-Ueberschrift, gleicher Abstand wie in .head */
.problem > .wrap > .eyebrow{margin-bottom:14px}
/* Auf Schliffgrau ist Glut verboten und Glut tief ebenso: 2,8:1 und 4,2:1,
   beide unter der Grenze. Dieser Abschnitt steht auf Schliffgrau, seine
   Eyebrow nimmt darum den von der Palette dafuer vorgesehenen Ausweg und
   steht in Lichtbogenblau (5,4:1). Die Glut bleibt in diesem Abschnitt dem
   Reibungswort in der Frage vorbehalten -- das steht auf Weiss. */
.problem .eyebrow{color:var(--kobalt)}
.problem .eyebrow .bar{background:var(--kobalt)}
.problem-copy p{color:var(--muted);font-size:1.08rem;margin-top:22px;max-width:var(--measure)}
.problem-copy p strong{color:var(--text);font-weight:700}

/* Fassung "Drei provokante Fragen" als Kartenreihe: Frage + Erklaerung im
   weissen Kopf, die Aufloesung im Navy-Fuss, beides auf einem Silbergrau-
   Abschnitt -- Silbergrau ist der Zonierungston der Palette und trennt den
   Abschnitt von den Produkten darueber deutlicher als ein zweites Off-White.
   Ein Reibungswort je Frage in Glut tief (.hl) = das abzuschaffende
   Verfahren, nie das Wertvolle.
   Radius wie die Produktkarten (--radius), overflow:hidden fuer den Fuss. */
.prob-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto;gap:24px;margin-top:44px}
/* Karte per Subgrid: alle Karten teilen sich die zwei Zeilenspuren des
   Containers (Kopf, Fuss), damit die Glutkante des Fusses in jeder Karte auf
   exakt derselben Hoehe sitzt. Ohne das wandert der Hoehenausgleich in den Fuss,
   und die Linie springt je nach Textumbruch von Karte zu Karte -- mal buendig,
   mal nicht. row-gap:0, sonst erbt das Subgrid den 24px-Gap des Containers und
   schiebt einen weissen Streifen (Karten-Hintergrund) zwischen Kopf und Fuss. */
.prob-card{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
.prob-card-top{background:var(--paper);padding:32px 32px 30px}
.prob-q{font-size:clamp(1.2rem,1.5vw,1.5rem);font-weight:800;letter-spacing:-.01em;line-height:1.22;color:var(--text);margin-bottom:16px}
.prob-q .hl{color:var(--glut-tief);white-space:nowrap}
.prob-felt{color:var(--muted);font-size:1rem;line-height:1.58}
/* Der Loesungsfuss ist die Antwort auf die Frage darueber. Er lag frueher in
   Navy -- drei dunkle Bloecke mitten im hellsten Teil der Seite, die dort
   Gewicht hinzufuegten, wo die Seite eigentlich aufatmen soll.
   Jetzt traegt er Pergamentweiss und wird von einer Glutkante gefuehrt: die
   Antwort ist der warme, helle Teil der Karte, nicht der schwere. Die Glut
   bleibt dabei Linie und Label -- nie Flaeche, sonst waeren es neun
   Orangebloecke ueber vier Seiten.
   Gerechnet: Navy darauf 15,8:1, die Glutkante als Grafik 3,5:1. */
.prob-foot{background:var(--offwhite);color:var(--text);padding:22px 32px 26px;
  border-top:2px solid var(--glut)}
/* Das Label steht jetzt auf hellem Grund, also gilt die andere Glutstufe:
   Glut tief traegt kleinen Text mit 5,2:1, Glut selbst nur 3,5:1 und faellt
   fuer 11px durch. Genau diese Umschaltung meint die Groessenregel. */
.prob-lab{display:block;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--glut-tief);margin-bottom:8px}
.prob-sol{font-weight:700;font-size:1.05rem;line-height:1.42}
@media (max-width:880px){.prob-cards{grid-template-columns:1fr}}
/* Zwei-Karten-Variante: zwei gleich breite Spalten ueber die volle Wrap-Breite
   (buendig zur Ueberschrift), statt zwei von drei Spalten mit Luecke. Die gleich
   hohe Glutkante besorgt das Karten-Subgrid aus .prob-card -- hier wie in der
   Drei-Karten-Variante. Eigene Mobile-Regel, damit die 880px-Stapelung nicht
   ausgehebelt wird. */
.prob-cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:880px){.prob-cards.two{grid-template-columns:1fr}}
/* Ab 1100px laufen die drei Absaetze zweispaltig. Untereinander brauchten sie
   fast die halbe Bildschirmhoehe, waehrend rechts daneben nichts stand.
   Die Vorlage bleibt gewahrt: erst Ueberschrift, dann Text, dann Bild.
   Die Spalten sind auf 640px gedeckelt, sonst wuerden die Zeilen im 2200er
   Container zu lang zum Lesen. */
@media (min-width:1100px){
  .problem-copy{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px 56px;max-width:none;
  }
  .problem-copy > .eyebrow,.problem-copy > h2{grid-column:1 / -1}
  .problem-copy > p{margin-top:0;max-width:none}
}
/* Nummerierte Textblöcke. Ohne sie war bei zwei Spalten nicht erkennbar, ob
   man nach rechts oder nach unten weiterliest. Die Ziffer klärt die
   Reihenfolge, die Zwischenüberschrift macht den Abschnitt überfliegbar. */
.pstep{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:2px 14px;align-items:start;margin-top:26px;
  /* Ohne align-content bekommt der kuerzere Block die Hoehe des laengeren
     aufgezwungen und verteilt den Ueberschuss zwischen Titel und Text. */
  align-content:start;
}
.pstep__n{
  grid-row:1 / span 2;
  width:30px;height:30px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;
  background:var(--sand-2);color:var(--petrol);
  font-family:var(--display);font-weight:800;font-size:.95rem;line-height:1;
}
.pstep h3{
  font-size:.88rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text);line-height:1.35;margin:5px 0 6px;
}
.pstep p{margin-top:0}
@media (min-width:1100px){
  .pstep{margin-top:0}
}
.problem-visual{
  background:var(--sand);border:1px solid var(--border);border-radius:var(--radius);
  padding:34px;box-shadow:var(--shadow);
  margin-top:48px;
}
/* Weiterlesen-Link am Ende eines Abschnitts. Gleiche Anmutung wie der
   "Zum Produkt"-Link in den Kacheln, damit die Seite eine Linksprache hat. */
.link-more{
  margin-top:32px;font-weight:800;color:var(--petrol);
  display:inline-flex;align-items:center;gap:.5em;width:fit-content;
  transition:gap .15s, color .15s;
}
.link-more svg{width:1.05em;height:1.05em}
.link-more:hover{gap:.85em;color:var(--navy)}
.pv-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
/* Die Abbildung nimmt die volle Abschnittsbreite ein, wie die Produktkacheln
   darueber. Damit die kleine Zeichnung darin nicht mitwaechst, wird jede
   Karte ab 1100px waagerecht: Zeichnung links, Text rechts. Sonst waere die
   Zeichnung im 2200er Container ueber 900px breit und 550px hoch. */
@media (min-width:1100px){
  .pv-card{display:grid;grid-template-columns:1.15fr 1fr;gap:28px;align-items:center}
  .pv-card .tag{grid-column:1 / -1;margin-bottom:2px}
  .pv-card .cap{margin-top:0;font-size:.98rem}
}
.pv-card{border-radius:var(--radius);padding:22px;border:1px solid var(--border)}
.pv-bad{background:var(--sand-2)}
.pv-good{background:var(--petrol);color:#fff;border-color:transparent}
.pv-card .tag{font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;display:inline-block;margin-bottom:14px;opacity:.9}
.pv-bad .tag{color:var(--muted)}
.pv-good .tag{color:#fff}
.pv-card svg{width:100%;height:auto;border-radius:var(--radius)}
.pv-card .cap{font-size:.9rem;font-weight:600;margin-top:14px}
.pv-good .cap{color:#fff}
.pv-bad .cap{color:var(--muted)}

/* =====================================================
   PRODUKTE  (white, lively)
   Papier statt Sand: der Abschnitt davor ist sandfarben, und eine gruene
   Ueberschrift bekommt immer einen eigenen Hintergrund.
===================================================== */
.products{background:var(--sand);padding:var(--sec-y) 0}
/* Karten nehmen die Gegenfarbe ihres Abschnitts, sonst verschmelzen sie.
   Das gilt nicht nur hier: die Fachwissen-Uebersichten stellen dieselbe Karte
   in einen .sec-sand-Abschnitt, und Sand auf Sand ist 1,00:1 -- die Karte
   haengt dann allein an der Haarlinie. Auf Sand ist die Karte deshalb Papier
   (1,08:1), genau wie .step es schon macht. */
.products .card,.sec-sand .card{background:var(--paper)}
.products-head{margin-bottom:52px}
.products-head h2{margin:16px 0 18px;max-width:var(--head-max)}
.products-head .intro{color:var(--muted);font-size:1.1rem;max-width:var(--measure)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
/* Vier Karten nebeneinander brauchen Breite. Unterhalb von 1240px waeren es
   je unter 260px, dort stehen sie zu zweit, ab 960px untereinander. */
@media(max-width:1240px){.cards{grid-template-columns:repeat(2,1fr)}}
.card{
  position:relative;border-radius:var(--radius);padding:28px;
  background:var(--sand);border:1px solid var(--border);
  display:flex;flex-direction:column;transition:transform .18s ease, box-shadow .2s ease;
  overflow:hidden;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card .art{
  /* Die Hoehe waechst ab etwa 1553px Fensterbreite mit, darunter bleiben es
     die bisherigen 132px. Sonst wird die Illustration in breiten Karten
     immer kleiner im Verhaeltnis zur Flaeche. */
  height:clamp(132px,8.5vw,200px);border-radius:var(--radius);margin-bottom:22px;
  display:grid;place-items:center;position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--ink-3),var(--ink-2));

  /* ---- Bildsprache der vier Produktzeichnungen ----
     Die SVGs im Markup nennen keine Hexwerte mehr, sondern nur noch diese
     fuenf Rollen; ein Farbwechsel bleibt damit im Stylesheet. Die Kachel ist
     Navy, deshalb gilt hier die Dunkelgrund-Regel der Palette.

     Meergrau, der eigentliche Stahlton, traegt auf Navy nur 1,9:1 und waere
     als Werkstueck unsichtbar. Das Werkstueck ist darum gedaempftes
     Silbergrau (4,0:1) -- deutlich stumpfer als die Messtechnik daneben,
     die in vollem Silbergrau steht (10,7:1). Damit stehen drei klar
     getrennte Helligkeiten im Bild: stumpfer Stahl, helle Sensorik,
     glimmende Naht. */
  --art-stahl:rgba(221,225,227,.52);  /* Werkstueck, kalt und stumpf   4,0:1 */
  --art-sensor:var(--silber);         /* Sensor, Messstrahl, Messpunkt 10,7:1 */
  --art-naht:var(--glut-hell);        /* Naht, die gerade gelegt wird   5,2:1 */
  --art-tief:rgba(221,225,227,.28);   /* Volumen im Schatten, hinter dem Stahl */
}
/* max-height ist Pflicht: Das SVG hat das Seitenverhaeltnis 200:120, bei
   76% Breite einer breiten Karte wird es hoeher als seine Flaeche und
   wurde oben und unten abgeschnitten (der Sensorpunkt fehlte). */
.card .art svg{width:76%;max-height:100%}
/* Wo statt der Zeichnung ein echtes Standbild steht (Einzelnaehte, Mehrlagennaehte, Rundnaht):
   Bild absolut ueber den Kasten legen und mit cover fuellen -- randlos, ohne
   Leerraum. Nicht nur width/height:100%: .art ist display:grid, dort zieht ein
   Grid-Item die Zeile auf seine Eigenhoehe und height:100% loest nicht gegen
   die feste Kastenhoehe auf -> es entstuende oben/unten ein Rand. */
.card .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card .kick{
  align-self:flex-start;font-size:.76rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--petrol);background:var(--sand-2);border:1px solid var(--border);
  padding:.5em .9em;border-radius:var(--pill);margin-bottom:14px;
}
.card h3{font-size:1.42rem;font-weight:800;letter-spacing:-.02em;margin-bottom:12px;color:var(--text)}
/* Orange hervorgehobenes Schluesselwort im Kartentitel, gleicher Ton wie .prob-q .hl. */
.card h3 .hl{color:var(--glut-tief)}
/* Stehen die Karten nebeneinander, haelt der Titel zwei Zeilen frei. Sonst
   beginnt der Text der Karte mit dem laengeren Titel tiefer als die uebrigen.
   Untereinander gestapelt waere der reservierte Platz nur eine Luecke. */
@media(min-width:961px){.card h3{min-height:3.2em}}
.card p{color:var(--muted);font-size:.99rem;flex:1}
.card .link{
  margin-top:20px;font-weight:800;color:var(--petrol);display:inline-flex;align-items:center;gap:.5em;
  transition:gap .15s, color .15s;width:fit-content;
}
/* Die ganze Karte ist der Klickbereich. Das macht js/site.js, nicht eine
   unsichtbare Flaeche ueber der Karte: die faengt jeden Klick ab, und dann
   laesst sich der Kartentext nicht mehr mit der Maus markieren.
   Den Zeigefinger setzt deshalb auch erst das Skript ueber diese Klasse --
   ohne JavaScript gibt es kein Versprechen, das die Seite nicht haelt.
   Der Link im Fuss bleibt in jedem Fall anklickbar. */
.card--klickbar{cursor:pointer}
/* Der Fokus gehoert an die Karte, nicht an die Textzeile darin: der Link ist
   weiterhin der einzige Tabstopp, sein Ziel ist aber die ganze Karte. */
.card:has(.link:focus-visible){outline:3px solid var(--meergrau);outline-offset:3px}
.card .link:focus-visible{outline:none}
.card:hover .link{gap:.85em;color:var(--navy)}
/* Dunkle Hervorhebung einer Karte. Seit es vier Produkte sind, steht sie in
   keinem Markup mehr: einer von vier waere weder einheitlich noch ein Wechsel.
   Die Regeln bleiben, damit "hot" bei Bedarf wieder gesetzt werden kann,
   sinnvoll dann bei jeder zweiten Karte. */
/* Die Karte bleibt Navy: sie liegt auf einem hellen Abschnitt und ist dort die
   schwere Ausnahme. */
.card.hot{background:var(--ink);border-color:transparent;color:var(--on-dark)}
/* Kuehles Licht, wie auf allen dunklen Flaechen der Seite: Orange ueber Navy
   wird als Verlauf nicht warm, sondern braun. Warm ist an der Karte das
   Kick-Label. */
.card.hot::before{content:"";position:absolute;inset:0;background:radial-gradient(62% 55% at 80% 0%,rgba(33,87,161,.30),transparent 60%);pointer-events:none}
.card.hot .kick{background:rgba(226,87,28,.14);border-color:rgba(253,118,24,.45);color:var(--glut-hell)}
.card.hot h3{color:#fff}
.card.hot p{color:var(--on-dark-muted)}
/* Die Bildkachel hatte hier einen eigenen, helleren Verlauf und einen blauen
   Rahmen. Jetzt dieselbe Flaeche wie in den uebrigen Karten, damit die vier
   Kacheln gleich aussehen. Nur die Karte darum herum bleibt dunkel. */
.card.hot .link{color:var(--spark-2)}

/* =====================================================
   IN ZAHLEN  (dark feature, chunky badges)
===================================================== */
/* Abgesetzte Sektion auf dem Flaechenton der Marke: Navy. Unten rechts liegt
   ein warmes Licht (Glut hell mit .44 Deckung), die groesste Orangeflaeche
   der Seite, oben links das kuehle Gegenstueck in Kobalt. */
.figures{background:var(--ink);color:var(--on-dark);padding:var(--sec-y) 0;position:relative;overflow:hidden}
.figures::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(34% 34% at 92% 88%,rgba(253,118,24,.44),rgba(253,118,24,.11) 45%,transparent 70%),
            radial-gradient(66% 60% at 5% 12%,rgba(33,87,161,.28),transparent 62%)}
.figures .wrap{position:relative;z-index:2}
.figures h2{color:#fff;max-width:var(--head-max);margin:16px 0 46px}
/* minmax(0,1fr) statt 1fr: sonst zieht die breiteste Kachel ("Sekunden") ihre
   Spalte auf und die vier Kacheln sind unterschiedlich breit. */
.fig-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.fig{
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius);padding:30px 26px;position:relative;
}
/* Alle vier Kacheln zeigen denselben Wertblock: gleiche Groesse, gleiche
   Farbe, keine Sonderrolle fuer einzelne Kacheln. Die Obergrenze richtet sich
   nach dem laengsten Wert ("< 30 Sek."), damit er einzeilig in die Kachel passt
   und die Labels aller vier Kacheln auf einer Linie stehen.
   Die Zahl steht in Glut hell, nicht in Glut: sie liegt nicht auf der Flaeche
   selbst, sondern auf der aufgehellten Kachel darauf, und dort faellt Glut
   von 4,6:1 auf 4,1:1. Glut hell kommt auf 5,6:1 -- die Stufe, die die
   Groessenregel fuer dunklen Grund ohnehin vorschreibt. Auf der Flaeche
   selbst (Hero-Wort) bleibt es bei Glut. */
.fig .badge{
  display:inline-flex;align-items:baseline;
  font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1;
  font-size:clamp(2rem,3.2vw,3.8rem);color:var(--glut-hell);
  padding:2px 0;margin-bottom:16px;
}
.fig .lbl{font-weight:600;color:var(--on-dark);font-size:1.02rem;line-height:1.3}

/* =====================================================
   CTA  (bold petrol->spark band)
===================================================== */
.cta{padding:var(--sec-y) 0;background:var(--paper)}
/* Die Kachel ist Navy: sie ist der Schlusspunkt der Seite und soll auf dem
   weissen Abschnitt schwer sitzen. Navy hat ausserdem den Spielraum, den die
   Kachel braucht -- Glut hell traegt hier trotz der beiden Kobaltlichter
   noch 4,5:1. */
.cta-box{
  position:relative;overflow:hidden;border-radius:var(--radius);
  background:var(--ink);
  color:#fff;padding:72px 64px;box-shadow:var(--shadow);
}
.cta-box::before{content:"";position:absolute;inset:0;pointer-events:none;
  /* Zwei kuehle Lichter, dieselbe Fuehrung wie im Hero: oben rechts das
     staerkere, unten links das weichere unter dem Knopf. Kein warmes Licht --
     Orange ueber Navy wird als Flaeche Braun, und der Glut-Knopf steht davor
     statt darin. */
  background:
    radial-gradient(70% 58% at 98% 4%, rgba(33,87,161,.42), transparent 64%),
    radial-gradient(76% 62% at 2% 98%, rgba(33,87,161,.30), transparent 62%)}
.cta-inner{position:relative;z-index:2}
.cta .eyebrow{color:var(--spark-2)}
.cta .eyebrow .bar{background:var(--spark-2)}
.cta h2{color:#fff;margin:18px 0 18px;max-width:var(--head-max)}
.cta p{color:var(--on-dark-muted);font-size:1.12rem;margin-bottom:34px;max-width:var(--measure)}
.cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
/* Staerkstes Element der Seite: der Button dreht auf der dunklen Kachel um. */
.cta-box .btn-spark{background:#fff;color:var(--spark);box-shadow:0 20px 44px -24px rgba(14,28,52,.7)}
.cta-box .btn-spark:hover{background:var(--sand-2);color:var(--spark)}
.cta .sec{color:#fff;font-weight:700;border-bottom:2px solid var(--spark-2);padding-bottom:2px}
.cta .sec:hover{color:var(--spark-2)}

/* =====================================================
   FOOTER
===================================================== */
/* Der Fuss ist eine Zone, kein Block: Schliffgrau, der Fuell- und
   Zonierungston. Er lag frueher in Navy und war mit 525px der zweitgroesste
   dunkle Bereich der Seite -- Gewicht fuer Navigation und Foerderlogos, die
   keines brauchen. Zum weissen CTA-Abschnitt darueber setzt er sich mit
   1,32:1 von selbst ab, eine Trennlinie braucht es nicht.
   Ambossgrau traegt darauf 6,9:1, Navy 12,9:1, Lichtbogenblau 5,4:1.
   Keine Glutfarbe hier: auf Schliffgrau ist sie als Text unzulaessig. */
.foot{background:var(--silber);color:var(--meergrau);padding:32px 0 8px}
.foot-grid{display:grid;grid-template-columns:1.15fr .75fr 1.35fr;gap:48px}
.foot .brand{color:var(--navy);margin-bottom:16px}
/* Der Claim bricht per <br> an den Kommas um, die Breite ist nur die Notbremse. */
.foot .tag{max-width:var(--measure);color:var(--meergrau);font-size:1rem;margin-top:auto}
.foot h4{color:var(--navy);font-family:var(--body);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px;font-weight:800}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:4px;font-size:.9rem;line-height:1.45}
.foot ul a{color:var(--meergrau);font-weight:600}
/* Der Hover geht auf die Interaktionsfarbe, nicht auf Schwarz: auf hellem
   Grund ist Lichtbogenblau das Zeichen fuer anklickbar (5,4:1). */
.foot ul a:hover{color:var(--kobalt)}

/* Die drei Fussspalten sind inhaltlich auf gleiche Hoehe gebracht. Damit sie es auch
   bleiben, wenn Text anders umbricht, dehnt sich in jeder Spalte das letzte Element:
   die Navigation verteilt ihre Links, Claim und Foerderhinweis sitzen auf der
   gemeinsamen Grundlinie. */
.foot-grid>*{display:flex;flex-direction:column}
.foot-brand>a{align-self:flex-start}
.foot ul{flex:1 1 auto;justify-content:space-between}

/* Wortmarke: die Datei ist einfarbig Schmiedeblau. Auf dem hellen Fuss darf sie
   das auch zeigen -- der frueher noetige Weiss-Filter faellt weg. Damit steht
   die Primaerfarbe der Palette zum ersten Mal sichtbar auf der Seite, und zwar
   genau im Massstab, in dem sie traegt: als Zeichen (9,8:1 auf Schliffgrau),
   nicht als Flaeche. Gross gesetzt, damit die Markenspalte die Hoehe der
   beiden anderen traegt. */
.foot-logo{width:230px;max-width:100%;height:auto;margin-bottom:18px;opacity:.95;transition:opacity .15s}
.foot-brand a:hover .foot-logo{opacity:1}

/* Die Karte behaelt ihren weissen Grund, auch auf dem hellen Fuss: Bundesadler
   und EU-Flagge sind fuer Weiss freigegeben, nicht fuer einen Grauton. Gegen
   Schliffgrau hebt sie sich mit 1,32:1 ab. Alle Logos stehen in einer Reihe,
   damit die Karte flach bleibt und die Foerderspalte nicht hoeher wird. */
.funding-card{
  background:var(--paper);border-radius:var(--radius);
  padding:22px;display:flex;flex-direction:row;align-items:center;gap:20px;
  max-width:480px;margin-bottom:14px;
}
.funding-card__bar{flex:1 1 auto;min-width:0;width:100%;max-width:300px;height:auto}
.funding-card__sep{flex:0 0 auto;width:1px;height:52px;background:rgba(65,74,80,.42);border:0;margin:0}
.funding-card__tti{flex:0 0 auto;width:88px;height:auto}
/* Der Hinweis steht buendig unter der Karte, also gleiche Maximalbreite wie diese. */
/* Kein opacity mehr: Ambossgrau mit 80 Prozent Deckung kam auf Schliffgrau nur
   auf 4,3:1 und faellt damit fuer 13px durch. Voll gesetzt sind es 6,9:1 --
   die Ruecknahme macht hier die Schriftgroesse, nicht die Deckkraft. */
.funding-note{margin-top:auto;max-width:480px;color:var(--meergrau);font-size:.82rem;line-height:1.5}

.foot-bottom{border-top:1px solid var(--border);margin-top:24px;padding-top:5px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:2px 12px;font-size:.9rem;line-height:1.25}

/* =====================================================
   SUBPAGES — shared building blocks (added for inner pages)
===================================================== */
/* active nav state */
.menu a.active{color:#fff}
.menu a.active::after{content:"";display:block;height:2px;border-radius:2px;background:var(--spark-2);margin-top:5px}

/* Produkt-Subnavigation: Bereichsleiste unter dem Header (nur Produktseiten) */
.subnav{position:sticky;top:82px;z-index:15;background:var(--sand);border-bottom:1px solid var(--border)}
.subnav-inner{display:flex;gap:28px;overflow-x:auto;scrollbar-width:thin}
.subnav-inner::-webkit-scrollbar{height:6px}
.subnav-inner::-webkit-scrollbar-thumb{background:rgba(65,74,80,.42);border-radius:6px}
.subnav a{padding:14px 2px;color:var(--muted);font-weight:600;font-size:.95rem;white-space:nowrap;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
/* Beim Ueberfahren zeigt sich der Strich schon blass. So sieht man, dass
   die Zeile aus Reitern besteht, bevor man klickt. */
.subnav a:hover{color:var(--text);border-bottom-color:var(--border)}
.subnav a.active{color:var(--text);border-bottom-color:var(--glut-tief)}

/* aktueller Eintrag im Produkte-Dropdown */
.dropdown a.active{color:#fff;background:rgba(255,255,255,.06);box-shadow:inset 2px 0 0 var(--spark-2)}
.dropdown a.active::after{display:none}

/* generic content sections (section.sec so it never hits the .sec CTA link) */
section.sec{padding:var(--sec-y) 0}
section.sec--tight{padding:74px 0}
.sec-sand{background:var(--sand)}
.sec-paper{background:var(--paper)}
/* Die abgesetzte dunkle Sektion liegt auf Navy, dem Flaechenton der Marke,
   und traegt dieselben zwei Lichter wie das Zahlenband: unten rechts das
   warme in Glut hell (.40), oben links das kuehle in Kobalt (.26). */
.sec-dark{background:var(--ink);color:var(--on-dark);position:relative;overflow:hidden}
.sec-dark::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(32% 32% at 93% 90%,rgba(253,118,24,.40),rgba(253,118,24,.10) 45%,transparent 70%),
            radial-gradient(66% 60% at 5% 10%,rgba(33,87,161,.26),transparent 62%)}
.sec-dark .wrap{position:relative;z-index:2}
.sec-dark h1,.sec-dark h2,.sec-dark h3{color:#fff}
/* Grundregel fuer die ganze Website: wo eine gruene Ueberschrift einen neuen
   Abschnitt eroeffnet, wechselt der Hintergrund. Deshalb wechseln sich
   .sec-sand und .sec-paper immer ab. Karten nehmen dabei die jeweils andere
   Farbe an, damit sie nicht mit ihrem Abschnitt verschmelzen. */
.sec-paper .step,
.sec-paper .team-card,
.sec-paper .panel,
.sec-paper .feature,
.sec-paper .faq-item{background:var(--sand)}

/* section head
   Der Head selbst ist so breit wie sein Abschnitt. Gedeckelt wird die
   Ueberschrift ueber --head-max und der Fliesstext ueber sein Textmass. */
.head{margin-bottom:46px}
/* Steht der Head allein im Abschnitt, gehoert unter ihn nur der Abschnittsabstand. */
.head:last-child{margin-bottom:0}
.head .eyebrow{margin-bottom:14px}
.head h1,.head h2{margin:0 0 16px;max-width:var(--head-max)}
.head .measure{color:var(--muted);font-size:1.1rem}
.head .lead{color:var(--text);font-size:1.22rem;font-weight:500;margin-bottom:16px;max-width:var(--measure)}
/* pretty verhindert ein einzelnes Wort in der letzten Zeile der Einleitung */
.head .measure,.head .lead,.products-head .intro{text-wrap:pretty}
.sec-dark .head .measure{color:var(--on-dark-muted)}
.sec-dark .head .lead{color:var(--on-dark)}
.measure{max-width:var(--measure)}

/* subpage hero built on .hero (dark) */
.hero .head{margin-bottom:0}
.hero .head .measure{color:var(--on-dark-muted)}
.hero .head .lead{color:var(--on-dark)}
/* Der Abstand unter dem Hero kommt nur aus dem Padding. Endet der Kopf mit dem
   Lead, legte dessen Marge sonst 16px drauf, und der Hero waere unten je nach
   Seite verschieden hoch. */
.hero--sub .head > :last-child{margin-bottom:0}
.hero--sub .hero-grid{margin-top:20px}

/* multi-column text */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.col h3{font-size:1.28rem;font-weight:800;letter-spacing:-.02em;margin-bottom:10px;color:var(--text)}
.col{display:flex;flex-direction:column;align-items:flex-start}
.col p{color:var(--muted);margin-bottom:18px}
.col .btn{margin-top:auto}
.sec-dark .col h3{color:#fff}
.sec-dark .col p{color:var(--on-dark-muted)}

/* process steps (JS-free static flow) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);padding:30px 28px;position:relative}
.sec-dark .step,.sec-sand .step{background:var(--paper)}
.step-num{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.35rem;
  background:linear-gradient(150deg,var(--glut-hell),var(--glut));color:var(--navy);margin-bottom:18px;
  box-shadow:0 20px 44px -24px rgba(14,28,52,.6)}
.step h3{font-size:1.22rem;font-weight:800;letter-spacing:-.02em;margin-bottom:14px;color:var(--text)}
.step ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.step li{position:relative;padding-left:22px;color:var(--muted);font-size:.98rem}
.step li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--spark)}
.loop-hint{display:inline-flex;align-items:center;gap:10px;margin-top:26px;
  background:var(--sand-2);border:1px solid var(--border);color:var(--petrol-hover);
  font-weight:700;font-size:.92rem;padding:.7em 1.2em;border-radius:var(--pill)}
.loop-hint svg{width:18px;height:18px;flex:0 0 auto}

/* ── "Wie es funktioniert": dunkle Erklaerkarte auf hellem Abschnitt.
   Schaubild links (SVG), Icon-Liste rechts. Traegt eigenes Eyebrow + H2.
   Die Karte ist Navy: auf hellem Grund ist sie die schwere Ausnahme, und der
   Hell-Dunkel-Wechsel trennt sie von selbst -- eine Kante braucht sie dort
   nicht. Glut hell traegt darin 5,0:1. ── */
.howto{
  background:var(--ink);color:var(--on-dark);
  border:1px solid var(--ink-3);border-radius:var(--radius);
  padding:clamp(30px,4vw,52px);position:relative;overflow:hidden;margin-bottom:26px}
.howto::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(62% 55% at 84% 0%,rgba(33,87,161,.30),transparent 60%)}
.howto > *{position:relative;z-index:1}
.howto .eyebrow{color:var(--spark-2);margin-bottom:14px}
.howto .eyebrow .bar{background:var(--spark-2)}
.howto h2{color:#fff;max-width:24ch;margin:0 0 clamp(28px,3vw,40px)}
.howto-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
/* ---- Bildsprache des Schaubilds in der Erklaerkarte ----
   Die Karte ist Navy und traegt oben rechts ein Kobaltlicht (.30); an der
   hellsten Stelle steht die Zeichnung auf #142E55, dafuer sind die Werte
   gerechnet. Warm ist genau ein Element: die bereits gelegte Naht.
   Schmiedeblau taugt im Bild nicht - auf Navy kaeme es auf 1,3:1 und
   braeuchte nach Regel 4 eine eigene Naht; die Zeichnung bleibt deshalb
   hell auf dunkel. */
.howto-fig{width:100%;
  --art-stahl:rgba(221,225,227,.52);   /* kommende, noch kalte Naht      3,9:1 */
  --art-sensor:var(--silber);          /* Brenner, Sensor, Blicklinie   10,3:1 */
  --art-naht:var(--glut-hell);         /* gelegte Naht, das einzige Warm 5,0:1 */
  --art-rahmen:rgba(221,225,227,.45);  /* gestrichelte Gruppierung       3,3:1 */
  --art-schild:var(--silber);          /* Beschriftungsplaettchen       10,3:1 */
  --art-schild-text:var(--navy);       /* Schrift darauf                12,9:1 */
  --art-mass:var(--on-dark-muted);     /* Massangaben auf dem Grund      7,3:1 */
}
.howto-fig svg{width:100%;height:auto;display:block}
.howto-fig text{font-family:var(--body)}
.howto-list{list-style:none;display:flex;flex-direction:column;gap:22px;margin:0}
.howto-list li{display:flex;gap:14px;align-items:flex-start}
.howto-list li span:last-child{color:var(--on-dark);font-size:1.02rem;line-height:1.5}
.howto-ico{flex:0 0 auto;color:var(--spark-2);display:grid;place-items:center;margin-top:2px}
.howto-ico svg{width:22px;height:22px}
@media(max-width:820px){.howto-grid{grid-template-columns:1fr;gap:30px}}
/* Schleifen-Pfeil unter den Schritten: fuehrt von Schritt 3 zurueck zu Schritt 2.
   Volle Breite mit width:100%/height:auto, dadurch treffen die Pfad-x-Werte
   (500 und 840 von 1000) die Spaltenmitten (~50% und ~84%) unabhaengig von der
   Breite. Ab <=960px stapeln die Schritte, dann entfaellt der horizontale Pfeil
   und nur der Hinweis-Chip bleibt. */
.loop-back{margin-top:16px}
.loop-back__arrow{display:block;width:100%;height:auto;color:var(--flame)}
/* Beschriftung mittig unter dem Pfeilbogen: dessen Mitte liegt bei ~67% der
   Breite (Bogen von x=500 bis x=840 in der viewBox 0..1000). max-content +
   linker Rand 67% + Shift um die halbe Eigenbreite zentriert den Text exakt
   unter dem Bogen, statt auf der Seitenmitte. */
.loop-back__cap{width:max-content;max-width:100%;margin:8px 0 0 67%;transform:translateX(-50%);
  color:var(--petrol-hover);font-weight:700;font-size:.95rem}
@media(max-width:960px){
  /* gestapelte Schritte: horizontaler Pfeil entfaellt, Text normal zentriert */
  .loop-back__arrow{display:none}
  .loop-back__cap{margin:0 auto;transform:none;text-align:center}
}

/* Scan-Reveal: der Scan korrigiert die geteachte Achse auf die gemessene.
   Zwei deckungsgleiche SVG-Ebenen (base = grau/geteacht, over = orange/gemessen).
   Eine rote Scan-Linie wandert nach rechts, die Over-Ebene wird per clip-path
   synchron freigelegt. Reines CSS, laeuft auch ohne JavaScript. */
.scan-reveal{max-width:660px;margin:0 auto clamp(36px,4vw,52px);
  background:var(--sand);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.scan-reveal__stage{position:relative}
.scan-reveal__stage svg{display:block}
.scan-reveal__base{position:relative;z-index:1;width:100%;height:auto}
.scan-reveal__over{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;
  clip-path:inset(0 100% 0 0);animation:scanRevealOver 5s linear infinite;will-change:clip-path,opacity}
.scan-reveal__line{position:absolute;top:0;bottom:0;left:0;z-index:3;width:3px;margin-left:-1.5px;
  background:var(--kobalt);box-shadow:0 0 12px 2px rgba(33,87,161,.65);opacity:0;
  animation:scanRevealLine 5s linear infinite;will-change:left,opacity}
.scan-reveal__cap{padding:14px 22px 18px;text-align:center;color:var(--muted);font-size:.92rem;font-weight:600}
.scan-reveal text{font-family:var(--body)}
@keyframes scanRevealOver{
  0%{clip-path:inset(0 100% 0 0);opacity:1}
  45%{clip-path:inset(0 0 0 0);opacity:1}
  75%{clip-path:inset(0 0 0 0);opacity:1}
  90%{clip-path:inset(0 0 0 0);opacity:0}
  90.01%{clip-path:inset(0 100% 0 0);opacity:0}
  100%{clip-path:inset(0 100% 0 0);opacity:1}
}
@keyframes scanRevealLine{
  0%{left:0;opacity:0}
  3%{left:0;opacity:1}
  45%{left:100%;opacity:1}
  55%{left:100%;opacity:0}
  100%{left:0;opacity:0}
}
@media (prefers-reduced-motion: reduce){
  /* eingefrorenes Standbild: links korrigiert (orange), rechts geteacht (grau),
     rote Trennlinie in der Mitte. Erzaehlt die Aussage ohne Bewegung. */
  .scan-reveal__over{animation:none;clip-path:inset(0 50% 0 0);opacity:1}
  .scan-reveal__line{animation:none;left:50%;opacity:1}
}

/* seam-shape showcase (Nahtformen)
   Eigener Farbblock statt vierter Vollbreiten-Sektion: die gruene Ueberschrift
   bekommt so ihren Hintergrundwechsel, die Produktseite bleibt bei drei Baendern. */
.seam-showcase{margin-top:56px;background:var(--paper);border:1px solid var(--border);
  border-radius:var(--radius);padding:34px 32px}
.sec-paper .seam-showcase{background:var(--sand)}
.seam-showcase .eyebrow{margin-bottom:18px}
.seam-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.seam-fig{background:var(--sand);border:1px solid var(--border);border-radius:var(--radius);padding:16px 10px 12px;text-align:center}
.sec-paper .seam-showcase .seam-fig{background:var(--paper)}
.seam-fig svg{width:100%;height:auto;margin-bottom:8px}
.seam-fig figcaption{font-size:.8rem;font-weight:700;color:var(--muted)}
.seam-weld{fill:var(--glut-tief)}
.seam-edge{fill:var(--ink-3)}

/* =====================================================
   AUSWAHLHILFE (Uebersichtsseite)
   Vier Zeilen statt vier Kacheln. Links steht, um welches Produkt es geht,
   rechts drei gleich benannte Angaben. Dadurch kann man die Spalte
   "Woran Sie es erkennen" von oben nach unten lesen und seinen Fall suchen,
   ohne vier Kacheln einzeln zu vergleichen.
   Die Flaeche ist dieselbe wie bei den Produktkacheln der Startseite: heller
   Grund auf Sand, ein Rand, ein Radius, beim Ueberfahren angehoben. Die
   frueheren Trennlinien zwischen den Zeilen entfallen dadurch.
===================================================== */
.pick{
  display:grid;grid-template-columns:clamp(150px,12vw,220px) minmax(0,240px) minmax(0,1fr);
  gap:32px;padding:28px;align-items:start;
  background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);
  transition:transform .18s ease, box-shadow .2s ease;
}
.pick + .pick{margin-top:26px}
.pick:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
/* Kleine Vorschau je Zeile, gleiche Bildsprache wie der grosse Medienrahmen. */
.pick__vid{
  position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;
  background:linear-gradient(160deg,var(--ink-3),var(--ink-2));
  border:2px dashed rgba(221,225,227,.45);
  display:grid;place-items:center;
}
.pick__vid .scanline{
  position:absolute;left:0;right:0;top:42%;height:2px;
  background:linear-gradient(90deg,transparent,var(--silber),transparent);
  box-shadow:0 0 14px 2px rgba(221,225,227,.38);
}
.pick__vid .play{
  width:46px;height:46px;border-radius:50%;
  background:rgba(249,246,240,.08);border:1.5px solid var(--offwhite);
  display:grid;place-items:center;color:var(--offwhite);
}
.pick__vid .play svg{width:19px;height:19px;margin-left:3px}
.pick__vidcap{
  position:absolute;left:0;right:0;bottom:9px;text-align:center;
  color:var(--on-dark-muted);font-size:.72rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
}
/* Ohne Zwischenueberschrift ueber den Zeilen sind die Produktnamen die zweite
   Ebene der Seite. Gleicher Grad wie .card h3 auf der Startseite. */
.pick__id h2{font-size:1.42rem;font-weight:800;letter-spacing:-.02em;margin:6px 0 12px}
.pick__id .link{
  font-weight:800;color:var(--petrol);display:inline-flex;align-items:center;
  gap:.4em;transition:gap .15s,color .15s;
}
.pick:hover .link,.pick__id .link:hover{gap:.7em;color:var(--navy)}
.pick__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:0}
.pick__facts dt{
  font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text);margin-bottom:6px;
}
.pick__facts dd{margin:0;color:var(--muted);font-size:.99rem}
@media (max-width:1000px){
  .pick{grid-template-columns:1fr;gap:20px}
  .pick__facts{grid-template-columns:1fr;gap:18px}
  .pick__vid{max-width:320px}
}

/* card bullet lists (overview product cards) */
.card ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin:2px 0 4px}
.card li{position:relative;padding-left:22px;color:var(--muted);font-size:.95rem}
.card li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--petrol)}
.card.hot li{color:var(--on-dark-muted)}
.card.hot li::before{background:var(--glut-hell)}

/* feature tiles (gemeinsame Basis) */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.feature{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);padding:28px}
.feature .ico{width:50px;height:50px;border-radius:var(--radius-ico);display:grid;place-items:center;
  background:var(--sand-2);border:1px solid var(--border);color:var(--petrol);margin-bottom:18px}
.feature .ico svg{width:25px;height:25px}
.feature h3{font-size:1.14rem;font-weight:800;letter-spacing:-.02em;margin-bottom:8px;color:var(--text)}
.feature p{color:var(--muted);font-size:.96rem}
.sec-dark .feature{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.1)}
.sec-dark .feature .ico{background:rgba(226,87,28,.14);border-color:rgba(253,118,24,.45);color:var(--glut-hell)}
.sec-dark .feature h3{color:#fff}
.sec-dark .feature p{color:var(--on-dark-muted)}

/* team cards */
/* Regel 2: das Raster fuellt die Breite auch dann, wenn weniger Karten da
   sind als Spalten. Mit festen vier Spalten blieb bei drei Karten die
   vierte Spalte leer und rechts ein Viertel der Seite frei. auto-fit
   verteilt so viele gleich breite Karten, wie vorhanden sind. */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:24px}
/* Name, Rolle, Adresse und Beschreibung stehen in allen Karten einer Reihe auf
   gleicher Hoehe. Jede Karte belegt fuenf Zeilen des Rasters und uebernimmt sie
   per subgrid, so gibt die laengste Rolle der Reihe die Hoehe der Rollenzeile
   vor. row-gap:0 hebt die Luecke des Rasters innerhalb der Karte auf, zwischen
   zwei Kartenreihen bleibt sie. Dafuer braucht jede Karte genau fuenf Kinder:
   Foto, Name, Rolle, Adresse, Beschreibung. */
.team-card{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);padding:30px 26px;text-align:center;
  display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;justify-items:center;align-items:start}
.avatar{width:92px;height:92px;border-radius:50%;margin-bottom:18px;display:grid;place-items:center;position:relative;
  background:linear-gradient(160deg,var(--ink-3),var(--ink-2));color:var(--glut-hell);border:1.5px dashed rgba(221,225,227,.45)}
.avatar svg{width:40px;height:40px}
.avatar .ph{position:absolute;bottom:-9px;font-size:.6rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  background:var(--paper);color:var(--muted);border:1px solid var(--border);border-radius:var(--pill);padding:.25em .7em;white-space:nowrap}
.team-card__name{font-size:1.18rem;font-weight:800;letter-spacing:-.02em;margin-bottom:4px}
.team-card__role{display:inline-block;font-size:.92rem;font-weight:700;color:var(--petrol);margin-bottom:12px}
.team-card__mail{display:inline-block;color:var(--petrol);font-weight:600;font-size:.9rem;word-break:break-word;margin-bottom:12px}
.team-card__mail:hover{color:var(--navy)}
.team-card__bio{color:var(--muted);font-size:.95rem}
/* Teamfoto: derselbe Kasten wie das Standbild in .card .art, mit --radius und
   Bild per cover. Das Verhaeltnis sitzt auf dem Kasten, nicht auf dem Bild
   (sonst sperrt aspect-ratio die volle Breite). Querformat 3:2 wie geliefert.
   Auf dem Handy quadratisch: Die Karte ist dort schmal, und im Querformat
   bliebe das Gesicht klein zwischen viel Werkstatt. Die Dateien bleiben
   unbeschnitten, ihre Metadaten nennen Fotograf und Urheber. */
.team-card__foto{width:100%;aspect-ratio:3/2;position:relative;overflow:hidden;border-radius:var(--radius);
  margin-bottom:22px;background:linear-gradient(160deg,var(--ink-3),var(--ink-2))}
.team-card__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:640px){.team-card__foto{aspect-ratio:1/1;max-width:300px}}

/* roadmap */
.roadmap{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.rm{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:26px;position:relative}
.rm__tag{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.4em .85em;border-radius:var(--pill);margin-bottom:16px;
  background:rgba(255,255,255,.08);color:var(--on-dark-muted);border:1px solid rgba(255,255,255,.14)}
/* Der Chip lag als Glut-Schleier mit Glut-hell-Schrift auf der aufgehellten
   Kachel unter dem Kobaltlicht nur bei 4,1:1, unter dem warmen Licht des
   Abschnitts bei 2,6:1.
   Er wird darum zu einer echten kleinen Glut-tief-Flaeche mit Weiss (5,6:1) --
   das von der Palette vorgeschriebene Paar, und es traegt auf jedem Grund.
   Abgeschlossen ist die abgekuehlte Glut, das Ziel darunter die helle. */
.rm__tag--done{background:var(--glut-tief);color:#fff;border-color:transparent}
.rm__tag--progress{background:rgba(33,87,161,.42);color:var(--silber);border-color:rgba(221,225,227,.32)}
.rm__tag--goal{background:var(--glut);color:var(--navy);border-color:transparent}
.rm__ico{width:44px;height:44px;border-radius:var(--radius-ico);display:grid;place-items:center;margin-bottom:14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--glut-hell)}
.rm__ico svg{width:23px;height:23px}
.rm h3{font-size:1.08rem;color:#fff;margin-bottom:8px;letter-spacing:-.02em}
.rm p{color:var(--on-dark-muted);font-size:.94rem}

/* info/contact panels */
.panel{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);padding:38px;box-shadow:var(--shadow)}
.panel + .panel{margin-top:26px}
.panel h3{font-size:1.4rem;font-weight:800;letter-spacing:-.02em;margin-bottom:12px}
.panel p{color:var(--muted);max-width:var(--measure)}
.panel .btn{margin-top:20px}
/* Regel 2: die Angaben verteilen sich ueber die ganze Flaeche. auto-fit legt
   so viele gleich breite Spalten an, wie Eintraege da sind, und laesst sie
   bis an den Rand der Flaeche laufen. */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:24px 40px;margin-top:28px}
/* Piktogramm je Eintrag, gleiche Kachel wie bei den Feature-Kacheln. */
.facts .ico{width:44px;height:44px;border-radius:var(--radius-ico);display:grid;place-items:center;
  background:var(--sand-2);border:1px solid var(--border);color:var(--petrol);margin-bottom:14px}
.facts .ico svg{width:23px;height:23px}
.sec-paper .facts .ico{background:var(--paper)}
.facts dt{font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--petrol);margin-bottom:8px}
.facts dd{color:var(--text);font-weight:500}
.field-hint{font-size:.88rem;color:var(--muted);margin-top:16px}
.field-hint a{color:var(--petrol);font-weight:600}

/* wide media placeholder */
/* Regel 2: der breite Medienrahmen fuellt die Seitenbreite. Eine Deckelung
   ueber die Fensterhoehe waere zwar niedriger, wuerde den Rahmen aber je nach
   Fensterhoehe unterschiedlich weit einruecken, waehrend Text und Karten
   darueber am Rand stehen. */
.media--wide{aspect-ratio:16/9;max-width:none;margin:44px 0 0}
/* Standbild statt Video (Ueber uns / Wurzeln), bis das neue Werkstattvideo
   fertig ist. Bewusst klein und rechts neben dem Text (Felix), schmal
   darunter. */
.standbild-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,38%,440px);gap:clamp(28px,4vw,56px);align-items:center}
.standbild-grid .head{margin-bottom:0}
.standbild{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.standbild img{width:100%;height:auto}
@media(max-width:820px){.standbild-grid{grid-template-columns:1fr;gap:30px}}

/* portable CTA box (usable outside the .cta section) */
.cta-box .eyebrow{color:var(--spark-2)}
.cta-box .eyebrow .bar{background:var(--spark-2)}
.cta-box h2{color:#fff;margin:18px 0 18px;max-width:var(--head-max)}
.cta-box p{color:var(--on-dark-muted);font-size:1.12rem;margin-bottom:34px;max-width:var(--measure)}
.cta-box .sec{color:#fff;font-weight:700;border-bottom:2px solid var(--spark-2);padding-bottom:2px}
.cta-box .sec:hover{color:var(--spark-2)}
.cta-band{margin-top:64px}

/* FAQ: Themenfeld als Klappzeile (native details/summary, kein JS),
   die Fragen darin stehen dauerhaft offen. */
/* --faq-indent: Karten leicht eingerueckt, damit die Gruppentitel als
   Absatzmarken links herausstehen. */
.faq{display:flex;flex-direction:column;gap:14px;--faq-indent:72px}
/* Eine Frage ist keine Klappzeile mehr: Frage und Antwort stehen zusammen
   auf einer Karte. Nichts zum Auf- und Zuklappen, damit im Themenfeld alles
   auf einmal zu lesen und mit der Suche des Browsers zu finden ist. */
.faq-item{margin-left:var(--faq-indent);background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.faq-item__q{margin:0;padding:22px 26px 12px;font-family:var(--display);font-weight:800;font-size:1.08rem;letter-spacing:-.01em;color:var(--text)}
.faq-item__body{padding:0 26px 24px;color:var(--muted);max-width:var(--measure)}
.faq-item__body p{margin-bottom:12px}
.faq-item__body p:last-child{margin-bottom:0}
.faq-item__body a{color:var(--petrol);font-weight:700;border-bottom:1px solid currentColor}
.faq-item__body a:hover{color:var(--navy)}

/* Verweis mitten im Fliesstext. Der globale a-Selektor faerbt nicht und
   unterstreicht nicht, damit Menue und Karten ruhig bleiben. Wo ein Link im
   Satz steht, muss er als solcher zu sehen sein: dieselbe Optik wie in der
   Antwort einer Frage und im Fachwissen. */
.textlink{color:var(--petrol);font-weight:700;border-bottom:1px solid currentColor}
.textlink:hover{color:var(--navy)}
/* Derselbe Link auf einer dunklen Flaeche. Lichtbogenblau ist dort verboten
   (auf Navy nur 2,4:1, und sein Hover-Ton waere der Abschnitt selbst), also
   traegt der Link hier Weiss (17,0:1) und zeigt seine Linkhaftigkeit ueber
   die Glut-hell-Unterkante (6,3:1). Im Hover tauschen Schrift und Kante die
   Rollen -- gleiche Loesung wie bei .cta .sec, das denselben Fall schon
   geloest hat. */
.hero .textlink,.sec-dark .textlink,.figures .textlink,.cta-box .textlink{
  color:#fff;border-bottom-color:var(--glut-hell)}
.hero .textlink:hover,.sec-dark .textlink:hover,.figures .textlink:hover,.cta-box .textlink:hover{
  color:var(--glut-hell);border-bottom-color:var(--glut-hell)}
.faq-item__body strong{color:var(--text);font-weight:700}
/* Die Foerderlogos in der Antwort "Wer foerdert die Entwicklung": dieselbe
   Karte wie im Fuss, aber ohne Polster, damit sie im weissen FAQ-Kasten nicht
   als zweiter Kasten erscheint. Der weisse Grund bleibt stehen, weil
   Bundesadler und EU-Flagge nur fuer Weiss freigegeben sind. Zwei Klassen im
   Waehler, damit die Regel auch die Schmalschirm-Fassung von .funding-card
   weiter unten uebersteuert. */
.faq-item__body .funding-card{padding:0;margin:2px 0 18px;max-width:420px;gap:18px}

/* ---------- Themenfeld als Klappzeile ----------
   Jedes Themenfeld ist selbst eine Klappzeile: erst die Ueberschrift
   aufklappen, dann stehen die Fragen darin. Damit sieht jede Zeile der Liste
   gleich aus, es steht kein loser Text dazwischen, und die ganze Seite passt
   zugeklappt auf einen Blick. Die Trennlinie zwischen den Themenfeldern
   wandert dafuer von der Ueberschrift auf den Block. */
.faq{gap:0}
.faq-block{border-top:2px solid var(--border);scroll-margin-top:100px}
.faq-block:first-child{border-top:0}
.faq-block:last-child{border-bottom:2px solid var(--border)}
.faq-block__head{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:26px 0}
.faq-block__head::-webkit-details-marker{display:none}
.faq-block__head .faq-group{flex:1 1 auto;display:flex;align-items:baseline;gap:14px;
  transition:color .15s}
.faq-block__head:hover .faq-group{color:var(--petrol)}
.faq-block__n{font-size:.82rem;font-weight:800;color:var(--muted);background:var(--sand-2);
  border-radius:var(--pill);padding:.2em .8em}
/* Derselbe Winkel wie an einer Frage, nur eine Nummer groesser. */
.faq-block__head::after{content:"";width:15px;height:15px;flex:0 0 auto;margin-top:-4px;
  border-right:2.5px solid var(--spark);border-bottom:2.5px solid var(--spark);
  transform:rotate(45deg);transition:transform .2s ease}
.faq-block[open] > .faq-block__head::after{transform:rotate(-135deg);margin-top:2px}
/* Unter der Ueberschrift steht, worum es im Themenfeld geht. Der Absatz
   erscheint erst beim Aufklappen und rueckt auf die Spalte der Fragen ein,
   weil er zu ihnen gehoert und nicht zur Ueberschrift darueber. */
.faq-block__intro{margin:0 0 22px var(--faq-indent);max-width:var(--measure);
  color:var(--muted);font-size:1.05rem}
.faq-block__intro p{margin-bottom:12px}
.faq-block__intro p:last-child{margin-bottom:0}
.faq-block__body{display:flex;flex-direction:column;gap:14px;padding-bottom:34px}
@media (max-width:600px){
  .faq-block__head{padding:22px 0;gap:12px}
  .faq-block__head .faq-group{gap:10px}
}

/* Karten ohne Bildkachel: die Themenfelder des Fachwissens, verlinkt aus der
   FAQ und auf den Uebersichtsseiten unter /fachwissen/. Ohne feste Spaltenzahl,
   damit fuenf Karten die Breite genauso fuellen wie vier. */
.cards--fw{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.cards--fw .card h3{font-size:1.24rem}
.cards--fw .card p{font-size:.98rem}
.cards--fw .card .link{margin-top:16px}


/* light logo placeholders (for content on light backgrounds) */
.logo-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.logo-ph{min-width:150px;height:58px;border-radius:var(--radius-ico);border:1.5px dashed var(--border);display:grid;place-items:center;
  font-size:.72rem;font-weight:700;color:var(--muted);text-align:center;padding:8px;background:var(--sand)}

/* small utilities */
.u-center{text-align:center}
.mt-block{margin-top:56px}

/* =====================================================
   RESPONSIVE
===================================================== */
/* Unter ~1160px wird die Foerderspalte so schmal, dass Bundesadler, EU-Flagge und
   EXIST-Logo unleserlich schrumpfen. Der Fuss geht darum schon hier auf zwei Spalten. */
@media(max-width:1160px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px 40px}
  .foot-funding{grid-column:1 / -1}
}
@media(max-width:960px){
  .hero-grid,.problem-grid{grid-template-columns:1fr;gap:44px}
  /* Startseite: Text (mit rotierender Ueberschrift) zuerst, Video darunter.
     Nur auf den Unterseiten steht das Video im Schmalbild oben. */
  .hero--sub .stage{order:-1}
  .cards{grid-template-columns:1fr;gap:20px}
  .fig-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px 32px}
  .foot-funding{grid-column:1 / -1}
  .cta-box{padding:52px 32px}
  .cols3,.features,.team,.roadmap,.steps{grid-template-columns:1fr 1fr;gap:20px}
  .seam-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  :root{--sec-y:36px}
  .wrap{padding:0 20px}
  .nav{gap:14px}
  .brand .brand-logo{height:32px}
  .fig-grid{grid-template-columns:1fr}
  .pv-row{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .foot-logo{width:190px}
  /* Auf schmalen Schirmen wuerde die Logoreihe zu stark schrumpfen, darum wieder gestapelt. */
  .funding-card{padding:20px 22px;flex-direction:column;align-items:flex-start;gap:16px}
  .faq-item__body .funding-card{padding:0;gap:16px}
  .funding-card__bar{max-width:280px}
  .funding-card__sep{width:100%;height:1px}
  .funding-card__tti{width:104px}
  .hero{padding-top:20px}
  .float-badge{left:auto;right:12px;bottom:12px}
  .hero .lead{font-size:1.14rem}
  .btn-lg{width:100%;justify-content:center}
  .cols2,.cols3,.features,.team,.roadmap,.steps{grid-template-columns:1fr}
  .seam-grid{grid-template-columns:repeat(2,1fr)}
  .seam-showcase{padding:24px 18px}
  .facts{grid-template-columns:1fr}
  .panel{padding:28px 22px}
}

/* ===== Hero-Video-Karussell (3 Loesungen) ===== */
.media-head{display:flex;flex-direction:column;gap:.2rem;margin-bottom:.9rem}
.media-eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--glut-hell)}
.media-title{font-size:1.35rem;font-weight:800;letter-spacing:-.01em;color:var(--on-dark);line-height:1.15}
.media-desc{color:var(--on-dark-muted);font-size:.95rem}
.media-dots{display:flex;gap:.6rem;justify-content:center;margin-top:1rem}
/* Die Punkte stehen auf Navy. Kobaltblau traegt dort nur 2,4:1 und waere als
   Bedienelement nicht zu erkennen. Bedienung ist auf dunklem Grund Off-White:
   umrandet im Ruhezustand (4,2:1), gefuellt im aktiven (15,8:1). Glut bleibt
   dem Schweissen vorbehalten und markiert keine Schalter. */
.mdot{width:36px;height:8px;border-radius:999px;border:1.5px solid rgba(249,246,240,.45);background:transparent;cursor:pointer;padding:0;transition:background .2s ease,border-color .2s ease,transform .2s ease}
.mdot:hover{transform:translateY(-1px);border-color:var(--offwhite)}
.mdot.is-active{background:var(--offwhite);border-color:var(--offwhite)}
.mdot:focus-visible{outline:2px solid var(--offwhite);outline-offset:3px}
@keyframes mediaFade{from{opacity:.3}to{opacity:1}}
.stage.is-swap .media-head,.stage.is-swap .media{animation:mediaFade .4s ease}
@media (prefers-reduced-motion: reduce){.stage.is-swap .media-head,.stage.is-swap .media{animation:none}
  .hero-rotator.is-swap .rot-top,.hero-rotator.is-swap .rot-bot{animation:none}}


/* Karussell-Pfeile links/rechts */
.media{position:relative}
.mnav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:40px;height:40px;display:grid;place-items:center;border-radius:999px;border:1.5px solid rgba(249,246,240,.5);background:rgba(14,28,52,.62);color:var(--offwhite);cursor:pointer;padding:0;transition:background .2s ease,transform .2s ease,color .2s ease,border-color .2s ease}
.mnav:hover{background:var(--offwhite);border-color:var(--offwhite);color:var(--navy);transform:translateY(-50%) scale(1.06)}
.mnav:focus-visible{outline:2px solid var(--offwhite);outline-offset:2px}
.mnav svg{width:20px;height:20px}
.mnav-prev{left:-12px}
.mnav-next{right:-12px}
@media (max-width:520px){.mnav-prev{left:6px}.mnav-next{right:6px}}

/* echtes Video im Media-Rahmen (z. B. Ueber uns / Werkstatt).
   Radius kommt von .media, also aus --radius wie ueberall sonst. */
.media.has-video{border-style:solid;border-color:rgba(221,225,227,.30)}
.media-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;background:#000;border-radius:inherit}
/* Vollbild: das ganze Video zeigen, mit schwarzem Rand statt Beschnitt.
   Im Rahmen der Seite schneidet cover nichts ab, der Rahmen ist 16:9 wie der
   Clip. Im Vollbild auf dem Handy im Hochformat blieb vom Querformat-Video
   dagegen nur ein schmaler Streifen aus der Mitte. Der Browser setzt im
   Vollbild selbst contain, aber ohne !important, und cover von oben gewann.
   Die runden Ecken des Rahmens gehoeren auch nicht ins Vollbild.
   Zwei Regeln statt einer Liste: Kennt ein Browser eine der beiden
   Schreibweisen nicht, verwirft er sonst die ganze Regel. */
.media-video:fullscreen{object-fit:contain;border-radius:0}
.media-video:-webkit-full-screen{object-fit:contain;border-radius:0}
.media.has-video .media-top{position:relative;z-index:2}
/* Video-Rahmen im 16:9-Format des Clips, auch auf Unterseiten (.hero--sub bleibt
   sonst 4:5) und mobil (schlaegt die 1/1-Regel per hoeherer Spezifitaet). */
.stage .media.has-video{aspect-ratio:16/9}
/* Reines Video: der Kobalt-Lichtschleier von .media::after entfaellt hier. */
.media.has-video::after{display:none}
/* Dasselbe mit einem Foto statt eines Videos: die Produktseite
   Mehrlagenschweissen zeigt im Hero die Nahaufnahme der Naht, weil ihr Video
   zurueckgestellt ist. Format und Rahmen wie beim Video der Schwesterseiten. */
.media.has-bild{border-style:solid;border-color:rgba(221,225,227,.30);padding:0}
.stage .media.has-bild{aspect-ratio:16/9}
.media.has-bild::after{display:none}
.media-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;border-radius:inherit}
/* Dritte Fuellung desselben Rahmens: eine Zeichnung statt Video oder Foto.
   "Ihre Anwendung" zeigt kein bestimmtes Bauteil und hat deshalb auch keine
   Aufnahme. Im Hero steht dort dieselbe Zeichnung wie auf ihrer Produktkarte
   der Startseite; Format und Rahmen sind die der Schwesterseiten. Die drei
   Rollenfarben kommen aus .media weiter oben, im Markup steht kein Hexwert.
   Anders als Video und Foto fuellt die Zeichnung den Rahmen nicht, sie steht
   frei darin: display:grid statt der Flex-Spalte von .media. Das Kobaltlicht
   von .media::after bleibt hier stehen, denn genau dagegen sind die
   Rollenfarben gerechnet.
   Die Spalte steht ausgeschrieben als 1fr da, und die Hoehe kommt aus
   align-content statt aus place-items: .media bringt aus seiner Flex-Spalte
   ein justify-content:space-between mit. Im Raster zieht die auto-Spur
   damit nicht mehr auf die Rahmenbreite auf, sondern auf die Eigenbreite
   des SVG (300px). Die 72% unten haetten sich sonst darauf bezogen und die
   Zeichnung waere in jedem Rahmen gleich klein geblieben. */
.media.has-zeichnung{border-style:solid;border-color:rgba(221,225,227,.30);
  display:grid;grid-template-columns:minmax(0,1fr);align-content:center;justify-items:center}
.stage .media.has-zeichnung{aspect-ratio:16/9}
/* max-height wie bei .card .art svg: das SVG hat das Verhaeltnis 200:120 und
   wuerde im 16:9-Rahmen sonst hoeher als seine Flaeche. */
.media-zeichnung{position:relative;z-index:2;width:72%;max-height:100%}
/* ---- Ein Player fuer alle Videos ----
   Startseite (js/carousel.js) und Produktseiten (js/video-player.js) zeigen
   dasselbe: vor dem Start das Standbild mit dem runden Abspielknopf, nach dem
   Start die Steuerleiste des Browsers, am Ende wieder das Standbild.
   Die Ebene .media-center liegt ueber dem Video (z-index 2) und deckt es bis
   auf den Innenabstand ganz ab. Sie darf keinen Klick fangen: Sonst erreicht
   ein Tipp auf das laufende Video nie die Steuerleiste, und auf dem Handy liess
   es sich weder anhalten noch auf Vollbild schalten. Klicks nimmt nur der
   Knopf selbst an. hidden setzt das Markup der Produktseiten, damit ohne
   JavaScript der einfache Browser-Player bleibt. */
.play{cursor:pointer;font:inherit;padding:0}
.play:hover{background:var(--offwhite);color:var(--navy);transform:scale(1.06)}
.play:focus-visible{outline:2px solid var(--offwhite);outline-offset:3px}
.media-center{pointer-events:none}
.media-center .play{pointer-events:auto}
.media-center[hidden],.media.is-playing .media-center{display:none}
/* Im Handy-Rahmen (rund 200px hoch) waeren 88px fast die halbe Hoehe. */
@media (max-width:520px){
  .play{width:64px;height:64px}
  .play svg{width:26px;height:26px;margin-left:4px}
}

/* ===== Skip-Link: Tastatur direkt zum Inhalt =====
   Er springt links oben auf, also mitten in die Navy-Kopfzeile.
   Lichtbogenblau traegt darauf nur 2,4:1 und waere als Flaeche kaum vom Kopf zu
   unterscheiden. Wie die Knoepfe auf dunklem Grund dreht er darum um: helle
   Flaeche, Lichtbogenblau als Schrift (6,6:1), Fokusring in Ambossgrau. */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--offwhite);color:var(--kobalt);font-weight:800;
  padding:.9em 1.4em;border-radius:0 0 var(--radius-ico) 0;
}
.skip-link:focus{left:0}
.skip-link:focus-visible{outline:3px solid var(--meergrau);outline-offset:-6px}

/* ===== Foerderlogos im Footer (echte Logos statt Platzhalter) ===== */
.foot .logos{flex-direction:column;align-items:flex-start;gap:14px}
.funding-logo{background:#fff;border-radius:var(--radius-ico);padding:9px 11px;height:auto}
.funding-logo--bar{width:100%;max-width:262px}
.funding-logo--tti{max-width:108px}
.funding-note{margin-top:auto;font-size:.82rem;line-height:1.5;color:var(--meergrau);max-width:480px}

/* ===== Partnerlogos auf hellem Grund (Ueber uns) ===== */
.partner-logos{display:flex;flex-wrap:wrap;align-items:center;gap:26px 48px;margin-bottom:44px}
.partner-logo{height:auto;max-width:420px}
.partner-logo--tti{max-width:136px}
@media(max-width:640px){.partner-logo{max-width:100%}}

/* =====================================================
   BREITE BILDSCHIRME
   Erste min-width-Regel dieser Datei. Container und Schriftgroessen
   wachsen bereits stufenlos ueber clamp mit, hier steht nur, was sich
   nicht rechnerisch koppeln laesst.

   Wichtigster Punkt ist das Seitenverhaeltnis des Medienrahmens im Hero.
   Hochkant 4/5 ergibt bei 1680px Container rund 926px Hoehe, der Hero
   waere damit hoeher als der Bildschirm. Quadratisch bleibt er bei rund
   740px und passt zur Textspalte daneben.
===================================================== */
/* Schwelle bewusst 1435px: Genau dort faengt --wrap an zu wachsen
   (92vw erreicht die Untergrenze 1320px). Beides zusammen zu schalten
   vermeidet ein Fenster, in dem die Seite schon breit ist, der Kopf aber
   noch auseinanderklafft. */
@media (min-width:1435px){
  .stage .media{aspect-ratio:1/1}

  /* Abschnitte und Hero bekommen auf breiten Schirmen je ein paar Pixel mehr. */
  :root{--sec-y:44px}
  .hero{padding-top:28px}
}

/* Produkte-Dropdown im Header */
.has-dropdown{position:relative;display:inline-flex;align-items:center;padding:14px 0}
.has-dropdown > a{display:inline-flex;align-items:center;gap:.4em}
.dd-caret{width:15px;height:15px;transition:transform .18s ease}
.has-dropdown:hover .dd-caret,.has-dropdown:focus-within .dd-caret{transform:rotate(180deg)}
.dropdown{
  position:absolute;top:100%;left:-12px;min-width:284px;
  background:var(--ink-3);border:1.5px solid rgba(249,246,240,.40);border-radius:var(--radius);
  padding:8px;display:flex;flex-direction:column;gap:2px;
  box-shadow:0 26px 60px -24px rgba(14,28,52,.7);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:60;
}
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{color:var(--on-dark-muted);font-weight:600;font-size:.95rem;padding:11px 14px;border-radius:var(--radius-ico);white-space:nowrap;transition:background .15s,color .15s}
.dropdown a:hover,.dropdown a:focus-visible{background:rgba(255,255,255,.07);color:#fff}

/* =====================================================
   KOPFZEILE IM SCHMALEN FENSTER (Klappmenue)
   Dieser Abschnitt steht bewusst hinter dem Dropdown weiter oben: er nimmt
   dessen Grundregeln zurueck, und bei gleicher Staerke der Auswahl gilt die
   zuletzt notierte Regel.

   Drei Stufen, jede raeumt genau das aus der Kopfzeile, wofuer die Breite
   nicht mehr reicht. Jeder Eintrag ist immer nur an einer Stelle sichtbar,
   entweder oben in der Zeile oder unten im Klappmenue:
     unter 960px  Links      -> Klappmenue
     unter 760px  Sprachwahl -> Klappmenue
     unter 640px  Termin     -> Klappmenue
===================================================== */
@media(max-width:960px){
  /* Hier passen die Links nicht mehr neben Logo und Termin-Knopf. Sie stehen
     ab jetzt in einer Liste unter der Kopfzeile, die der Knopf rechts oben
     auf- und zuklappt. */
  .burger{display:inline-flex}
  .nav .right{display:flex;margin-left:auto}
  .menu{
    position:absolute;top:100%;left:0;right:0;margin-left:0;
    flex-direction:column;align-items:stretch;gap:0;padding:10px 0 18px;
    background:var(--ink-2);border-top:1px solid rgba(255,255,255,.1);
    box-shadow:0 26px 50px -26px rgba(14,28,52,.8);
    max-height:calc(100vh - 82px);overflow-y:auto;
    /* Zugeklappt: unsichtbar und nicht mit der Tastatur erreichbar. */
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .18s ease,transform .18s ease,visibility .18s;
  }
  .top.nav-open .menu{opacity:1;visibility:visible;transform:none}
  .menu > a,.menu .has-dropdown > a{display:flex;align-items:center;padding:13px 32px;font-size:1.02rem;color:var(--on-dark-muted)}
  .menu > a:hover,.menu .has-dropdown > a:hover{background:rgba(255,255,255,.06);color:#fff}
  /* Der Balken unter der aktiven Seite waere in der Liste ein eigenes
     Flex-Kind neben dem Text. Hier steht stattdessen ein Strich am Rand. */
  .menu a.active{color:#fff;box-shadow:inset 3px 0 0 var(--spark-2)}
  .menu a.active::after{display:none}
  /* Die Produktseiten stehen offen untereinander statt hinter einem zweiten
     Klick: gefragt war, dass alle Links erreichbar sind. */
  .has-dropdown{display:block;width:100%;padding:0}
  .dd-caret{display:none}
  /* visibility:inherit statt :visible -- sonst hebt das Dropdown das
     visibility:hidden des zugeklappten Menues wieder auf und seine Links
     fangen (unsichtbar) Taps ueber dem Hero-Video ab. So folgt es dem Menue:
     zugeklappt hidden (unklickbar), aufgeklappt sichtbar. */
  .dropdown{
    position:static;min-width:0;opacity:1;visibility:inherit;transform:none;
    background:none;border:0;border-radius:0;box-shadow:none;padding:0 0 6px;gap:0;
  }
  .dropdown a{padding:11px 32px 11px 48px;border-radius:0;white-space:normal}
}
@media(max-width:640px){
  /* Jetzt bleibt neben Logo und Menue-Knopf gar nichts mehr. */
  .nav .right > .btn{display:none}
  /* Seitenrand wie im .wrap: dort 20px statt 32px. */
  .menu > a,.menu .has-dropdown > a{padding-left:20px;padding-right:20px}
  .dropdown a{padding-left:36px;padding-right:20px}
}


/* ================= Rechtstexte (Impressum, Datenschutz) ================= */
.legal{max-width:var(--measure)}
.legal-block + .legal-block{margin-top:34px}
.legal-block h2{font-size:1.25rem;font-weight:800;letter-spacing:-.01em;color:var(--text);margin-bottom:12px}
.legal-block p{color:var(--muted);margin-bottom:12px}
.legal-block p:last-child{margin-bottom:0}
/* Impressum und Datenschutz setzen im eigenen Stilblock einen Abstand unter jeden
   Block. Unter dem letzten zaehlt nur der Abschnittsabstand. */
.legal-block:last-child{margin-bottom:0}
.legal-block a{color:var(--petrol);font-weight:600}
.legal-block a:hover{color:var(--petrol-hover)}
.legal-note{margin-top:40px;padding-top:20px;border-top:1px solid var(--border);
  font-size:.88rem;color:var(--muted)}
.legal > h1{margin:16px 0 22px}

/* ================= Cookie-Consent (per consent.js erzeugt) =================
   Modaler Dialog mit Kategorien (Notwendig immer aktiv, Statistik schaltbar).
   Drei Aktionen nebeneinander: "Alles akzeptieren" im Akzent, die beiden
   anderen in Grau; darunter der Ausklapper mit den Detailtabellen.
   Der --cc-*-Kopf bildet die Palette ab. */
.cc-banner, .cc-reopen{
  --cc-bg:var(--paper); --cc-text:var(--text); --cc-muted:var(--muted);
  --cc-border:var(--border); --cc-accent:var(--petrol); --cc-accent-hover:var(--petrol-hover);
  --cc-accent-text:#fff; --cc-focus:var(--meergrau); --cc-zone:var(--silber);
  --cc-radius:var(--radius-ico); --cc-radius-sm:var(--radius-ico); --cc-shadow:var(--shadow);
  --cc-scrim:transparent;
}
/* CC:START */
.cc-banner{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center; padding:1rem;
  background:var(--cc-scrim);
}
.cc-dialog{
  width:min(620px,100%); max-height:calc(100vh - 2rem); overflow:auto;
  background:var(--cc-bg); color:var(--cc-text);
  border:1px solid var(--cc-border); border-radius:var(--cc-radius);
  box-shadow:var(--cc-shadow); padding:1.5rem 1.6rem;
}
.cc-dialog h2{font-size:1.15rem;font-weight:800;margin:0 0 .5rem;color:var(--cc-text)}
.cc-dialog p{font-size:.95rem;line-height:1.55;color:var(--cc-muted);margin:0 0 1.25rem}
.cc-dialog a{color:var(--cc-accent);font-weight:600;text-decoration:underline}
.cc-dialog:focus{outline:none}
.cc-cats{margin:0 0 1.1rem}
.cc-cat{display:flex;gap:1rem;align-items:flex-start;padding:.9rem 0;border-top:1px solid var(--cc-border)}
.cc-cat:last-child{border-bottom:1px solid var(--cc-border)}
.cc-cat__main{flex:1 1 auto;min-width:0}
.cc-cat__title{font-size:.98rem;font-weight:700;color:var(--cc-text)}
.cc-cat__desc{font-size:.86rem;line-height:1.5;color:var(--cc-muted);margin-top:.2rem}
.cc-switch{flex:0 0 auto;margin-top:.1rem}
.cc-switch input{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:0;
  border:1.5px solid var(--cc-focus);border-radius:6px;background:var(--cc-bg);position:relative;cursor:pointer}
.cc-switch input:checked{background:var(--cc-accent);border-color:var(--cc-accent)}
.cc-switch input:checked::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;
  border:solid var(--cc-accent-text);border-width:0 2px 2px 0;transform:rotate(45deg)}
.cc-switch input:disabled{background:var(--cc-muted);border-color:var(--cc-muted);cursor:default}
.cc-switch input:focus-visible{outline:3px solid var(--cc-focus);outline-offset:2px}
.cc-details{margin-top:1.1rem}
.cc-details__toggle{font:inherit;font-size:.9rem;font-weight:600;color:var(--cc-accent);
  background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
.cc-details__toggle:focus-visible{outline:3px solid var(--cc-focus);outline-offset:2px}
.cc-details__body{margin-top:.85rem}
.cc-details__body[hidden]{display:none}
.cc-detail{background:var(--cc-zone);border-radius:var(--cc-radius-sm);padding:.85rem 1rem;margin-bottom:.6rem}
.cc-detail:last-child{margin-bottom:0}
.cc-detail h3{font-size:.9rem;font-weight:700;color:var(--cc-text);margin:0 0 .6rem}
.cc-detail__item+.cc-detail__item{margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--cc-border)}
.cc-detail__name{font-size:.85rem;font-weight:700;color:var(--cc-text);margin:0 0 .3rem}
.cc-detail__item table{width:100%;border-collapse:collapse;font-size:.82rem}
.cc-detail__item th{text-align:left;font-weight:700;color:var(--cc-text);white-space:nowrap;
  vertical-align:top;width:1%;padding:.15rem .6rem .15rem 0}
.cc-detail__item td{color:var(--cc-muted);vertical-align:top;padding:.15rem 0}
.cc-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.cc-btn{flex:1 1 140px;min-height:44px;font:inherit;font-weight:700;font-size:.875rem;line-height:1.25;
  padding:.55em .8em;border-radius:999px;cursor:pointer;text-align:center;
  border:1.5px solid transparent;background:var(--cc-muted);color:var(--cc-accent-text)}
.cc-btn:hover{background:var(--cc-text)}
.cc-btn:focus-visible{outline:3px solid var(--cc-focus);outline-offset:2px}
.cc-btn--accept{background:var(--cc-accent)}
.cc-btn--accept:hover{background:var(--cc-accent-hover)}
.cc-reopen{position:fixed;left:1rem;bottom:1rem;z-index:999;width:44px;height:44px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:999px;cursor:pointer;
  background:var(--cc-bg);color:var(--cc-accent);border:1px solid var(--cc-border);box-shadow:var(--cc-shadow)}
.cc-reopen svg{width:22px;height:22px}
.cc-reopen:hover{background:var(--cc-accent);color:var(--cc-accent-text);border-color:var(--cc-accent)}
.cc-reopen:focus-visible{outline:3px solid var(--cc-focus);outline-offset:-3px}
.cc-reopen[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){.cc-dialog{animation:cc-in .2s ease}}
@keyframes cc-in{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
/* CC:END */

/* ================= FAQ: Themenfelder =================
   Ein Themenfeld ist eine Klappzeile, seine Ueberschrift steht in deren
   Summary. Bewusst ohne Eyebrow und ohne gruenen Balken: Das Signal "neuer
   Abschnitt, neuer Hintergrund" bleibt den Sektionsueberschriften
   vorbehalten. Trennlinie und Innenabstand haengen am Block, nicht an der
   Ueberschrift, siehe .faq-block im Stilblock von faq.html. */
.faq-group{font-size:1.3rem;font-weight:800;letter-spacing:-.02em;color:var(--text);margin:0}
@media (max-width:1000px){
  .faq{--faq-indent:40px}
}
@media (max-width:600px){
  .faq{--faq-indent:0px}
}

/* ================= Coming soon =================
   Schraegband quer ueber einem Bild, seit 17.09.2026 fuer die
   Mehrlagennaehte im Karussell und in der Produktkarte der Startseite und
   seit dem 18.09.2026 auch im Hero der Produktseite. Die Karte fuehrt
   seitdem wieder auf die Seite, das Band sagt nur noch, dass der Inhalt
   dort noch waechst.
   Glut ist hier Flaeche, der Text Navy wie auf .btn-flame (4,5:1).

   Das Band laeuft parallel zur Diagonale von links oben nach rechts unten,
   um 8 % von Breite und Hoehe zur rechten oberen Ecke versetzt, und deckt
   ein Viertel des Bildes ab. Alle Masse kommen aus dem Kasten selbst
   (Container-Einheiten), deshalb gilt das in Karussell und Karte auf jeder
   Breite:
     Winkel  atan2(Hoehe, Breite)
     Dicke   0,25 / 0,84 x Hoehe x cos(Winkel)
   Breite x Hoehe / Diagonale ist Hoehe x cos(Winkel), die versetzte
   Mittellinie ist 0,84 Diagonalen lang. Die Enden liegen immer ganz auf der
   Ober- und der rechten Kante, nie ueber einer Ecke, die Rechnung stimmt
   also bei jedem Seitenverhaeltnis. Den Ueberstand schneidet der Kasten mit
   overflow:hidden ab. Container-Einheiten messen die Inhaltsflaeche, der
   Innenabstand des Medienrahmens faellt deshalb auf dieser Folie weg; sie
   zeigt nur das Poster, und das liegt absolut ueber dem ganzen Kasten. */
.media.is-soon{container-type:size;padding:0}
.soon-band{
  --soon-dicke:calc(29.76cqh * cos(atan2(100cqh,100cqw)));
  position:absolute;z-index:4;left:58%;top:42%;width:200cqmax;
  height:var(--soon-dicke);line-height:var(--soon-dicke);
  transform:translate(-50%,-50%) rotate(atan2(100cqh,100cqw));pointer-events:none;
  background:var(--glut);color:var(--navy);
  box-shadow:0 10px 22px -12px rgba(14,28,52,.7);
  font-size:calc(var(--soon-dicke) * .44);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;text-align:center;white-space:nowrap;
}
/* Karussell: nur auf der Folie ohne Video. Dort steht das Bild als Poster im
   Videoelement, einen Abspielknopf gibt es nicht. Das Band liegt unter den
   Pfeilen (z-index 3), damit es sie auf keiner Breite verdeckt. */
.media .soon-band{display:none;z-index:2}
.media.is-soon .soon-band{display:block}
.media.is-soon .play{display:none}
/* Produktseite Mehrlagenschweissen: dasselbe Band ueber dem Foto im Hero.
   Der Groessencontainer ist eine eigene Ueberlagerung, nicht der Medienrahmen
   selbst. Der traegt zwar ein festes Seitenverhaeltnis, mit
   container-type:size wuerde er seine Hoehe aber grundsaetzlich nicht mehr aus
   dem Inhalt nehmen; die Ueberlagerung laesst ihm das und deckt trotzdem
   genau seine Flaeche ab. */
.soon-over{
  position:absolute;inset:0;z-index:3;border-radius:inherit;overflow:hidden;
  container-type:size;pointer-events:none;
}
.media .soon-over .soon-band{display:block}