/* as-digicon · Variante 3b „Steckfeld“
   Die Seite ist selbst ein Baukasten: weiße Kacheln mit Bausteinkante auf einem klaren Mint-Feld.
   Die Fugen zwischen den Kacheln sind die Leitungen; js/site.js legt darunter Noppen und Datenwürfel an.
   Reihenfolge: Schrift, Tokens, Grundlagen, Kacheln und Fugen, Kopf, Abschnitte in Seitenreihenfolge,
   Fuß, Annahmen, Responsive, Bewegung. */

/* ---------- Schriften wie auf der bisherigen Website (lokal, SIL OFL 1.1, Lizenztexte in fonts/): Poppins für Überschriften, Kennzeilen und Knöpfe, Inter für den Text ---------- */
@font-face{font-family:"Poppins";src:url(../fonts/poppins-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter-var.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

@property --p{syntax:"<number>";inherits:true;initial-value:1}

/* ---------- Marke, Maße, Feld ---------- */
:root{
  --petrol:#173544;
  --petrol-tief:#0D2430;
  --orange:#FF9E2C;
  --orange-kante:#C76E0A;
  --gold:#FFC93C;
  --mint:#34C9A3;
  --verlauf:linear-gradient(90deg,#FF9E2C,#FFC93C 55%,#34C9A3);
  --meta:#b4237a;
  --display:"Poppins","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --maxw:1200px;
  --rand:clamp(1rem,4vw,3rem);
  --kopf-h:76px;
  /* Steckfeld: Fuge = Abstand zwischen Kacheln; senkrecht kommt die Kante (Lippe) dazu */
  --feld:#D8F1E8;
  --lippe:6px;
  --fuge:24px;
  --fuge-y:calc(var(--fuge) + var(--lippe));
  --r-kachel:18px;
  --pad:clamp(1.25rem,2.2vw,2rem);
  --abstand:clamp(3.5rem,6.2vw,5.5rem);
  --kachel-rand:#BFE5D7;
  --kachel-kante:#A2D8C4;
  --rille:rgba(23,53,68,.13);
}

/* ---------- Helle Tokens: Feld, Kacheln, Bühnen und Karten ---------- */
:root,.karte{
  --flaeche:#FFFFFF;
  --flaeche-2:#E6F5EF;
  --karte:#FFFFFF;
  --tinte:#173544;
  --tinte-2:#3A5663;
  --tinte-3:#4F6975;
  --linie:#D3E9E1;
  --linie-2:#B3D5C9;
  --akzent-text:#1B6577;
  --fokus:#173544;
  --schatten:0 1px 0 rgba(13,36,48,.05),0 22px 40px -26px rgba(13,36,48,.38);
  /* Modelle (Deckel, links, rechts, Kante) */
  --pl-d:#F2F8F6;--pl-l:#DCEBE7;--pl-r:#C8DDD8;--pl-k:#A6C2BC;
  --bl-d:#FFFFFF;--bl-l:#EAF3F1;--bl-r:#D4E5E1;--bl-k:#7FA19C;
  --ke-d:#2F6576;--ke-l:#1D4555;--ke-r:#13323F;--ke-k:#0D2430;--ke-marke:#CFE6E1;
  --wu-d:#FFC93C;--wu-l:#FF9E2C;--wu-r:#E07D0E;--wu-k:#A85A06;
  --pa-d:#FFFFFF;--pa-l:#F1F6F5;--pa-r:#DFEAE7;--pa-k:#A9C1BC;
  --o1-d:#3C6B7B;--o1-l:#2A5464;--o1-r:#1F4554;--o1-k:#173544;
  --o2-d:#6F97A3;--o2-l:#5A8592;--o2-r:#4A7482;--o2-k:#3B6470;
  --o3-d:#A9C6C9;--o3-l:#93B6BA;--o3-r:#80A6AB;--o3-k:#6E959A;
  --oa-d:#FFC93C;--oa-l:#FF9E2C;--oa-r:#E07D0E;--oa-k:#A85A06;
  --re-d:#FBFDFC;--re-l:#E9F2F0;--re-r:#D6E6E2;--re-k:#A6C2BC;
  --ri:#2F5F6F;--ri-k:#173544;--sch:#0D2430;
  --akz:#FF9E2C;--akz-hell:#FFE2B0;--akz-licht:#FFC93C;--st-an:#FFB54D;
}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--feld)}
body{margin:0;background:var(--feld);color:var(--tinte);font:400 1.0625rem/1.6 var(--sans);font-kerning:normal;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}
[id]{scroll-margin-top:calc(var(--kopf-h) + 1rem)}
.nw{white-space:nowrap}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--fokus);outline-offset:3px}
.skip{position:absolute;left:1rem;top:-5rem;z-index:100;padding:.8rem 1.1rem;background:#fff;color:var(--petrol);border:2px solid var(--petrol);border-radius:10px;font:700 1rem/1 var(--sans);text-decoration:none}
.skip:focus{top:1rem}
.innen{width:100%;max-width:calc(var(--maxw) + 2 * var(--rand));margin-inline:auto;padding-inline:var(--rand)}

h1,h2{font-family:var(--display);font-weight:700;letter-spacing:-.03em;font-variant-numeric:lining-nums;text-wrap:balance}
h3{text-wrap:balance}
h2{font-size:clamp(1.875rem,1.2rem + 1.8vw,2.75rem);line-height:1.06;max-width:16em}
h3{font:700 1.1875rem/1.3 var(--display);letter-spacing:-.01em}
h4{font:700 1.0625rem/1.35 var(--display)}
.lead{font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.55;color:var(--tinte-2);max-width:36em;text-wrap:pretty}
.kicker{display:flex;align-items:center;font:700 .9375rem/1.4 var(--display);color:var(--akzent-text);margin-bottom:.6rem}
.k-wuerfel{display:inline-block;flex:none;width:.95em;height:1.07em;margin-right:.5em;vertical-align:-.18em}

/* Knöpfe: Orange mit Kante (dieselbe Lippe wie die Kacheln); der Stecker rastet beim Hover ein */
.knopf{display:inline-flex;align-items:center;gap:.75rem;min-height:54px;padding:.85rem 1.3rem .85rem 1.5rem;border-radius:12px;
  background:linear-gradient(100deg,var(--orange) 0%,var(--orange) 45%,var(--gold) 100%) 0 0/220% 100%;color:var(--petrol-tief);
  font:700 1.0625rem/1.2 var(--sans);text-decoration:none;
  box-shadow:0 4px 0 var(--orange-kante),0 16px 30px -16px rgba(255,158,44,.55);
  transition:translate .18s ease-out,box-shadow .18s ease-out,background-position .45s ease-out}
.knopf:hover{translate:0 -2px;background-position:100% 0;box-shadow:0 6px 0 var(--orange-kante),0 20px 34px -16px rgba(255,158,44,.65)}
.knopf:active{translate:0 3px;box-shadow:0 1px 0 var(--orange-kante)}
.knopf:focus-visible{outline-offset:5px}
.stecker{width:26px;height:20px;flex:none;overflow:visible}
.stecker .s-linie{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;transform-box:fill-box;transform-origin:0 50%;transition:scale .25s cubic-bezier(.3,.7,.2,1)}
.stecker .s-punkt{fill:currentColor;transition:translate .25s cubic-bezier(.3,.7,.2,1)}
.knopf:hover .s-linie{scale:1.3 1}
.knopf:hover .s-punkt{translate:4px 0}
.knopf-zwei{background:var(--flaeche);color:var(--tinte);box-shadow:inset 0 0 0 2px var(--tinte),0 4px 0 var(--tinte)}
.knopf-zwei:hover{background:var(--flaeche-2);box-shadow:inset 0 0 0 2px var(--tinte),0 6px 0 var(--tinte)}
.knopf-zwei:active{box-shadow:inset 0 0 0 2px var(--tinte),0 1px 0 var(--tinte)}
.knopf-klein{white-space:nowrap;min-height:44px;padding:.5rem 1.05rem;border-radius:10px;font-size:.9375rem;box-shadow:0 3px 0 var(--orange-kante)}
.knopf-klein:hover{box-shadow:0 4px 0 var(--orange-kante)}
.aktion{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem}

.pfeil{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:translate .18s ease-out}
.mehr{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;font-weight:700;color:var(--tinte);text-decoration:none}
.mehr-text{text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:.32em;transition:text-decoration-color .18s}
.mehr:hover .mehr-text{text-decoration-color:var(--tinte)}
.mehr:hover .pfeil{translate:3px 0}

/* ---------- Steckfeld: Abschnitte, Raster, Kacheln ---------- */
main{position:relative;padding-bottom:var(--abstand)}
.feld{padding-top:var(--abstand)}
.raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--fuge-y) var(--fuge);align-items:stretch}
.raster > *{min-width:0}
/* Kachel = Baustein: weiß, feiner Mint-Rand, kräftige Kante unten wie die Knöpfe */
.kachel{position:relative;z-index:1;background:var(--flaeche);color:var(--tinte);border:1px solid var(--kachel-rand);border-radius:var(--r-kachel);
  box-shadow:0 var(--lippe) 0 var(--kachel-kante),0 22px 34px -26px rgba(13,36,48,.42);padding:var(--pad)}
/* Bühne (Held-Modell, Mentora): hell, Licht von oben, zum Boden ein klares Mint; Bedienknöpfe darin weiß */
.kachel-buehne{--flaeche-2:#FFFFFF;--pl-d:#FFFFFF;--pl-l:#E2F0EB;--pl-r:#CCE2DB;--pl-k:#9DBDB5;
  background:radial-gradient(ellipse 72% 58% at 50% 34%,#FFFFFF,rgba(255,255,255,0) 72%),linear-gradient(180deg,#F6FCFA 0%,#E4F5EE 100%)}
/* Schild: Abschnittskopf direkt auf dem Feld (keine Kachel), Nummer im gerundeten Quadrat wie im Logo */
.schild{position:relative;z-index:1;align-self:end;display:grid;gap:.85rem;align-content:end;padding:0 .25rem .2rem}
.schiene{display:flex;align-items:center;gap:.65rem;font:700 .9375rem/1.3 var(--display);color:var(--tinte)}
.nr-marke{display:inline-grid;place-items:center;width:2rem;height:2rem;flex:none;border:2px solid var(--tinte);border-radius:9px;
  font:700 .8125rem/1 var(--display);font-variant-numeric:lining-nums tabular-nums;color:var(--tinte);background:var(--flaeche);box-shadow:0 3px 0 var(--kachel-kante)}
.schild .lead{max-width:34em}

/* ---------- Fugen: Rillen, Noppen und Datenwürfel (js/site.js baut die Schicht) ---------- */
.fugen{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fuge{position:absolute}
.fuge::before{content:"";position:absolute;border-radius:2px;background:var(--rille)}
.fuge-v::before,.fuge-x::before,.fuge-b::before{left:calc(50% - 1px);top:0;bottom:0;width:2px}
.fuge-h::before,.fuge-q::before{top:calc(50% - 1px);left:0;right:0;height:2px}
/* Brücke über eine Abschnittsgrenze: gestrichelt, damit sie als Leitung und nicht als Raster liest */
.fuge-b::before{background:repeating-linear-gradient(180deg,var(--rille) 0 6px,transparent 6px 12px)}
/* Noppe: kleiner weißer Baustein mit Mint-Kante an den Enden jeder Leitung */
.noppe{position:absolute;width:10px;height:10px;border-radius:3px;background:#fff;box-shadow:0 2px 0 var(--kachel-kante),0 0 0 1px var(--kachel-rand)}
.fuge-v .noppe,.fuge-x .noppe,.fuge-b .noppe{left:calc(50% - 5px)}
.fuge-h .noppe,.fuge-q .noppe{top:calc(50% - 5px)}
.noppe-a{top:-5px}
.fuge-v .noppe-b,.fuge-x .noppe-b,.fuge-b .noppe-b{bottom:-5px}
.fuge-h .noppe-a,.fuge-q .noppe-a{top:calc(50% - 5px);left:-5px}
.fuge-h .noppe-b,.fuge-q .noppe-b{right:-5px}
.fw{position:absolute;left:0;top:0;width:20px;height:22px;margin:-11px 0 0 -10px;opacity:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Cpolygon points='8,1 15,5 8,9 1,5' fill='%23FFC93C'/%3E%3Cpolygon points='1,5 8,9 8,17 1,13' fill='%23FF9E2C'/%3E%3Cpolygon points='15,5 8,9 8,17 15,13' fill='%23E07D0E'/%3E%3C/svg%3E") center/contain no-repeat}
.fuge.laeuft .fw{animation:fw-lauf var(--dauer,1.4s) cubic-bezier(.45,0,.55,1) var(--verz,0s) both}
@keyframes fw-lauf{
  0%{transform:translate(var(--ax),var(--ay));opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{transform:translate(var(--bx),var(--by));opacity:0}
}

/* ---------- Kopf: schwebende weiße Platte mit Bausteinkante ---------- */
.kopf{position:sticky;top:0;z-index:50;padding:10px max(8px,calc(var(--rand) - 1rem)) 6px;pointer-events:none}
.kopf-innen{pointer-events:auto;position:relative;max-width:calc(var(--maxw) + 2rem);height:60px;margin:0 auto;padding:0 .5rem 0 1rem;display:flex;align-items:center;gap:1rem;
  color:var(--tinte);background:var(--flaeche);border:1px solid var(--kachel-rand);border-radius:16px;box-shadow:0 4px 0 var(--kachel-kante),0 16px 30px -20px rgba(2,14,20,.45)}
.brand{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;min-width:44px;color:var(--tinte);text-decoration:none;flex:none}
.brand-mark{width:2.3rem;height:2.3rem;flex:none;overflow:visible}
.brand-mark text{font-family:var(--display)}
.brand-text{font:700 1.25rem/1 var(--display);letter-spacing:-.02em;display:inline-flex;align-items:center}
.brand-dot{display:inline-block;width:.3em;height:.3em;border-radius:50%;background:var(--orange);margin:0 .09em}
.kopf-strich{width:1px;height:26px;background:var(--linie-2);flex:none}
.nav{display:flex;align-items:center;gap:.1rem;flex:1;min-width:0}
.nav a{position:relative;display:flex;align-items:center;min-height:44px;padding:.5rem .75rem;font:700 .96875rem/1 var(--sans);text-decoration:none;white-space:nowrap;border-radius:9px;transition:background-color .18s}
.nav a:hover{background:var(--flaeche-2)}
.nav a::after{content:"";position:absolute;left:.75rem;right:.75rem;bottom:.4rem;height:2px;border-radius:1px;background:var(--verlauf);transform:scaleX(0);transform-origin:left;transition:transform .22s ease-out}
.nav a:hover::after{transform:scaleX(1)}
.nav a.nav-nur-mobil{display:none}
.nav .nav-tel{margin-left:auto;color:var(--tinte-2);font-weight:500;font-variant-numeric:lining-nums}
.nav-tel-label{display:none}
.menue-knopf{display:none}
.kopf-tel{display:none;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border-radius:10px;color:var(--tinte);transition:background-color .18s}
.kopf-tel:hover{background:var(--flaeche-2)}
.kopf-tel svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round}

/* ---------- Held: Textkachel (7/12) und helle Bühnenkachel mit dem Modell (5/12) ---------- */
.held{padding-top:clamp(.75rem,2vw,1.5rem)}
.held-text{grid-column:1/8;container-type:inline-size;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:clamp(1.1rem,2.2vw,1.6rem);
  padding:clamp(1.5rem,3.4vw,2.75rem)}
/* H1 wächst mit der Kachel: „Endlich verbunden.“ bleibt eine Zeile */
.held h1{font-size:clamp(2rem,9.3cqi,4.25rem);line-height:1.02;letter-spacing:-.035em;max-width:none}
.h1-zwei{color:var(--akzent-text);padding-bottom:.14em;white-space:nowrap;
  background:var(--verlauf) no-repeat 0 calc(100% - .055em)/calc(100% - .24em) .075em,
    radial-gradient(circle,var(--orange) 0 64%,transparent 68%) no-repeat 100% 100%/.24em .24em}
html.js .h1-zwei{animation:verbinden 1.1s cubic-bezier(.6,0,.2,1) .9s both}
@keyframes verbinden{
  0%{background-size:0 .075em,0 0}
  72%{background-size:calc(100% - .24em) .075em,0 0}
  100%{background-size:calc(100% - .24em) .075em,.24em .24em}
}
.held .lead{max-width:30em}
.held-modell{grid-column:8/13;position:relative;padding:0;overflow:hidden;min-height:420px}
.held-modell .modell{position:absolute;inset:0;width:100%;height:100%;max-width:none}

/* Modell-SVGs */
.iso polygon,.iso polyline{vector-effect:non-scaling-stroke;stroke-linejoin:round}
.iso text{font-family:var(--sans)}
.k-name{font-weight:700;font-size:16px;fill:var(--tinte)}
.modell .k-name{font-size:23px}
.k-notiz{font-weight:700;font-size:16px;fill:var(--tinte-2)}
.ruhe{opacity:0}
html:not(.js) .ruhe{opacity:1}
html:not(.js) .lauf{display:none}
html.js .modell .blk{animation:absetzen .7s cubic-bezier(.25,.8,.3,1.08) calc(var(--i) * .13s + .1s) both}
@keyframes absetzen{0%{translate:0 -46px;opacity:0}55%{opacity:1}100%{translate:0 0;opacity:1}}

/* ---------- 02 · Leistungen: fünf Kacheln, daneben das Steuerpult ----------
   Grafik: teile/pult.html, erzeugt von werkzeuge/pult_gen.py. Orange bedeutet ausschließlich „an“.
   Die Pult-Kachel ist genau so hoch wie die Spalte der Leistungskacheln (oben und unten bündig); die Grafik liegt
   absolut darin und füllt sie, ohne die Zeilenhöhe zu beeinflussen. Ohne JS steht „KI-Lösungen an“.
   js/site.js: Einstieg einmal beim ersten Hinsehen (alle Regler nacheinander an, dann Ruhe auf KI);
   Maus über Kachel oder Regler bzw. Tippen wählt eine Leistung, die Szene im Fenster läuft einmal ab. */
.leistungen .schild{grid-column:1/8;grid-row:1}
.pult-kachel{--pult-rand:clamp(.75rem,1.4vw,1.25rem);grid-column:8/13;grid-row:2;align-self:stretch;position:relative;padding:0;overflow:clip}
.pult-kachel .pult{position:absolute;inset:var(--pult-rand);width:calc(100% - 2 * var(--pult-rand));height:calc(100% - 2 * var(--pult-rand));display:block;overflow:visible;--weich:cubic-bezier(.3,.7,.2,1)}
.pult .p-gravur{font:600 10px var(--sans);letter-spacing:.2em;fill:#7FA19C}
.pult .p-name{font:600 15px var(--sans);fill:var(--tinte)}
.pult .p-alles{font:700 14px var(--display);fill:var(--tinte)}
.pult .p-cap{font:500 12px var(--sans);fill:#CFE6E1}
.pult .p-tag{font:600 9.5px var(--sans);fill:#0D2430}
.pult .p-gross{font:700 17px var(--display);fill:#fff}
.pult .p-de{font:700 15px var(--display);fill:#CFE6E1;letter-spacing:.08em}
.pult .p-reihe,.pult .alles{cursor:default}
/* LED mit Fassung */
.pult .led-sockel{fill:#C8DDD8;stroke:#A6C2BC;transition:fill .25s,stroke .25s}
.pult .led{fill:#DCEBE7;stroke:#A6C2BC;transition:fill .25s,stroke .25s}
.pult .led-glanz{fill:#FF9E2C;opacity:0;transition:opacity .3s}
.pult .led-licht{fill:#fff;opacity:0;transition:opacity .25s}
.pult .an .led-sockel{fill:#E07D0E;stroke:#A85A06}
.pult .an .led{fill:#FF9E2C;stroke:#E07D0E}
.pult .an .led-glanz{opacity:.35}
.pult .an .led-licht{opacity:.9}
/* Schlitz; das Licht wächst mit dem Knopf von links */
.pult .schlitz{fill:#C8DDD8;stroke:#A6C2BC;transition:stroke .3s}
.pult .schlitz-lippe{fill:#DCEBE7}
.pult .schlitz-wand{fill:#A6C2BC}
.pult .an .schlitz{stroke:#E07D0E}
.pult .licht{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0);transition:transform .5s var(--weich)}
.pult .an .licht{transform:scaleX(1)}
/* Knopf als Block */
.pult .p-knopf{transform:translate(212px,0);transition:transform .5s var(--weich)}
.pult .an .p-knopf{transform:translate(306px,0)}
.pult .k-deck{fill:#5A8592}
.pult .k-front{fill:#2A5464}
.pult .k-seite{fill:#1F4554}
.pult .k-kontur{fill:none;stroke:#173544;stroke-width:1.2;stroke-linejoin:round}
.pult .k-rille{stroke:#6F97A3}
/* Einstieg: die Regler fahren nacheinander */
.pult.einstieg :is(.p-knopf,.licht){transition-delay:calc(var(--i) * 110ms)}
.pult.einstieg :is(.led,.led-sockel,.led-glanz,.led-licht){transition-delay:calc(var(--i) * 110ms + 250ms)}
/* Taste „Alles aus einer Hand“ mit Hub */
.pult .taste-tief{display:none}
.pult .alles.an .taste-hoch{display:none}
.pult .alles.an .taste-tief{display:inline}
.pult .t-front{fill:#FBFDFC;stroke:#7FA19C;stroke-width:1.2}
.pult .alles.an .t-front{fill:#FFF6EA;stroke:#E07D0E}
.pult .alles .mini{fill:#DCEBE7;stroke:#A6C2BC}
.pult .alles.an .mini{fill:#FF9E2C;stroke:#E07D0E}
/* Szenen im Fenster: laufen einmal ab, sobald sie erscheinen, dann Ruhe */
.pult .szene{display:none}
.pult .szene.an{display:inline}
.pult .szene.an .p-cap{animation:pult-ein .5s ease-out .15s both}
.pult .szene.an :is(.a-ein,.a-x,.a-y,.a-hoch,.a-pop,.a-zeichne,.a-reise,.a-zu){animation-duration:.45s;animation-timing-function:var(--weich);animation-delay:var(--d,0ms);animation-fill-mode:both}
.pult .szene.an .a-ein{animation-name:pult-ein}
.pult .szene.an .a-x{animation-name:pult-x;transform-box:fill-box;transform-origin:0 50%}
.pult .szene.an .a-y{animation-name:pult-y;transform-box:fill-box;transform-origin:50% 100%}
.pult .szene.an .a-hoch{animation-name:pult-hoch}
.pult .szene.an .a-pop{animation-name:pult-pop;transform-box:fill-box;transform-origin:50% 50%;animation-timing-function:cubic-bezier(.34,1.5,.64,1)}
.pult .szene.an .a-zeichne{animation-name:pult-zeichne;stroke-dasharray:1;animation-duration:.6s}
.pult .szene.an .a-reise{animation-name:pult-reise;animation-duration:.8s}
.pult .szene.an .a-zu{animation-name:pult-zu;animation-duration:.35s}
@keyframes pult-ein{from{opacity:0}}
@keyframes pult-x{from{transform:scaleX(0)}}
@keyframes pult-y{from{transform:scaleY(0)}}
@keyframes pult-hoch{from{opacity:0;transform:translateY(8px)}}
@keyframes pult-pop{0%{transform:scale(0)}100%{transform:scale(1)}}
@keyframes pult-zeichne{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes pult-reise{0%{transform:translateX(-52px);opacity:0}25%{opacity:1}100%{transform:translateX(0)}}
@keyframes pult-zu{from{transform:translateY(-7px)}}
.dienste{grid-column:1/8;grid-row:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--fuge-y) var(--fuge)}
.dienst{display:flex;flex-direction:column;gap:.6rem;-webkit-tap-highlight-color:transparent;transition:box-shadow .3s ease-out,border-color .3s ease-out,translate .3s ease-out}
/* Aktiver Baustein: die Kante wird orange, die Kachel hebt sich ein wenig */
.dienst.ist-an{border-color:#FFC98A;box-shadow:0 var(--lippe) 0 var(--orange),0 26px 36px -26px rgba(199,110,10,.45);translate:0 -2px}
.dienst h3{display:flex;align-items:baseline;gap:.55rem;font:700 .9375rem/1.3 var(--display);letter-spacing:0;color:var(--tinte-2)}
.dienst h3 .nr{font-variant-numeric:lining-nums tabular-nums;color:var(--akzent-text)}
.ergebnis{font:700 clamp(1.375rem,1.1rem + .8vw,1.75rem)/1.12 var(--display);letter-spacing:-.025em;color:var(--tinte);text-wrap:balance}
.dienst > p:not(.ergebnis){color:var(--tinte-2);font-size:1rem;line-height:1.55}
.dienst .mehr{margin-top:auto;align-self:flex-start}

/* ---------- 02 · Vorher / Nachher: Modellkachel (8/12), drei Kennzahl-Kacheln (4/12) ---------- */
.umbau .schild{grid-column:1/9;grid-row:1}
.umbau-kachel{grid-column:1/9;grid-row:2;display:flex;flex-direction:column;gap:1rem}
.umbau-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem}
.umbau-hinweis{flex:1 1 18rem;font:500 .875rem/1.45 var(--sans);color:var(--tinte-3)}
.umschalter{display:inline-flex;padding:4px;gap:4px;background:var(--flaeche-2);border:1px solid var(--linie-2);border-radius:12px}
.umschalter button{min-height:44px;min-width:6.5rem;padding:0 1.1rem;border:0;border-radius:9px;background:transparent;font:700 .9375rem/1 var(--sans);cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s}
.umschalter button:hover{background:var(--flaeche)}
.umschalter button[aria-pressed="true"]{background:var(--tinte);color:#fff;box-shadow:0 3px 0 var(--petrol-tief)}
html:not(.js) .umschalter{display:none}
.umbau-bild{min-width:0;margin-top:auto}
.vn-svg{width:100%;height:auto;overflow:visible}
.vn-station{translate:calc((1 - var(--p)) * var(--dx) * 1px) calc((1 - var(--p)) * var(--dy) * 1px)}
.vn-stapel{transform-box:view-box;opacity:clamp(0,1 - var(--p) * 1.6,1);scale:calc(1 - var(--p) * .5)}
.vn-linie{opacity:clamp(0,(var(--p) - .45) * 2.4,1)}
.vn-ruhe{opacity:clamp(0,(var(--p) - .9) * 10,1)}
.vn-hop{opacity:0}
.umbau-buehne.laeuft .vn-hop{animation:vn-hop .8s cubic-bezier(.45,0,.55,1) var(--verz,0s) both}
.umbau-buehne.laeuft .vn-ruhe{animation:erst-am-ende 2.35s steps(1,end) both}
@keyframes vn-hop{
  0%{translate:calc(var(--x0) * 1px) calc(var(--y0) * 1px);opacity:0}
  12%{opacity:1}
  85%{opacity:1}
  100%{translate:calc(var(--x1) * 1px) calc(var(--y1) * 1px);opacity:0}
}
@keyframes erst-am-ende{0%{opacity:0}100%{opacity:1}}
.bilanz{grid-column:9/13;grid-row:2;display:flex;flex-direction:column;gap:var(--fuge-y)}
.bilanz li{flex:1;display:flex;flex-direction:column;justify-content:center;gap:.9rem;padding:clamp(1rem,1.8vw,1.5rem)}
.b-kopf{display:flex;align-items:baseline;gap:.7rem}
.b-zahl{display:inline-block;min-width:1.2ch;font:700 3.25rem/.9 var(--display);letter-spacing:-.04em;font-variant-numeric:lining-nums tabular-nums;color:var(--akzent-text);transition:color .25s}
.b-name{font:700 1.0625rem/1.25 var(--sans)}
.b-text{font-size:.9375rem;line-height:1.45;color:var(--tinte-2)}
.b-vorher,.b-nachher{display:block}
.b-statt{display:inline-block;margin-left:.3rem;padding:.05rem .45rem;border-radius:6px;background:var(--flaeche-2);font-size:.8125rem;font-weight:700;color:var(--tinte-2);white-space:nowrap}
.umbau-buehne[data-zustand="nachher"] .b-vorher{display:none}
.umbau-buehne[data-zustand="vorher"] .b-nachher{display:none}
.umbau-buehne[data-zustand="vorher"] .b-zahl{color:var(--tinte)}

/* ---------- 03 · Mentora: die Bühnenkachel trägt die Vorführung ---------- */
.mentora .schild{grid-column:1/9;grid-row:1}
.m-kachel{grid-column:1/13;grid-row:2;padding:clamp(1.25rem,2.6vw,2.25rem)}
.reiter{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:clamp(1.25rem,2.4vw,1.75rem)}
.reiter [role="tab"]{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.15rem;min-height:56px;padding:.55rem 1.1rem;
  border:1.5px solid var(--linie-2);border-radius:12px;background:var(--flaeche-2);text-align:left;cursor:pointer;box-shadow:0 3px 0 var(--kachel-kante);transition:border-color .18s,background-color .18s,translate .18s}
.reiter [role="tab"]:hover{border-color:var(--tinte-3);translate:0 -1px}
.reiter [role="tab"][aria-selected="true"]{border-color:var(--tinte);box-shadow:0 3px 0 var(--orange)}
.r-name{font:700 1rem/1.2 var(--sans)}
.r-zeile{font:500 .8125rem/1.2 var(--sans);color:var(--tinte-3)}
.reiter [aria-selected="true"] .r-zeile{color:var(--akzent-text)}
.m-buehne{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,3.5vw,3rem);align-items:center}
.m-regal{min-width:0}
.regal{width:100%;height:auto;overflow:visible}
.karte{color:var(--tinte);background:var(--karte);border:1px solid var(--linie);border-radius:14px;box-shadow:0 5px 0 #A2D8C4,var(--schatten);padding:clamp(1.25rem,2.5vw,2rem);display:grid;gap:1.2rem;min-height:26rem;align-content:start;font-size:1.0625rem}
.karte-label{display:flex;align-items:center;font:700 .8125rem/1.3 var(--sans);color:var(--tinte-3);margin-bottom:.35rem}
.karte-label .k-wuerfel{width:1.05em;height:1.18em;margin-right:.4em}
.frage{font:700 clamp(1.1875rem,1.05rem + .5vw,1.4375rem)/1.25 var(--display);letter-spacing:-.015em;color:var(--tinte);padding-bottom:1.1rem;border-bottom:1px solid var(--linie)}
.antwort-text{font-size:1.0625rem;line-height:1.55;color:var(--tinte);min-height:3.1em}
.quelle{display:inline-flex;align-items:center;gap:.5rem;margin-top:.6rem;font:700 .875rem/1.35 var(--sans);color:var(--tinte-2)}
.quelle-marke{width:14px;height:14px;flex:none;background:var(--orange);border:1px solid var(--orange-kante);transform:skewY(-30deg) scaleY(.86)}
.quelle.leer .quelle-marke{background:transparent;border:1.5px dashed var(--tinte-3)}
.quelle.leer{color:var(--tinte-3)}
.suche{display:none;position:absolute;left:0;top:1.6rem;gap:6px;height:1.55em;align-items:center}
.suche span{width:8px;height:8px;background:var(--orange);transform:rotate(45deg) scale(.8);animation:such-punkt 1s ease-in-out infinite}
.suche span:nth-child(2){animation-delay:.15s}.suche span:nth-child(3){animation-delay:.3s}
@keyframes such-punkt{0%,100%{opacity:.25}50%{opacity:1}}
.m-buehne[data-phase="sucht"] .suche{display:flex}
.m-buehne[data-phase="sucht"] .antwort-text,.m-buehne[data-phase="sucht"] .quelle,.m-buehne[data-phase="tippt"] .antwort-text,.m-buehne[data-phase="tippt"] .quelle{visibility:hidden}
.m-buehne[data-phase="tippt"] .fundstelle,.m-buehne[data-phase="sucht"] .fundstelle{opacity:0;visibility:hidden}
.antwort-block{position:relative}
.fundstelle{padding:1rem 1.1rem;background:var(--flaeche-2);border-radius:10px;transition:opacity .3s}
.fund-kopf{font:700 .9375rem/1.35 var(--sans)}
.fund-ort{display:block;font-weight:500;font-size:.8125rem;color:var(--tinte-3)}
.fund-text{margin-top:.6rem;font-size:.9375rem;line-height:1.55;color:var(--tinte-2)}
.fund-text p + p{margin-top:.4rem}
.fund-text strong{color:var(--tinte);font-weight:700}
.fund-text mark{background:var(--akz-hell);color:var(--tinte);padding:.05em .15em;border-radius:2px;box-shadow:inset 0 -2px 0 var(--orange);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.fund-leer li{display:flex;gap:.5rem;align-items:baseline;padding:.15rem 0}
.fund-leer li::before{content:"";width:8px;height:8px;flex:none;border:1.5px solid var(--tinte-3);transform:rotate(45deg) translateY(-2px)}
.m-notiz{margin-top:1.1rem;font:500 .875rem/1.45 var(--sans);color:var(--tinte-3)}
.regal .ordner-raus{opacity:0;transition:translate .7s cubic-bezier(.3,.7,.2,1),opacity .2s}
.regal .seite,.regal .seite-leer{opacity:0;transition:opacity .35s}
.regal .seite-leer polyline{fill:none;stroke:var(--tinte-3);stroke-width:1.5;stroke-dasharray:5 5}
.regal .marke{opacity:0;transform-box:fill-box;transform-origin:0 50%;scale:0 1;transition:scale .6s cubic-bezier(.5,0,.2,1) .25s,opacity .1s .25s}
.m-buehne[data-fall="instand"] .ordner-platz[data-fall="instand"],.m-buehne[data-fall="buch"] .ordner-platz[data-fall="buch"]{opacity:0}
.m-buehne[data-fall="instand"] .ordner-raus[data-fall="instand"],.m-buehne[data-fall="buch"] .ordner-raus[data-fall="buch"]{opacity:1}
.m-buehne[data-fall="instand"]:not([data-phase="tippt"]) .ordner-raus[data-fall="instand"],
.m-buehne[data-fall="buch"]:not([data-phase="tippt"]) .ordner-raus[data-fall="buch"]{translate:calc(var(--dx) * 1px) calc(var(--dy) * 1px)}
.m-buehne[data-phase="fertig"]:not([data-fall="leer"]) .seite{opacity:1}
.m-buehne[data-phase="fertig"][data-fall="instand"] .marke[data-fall="instand"],
.m-buehne[data-phase="fertig"][data-fall="buch"] .marke[data-fall="buch"]{opacity:1;scale:1 1}
.m-buehne[data-phase="fertig"][data-fall="leer"] .seite-leer{opacity:1}
.m-buehne[data-fall="leer"][data-phase="sucht"] .ordner-such{animation:such-heben .55s ease-in-out calc(var(--k) * .28s) both}
@keyframes such-heben{0%,100%{translate:0 0}45%{translate:0 -12px}}

.m-schritte-block{grid-column:1/8;grid-row:3}
.block-titel{font:700 clamp(1.375rem,1.2rem + .6vw,1.75rem)/1.15 var(--display);letter-spacing:-.025em}
.m-schritte{margin-top:1rem;display:grid}
.m-schritte li{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:.9rem;padding:.95rem 0;border-top:1px solid var(--linie)}
.m-schritte li:last-child{padding-bottom:0}
.m-schritte .nr{font:700 1.25rem/1.3 var(--display);font-variant-numeric:lining-nums tabular-nums;color:var(--akzent-text)}
.m-schritte p{margin-top:.25rem;color:var(--tinte-2);font-size:1rem}
.pilot{grid-column:8/13;grid-row:3;display:flex;flex-direction:column;justify-content:center;gap:.85rem}
.pilot .kicker{margin-bottom:0}
.pilot h3{font:700 clamp(1.5rem,1.25rem + .9vw,2rem)/1.12 var(--display);letter-spacing:-.03em}
.pilot > p{color:var(--tinte-2)}
.pilot .aktion{margin-top:.5rem}

/* ---------- 04 · StoreHead: Schild links, Modellkachel rechts, vier Belegkacheln in einer Reihe ---------- */
.storehead .schild{grid-column:1/6;grid-row:1;align-self:center}
.sh-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.25rem;margin-top:.5rem}
.sh-geraete{font:500 .875rem/1.4 var(--sans);color:var(--tinte-3)}
.sh-kachel{grid-column:6/13;grid-row:1;display:flex;flex-direction:column;justify-content:center}

.sh-bild{min-width:0}
.sh-svg{width:100%;height:auto;overflow:visible}
.sh-svg .sh-nr{font-weight:700;font-size:.56px;fill:var(--tinte);font-variant-numeric:lining-nums tabular-nums}
.sh-svg .sh-pfeil{fill:none;stroke:var(--tinte-3);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.sh-schritte{grid-column:1/13;grid-row:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--fuge-y) var(--fuge)}
.sh-schritte li{display:flex;flex-direction:column;gap:.35rem}
.sh-schritte .nr{font:700 1.375rem/1.2 var(--display);font-variant-numeric:lining-nums tabular-nums;color:var(--akzent-text);transition:color .3s ease-out var(--verz,0s)}
.sh-schritte h3{font-size:1.1875rem}
.sh-schritte p{color:var(--tinte-2);font-size:.96875rem;line-height:1.5}
html.js .sh-buehne:not(.laeuft):not(.fertig) .sh-schritte li:not(:first-child) .nr{color:var(--tinte-3)}
html.js .sh-buehne:not(.fertig) .sh-an:not(.sh-an0){opacity:0}
html.js .sh-buehne.laeuft:not(.fertig) .sh-an:not(.sh-an0){animation:sh-an .3s ease-out var(--verz,0s) both}
@keyframes sh-an{from{opacity:0}to{opacity:1}}
.sh-hop{opacity:0}
.sh-buehne.laeuft .sh-hop{animation:sh-hop .8s cubic-bezier(.45,0,.55,1) var(--verz,0s) both}
@keyframes sh-hop{
  0%{translate:calc(var(--x0) * 1px) calc(var(--y0) * 1px);opacity:0}
  12%{opacity:1}
  50%{translate:calc((var(--x0) + var(--x1)) * .5px) calc((var(--y0) + var(--y1)) * .5px - 26px)}
  88%{opacity:1}
  100%{translate:calc(var(--x1) * 1px) calc(var(--y1) * 1px);opacity:0}
}
/* Endzustand: der Würfel liegt auf Beleg 04 (ohne JS sofort, mit JS nach dem letzten Sprung) */
html.js .sh-buehne:not(.fertig) .sh-ruhe{opacity:0}
.sh-buehne.fertig .sh-ruhe{animation:sh-an .25s ease-out both}

/* ---------- 05 · Über uns: Fotokachel über drei Reihen ---------- */
.menschen .schild{grid-column:5/13;grid-row:1}
.portraet{grid-column:1/5;grid-row:1/4;padding:0;overflow:hidden;min-height:420px}
.portraet img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.zitat{grid-column:5/13;grid-row:2}
.zitat p{font:500 clamp(1.25rem,1.05rem + .8vw,1.625rem)/1.35 var(--sans);letter-spacing:-.015em;color:var(--tinte);max-width:34em;text-wrap:pretty}
.zitat footer{margin-top:.75rem;font:700 .9375rem/1.4 var(--sans);color:var(--akzent-text)}
.person{grid-column:5/13;grid-row:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem 1.5rem}
.person dt{font:500 .875rem/1.5 var(--sans);color:var(--tinte-3);margin-bottom:.2rem}
.person dd{font-size:1rem;line-height:1.45}

/* ---------- 06 · Ablauf: breite Modellkachel, darunter je Säule eine Stufenkachel ---------- */
/* Gespiegelt zu StoreHead: Modell links, Schild rechts */
.ablauf .schild{grid-column:8/13;grid-row:1;align-self:center;padding-left:.5rem}
.treppe-kachel{grid-column:1/8;grid-row:1;display:grid;place-items:center;padding:clamp(1rem,2vw,1.5rem) clamp(.5rem,1vw,1rem)}
.treppe{width:100%;height:auto;overflow:visible}
.stufe-nr{font-family:var(--display);font-weight:700;font-size:12px;fill:var(--tinte-2)}
.stufe .stufe-an{opacity:0;transition:opacity .35s}
.stufe.an .stufe-an{opacity:1}
.stufen{grid-column:1/13;grid-row:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--fuge-y) var(--fuge)}
.stufen li{transition:box-shadow .35s,border-color .35s}
.stufen li.ist-an{box-shadow:0 var(--lippe) 0 var(--orange),0 22px 34px -26px rgba(199,110,10,.4)}
.stufen h3{display:grid;gap:.35rem;margin-bottom:.8rem;font:700 clamp(1.25rem,1.1rem + .5vw,1.5rem)/1.15 var(--display);letter-spacing:-.025em}
.stufen .nr{font:700 .9375rem/1 var(--display);font-variant-numeric:lining-nums tabular-nums;color:var(--tinte-3);transition:color .3s}
.stufen li.ist-an .nr{color:var(--akzent-text)}
.stufen dl{display:grid;gap:.1rem;font-size:.9375rem;line-height:1.45}
.stufen dl div{display:contents}
.stufen dt{font:500 .8125rem/1.4 var(--sans);color:var(--tinte-3)}
.stufen dd{color:var(--tinte);margin-bottom:.5rem}
.stufen dd:last-child{margin-bottom:0}

/* ---------- 07 · FAQ ---------- */
.faq .schild{grid-column:1/5;grid-row:1;align-self:start;padding-top:.5rem}
.faq-tel{color:var(--tinte-2);line-height:1.45}
.faq-tel a{font-weight:700;color:var(--tinte);text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:.3em;white-space:nowrap;display:inline-block;padding:.6rem 0}
.faq-liste{grid-column:5/13;grid-row:1;padding-block:.35rem}
.faq-liste details + details{border-top:1px solid var(--linie)}
.faq-liste summary{display:flex;align-items:center;gap:1rem;min-height:4rem;padding:1rem 0;cursor:pointer;list-style:none;font:700 clamp(1.0625rem,1rem + .35vw,1.25rem)/1.3 var(--display);letter-spacing:-.01em;transition:color .18s}
.faq-liste summary::-webkit-details-marker{display:none}
.faq-liste summary:hover{color:var(--akzent-text)}
.faq-marke{position:relative;width:16px;height:18px;flex:none}
.faq-marke::before{content:"";position:absolute;left:1px;top:2px;width:14px;height:14px;border:2px solid var(--tinte);transform:rotate(45deg) scale(.82);transition:background-color .2s,border-color .2s,transform .25s}
details[open] .faq-marke::before{background:var(--orange);border-color:var(--orange-kante);transform:rotate(45deg) scale(.82) translate(-2px,-2px)}
.faq-antwort{padding:0 0 1.3rem calc(16px + 1rem);color:var(--tinte-2);max-width:42em}

/* ---------- 08 · Kontakt: Abschlusskachel, „Ihr System“ dockt an, darunter der direkte Draht ---------- */
.abschluss-text{grid-column:1/8;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:1rem;padding:clamp(1.5rem,3.2vw,2.75rem)}
.abschluss-text h2{font-size:clamp(2rem,1.3rem + 2.2vw,3.25rem)}
.abschluss-text .aktion{margin-top:.6rem}
.ko-kachel{grid-column:8/13;grid-row:1;display:grid;place-items:center}
.ko-svg{width:100%;height:auto;max-height:260px;overflow:visible}
.ko-svg .k-schild{font-weight:700;font-size:17px;fill:var(--tinte)}
.ko-svg .schild-linie{stroke:var(--tinte-3);stroke-width:1.5;vector-effect:non-scaling-stroke}
.ko-platz polyline{fill:none;stroke:var(--tinte-3);stroke-width:1.5;stroke-dasharray:5 5}
.ko-platz{opacity:0;transition:opacity .3s}
.ko-hop{opacity:1;translate:calc(var(--x1) * 1px) calc(var(--y1) * 1px)}
.ko-block{transition:translate .8s cubic-bezier(.3,.7,.2,1.05),opacity .3s}
.ko-neu{transition:opacity .4s .7s}
html.js .ko-kachel:not(.angedockt) .ko-block{translate:46px -40px;opacity:0}
html.js .ko-kachel:not(.angedockt) .ko-neu,html.js .ko-kachel:not(.angedockt) .ko-hop{opacity:0}
html.js .ko-kachel:not(.angedockt) .ko-platz{opacity:1}
.ko-kachel.angedockt .ko-hop{animation:ko-hop 1s cubic-bezier(.45,0,.55,1) 1s both}
@keyframes ko-hop{
  0%{translate:calc(var(--x0) * 1px) calc(var(--y0) * 1px);opacity:0}
  20%{opacity:1}
  100%{translate:calc(var(--x1) * 1px) calc(var(--y1) * 1px);opacity:1}
}
.direkt{grid-column:1/13;grid-row:2;display:grid;grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"person label ort" "person tel mail";align-items:center;gap:.1rem clamp(1.5rem,4vw,3.5rem);padding-block:clamp(1.1rem,2vw,1.5rem)}
.direkt-person{grid-area:person;display:flex;align-items:center;gap:.9rem;color:var(--tinte-2);line-height:1.4;padding-right:clamp(1.5rem,4vw,3.5rem);border-right:1px solid var(--linie)}
.direkt-person img{width:64px;height:64px;border-radius:16px;object-fit:cover;object-position:50% 18%;flex:none;box-shadow:0 3px 0 var(--kachel-kante)}
.direkt-person strong{color:var(--tinte);font-weight:700}
.direkt-label{grid-area:label;align-self:end;font:500 .875rem/1.4 var(--sans);color:var(--tinte-3)}
.direkt-tel{grid-area:tel;align-self:start;display:flex;width:fit-content;align-items:center;min-height:44px;font:700 clamp(1.625rem,1.3rem + 1.2vw,2.25rem)/1.1 var(--display);font-variant-numeric:lining-nums;letter-spacing:-.02em;word-spacing:.18em;text-decoration:none;white-space:nowrap;transition:color .18s}
.direkt-tel:hover{color:var(--akzent-text)}
.direkt-mail{grid-area:mail;justify-self:start;align-self:start;display:inline-flex;align-items:center;min-height:44px;font-weight:700;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:.3em}
.direkt-ort{grid-area:ort;align-self:end;font-size:.9375rem;color:var(--tinte-2)}

/* ---------- Fuß: weiße Fläche über die volle Breite, oben die Verlaufslinie ---------- */
.fuss{color:var(--tinte);background:linear-gradient(90deg,var(--orange),var(--gold) 14%,var(--mint) 30%,var(--linie-2) 62%) top/100% 3px no-repeat,var(--karte);padding:clamp(3rem,6vw,4.5rem) 0 clamp(1.5rem,3vw,2.25rem)}
.fuss-raster{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:2.5rem 3rem}
.fuss address{font-style:normal;margin-top:1.1rem;color:var(--tinte-2);line-height:1.75}
.fuss address a{display:inline;padding:.8rem 0;color:var(--tinte);text-decoration-color:var(--orange);text-underline-offset:.25em}
.fuss-titel{font:700 .9375rem/1.3 var(--display);color:var(--tinte);margin-bottom:.4rem}
.fuss-spalte{display:flex;flex-direction:column;align-items:flex-start}
.fuss-spalte a{display:inline-flex;align-items:center;min-height:44px;color:var(--tinte-2);text-decoration:none}
.fuss-spalte a:hover,.fuss-recht a:hover{color:var(--tinte);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:.25em}
.fuss-unten{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 2rem;border-top:1px solid var(--linie-2);padding-top:1rem;font-size:.875rem;color:var(--tinte-2)}
.fuss-angaben{display:grid;gap:.2rem}
.fuss-recht{display:flex;flex-wrap:wrap;gap:0 .3rem;margin-inline:-.35rem}
.fuss a[aria-current="page"]{color:var(--tinte);text-decoration:underline;text-decoration-color:var(--orange-kante);text-decoration-thickness:2px;text-underline-offset:.25em}
.direkt-mail:hover,.faq-tel a:hover,.fuss address a:hover{text-decoration-color:var(--tinte)}
.brand-mark{transition:transform .2s ease-out}.brand:hover .brand-mark{transform:translateY(-2px)}
.fuss-recht a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding-inline:.35rem;color:var(--tinte-2);text-decoration:none}

/* ---------- Unterseiten: Impressum, Datenschutz, AGB, Offene Punkte ----------
   Titelkachel und Seitenwahl in einer Reihe, darunter der Text als eine breite Kachel. */
/* Kurze Seiten: der Fuß sitzt unten, auch wenn der Inhalt den Bildschirm nicht füllt */
.unterseite-body{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
.unterseite-body > main{flex:1 0 auto}
.recht-titel{grid-column:1/9;grid-row:1;display:flex;flex-direction:column;justify-content:end;padding:clamp(1.5rem,3.2vw,2.75rem)}
.recht-titel h1{font-size:clamp(2.25rem,1.5rem + 2.6vw,3.75rem);line-height:1.02;letter-spacing:-.035em;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.recht-nav{grid-column:9/13;grid-row:1;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.recht-text{grid-column:1/13;grid-row:2;padding:clamp(1.5rem,3.6vw,3.25rem) clamp(1.25rem,3.6vw,3.25rem) clamp(1.75rem,3.6vw,3rem)}
.recht-text > *{max-width:68ch}
.recht-text > h2{font-size:clamp(1.375rem,1.2rem + .7vw,1.75rem);line-height:1.2;letter-spacing:-.015em;margin-top:2.5rem;text-wrap:balance;hyphens:auto}
.recht-text > h2:first-child,.recht-text > .offen-einleitung + h2{margin-top:0}
.recht-text > .offen-einleitung + h2{margin-top:2.25rem}
.recht-text > h3{margin-top:1.75rem;hyphens:auto}
.recht-text > p,.recht-text > ul{margin-top:.8rem;color:var(--tinte-2);text-wrap:pretty}
.recht-text > h2 + p,.recht-text > h3 + p,.recht-text > h2 + ul,.recht-text > h3 + ul{margin-top:.6rem}
.recht-text strong{color:var(--tinte)}
.recht-text > ul{display:grid;gap:.4rem;padding-left:1.35rem;list-style:square}
.recht-text > ul li::marker{color:var(--orange-kante)}
.recht-text a:not(.legal-back){color:var(--tinte);text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:.22em;overflow-wrap:anywhere;transition:text-decoration-color .18s}
.recht-text a:not(.legal-back):hover{text-decoration-color:var(--tinte)}
.legal-meta{font-size:.9375rem;color:var(--tinte-3)}
.legal-back{display:inline-flex;align-items:center;min-height:44px;margin-top:2.25rem;font-weight:700;color:var(--tinte);text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:.32em;transition:text-decoration-color .18s}
.legal-back:hover{text-decoration-color:var(--tinte)}
/* Seitenwahl: die drei Rechtsseiten bzw. der Weg zurück zur Startseite */
.recht-nav-titel{font:700 .9375rem/1.3 var(--sans);color:var(--akzent-text);margin-bottom:.35rem}
.recht-nav a{display:flex;align-items:center;gap:.7rem;min-height:48px;padding-block:.35rem;color:var(--tinte-2);font-weight:700;text-decoration:none;border-bottom:1px solid var(--linie);transition:color .18s}
.recht-nav li:last-child a{border-bottom:0}
.recht-nav a::before{content:"";width:9px;height:9px;flex:none;border-radius:2px;background:var(--linie-2);transform:rotate(45deg);transition:background-color .18s,transform .25s}
.recht-nav a:hover{color:var(--tinte)}
.recht-nav a:hover::before{background:var(--tinte)}
.recht-nav a[aria-current="page"]{color:var(--tinte)}
.recht-nav a[aria-current="page"]::before{background:var(--orange);box-shadow:0 0 0 1px var(--orange-kante)}
/* Offene Punkte: Nummer wie an der Markierung auf der Startseite */
.offen-einleitung{font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.55}
.offen-liste{margin-top:1rem;border-bottom:1px solid var(--linie)}
.offen-liste li{display:grid;grid-template-columns:3.25rem minmax(0,1fr);gap:1rem;padding-block:1.1rem;border-top:1px solid var(--linie)}
.offen-nr{justify-self:start;display:inline-grid;place-items:center;min-width:2.6rem;height:1.6rem;padding:0 .4rem;margin-top:.1rem;border-radius:5px;background:var(--meta);color:#fff;font:700 .8125rem/1 var(--display);font-variant-numeric:lining-nums tabular-nums}
.offen-satz{color:var(--tinte);text-wrap:pretty}
.offen-wo,.offen-frage{margin-top:.35rem;font-size:.9375rem;line-height:1.5;color:var(--tinte-2);text-wrap:pretty}
.offen-wo span,.offen-frage span{font-weight:700;color:var(--tinte)}
.offen-liste li:target{background:linear-gradient(90deg,rgba(180,35,122,.07),transparent 70%)}
@media (max-width:900px){
  .recht-titel,.recht-nav,.recht-text{grid-column:1/-1;grid-row:auto}
  .recht-titel{order:1}
  .recht-text{order:2}
  .recht-nav{order:3}
}
@media (max-width:480px){
  .offen-liste li{grid-template-columns:minmax(0,1fr);gap:.5rem}
}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .nav .nav-tel{display:none}
  .kopf-tel{display:inline-flex}
}
@media (max-width:999px){
  /* Tablet: Steuerpult, Kennzahlen und Pilot rücken in eigene Reihen; das Pult steht über den Leistungen in eigener Höhe */
  .leistungen .schild{grid-column:1/-1}
  .pult-kachel{grid-column:1/-1;grid-row:2;padding:1rem}
  .pult-kachel .pult{position:static;width:100%;height:auto;max-height:560px}
  .dienste{grid-column:1/-1;grid-row:3}
  .umbau .schild,.umbau-kachel{grid-column:1/-1}
  .bilanz{grid-column:1/-1;grid-row:3;flex-direction:row}
  .m-buehne{grid-template-columns:1fr}
  .m-buehne .karte{order:-1}
  .m-regal{max-width:340px;width:100%;justify-self:center}
  .m-schritte-block{grid-column:1/-1}
  .pilot{grid-column:1/-1;grid-row:4}
  .storehead .schild{grid-column:1/-1}
  .sh-kachel{grid-column:1/-1;grid-row:2}
  .sh-schritte{grid-row:3;grid-template-columns:repeat(2,minmax(0,1fr))}
  .menschen .schild{grid-column:6/13}
  .portraet{grid-column:1/6}
  .zitat,.person{grid-column:6/13}
  .person{grid-template-columns:1fr;gap:.6rem}
  .stufen{grid-template-columns:repeat(2,minmax(0,1fr));grid-row:3}
  .ablauf .schild{grid-column:1/-1;padding-left:.25rem}
  .treppe-kachel{grid-column:1/-1;grid-row:2}
  .treppe{max-height:300px}
  .faq .schild{grid-column:1/-1}
  .faq-liste{grid-column:1/-1;grid-row:2}
  .direkt{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"person person" "label label" "tel tel" "mail mail" "ort ort";gap:.2rem}
  .direkt-person{padding:0 0 1rem;margin-bottom:.75rem;border-right:0;border-bottom:1px solid var(--linie)}
  .fuss-raster{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fuss-marke{grid-column:1/-1}
}
@media (max-width:900px){
  :root{--kopf-h:64px}
  .kopf{padding-top:6px;padding-bottom:4px}
  .kopf-innen{height:54px;gap:.6rem;padding:0 .35rem 0 .6rem;box-shadow:0 3px 0 var(--kachel-kante),0 12px 22px -18px rgba(2,14,20,.45)}
  .kopf-strich{display:none}
  .menue-knopf{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0;border:1.5px solid var(--tinte);border-radius:10px;background:transparent;cursor:pointer;order:3}
  .menue-striche,.menue-striche::before,.menue-striche::after{display:block;width:18px;height:2px;background:currentColor;transition:transform .2s ease-out,opacity .2s}
  .menue-striche{position:relative}
  .menue-striche::before,.menue-striche::after{content:"";position:absolute;left:0}
  .menue-striche::before{top:-6px}.menue-striche::after{top:6px}
  .menue-knopf[aria-expanded="true"] .menue-striche{background:transparent}
  .menue-knopf[aria-expanded="true"] .menue-striche::before{transform:translateY(6px) rotate(45deg)}
  .menue-knopf[aria-expanded="true"] .menue-striche::after{transform:translateY(-6px) rotate(-45deg)}
  .kopf-tel{order:2;margin-left:auto}
  .knopf-klein{order:2}
  .nav{position:absolute;top:calc(100% + 8px);left:-1px;right:-1px;display:none;flex-direction:column;align-items:stretch;gap:0;padding:.25rem 1rem .75rem;
    background:var(--flaeche);border:1px solid var(--kachel-rand);border-radius:16px;box-shadow:0 4px 0 var(--kachel-kante),0 18px 30px -18px rgba(2,14,20,.5);max-height:calc(100svh - var(--kopf-h) - 1rem);overflow-y:auto}
  .kopf.offen .nav{display:flex}
  .nav a{padding:1rem .25rem;font-size:1.125rem;border-bottom:1px solid var(--linie);border-radius:0}
  .nav a:last-child{border-bottom:0}
  .nav a::after{display:none}
  .nav a:hover{background:transparent;color:var(--akzent-text)}
  .nav .nav-tel,.nav a.nav-nur-mobil{display:flex}
  .nav .nav-tel{margin:0;color:var(--tinte)}
  .nav-tel-label{display:inline;font-weight:500;font-size:.875rem;color:var(--tinte-3);margin-right:.5rem}
  html:not(.js) .menue-knopf{display:none}
  html:not(.js) .kopf-innen{flex-wrap:wrap;height:auto;min-height:54px}
  html:not(.js) .nav{position:static;display:flex;flex-direction:row;flex-wrap:wrap;flex-basis:100%;order:4;padding:0;border:0;box-shadow:none}
  html:not(.js) .nav a{border-bottom:0;font-size:1rem;padding:.75rem .5rem}
  /* Held: Kacheln übereinander, das Modell bekommt ein festes Seitenverhältnis */
  .held-text,.held-modell{grid-column:1/-1}
  .held-modell{min-height:0;aspect-ratio:1.32}
  /* WebKit: Kacheln mit Seitenverhältnis und nur absolutem Inhalt fallen sonst auf 2 px zusammen */
  .held-modell,.portraet{justify-self:stretch;width:100%}
  .abschluss-text,.ko-kachel{grid-column:1/-1}
  .ko-kachel{grid-row:2}
  .direkt{grid-row:3}
}
@media (max-width:700px){
  /* Handy: alle Kacheln stapeln sich; die Würfel laufen senkrecht über die Fugen */
  :root{--fuge:16px;--fuge-y:28px;--r-kachel:16px;--abstand:3.25rem}
  .raster{grid-template-columns:minmax(0,1fr)}
  .raster > *{grid-column:1/-1!important;grid-row:auto!important}
  .held-modell{aspect-ratio:1.25}
  .modell .k-name{font-size:26px}
  .dienste{grid-template-columns:1fr}
  .bilanz{flex-direction:column}
  .bilanz li{display:grid;grid-template-columns:3.6rem minmax(0,1fr);align-items:center;column-gap:.9rem}
  .b-kopf{display:contents}
  .b-zahl{grid-row:1/3;font-size:2.75rem;text-align:center}
  .b-name{align-self:end}
  .b-text{align-self:start}
  .umbau-bild{margin-inline:calc(-1 * var(--pad) + 4px)}
  .vn-svg .k-name{font-size:21px}
  .vn-svg .k-notiz{font-size:24px}
  .reiter{flex-direction:column}
  .reiter [role="tab"]{width:100%;flex-direction:row;justify-content:space-between;align-items:center;gap:1rem}
  .karte{min-height:0}
  .portraet{min-height:0;aspect-ratio:1/1}
  .stufe-nr{display:none}
  .stufen{grid-template-columns:1fr}
  .treppe-kachel{padding-block:.5rem}
  .stufen dt,.r-zeile,.fund-ort{font-size:.875rem}
  .fuss-raster{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .knopf-klein .lang{display:none}
}
@media (max-width:480px){
  h2{font-size:clamp(1.75rem,8.4vw,2.125rem)}
  .abschluss-text h2{font-size:clamp(1.875rem,8.8vw,2.25rem)}
  .held-text{padding:1.35rem 1.15rem 1.5rem}
  .held h1{font-size:clamp(1.75rem,10.2cqi,2.75rem)}
  .direkt-tel{font-size:clamp(1.5rem,8.6vw,2rem)}
  .sh-schritte{grid-template-columns:1fr}
}
@media (max-width:440px){
  .kopf{padding-left:6px;padding-right:6px}
  .kopf-innen{gap:.3rem;padding:0 .3rem 0 .5rem}
  .brand{gap:.4rem}
  .brand-mark{width:2rem;height:2rem}
  .brand-text{font-size:1.0625rem}
  .knopf-klein{padding:.5rem .65rem;font-size:.875rem}
}
@media (max-width:400px){
  .fuss-raster{grid-template-columns:1fr}
}
@media (max-width:370px){
  .brand-text{display:none}
  .fuss .brand-text{display:inline-flex}
}

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;transition-delay:0s!important;animation-duration:0s!important;animation-delay:0s!important;animation-iteration-count:1!important}
  .lauf{display:none!important}
  .ruhe{opacity:1!important}
  .suche span{animation:none;opacity:1}
  .fw{display:none}
}

/* ---------- Kontakt: Mail und WhatsApp nebeneinander in der Kachel „direkter Draht“ ---------- */
.direkt-kanaele{grid-area:mail;justify-self:start;align-self:start;display:flex;flex-wrap:wrap;gap:0 1.5rem}

/* ---------- Kontaktseite: Titelkachel über die volle Breite, darunter die drei Wege ---------- */
.kontakt-titel{grid-column:1/-1;grid-row:1}
.kontakt-titel .lead{margin-top:1rem}
.kontakt .kanaele{grid-column:1/-1;grid-row:2}
@media (max-width:999px){.recht-titel.kontakt-titel{order:0}}
/* ---------- Kontaktseite: drei Wege wie auf der bisherigen Website (E-Mail, WhatsApp, Telefon) ---------- */
.kanaele{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--fuge-y) var(--fuge)}
.kanal{display:flex;flex-direction:column;align-items:center;gap:.7rem;padding:1.75rem 1.4rem;text-align:center;color:var(--tinte);text-decoration:none;
  transition:transform .3s ease-out,box-shadow .3s ease-out}
.kanal:hover{transform:translateY(-6px)}
.kanal-symbol{display:grid;place-items:center;width:60px;height:60px;border-radius:16px;color:var(--petrol);
  background:linear-gradient(135deg,rgba(255,158,44,.16),rgba(255,201,60,.14) 45%,rgba(52,201,163,.2))}
.kanal-name{font:700 1.0625rem/1.3 var(--display)}
.kanal-text{font-size:.9375rem;line-height:1.45;color:var(--tinte-2)}
/* Schmal: eine Spalte, Symbol links und Text rechts (statt 2 + 1 mit einer verwaisten Karte) */
@media (max-width:760px){
  .kanaele{grid-template-columns:minmax(0,1fr)}
  .kanal{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:1rem;row-gap:.1rem;padding:1rem 1.25rem;text-align:left}
  .kanal-symbol{grid-row:1/3;width:52px;height:52px}
  .kanal-name{align-self:end}
  .kanal-text{align-self:start}
}
@media (prefers-reduced-motion:reduce){.kanal{transition:none}.kanal:hover{transform:none}}


/* LinkedIn im Fuß mit dem Symbol der bisherigen Seite */
.fuss-linkedin svg{display:inline-block;vertical-align:-2px;margin-right:.45rem}

/* ---------- as-digicon 2026: Kopf mit zwei gleich großen Knöpfen Anrufen und Schreiben ---------- */
.kopf-knoepfe{display:flex;align-items:center;gap:.5rem;margin-left:auto;flex:none}
.kopf-knoepfe .knopf-klein{justify-content:center;min-width:7.5rem}
.knopf-klein.knopf-zwei{box-shadow:inset 0 0 0 2px var(--tinte),0 3px 0 var(--tinte)}
.knopf-klein.knopf-zwei:hover{box-shadow:inset 0 0 0 2px var(--tinte),0 4px 0 var(--tinte)}
.nav .nav-tel{display:none}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.fuss-raster{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr))}
@media (max-width:1180px){.fuss-raster{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){
  .kopf-knoepfe{order:2}
  .nav .nav-tel{display:flex}
}
@media (max-width:700px){.fuss-raster{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.kopf-knoepfe .knopf-klein{min-width:0}}
@media (max-width:400px){.fuss-raster{grid-template-columns:1fr}}

/* ---------- as-digicon 2026: Startseite ---------- */
/* Vertrauensleiste unter dem Einstieg */
.vertrauen{padding-top:calc(var(--abstand) * .5)}
.vertrauen-liste{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem 2rem;margin:0;padding:1rem 1.25rem;list-style:none;
  border:1px solid var(--kachel-rand);border-radius:16px;background:var(--flaeche);box-shadow:0 3px 0 var(--kachel-kante)}
.vertrauen-liste li{display:inline-flex;align-items:center;gap:.5rem;font:700 .9375rem/1.3 var(--sans);color:var(--tinte)}
.vertrauen-liste .k-wuerfel{width:14px;height:16px;flex:none}
/* Zwei Einsatzarten (statt Pilot) */
.einsatz h3{font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem)}
.einsatz h3 + p{margin-top:-.35rem}
/* Fünf Leistungen: die fünfte Kachel über die ganze Breite */
.dienste > .dienst:nth-child(5){grid-column:1/-1}
/* Ablauf: Text statt Zeiten */
.stufe-text{color:var(--tinte-2);font-size:.96875rem;line-height:1.5}
/* Aus unserer Werkstatt: kleine Kachel */
.werkstatt .schild{grid-column:1/9;grid-row:1}
.werkstatt .aktion{margin-top:.25rem}
/* Knopf "Adresse kopieren" sieht aus wie ein Link */
button.direkt-mail{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--tinte);cursor:pointer;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:.3em}
@media (max-width:900px){.werkstatt .schild{grid-column:1/-1}}

/* ---------- as-digicon 2026: Seite KI-Assistent ---------- */
.held-voll{grid-column:1/-1}
.held-voll .lead{max-width:44em}
.merkmale .schild{grid-column:1/9;grid-row:1}
.merkmal-liste{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--fuge-y) var(--fuge);margin:0;padding:0;list-style:none}
.merkmal-liste.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.merkmal-liste li{display:flex;flex-direction:column;gap:.5rem}
.merkmal-liste .nr{font:700 .9375rem/1 var(--display);font-variant-numeric:lining-nums tabular-nums;color:var(--akzent-text)}
.merkmal-liste h3{font:700 clamp(1.125rem,1rem + .4vw,1.3125rem)/1.2 var(--display);letter-spacing:-.02em}
.merkmal-liste p{color:var(--tinte-2);font-size:.96875rem;line-height:1.5}
.erleben-text{grid-column:1/-1}
@media (max-width:1180px){.merkmal-liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.merkmale .schild{grid-column:1/-1}.merkmal-liste.drei{grid-template-columns:1fr}}
@media (max-width:600px){.merkmal-liste{grid-template-columns:1fr}}

/* ---------- as-digicon 2026: Kontaktseite ---------- */
.kanaele.zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
.formular-kachel{grid-column:1/-1;grid-row:3;padding:clamp(1.5rem,3.2vw,2.75rem)}
.formular-kachel h2{font-size:clamp(1.5rem,1.25rem + .9vw,2rem)}
.formular-thema{margin-top:.5rem;font:700 .9375rem/1.4 var(--sans);color:var(--akzent-text)}
.formular{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem 1.25rem;margin-top:1.25rem}
.feldgruppe{display:flex;flex-direction:column;gap:.35rem}
.feldgruppe.breit,.formular-fuss.breit{grid-column:1/-1}
.feldgruppe label{font:700 .9375rem/1.3 var(--sans);color:var(--tinte)}
.feldgruppe .optional{font-weight:500;color:var(--tinte-3)}
.feldgruppe input,.feldgruppe textarea{width:100%;min-height:48px;padding:.7rem .85rem;border:1.5px solid var(--linie-2);border-radius:10px;background:var(--flaeche);font:inherit;color:var(--tinte)}
.feldgruppe textarea{resize:vertical;min-height:9rem}
.feldgruppe input:focus-visible,.feldgruppe textarea:focus-visible{outline:2px solid var(--orange);outline-offset:1px;border-color:var(--tinte)}
.formular-fuss{display:grid;gap:.75rem;justify-items:start;margin-top:.25rem}
.formular-fuss .knopf{border:0;cursor:pointer;font:inherit;font-weight:700}
.formular-hinweis{font-size:.9375rem;line-height:1.5;color:var(--tinte-2)}
.formular-hinweis a{color:var(--tinte);text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:.22em}
@media (max-width:760px){.kanaele.zwei{grid-template-columns:minmax(0,1fr)}.formular{grid-template-columns:1fr}}
@media (max-width:700px){.dienste > .dienst:nth-child(5){grid-column:auto}}

/* ---------- as-digicon 2026: Rechtsseiten (Schritt 5) ---------- */
.recht-text > ol{margin-top:.8rem;padding-left:1.5rem;list-style:decimal;display:grid;gap:.4rem;color:var(--tinte-2)}
.recht-text > ol li::marker{color:var(--akzent-text);font-weight:700}
.recht-text > hr{border:0;border-top:1px solid var(--linie);margin:2.5rem 0 0}
.recht-text > h2 + h3{margin-top:1.25rem}
/* Widerspruchsrecht (Art. 21 Abs. 4 DSGVO): deutlich abgesetzt */
.recht-kasten{margin-top:1.5rem;padding:1.1rem 1.25rem;border-left:4px solid var(--orange);border-radius:0 12px 12px 0;background:var(--flaeche-2)}
.recht-kasten p{color:var(--tinte)}
/* Tabellen: auf schmalen Bildschirmen seitlich verschiebbar */
.recht-tabelle{margin-top:1rem;overflow-x:auto}
.recht-text > .recht-tabelle{max-width:100%}
.recht-tabelle table{width:100%;min-width:34rem;border-collapse:collapse;font-size:.9375rem;line-height:1.45}
.recht-tabelle th,.recht-tabelle td{padding:.6rem .75rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--linie)}
.recht-tabelle th{font-weight:700;color:var(--tinte);border-bottom:2px solid var(--linie-2)}
.recht-tabelle td{color:var(--tinte-2)}
/* Formular der Meldestelle */
.meldeformular{margin-top:1.5rem;padding:clamp(1.25rem,2.6vw,2rem);border:1px solid var(--kachel-rand);border-radius:16px;background:var(--flaeche-2)}
.recht-text > .meldeformular{max-width:none}
.meldeformular .formular{grid-template-columns:repeat(2,minmax(0,1fr))}
.feldgruppe.ankreuzen{flex-direction:row;align-items:flex-start;gap:.75rem}
.feldgruppe.ankreuzen input{width:1.35rem;height:1.35rem;min-height:0;margin-top:.15rem;flex:none;accent-color:var(--petrol)}
.feldgruppe.ankreuzen label{font-weight:500;line-height:1.45}
@media (max-width:760px){.meldeformular .formular{grid-template-columns:1fr}}
.recht-text a[href^="tel:"]{white-space:nowrap}
.recht-titel h1.titel-lang{font-size:clamp(1.875rem,1.3rem + 1.8vw,2.75rem);line-height:1.08}