/* gruenderberatung-hausbrandt.de. Gestaltung nach DESIGN.md: Schaufenster einer Neueröffnung. Glas (Petrol), Blattgold, Young Serif und Hanken Grotesk. */
@font-face{font-family:"Young Serif";font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/young-serif-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/hanken-grotesk-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:500;font-style:normal;font-display:swap;src:url(/assets/fonts/hanken-grotesk-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:600;font-style:normal;font-display:swap;src:url(/assets/fonts/hanken-grotesk-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/hanken-grotesk-latin-700-normal.woff2) format("woff2")}
:root{
  --glas:#0e3a3b;--glas-tief:#092a2b;--glas-linie:rgba(220,232,229,.22);--glas-text:#dce8e5;
  --gold:#e9a43d;--gold-hell:#f3bd67;--rost:#9b4a0c;
  --papier:#fff;--kalk:#edf2ef;--tinte:#142221;--mute:#4b5a58;--linie:#d2dcd8;
  --serif:"Young Serif",Georgia,"Times New Roman",serif;--sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --rand:clamp(18px,4vw,56px);--max:1280px;--aus:cubic-bezier(.16,1,.3,1);--kopfh:88px
}
/* Vorschau-Variante ?farbe=makler: Farbwelt der Maklerseite (Grün, Gold, Weiß), nur zum Vergleichen, nicht verlinkt */
:root[data-farbe=makler]{--glas:#1c4a33;--glas-tief:#133825;--glas-text:#ddebe2;--gold:#e3ad29;--gold-hell:#edc25a;--rost:#2e7350;--kalk:#eef4f0;--linie:#d5e2da;--tinte:#1e2b24;--mute:#4a5a50}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:var(--glas) var(--kalk);accent-color:var(--glas)}
body{margin:0;background:var(--papier);color:var(--tinte);font:400 1.125rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;caret-color:var(--rost)}
::selection{background:var(--gold);color:var(--glas-tief)}
img{max-width:100%;height:auto;display:block}
svg{display:block}
a{color:var(--glas);text-underline-offset:.22em;text-decoration-thickness:1px;transition:color .25s var(--aus),text-decoration-color .25s var(--aus)}
a:hover{color:var(--rost);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--glas);line-height:1.06;letter-spacing:-.02em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.3rem,5.4vw,4.6rem);overflow-wrap:break-word;hyphens:manual}
h2{font-size:clamp(1.85rem,3.4vw,3.1rem)}
h3{font-size:1.4rem}
p{margin:0 0 1em;text-wrap:pretty}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--rand)}
.schmal{max-width:860px}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:var(--glas-tief);padding:10px 16px;z-index:99;font-weight:700}
.skip:focus{left:8px}
.pfeil{width:1.1em;height:1.1em;flex:none;transition:transform .45s var(--aus)}

/* Hinweis und Kopf */
.hinweisleiste{background:var(--gold);color:var(--glas-tief);font-size:.95rem;padding:9px 0;text-align:center}
.hinweisleiste p{margin:0}.hinweisleiste a{color:var(--glas-tief)}
.kopf{background:var(--glas);color:var(--glas-text);position:relative;z-index:40}
.kopf-in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:var(--kopfh)}
.marke{display:flex;flex-direction:column;text-decoration:none;line-height:1.05;color:#fff}
.marke:hover{color:#fff}
.marke-1{font:600 .74rem/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.marke-2{font:400 1.45rem/1 var(--serif);letter-spacing:-.01em}
.hauptnav{display:flex;align-items:center;gap:32px}
.hauptnav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.hauptnav li a{position:relative;color:var(--glas-text);text-decoration:none;font-weight:500;font-size:1rem;padding:8px 0;display:inline-block}
.hauptnav li a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--aus)}
.hauptnav li a:hover{color:#fff}
.hauptnav li a:hover::after,.hauptnav li a[aria-current]::after{transform:scaleX(1)}
.hauptnav li a[aria-current]{color:#fff}
.nav-tel{display:none}
.menu-knopf{display:none;align-items:center;gap:12px;background:none;border:1px solid var(--glas-linie);border-radius:999px;padding:8px 10px 8px 18px;font:600 .95rem var(--sans);color:#fff;cursor:pointer;min-height:46px}
.menu-zeichen{position:relative;width:28px;height:28px;border-radius:50%;background:var(--gold)}
.menu-zeichen span{position:absolute;left:8px;right:8px;height:2px;background:var(--glas-tief);border-radius:2px;transition:transform .45s var(--aus)}
.menu-zeichen span:first-child{top:11px}.menu-zeichen span:last-child{top:16px}
.menu-knopf[aria-expanded=true] .menu-zeichen span:first-child{transform:translateY(2.5px) rotate(45deg)}
.menu-knopf[aria-expanded=true] .menu-zeichen span:last-child{transform:translateY(-2.5px) rotate(-45deg)}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:12px 26px;border:0;border-radius:999px;background:var(--glas);color:#fff;font:600 1.02rem/1.2 var(--sans);text-decoration:none;cursor:pointer;transition:background-color .35s var(--aus),color .35s var(--aus),transform .2s var(--aus)}
.knopf:hover{background:var(--glas-tief);color:#fff;text-decoration:none}
.knopf:hover .pfeil{transform:translateX(4px)}
.knopf:active{transform:scale(.98)}
.knopf-gold{background:var(--gold);color:var(--glas-tief)}
.knopf-gold:hover{background:var(--gold-hell);color:var(--glas-tief)}
.knopf-hell{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px var(--glas-linie)}
.knopf-hell:hover{background:rgba(255,255,255,.08);color:#fff}
.knopf-klein{min-height:44px;padding:8px 20px;font-size:.96rem}
.knopf[disabled]{opacity:.6;cursor:wait}
.aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin:34px 0 0}
.tel-link{display:inline-flex;align-items:baseline;gap:10px;color:#fff;font-weight:600;font-size:1.08rem;text-decoration:none;border-bottom:1px solid var(--glas-linie);padding-bottom:3px}
.tel-link:hover{color:var(--gold);border-color:var(--gold)}
.tel-wort{font-weight:500;color:var(--glas-text)}
.textlink{display:inline-flex;align-items:center;gap:10px;font-weight:600;text-decoration:none;color:var(--glas);border-bottom:1px solid currentColor;padding-bottom:2px}
.textlink:hover{color:var(--rost)}
.textlink:hover .pfeil{transform:translateX(4px)}

/* Brotkrumen */
.krumen{background:var(--glas);font-size:.88rem;color:var(--glas-text)}
.krumen ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 auto;padding-top:6px;padding-bottom:0}
.krumen li+li::before{content:"/";margin-right:6px;opacity:.5}
.krumen a{color:var(--glas-text)}
.krumen a:hover{color:var(--gold)}

/* Türschild: echte Kontaktdaten wie an der Ladentür */
.tuerschild{display:grid;grid-template-columns:repeat(4,minmax(0,auto));gap:18px 40px;margin:0;padding-top:22px;border-top:1px solid var(--glas-linie);font-size:.98rem;line-height:1.45}
.tuerschild dt{font:600 .74rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.tuerschild dd{margin:0;color:#fff}
.tuerschild a[href^=mailto]{white-space:nowrap}
.tuerschild a{color:#fff;text-decoration:none;border-bottom:1px solid var(--glas-linie);display:inline-block;padding:3px 0}
.stapel{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.kontakt-direkt a{display:inline-block;padding:2px 0}
.tuerschild a:hover{color:var(--gold);border-color:var(--gold)}

/* Startseite: Einstieg */
.einstieg{background:var(--glas);color:var(--glas-text);overflow:hidden}
.einstieg-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);min-height:min(calc(100svh - var(--kopfh)),800px);grid-template-rows:1fr auto;grid-template-areas:"text bild" "schild bild";column-gap:clamp(32px,5vw,80px);align-items:end}
.einstieg-text{grid-area:text;align-self:center;padding-top:clamp(40px,6vh,72px)}
.einstieg-schild{grid-area:schild;padding:40px 0 56px}
@media (min-width:981px){.einstieg-schild .tuerschild{grid-template-columns:repeat(2,max-content);column-gap:64px;row-gap:20px}}
.schriftzug{font-size:clamp(2.3rem,4.6vw,5.2rem);line-height:1;letter-spacing:-.025em;margin:0 0 .45em;color:#fff}
.schriftzug .zeile{display:block}
.schriftzug .z1{color:var(--gold)}
.einstieg .lead{color:var(--glas-text);font-size:clamp(1.12rem,1.5vw,1.32rem);line-height:1.55;max-width:34em;margin:0}
.einstieg-bild{grid-area:bild;margin:0;position:relative;justify-self:end;width:min(100%,480px);margin-top:48px}
.einstieg-bild{overflow:hidden}
.einstieg-bild img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
.bild-a,.bild-b{display:block}
.bild-b{position:absolute;inset:0;opacity:0}
.bild-b img{height:100%;object-position:62% 50%}
.cap-b{display:none}
.einstieg-bild figcaption{position:absolute;left:0;top:0;background:var(--glas-tief);color:var(--glas-text);font-size:.86rem;line-height:1.35;padding:10px 14px;max-width:85%}

/* Abschnitte allgemein */
.teil{padding:clamp(72px,10vw,150px) 0}
.teil-raster{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(36px,6vw,96px);align-items:start}
.teil-kopf{position:sticky;top:32px}
.teil-kopf p{color:var(--mute);max-width:30em}
.teil-kopf p:last-child{margin-bottom:0}

/* Leistungen als Angebot */
.angebot{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--linie)}
.angebot li a{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"titel pfeil" "text pfeil";column-gap:32px;row-gap:6px;padding:28px 12px 28px 0;border-top:1px solid var(--linie);text-decoration:none;color:var(--tinte);isolation:isolate}
.angebot li a::before{content:"";position:absolute;inset:0 -16px;background:var(--kalk);z-index:-1;transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--aus)}
.angebot li a:hover::before{transform:scaleY(1)}
.a-titel{grid-area:titel;font:400 clamp(1.45rem,2.2vw,2rem)/1.12 var(--serif);letter-spacing:-.015em;color:var(--glas)}
.a-text{grid-area:text;color:var(--mute);max-width:40em}
.a-pfeil{grid-area:pfeil;align-self:center;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--linie);color:var(--glas);transition:background-color .4s var(--aus),box-shadow .4s var(--aus)}
.angebot li a:hover .a-pfeil{background:var(--gold);box-shadow:none}
.angebot li a:hover .pfeil{transform:translateX(3px)}
.angebot.gross li a{grid-template-columns:minmax(0,5fr) minmax(0,6fr) auto;grid-template-areas:"titel text pfeil";padding:40px 12px 40px 0;align-items:center}
.angebot.gross .a-titel{font-size:clamp(1.7rem,3vw,2.6rem)}
.angebot.kompakt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px;border-bottom:0}
.angebot.kompakt li a{grid-template-areas:"titel pfeil" "text text";height:100%;padding:24px 0 28px}
.angebot.kompakt li a::before{display:none}
.angebot.kompakt .a-titel{font-size:1.4rem}
.angebot.kompakt .a-text{font-size:1rem}
.angebot.kompakt .a-pfeil{width:40px;height:40px;align-self:start}

/* Leitsatz auf Blattgold */
.leitsatz{background:var(--gold);color:var(--glas-tief);padding:clamp(80px,11vw,170px) 0}
.leitsatz-zitat{margin:0}
.leitsatz-zitat p{font:400 clamp(2.6rem,8.2vw,8.4rem)/.98 var(--serif);letter-spacing:-.03em;color:var(--glas);margin:0 0 .3em;max-width:11.5em}
.leitsatz-zitat p span{display:inline-block}
.leitsatz-zitat footer{font-weight:600;font-size:1rem;color:var(--glas-tief)}
.leitsatz-ueber{margin:clamp(56px,7vw,96px) 0 0 auto;max-width:560px}
.leitsatz-ueber h2{font-size:clamp(1.6rem,2.6vw,2.2rem);color:var(--glas-tief)}
.leitsatz-ueber p{font-size:1.15rem}
.leitsatz .textlink{color:var(--glas-tief)}
.leitsatz .textlink:hover,.leitsatz a:hover{color:var(--glas)}

/* Berlin und Dresden als Strecke */
.orte{background:var(--kalk)}
.orte-titel{margin-bottom:clamp(40px,6vw,80px)}
.orte-raster{display:grid;gap:var(--halt-abstand);--halt-abstand:clamp(72px,9vw,128px);--punkt:clamp(4.2rem,10vw,9rem);padding-left:clamp(40px,6vw,88px)}
.halt{position:relative;display:grid;column-gap:clamp(28px,4vw,64px);text-decoration:none;color:var(--tinte)}
.halt::before{content:"";position:absolute;left:calc(-1 * clamp(40px,6vw,88px) + 4px);top:calc(var(--punkt) * .48 - 11px);width:22px;height:22px;border-radius:50%;background:var(--kalk);box-shadow:inset 0 0 0 3px var(--glas);transition:background-color .4s var(--aus)}
.halt-berlin::after{content:"";position:absolute;left:calc(-1 * clamp(40px,6vw,88px) + 14px);top:calc(var(--punkt) * .48 + 11px);bottom:calc(-1 * var(--halt-abstand) + 11px - var(--punkt) * .48);width:0;border-left:2px dashed var(--glas)}
.halt:hover::before{background:var(--gold)}
.halt-name{grid-area:name;font:400 var(--punkt)/.96 var(--serif);letter-spacing:-.035em;color:var(--glas);margin-bottom:.22em;transition:transform .6s var(--aus),color .3s var(--aus)}
.halt:hover .halt-name{transform:translateX(10px)}
.halt-titel{grid-area:titel;font:400 1.55rem/1.15 var(--serif);color:var(--glas);margin-bottom:10px}
.halt-text{grid-area:text;color:var(--mute);max-width:32em}
.halt-weiter{grid-area:weiter;display:inline-flex;align-items:center;gap:10px;font-weight:600;color:var(--glas);margin-top:18px;align-self:start;justify-self:start;border-bottom:1px solid currentColor;padding-bottom:2px}
.halt:hover .halt-weiter{color:var(--rost)}
.halt:hover .halt-weiter .pfeil{transform:translateX(4px)}
.halt-berlin{grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-areas:"name name" "titel liste" "text liste" "weiter liste"}
.halt-liste{grid-area:liste;display:block;align-self:start;border-bottom:1px solid var(--linie)}
.halt-liste span{display:block;padding:14px 0;border-top:1px solid var(--linie);font-weight:500;color:var(--tinte)}
.halt-dresden{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"name name" "bild titel" "bild text" "bild weiter";grid-template-rows:auto auto auto 1fr}
.halt-bild{grid-area:bild;display:block;overflow:hidden}
.halt-bild img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 40%;transition:transform 1.2s var(--aus)}
.halt-dresden:hover .halt-bild img{transform:scale(1.03)}
.halt-dresden .halt-titel{margin-top:4px}
.orte-video{margin:clamp(48px,6vw,80px) 0 0;padding-left:clamp(40px,6vw,88px);font:400 clamp(1.3rem,2vw,1.7rem)/1.3 var(--serif);color:var(--glas);max-width:32em}
.breitbild-berlin img{object-position:50% 30%}

/* Netzwerk-Auszug */
.empfehlungen{list-style:none;margin:0;padding:0;font:400 clamp(1.3rem,2.15vw,1.85rem)/1.42 var(--serif);letter-spacing:-.01em;color:var(--glas)}
.empfehlungen li{display:inline}
.empfehlungen li:not(:last-child)::after{content:"\00b7";color:var(--rost);margin:0 .38em 0 .42em}

/* Fragen */
.faq-teil{padding-top:0}
.fragen-liste{border-bottom:1px solid var(--linie)}
.fragen-liste details{border-top:1px solid var(--linie)}
.fragen-liste summary{cursor:pointer;list-style:none;padding:24px 56px 24px 0;font:600 1.15rem/1.4 var(--sans);color:var(--glas);position:relative;transition:color .25s var(--aus)}
.fragen-liste summary:hover{color:var(--rost)}
.fragen-liste summary::-webkit-details-marker{display:none}
.fragen-liste summary::before,.fragen-liste summary::after{content:"";position:absolute;right:12px;top:50%;width:18px;height:2px;background:var(--rost);transition:transform .45s var(--aus)}
.fragen-liste summary::after{transform:rotate(90deg)}
.fragen-liste details[open] summary::after{transform:rotate(0)}
.fragen-liste details p{margin:0 0 26px;max-width:44em;color:var(--mute)}

/* Seitenkopf der Unterseiten */
.seitenkopf{background:var(--glas);color:var(--glas-text);padding:clamp(36px,5vw,64px) 0 clamp(64px,8vw,112px)}
.seitenkopf-in{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
.seitenkopf h1{color:#fff;max-width:15ch;margin-bottom:.4em}
.seitenkopf .lead{font-size:clamp(1.12rem,1.6vw,1.32rem);line-height:1.55;color:var(--glas-text);max-width:36em;margin:0}
.seitenkopf.mit-strecke .seitenkopf-in{grid-template-columns:minmax(0,1fr) 280px;align-items:center}
.strecke{margin:0;color:var(--glas-text)}
.strecke svg{width:100%;max-width:260px;height:auto;overflow:visible}
.strecke-linie{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-dasharray:7 7}
.halt-punkt{fill:var(--glas);stroke:var(--gold);stroke-width:3}
.halt-punkt.an{fill:var(--gold)}
.halt-wort{font:600 19px var(--sans);fill:var(--glas-text)}
.halt-wort.an{fill:#fff;font:400 26px var(--serif)}
.strecke figcaption{font-size:.9rem;margin-top:14px;color:var(--glas-text);max-width:16em}
.seitenkopf.kopf-leistung .seitenkopf-in{grid-template-columns:minmax(0,1fr) minmax(0,340px);align-items:end}
.kopf-index{border-top:1px solid var(--glas-linie)}
.kopf-index ul{list-style:none;margin:0;padding:0}
.kopf-index a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--glas-linie);color:var(--glas-text);text-decoration:none;font-size:.98rem}
.kopf-index a:hover{color:#fff}
.kopf-index a:hover .pfeil{transform:translateX(4px)}
.kopf-index a[aria-current]{color:var(--gold);font-weight:600}
.kopf-index .pfeil{opacity:.7}
.kopf-schild{background:var(--glas-tief);padding:26px 0 30px}
.kopf-schild .tuerschild{border-top:0;padding-top:0}

/* Inhalt der Unterseiten */
.inhalt{padding-top:clamp(56px,8vw,112px);padding-bottom:clamp(56px,8vw,112px)}
.abschnitt{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,6vw,96px);padding:clamp(40px,5vw,64px) 0;border-top:1px solid var(--linie)}
.inhalt>.abschnitt:first-child{border-top:0;padding-top:0}
.abschnitt h2{font-size:clamp(1.7rem,2.6vw,2.4rem);margin:0}
.abschnitt.ohne-h2 .prosa{grid-column:2}
.inhalt>.faq{padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--linie)}
.inhalt>.faq:first-child{border-top:0;padding-top:0}
.inhalt>.faq+.faq{margin-top:clamp(40px,5vw,64px)}
.inhalt .faq h2{font-size:clamp(1.7rem,2.6vw,2.4rem)}
.prosa{max-width:40rem;font-size:1.14rem}
.prosa>:last-child{margin-bottom:0}
.prosa ul,.prosa ol{padding-left:1.25em;margin:0 0 1em}
.prosa li{margin:.45em 0;padding-left:.3em}
.prosa ul li::marker{content:"\25A0  ";color:var(--gold);font-size:.7em}
.prosa a{text-decoration-color:rgba(155,74,12,.55)}
.stellen{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.stellen-kopf p{color:var(--mute);margin-top:18px}
.stellenliste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;margin:0}
.stellenliste div{padding:20px 0 22px;border-top:1px solid var(--linie)}
.stellenliste dt{font:400 1.32rem/1.2 var(--serif);color:var(--glas);margin-bottom:8px}
.stellenliste dd{margin:0;color:var(--mute);font-size:1.02rem}
.breitbild{margin:0}
.breitbild img{width:100%;height:clamp(240px,42vw,640px);object-fit:cover;object-position:50% 45%}
.breitbild figcaption{font-size:.88rem;color:var(--mute);padding-top:12px}
.weitere{background:var(--kalk);padding:clamp(64px,8vw,112px) 0}
.weitere h2{margin-bottom:28px}

/* Über mich */
.ueber-seite{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);padding-top:clamp(56px,8vw,112px);padding-bottom:clamp(56px,8vw,112px);align-items:start}
.ueber-bild{margin:0;position:sticky;top:32px}
.ueber-bild img{width:100%;aspect-ratio:4/5;object-fit:cover}
.ueber-bild figcaption{font-size:.9rem;color:var(--mute);margin-top:12px}
.ueber-text .abschnitt{display:block;padding:0 0 44px;border:0}
.ueber-text .abschnitt h2{margin-bottom:.45em}

/* Netzwerk, Sitemap, Recht */
.netz-vollliste{list-style:none;margin:0 0 48px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px}
.netz-vollliste li{padding:20px 0 22px;border-top:1px solid var(--linie);font:400 1.3rem/1.35 var(--serif);color:var(--glas)}
.netz-schluss{font-size:1.2rem;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:baseline;margin:0}
.linkliste{padding-left:1.2em}.linkliste li{margin:.4em 0}.linkliste ul{margin-top:.3em}
.sitemap{padding-top:56px;padding-bottom:80px}
.recht-text{padding-top:56px;padding-bottom:96px}
.recht-text h2{font-size:1.55rem;margin-top:1.8em}
.recht-text,.prosa,.fragen-liste,.stellenliste,.netz-vollliste,.empfehlungen{overflow-wrap:break-word}
h1,h2,.a-titel,.halt-titel{overflow-wrap:break-word}

/* Kontaktband */
.kontaktband{background:var(--glas);color:var(--glas-text);padding:clamp(72px,9vw,136px) 0}
.kontaktband-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:end}
.kontaktband h2{color:#fff;font-size:clamp(2.1rem,4.4vw,3.8rem);max-width:12ch}
.kontaktband-text p{max-width:30em}
.kontaktband-text p:last-child{margin:30px 0 0}
.kontaktband-wege{margin:0;display:grid;gap:24px}
.kontaktband-wege div{border-top:1px solid var(--glas-linie);padding-top:16px}
.kontaktband-wege dt{font:600 .74rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.kontaktband-wege dd{margin:0}
.kontaktband-wege a{color:#fff;text-decoration:none;font-size:1.15rem}
.kontaktband-wege a:hover{color:var(--gold)}
.kontaktband-wege .tel-gross{font:400 clamp(1.8rem,3.2vw,2.8rem)/1.1 var(--serif);letter-spacing:-.01em;color:var(--gold)}
.kontaktband-wege .tel-gross:hover{color:#fff}

/* Kontaktseite */
.kontakt-kopf{padding-bottom:clamp(64px,8vw,112px)}
.kontakt-kopf .seitenkopf-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.kontakt-direkt{margin:36px 0 0}
.kontakt-direkt div{padding:16px 0;border-top:1px solid var(--glas-linie)}
.kontakt-direkt dt{font:600 .74rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.kontakt-direkt dd{margin:0;color:#fff}
.kontakt-direkt a{color:#fff}
.kontakt-direkt a:hover{color:var(--gold)}
.formular{background:var(--papier);color:var(--tinte);padding:clamp(24px,3.5vw,44px);display:grid;gap:20px}
.feldreihe{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.feld label{display:block;font-weight:600;margin-bottom:7px;font-size:.98rem}
.frei{font-weight:400;color:var(--mute)}
.feld input,.feld select,.feld textarea{width:100%;min-height:52px;padding:12px 14px;border:1px solid #7a8a87;border-radius:6px;background:#fff;font:400 1.05rem var(--sans);color:var(--tinte);transition:border-color .25s var(--aus),box-shadow .25s var(--aus)}
.feld input:hover,.feld select:hover,.feld textarea:hover{border-color:var(--glas)}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none;border-color:var(--glas);box-shadow:0 0 0 3px rgba(233,164,61,.55)}
.feld textarea{min-height:140px;resize:vertical}
.feld.ungueltig input,.feld.ungueltig select,.feld.ungueltig textarea{border-color:#a3261a;border-width:2px}
.feld-falle{position:absolute;left:-9999px;height:0;overflow:hidden}
.form-hinweis{font-size:.92rem;color:var(--mute);margin:0}
.formular .knopf{justify-self:start}
.form-status{margin:0;min-height:1.4em;font-weight:600}
.form-status.fehler{color:#a3261a}
.formular-erfolg h2{font-size:1.7rem}
.formular-erfolg:focus{outline:none}

/* Fuß */
.fuss{background:var(--glas-tief);color:var(--glas-text);padding:clamp(56px,7vw,96px) 0 28px;font-size:.98rem}
.fuss a{color:var(--glas-text);text-decoration-color:rgba(220,232,229,.4)}
.fuss a:hover{color:var(--gold)}
.fuss-raster{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:48px}
.fuss-name{font:400 clamp(1.7rem,2.6vw,2.3rem)/1.05 var(--serif);color:#fff;letter-spacing:-.02em;margin-bottom:22px}
.fuss-name span{display:block;color:var(--gold)}
.fuss-h{font:600 .74rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:6px 0 14px}
.fuss ul{list-style:none;margin:0;padding:0}.fuss li{margin:.45em 0}
.fuss-unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:56px;padding-top:22px;border-top:1px solid var(--glas-linie);font-size:.9rem}
.fuss-unten ul{display:flex;gap:22px}.fuss-unten p{margin:0}
.handyleiste{display:none}

/* Bewegung: ein Auftritt beim Laden, leichtes Aufsteigen beim Scrollen. Ohne JS ist alles sofort sichtbar. */
@keyframes aufziehen{from{clip-path:inset(0 100% -.2em 0);transform:translateY(.12em)}to{clip-path:inset(0 0 -.2em 0);transform:none}}
@keyframes hoch{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes heben{from{clip-path:inset(14% 0 0 0);transform:translateY(24px)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes zeichnen{from{stroke-dashoffset:240}to{stroke-dashoffset:0}}
.js .schriftzug .zeile>span{display:inline-block;animation:aufziehen 1.05s var(--aus) both}
.js .schriftzug .z2>span{animation-delay:.14s}
.js .auftritt{animation:hoch .9s var(--aus) both}
.js .a2{animation-delay:.08s}.js .a3{animation-delay:.28s}.js .a4{animation-delay:.38s}.js .a5{animation-delay:.5s}
.js .einstieg-bild .bild-a img{animation:heben 1.1s var(--aus) both,naeher 20s cubic-bezier(.37,0,.63,1) 1.1s infinite alternate}
/* Bildwechsel wie auf der Maklerseite, nur ruhiger: das Porträt zoomt langsam, alle 20 s blendet Dresden für einige Sekunden über */
@keyframes naeher{from{transform:scale(1)}to{transform:scale(1.07) translateY(-1.5%)}}
@keyframes wechsel{0%,46%{opacity:0}52%,86%{opacity:1}92%,100%{opacity:0}}
@keyframes wechsel-cap{0%,46%{opacity:1}50%,88%{opacity:0}92%,100%{opacity:1}}
@keyframes wechsel-cap-b{0%,48%{opacity:0}52%,86%{opacity:1}90%,100%{opacity:0}}
.js .einstieg-bild .bild-b{animation:wechsel 20s cubic-bezier(.37,0,.63,1) 3s infinite}
.js .einstieg-bild .bild-b img{animation:naeher 10s cubic-bezier(.37,0,.63,1) infinite alternate}
.js .einstieg-bild figcaption{display:grid}
.js .einstieg-bild .cap-a,.js .einstieg-bild .cap-b{grid-area:1/1;display:block}
.js .einstieg-bild .cap-a{animation:wechsel-cap 20s cubic-bezier(.37,0,.63,1) 3s infinite}
.js .einstieg-bild .cap-b{opacity:0;animation:wechsel-cap-b 20s cubic-bezier(.37,0,.63,1) 3s infinite}
.js [data-zeigen]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--aus),transform 1s var(--aus)}
.js [data-zeigen].da{opacity:1;transform:none}
.js [data-zeigen].sofort{transition-duration:.6s}
.js [data-worte] span{opacity:0;transform:translateY(.28em);transition:opacity .7s var(--aus),transform .9s var(--aus);transition-delay:calc(var(--i) * 85ms)}
.js [data-worte].da span{opacity:1;transform:none}

/* Tablet und Handy */
@media (max-width:980px){
  :root{--kopfh:72px}
  .menu-knopf{display:inline-flex}
  .hauptnav{position:fixed;left:0;right:0;top:var(--kopfh);bottom:0;background:var(--glas);flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:12px var(--rand) 40px;overflow-y:auto;visibility:hidden;opacity:0;transition:opacity .35s var(--aus),visibility 0s linear .35s}
  .hauptnav.offen{visibility:visible;opacity:1;transition:opacity .35s var(--aus)}
  .hauptnav ul{flex-direction:column;gap:0}
  .hauptnav li a{display:block;padding:14px 0;border-bottom:1px solid var(--glas-linie);font:400 1.9rem/1.15 var(--serif);color:#fff;letter-spacing:-.01em;transform:translateY(16px);opacity:0;transition:transform .6s var(--aus),opacity .5s var(--aus)}
  .hauptnav li a::after{display:none}
  .hauptnav li a[aria-current]{color:var(--gold)}
  .hauptnav.offen li a{transform:none;opacity:1}
  .hauptnav.offen li:nth-child(2) a{transition-delay:.04s}.hauptnav.offen li:nth-child(3) a{transition-delay:.08s}.hauptnav.offen li:nth-child(4) a{transition-delay:.12s}.hauptnav.offen li:nth-child(5) a{transition-delay:.16s}.hauptnav.offen li:nth-child(6) a{transition-delay:.2s}
  .hauptnav .knopf{margin-top:28px;align-self:flex-start;min-height:52px;padding:12px 28px;font-size:1.05rem}
  .nav-tel{display:block;margin:20px 0 0}
  .nav-tel a{color:var(--glas-text);font-size:1.15rem}
  .menu-offen,.menu-offen body{overflow:hidden}
  .einstieg-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "bild" "schild";min-height:0}
  .einstieg-schild{background:var(--glas-tief);margin:0 calc(-1 * var(--rand));padding:28px var(--rand) 32px}
  .einstieg-schild .tuerschild{border-top:0;padding-top:0}
  .einstieg-bild{justify-self:start;width:min(100%,460px);margin-top:44px}
  .tuerschild{grid-template-columns:repeat(2,minmax(0,1fr))}
  .teil-raster,.abschnitt,.stellen,.kontaktband-in,.ueber-seite,.kontakt-kopf .seitenkopf-in,.seitenkopf.mit-strecke .seitenkopf-in,.seitenkopf.kopf-leistung .seitenkopf-in{grid-template-columns:minmax(0,1fr)}
  .abschnitt.ohne-h2 .prosa{grid-column:1}
  .teil-kopf,.ueber-bild{position:static}
  .ueber-bild{max-width:420px}
  .strecke,.kopf-index{display:none}
  .halt-berlin{grid-template-columns:minmax(0,1fr);grid-template-areas:"name" "titel" "text" "liste" "weiter"}
  .halt-liste{margin-top:22px}
  .halt-dresden{grid-template-columns:minmax(0,1fr);grid-template-areas:"name" "bild" "titel" "text" "weiter";grid-template-rows:none}
  .halt-dresden .halt-titel{margin-top:22px}
  .angebot.kompakt{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fuss-raster{grid-template-columns:1fr 1fr}
  .fuss-marke{grid-column:1/-1}
}
@media (max-width:640px){
  body{font-size:1.06rem;padding-bottom:64px}
  .marke-2{font-size:1.28rem}
  .marke-1{font-size:.7rem}
  .menu-wort{display:none}
  .menu-knopf{padding:9px;border:0}
  .menu-zeichen{width:34px;height:34px}
  .menu-zeichen span{left:10px;right:10px}.menu-zeichen span:first-child{top:14px}.menu-zeichen span:last-child{top:19px}
  .schriftzug{font-size:clamp(2.05rem,9.6vw,2.6rem)}
  .einstieg-bild{width:100%}
  .tuerschild{gap:16px 20px;font-size:.94rem}
  .tuerschild>div:last-child{grid-column:1/-1}
  .aktionen{gap:14px 22px;margin-top:28px}
  .angebot li a{padding:22px 0;column-gap:16px}
  .angebot li a::before{inset:0 -12px}
  .a-pfeil{width:42px;height:42px}
  .angebot.gross li a{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"titel pfeil" "text pfeil";padding:26px 0}
  .angebot.kompakt{grid-template-columns:minmax(0,1fr)}
  .orte-raster{padding-left:34px;--punkt:clamp(3.4rem,15vw,4.4rem)}
  .orte-video{padding-left:0}
  .halt::before{left:-34px;width:18px;height:18px;top:calc(var(--punkt) * .48 - 9px)}
  .halt-berlin::after{left:-26px;top:calc(var(--punkt) * .48 + 9px);bottom:calc(-1 * var(--halt-abstand) + 9px - var(--punkt) * .48)}
  .stellenliste,.netz-vollliste{grid-template-columns:minmax(0,1fr)}
  .netz-vollliste li{font-size:1.15rem}
  .empfehlungen{hyphens:auto}
  .feldreihe{grid-template-columns:minmax(0,1fr)}
  .formular{margin:0 calc(-1 * var(--rand));padding:28px var(--rand)}
  .fuss-raster{grid-template-columns:minmax(0,1fr)}
  .handyleiste{display:grid;grid-template-columns:1fr 1.5fr;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--papier);border-top:1px solid var(--linie);padding-bottom:env(safe-area-inset-bottom)}
  .handyleiste a{display:flex;align-items:center;justify-content:center;min-height:58px;font-weight:700;text-decoration:none;color:var(--glas)}
  .handyleiste-haupt{background:var(--gold);color:var(--glas-tief)!important}
  .menu-offen .handyleiste{display:none}
  .fuss-unten{padding-bottom:12px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js [data-zeigen],.js [data-worte] span{opacity:1;transform:none}
  .js .einstieg-bild .bild-b,.js .einstieg-bild .cap-b{opacity:0}
}
@media print{.kopf,.fuss,.handyleiste,.kontaktband,.krumen{display:none}.seitenkopf,.einstieg{background:none;color:#000}.seitenkopf h1{color:#000}}