/* ═══════════ evonitec — gemeinsames Stylesheet · build v4.11 ═══════════ */
:root[data-theme="light"]{
  --bg:#F7F9FA;--panel:#FFFFFF;--panel2:#EFF4F7;--band:#E2EDF2;
  --ink:#1F252B;--ink2:#3D464E;--muted:#5C666F;
  --blau:#1B6280;--blau-h:#124B64;--blau-soft:#D7E7EF;
  --rot:#C00000;--rot-h:#9A0000;--rot-soft:#F7E4E4;
  --gruen:#1D7A4E;--gruen-soft:#E4F1EA;
  --line:#D3DFE6;--line2:#E6EDF1;
  --shadow:0 1px 2px rgba(20,50,65,.05),0 6px 20px rgba(20,50,65,.07);
  --shadow-lg:0 10px 40px rgba(20,50,65,.13);--tile:#161C22;--logobg:transparent;--logopad:0
}
:root[data-theme="dark"]{
  --bg:#11161B;--panel:#1A2128;--panel2:#212A32;--band:#19222A;
  --ink:#E7ECF0;--ink2:#C3CCD4;--muted:#8E9AA5;
  --blau:#5FB0D2;--blau-h:#8CCBE6;--blau-soft:#16323F;
  --rot:#E0655C;--rot-h:#EE7C74;--rot-soft:#331A19;
  --gruen:#5FBF8F;--gruen-soft:#14301F;
  --line:#2B353E;--line2:#232C34;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.28);
  --shadow-lg:0 12px 44px rgba(0,0,0,.45);--tile:#0E1318;
  --logobg:#F2F5F7;--logopad:4px 9px
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-size:17px;line-height:1.68;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  transition:background .25s,color .25s}
img{max-width:100%;height:auto;display:block}
a{color:var(--blau);text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 1.4rem}

/* Sprachhinweis — nur auf den deutschen Seiten */
#lngbar{background:var(--blau);color:#fff;font-size:14px;padding:.55rem 1rem;display:none;
  align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap}
#lngbar.on{display:flex}
#lngbar a{color:#fff;font-weight:700;text-decoration:underline}
#lngbar button{background:none;border:1px solid rgba(255,255,255,.5);color:#fff;border-radius:6px;
  padding:.15rem .5rem;font-size:12px;cursor:pointer}

/* Kopfzeile */
header.site{background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60;
  transition:box-shadow .2s,background .25s}
header.site.scrolled{box-shadow:var(--shadow)}
/* Die Kurzschreibweise setzt links und rechts mit zurueck. Steht hier 0,
   klebt die Kopfleiste am Rand, sobald das Fenster schmaler ist als
   1120 px -- waehrend jede andere .wrap ihre 1,4rem behaelt. Der Wert ist
   bewusst KLEINER als 1,4rem: Die Logo-Plakette traegt im Dunkelmodus
   selbst 9 px Innenabstand, buendig mit dem Fliesstext wirkte sie dadurch
   zu weit eingerueckt. Ein Schriftzug darf leicht auskragen. */
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.65rem .5rem}
.brand{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.brand img{height:32px;width:auto;background:var(--logobg);padding:var(--logopad);border-radius:6px;transition:.25s}
.wm{display:none;align-items:center;gap:.35rem}
.wm b{font-size:21px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.wm b i{font-style:normal;color:var(--rot)}
.wm s{width:12px;height:12px;background:var(--rot);border-radius:2px;transform:rotate(45deg);display:block}
.menu{display:flex;align-items:center;gap:.1rem;font-size:15px}
.mi{position:relative}
.mi>a,.mi>button{display:flex;align-items:center;gap:.28rem;padding:.5rem .72rem;color:var(--ink2);
  font-weight:500;font-size:14.8px;background:none;border:none;cursor:pointer;border-radius:7px;
  font-family:inherit;transition:.15s;white-space:nowrap}
.mi>a:hover,.mi>button:hover,.mi.open>button,.mi>a.on{color:var(--blau);background:var(--panel2)}
.cx{font-size:8px;opacity:.55;transition:transform .2s}
.mi.open .cx{transform:rotate(180deg)}
.dd{display:none;position:absolute;left:0;top:calc(100% + 5px);background:var(--panel);border:1px solid var(--line);
  border-radius:11px;box-shadow:var(--shadow-lg);min-width:310px;padding:.45rem;z-index:70}
.mi.open .dd{display:block;animation:ddin .16s ease}
@keyframes ddin{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.dd a{display:block;padding:.52rem .7rem;border-radius:7px;color:var(--ink);font-size:14.5px;line-height:1.35}
.dd a:hover{background:var(--panel2);color:var(--blau)}
.dd a small{display:block;color:var(--muted);font-size:12.5px;margin-top:1px}
/* Gruppenueberschrift im Aufklappmenü. Nicht anklickbar, kein Zeigerwechsel.
   Die zweite Ueberschrift bekommt die Trennlinie, die erste nicht - dafuer
   sorgt der Geschwisterwaehler, ohne zweite Klasse. RUECKBAU: alle Zeilen
   mit class="ddgrp" loeschen und diese beiden Regeln entfernen. */
.ddgrp{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);padding:.55rem .7rem .3rem;cursor:default;user-select:none}
.dd .ddgrp~.ddgrp{border-top:1px solid var(--line);margin-top:.35rem;padding-top:.6rem}
.hd-tools{display:flex;align-items:center;gap:.4rem;flex-shrink:0}
.ib{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:none;
  border:1px solid var(--line);border-radius:8px;color:var(--muted);cursor:pointer;font-size:15px;transition:.15s}
.ib:hover{color:var(--blau);border-color:var(--blau)}
.lng{font-size:13px;font-weight:600;color:var(--muted);padding:.28rem .5rem;border:1px solid var(--line);border-radius:7px}
.lng:hover{color:var(--blau);border-color:var(--blau)}
.burger{display:none}

/* Hero */
.hero{background:var(--band);border-bottom:1px solid var(--line);overflow:hidden}
.hero .wrap{padding-top:3.4rem;padding-bottom:1rem}
.hero.page .wrap{padding-top:3rem;padding-bottom:3rem}
/* Ueberzeile. Bricht der Text auf schmalen Geraeten um, wuerde der Strich unter
   align-items:center zwischen beiden Zeilen sitzen - der umbrechende Text ist EIN
   Flex-Element. Er ist deshalb oben verankert und per margin-top auf die Mitte der
   ERSTEN Zeile gesetzt: (16 - 2)/2 = 7.
   Die vier Zahlen bilden EINEN Satz und gelten fuer font-size:12px:
     line-height 16px   enger als die geerbten 1.68 - zwei Zeilen wirken als Block
     padding     2px    faengt zurueck, was der engere Abstand an Hoehe kostet
     margin-top  7px    Mitte der ersten Zeile
   16 + 2 + 2 = 20 px Boxhoehe, genau wie zuvor 12 x 1.68. Bei EINER Zeile ist die
   Darstellung dadurch pixelgleich zum Stand davor. Wer einen der Werte aendert
   oder den Schriftgrad, rechnet die anderen drei nach. */
.kick{display:inline-flex;align-items:center;gap:.5rem;font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--rot);margin-bottom:1rem;line-height:16px;padding:2px 0}
/* flex:none haelt die 26 px. Ohne diese Angabe gilt der Vorgabewert
   flex-shrink:1, und der Strich schrumpft mit dem Fenster - auf 375 px
   blieben rund 15 px uebrig. Er ist eine Marke fester Laenge, kein
   Element, das sich den Platz mit dem Text teilt. */
.kick::before{content:"";width:26px;height:2px;background:var(--rot);display:block;
  flex:none;align-self:flex-start;margin-top:7px}
h1{font-size:2.25rem;line-height:1.15;letter-spacing:-.028em;font-weight:700;color:var(--ink);max-width:19ch}
h1 em{font-style:normal;color:var(--blau);display:block}
.hero.page h1{font-size:2rem;max-width:22ch}
.sub{font-size:1.09rem;color:var(--ink2);margin-top:1.15rem;max-width:58ch;line-height:1.62}
.cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.8rem}
.btn{display:inline-flex;align-items:center;gap:.45rem;padding:.78rem 1.5rem;border-radius:9px;
  font-weight:600;font-size:15.5px;border:2px solid transparent;cursor:pointer;transition:.17s;font-family:inherit}
.btn:hover{transform:translateY(-2px)}
.b1{background:var(--rot);color:#fff}.b1:hover{background:var(--rot-h);box-shadow:0 6px 18px rgba(192,0,0,.24)}
.b2{border-color:var(--blau);color:var(--blau);background:transparent}.b2:hover{background:var(--blau-soft)}
.b3{border-color:var(--line);color:var(--ink2);background:var(--panel)}.b3:hover{border-color:var(--blau);color:var(--blau)}
/* Rufnummer. Am Zeigergeraet nur zum Ablesen, ohne tel:-Verknuepfung - laengst
   nicht jeder Browser am Rechner hat ein Telefonprogramm hinterlegt, und ein
   Klick liefe dort ins Leere. Auf einem Geraet mit Finger als einzigem Zeiger
   macht evonitec.js daraus ein <a href="tel:...">; dann traegt das Element ein
   href und wird hier klickbar gestaltet.
   Nicht klickbar heisst NICHT grau - Farbe und Aufhellung wie bei .b2. */
.bt{border-color:var(--blau);color:var(--blau);background:transparent;cursor:default;user-select:text}
.bt:hover{background:var(--blau-soft)}
.bt[href]{cursor:pointer;text-decoration:none;user-select:auto}

/* ── Telefonnummern behalten die hier gesetzte Farbe ─────────────────
   Mobile Geraete erkennen Rufnummern im Fliesstext SELBST und legen einen
   eigenen Link darum - mitsamt eigener Farbe, die die hier gesetzte
   ueberschreibt. Auf dem blauen Abschlussblock war die Nummer dadurch
   praktisch unsichtbar, am Rechner dagegen richtig. Die Meta-Angabe
   format-detection im Kopf jeder Seite schaltet die Erkennung ab. Diese
   Regel ist die zweite Sicherung: Uebergeht ein Geraet die Angabe, erbt
   der eingefuegte Link wenigstens die Farbe seiner Umgebung. Gilt ebenso
   fuer die tel:-Verknuepfung, die evonitec.js selbst setzt. */
a[href^="tel:"]{color:inherit;text-decoration:none}
.bt a,.foot a[href^="tel:"]{color:inherit}
/* Einleitung ueber den Werdegangs-Kennzahlen (Startseite) */
.kpilead{margin:2.2rem 0 -.6rem;font-size:.95rem;color:var(--muted);max-width:62ch}
/* KEEL-Logo: Bildmarke plus Wortmarke mit Unterzeile */
.keelmark{display:flex;align-items:center;gap:16px;margin:0 0 1.4rem}
.keelmark svg{width:56px;height:56px;flex:0 0 auto;color:var(--blau)}
.keelmark .wordmark{line-height:1.05}
.keelmark .wordmark b{display:block;font-size:26px;letter-spacing:.22em;color:var(--blau);font-weight:700}
.keelmark .wordmark small{display:block;margin-top:5px;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink2)}

/* ═══ 1.6 · Portraet im Werdegang ═════════════════════════════════════════
   Ein einziger, in sich geschlossener Baustein. Das Portraet liegt per float
   rechts neben Ueberschrift und Einleitung des Werdegangs; die Zeitleiste
   darunter bleibt unberuehrt. Die Rundung entsteht durch eine kreisfoermige
   Maske, das Bild ist darin um 4 % vergroessert, damit der weisse Rand des
   LinkedIn-Zuschnitts wegfaellt - randlos rund wie im Original.
   Dunkelmodus: Der Kreis bleibt hell, weil der Bildhintergrund weiss ist.
   Das ist dieselbe Loesung wie beim Firmenlogo (helle Traegerflaeche statt
   zweiter Bilddatei); gegen das Blenden nur eine leichte Abdunklung.
   ENTFERNEN: diesen Abschnitt loeschen und den Block <figure class="portrait">
   in ueber-uns.html und en/about.html. Sonst haengt nichts daran. */
.portrait{float:right;width:148px;margin:.25rem 0 1rem 1.7rem;border-radius:50%;overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow);shape-outside:circle(50%);background:var(--panel)}
.portrait img{width:100%;aspect-ratio:1;object-fit:cover;transform:scale(1.04)}
:root[data-theme="dark"] .portrait img{filter:brightness(.93)}
.portrait .ph{aspect-ratio:1;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:1rem;font-size:11.5px;line-height:1.4;color:var(--muted);background:var(--panel2)}
/* Die Zeitleiste beginnt unterhalb des Portraets, nicht daneben - sonst
   waere ihre linke Linie eingerueckt, sobald der Text kuerzer ist als das
   Bild. Gehoert zum Baustein und faellt mit ihm weg. */
.tl{clear:both}
@media(min-width:960px){.portrait{width:168px}}
@media(max-width:560px){.portrait{float:none;width:118px;margin:0 0 1.2rem}}

/* ═══ 1.7 · Bildstreifen — derzeit nicht in Gebrauch ═════════════════════
   Keine Seite bindet die Klasse ein. Die Regeln kosten nichts, solange das
   so bleibt, und ersparen bei einem spaeteren Einsatz den Neuaufbau.
   WIEDER EINSETZEN: <div class="bandwrap"><div class="wrap"><figure
   class="bandimg"> … an der gewuenschten Stelle einfuegen, Bildadresse mit
   Bau-Nummer. VOLLSTAENDIG ENTFERNEN: diesen Abschnitt loeschen, dazu
   assets/images/evonitec-quay.jpg und den Eintrag quay|quayAlt in
   assets/js/evonitec.js.
   ─────────────────────────────────────────────────────────────────────
   Eigener Streifen zwischen zwei Abschnitten, in Wrap-Breite und mit fest
   gesetztem Seitenverhaeltnis 4:1 - dadurch nie hoeher als eine Handbreit,
   egal wie breit das Fenster ist. Das eingebrannte Logo steht im Bild links
   oben; weil der Streifen weit unten auf der Seite sitzt, ist die Kopfzeile
   dort weggescrollt und das Logo liest sich als Signatur, nicht als
   Wiederholung. Dunkelmodus: Der weisse Himmel wuerde gegen die dunkle Seite
   leuchten, deshalb leicht abgedunkelt und entsaettigt.
   ENTFERNEN: diesen Abschnitt loeschen und den Block <div class="bandwrap">
   in methode.html und en/method.html. Sonst haengt nichts daran. */
.bandwrap{background:var(--bg);padding:2.6rem 0 3rem}
.bandimg{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.bandimg img{width:100%;aspect-ratio:4/1;object-fit:cover;object-position:center}
:root[data-theme="dark"] .bandimg img{filter:brightness(.85) saturate(.92)}
.bandimg .ph{aspect-ratio:4/1;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:1rem;font-size:12.5px;color:var(--muted);background:var(--panel2)}

/* Prozessstrom */
.flow{position:relative;height:228px;margin-top:1.4rem;user-select:none}
.flow canvas{position:absolute;inset:0;width:100%;height:100%}
.stn{position:absolute;top:42%;transform:translate(-50%,-50%);text-align:center;cursor:pointer;
  padding:.5rem .8rem;border-radius:10px;transition:.2s;border:1px solid transparent}
.stn:hover,.stn.hot{background:var(--panel);border-color:var(--blau);box-shadow:var(--shadow)}
.stn .t{font-size:14.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.stn .d{font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;opacity:.75}
.stn:hover .d,.stn.hot .d{color:var(--blau);opacity:1}

/* Zaehler unter den Stationen — nur Zahlen.
   Die Beschriftungstexte stehen noch im Markup von index.html und werden hier
   ausgeblendet (font-size 0). Sie koennen dort beim naechsten Umbau entfernt
   werden; danach kann font-size:0 auf .cl wieder raus. */
.cl{position:absolute;bottom:2px;transform:translateX(-50%);text-align:center;width:86px;
  font-size:0;line-height:1}
.cl b{display:block;font-size:19px;font-weight:700;color:var(--gruen);
  font-variant-numeric:tabular-nums;line-height:1.15}
.cl i{display:block;font-size:0;font-style:normal}
.cl i::after{content:"0";font-size:19px;font-weight:700;color:var(--gruen);line-height:1.15}

/* Satz unter der Animation — mit Abstand, einzeilig auf Desktop */
.flowfoot{margin-top:1.6rem;padding:0 0 1.8rem;font-size:12.5px;color:var(--muted)}

/* Abschnitte */
section.s{padding:4rem 0}
/* Die Kopfleiste ist sticky und rund 54 px hoch. Ohne diesen Abstand
   setzt scrollIntoView() die Abschnittsoberkante an den Fensterrand und
   die Ueberschrift verschwindet dahinter. Gilt fuer die Wiederherstellung
   der Scrollstelle beim Sprachwechsel und fuer jeden Sprung auf #secN.
   72 px = Kopfleiste plus Rest Luft; mitziehen, wenn die Kopfleiste je
   hoeher wird. */
section[id^="sec"]{scroll-margin-top:72px}
section.alt{background:var(--panel2);border-block:1px solid var(--line)}
.eyeb{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:.65rem}
h2{font-size:1.68rem;line-height:1.25;letter-spacing:-.022em;font-weight:700;color:var(--ink);max-width:25ch}
.lead{font-size:1.03rem;color:var(--muted);margin-top:.75rem;max-width:63ch;line-height:1.65}
h3{font-size:1.08rem;font-weight:700;line-height:1.35;color:var(--ink)}
.body{max-width:66ch;color:var(--ink2);margin-top:1.4rem}
.body p{margin-bottom:.85rem}

/* Einblenden — nur aktiv, wenn JavaScript laeuft */
html.js .rv{opacity:0;transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
html.js .rv.in{opacity:1;transform:none}

/* Ergebnisleiste */
.res{display:grid;gap:.9rem;grid-template-columns:1fr;margin-top:2rem}
.r{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.15rem 1.25rem;transition:.2s}
.r:hover{border-color:var(--blau);box-shadow:var(--shadow)}
.r .n{font-family:ui-monospace,monospace;font-size:12px;color:var(--rot);font-weight:700;letter-spacing:.08em}
.r h3{margin:.35rem 0 .3rem;font-size:1rem}
.r p{font-size:14px;color:var(--muted);line-height:1.55}

/* Karten */
.grid{display:grid;gap:1.1rem;grid-template-columns:1fr;margin-top:2rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:1.45rem 1.5rem;
  transition:.2s;display:flex;flex-direction:column}
.card:hover{border-color:var(--blau);box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.card .ic{width:38px;height:38px;border-radius:9px;background:var(--blau-soft);color:var(--blau);
  display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:.85rem}
.card p{color:var(--muted);font-size:14.8px;margin-top:.45rem;line-height:1.58}
.card .q{font-size:14.5px;color:var(--ink2);font-style:italic;padding-left:.85rem;
  border-left:3px solid var(--rot);margin:.7rem 0 .2rem}
.card .tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--rot);margin-bottom:.45rem}
.card .out{margin-top:1rem;padding-top:.8rem;border-top:1px dashed var(--line);font-size:13.5px;
  color:var(--gruen);font-weight:600}
.card .more{margin-top:auto;padding-top:1rem;font-size:14.5px;font-weight:600;color:var(--blau)}
.card .more::after{content:" →"}

/* KMU-Block */
.sme{background:var(--panel);border:2px solid var(--line);border-radius:15px;padding:1.8rem;margin-top:1.1rem;
  display:grid;gap:1.4rem;grid-template-columns:1fr;transition:.2s}
.sme:hover{border-color:var(--blau);box-shadow:var(--shadow-lg)}
.sme h3{font-size:1.2rem;color:var(--blau)}
.sme .who{font-size:13px;color:var(--muted);font-weight:600;margin:.35rem 0 .8rem}
.sme p{color:var(--ink2);font-size:15px}
.sme ul,.lst{list-style:none;margin-top:.9rem}
.sme li,.lst li{padding-left:1.35rem;position:relative;color:var(--muted);font-size:14.5px;margin-bottom:.35rem}
.sme li::before,.lst li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1.5px;background:var(--blau)}
.qt{font-size:15px;color:var(--ink2);font-style:italic;padding-left:.9rem;border-left:3px solid var(--rot)}

/* Figuren */
figure.fig{margin:1.9rem 0 0;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:1.4rem 1.5rem 1.1rem;box-shadow:var(--shadow)}
figure.fig svg{width:100%;height:auto;display:block;overflow:visible}
figcaption{font-size:13.5px;color:var(--muted);margin-top:.9rem;line-height:1.55;text-align:center;
  max-width:70ch;margin-inline:auto}

/* Tools */
.tgrid{display:grid;gap:1.1rem;grid-template-columns:1fr;margin-top:2rem}
.tool{background:var(--tile);border:1px solid #263039;border-radius:14px;overflow:hidden;display:flex;
  flex-direction:column;transition:.2s;color:#DCE3E9}
.tool:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#3A4A57}
.tool .pv{height:172px;background:linear-gradient(150deg,#131A21,#1B2630);border-bottom:1px solid #263039;
  overflow:hidden;position:relative}
.tool .pv svg,.tool .pv img{width:100%;height:100%;display:block;object-fit:cover}
/* Der Ausschnitt haengt an der Kachelbreite: Bis rund 400 px beschneidet
   cover links und rechts, darueber oben und unten. .ptop legt fest, dass
   im zweiten Fall die OBERE Kante stehen bleibt - waagerecht bleibt es
   mittig. Nur fuer Bilder, die deutlich breiter als hoch sind; das
   nahezu quadratische ate-configurator.png bleibt ohne Klasse mittig. */
.tool .pv img.ptop{object-position:50% 0}
.tool .bd{padding:1.25rem 1.35rem 1.4rem;display:flex;flex-direction:column;flex:1}
.tool .bd h3{color:#EDF2F6;font-size:1.04rem}
.tool .bd p{color:#93A2AE;font-size:14.3px;margin-top:.45rem;line-height:1.55;flex:1}
.badge{display:inline-flex;align-items:center;gap:.3rem;font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:.22rem .5rem;border-radius:5px;margin-bottom:.65rem;width:fit-content}
.bg-ok{background:#14301F;color:#5FBF8F}
.bg-lock{background:#33280F;color:#D9A441}
.act{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.1rem}
.tbtn{padding:.52rem 1rem;border-radius:8px;font-size:13.8px;font-weight:600;cursor:pointer;
  border:1px solid #3A4A57;background:transparent;color:#C7D2DB;transition:.15s;font-family:inherit}
.tbtn:hover{border-color:#5FB0D2;color:#5FB0D2}
.tbtn.pri{background:#5FB0D2;border-color:#5FB0D2;color:#0E1318}
.tbtn.pri:hover{background:#8CCBE6;border-color:#8CCBE6}

/* Hinweis */
.note{background:var(--blau-soft);border-left:4px solid var(--blau);border-radius:0 11px 11px 0;
  padding:1.1rem 1.35rem;margin-top:1.7rem;font-size:15.3px;color:var(--ink2)}
.note b{color:var(--ink)}
.note.gr{background:var(--gruen-soft);border-color:var(--gruen)}
.note.rd{background:var(--rot-soft);border-color:var(--rot)}

/* Herkunft */
.origin{display:grid;gap:1.8rem;grid-template-columns:1fr;align-items:center}
.origin .pic{border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.origin .pic img{width:100%;aspect-ratio:21/9;object-fit:cover}
.origin .ph{width:100%;aspect-ratio:21/9;background:linear-gradient(150deg,#1B2630,#0E1318);display:flex;
  align-items:center;justify-content:center;color:#5A6B78;font-size:13px;text-align:center;padding:1rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.chip{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:.45rem .85rem;
  font-size:13.5px;color:var(--ink2);font-weight:600;transition:.18s}
.chip:hover{border-color:var(--blau);color:var(--blau)}
.chip small{display:block;font-size:11px;color:var(--muted);font-weight:500}
.kpis{display:grid;gap:1.4rem;grid-template-columns:repeat(2,1fr);text-align:center;margin-top:2.4rem}
/* Der vierte Block ("Dipl.-Ing. (FH) · MBA") ist laenger als die drei anderen und bricht
   um. Damit die Unterzeilen aller vier Blocks trotzdem auf einer Linie beginnen, bekommt
   die Kennzahl zwei Zeilen Hoehe reserviert und sitzt darin unten auf. Kuerzere Kennzahlen
   stehen dadurch auf derselben Grundlinie wie die letzte Zeile der laengeren. */
.kpi{display:flex;flex-direction:column}
.kpi .n{font-size:1.75rem;font-weight:700;color:var(--blau);line-height:1.15;letter-spacing:-.02em;
  display:flex;align-items:flex-end;justify-content:center;min-height:2.3em;text-align:center}
.kpi .l{font-size:13.2px;color:var(--muted);margin-top:.25rem;line-height:1.4}

/* Zeitleiste */
.tl{margin-top:2rem;border-left:2px solid var(--line);padding-left:1.6rem}
.tl .e{position:relative;padding-bottom:1.5rem}
.tl .e::before{content:"";position:absolute;left:calc(-1.6rem - 6px);top:.5rem;width:10px;height:10px;
  border-radius:50%;background:var(--blau);border:2px solid var(--bg)}
.tl .y{font-family:ui-monospace,monospace;font-size:12.5px;color:var(--rot);font-weight:700}
.tl h3{font-size:1rem;margin:.15rem 0 .2rem}
.tl p{font-size:14.5px;color:var(--muted)}
.tl .e.now{background:var(--blau-soft);border-radius:0 11px 11px 0;padding:.9rem 1.1rem 1rem;
  margin:0 0 1.5rem -.5rem;border-left:3px solid var(--blau)}
.tl .e.now::before{width:13px;height:13px;background:var(--rot);left:calc(-1.6rem - 8px);top:1.35rem}
.tl .e.now h3{color:var(--blau-h)}
.tl .e.now p{color:var(--ink2)}
:root[data-theme="dark"] .tl .e.now h3{color:var(--blau)}

/* Schritte */
.steps{display:grid;gap:1.5rem;grid-template-columns:1fr;margin-top:2rem;counter-reset:st}
.step{position:relative;padding-left:3.3rem}
.step::before{counter-increment:st;content:counter(st,decimal-leading-zero);position:absolute;left:0;top:0;
  font-family:ui-monospace,monospace;font-size:13.5px;font-weight:700;color:var(--blau);background:var(--blau-soft);
  width:2.4rem;height:2.4rem;border-radius:9px;display:flex;align-items:center;justify-content:center}
.step p{color:var(--muted);font-size:14.8px;margin-top:.3rem}

/* Abschluss */
.final{background:var(--blau);color:#fff;padding:3.4rem 0;text-align:center}
:root[data-theme="dark"] .final{background:#16323F;border-block:1px solid #2B4A5C}
.final h2{color:#fff;margin-inline:auto;max-width:24ch}
.final p{color:rgba(255,255,255,.86);max-width:56ch;margin:.85rem auto 1.8rem}
.final .b1{background:#fff;color:var(--blau-h)}
.final .b1:hover{background:#EAF4F9}
:root[data-theme="dark"] .final .b1{background:var(--rot);color:#fff}
/* Auch ein vom Geraet eingefuegter Link im Knopf bleibt weiss. Genau hier
   fiel der Fehler auf: dunkles Blau auf blauem Grund. */
.final .b2,.final .bt,.final .bt a{border-color:rgba(255,255,255,.5);color:#fff}
.final .b2:hover,.final .bt:hover{background:rgba(255,255,255,.14)}
.fc{display:flex;gap:1.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.9rem;font-size:14.3px;
  color:rgba(255,255,255,.82)}
.fc a{color:#fff;font-weight:600}

/* Fußzeile */
footer.site{background:var(--panel);border-top:1px solid var(--line);padding:2.5rem 0 2rem;
  font-size:14.3px;color:var(--muted)}
.fg{display:grid;gap:1.7rem;grid-template-columns:1fr;margin-bottom:1.7rem}
footer h4{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink);margin-bottom:.65rem;font-weight:700}
footer a{color:var(--muted);display:block;padding:.16rem 0}
footer a:hover{color:var(--blau)}
.li{display:inline-flex!important;align-items:center;gap:.4rem}
.li svg{width:15px;height:15px;fill:currentColor;flex-shrink:0}
.fb{border-top:1px solid var(--line2);padding-top:1.1rem;display:flex;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;font-size:12.6px}

/* Rechtstexte */
.doc{padding:2.6rem 0 3.2rem;max-width:74ch}
.doc h1{font-size:1.8rem;color:var(--blau);margin-bottom:1.3rem}
.doc h2{font-size:1.12rem;margin:1.9rem 0 .5rem;max-width:none}
.doc p,.doc li{color:var(--ink2);font-size:16px}
.doc ul{margin:.6rem 0 1rem 1.3rem}
/* Stand-Datum am Ende der Rechtstexte. Bei jedem Build mitpflegen. */
.docstand{margin-top:2.4rem;padding-top:1rem;border-top:1px solid var(--line2);
  color:var(--muted);font-size:14px}

/* Overlay */
.ov{position:fixed;inset:0;background:rgba(8,12,16,.84);backdrop-filter:blur(3px);z-index:200;display:none;
  align-items:center;justify-content:center;padding:2.2vh 2vw}
.ov.on{display:flex;animation:ovin .2s ease}
@keyframes ovin{from{opacity:0}to{opacity:1}}
.ovbox{width:100%;height:100%;max-width:1500px;background:var(--tile);border:1px solid #2E3A45;border-radius:14px;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.ovh{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.72rem 1.05rem;
  background:#121920;border-bottom:1px solid #2E3A45;flex-shrink:0}
.ovh .t{font-size:14.3px;font-weight:700;color:#E4EBF0}
.ovh .t small{display:block;font-size:11.5px;color:#7E8C99;font-weight:500}
.ovbody{flex:1;overflow:auto;background:#0E1318}
.ovbody iframe{width:100%;height:100%;border:0;display:block}
.ovinfo{padding:1.8rem 2.2rem 3rem;color:#C3CFD9;max-width:1180px;margin:0 auto}
.ovinfo img{width:100%;border-radius:10px;border:1px solid #2E3A45;margin:.2rem 0 1.8rem}
.ovinfo h3{color:#EDF2F6;font-size:1.2rem;margin:0 0 .7rem}
.ovinfo p,.ovinfo ul{max-width:76ch}
.ovinfo p{margin-bottom:.85rem;font-size:15.2px;line-height:1.66;color:#A9B7C3}
.ovinfo ul{margin:.3rem 0 1.1rem 1.25rem;font-size:14.8px}
.ovinfo li{margin-bottom:.4rem}
.ovcols{display:grid;gap:1.6rem;grid-template-columns:1fr}
@media(min-width:1000px){.ovcols{grid-template-columns:1fr 1fr;gap:2.4rem}
  .ovcols p,.ovcols ul{max-width:none}}

/* ═══ 1.8 · KI-Readiness-Check ════════════════════════════════════════════
   Nur von ki-readiness-check.html und en/ai-readiness-check.html benutzt.
   Steht hier und nicht in einer eigenen Datei: eine zweite Datei waere eine
   zusaetzliche Anfrage. Die LOGIK liegt getrennt in assets/js/readiness.js.

   Der Baustein .chkcue steht ausserdem auf Startseite und KMU-Seite. Er
   gehoert in den Seitenfluss und nie an die Stelle des Kontaktaufrufs. */

/* Einstiegspunkt auf anderen Seiten */
.chkcue{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:13px;
  padding:1.15rem 1.35rem;margin-top:1.6rem;max-width:66ch}
.chkcue b{display:block;color:var(--ink);font-size:15.5px}
.chkcue span{display:block;color:var(--muted);font-size:14px;margin-top:.28rem;line-height:1.55}
.chkcue .btn{flex-shrink:0}
.chkcue:hover{border-color:var(--blau)}
/* Variante ohne Kasten. Notwendig, wo der Baustein unmittelbar auf ein
   Raster aus .card folgt: .card traegt dieselbe Flaeche, denselben Rahmen
   und denselben Radius, dadurch liest sich der Kasten dort als breit
   geratene fuenfte Karte statt als Abschluss. Statt des Kastens eine
   blaue Oberkante - sie trennt, ohne eine weitere Karte zu behaupten. */
.chkcue.plain{background:none;border:0;border-top:2px solid var(--blau);
  border-radius:0;padding:1.2rem 0 0}
.chkcue.plain:hover{border-color:var(--blau)}

/* Rahmen des Checks */
.rcwrap{max-width:64ch}
/* Einstiegsbildschirm: eigene ruhige Flaeche, damit erkennbar ist, dass der
   Test noch nicht laeuft. Traegt Einstiegsmarke, Frage und Hinweiszeile; die
   Antwortknoepfe stehen darunter im normalen Fluss.
   Flaeche --panel, NICHT --panel2: der Kasten liegt in section.alt, und die
   traegt selbst --panel2. Zwei gleiche Farben setzen sich nicht voneinander
   ab. Rahmen deshalb ebenfalls --line statt --line2. */
.rcopen{background:var(--panel);border:1px solid var(--line);border-radius:13px;
  padding:1.1rem 1.3rem 1.25rem}
.rcopen .rcstep{color:var(--blau)}
.rcbar{height:4px;background:var(--line2);border-radius:3px;overflow:hidden;margin-bottom:1.1rem}
.rcbar i{display:block;height:100%;background:var(--blau);transition:width .25s ease}
.rcstep{font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.7rem}
.rcstep span{font-weight:600;letter-spacing:.04em;text-transform:none;color:var(--rot)}
.rcq{font-size:1.42rem;line-height:1.3;max-width:30ch}
.rchint{color:var(--muted);font-size:14.3px;margin-top:.5rem;max-width:52ch}

/* Antwortknoepfe — eine Frage je Bildschirm */
.rcopts{display:grid;gap:.55rem;margin-top:1.5rem}
.rcopt{display:flex;align-items:flex-start;gap:.8rem;width:100%;text-align:left;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:11px;
  padding:.85rem 1rem;transition:.16s;font:inherit;color:inherit}
.rcopt:hover{border-color:var(--blau);background:var(--panel2)}
.rcopt.on{border-color:var(--blau);background:var(--blau-soft)}
.rcopt .mk{flex:0 0 auto;width:18px;height:18px;margin-top:2px;border-radius:50%;
  border:2px solid var(--line);background:var(--panel);transition:.16s}
/* Eckige Marke bei Mehrfachauswahl, runde bei Einfachauswahl. Da beide auf
   "Weiter" warten, ist die Form der einzige schnelle Hinweis darauf, dass
   hier mehrere Kreuze erlaubt sind. */
.rcopt.mu .mk{border-radius:5px}
.rcopt.on .mk{border-color:var(--blau);background:var(--blau);box-shadow:inset 0 0 0 3px var(--panel)}
.rcopt .tx{min-width:0}
.rcopt .tx b{display:block;font-size:15.3px;font-weight:600;color:var(--ink);line-height:1.4}
.rcopt .tx small{display:block;font-size:13px;color:var(--muted);margin-top:2px;line-height:1.45}
.rcnav{display:flex;gap:.7rem;margin-top:1.7rem;flex-wrap:wrap}
.rcnav .btn[disabled]{opacity:.4;cursor:not-allowed}
.rcnav .btn[disabled]:hover{transform:none}

/* Ergebnis */
.rcarea{color:var(--muted);font-size:14.3px;margin-top:.8rem}
.rcarea b{color:var(--ink)}
.rcres{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--blau);
  border-radius:0 13px 13px 0;padding:1.4rem 1.5rem;margin-top:1.4rem}
.rcres.warn{border-left-color:var(--rot);background:var(--rot-soft)}
.rcres h3{font-size:1.14rem;color:var(--blau);line-height:1.35}
.rcres.warn h3{color:var(--rot)}
:root[data-theme="dark"] .rcres.warn h3{color:var(--rot-h)}
.rcres p{color:var(--ink2);font-size:15.2px;line-height:1.66;margin-top:.7rem;max-width:62ch}
.rchedge{font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--muted);
  margin:0 0 .35rem;text-transform:none}
.rcfirst{border-top:1px dashed var(--line);padding-top:.85rem;margin-top:1rem!important}
.rcfirst b{color:var(--ink)}
.rcnote{font-style:italic;color:var(--muted)!important;font-size:14.4px!important}
.rcnote a{font-style:normal;font-weight:600;color:var(--blau);white-space:nowrap}

/* Die vier Achsen — eingeordnet, nicht benotet. Keine Punktzahl, kein
   Balken: eine Laenge, die links beginnt, liest sich als Note. An ihrer
   Stelle steht je Achse eine Bahn mit vier benannten Stationen und einer
   Marke, die einrastet. */
.rcaxes{margin-top:2.2rem;padding:1.35rem 1.5rem;background:var(--panel2);
  border:1px solid var(--line2);border-radius:13px}
.rcaxes h3{font-size:1rem;margin-bottom:1rem}
.rcax{margin-bottom:1.5rem}
.rcax:last-child{margin-bottom:0}
.rcax span{font-size:13.6px;color:var(--ink2)}
/* Zwei <b> je Achse: eines in der Beschriftung, eines als Marke. Die
   Regeln muessen sich deshalb ausschliessen -- nie .rcax b schreiben. */
.rcax span b{display:block}
.rcax span small{display:block;font-size:12px;color:var(--muted);line-height:1.4;margin-top:1px}

/* Die Bahn. Gerade Hoehe in Pixeln, fuer alle Fensterbreiten dieselbe:
   ungerade Hoehen runden auf HiDPI und bei Zoom je nach senkrechter Lage
   unterschiedlich, dann wirkt eine der vier Bahnen hoeher als die uebrigen. */
.rcstat{margin-top:.7rem}
.rcstat .tr{position:relative;height:2px;background:var(--line);border-radius:1px}
/* Bahnstueck zwischen zwei Stationen — nur, wenn die Marke dazwischen
   liegt. Es faerbt genau die Strecke von einem Teilstrich zum naechsten
   (25 % der Bahn) und macht so sichtbar, dass der Wert BEIDEN Stationen
   zuzuordnen ist und nicht der linken allein. */
.rcstat .sp{position:absolute;top:0;width:25%;height:2px;background:var(--blau);
  opacity:.42;border-radius:1px}
.rcstat .mk{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;
  border-radius:50%;background:var(--blau);box-shadow:0 0 0 3px var(--panel2)}
.rcstat ol{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;margin:0;padding:0}
.rcstat li{position:relative;padding-top:.6rem;text-align:center;font-size:11.6px;
  line-height:1.34;color:var(--muted);hyphens:auto}
.rcstat li::before{content:"";position:absolute;top:0;left:50%;width:1px;height:6px;
  background:var(--line)}
.rcstat li.on{color:var(--ink);font-weight:600}
.rcstat li.on::before{background:var(--blau)}
/* Die erreichte Station allein — nur unter 640 px. Vier Beschriftungen
   nebeneinander passen auf einem Telefon nicht. */
.rcnow{display:none}
.rcaxprint{display:none}
@media(max-width:639px){
  .rcstat ol span{display:none}
  .rcstat li{padding-top:.5rem;min-height:.5rem}
  .rcnow{display:block;font-size:12.6px;font-weight:600;color:var(--ink);margin-top:.45rem}
}

.rclimit{margin-top:2.2rem;padding:1.4rem 1.5rem;background:var(--gruen-soft);
  border-left:4px solid var(--gruen);border-radius:0 13px 13px 0}
.rclimit h3{font-size:1.04rem;color:var(--gruen)}
.rclimit p{color:var(--ink2);font-size:14.8px;line-height:1.64;margin-top:.65rem;max-width:64ch}
:root[data-theme="dark"] .rclimit h3{color:var(--gruen)}

.rctake{margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.rctake h3{font-size:1.04rem}
.rctake p{color:var(--muted);font-size:14.5px;margin-top:.5rem;max-width:62ch;line-height:1.6}
.rcmailnote{font-size:13.2px!important;color:var(--muted);margin-top:.9rem!important;max-width:64ch}
.rctake .cta{margin-top:1.2rem}

.rcanswers{margin-top:2.4rem;padding-top:1.5rem;border-top:1px dashed var(--line)}
.rcanswers h3{font-size:.95rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:12px}
.rcanswers dl{margin-top:1rem}
.rcanswers dt{font-size:13.6px;color:var(--ink2);font-weight:600;margin-top:.8rem}
.rcanswers dd{font-size:13.6px;color:var(--muted);margin-top:.15rem;padding-left:.9rem;
  border-left:2px solid var(--line)}

@media(max-width:960px){
  .burger{display:flex}
  .menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--panel);
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:.6rem;gap:0;
    box-shadow:var(--shadow-lg);max-height:78vh;overflow:auto}
  .menu.open{display:flex}
  .mi>a,.mi>button{width:100%;justify-content:space-between;padding:.68rem .8rem}
  .dd{position:static;display:none;box-shadow:none;border:none;border-left:2px solid var(--line);
    border-radius:0;margin:.1rem 0 .4rem .8rem;min-width:0;padding:.2rem}
  .mi.open .dd{display:block;animation:none}
  .stn .d{display:none}
  .flow{height:200px}
}
@media(min-width:640px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .res{grid-template-columns:repeat(2,1fr)}
  .tgrid{grid-template-columns:repeat(2,1fr)}
  .kpis{grid-template-columns:repeat(4,1fr)}
  .kpi .n{font-size:1.35rem}
  .fg{grid-template-columns:repeat(4,1fr)}
  .sme{grid-template-columns:1.1fr 1fr}
  h1{font-size:2.9rem}
  .hero.page h1{font-size:2.4rem}
  .steps{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:960px){
  .kpi .n{font-size:1.62rem}
  .grid.g3{grid-template-columns:repeat(3,1fr)}
  .res{grid-template-columns:repeat(5,1fr)}
  .origin{grid-template-columns:1fr 1.15fr}
  h1{font-size:3.2rem}
  h2{font-size:1.95rem}
  .hero .wrap{padding-top:4.4rem}
  section.s{padding:4.8rem 0}
  .flow{height:248px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
  html.js .rv{opacity:1;transform:none}}
@media print{
  header.site,#lngbar,.flow,.flowfoot,.ov,.bandwrap{display:none!important}
  body{background:#fff;color:#000}
  html.js .rv{opacity:1;transform:none}
}

/* Druckausgabe des Ergebnisses — erweitertes @media print, keine Datei,
   kein Erzeuger, keine Bibliothek. Fragen, Antworten und Ergebnis auf
   moeglichst wenig Papier. Steht bewusst NACH dem allgemeinen
   @media print am Dateiende, damit es dessen Regeln ergaenzt. */
@media print{
  .rcform,.rctake .cta,.rcnav,.rcbar,.rcstep,#rcAgain{display:none!important}
  /* Eine Marke ohne Bahn waere sinnlos. Im Ausdruck steht deshalb je
     Achse eine Textzeile mit der erreichten Station -- die Aussage bleibt
     erhalten, ohne dass eine Grafik nachgebildet werden muss. */
  .rcstat{display:none!important}
  .rcaxprint{display:block!important;font-size:13px;color:#000;margin-top:.35rem}
  .rcax{margin-bottom:.6rem!important}
  body.rcpage .hero,body.rcpage #sec1,body.rcpage #sec3,body.rcpage .final,
  body.rcpage footer.site{display:none!important}
  body.rcpage section.s{padding:0!important;background:#fff!important}
  .rcwrap{max-width:none}
  .rcres,.rclimit,.rcanswers{break-inside:avoid;page-break-inside:avoid}
  .rcres{border:1px solid #999;border-left:4px solid #333;background:#fff}
  .rcres.warn{background:#fff;border-left-color:#000}
  .rcres h3,.rclimit h3{color:#000}
  .rclimit{background:#fff;border-left-color:#333}
  .rcres p,.rclimit p,.rcanswers dd{color:#222}
  .rcanswers{border-top:1px solid #999}
}