/* ==========================================================================
ESBYTE GmbH — Designsystem
Relaunch 2026 · Lato selbst gehostet · CI-Farben unverändert
Struktur: 1 Tokens · 2 Reset · 3 Typografie · 4 Layout · 5 Komponenten
6 Sektionen · 7 Illustrationen · 8 Formulare · 9 Blog
10 Utilities · 11 Motion · 12 Print
========================================================================== */
/* ---------- 0. Fonts ---------------------------------------------------- */
@font-face{font-family:Lato;src:url("/assets/fonts/lato-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Lato;src:url("/assets/fonts/lato-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Lato;src:url("/assets/fonts/lato-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Lato;src:url("/assets/fonts/lato-300i.woff2") format("woff2");font-weight:300;font-style:italic;font-display:swap}
/* ---------- 1. Tokens --------------------------------------------------- */
:root{
/* CI-Farben */
--esbyte-teal:#337d7f;
--esbyte-teal-dark:#245c5e;
--esbyte-teal-light:#4fa8aa;
--esbyte-gray-dark:#4a4a4a;
--esbyte-gray-mid:#888888;
--esbyte-gray-light:#f2f2f2;
--esbyte-white:#ffffff;
/* CI-konforme Abdunklungen / Aufhellungen */
--teal-deep:#16403f;
--teal-ink:#0f2e2d;
--teal-wash:#e8f1f1;
--line:#e2e4e4;
--line-strong:#cdd3d3;
/* Rollen */
/* Teal #337d7f bleibt Flächen-, Icon- und Headline-Farbe.
Für Kleintext und Fließtext-Links gilt die dunkle CI-Variante:
#245c5e erreicht auf allen hellen Flächen der Seite mindestens
6,4:1 und damit sicher WCAG AA (Teal 4,5:1 nur auf reinem Weiß). */
--teal-text:var(--esbyte-teal-dark);
--bg:var(--esbyte-white);
--bg-alt:var(--esbyte-gray-light);
--text:var(--esbyte-gray-dark);
--text-quiet:#6b6b6b;
--heading:#37403f;
--font-primary:Lato,"Montserrat","Open Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
--font-body:var(--font-primary);
/* Abstände */
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
--s6:32px; --s7:48px; --s8:64px; --s9:80px; --s10:112px; --s11:144px;
--gutter:clamp(1.25rem,4vw,2.5rem);
--section-y:clamp(4rem,8vw,7.5rem);
--section-y-sm:clamp(3rem,5vw,4.5rem);
/* Maße */
--wrap:1200px;
--wrap-narrow:900px;
--measure:70ch;
--measure-tight:62ch;
/* Radien & Schatten */
--r-sm:6px; --r-md:10px; --r-lg:16px; --r-pill:999px;
--shadow:0 1px 2px rgba(15,46,45,.05),0 8px 24px -12px rgba(15,46,45,.16);
--shadow-lift:0 2px 4px rgba(15,46,45,.06),0 18px 40px -18px rgba(15,46,45,.24);
--t-fast:120ms cubic-bezier(.2,.6,.3,1);
--t:180ms cubic-bezier(.2,.6,.3,1);
--header-h:104px;
}
@media (max-width:1023px){:root{--header-h:76px}}
/* ---------- 2. Reset --------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
margin:0;background:var(--bg);color:var(--text);
font:400 1.0625rem/1.65 var(--font-body);
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
img{background:var(--esbyte-gray-light)}
ul,ol{margin:0;padding:0}
button{font:inherit;color:inherit}
:where(h1,h2,h3,h4,p,figure,blockquote,dl,dd){margin:0}
hr{border:0;border-top:1px solid var(--line);margin:var(--s7) 0}
::selection{background:var(--esbyte-teal);color:#fff}
/* ---------- 3. Typografie ---------------------------------------------- */
h1,h2,h3,h4{
color:var(--heading);font-weight:700;
line-height:1.15;letter-spacing:-.015em;
overflow-wrap:break-word;
/* Seit 29.09.2026 keine automatische Silbentrennung in Überschriften mehr:
Sie trennte Wörter wie „Schil-dern“ oder „Prozessbera-tung“ an Stellen,
die im Deutschen falsch aussehen. Umbrochen wird jetzt nur noch an
echten Bindestrichen und an gezielt gesetzten weichen Trennstellen
(). overflow-wrap bleibt als Notbremse gegen Überlaufen. */
-webkit-hyphens:manual;hyphens:manual;text-wrap:balance;
}
.display{font-size:clamp(2.05rem,1.2rem + 3.5vw,3.9rem);line-height:1.06;letter-spacing:-.022em}
h1,.h1{font-size:clamp(1.9rem,1.25rem + 2.4vw,3.05rem);line-height:1.1}
h2,.h2{font-size:clamp(1.5rem,1.1rem + 1.5vw,2.25rem);line-height:1.18}
h3,.h3{font-size:clamp(1.14rem,1.04rem + .45vw,1.375rem);line-height:1.32;letter-spacing:-.01em}
h4,.h4{font-size:1.0625rem;line-height:1.4;letter-spacing:0}
.kicker{
display:block;font-size:.8125rem;font-weight:700;line-height:1.3;
letter-spacing:.14em;text-transform:uppercase;color:var(--teal-text);
margin-bottom:var(--s3);hyphens:none;
}
.kicker--light{color:var(--esbyte-teal-light)}
.lead{font-size:clamp(1.075rem,1rem + .38vw,1.28rem);line-height:1.6;max-width:var(--measure)}
.claim{font-weight:300;font-style:italic;color:var(--text-quiet)}
/* Der Positionierungssatz. Er ist kein Zitat — .situation gehoert den
Kundenstimmen — und keine Randbemerkung wie .claim, das bewusst leise
und grau ist. Deshalb eine eigene, sparsame Auszeichnung: eine Stufe
ueber dem Fliesstext, in Teal, mittig, mit Luft darum. Bewusst leichter
Schnitt: Der Satz soll gelesen, nicht gerufen werden. */
.statement{
font-size:clamp(1.2rem,1.05rem + .6vw,1.6rem);line-height:1.4;
font-weight:300;color:var(--teal-text);
max-width:34ch;margin-inline:auto;text-align:center;text-wrap:balance;
}
.small{font-size:.9375rem;line-height:1.55}
.tiny{font-size:.8125rem;line-height:1.5}
.teal{color:var(--esbyte-teal)} /* nur in Display-/H1-Größe verwenden */
.quiet{color:var(--text-quiet)}
strong,b{font-weight:700}
strong.hl{color:var(--teal-text)}
.prose>*+*{margin-top:1.15em}
.prose{max-width:var(--measure)}
.prose h2{margin-top:2.2em;margin-bottom:.15em}
.prose h3{margin-top:1.9em;margin-bottom:.1em}
.prose h4{margin-top:1.6em;margin-bottom:.1em;color:var(--teal-text);
font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.prose ul,.prose ol{padding-left:1.35em;display:flex;flex-direction:column;gap:.5em}
.prose ul{list-style:none;padding-left:0}
.prose ul>li{position:relative;padding-left:1.45em}
.prose ul>li::before{
content:"";position:absolute;left:.15em;top:.62em;
width:7px;height:7px;border-radius:50%;background:var(--esbyte-teal-light);
}
.prose ol{list-style:decimal}
.prose ol>li::marker{color:var(--teal-text);font-weight:700}
.prose blockquote{
margin:1.8em 0;padding:var(--s5) var(--s6);background:var(--teal-wash);
border-left:3px solid var(--esbyte-teal);border-radius:0 var(--r-sm) var(--r-sm) 0;
font-weight:300;font-style:italic;font-size:1.075rem;
}
.prose blockquote p+p{margin-top:.8em}
.prose img,.prose figure{border-radius:var(--r-md);margin:2em 0}
.prose figcaption{font-size:.875rem;color:var(--text-quiet);margin-top:.6em}
/* Aufmacherbild eines Blogartikels. Es steht bewusst ausserhalb von .prose,
damit es die volle Spaltenbreite nutzt und nicht auf die Lesebreite
(--measure) begrenzt wird. Die festen Masse stehen im img-Tag gegen
Layoutspruenge, deshalb hier height:auto — sonst verzerrt das Bild. */
.post-lead{margin:0 0 var(--s7)}
.post-lead img{
display:block;width:100%;height:auto;border-radius:var(--r-md);
background:var(--esbyte-gray-light)}
.prose code{
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
background:var(--esbyte-gray-light);padding:.15em .4em;border-radius:4px;
}
.prose hr{margin:2.4em 0}
/* Links */
a{color:var(--teal-text);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}
/* Links im Textfluss müssen auch ohne Farbe erkennbar sein (WCAG 1.4.1).
Bewusst nur Fließtext-Kontexte: Navigations- und Listenlinks brauchen das
nicht, dort ergibt sich die Erkennbarkeit aus der Position. */
p a:not([class]),td a:not([class]),label a:not([class]),.check label a,
.field__hint a,.formnote a,figcaption a,dd a:not([class]),.videobox__cap a,
.small a:not([class]),.tiny a:not([class]),.contactbox__list a{
text-decoration:underline;text-decoration-thickness:1px;
text-decoration-color:var(--esbyte-teal-light);
}
p a:not([class]):hover,label a:not([class]):hover,.check label a:hover{
text-decoration-color:var(--teal-text);
}
.prose a{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--esbyte-teal-light)}
.prose a:hover{text-decoration-color:var(--teal-text)}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
outline:3px solid var(--esbyte-teal-light);outline-offset:2px;border-radius:3px;
}
/* ---------- 4. Layout -------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:var(--wrap-narrow)}
.section{padding-block:var(--section-y)}
.section--sm{padding-block:var(--section-y-sm)}
.section--alt{background:var(--bg-alt)}
.section--wash{background:var(--teal-wash)}
.section--dark{background:var(--teal-deep);color:#fff}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
.section--dark .quiet{color:#c3d4d3}
.section--dark a{color:#a9dcdc}
.section--teal{background:var(--esbyte-teal);color:#fff}
.section--teal h2,.section--teal h3{color:#fff}
.section-head{max-width:52ch;margin-bottom:var(--s8)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head p{margin-top:var(--s4);color:var(--text)}
.section--dark .section-head p{color:#d3e0df}
.grid{display:grid;gap:var(--s5)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5rem),1fr))}
.split{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (min-width:900px){
.split{grid-template-columns:1fr 1fr}
.split--wide-text{grid-template-columns:1.15fr .85fr}
.split--wide-media{grid-template-columns:.85fr 1.15fr}
.split--flip>.split__media{order:-1}
}
/* Oberkante statt Mitte. Bei stark unterschiedlich hohen Spalten — Text
gegen Formularkarte — hängt align-items:center die kürzere Spalte mittig
in die Höhe der längeren, und darüber wie darunter bleibt Leerraum. */
.split--top{align-items:start}
.stack{display:flex;flex-direction:column}
.stack>*+*{margin-top:var(--s4)}
.stack-lg>*+*{margin-top:var(--s6)}
.row{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center}
/* ---------- 5. Komponenten --------------------------------------------- */
/* 5.1 Buttons */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.55em;
min-height:48px;padding:.72em 1.5em;border:1.5px solid transparent;
border-radius:var(--r-sm);font-weight:700;font-size:1rem;line-height:1.2;
text-decoration:none;cursor:pointer;text-align:center;
transition:background var(--t),border-color var(--t),color var(--t),transform var(--t-fast);
hyphens:none;
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--esbyte-teal);border-color:var(--esbyte-teal);color:#fff}
.btn--primary:hover{background:var(--esbyte-teal-dark);border-color:var(--esbyte-teal-dark);color:#fff}
.btn--secondary{background:transparent;border-color:var(--esbyte-teal);color:var(--teal-text)}
.btn--secondary:hover{background:var(--teal-wash)}
/* Doppelte Klasse, damit .section--dark a die Buttonfarbe nicht überschreibt. */
.btn--on-dark.btn--on-dark{background:#fff;border-color:#fff;color:var(--teal-deep)}
.btn--on-dark.btn--on-dark:hover{background:var(--teal-wash);border-color:var(--teal-wash);color:var(--teal-ink)}
/* Störungsmeldung. Bewusst kein Rot und kein neuer Farbton: die dunkelste
CI-Abdunklung ist im weißen Header das visuell schwerste Element und wird
deshalb gesehen — ohne Angstoptik und ohne den Vertriebs-CTA zu kopieren. */
.btn--alarm.btn--alarm{
background:var(--teal-ink);border-color:var(--teal-ink);color:#fff;
}
.btn--alarm.btn--alarm:hover{background:var(--teal-deep);border-color:var(--teal-deep);color:#fff}
.btn--alarm .i{width:18px;height:18px;flex:none}
/* Erst ab 1180px ist Platz für beide Knöpfe mit vollem Text. Darunter fällt
der Knopf weg — ein unbeschriftetes Warndreieck sagt niemandem etwas. Die
Störungsmeldung bleibt dort über die beschriftete Pille in der
Utility-Leiste und über die mobile Navigation erreichbar. */
.header-alarm{display:none}
@media (min-width:1180px){.header-alarm{display:inline-flex}}
.btn--ghost-light.btn--ghost-light{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.btn--ghost-light.btn--ghost-light:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.btn--sm{min-height:40px;padding:.5em 1.1em;font-size:.9375rem}
.btn--block{width:100%}
.btn .i{width:1.1em;height:1.1em;flex:none}
.arrowlink{
display:inline-flex;align-items:center;gap:.5em;font-weight:700;
color:var(--teal-text);text-decoration:none;hyphens:none;
}
.arrowlink .i{width:1.05em;height:1.05em;transition:transform var(--t)}
.arrowlink:hover{text-decoration:underline}
.arrowlink:hover .i{transform:translateX(3px)}
.arrowlink--light{color:#a9dcdc}
/* 5.2 Karten */
.card{
position:relative;display:flex;flex-direction:column;
background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
padding:clamp(1.4rem,3vw,2rem);
transition:border-color var(--t),box-shadow var(--t);
}
.section--alt .card,.section--wash .card{background:#fff}
.card p{color:var(--text)}
.card__body{margin-top:var(--s3)}
.card__foot{margin-top:auto;padding-top:var(--s5)}
.card--link:hover{border-color:var(--esbyte-teal);box-shadow:var(--shadow-lift)}
.card--link .card__title a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.card--flat{background:var(--esbyte-gray-light);border-color:transparent}
.card--dark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.card--dark p{color:#d3e0df}
.card__icon{
width:48px;height:48px;display:grid;place-items:center;flex:none;
border-radius:var(--r-sm);background:var(--teal-wash);color:var(--esbyte-teal);
margin-bottom:var(--s5);
}
.card__icon .i{width:26px;height:26px}
.card__icon{color:var(--teal-text)}
.card--dark .card__icon{background:rgba(255,255,255,.1);color:#a9dcdc}
.card__num{
font-size:.8125rem;font-weight:700;letter-spacing:.1em;
color:var(--teal-text);margin-bottom:var(--s3);
}
.section--dark .card__num,.card--dark .card__num{color:var(--esbyte-teal-light)}
/* 5.3 Feature-Karte mit großem Angebot */
.offer{
display:flex;flex-direction:column;gap:var(--s5);
background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
padding:clamp(1.6rem,3.5vw,2.75rem);
}
.offer__label{
display:inline-flex;align-items:center;gap:.5em;align-self:flex-start;
background:var(--teal-wash);color:var(--esbyte-teal-dark);
font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
padding:.42em .9em;border-radius:var(--r-pill);hyphens:none;
}
.offer ul{list-style:none;display:flex;flex-direction:column;gap:.6em}
.offer ul li{position:relative;padding-left:1.75em;font-size:1rem}
.offer ul li::before{
content:"";position:absolute;left:0;top:.42em;width:1.05em;height:1.05em;
border-radius:50%;background:var(--teal-wash);
}
.offer ul li::after{
content:"";position:absolute;left:.3em;top:.72em;width:.45em;height:.24em;
border-left:2px solid var(--esbyte-teal);border-bottom:2px solid var(--esbyte-teal);
transform:rotate(-45deg);
}
/* 5.4 Situations-Zitate */
.situations{display:grid;gap:var(--s4);align-items:start;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.situation{
border-left:3px solid var(--esbyte-teal-light);
padding:var(--s4) 0 var(--s4) var(--s5);
font-weight:300;font-style:italic;font-size:1.075rem;line-height:1.55;
color:var(--heading);
}
.section--dark .situation{color:#e6efee;border-left-color:var(--esbyte-teal-light)}
/* 5.5 Timeline / Prozess */
.timeline{list-style:none;display:grid;gap:var(--s6);counter-reset:tl}
@media (min-width:820px){
.timeline{grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--s5)}
.timeline>li::after{
content:"";position:absolute;top:23px;left:calc(50% + 32px);right:0;
height:2px;background:var(--line-strong);
}
.timeline>li:last-child::after{display:none}
.timeline>li{text-align:center;align-items:center}
}
.timeline>li{position:relative;display:flex;flex-direction:column;gap:var(--s3)}
.timeline__dot{
counter-increment:tl;width:48px;height:48px;flex:none;border-radius:50%;
background:var(--esbyte-teal-dark);color:#fff;display:grid;place-items:center;
font-weight:700;font-size:1.05rem;position:relative;z-index:1;
}
.timeline__dot::before{content:counter(tl,decimal-leading-zero)}
.section--dark .timeline__dot{background:var(--esbyte-teal-light);color:var(--teal-ink)}
.section--dark .timeline>li::after{background:rgba(255,255,255,.22)}
/* 5.6 Layer-Diagramm (Zusammenhang) */
.layers{list-style:none;display:flex;flex-direction:column;gap:2px;border-radius:var(--r-md);overflow:hidden}
.layers>li{
display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:start;
background:#fff;border:1px solid var(--line);padding:var(--s5);
}
.layers>li:first-child{border-radius:var(--r-md) var(--r-md) 0 0}
.layers>li:last-child{border-radius:0 0 var(--r-md) var(--r-md)}
.layers .i{width:24px;height:24px;color:var(--teal-text);margin-top:2px}
.layers h3{font-size:1.0625rem;margin-bottom:.25em}
.layers p{font-size:.9375rem;color:var(--text-quiet)}
/* 5.7 Symptom-Karten (Die ESBYTE-Praxis) */
.symptoms{
display:grid;gap:var(--s4);align-items:start;
grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr));
}
.symptom{
background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
overflow:hidden;transition:border-color var(--t),box-shadow var(--t);
}
.symptom:hover,.symptom[open]{border-color:var(--esbyte-teal);box-shadow:var(--shadow)}
.symptom>summary{
display:flex;align-items:flex-start;gap:var(--s4);
padding:clamp(1.15rem,2.5vw,1.6rem);cursor:pointer;list-style:none;min-height:48px;
}
.symptom>summary::-webkit-details-marker{display:none}
.symptom__txt{flex:1 1 auto;min-width:0}
.symptom__dx{
font-size:.75rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
color:var(--teal-text);display:block;margin-bottom:.4em;hyphens:none;
}
.symptom__q{font-size:1.075rem;font-weight:700;color:var(--heading);line-height:1.35}
.symptom__chev{
flex:none;width:32px;height:32px;border-radius:50%;background:var(--teal-wash);
color:var(--esbyte-teal-dark);display:grid;place-items:center;
transition:transform var(--t),background var(--t);margin-top:2px;
}
.symptom__chev .i{width:16px;height:16px}
.symptom[open] .symptom__chev{transform:rotate(180deg);background:var(--esbyte-teal);color:#fff}
.symptom__panel{padding:0 clamp(1.15rem,2.5vw,1.6rem) clamp(1.3rem,2.5vw,1.75rem)}
.symptom__panel>*+*{margin-top:.9em}
.symptom__panel p{font-size:1rem}
.symptom__rx{
background:var(--teal-wash);border-radius:var(--r-sm);
padding:var(--s4) var(--s5);font-size:1rem;
}
.symptom__rx strong{color:var(--esbyte-teal-dark);display:block;margin-bottom:.25em}
/* 5.8 Faktenband */
.facts{list-style:none;display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr))}
.facts dt,.facts .facts__n{
font-size:clamp(1.6rem,1.2rem + 1.4vw,2.35rem);font-weight:700;
color:var(--esbyte-teal);line-height:1.05;letter-spacing:-.02em; /* Großtext: 3:1 genügt */
}
.section--dark .facts .facts__n{color:var(--esbyte-teal-light)}
.facts .facts__l{font-size:.9375rem;color:var(--text-quiet);margin-top:.3em}
.section--dark .facts .facts__l{color:#c3d4d3}
/* 5.9 Trust-Zeile */
.trustbar{
display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);align-items:center;
font-size:.9375rem;color:var(--text-quiet);
}
.trustbar li{display:flex;align-items:center;gap:.5em;list-style:none}
/* nowrap je Eintrag: Umbrechen darf die Leiste zwischen den Angaben, nie
innerhalb einer. „Oberhaching &" auf der einen und „Rottach-Egern" auf der
nächsten Zeile ist keine Angabe mehr, sondern ein Fehler.
Bewusst NUR im Hero: Dieselbe .trustbar trägt im CTA-Band ganze Sätze
(„Bestandskunde mit akuter Störung? …"). Global gesetzt hat die Regel dort
bei 360 px Breite einen Überlauf von 30 px erzeugt. */
.hero__trust .trustbar li{white-space:nowrap}
.trustbar .i{width:18px;height:18px;color:var(--teal-text);flex:none}
/* 5.10 CTA-Band */
.cta-band{background:var(--teal-deep);color:#fff;border-radius:var(--r-lg);padding:clamp(1.75rem,4.5vw,3.25rem)}
.cta-band h2{color:#fff;max-width:34ch}
.cta-band p{color:#d3e0df;max-width:56ch;margin-top:var(--s4)}
.cta-band__actions{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s6)}
.cta-band__note{margin-top:var(--s5);font-size:.875rem;color:#a8bebd}
.cta-band__note a{color:#c8e4e3}
/* 5.11 Notice / Hinweis */
.notice{
display:flex;gap:var(--s4);align-items:flex-start;
background:var(--teal-wash);border-radius:var(--r-md);padding:var(--s5) var(--s6);
border-left:3px solid var(--esbyte-teal);
}
.notice .i{width:22px;height:22px;color:var(--esbyte-teal-dark);flex:none;margin-top:3px}
.notice p{font-size:1rem}
.notice--todo{background:#fdf6e6;border-left-color:#c9962a}
.notice--todo .i{color:#a37a1c}
/* 5.12 Definitionsliste (FAQ) */
.faq{display:flex;flex-direction:column;gap:var(--s3)}
.faq details{border:1px solid var(--line);border-radius:var(--r-md);background:#fff}
.faq details[open]{border-color:var(--esbyte-teal)}
.faq summary{
display:flex;justify-content:space-between;gap:var(--s4);align-items:center;
padding:var(--s5);font-weight:700;cursor:pointer;list-style:none;
color:var(--heading);min-height:48px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .i{width:18px;height:18px;color:var(--teal-text);flex:none;transition:transform var(--t)}
.faq details[open] summary .i{transform:rotate(180deg)}
.faq__panel{padding:0 var(--s5) var(--s5)}
.faq__panel>*+*{margin-top:.8em}
/* 5.11b Team-Visual — Bildgrund entspricht --bg-alt, deshalb randlos.
Begrenzte Breite, damit es die Namensliste einleitet statt sie zu erdrücken. */
.teamvisual{max-width:50rem;margin:0 auto var(--s7)}
.teamvisual img{width:100%;height:auto;display:block;background:none}
/* 5.12b Merkmalsliste (Label/Wert, kompakt — z. B. Betreuungsmodell) */
.deflist{margin-top:var(--s5);font-size:.9375rem}
.deflist dt{
font-weight:700;color:var(--heading);
padding-top:var(--s4);border-top:1px solid var(--line);
}
.deflist dt:first-child{padding-top:0;border-top:0}
.deflist dd{color:var(--text-quiet);margin:.25em 0 var(--s4)}
.deflist dd:last-child{margin-bottom:0}
@media (min-width:36em){
.deflist{display:grid;grid-template-columns:9rem 1fr;column-gap:var(--s5)}
.deflist dt{grid-column:1}
.deflist dd{grid-column:2;padding-top:var(--s4);border-top:1px solid var(--line);margin:0}
.deflist dt:first-child+dd{padding-top:0;border-top:0}
}
/* 5.12c Zielgruppen-Weiche — schmaler Hinweis auf eine andere Adressatengruppe.
Bewusst zurückhaltend: er soll gefunden werden, aber den Haupttext nicht
um Aufmerksamkeit bringen. */
.aside-switch{
display:grid;gap:var(--s5);align-items:center;
border:1px solid var(--line);border-left:4px solid var(--esbyte-teal);
border-radius:var(--r-md);background:#fff;padding:var(--s6);
}
.aside-switch p{margin:0}
.aside-switch h2{margin-top:.35rem}
@media (min-width:52em){
.aside-switch{grid-template-columns:1fr auto;gap:var(--s7)}
}
/* 5.12d Kurzadresse — die Adresse ist hier selbst der Inhalt, deshalb
monospace-ähnlich groß gesetzt statt in einen Link versteckt. */
.shorturl{
border:1px dashed var(--esbyte-teal);border-radius:var(--r-md);
background:var(--teal-wash);padding:var(--s5) var(--s6);
}
.shorturl__url{
font-size:clamp(1.25rem,1.05rem + .9vw,1.7rem);font-weight:700;
color:var(--teal-text);letter-spacing:-.01em;
margin-block:.15em .35em;word-break:break-all;
}
.shorturl .tiny{margin:0}
/* 5.12g Projektliste (/projekte/, seit 01.10.2026). Alle Projekte stehen
als aufklappbare Zeilen untereinander: Kicker und Titel links, Stand als
kleine Pille rechts, darunter beim Öffnen der ganze Fall. Gleiche Kanten
und Hover wie die Symptom-Karten der ESBYTE-Praxis, nur über die volle
Breite, damit die Liste wie ein Inhaltsverzeichnis gelesen werden kann. */
.projektgruppe{
font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--text-quiet);margin-bottom:var(--s3);
}
.projektgruppe__hinweis{margin:-.25rem 0 var(--s4);max-width:var(--measure)}
.projekte{display:flex;flex-direction:column;gap:var(--s3)}
.projekt{
background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
transition:border-color var(--t),box-shadow var(--t);
}
.projekt:hover,.projekt[open]{border-color:var(--esbyte-teal);box-shadow:var(--shadow)}
.projekt__kopf{
display:grid;grid-template-columns:1fr auto auto;gap:var(--s4) var(--s5);
align-items:center;padding:clamp(1rem,2.4vw,1.4rem) clamp(1.1rem,2.6vw,1.75rem);
cursor:pointer;list-style:none;min-height:56px;
}
.projekt__kopf::-webkit-details-marker{display:none}
.projekt__txt{min-width:0}
.projekt__kicker{
display:block;font-size:.75rem;font-weight:700;letter-spacing:.11em;
text-transform:uppercase;color:var(--teal-text);margin-bottom:.35em;hyphens:none;
}
.projekt__titel{font-size:clamp(1.05rem,1rem + .35vw,1.25rem);line-height:1.35;margin:0}
.projekt__stand{
font-size:.8125rem;line-height:1.3;color:var(--esbyte-teal-dark);
background:var(--teal-wash);padding:.35em .8em;border-radius:var(--r-pill);
white-space:nowrap;
}
.projekt__chev{
width:32px;height:32px;border-radius:50%;background:var(--teal-wash);
color:var(--esbyte-teal-dark);display:grid;place-items:center;
transition:transform var(--t),background var(--t);
}
.projekt__chev .i{width:16px;height:16px}
.projekt[open] .projekt__chev{transform:rotate(180deg);background:var(--esbyte-teal);color:#fff}
.projekt__inhalt{
padding:var(--s2) clamp(1.1rem,2.6vw,1.75rem) clamp(1.4rem,3vw,2rem);
border-top:1px solid var(--line);padding-top:var(--s6);
}
.projekt__vorspann{margin-bottom:var(--s5);max-width:var(--measure)}
/* Auf dem Telefon rückt der Stand unter den Titel, sonst bleibt für den
Titel zu wenig Breite. */
@media (max-width:640px){
.projekt__kopf{grid-template-columns:1fr auto}
.projekt__stand{grid-row:2;grid-column:1;justify-self:start}
.projekt__chev{grid-row:1;grid-column:2}
}
/* 5.12f Gerahmtes Illustrationsmotiv — die Praxis-Motive bringen ihren
eigenen hellen Grund mit; abgerundete Ecken machen daraus ein Bild statt
einer Fläche, die zufällig anders gefärbt ist. */
/* Tabellen in Blogartikeln. Sie kommen aus dem WordPress-Bestand und sind
dort dreispaltig — auf dem Telefon passt das nicht. Der Wrapper scrollt
waagerecht, damit nicht die ganze Seite waagerecht scrollt. */
.tablewrap{overflow-x:auto;margin:2em 0;-webkit-overflow-scrolling:touch}
.tablewrap table{border-collapse:collapse;width:100%;min-width:34rem;font-size:.9375rem}
.tablewrap th,.tablewrap td{
text-align:left;vertical-align:top;padding:.7em .9em;
border-bottom:1px solid var(--line);
}
.tablewrap thead th{
background:var(--teal-wash);color:var(--heading);font-weight:700;
border-bottom:1px solid var(--line-strong);
}
.tablewrap tbody tr:last-child td,.tablewrap tbody tr:last-child th{border-bottom:0}
.illu-framed{margin:0;border-radius:var(--r-lg);overflow:hidden}
.illu-framed svg{display:block;width:100%;height:auto}
.illu-framed img{display:block;width:100%;height:auto}
/* Schraffierte Szene im Seitenkopf. Anders als die Diagramme ist das ein
Bild und kein Schaubild — es wird deshalb begrenzt, damit es neben der
Überschrift nicht die Hauptrolle übernimmt. */
.illu-wrap--sketch{margin:0;max-width:400px;margin-inline:auto}
/* Illustration statt Schaubild im Seitenkopf (/jobs/, seit 28.09.2026) */
.illu-wrap--bild{margin:0;max-width:560px;margin-inline:auto}
.illu-wrap--bild picture,.teamvisual picture{display:block}
.illu-wrap--bild img{width:100%;height:auto;display:block}
@media (min-width:960px){.illu-wrap--bild{margin-inline-start:auto;margin-inline-end:0}}
@media (min-width:960px){
.illu-wrap--sketch{margin-inline-start:auto;margin-inline-end:0}
}
/* 5.13 Tabelle */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-md)}
table{border-collapse:collapse;width:100%;min-width:34rem;font-size:.9375rem}
th,td{text-align:left;padding:var(--s4) var(--s5);border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:700;color:var(--heading);background:var(--esbyte-gray-light);white-space:nowrap}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
/* 5.14 Breadcrumb */
.crumbs{font-size:.875rem;color:var(--text-quiet);display:flex;flex-wrap:wrap;gap:.4em;list-style:none}
.crumbs li{display:flex;align-items:center;gap:.4em}
.crumbs li+li::before{content:"/";color:var(--line-strong)}
.crumbs a{color:var(--text-quiet);text-decoration:none}
.crumbs a:hover{color:var(--esbyte-teal);text-decoration:underline}
/* 5.15 Team */
.team{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.person{display:flex;gap:var(--s4);align-items:flex-start}
.person__av{
width:56px;height:56px;flex:none;border-radius:50%;background:var(--teal-wash);
color:var(--esbyte-teal-dark);display:grid;place-items:center;
font-weight:700;font-size:1.1rem;letter-spacing:.02em;
}
.person h3{font-size:1.0625rem;margin-bottom:.15em}
.person p{font-size:.9375rem;color:var(--text-quiet)}
/* ---------- 6. Header / Nav -------------------------------------------- */
.skiplink{
position:absolute;left:var(--s4);top:var(--s4);z-index:200;
background:#fff;color:var(--esbyte-teal-dark);font-weight:700;
padding:.7em 1.1em;border-radius:var(--r-sm);box-shadow:var(--shadow);
transform:translateY(-160%);transition:transform var(--t);
}
.skiplink:focus{transform:none}
/* Markenbalken über dem Header: der ESBYTE-Schriftzug über die volle Breite,
wie im Teams-Hintergrund. Die Wortmarke liegt als Fläche hinter der
Direktkontakt-Zeile; der Balken ist deshalb höher als eine reine Utility-
Leiste. Rein dekorativ: aria-hidden, leeres alt, pointer-events:none. */
.topband{position:relative;background:var(--teal-ink);overflow:hidden}
/* Die Wortmarke steckt als Bild IM Stylesheet, nicht als eigenes
in jeder Seite. Grund: Sie erschien bei jedem Seitenwechsel
sichtbar verzögert. Ein mit fetchpriority="low" und
decoding="async" ist genau dafür gebaut, hinten anzustehen — auf einer
Website mit echten Seitenwechseln heißt das: Der Balken ist bei jedem
Klick zuerst leer und die Wortmarke blendet nachträglich ein.
Als Hintergrund im Stylesheet kommt sie mit einer Datei, die der
Browser ohnehin geladen und ein Jahr im Speicher hat, und steht beim
ersten Malen da.
Die 32 % Deckkraft und der dunkle Bandgrund sind fest eingerechnet —
dadurch braucht das Bild keinen Alphakanal und schrumpft von 29 kB auf
4 kB; als Text im Stylesheet sind es 5,4 kB.
background-size:100% auto hält das Verhalten von vorher: Die Marke
nimmt die volle Breite ein, der Rest des Bandes bleibt Teal-Ink —
dieselbe Farbe, die im Bild als Grund steckt, die Kante ist also
unsichtbar. */
.topband__mark{
position:absolute;inset:0;pointer-events:none;
background-image:url("/assets/images/topband-wordmark.webp");
background-size:100% auto;
background-position:center;
background-repeat:no-repeat;
}
.utility{position:relative;background:transparent;color:#cfdedd;font-size:.8125rem}
.utility__in{
display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);align-items:center;
justify-content:flex-end;min-height:clamp(68px,7.5vw,108px);padding-block:8px;
}
/* Reines Weiß, weil die Wortmarke den Grund örtlich aufhellt — #dcebea käme
dort auf 3,6:1 und fiele unter WCAG AA. */
.utility a{color:#fff;display:inline-flex;align-items:center;gap:.45em;text-decoration:none;padding-block:4px}
.utility a:hover{color:#fff;text-decoration:underline}
.utility>.wrap>a{font-weight:700}
.utility .i{width:15px;height:15px;flex:none}
/* Die Störungsmeldung ist der einzige Punkt in dieser Leiste, der im Notfall
gesucht wird — deshalb als helle Pille statt als Textlink. */
.utility .utility__alarm{
background:#fff;color:var(--teal-ink);font-weight:700;
padding:.3em .8em;border-radius:var(--r-pill);
text-decoration:none;white-space:nowrap;
}
.utility .utility__alarm:hover{background:var(--teal-wash);color:var(--teal-ink);text-decoration:none}
.utility__alarm .i{color:var(--teal-deep)}
/* #888888 erreicht auf Weiß nur 3,5:1 und fällt damit unter WCAG AA.
Deshalb hier der ruhige Fließtextgrauton mit 5,7:1. */
.utility__short{color:var(--text-quiet);font-weight:400}
.utility__short::before{content:"·";margin-inline:.5em}
@media (max-width:900px){.utility__short{display:none}}
/* Ab 1180px steht der Störungs-Knopf in der Kopfzeile. Dann verschwindet die
Pille hier — sonst stünde dieselbe Aktion zweimal übereinander. */
@media (min-width:1180px){.utility .utility__alarm{display:none}}
/* Die letzte Ziffer der Telefonnummer schließt bündig mit dem Balken des
letzten „E" der Wortmarke ab.
Die Zahl 1,9375vw ist nicht geschätzt: Die Wortmarke läuft mit width:100%
über die volle Fensterbreite, und im sichtbaren Streifen des Bandes endet
der Mittelbalken des E bei Bildspalte 1569 von 1600 — also bei 98,0625 %.
Die Ober- und Unterbalken laufen bis 1600 durch, die sieht man aber nicht,
weil das Band nur einen waagerechten Streifen des Schriftzugs zeigt.
Deshalb hier bewusst NICHT das Seitenraster: das ließe die Nummer rund
130 px zu weit links stehen. Erst ab 1180 px, denn darunter ist die weiße
Störungs-Pille das letzte Element — und die soll auf dem Raster bleiben,
nicht 7 px vom Fensterrand kleben.
Wird die Wortmarken-Datei ersetzt, muss dieser Wert nachgerechnet werden. */
@media (min-width:1180px){
.utility__in{max-width:none;padding-inline:var(--gutter) 1.9375vw}
}
.site-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line)}
.site-header__in{display:flex;align-items:center;gap:var(--s5);min-height:68px;padding-block:var(--s3)}
.brand{display:flex;align-items:center;flex:none;margin-right:auto}
.brand img{height:52px;width:auto;background:none}
@media (max-width:1023px){.brand img{height:42px}}
.is-condensed .brand img{height:44px}
.is-condensed .site-header__in{min-height:60px}
.site-header{transition:box-shadow var(--t)}
.is-condensed{box-shadow:0 2px 12px -6px rgba(15,46,45,.28)}
.nav{display:none}
@media (min-width:1024px){
.nav{display:flex;align-items:center;gap:var(--s2)}
.nav>ul{display:flex;align-items:center;gap:var(--s1);list-style:none}
.nav a,.nav__toggle{
display:inline-flex;align-items:center;gap:.35em;
padding:.7em .85em;border-radius:var(--r-sm);
font-size:.9688rem;font-weight:700;color:var(--heading);
text-decoration:none;background:none;border:0;cursor:pointer;white-space:nowrap;
}
.nav a:hover,.nav__toggle:hover{color:var(--esbyte-teal);background:var(--esbyte-gray-light);text-decoration:none}
.nav a[aria-current=page]{color:var(--esbyte-teal)}
.nav a[aria-current=page]::after{
content:"";position:absolute;left:.85em;right:.85em;bottom:.15em;height:2px;background:var(--esbyte-teal)
}
.nav li{position:relative}
.nav__toggle .i{width:14px;height:14px;transition:transform var(--t)}
.nav__item--has-menu[data-open=true] .nav__toggle .i{transform:rotate(180deg)}
.nav__menu{
position:absolute;top:calc(100% + 8px);left:0;min-width:22rem;
background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
box-shadow:var(--shadow-lift);padding:var(--s3);list-style:none;
display:none;
}
.nav__item--has-menu[data-open=true] .nav__menu{display:block}
.nav__menu a{display:block;padding:var(--s3) var(--s4);border-radius:var(--r-sm);font-weight:700}
.nav__menu a span{display:block;font-weight:400;font-size:.875rem;color:var(--text-quiet);margin-top:2px}
.nav__menu a:hover span{color:var(--esbyte-teal-dark)}
}
.header-cta{display:none}
@media (min-width:1024px){.header-cta{display:inline-flex}}
.burger{
display:inline-flex;align-items:center;justify-content:center;gap:.5em;
width:auto;min-height:44px;padding:.5em .8em;margin-left:auto;
background:none;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);
color:var(--heading);font-weight:700;font-size:.9375rem;cursor:pointer;
}
.burger .i{width:22px;height:22px}
@media (min-width:1024px){.burger{display:none}}
.mobile-nav{
position:fixed;inset:0;z-index:150;background:#fff;
display:flex;flex-direction:column;overflow-y:auto;
transform:translateY(-8px);opacity:0;visibility:hidden;
transition:opacity var(--t),transform var(--t),visibility var(--t);
}
.mobile-nav[data-open=true]{transform:none;opacity:1;visibility:visible}
.mobile-nav__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s4) var(--gutter);border-bottom:1px solid var(--line)}
.mobile-nav__top img{height:40px}
.mobile-nav__close{
display:inline-flex;align-items:center;gap:.4em;min-height:44px;padding:.5em .8em;
background:none;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);
font-weight:700;cursor:pointer;color:var(--heading);
}
.mobile-nav__close .i{width:20px;height:20px}
.mobile-nav__body{padding:var(--s5) var(--gutter) var(--s9);display:flex;flex-direction:column;gap:var(--s2)}
.mobile-nav__body>ul{list-style:none;display:flex;flex-direction:column}
.mobile-nav__body>ul>li{border-bottom:1px solid var(--line)}
/* Bewusst auf die Navigationsliste eingegrenzt: vorher traf diese Regel auch
die Buttons im Panel-Fuß und überschrieb dort Textfarbe und Ausrichtung —
„Kontakt aufnehmen" stand dunkelgrau auf Teal (rund 2:1). */
.mobile-nav__body>ul a,.mobile-nav__body summary{
display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
padding:var(--s5) 0;font-size:1.125rem;font-weight:700;color:var(--heading);
text-decoration:none;min-height:56px;cursor:pointer;list-style:none;
}
.mobile-nav__body summary::-webkit-details-marker{display:none}
.mobile-nav__body summary .i{width:18px;height:18px;color:var(--esbyte-teal);transition:transform var(--t)}
.mobile-nav__body details[open] summary .i{transform:rotate(180deg)}
.mobile-nav__sub{list-style:none;padding:0 0 var(--s4) var(--s4);display:flex;flex-direction:column}
.mobile-nav__sub a{
display:block;font-size:1rem;font-weight:700;padding:var(--s4) 0;
min-height:48px;color:var(--heading);
}
.mobile-nav__sub a span{display:block;font-weight:400;font-size:.875rem;color:var(--text-quiet);margin-top:2px}
.mobile-nav__foot{margin-top:var(--s6);display:flex;flex-direction:column;gap:var(--s4)}
.mobile-nav__foot .btn{width:100%}
body.is-locked{overflow:hidden}
/* ---------- 7. Hero & Illustrationen ---------------------------------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(2.75rem,6vw,5.5rem) clamp(3rem,7vw,6rem)}
/* Seit 01.10.2026 ohne Innenabstand unten: Den unteren Abschluss bildet die
Stadt (.hero__stadt) mit der Vertrauensleiste auf ihrem Grund. Oben
knapper als die übrigen Seitenköpfe (Test 01.10.2026), damit auf einem
Bildschirm mit 900 px Höhe die Turmspitzen ohne Scrollen zu sehen sind. */
.hero--home{padding-top:clamp(1.75rem,3.5vw,3rem);padding-bottom:0}
.hero__grid{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (min-width:960px){.hero__grid{grid-template-columns:1.08fr .92fr}}
.hero p.lead{margin-top:var(--s5)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s7)}
.hero__trust{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line)}
.hero--page{background:var(--esbyte-gray-light)}
.hero--page .hero__grid{align-items:center}
.hero--dark{background:var(--teal-deep);color:#fff}
.hero--dark h1,.hero--dark .display{color:#fff}
.hero--dark .lead{color:#d5e2e1}
.hero--dark .hero__trust{border-top-color:rgba(255,255,255,.18)}
.hero--dark .trustbar{color:#bcd0cf}
.hero--dark .trustbar .i{color:var(--esbyte-teal-light)}
/* Punktraster aus dem Logo-Schlusspunkt — dezent, nie dominant */
.dotfield{position:relative}
.dotfield::before{
content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
background-image:radial-gradient(currentColor 1.4px,transparent 1.4px);
background-size:26px 26px;color:var(--esbyte-teal);opacity:.13;
-webkit-mask-image:radial-gradient(72% 62% at 82% 12%,#000 0%,transparent 72%);
mask-image:radial-gradient(72% 62% at 82% 12%,#000 0%,transparent 72%);
}
.dotfield>*{position:relative;z-index:1}
.hero--dark.dotfield::before{color:#fff;opacity:.16}
/* Der Standard-Ausschnitt sitzt oben rechts. Im Kontaktabschnitt steht dort
die weiße Formularkarte — das Raster lag dahinter und war nicht zu sehen.
Hier liegt es tiefer, reicht weiter nach links und ist etwas kräftiger,
damit es im Grund um die Karte herum wirkt. */
.dotfield--form::before{
opacity:.2;
-webkit-mask-image:radial-gradient(88% 86% at 72% 46%,#000 0%,transparent 74%);
mask-image:radial-gradient(88% 86% at 72% 46%,#000 0%,transparent 74%);
}
/* Münchner Silhouette am unteren Rand des Startseiten-Hero.
Der doppelte Klassenname ist Absicht: `.dotfield>*` setzt jedes direkte
Kind auf position:relative und z-index:1 und hat dieselbe Spezifität. Ohne
die Verdopplung entscheidet die Reihenfolge im Stylesheet — und damit ein
Detail, das beim nächsten Umsortieren kippt.
Die Maske blendet nach oben aus: Unten trägt die Silhouette, oben ist sie
weg, bevor sie die Überschrift erreicht. */
.hero__skyline.hero__skyline{
position:relative;z-index:0;pointer-events:none;
opacity:.62;
}
/* Seit 01.10.2026 steht die Silhouette nicht mehr hinter dem Inhalt, sondern
darunter (Christine: zu weit oben, Turmspitzen liefen durch den Knopf
„Wie wir beraten“ und an die Beschriftung des Knotens). Der Abstand nach
oben ist die Luft zwischen Knöpfen und Turmspitzen. */
.hero__stadt{position:relative;margin-top:clamp(1rem,2.5vw,2.25rem)}
/* Höhe aus dem Seitenverhältnis, nicht fest gesetzt. Eine feste Höhe plus
preserveAspectRatio="slice" hatte oben beschnitten — und damit genau die
Zwiebeltürme abgeschnitten, an denen München erkennbar ist. */
.hero__skyline svg{display:block;width:100%;height:auto;max-height:340px}
/* Seit 01.10.2026 ein Bild statt SVG. background:none, weil der Reset
jedem einen grauen Platzhaltergrund gibt; der lag sonst als Kasten
hinter der transparenten Silhouette. */
.hero__skyline img{display:block;width:100%;height:auto;background:none}
/* Nach oben wird die Silhouette leiser, aber nie unsichtbar: Bei einem
Verlauf bis transparent verschwanden die Turmspitzen im Weiß und übrig
blieb ein Streifen Dächer. */
.hero__skyline{
-webkit-mask-image:linear-gradient(to top,#000 0%,#000 70%,rgba(0,0,0,.42) 100%);
mask-image:linear-gradient(to top,#000 0%,#000 70%,rgba(0,0,0,.42) 100%);
}
/* Auf dem Telefon wäre die Silhouette bei voller Breite nur ein 80 px hoher
Streifen. Deshalb wird sie überbreit gezeichnet und mittig ausgeschnitten —
die Wahrzeichen liegen in der Bildmitte und bleiben dadurch im Bild.
Den Überstand kappt das overflow:hidden des Hero. */
@media (max-width:760px){
/* max-width:none ist Pflicht: Der Reset setzt `svg{max-width:100%}`, und
ohne diese Zeile wurde die 190 % ignoriert — der negative Rand blieb
aber, sodass die Silhouette nur verschoben statt vergrößert war. */
.hero__skyline svg,.hero__skyline img{width:190%;max-width:none;margin-inline-start:-45%}
}
/* Die Vertrauensleiste läuft seit 01.10.2026 auf dem Grund der Stadt: ein
Streifen in genau dem Ton, den die unterste Reihe der Silhouette bei
62 % Deckkraft auf Weiß ergibt (#acc7c8, aus dem gerenderten Bild
gemessen). So steht die Stadt auf dem Streifen, ohne Kante. Wird das Bild
oder die Deckkraft geändert, den Ton neu messen.
Schrift in der Überschriftenfarbe: 6,0:1 auf dem Streifen. Weiß im
Negativ wäre nur 1,9:1 und deshalb nicht lesbar genug. */
.hero--home .hero__trust{
margin-top:0;padding-block:14px;border-top:0;
background:#acc7c8;position:relative;z-index:1;
}
.hero--home .trustbar{color:var(--heading)}
.hero--home .trustbar .i{color:var(--teal-ink)}
.illu{width:100%;height:auto;display:block}
/* Die Hero-Grafik ist zweite Stimme: begrenzt, damit ihre großen Wörter
deutlich kleiner bleiben als die H1 und der obere Bereich ruhig wirkt. */
/* width:100% ist hier Pflicht, nicht Kosmetik: Ein Rasterelement mit
margin-inline-start:auto schrumpft auf seine fit-content-Breite, und die
ist bei einem