/* assets/css/content-9d79279399e0.css */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--bg:#090D18;
--surface:#10172A;
--surface-up:#1A2438;
--accent:#00C9A7;
--accent-dim:rgba(0,201,167,0.12);
--accent-glow:rgba(0,201,167,0.06);
--text-1:#F0F5FF;
--text-2:#7F90B0;
--text-3:#7089A8;
--border:#1E2D3D;
--border-accent:rgba(0,201,167,0.3);
--font-display:'Space Grotesk',sans-serif;
--font-body:'Inter',sans-serif;
--font-mono:'JetBrains Mono',monospace;
--radius:14px;
--container:1160px;
--gap:clamp(48px,8vw,96px);
/* Gemeinsames Bewegungsvokabular: kraeftigere Kurven statt der schwachen CSS-Standards. */
--ease-out:cubic-bezier(.23,1,.32,1);
--ease-in-out:cubic-bezier(.77,0,.175,1);
}
html{font-size:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;scroll-padding-top:88px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--bg);color:var(--text-1);font-family:var(--font-body);font-size:1rem;line-height:1.7;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{max-width:var(--container);margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.section{padding:var(--gap) 0}
.mono{font-family:var(--font-mono);font-size:0.6875rem;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent-text)}
/* Scroll-gekoppelte Lesbarkeit: nur an ausgewaehlten Stellen (AI Act, Prozess, Preise),
nicht ueberall. Ohne JS/IntersectionObserver bleibt der Inhalt voll sichtbar (siehe
.js-Gate). --fokus kommt von IntersectionObserver-Ratio, kein Scroll-Handler. */
.scroll-fokus{opacity:1}
.js .scroll-fokus{opacity:calc(.64 + var(--fokus,.36) * .36);filter:brightness(calc(.8 + var(--fokus,.36) * .2));transition:opacity .25s linear,filter .25s linear}
/* Zwei bewusste Uebergangsmomente (Hero->Inhalt, AI Act->Netzwerk) statt vieler
kleiner: eine Grenzlinie zieht sich einmalig ueber die volle Breite, sobald der
Abschnitt erreicht wird, und bleibt danach als ruhiger Akzent stehen. */
.boundary-draw{position:relative}
.boundary-draw::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent) 15%,var(--accent) 85%,transparent);transform:scaleX(0);transform-origin:center;opacity:0;pointer-events:none}
.js .boundary-draw::before{transition:transform 1.1s var(--ease-in-out),opacity .4s ease}
.boundary-draw.gezogen::before{transform:scaleX(1);opacity:.6}
.tag{display:inline-flex;align-items:center;gap:6px;background:var(--accent-dim);border:1px solid var(--border-accent);border-radius:100px;padding:5px 14px;font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent-text);margin-bottom:28px;overflow-wrap:break-word}
.tag::before{content:"";display:block;width:6px;height:6px;border-radius:50%;background:var(--accent)}
h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:700;line-height:1.1;color:var(--text-1)}
.display{font-size:clamp(3.25rem,7.5vw,6rem);line-height:1.0;font-weight:700;letter-spacing:-0.02em;overflow-wrap:break-word}
.display em{font-style:normal;color:var(--accent-text)}
.section-heading{font-size:clamp(2.75rem,6.2vw,4.75rem);line-height:1.04;letter-spacing:-0.025em;overflow-wrap:break-word;max-width:100%}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:100px;font-family:var(--font-display);font-size:0.9375rem;font-weight:600;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .16s var(--ease-out);border:none}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-hell);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--text-1);border:1px solid var(--border);padding:13px 28px}
.btn-outline:hover{border-color:var(--accent-text);color:var(--accent-text)}
/* Druckgefuehl: minimale, sofort einsetzende Stauchung bestaetigt den Klick. */
.btn:active{transform:scale(.97)}
.btn svg,.btn-arrow{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .2s}
.btn-primary:hover .btn-arrow{transform:translateX(3px)}
hr.divider{border:none;border-top:1px solid var(--border);margin:0}
/* ===== NAV ===== */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:0 clamp(20px,4vw,48px);transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
nav.scrolled{background:rgba(var(--grund-rgb),0.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:var(--border)}
.nav-inner{max-width:var(--container);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:clamp(10px,2vw,28px);height:72px}
/* Fortschrittslinie: spiegelt die tatsaechliche Scrollposition, keine Deko-Animation.
transform statt width, damit nur Compositing noetig ist (kein Layout/Paint pro Frame). */
.nav-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent;pointer-events:none}
.nav-progress span{display:block;height:100%;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform .1s linear}
.js .nav-progress span{transition:transform .1s linear}
/* min-height 44px: Touch-Zielgroesse. Ohne visuelle Wirkung, da die Leiste 72px hoch ist
und den Inhalt zentriert; Markup und Verhalten der Navigation bleiben unberuehrt. */
.logo{display:flex;flex:0 0 auto;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:1.0625rem;letter-spacing:-0.01em;color:var(--text-1);min-height:44px}
.logo-mark{width:34px;height:34px;background:var(--accent);border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--accent-ink);letter-spacing:0}
/* Das offizielle Logo ist eine gestapelte Marke (Zeichen, Schriftzug, Claim).
Deshalb steuert immer die HOEHE die Groesse, die Breite folgt dem Original -
dadurch bleiben die Proportionen in jedem Bereich exakt erhalten und nichts
wird beschnitten. Der Schriftzug steht im Bild selbst; daneben steht kein
zweiter. */
.logo-img{display:block;flex:0 0 auto;height:62px;width:auto;max-width:100%;object-fit:contain;
transition:opacity .25s var(--ease-out),filter .25s var(--ease-out)}
a.logo:hover .logo-img{opacity:.92;filter:drop-shadow(0 0 14px rgba(0,201,167,.3))}
@media(max-width:1199.98px){.logo-img{height:56px}}
@media(max-width:1023.98px){.logo-img{height:54px}}
@media(max-width:560px){.logo-img{height:46px}}
@media(max-width:400px){.logo-img{height:42px}}
@media (prefers-reduced-motion: reduce){.logo-img{transition:none}}
.nav-links{display:flex;align-items:center;gap:36px;list-style:none}
/* min-height 44px: die Desktop-Navigation erscheint ab 1024px und damit auch auf iPads
im Querformat, also auf reinen Touch-Geraeten. Ohne visuelle Wirkung in der 72px-Leiste. */
.nav-links a{position:relative;font-size:0.875rem;font-weight:500;color:var(--text-2);transition:color .2s;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
.nav-links a::after{content:"";position:absolute;left:8px;right:8px;bottom:20px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform .25s var(--ease-out,cubic-bezier(.23,1,.32,1))}
.nav-links a:hover{color:var(--text-1)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{display:flex;align-items:center;gap:16px}
/* ===== KONTAKT-AUFKLAPPMENUE IN DER NAVIGATION =====
Der Menuepunkt "Kontakt" ist kein Sprunglink mehr, sondern ein Schalter: er
klappt drei Wege auf - Telefon, E-Mail, Standort. Bildsprache bewusst die des
Cookie-Dialogs (derselbe Verlauf, derselbe Akzentrahmen, dieselbe weiche
Tiefe), damit die Seite nur eine Sprache fuer aufgehende Flaechen spricht.
Der Weg zum Formular bleibt erhalten: er steht als Fusszeile im Feld. Ohne
ihn waere die Kontaktsektion aus der Navigation nicht mehr erreichbar. */
.nav-kontakt{position:relative}
.nav-kontakt-schalter{cursor:pointer}
.nav-kontakt.ist-offen .nav-kontakt-pfeil{transform:rotate(90deg)}
.nav-kontakt.ist-offen .nav-kontakt-schalter .btn-arrow{transform:rotate(90deg)}
/* Das Feld haengt am Menuepunkt, nicht am Fenster: so wandert es beim
Umbrechen der Navigation automatisch mit. translateX(-50%) zentriert es
unter dem Schalter, die Randsicherung weiter unten faengt den Fall ab,
dass es dabei aus dem Bild laeuft. */
.nav-kontakt-feld{position:absolute;top:calc(100% + 12px);right:0;z-index:60;
width:min(420px,calc(100vw - 32px));
background:linear-gradient(165deg,rgba(var(--hoch-rgb),.94) 0%,rgba(var(--grund-rgb),.97) 100%);
border:1px solid var(--border-accent);border-radius:18px;padding:20px;
box-shadow:0 40px 90px -24px rgba(var(--schatten-rgb),.65),0 0 0 1px rgba(var(--waesche-rgb),.03),0 0 70px -18px var(--accent-glow);
-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
opacity:0;transform:translateY(-8px) scale(.98);
transition:opacity .28s var(--ease-out),transform .28s var(--ease-out);
pointer-events:none}
.nav-kontakt-feld[hidden]{display:none}
.nav-kontakt.ist-offen .nav-kontakt-feld{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.nav-kontakt-titel{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--accent-text);text-align:center;margin-bottom:14px}
/* Drei Kreise statt Kacheln, links E-Mail, mittig der Rueckruf, rechts der
Standort. Der mittlere ist groesser: er traegt den Weg, der am ehesten zum
Gespraech fuehrt, und die Groesse sagt das ohne ein Wort.
align-items:center laesst die beiden kleinen auf der Mittelachse des grossen
sitzen, sonst haengen sie oben. */
.nav-kontakt-kreise{display:flex;align-items:center;justify-content:center;gap:clamp(14px,4vw,26px)}
.nav-kontakt-kreis{display:flex;flex-direction:column;align-items:center;gap:9px;
text-align:center;min-width:0}
.nav-kontakt-rund{--rund:58px;width:var(--rund);height:var(--rund);border-radius:50%;
display:grid;place-items:center;flex-shrink:0;
border:1px solid var(--border-accent);background:var(--accent-dim);color:var(--accent-text);
transition:background .25s var(--ease-out),color .25s var(--ease-out),
border-color .25s var(--ease-out),transform .25s var(--ease-out),
box-shadow .3s var(--ease-out)}
.nav-kontakt-rund svg{width:calc(var(--rund) * .38);height:calc(var(--rund) * .38);
stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* Der mittlere Kreis ist die Hauptsache: groesser, kraeftigerer Rahmen und eine
ruhige Tiefe darunter - kein Leuchten, nur Abstand zur Flaeche. */
.nav-kontakt-kreis.ist-gross .nav-kontakt-rund{--rund:78px;border-color:var(--accent-text);
background:rgba(0,201,167,.18);box-shadow:0 12px 28px -14px rgba(0,201,167,.75)}
.nav-kontakt-kreis:hover .nav-kontakt-rund{background:var(--accent);color:var(--accent-ink);
border-color:var(--accent-text);transform:translateY(-3px)}
.nav-kontakt-kreis:focus-visible{outline:none}
.nav-kontakt-kreis:focus-visible .nav-kontakt-rund{outline:2px solid var(--accent);outline-offset:4px}
.nav-kontakt-art{font-family:var(--font-display);font-size:.75rem;font-weight:600;
color:var(--text-2);line-height:1.2;transition:color .25s}
.nav-kontakt-kreis:hover .nav-kontakt-art{color:var(--text-1)}
.nav-kontakt-kreis.ist-gross .nav-kontakt-art{font-size:.8125rem;color:var(--text-1)}
/* Die Verbindungslinie vom Knopf herunter: sie macht sichtbar, dass die Kreise
zu ihm gehoeren und nicht frei ueber dem Inhalt schweben. Nur in der
Navigation, im Overlay-Menue stehen die Kreise ohnehin direkt darunter. */
.nav-kontakt-feld::before{content:"";position:absolute;top:-12px;right:96px;
width:1px;height:12px;background:linear-gradient(180deg,transparent,var(--border-accent))}
/* Unter 640px blendet die Leiste den Knopf aus (bestehende Regel), damit fehlt
auch der Schalter - dort uebernimmt das Overlay-Menue mit den offenen Kacheln. */
/* In der Mobil-Navigation gibt es keinen Schalter: dort stehen die drei Wege
offen unter der Liste. Ein Aufklappmenue in einem bereits aufgeklappten
Overlay waere eine Ebene zu viel, und Platz ist dort ohnehin vorhanden. */
.mobile-kontakt{margin-top:18px}
.mobile-kontakt .nav-kontakt-titel{text-align:left;margin-bottom:10px}
.mobile-kontakt .nav-kontakt-wege{gap:8px}
.mobile-kontakt .nav-kontakt-weg{padding:14px 8px}
@media(max-width:360px){
.mobile-kontakt .nav-kontakt-art{font-size:.75rem}
.mobile-kontakt .nav-kontakt-wert{font-size:.625rem}
}
/* ===== SICHTBARER EINSTIEG IN DEN INTERNEN BEREICH =====
Bewusst als zurueckhaltender Ghost-Link neben dem Haupt-CTA: er ist ein
Verwaltungsweg, kein Angebot an Besucherinnen und Besucher, und darf dem
"Gespraech vereinbaren" optisch nie Konkurrenz machen. */
.nav-intern-link{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 15px;border-radius:100px;border:1px solid var(--border);background:transparent;font-family:var(--font-display);font-size:.8125rem;font-weight:600;color:var(--text-2);white-space:nowrap;transition:border-color .2s,color .2s,background-color .2s}
.nav-intern-link:hover{border-color:var(--border-accent);color:var(--accent-text);background:var(--accent-dim)}
.nav-intern-icon{width:14px;height:14px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.6}
/* Zwei Symbole liegen im Markup, sichtbar ist immer genau eines. Das erspart
das Zusammenbauen von SVG im Skript. */
.nav-intern-person{display:none}
.ist-angemeldet .nav-intern-schloss{display:none}
.ist-angemeldet .nav-intern-person{display:block}
.nav-intern-link.ist-angemeldet{border-color:var(--border-accent);color:var(--accent-text)}
/* Offener Passwortwechsel: auffaellig genug, um erledigt zu werden, ohne die
Leiste zu dominieren. */
.nav-intern-link.ist-wechsel{border-color:rgba(var(--warn-rgb),.45);color:var(--warn)}
.nav-intern-link.ist-wechsel:hover{border-color:var(--warn);color:var(--warn);background:rgba(var(--warn-rgb),.1)}
@media(max-width:1023.98px){.nav-intern-link{display:none}}
/* Zwischen 1024 und 1200 Pixeln wird die Leiste eng. Dort bleibt nur das
Symbol stehen; der zugaengliche Name kommt weiterhin aus aria-label. */
@media(min-width:1024px) and (max-width:1199.98px){
.nav-intern-link{padding:0 12px;gap:0}
.nav-intern-link .nav-intern-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* ===== INTERNE ZIELE IM MOBILEN MENUE =====
Abgesetzt unter der oeffentlichen Navigation, damit klar bleibt: das ist
Verwaltung, kein Teil des Angebots. */
.mobile-nav-intern{margin-top:22px;padding-top:20px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:4px}
.mobile-intern-link{display:flex;align-items:center;gap:11px;min-height:52px;padding:8px 2px;font-family:var(--font-display);font-size:1rem;font-weight:600;color:var(--text-2);transition:color .2s,padding-left .2s}
.mobile-intern-link:hover{color:var(--accent-text);padding-left:8px}
.mobile-intern-link .nav-intern-icon{width:16px;height:16px}
.mobile-intern-link.ist-angemeldet{color:var(--accent-text)}
.mobile-intern-link.ist-wechsel{color:var(--warn)}
.mobile-intern-marke{margin-left:auto;font-family:var(--font-mono);font-size:.5625rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);background:var(--accent-dim);border:1px solid var(--border-accent);border-radius:100px;padding:2px 8px;line-height:1.6}
/* Interner Menuepunkt "Tarifrechner". Er steht nur im Markup, wenn der Server
die Sitzung als Rolle "admin" bestaetigt hat, und wird ans Listenende
gehaengt - so verschiebt sich beim Einfuegen kein vorhandener Punkt.
Die Kennzeichnung "intern" macht auf einen Blick klar, dass dieser Punkt
nicht zur oeffentlichen Navigation gehoert. */
.nav-intern{gap:8px}
.nav-intern-marke{font-family:var(--font-mono);font-size:.5625rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);background:var(--accent-dim);border:1px solid var(--border-accent);border-radius:100px;padding:2px 7px;line-height:1.5}
.mobile-nav-list .nav-intern{justify-content:flex-start;gap:12px}
.mobile-nav-list .nav-intern-marke{font-size:.625rem}
/* Mit dem zusaetzlichen Punkt wird die Leiste zwischen 1024 und 1200 Pixeln
zu eng und Logo, Menue und Schaltflaeche wuerden umbrechen. Der engere
Abstand faengt das auf. Die Klasse setzt das Skript nur dann, wenn der
Punkt tatsaechlich eingefuegt wurde - fuer alle anderen bleibt die Leiste
unveraendert. */
/* Im angemeldeten Admin-Zustand traegt die Leiste zwei zusaetzliche Elemente:
den Punkt "Tarifrechner" im Menue und den Einstieg "Konto" neben dem CTA.
Zusammen sprengen sie die Zeile, deshalb wird sie dann enger gefuehrt.
Ohne interne Punkte bleibt die Navigation unveraendert - die Klasse setzt
das Skript nur, wenn es den Tarifrechner tatsaechlich eingefuegt hat. */
@media(min-width:1024px){
.nav-links.hat-intern{gap:26px}
.nav-links.hat-intern a{min-width:0}
}
@media(min-width:1024px) and (max-width:1399.98px){
/* Ab hier reicht der Platz nicht mehr fuer die Kennzeichnung am
Tarifrechner. Sie entfaellt; im mobilen Menue steht sie unveraendert,
und der Kontext "intern" ist durch den Konto-Einstieg ohnehin gesetzt. */
.nav-links.hat-intern .nav-intern-marke{display:none}
}
@media(min-width:1024px) and (max-width:1199.98px){
/* Engster Punkt der Desktopleiste. 16px reichen aus, damit Logo und CTA
einzeilig bleiben - die Schriftgroesse der Menuepunkte bleibt dabei
unveraendert, gekuerzt wird nur der Abstand. */
.nav-links.hat-intern{gap:16px}
/* Zusaetzlich etwas Aussenrand zurueckgewinnen, damit die Leiste nicht nur
technisch passt, sondern auch atmet. Faellt :has() aus, bleibt schlicht
der bisherige Rand - umbrechen wuerde die Leiste auch dann nicht. */
nav:has(.nav-links.hat-intern){padding-left:24px;padding-right:24px}
}
@media(min-width:1024px) and (max-width:1120px){.nav-links{gap:20px}}
@media(max-width:1023.98px){.nav-links{display:none}}
/* ===== MOBILE NAV (Overlay, < 1024px) ===== */
.nav-toggle{display:none;width:48px;height:48px;align-items:center;justify-content:center;flex-shrink:0;background:transparent;border:1px solid var(--border);border-radius:12px;color:var(--text-1);cursor:pointer;padding:0;appearance:none;-webkit-appearance:none;font:inherit;transition:border-color .2s,color .2s}
.nav-toggle:hover{border-color:var(--accent-text);color:var(--accent-text)}
.nav-toggle-box{position:relative;display:block;width:20px;height:14px}
.nav-toggle-bar{position:absolute;left:0;width:100%;height:2px;background:currentColor;border-radius:2px}
.nav-toggle-bar:nth-child(1){top:0}
.nav-toggle-bar:nth-child(2){top:6px}
.nav-toggle-bar:nth-child(3){top:12px}
.nav-toggle[aria-expanded="true"]{border-color:var(--accent-text);color:var(--accent-text)}
.mobile-nav-close{border-color:var(--border-accent);color:var(--accent-text)}
.mobile-nav-close .nav-toggle-bar:nth-child(1){top:6px;transform:rotate(45deg)}
.mobile-nav-close .nav-toggle-bar:nth-child(2){opacity:0}
.mobile-nav-close .nav-toggle-bar:nth-child(3){top:6px;transform:rotate(-45deg)}
.mobile-nav{position:fixed;inset:0;z-index:150;background:var(--bg);display:none;opacity:0;pointer-events:none;transition:opacity .28s ease;overflow-y:auto;overscroll-behavior:contain;padding-top:calc(16px + env(safe-area-inset-top,0px));padding-bottom:calc(40px + env(safe-area-inset-bottom,0px));padding-left:calc(clamp(20px,4vw,48px) + env(safe-area-inset-left,0px));padding-right:calc(clamp(20px,4vw,48px) + env(safe-area-inset-right,0px))}
.mobile-nav.is-visible{display:block}
.mobile-nav.is-open{opacity:1;pointer-events:auto}
.mobile-nav-top{display:flex;justify-content:flex-end;align-items:center;height:56px}
/* position/border zuruecksetzen: die globale nav{position:fixed}-Regel gilt sonst auch hier */
.mobile-nav-inner{position:static;border-bottom:none;width:100%;max-width:520px;margin:0 auto;display:flex;flex-direction:column;justify-content:center;min-height:calc(100% - 56px);padding:24px 0}
.mobile-nav-list{list-style:none;display:flex;flex-direction:column;margin-bottom:32px}
.mobile-nav-list a{display:flex;align-items:center;min-height:56px;padding:8px 2px;font-family:var(--font-display);font-size:1.5rem;font-weight:600;color:var(--text-1);border-bottom:1px solid var(--border);transition:color .2s,padding-left .2s}
.mobile-nav-list a:hover{color:var(--accent-text);padding-left:10px}
.mobile-nav-cta{width:100%;justify-content:center;min-height:56px}
.mobile-nav-mail{display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:24px;font-family:var(--font-mono);font-size:0.75rem;letter-spacing:0.08em;color:var(--text-2);transition:color .2s}
.mobile-nav-mail:hover{color:var(--accent-text)}
@media(max-width:1023.98px){.nav-toggle{display:inline-flex}}
@media(max-width:639.98px){.nav-cta .btn{display:none}}
@media(min-width:1024px){.mobile-nav,.mobile-nav.is-visible{display:none}}
@media(max-height:560px){.mobile-nav-inner{justify-content:flex-start;padding:8px 0}.mobile-nav-list a{min-height:48px;font-size:1.25rem}.mobile-nav-list{margin-bottom:20px}}
/* ===== HERO =====
Vollflaechige Installation statt Zweispalte mit kleiner Grafik daneben: die
Kopfzeile wird selbst zum architektonischen Element, die Anlage traegt den
ganzen ersten Bildschirm statt in einer 420px-Box zu stehen.
Die Schriftgroesse der Kopfzeile haengt an min(vw,vh): auf flachen Fenstern
(Notebook, iPad quer) schrumpft sie mit der Hoehe mit, damit Unterzeile,
Handlungsaufforderung und Vertrauensleiste im ersten Bildschirm bleiben. */
.hero-epic{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding-top:72px}
/* Die Flaeche wird vom Skript gesetzt, nicht hier: gezeichnet wird nur die
Kugel, und die belegte gemessen 22,6 % des Hero. Ein Canvas ueber den
ganzen Hero haette jeden Frame 3,15 Megapixel geloescht und neu
zusammengesetzt - dreimal so viel Rasterarbeit fuer dasselbe Bild.
Groesse und Platzierung setzt messen() in assets-nahem Skript weiter
unten; hier steht nur, dass die Flaeche frei im Hero liegt. */
.hero-epic-install{position:absolute;top:0;left:0;pointer-events:none}
/* Tiefenraster und ruhiger Lichtkern: reine CSS-Verlaeufe, keine zusaetzliche
Grafik und kein weiterer Request. Die Maske laesst beides zu den Raendern
ausklingen - das erzeugt Raum, ohne mit dem Text zu konkurrieren. */
.hero-epic-raster{position:absolute;inset:-8% -8% 10% -8%;pointer-events:none;
background-image:linear-gradient(rgba(0,201,167,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,201,167,.05) 1px,transparent 1px);
background-size:clamp(54px,6vw,92px) clamp(54px,6vw,92px);
-webkit-mask-image:radial-gradient(ellipse 72% 58% at 64% 26%,#000,rgba(0,0,0,.45) 52%,transparent 80%);
mask-image:radial-gradient(ellipse 72% 58% at 64% 26%,#000,rgba(0,0,0,.45) 52%,transparent 80%)}
.hero-epic-kern{position:absolute;top:-16%;right:-8%;width:min(820px,88vw);aspect-ratio:1;border-radius:50%;pointer-events:none;
background:radial-gradient(circle at 50% 50%,rgba(0,201,167,.10),rgba(0,201,167,.035) 44%,transparent 70%)}
/* Verlauf statt harter Kante: der untere Bildschirmbereich, in dem die riesige
Kopfzeile steht, wird zu reinem --bg, damit der Text immer voll lesbar bleibt -
der obere Bereich zeigt die Anlage klar. */
.hero-epic-scrim{position:absolute;inset:0;background:linear-gradient(0deg,var(--bg) 0%,rgba(var(--grund-rgb),.86) 32%,rgba(var(--grund-rgb),.30) 60%,transparent 84%);pointer-events:none}
.hero-epic-inner{position:relative;z-index:2;padding:0 clamp(20px,5vw,64px) clamp(40px,5.4vw,64px)}
.hero-epic-eyebrow{display:flex;align-items:center;gap:10px;row-gap:6px;flex-wrap:wrap;margin-bottom:clamp(20px,2.6vw,30px);font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.hero-epic-eyebrow strong{color:var(--accent-text);font-weight:500}
.hero-epic-eyebrow .hero-line{width:32px;height:1px;background:var(--text-3);flex-shrink:0}
.hero-epic-title{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;line-height:.9;max-width:1500px;overflow-wrap:break-word}
.hero-epic-title .zeile{display:block;font-size:clamp(3.25rem,min(10vw,13.6vh),9rem)}
.hero-epic-title .zeile.akzent{color:var(--accent-text)}
.hero-epic-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(24px,4vw,56px);flex-wrap:wrap;margin-top:clamp(28px,3.6vw,44px);max-width:1120px}
.hero-epic-sub{max-width:540px;color:var(--text-2);font-size:1.0625rem;line-height:1.6;overflow-wrap:break-word}
.hero-epic-sub span{color:var(--text-1);font-weight:500}
.hero-epic-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-width:0}
/* Genau eine Handlung soll dominieren: der primaere Weg ist groesser und traegt
eine weiche Tiefe, der sekundaere bleibt eine ruhige Flaeche ueber der Anlage. */
.hero-epic-actions .btn-primary{padding:16px 30px;font-size:1rem;box-shadow:0 14px 34px -16px rgba(0,201,167,.6)}
.hero-epic-actions .btn-outline{padding:15px 28px;background:rgba(var(--flaeche-rgb),.55)}
.hero-epic-actions .btn-outline:hover{background:rgba(var(--hoch-rgb),.7)}
/* Vertrauensleiste im ersten Bildschirm: vier nachpruefbare Punkte als Zeile,
nicht als Kachelreihe - sie stuetzen die Kopfzeile, statt mit ihr zu konkurrieren. */
.hero-proof{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;margin-top:clamp(24px,3vw,34px);padding-top:clamp(18px,2.4vw,24px);border-top:1px solid var(--border);list-style:none}
.hero-proof li{display:flex;align-items:center;gap:9px;font-size:.8125rem;line-height:1.35;color:var(--text-2)}
.hero-proof strong{color:var(--text-1);font-weight:500}
.hero-proof svg{width:16px;height:16px;flex:0 0 auto;stroke:var(--accent);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* Gestaffelter Aufbau: nur Deckkraft und Transform, damit die Bewegung auf der
GPU bleibt und kein Layout neu berechnet wird. Ohne JS (kein .js am )
ist der gesamte Hero sofort und vollstaendig sichtbar. */
.js .hero-anlauf{opacity:0;transform:translate3d(0,18px,0);animation:heroAnlauf .85s var(--ease-out) forwards}
.js .hero-anlauf-1{animation-delay:.05s}
.js .hero-anlauf-2{animation-delay:.13s}
.js .hero-anlauf-3{animation-delay:.21s}
.js .hero-anlauf-4{animation-delay:.30s}
.js .hero-anlauf-5{animation-delay:.40s}
.js .hero-anlauf-6{animation-delay:.50s}
@keyframes heroAnlauf{to{opacity:1;transform:none}}
.hero-social{position:absolute;right:clamp(20px,4vw,48px);top:96px;display:flex;flex-direction:column;gap:12px;align-items:center;z-index:3}
@media(max-width:1180px){.hero-social{display:none}}
.social-link{width:44px;height:44px;border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-2);font-size:0.875rem;transition:border-color .2s,color .2s,transform .2s var(--ease-out)}
.social-link:hover{border-color:var(--accent-text);color:var(--accent-text);transform:scale(1.1)}
.social-link svg{width:16px;height:16px;fill:currentColor}
.social-divider{width:1px;height:48px;background:var(--border);margin:4px 0}
.hero-ticker{border-top:1px solid var(--border);overflow:hidden;padding:20px 0;position:relative;background:var(--bg)}
.hero-ticker::before,.hero-ticker::after{content:"";position:absolute;top:0;bottom:0;width:100px;z-index:2;pointer-events:none}
.hero-ticker::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.hero-ticker::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.ticker-track{display:flex;gap:0;animation:ticker 34s linear infinite;width:max-content}
.ticker-item{display:flex;align-items:center;gap:32px;padding:0 40px;white-space:nowrap;font-family:var(--font-display);font-size:clamp(0.8125rem,1.5vw,0.9375rem);font-weight:500;color:var(--text-2)}
.ticker-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0}
.ticker-label{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent-text);padding-right:16px}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* Flache Fenster (iPad quer, kleine und mittlere Notebooks): die Kopfzeile
haengt ohnehin an min(vw,vh), hier wird die Hoehe staerker gewichtet und die
Abstaende ziehen nach - damit Unterzeile, Knoepfe, Vertrauensleiste und
Laufband gemeinsam in den ersten Bildschirm passen. */
@media(max-height:840px) and (min-width:721px){
.hero-epic{padding-top:64px}
.hero-epic-title .zeile{font-size:clamp(2.75rem,min(9vw,12vh),6.5rem)}
.hero-epic-inner{padding-bottom:clamp(24px,3vw,36px)}
.hero-epic-eyebrow{margin-bottom:15px}
.hero-epic-foot{margin-top:20px}
.hero-epic-sub{font-size:1rem}
.hero-proof{margin-top:16px;padding-top:13px;gap:7px 22px}
.hero-ticker{padding:13px 0}
.hero-social{display:none}
}
/* Sehr flache Desktop-Fenster (z. B. 900x600): eine weitere Stufe enger,
damit auch das Laufband noch in den ersten Bildschirm faellt. */
@media(max-height:640px) and (min-width:721px){
.hero-epic{padding-top:56px}
.hero-epic-title .zeile{font-size:clamp(2.25rem,min(8vw,11vh),4.5rem)}
.hero-epic-inner{padding-bottom:18px}
.hero-epic-eyebrow{margin-bottom:12px}
.hero-epic-foot{margin-top:16px}
.hero-proof{margin-top:12px;padding-top:10px}
.hero-ticker{padding:10px 0}
}
/* Mobil ist der Hero kein verkleinerter Desktop: Unterzeile, Handlungen und
Vertrauensleiste stehen untereinander, der primaere Weg liegt als volle
Flaeche im Daumenbereich und bleibt ohne zusaetzliches Scrollen erreichbar. */
@media(max-width:720px){
.hero-epic{padding-top:56px}
.hero-epic-raster{background-size:46px 46px;inset:-6% -6% 16% -6%}
.hero-epic-kern{top:-8%;right:-26%;width:min(560px,124vw)}
.hero-epic-scrim{background:linear-gradient(0deg,var(--bg) 0%,rgba(var(--grund-rgb),.9) 38%,rgba(var(--grund-rgb),.44) 66%,rgba(var(--grund-rgb),.12) 88%)}
.hero-epic-inner{padding:0 20px 24px}
.hero-epic-eyebrow{font-size:.625rem;letter-spacing:.09em;gap:8px;row-gap:4px;margin-bottom:16px;line-height:1.55}
.hero-epic-eyebrow .hero-line{width:18px}
.hero-epic-title .zeile{font-size:clamp(2.125rem,10.2vw,3rem)}
.hero-epic-foot{flex-direction:column;align-items:stretch;gap:20px;margin-top:20px}
.hero-epic-sub{max-width:none;font-size:.9375rem;line-height:1.55}
.hero-epic-actions{flex-direction:column;align-items:stretch;gap:10px;width:100%}
.hero-epic-actions .btn{width:100%;justify-content:center;min-height:52px;padding:14px 22px;font-size:.9375rem}
.hero-proof{gap:8px 18px;margin-top:18px;padding-top:14px}
.hero-proof li{font-size:.75rem;gap:7px}
.hero-proof svg{width:14px;height:14px}
.hero-proof-lang{display:none}
.hero-ticker{padding:13px 0}
.ticker-item{gap:22px;padding:0 26px}
}
/* Sehr flache Telefone (z. B. iPhone SE): eine Stufe kleiner, damit der
primaere Knopf ohne Scrollen sichtbar bleibt. */
@media(max-width:720px) and (max-height:700px){
.hero-epic-title .zeile{font-size:clamp(1.875rem,8.8vw,2.4rem)}
.hero-epic-sub{font-size:.875rem}
.hero-epic-foot{margin-top:16px;gap:16px}
.hero-proof{margin-top:14px;padding-top:12px}
.hero-proof li:nth-child(n+4){display:none}
}
/* ===== AUSGANGSLAGE -> ERGEBNIS =====
Der Einstieg in den Verkaufsablauf: erst die Lage, die Unternehmen selbst
kennen, dann das Ergebnis der Zusammenarbeit - bewusst kein Leistungstext. */
.lage-head{max-width:820px;margin-bottom:clamp(36px,5vw,56px)}
.lage-head p{color:var(--text-2);margin-top:20px;font-size:1.0625rem;line-height:1.7}
.lage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.lage-karte{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(24px,2.6vw,32px);display:flex;flex-direction:column;overflow:hidden;transition:border-color .25s ease,transform .3s var(--ease-out),background .25s ease}
.lage-karte::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:2px;background:linear-gradient(180deg,transparent,var(--accent),transparent);opacity:0;transition:opacity .3s ease}
@media(hover:hover) and (pointer:fine){
.lage-karte:hover{border-color:var(--border-accent);background:var(--surface-up);transform:translateY(-3px)}
.lage-karte:hover::before{opacity:1}
}
.lage-ist{color:var(--text-2);font-size:.9375rem;line-height:1.65;font-style:italic}
.lage-trenner{display:flex;align-items:center;gap:10px;margin:20px 0;font-family:var(--font-mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
.lage-trenner::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--border-accent),transparent)}
.lage-soll{color:var(--text-1);font-size:1rem;line-height:1.65}
@media(max-width:900px){.lage-grid{grid-template-columns:minmax(0,1fr)}}
/* Auf dem Telefon wuerde die globale Mindestgroesse der Abschnittsueberschrift
einzelne Woerter in eine eigene Zeile druecken - hier eine Stufe kleiner. */
@media(max-width:560px){.lage-head .section-heading{font-size:clamp(2rem,8.2vw,2.75rem)}.lage-head p{font-size:.9375rem}}
/* ===== AI-ACT-STREIFEN (eigener Abschnitt direkt unter dem Hero, nicht mehr darin) ===== */
.alert-strip{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:linear-gradient(100deg,rgba(0,201,167,.05),transparent 60%)}
.ai-alert{display:flex;align-items:center;gap:clamp(14px,2.5vw,22px);padding:clamp(18px,2.8vw,24px) 0;position:relative;overflow:hidden;text-decoration:none;transition:transform .25s var(--ease-out)}
.ai-alert:hover{transform:translateY(-1px)}
.ai-alert-icon{flex-shrink:0;width:42px;height:42px;border-radius:11px;background:var(--accent-dim);border:1px solid var(--border-accent);display:grid;place-items:center}
.ai-alert-icon svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:1.8}
.ai-alert-body{min-width:0}
.ai-alert-title{font-family:var(--font-display);font-weight:700;font-size:clamp(0.9375rem,2.2vw,1.0625rem);color:var(--text-1);line-height:1.3;overflow-wrap:break-word}
.ai-alert-title em{font-style:normal;color:var(--accent-text)}
.ai-alert-text{font-size:clamp(0.8125rem,1.8vw,0.875rem);color:var(--text-2);margin-top:4px;line-height:1.5;overflow-wrap:break-word}
.ai-alert-arrow{flex-shrink:0;width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:2;transition:transform .25s var(--ease-out)}
.ai-alert:hover .ai-alert-arrow{transform:translateX(4px)}
@media(max-width:560px){.ai-alert{align-items:flex-start}.ai-alert-arrow{display:none}}
/* ===== SERVICES KONZEPT B =====
Grosser Index statt Zeilenliste: Namen sind das dominante Element, ein Panel
zeigt jeweils die Beschreibung des gerade gewaehlten Feldes - "ein Service
dominiert, waehrend erkundet wird" statt fuenf gleich grosser Zeilen. */
.services-head{max-width:640px;margin-bottom:clamp(40px,6vw,64px)}
.services-head p{color:var(--text-2);font-size:1.0625rem;line-height:1.6;margin-top:20px}
.services-epic{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:start}
@media(max-width:900px){.services-epic{grid-template-columns:minmax(0,1fr);gap:32px}}
.services-index{display:flex;flex-direction:column;border-top:1px solid var(--border)}
.service-idx-btn{all:unset;box-sizing:border-box;cursor:pointer;width:100%;padding:clamp(14px,2.4vw,24px) 4px;border-bottom:1px solid var(--border);display:flex;align-items:baseline;gap:clamp(14px,2.4vw,24px);font-family:var(--font-display);font-weight:700;font-size:clamp(1.375rem,3.6vw,3rem);letter-spacing:-.01em;color:var(--text-3);line-height:1.1;transition:color .25s var(--ease-out)}
.service-idx-btn .num{font-family:var(--font-mono);font-size:.8125rem;font-weight:500;color:var(--text-3);flex-shrink:0;letter-spacing:.05em;padding-bottom:.3em}
.service-idx-btn .lbl{min-width:0;overflow-wrap:break-word;hyphens:auto}
.service-idx-btn:hover{color:var(--text-2)}
.service-idx-btn[aria-expanded="true"]{color:var(--text-1)}
.service-idx-btn[aria-expanded="true"] .num{color:var(--accent-text)}
.services-panel{position:sticky;top:104px;padding:clamp(28px,4vw,44px);background:var(--surface);border-radius:22px;border:1px solid var(--border);min-height:260px}
@media(max-width:900px){.services-panel{position:static}}
.services-panel-icon{width:52px;height:52px;border-radius:13px;background:var(--accent-dim);border:1px solid var(--border-accent);display:flex;align-items:center;justify-content:center;margin-bottom:24px}
.services-panel-icon svg{width:24px;height:24px;stroke:var(--accent);fill:none;stroke-width:1.5}
.services-panel p{color:var(--text-2);font-size:1.0625rem;line-height:1.75;overflow-wrap:break-word}
.services-panel-link{margin-top:24px}
.services-panel-link[hidden]{display:none}
/* ===== UEBER MICH & QUALIFIKATIONEN =====
Zu einem redaktionellen Block zusammengefuehrt statt zwei getrennter umrandeter
Abschnitte - dasselbe DEKRA-Siegel wurde zuvor auf zwei Abschnitte verteilt erwaehnt.
Kennzahlen und Qualifikationen stehen jetzt als schlichte, durch Haarlinien getrennte
Reihen statt als umrandete Kacheln. */
.about{background:var(--surface);border-radius:24px;padding:clamp(48px,7vw,96px)}
.about-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);gap:clamp(48px,6vw,80px);align-items:start}
@media(max-width:860px){.about-grid{grid-template-columns:minmax(0,1fr);gap:48px}}
.about-text{color:var(--text-2);font-size:1.0625rem;line-height:1.7;margin:24px 0 36px;overflow-wrap:break-word}
.cred-list{display:flex;flex-direction:column;border-top:1px solid var(--border)}
.cred-item{display:flex;gap:18px;padding:22px 0;border-bottom:1px solid var(--border);align-items:flex-start}
@media(max-width:328.98px){.cred-item{flex-direction:column;gap:8px}}
.cred-num{font-family:var(--font-mono);font-size:0.6875rem;color:var(--accent-text);letter-spacing:0.1em;flex-shrink:0;padding-top:3px}
.cred-body{min-width:0}
.cred-body h5{font-size:1rem;font-weight:600;font-family:var(--font-display);margin-bottom:4px;overflow-wrap:break-word}
.cred-body p{font-size:0.8125rem;color:var(--text-2);line-height:1.5;overflow-wrap:break-word}
.cred-badge{margin-top:8px;display:inline-block;background:var(--accent-dim);color:var(--accent-text);border:1px solid var(--border-accent);border-radius:100px;font-family:var(--font-mono);font-size:0.625rem;letter-spacing:0.08em;padding:3px 10px}
/* DEKRA-Siegel: Originalgrafik unveraendert (kein Filter, keine Farbaenderung, kein
Zuschnitt, kein Radius). max-width 150px bei 300px Quellbreite ergibt bei DPR 2
exakt 1:1 Geraetepixel, also volle Retina-Schaerfe. */
.cert-seal{margin-top:8px;padding-top:28px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.cert-seal img{width:100%;max-width:150px;height:auto;display:block}
.cert-seal figcaption{font-size:0.8125rem;line-height:1.55;color:var(--text-2)}
.cert-seal figcaption strong{display:block;color:var(--text-1);font-weight:600;font-family:var(--font-display)}
.stats-rail{display:flex;flex-direction:column;border-top:1px solid var(--border)}
.stat-row{padding:26px 0;border-bottom:1px solid var(--border);display:flex;align-items:baseline;gap:20px;justify-content:space-between}
.stat-row .number{font-family:var(--font-display);font-size:clamp(2.5rem,5.4vw,4rem);font-weight:700;color:var(--accent-text);line-height:1;letter-spacing:-0.02em;flex-shrink:0}
.stat-row .label{font-size:0.875rem;color:var(--text-2);line-height:1.4;text-align:right;max-width:230px}
@media(max-width:400px){.stat-row{flex-direction:column;align-items:flex-start;gap:6px}.stat-row .label{text-align:left}}
/* ===== PROCESS =====
Verbundene Ablaufkette statt umrandeter Kartenreihe: vier echte, aufeinander
folgende Schritte - Nummerierung ist hier inhaltlich begruendet, anders als bei
den Leistungen. Bewusst anderer Massstab als die AI-Act-Zeitleiste (grosse
Rundmarken statt Punkte), damit sich beide Abschnitte nicht gleich anfuehlen. */
.process-intro{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:72px}
.process-intro p{max-width:500px;color:var(--text-2);font-size:1.0625rem;line-height:1.6;margin-top:20px}
.process-rail{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));gap:40px 28px}
.process-rail::before{content:"";position:absolute;left:0;right:0;top:23px;height:1px;background:linear-gradient(90deg,var(--border-accent),var(--border) 85%,transparent);z-index:0}
@media(max-width:720px){.process-rail::before{display:none}}
.step{position:relative}
.step-num{position:relative;z-index:1;width:64px;height:64px;border-radius:50%;border:1.5px solid var(--border-accent);background:var(--bg);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:1.375rem;color:var(--accent-text);margin-bottom:28px;transition:border-color .25s,background .25s}
.step:hover .step-num{background:var(--accent-dim)}
.step h4{font-size:clamp(1.5rem,2.6vw,1.875rem);font-weight:700;font-family:var(--font-display);margin-bottom:12px;overflow-wrap:break-word}
.step p{color:var(--text-2);font-size:0.9375rem;line-height:1.6;overflow-wrap:break-word;max-width:34ch}
/* ===== MANAGED HOSTING =====
Eigenstaendige Leistung innerhalb derselben Designsprache. Die Karten sind
nur hier sinnvoll, weil drei klar vergleichbare Tarife gegenueberstehen. */
.hosting-section{position:relative;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:linear-gradient(180deg,rgba(var(--flaeche-rgb),.34),rgba(var(--grund-rgb),0) 44%)}
/* --- Anreisser Webdesign & Managed Hosting -------------------------------
Ersetzt auf der Startseite die vollstaendige Tarifsammlung. Die Tafel
rechts wiederholt nur Name und Preis und fuehrt fuer alles Weitere auf
webdesign.html - die Startseite soll dadurch kuerzer werden, nicht
laenger. */
.hosting-teaser{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
gap:clamp(32px,5vw,72px);align-items:center}
.hosting-teaser-text{min-width:0}
.hosting-teaser-text .section-heading{margin-bottom:18px}
.hosting-teaser-text p{color:var(--text-2);font-size:1.0625rem;line-height:1.7;max-width:56ch}
.hosting-teaser-aktionen{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(24px,3vw,32px)}
.hosting-teaser-tafel{min-width:0;padding:clamp(24px,3vw,32px);border:1px solid var(--border);
border-radius:18px;background:var(--surface)}
.hosting-teaser-titel{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--text-3);margin-bottom:6px}
.hosting-teaser-liste{list-style:none;margin:0 0 18px}
.hosting-teaser-liste a{display:flex;align-items:baseline;gap:12px;padding:16px 0;
border-bottom:1px solid var(--border);color:var(--text-1);min-width:0;
transition:color .22s var(--ease-out)}
.hosting-teaser-liste li:last-child a{border-bottom:none}
.hosting-teaser-liste a:hover{color:var(--accent-text)}
.hosting-teaser-liste a:hover .ht-preis{color:var(--accent-text)}
.ht-name{font-family:var(--font-display);font-weight:600;font-size:1rem;min-width:0;
overflow-wrap:break-word}
.ht-marke{flex-shrink:0;font-family:var(--font-mono);font-size:.625rem;letter-spacing:.1em;
text-transform:uppercase;color:var(--accent-text);padding:3px 8px;border-radius:100px;
background:var(--accent-dim);border:1px solid var(--border-accent)}
.ht-preis{margin-left:auto;flex-shrink:0;font-family:var(--font-display);font-weight:700;
font-size:1.375rem;letter-spacing:-.01em;transition:color .22s var(--ease-out)}
.ht-preis small{font-family:var(--font-body);font-weight:400;font-size:.6875rem;
color:var(--text-3);margin-left:3px}
.hosting-teaser-fuss{color:var(--text-3);font-size:.8125rem;line-height:1.65}
.hosting-teaser-fuss a{color:var(--text-2);text-decoration:underline;text-underline-offset:3px}
.hosting-teaser-fuss a:hover{color:var(--accent-text)}
@media(max-width:900px){
.hosting-teaser{grid-template-columns:minmax(0,1fr);gap:clamp(28px,5vw,40px)}
}
@media(max-width:560px){
.hosting-teaser-aktionen .btn{width:100%;justify-content:center}
.ht-preis{font-size:1.25rem}
}
.hosting-intro{max-width:760px;margin-bottom:clamp(40px,6vw,64px)}
.hosting-intro .section-heading{margin-bottom:20px}
.hosting-intro p{max-width:690px;color:var(--text-2);font-size:1.0625rem;line-height:1.65}
.hosting-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.hosting-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:clamp(28px,3.2vw,38px);border:1px solid var(--border);border-radius:18px;background:linear-gradient(180deg,rgba(var(--hoch-rgb),.7),rgba(var(--flaeche-rgb),.92));box-shadow:0 24px 70px rgba(var(--schatten-rgb),.22);transition:border-color .2s ease,transform .2s var(--ease-out),background-color .2s ease}
.hosting-card-care{border-color:rgba(0,201,167,.62);background:linear-gradient(180deg,rgba(0,201,167,.075),rgba(var(--flaeche-rgb),.96) 38%);box-shadow:0 28px 80px rgba(0,201,167,.07)}
.hosting-card-care::before{content:"";position:absolute;left:28px;right:28px;top:-1px;height:2px;background:var(--accent)}
@media(hover:hover) and (pointer:fine){
.hosting-card:hover{transform:translateY(-3px);border-color:var(--border-accent)}
.hosting-card-care:hover{border-color:var(--accent-text)}
}
.hosting-badge{align-self:flex-start;margin-bottom:18px;padding:4px 11px;border-radius:100px;background:var(--accent);color:var(--accent-ink);font-family:var(--font-mono);font-size:.625rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.hosting-plan-name{font-size:clamp(1.5rem,2.8vw,2rem);margin-bottom:12px;letter-spacing:-.02em}
.hosting-positioning{min-height:5.5em;margin-bottom:28px;color:var(--text-2);font-size:.875rem;line-height:1.55}
.hosting-price{display:flex;align-items:flex-end;gap:9px;margin-bottom:26px;font-family:var(--font-display)}
.hosting-price strong{color:var(--accent-text);font-size:clamp(2.75rem,5vw,4rem);line-height:.9;letter-spacing:-.045em;white-space:nowrap}
.hosting-price span{padding-bottom:4px;color:var(--text-2);font-size:.8125rem;white-space:nowrap}
.hosting-rule{height:1px;margin-bottom:24px;background:var(--border)}
.hosting-list-title{margin-bottom:13px;color:var(--text-1);font-family:var(--font-display);font-size:.8125rem;font-weight:600}
.hosting-feature-list{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:26px}
.hosting-feature-list li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:9px;color:var(--text-2);font-size:.8125rem;line-height:1.5;overflow-wrap:break-word}
.hosting-feature-mark{color:var(--accent-text);font-weight:700;line-height:1.5}
.hosting-feature-list-excluded{margin-top:-8px}
.hosting-feature-list-excluded li{color:var(--text-3)}
.hosting-feature-list-excluded .hosting-feature-mark{color:var(--text-3)}
.hosting-limit-note{margin:-6px 0 26px;padding:14px 15px;border-left:2px solid var(--border-accent);background:rgba(var(--grund-rgb),.46);color:var(--text-3);font-size:.75rem;line-height:1.55}
.hosting-card .hosting-cta{width:100%;justify-content:center;margin-top:auto;white-space:nowrap}
.hosting-service-note{margin-top:22px;padding:18px 20px;border:1px solid var(--border);border-radius:14px;background:rgba(var(--flaeche-rgb),.62);color:var(--text-2);font-size:.8125rem;line-height:1.65}
.hosting-service-note strong{color:var(--text-1);font-family:var(--font-display);font-weight:600}
@media(max-width:1040px) and (min-width:721px){
.hosting-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.hosting-card-business{grid-column:1/-1;max-width:calc(50% - 9px);width:100%;justify-self:center}
}
@media(max-width:720px){
.hosting-grid{grid-template-columns:minmax(0,1fr)}
.hosting-positioning{min-height:0}
}
@media(max-width:420px){
.hosting-card{padding:26px 22px}
.hosting-price strong{font-size:2.75rem}
}
/* Anfragefenster: natives dialog-Element fuer Fokusbindung, Escape und
einen fuer assistive Technologien echten modalen Zustand. */
body.hosting-modal-open{overflow:hidden}
.hosting-dialog{width:fit-content;max-width:none;margin:auto;padding:0;border:0;background:transparent;color:var(--text-1);overflow:visible}
.hosting-dialog::backdrop{background:var(--schleier);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hosting-dialog-shell{position:relative;width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;padding:clamp(26px,4vw,44px);border:1px solid var(--border-accent);border-radius:20px;background:var(--surface);box-shadow:0 28px 100px rgba(var(--schatten-rgb),.5);color-scheme:dark}
.hosting-dialog-close{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--text-2);font:400 1.5rem/1 var(--font-body);cursor:pointer;transition:border-color .2s ease,color .2s ease,transform .16s var(--ease-out)}
.hosting-dialog-close:hover{border-color:var(--accent-text);color:var(--accent-text)}
.hosting-dialog-close:active{transform:scale(.97)}
.hosting-dialog-close:disabled,.hosting-form-actions .btn:disabled{opacity:.62;cursor:not-allowed;transform:none}
.hosting-dialog-head{padding-right:50px;margin-bottom:26px}
/* ===== BUCHUNGSFENSTER ===== */
.buchung-pruefungen{display:flex;flex-direction:column;gap:14px;margin:24px 0 18px}
.buchung-pruefung{display:flex;align-items:flex-start;gap:12px;cursor:pointer;
font-size:.875rem;line-height:1.6;color:var(--text-2)}
.buchung-pruefung input{flex-shrink:0;width:20px;height:20px;margin-top:1px;accent-color:var(--accent-text);cursor:pointer}
.buchung-pruefung input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.buchung-pruefung strong{color:var(--text-1);font-weight:600}
.buchung-pruefung a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}
/* Die Hinweiszeile bleibt im Fluss stehen, auch wenn sie leer ist - sonst
springen die Knoepfe darunter, sobald eine Meldung erscheint. */
.buchung-hinweis{min-height:1.5em;font-size:.8125rem;line-height:1.5;color:var(--text-3);margin-bottom:18px}
.buchung-hinweis.ist-warnung{color:var(--accent-text)}
.buchung-tasten{display:flex;flex-wrap:wrap;gap:12px}
.buchung-tasten .btn{flex:1 1 200px;justify-content:center}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:disabled:hover{transform:none;background:var(--accent)}
@media(max-width:520px){.buchung-tasten .btn{flex:1 1 100%}}
.hosting-dialog-head h2{font-size:clamp(1.625rem,4vw,2.25rem);margin-bottom:9px}
.hosting-dialog-head p{max-width:570px;color:var(--text-2);font-size:.875rem;line-height:1.6}
.hosting-selection{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:end;margin-bottom:28px;padding:18px 20px;border:1px solid var(--border-accent);border-radius:14px;background:var(--accent-dim)}
.hosting-selection-label{display:block;margin-bottom:4px;color:var(--text-3);font-family:var(--font-mono);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase}
.hosting-selection output{display:block;color:var(--text-1);font-family:var(--font-display);font-size:1.0625rem;font-weight:700}
.hosting-selection-price{text-align:right}
.hosting-selection-price output{color:var(--accent-text)}
.hosting-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.hosting-form-grid .form-group{min-width:0}
.hosting-form-full{grid-column:1/-1}
.hosting-form-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}
.hosting-form-actions .btn{justify-content:center;white-space:nowrap}
.hosting-form-alert{display:none;margin-bottom:20px;padding:14px 16px;border:1px solid var(--fehler-rand);border-radius:10px;background:rgba(var(--fehler-rgb),.08);color:var(--fehler-zart);font-size:.875rem;line-height:1.55}
.hosting-form-alert.sichtbar{display:block}
.hosting-form-alert a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.hosting-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.hosting-success{padding:18px 0 4px;text-align:center}
.hosting-success[hidden]{display:none}
.hosting-success-icon{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 22px;border:1px solid var(--border-accent);border-radius:50%;background:var(--accent-dim);color:var(--accent-text);font-family:var(--font-display);font-size:1.75rem;font-weight:700}
.hosting-success h2{font-size:clamp(1.5rem,4vw,2rem);margin-bottom:12px}
.hosting-success p{max-width:520px;margin:0 auto;color:var(--text-2);font-size:.9375rem;line-height:1.65}
.hosting-success-plan{margin-top:18px!important;color:var(--accent-text)!important;font-family:var(--font-display);font-weight:600}
.hosting-success .btn{margin-top:28px}
@media(max-width:620px){
.hosting-dialog-shell{width:calc(100vw - 20px);max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);padding:26px 20px;border-radius:16px}
.hosting-dialog-close{top:10px;right:10px}
.hosting-dialog-head{padding-right:42px}
.hosting-selection{grid-template-columns:minmax(0,1fr);gap:10px}
.hosting-selection-price{text-align:left}
.hosting-form-grid{grid-template-columns:minmax(0,1fr)}
.hosting-form-full{grid-column:auto}
.hosting-form-actions{flex-direction:column}
.hosting-form-actions .btn{width:100%}
}
/* ===== TESTIMONIALS ===== */
.testimonials-header{text-align:center;margin-bottom:64px}
.testimonials-header p{max-width:500px;margin:16px auto 0;color:var(--text-2);font-size:17px;line-height:1.6}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.testimonials-grid{grid-template-columns:1fr}}
.testimonial{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:40px;display:flex;flex-direction:column;gap:28px}
.testimonial-quote{font-size:16px;line-height:1.65;color:var(--text-2);font-style:italic}
.testimonial-quote::before{content:"\201E";font-size:48px;color:var(--accent-text);font-family:var(--font-display);line-height:0.6;display:block;margin-bottom:12px;opacity:0.6}
.testimonial-author{display:flex;align-items:center;gap:14px}
.author-avatar{width:44px;height:44px;border-radius:50%;background:var(--accent-dim);border:1px solid var(--border-accent);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--accent-text);flex-shrink:0}
.author-name{font-weight:600;font-size:14px;margin-bottom:2px;font-family:var(--font-display)}
.author-title{font-size:12px;color:var(--text-2)}
/* ===== FAQ ===== */
.faq-inner{display:grid;grid-template-columns:1fr 2fr;gap:80px;align-items:start}
@media(max-width:800px){.faq-inner{grid-template-columns:1fr;gap:40px}}
.faq-intro p{color:var(--text-2);font-size:1rem;line-height:1.6;margin:16px 0 24px}
.faq-list{display:flex;flex-direction:column;gap:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.faq-item{position:relative;border-bottom:1px solid var(--border);transition:background .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.faq-item:last-child{border-bottom:none}
/* Premium-Signatur statt Standard-Akkordeon: eine hauchduenne Teal-Linie zieht sich beim
Oeffnen ueber die volle Breite ein (gleiches Zeichnungsmuster wie .boundary-draw) und
ein sehr dezenter Glow legt sich unter das Element - kein Farbwechsel, keine harte Kante. */
.faq-item::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent) 20%,var(--accent) 80%,transparent);transform:scaleX(0);transform-origin:center;opacity:0;transition:transform .6s var(--ease-out),opacity .3s ease;pointer-events:none}
.faq-item.open{background:var(--accent-glow);box-shadow:0 16px 40px -30px rgba(0,201,167,.6)}
.faq-item.open::before{transform:scaleX(1);opacity:1}
.faq-question{width:100%;background:transparent;border:none;cursor:pointer;padding:24px 28px;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:20px;color:var(--text-1);font-family:var(--font-display);font-size:1rem;font-weight:600;transition:background .3s var(--ease-out),color .3s var(--ease-out)}
.faq-question > span{min-width:0;overflow-wrap:break-word}
.faq-question:hover{background:var(--surface)}
.faq-item.open .faq-question{background:var(--surface);color:var(--accent-text)}
.faq-chevron{width:20px;height:20px;border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .35s var(--ease-out),border-color .35s var(--ease-out),color .35s var(--ease-out),box-shadow .35s var(--ease-out);color:var(--text-3)}
.faq-chevron svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.5;transition:transform .45s var(--ease-out)}
.faq-item.open .faq-chevron{background:var(--accent);border-color:var(--accent-text);color:var(--accent-ink-2);box-shadow:0 0 14px -2px rgba(0,201,167,.6)}
.faq-item.open .faq-chevron svg{transform:rotate(180deg)}
/* Aufklappen ueber die Grid-Zeile 0fr -> 1fr statt ueber einen festen max-height-Deckel:
die Zeile nimmt exakt die tatsaechliche Inhaltshoehe an, unabhaengig von Textlaenge,
Schriftgroesse und Viewport. Der 400px-Deckel schnitt bereits bei 125% Textgroesse und
320px Breite 258px Inhalt ab. Das Padding unten liegt bewusst nur im geoeffneten
Zustand an: als Padding des Grid-Items wuerde es sonst die eingeklappte Hoehe auf
24px anheben (Border-Box kann nicht unter das eigene Padding schrumpfen).
Der Inhalt blendet zusaetzlich per opacity/translateY ein, zeitversetzt zum Aufziehen
der Zeile, statt schlagartig mit ihr zu erscheinen - das ergibt den gestaffelten,
hochwertigen Reveal. Beim Schliessen faellt diese Verzoegerung weg, damit es nicht traege wirkt. */
.faq-answer{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .5s var(--ease-out)}
.faq-answer-inner{overflow:hidden;min-height:0;padding:0 28px;color:var(--text-2);font-size:0.9375rem;line-height:1.7;overflow-wrap:break-word;opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s var(--ease-out)}
.faq-item.open .faq-answer{grid-template-rows:1fr}
.faq-item.open .faq-answer-inner{padding-bottom:24px;opacity:1;transform:translateY(0);transition:opacity .4s ease .12s,transform .5s var(--ease-out) .12s}
/* ===== CONTACT ===== */
.contact-wrap{background:var(--surface);border-radius:24px;overflow:hidden}
.contact-grid{display:grid;grid-template-columns:1fr 1.4fr}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
.contact-info{padding:clamp(40px,6vw,72px);background:linear-gradient(160deg,var(--surface) 0%,rgba(0,201,167,0.06) 100%);border-right:1px solid var(--border);position:relative;overflow:hidden}
/* Eckmarken statt beliebiger Groszahl "01": greift dieselbe Messsprache wie das
Hero-Signaturmotiv auf, statt reiner Dekoration ohne Bedeutung. */
.contact-info::before,.contact-info::after{content:"";position:absolute;width:28px;height:28px;border:1px solid rgba(0,201,167,.16);pointer-events:none}
.contact-info::before{right:24px;bottom:24px;border-width:0 1px 1px 0}
.contact-info::after{right:44px;bottom:44px;border-width:0 1px 1px 0;width:16px;height:16px}
.contact-tagline{font-size:clamp(1.875rem,4vw,2.75rem);font-weight:700;font-family:var(--font-display);line-height:1.15;letter-spacing:-0.02em;margin:20px 0 28px;overflow-wrap:break-word}
.contact-tagline em{font-style:normal;color:var(--accent-text)}
.contact-info p{color:var(--text-2);font-size:0.9375rem;line-height:1.65;margin-bottom:48px}
.contact-details{display:flex;flex-direction:column;gap:16px}
/* ===== KARTE (Zwei-Klick-Loesung) =====
Die Vorschau ist vollstaendig selbst gezeichnet: Raster aus CSS-Verlaeufen,
Nadel als Inline-SVG. Kein Bild, kein Request, keine Uebermittlung - erst
der Klick tauscht sie gegen den Google-Rahmen. */
.karte{margin:28px 0 0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.karte-vorschau{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:14px;text-align:center;padding:clamp(28px,4vw,40px) 22px;min-height:260px;
background:radial-gradient(ellipse 70% 60% at 50% 42%,rgba(0,201,167,.08),transparent 70%)}
/* Andeutung eines Kartenrasters, zu den Raendern ausgeblendet. */
.karte-raster{position:absolute;inset:0;pointer-events:none;
background-image:linear-gradient(rgba(0,201,167,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(0,201,167,.07) 1px,transparent 1px);
background-size:34px 34px;
-webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,#000,transparent 78%);
mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,#000,transparent 78%)}
.karte-nadel{position:relative;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
border:1px solid var(--border-accent);background:var(--accent-dim);color:var(--accent-text)}
.karte-nadel svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* Ruhiger Puls unter der Nadel - ein Signal, kein Blinken. */
.karte-nadel::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--accent);
opacity:0;animation:kartePuls 3.4s ease-out infinite}
@keyframes kartePuls{0%{transform:scale(.85);opacity:.5}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}
.karte-anschrift{position:relative;font-size:.9375rem;line-height:1.6;color:var(--text-2)}
.karte-anschrift strong{display:block;font-family:var(--font-display);font-size:1.0625rem;color:var(--text-1);margin-bottom:4px}
.karte-laden{position:relative}
.karte-hinweis{position:relative;max-width:42ch;font-size:.75rem;line-height:1.55;color:var(--text-3)}
.karte-hinweis a{color:var(--text-2);text-decoration:underline;text-underline-offset:2px}
.karte-hinweis a:hover{color:var(--accent-text)}
/* Nach dem Laden fuellt der Rahmen dieselbe Flaeche wie die Vorschau. */
.karte-rahmen{display:block;width:100%;height:clamp(260px,34vw,340px);border:0}
.karte-fuss{display:flex;justify-content:center;border-top:1px solid var(--border);background:var(--bg)}
.karte-fuss a{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;
font-family:var(--font-display);font-size:.8125rem;font-weight:600;color:var(--text-2);transition:color .2s}
.karte-fuss a:hover{color:var(--accent-text)}
.karte-fuss svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
/* Der Text braucht das span: als blosser Textknoten waere er ein anonymes Flexitem ohne
Selektor und koennte sein automatisches Mindestmass nicht aufgeben. */
.contact-detail{display:flex;align-items:center;gap:12px;font-size:0.875rem;color:var(--text-2)}
.contact-detail > span{min-width:0;overflow-wrap:break-word}
.contact-detail-icon{width:36px;height:36px;border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-detail-icon svg{width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:1.5}
.contact-detail a{color:var(--text-1);transition:color .2s;display:inline-flex;align-items:center;min-height:44px}
.contact-detail a:hover{color:var(--accent-text)}
.contact-form-wrap{padding:clamp(40px,6vw,72px)}
.form-title{font-size:1.375rem;font-weight:700;font-family:var(--font-display);margin-bottom:32px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
@media(max-width:500px){.form-row{grid-template-columns:1fr}}
.form-group{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.form-group label{font-size:0.75rem;font-weight:500;color:var(--text-2);font-family:var(--font-mono);letter-spacing:0.05em;text-transform:uppercase}
/* 16px ist die Schwelle, unterhalb derer iOS Safari beim Fokussieren automatisch in das
Feld hineinzoomt. Bewusst unbedingt und nicht nur mobil: der Auto-Zoom haengt am Geraet,
nicht an der Viewportbreite, und die Feldhoehe waechst dadurch nur um 2px (46->48). */
.form-group input,.form-group textarea,.form-group select{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:13px 16px;color:var(--text-1);font-family:var(--font-body);font-size:max(1rem, 16px);transition:border-color .2s;outline:none;width:100%}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-3)}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--accent-text);box-shadow:0 0 0 3px rgba(0,201,167,0.08)}
.form-group textarea{min-height:120px;resize:vertical}
.form-group select option{background:var(--surface)}
.form-submit{margin-top:8px}
.form-note{font-size:0.75rem;color:var(--text-3);margin-top:12px}
.form-note a{color:var(--text-2);text-decoration:underline;text-underline-offset:2px}
/* ===== BACK TO TOP ===== */
/* Safe Area: env() addiert nur auf Geraeten mit Notch/Home-Indikator etwas hinzu; ohne
Safe Area loest der Fallback zu 0px auf und es bleiben exakt die bisherigen 32px. */
.back-to-top{position:fixed;bottom:calc(32px + env(safe-area-inset-bottom,0px));right:calc(32px + env(safe-area-inset-right,0px));width:44px;height:44px;background:var(--surface);border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-2);opacity:0;visibility:hidden;pointer-events:none;transition:all .3s;z-index:50;cursor:pointer;appearance:none;-webkit-appearance:none;font:inherit;padding:0}
.back-to-top.visible{opacity:1;visibility:visible;pointer-events:all}
.back-to-top:hover{border-color:var(--accent-text);color:var(--accent-text)}
.back-to-top svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
/* ===== REVEAL ANIMATION (Progressive Enhancement: nur bei aktivem JS aktiv) ===== */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.visible{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
/* ===== SMARTPHONE-TYPOGRAFIE & KOMPAKTERE KARTEN =====
Abstaende (430px-Block): bewusste Stufe auf das kompaktere Mobilmass; oberhalb 430px
gelten die Basiswerte unveraendert weiter.
Schriftgroessen (400px-Block): stufenlos — die clamp()-Maxima entsprechen bei genau
400px exakt den Basiswerten (52px bzw. 22px), daher kein Sprung am Breakpoint.
.about/.creds/.stats-grid/.cert-badge: ohne diese Regeln erzwingt die 2-spaltige
.stats-grid (min-content 301.7px) bzw. .cert-badge (min-content 272.8px) in der nur
184px breiten .about-Innenflaeche einen echten Ueberlauf — bei 320px 49px, die von
body{overflow-x:hidden} sichtbar abgeschnitten werden. Messwerte siehe Run 04C-QA. */
@media(max-width:430px){
.service-card{padding:28px}
.plan{padding:28px}
.step{padding:28px 24px}
.stat-card{padding:24px}
.cred-item{padding:20px;gap:16px}
.faq-question{padding:20px}
.faq-answer-inner{padding:0 20px}
.faq-item.open .faq-answer-inner{padding-bottom:20px}
.about{padding:20px}
.creds{padding:20px}
.stats-grid{grid-template-columns:1fr}
/* Zweispaltiges Raster statt flex-wrap: der Punkt bliebe sonst als einziges Element
allein in der ersten Zeile, weil das Textelement mit seiner max-content-Breite
umbricht. Hier haelt Spalte 1 den Punkt, Spalte 2 Text und Zusatz untereinander. */
.cert-badge{display:grid;grid-template-columns:auto 1fr;align-items:start;column-gap:12px;row-gap:4px}
.cert-badge-dot{margin-top:8px}
.cert-badge-label{grid-column:2;margin-left:0}
}
@media(max-width:400px){
.display{font-size:clamp(2.625rem,13vw,3.25rem)}
.service-card h4{font-size:clamp(1.0625rem,5.5vw,1.375rem);overflow-wrap:break-word}
}
/* ===== AI-ACT-BEREICH ===== */
.aiact{position:relative;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--bg),var(--bg-tief-2) 50%,var(--bg))}
/* Der Halter spannt die volle Sektionshoehe auf, ohne Platz im Fluss zu belegen.
Die Zeichenflaeche darin bleibt genau einen Bildschirm hoch und klebt beim
Scrollen oben fest. Frueher war die Canvas so hoch wie die ganze Sektion -
das ergab bei 1440x900 einen Puffer von 13,5 Megapixeln (rund 52 MB), der
in jedem Frame geleert und neu bemalt wurde. Jetzt sind es rund 5 Megapixel,
und der Hintergrund wirkt zugleich wie ein System, das hinter dem Inhalt
weiterlaeuft, statt mit ihm wegzuscrollen. */
.aiact-canvas-halter{position:absolute;inset:0;z-index:0;pointer-events:none}
.aiact-canvas-wrap{position:sticky;top:0;height:100svh}
.aiact-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.42}
.aiact-inner{position:relative;z-index:1}
.aiact-head{max-width:760px;margin-bottom:clamp(40px,6vw,64px)}
.aiact-head h2{margin-bottom:20px}
.aiact-head p{color:var(--text-2);font-size:clamp(1rem,2.2vw,1.0625rem)}
.aiact-lead{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent-text);margin-bottom:14px}
.aiact-lead-pulse{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(0,201,167,.6);animation:aiPulse 2.6s ease-out infinite}
@keyframes aiPulse{0%{box-shadow:0 0 0 0 rgba(0,201,167,.55)}70%{box-shadow:0 0 0 12px rgba(0,201,167,0)}100%{box-shadow:0 0 0 0 rgba(0,201,167,0)}}
/* Die drei Kopfzeilen als Bloecke statt : gleiche Umbrueche, aber jede
Zeile ist einzeln ansprechbar. Der Text selbst bleibt unveraendert. */
.ai-zeile{display:block}
/* ===== EINTRITTSCHOREOGRAFIE =====
Der Ausgangszustand haengt an .js: ohne JavaScript ist alles sofort sichtbar,
und es gibt kein Aufblitzen vor dem Start. Das Skript setzt nur eine Klasse
je Abschnitt - alle Verzoegerungen stehen hier, nicht im JavaScript. */
.js .ai-anim .aiact-lead,
.js .ai-anim .ai-zeile,
.js .ai-anim .ai-text{opacity:0;transform:translateY(24px);filter:blur(5px)}
.js .ai-anim.ai-los .aiact-lead,
.js .ai-anim.ai-los .ai-zeile,
.js .ai-anim.ai-los .ai-text{opacity:1;transform:none;filter:blur(0);
transition:opacity .72s var(--ease-out) var(--verzug,0s),
transform .82s var(--ease-out) var(--verzug,0s),
filter .6s var(--ease-out) var(--verzug,0s)}
.js .ai-anim.ai-los .aiact-lead{--verzug:0s}
.js .ai-anim.ai-los .ai-zeile:nth-child(1){--verzug:.16s}
.js .ai-anim.ai-los .ai-zeile:nth-child(2){--verzug:.28s}
.js .ai-anim.ai-los .ai-zeile:nth-child(3){--verzug:.40s}
.js .ai-anim.ai-los .ai-text{--verzug:.60s}
/* Einmaliger Lichtimpuls auf "vorbereitet?" - kein Dauerleuchten. */
@keyframes aiLichtimpuls{
0%{text-shadow:0 0 0 rgba(0,201,167,0)}
24%{text-shadow:0 0 30px rgba(0,201,167,.8),0 0 10px rgba(0,201,167,.55)}
100%{text-shadow:0 0 0 rgba(0,201,167,0)}
}
.js .ai-anim.ai-los .ai-zeile:nth-child(3) em{animation:aiLichtimpuls 1.7s var(--ease-out) .62s 1 both}
/* Risikostufen als durchgehende Skala statt vier gleicher Karten - knuepft an das
Kalibrierungsmotiv aus dem Hero an. Gleich breite Zonen: es gibt keine belastbare
Angabe, wie viele Systeme real in welche Stufe fallen, daher wird das nicht suggeriert. */
.risk-intro{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.risk-intro h3{font-size:clamp(1.25rem,3vw,1.5rem)}
.risk-status{font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);transition:color .4s ease}
.risk-status.ai-prueft{color:var(--accent-text)}
/* Vier volle Baender statt Balken+Legende: der Stufenname selbst ist die Skala,
Typografie und Messwerkzeug sind eins. */
.risk-stack{display:flex;flex-direction:column;border-top:1px solid var(--border)}
.risk-band{position:relative;padding:clamp(22px,3.4vw,36px) 0;border-bottom:1px solid var(--border);display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center;overflow:hidden;opacity:1;background-color:transparent;transition:opacity .55s var(--ease-out),background-color .35s var(--ease-out)}
/* Vor dem Scan gedaempft - aber nur, wenn JavaScript den Scan auch ausfuehren
kann. Ohne JS stehen die Baender von Anfang an voll lesbar da. */
.js .ai-anim.risk-stack .risk-band{opacity:.3}
.js .risk-stack .risk-band.ist-aktiv,
.js .risk-stack .risk-band.geprueft{opacity:1}
/* Linke Farbkante: laedt sich von oben auf und leuchtet einmal kurz. */
.risk-band::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--stufe);transform:scaleY(var(--kante-y,1)) scaleX(var(--kante-x,1));transform-origin:top left;transition:transform .5s var(--ease-out)}
.js .ai-anim.risk-stack .risk-band::before{--kante-y:0}
.js .risk-stack .risk-band.ist-aktiv::before,
.js .risk-stack .risk-band.geprueft::before{--kante-y:1}
@keyframes aiKanteGlut{
0%{box-shadow:0 0 0 0 rgba(0,0,0,0)}
35%{box-shadow:0 0 22px 1px var(--stufe)}
100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}
}
.js .risk-stack .risk-band.ist-aktiv::before{animation:aiKanteGlut 1.15s var(--ease-out) 1 both}
/* Scannerlinie: ein Element ueber die volle Bandbreite, dessen Verlauf nur an
einer schmalen Stelle hell ist. Verschoben wird per transform - dadurch
laeuft die Linie ohne Layout- oder Groessenmessung sauber durch, auf jeder
Bandbreite gleich, und der Browser kann sie auf der GPU bewegen. */
.risk-band::after{content:"";position:absolute;top:0;bottom:0;left:0;width:100%;pointer-events:none;opacity:0;
/* Der helle Kern ist rund zwei Pixel breit, dahinter liegt eine kurze
Lichtspur, davor faellt es hart ab - dadurch liest sich die Bewegung als
Richtung und nicht als leuchtende Saeule. Die Prozentwerte skalieren mit
der Bandbreite, das Verhaeltnis bleibt auf jedem Bildschirm gleich. */
background:linear-gradient(90deg,transparent 46%,var(--stufe) 49.8%,rgba(var(--waesche-rgb),.95) 50%,var(--stufe) 50.2%,transparent 51.2%);
transform:translateX(-100%)}
@keyframes aiScanlinie{
0%{opacity:0;transform:translateX(-100%)}
10%{opacity:.7}
78%{opacity:.55}
100%{opacity:0;transform:translateX(100%)}
}
.js .risk-stack .risk-band.ist-aktiv::after{animation:aiScanlinie .9s cubic-bezier(.36,0,.2,1) 1 both}
.risk-band-label{font-family:var(--font-display);font-weight:700;font-size:clamp(1.75rem,5.6vw,4.25rem);line-height:.95;color:var(--stufe);letter-spacing:-.02em;padding-left:clamp(20px,3vw,32px);white-space:nowrap}
.risk-band-body{min-width:0;padding-right:clamp(12px,2vw,24px)}
.risk-band-body h4{font-size:1.0625rem;margin-bottom:6px;overflow-wrap:break-word}
.risk-band-body p{font-size:0.9375rem;color:var(--text-2);line-height:1.65;max-width:58ch;overflow-wrap:break-word}
.js .ai-anim.risk-stack .risk-band-label{opacity:0;transform:translateX(-16px)}
.js .ai-anim.risk-stack .risk-band-body{opacity:0;transform:translateY(12px)}
.js .risk-stack .risk-band.ist-aktiv .risk-band-label,
.js .risk-stack .risk-band.geprueft .risk-band-label{opacity:1;transform:none;transition:opacity .5s var(--ease-out),transform .62s var(--ease-out)}
/* Die Erklaerung folgt dem Stufennamen bewusst um gut eine Zehntelsekunde
versetzt - erst die Einordnung, dann die Begruendung. */
.js .risk-stack .risk-band.ist-aktiv .risk-band-body,
.js .risk-stack .risk-band.geprueft .risk-band-body{opacity:1;transform:none;transition:opacity .5s var(--ease-out) .12s,transform .58s var(--ease-out) .12s}
/* Mikroreaktion beim Zeigen - nur mit echter Maus, erst nach dem Scan und
ohne jede Layoutverschiebung. */
@media(hover:hover) and (pointer:fine){
.js .risk-stack.ai-fertig .risk-band:hover{background-color:rgba(var(--waesche-rgb),.03)}
.js .risk-stack.ai-fertig .risk-band:hover::before{--kante-x:1.6}
}
@media(max-width:760px){.risk-band{grid-template-columns:minmax(0,1fr);padding-left:16px}.risk-band-label{white-space:normal;padding-left:16px}}
.risk-note{margin-top:24px;font-size:0.8125rem;color:var(--text-3);line-height:1.6}
/* Fristen des AI Act */
.aiact-timeline{margin-top:clamp(48px,7vw,72px)}
.aiact-timeline h3{font-size:clamp(1.25rem,3vw,1.5rem);margin-bottom:8px}
.aiact-timeline>p{color:var(--text-2);font-size:0.9375rem;margin-bottom:28px;max-width:640px}
/* overflow:hidden klammert den Impuls, der links und rechts ueber die Leiste
hinauslaeuft. Die Punkte selbst liegen innerhalb und bleiben unberuehrt. */
.tl{position:relative;overflow:hidden;display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:20px 18px}
.tl::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:linear-gradient(90deg,var(--border-accent),var(--border) 70%,transparent);transform:scaleX(1);transform-origin:left center}
.js .ai-anim.aiact-timeline .tl::before{transform:scaleX(0)}
.js .ai-anim.aiact-timeline.ai-los .tl::before{transform:scaleX(1);transition:transform 1.05s var(--ease-in-out)}
/* Ein einzelner Impuls laeuft die Linie einmal entlang - dieselbe Technik wie
die Scannerlinie: schmale helle Stelle in einem sonst leeren Verlauf. */
.tl-puls{position:absolute;top:8px;left:0;width:100%;height:3px;pointer-events:none;opacity:0;transform:translateX(-100%);
background:linear-gradient(90deg,transparent 46.5%,rgba(0,201,167,.4) 49.3%,var(--accent) 50%,rgba(0,201,167,.4) 50.7%,transparent 53.5%)}
@keyframes aiTlPuls{
0%{opacity:0;transform:translateX(-100%)}
14%{opacity:1}
86%{opacity:1}
100%{opacity:0;transform:translateX(100%)}
}
.js .ai-anim.aiact-timeline.ai-los .tl-puls{animation:aiTlPuls 1.5s cubic-bezier(.4,0,.2,1) .55s 1 both}
.tl-item{position:relative;padding-top:30px}
.tl-dot{position:absolute;top:4px;left:0;width:11px;height:11px;border-radius:50%;background:var(--bg);border:2px solid var(--border);transition:border-color .3s,box-shadow .3s}
.js .ai-anim.aiact-timeline .tl-dot{opacity:0;transform:scale(.35)}
.js .ai-anim.aiact-timeline.ai-los .tl-dot{opacity:1;transform:none;
transition:opacity .38s var(--ease-out) var(--tlv,0s),transform .5s var(--ease-out) var(--tlv,0s),border-color .3s,box-shadow .3s}
.js .ai-anim.aiact-timeline.ai-los .tl-item:nth-child(1) .tl-dot{--tlv:.35s}
.js .ai-anim.aiact-timeline.ai-los .tl-item:nth-child(2) .tl-dot{--tlv:.47s}
.js .ai-anim.aiact-timeline.ai-los .tl-item:nth-child(3) .tl-dot{--tlv:.59s}
.js .ai-anim.aiact-timeline.ai-los .tl-item:nth-child(4) .tl-dot{--tlv:.71s}
.js .ai-anim.aiact-timeline.ai-los .tl-item:nth-child(5) .tl-dot{--tlv:.83s}
.js .ai-anim.aiact-timeline.ai-los .tl-item:nth-child(6) .tl-dot{--tlv:.95s}
.tl-item.aktiv .tl-dot{border-color:var(--accent-text);box-shadow:0 0 0 4px var(--accent-glow)}
.tl-date{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.05em;color:var(--accent-text);margin-bottom:6px}
.tl-item:not(.aktiv) .tl-date{color:var(--text-3)}
.tl-item h5{font-size:0.9375rem;margin-bottom:5px;line-height:1.35;overflow-wrap:break-word}
.tl-item p{font-size:0.8125rem;color:var(--text-2);line-height:1.55}
.tl-tag{display:inline-block;margin-top:8px;font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:100px;border:1px solid var(--border);color:var(--text-3)}
.tl-item.aktiv .tl-tag{border-color:var(--border-accent);color:var(--accent-text);background:var(--accent-dim)}
.aiact-cta{margin-top:clamp(44px,6vw,64px);padding:clamp(28px,4vw,40px);border:1px solid var(--border-accent);border-radius:var(--radius);background:linear-gradient(120deg,rgba(0,201,167,.08),transparent 60%);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.aiact-cta h4{font-size:clamp(1.125rem,2.6vw,1.375rem);margin-bottom:6px;overflow-wrap:break-word}
.aiact-cta p{color:var(--text-2);font-size:0.9375rem;max-width:520px}
/* ===== BUSSGELDRISIKEN ===== */
.fines-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:clamp(32px,5vw,48px);align-items:start}
@media(max-width:820px){.fines-grid{grid-template-columns:1fr}}
.fine-card{padding:clamp(26px,4vw,36px);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);position:relative;overflow:hidden;transition:border-color .3s}
.fine-card:hover{border-color:var(--border-accent)}
.fine-card-head{display:flex;align-items:center;gap:12px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--border)}
.fine-card-head svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:1.8;flex-shrink:0}
.fine-card-head h3{font-size:1.0625rem;overflow-wrap:break-word}
.fine-tier+.fine-tier{margin-top:22px;padding-top:22px;border-top:1px dashed var(--border)}
.fine-amount{font-family:var(--font-display);font-weight:700;font-size:clamp(1.875rem,5vw,2.75rem);line-height:1.05;letter-spacing:-.02em;color:var(--text-1);display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.fine-amount .fine-unit{font-size:clamp(1rem,2.4vw,1.25rem);color:var(--accent-text)}
.fine-or{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin:6px 0 4px}
.fine-pct{font-family:var(--font-display);font-weight:700;font-size:clamp(1.125rem,2.8vw,1.375rem);color:var(--accent-text)}
.fine-desc{font-size:0.875rem;color:var(--text-2);line-height:1.6;margin-top:10px}
.fine-basis{font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.05em;color:var(--text-3);margin-top:10px}
.fine-hint{margin-top:clamp(24px,4vw,32px);padding:20px 22px;border:1px solid var(--border);border-left:2px solid var(--accent);border-radius:10px;background:var(--surface);font-size:0.875rem;color:var(--text-2);line-height:1.65}
.fine-hint strong{color:var(--text-1)}
/* ===== REFERENZFAELLE ===== */
.cases-head{max-width:880px;margin-bottom:clamp(32px,5vw,48px)}
/* Die Einleitung bleibt auf angenehmer Zeilenlaenge; nur die Ueberschrift darf
die volle Breite nutzen, sonst bricht "Datenschutzverstoesse" mitten im Wort. */
.cases-head p{max-width:720px}
.cases-head h2{margin-bottom:18px}
.cases-head p{color:var(--text-2)}
.case-list{display:grid;gap:18px}
.case{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden;transition:border-color .35s var(--ease-out),box-shadow .35s var(--ease-out),transform .3s}
.case:hover{border-color:var(--border-accent);transform:translateY(-2px)}
/* Kopfzeile ist ein