@font-face{font-family:"Geist";src:url(schrift/geist-variabel.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* Bauart „kanzlei“: Nachbau der Figma-Sites-Vorlage „Jones & Brown Legal“ von Figma (Figma Community, CC BY 4.0).
   Maße, Schriftgrößen, Laufweiten und Abstände aus der Vorlage gemessen:
   Desktop ab 1280 px, Tablet 800 bis 1279 px, Handy unter 800 px. Farben und Schriften kommen aus der Variante.
   Große Zeilen rechnen ihre Schriftgröße aus der Breite des längsten Worts (--wb, in em), so läuft kein
   Firmenname und keine Leistung über den Rand; bei üblichen Längen bleibt es bei den Maßen der Vorlage. */

:root{
  --grund:#F3EEE4;
  --weiss:#FFFFFF;
  --haupt:#0B0B0B;
  --tief:#000000;
  --zweit:#8A6A2A;
  --hell:#EFE7D6;
  --karte:#F8F4EC;
  --mehr:rgba(214,178,104,.9);
  --linie:#DDD0B6;
  --text:#000000;
  --schrift-titel:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --schrift-text:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --schrift-marke:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --lw:1;
  --zeile:1;
  --g-titel:400;
  --g-ueber:500;
  --g-duenn:200;
  --ease:cubic-bezier(.215,.61,.355,1);
  --ease-knopf:cubic-bezier(0,0,.58,1);
  --ease-auftritt:cubic-bezier(0,0,.58,1);
}

*,*::before,*::after{box-sizing:border-box}
*{min-width:0}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html,body{overflow-x:clip}
html{scroll-padding-top:80px}
body{margin:0;background:var(--weiss);color:var(--text);font-family:var(--schrift-text);font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility}
h1,h2,h3,p,blockquote,figure{margin:0;font-size:inherit;font-weight:inherit}
/* ein Wort, das breiter ist als seine Zeile (Adresse, Fachwort), bricht notfalls im Wort, statt die Seite zu sprengen */
body{overflow-wrap:anywhere}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;margin:0;padding:0}
img,svg{display:block}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.ohne-umbruch{white-space:nowrap}
.wort{display:inline-block;max-width:100%;text-indent:0}
.unsichtbar{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:4px}

/* Schriftstufen, Werte aus der Vorlage; Laufweiten in em, damit sie mit der Größe mitgehen */
.t-titel{font-family:var(--schrift-titel);font-size:clamp(56px,calc((100vw - 115px) / var(--wb,6)),120px);line-height:calc(.95 * var(--zeile));letter-spacing:calc(-.036em * var(--lw));font-weight:var(--g-titel);text-wrap:balance}
.t-ueber{font-family:var(--schrift-titel);font-size:32px;line-height:calc(1.09 * var(--zeile));letter-spacing:calc(-.016em * var(--lw));font-weight:var(--g-ueber)}
.t-ueber-normal{font-family:var(--schrift-titel);font-size:32px;line-height:calc(1.09 * var(--zeile));letter-spacing:calc(-.016em * var(--lw));font-weight:var(--g-titel)}
.t-text{font-size:18px;line-height:1.35;letter-spacing:-.0036em;font-weight:400}
.t-text-fett{font-size:18px;line-height:1.35;letter-spacing:-.02em;font-weight:500}
.t-klein{font-size:14px;line-height:1.4;letter-spacing:normal;font-weight:400}

/* Hinweisband ganz oben (nur Musterseiten) */
.musterband{position:relative;z-index:31;background:var(--grund);color:var(--haupt);font-size:13px;line-height:16px;letter-spacing:-.0039em;text-align:center;padding:8px 16px}

/* Sprungmarke für Tastatur */
.sprung{position:fixed;left:50%;top:12px;z-index:100;transform:translate(-50%,-160%);background:#000;color:#fff;border:1px solid #fff;border-radius:12px;padding:12px 16px;font-size:16px;line-height:normal;transition:transform .2s var(--ease)}
.sprung:focus{transform:translate(-50%,0)}

/* Kopfzeile */
.kopf{position:sticky;top:0;z-index:30;height:64px;background:var(--haupt);padding:20px 50px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.kopf--tief{background:var(--tief)}
.kopf__logo{display:block;flex-shrink:0;padding:10px;margin:-10px;color:var(--hell);transition:opacity .3s var(--ease)}
.kopf__nav{display:flex;align-items:center;gap:37px}
.kopf__nav a{display:block;font-size:13px;line-height:12.35px;letter-spacing:-.0039em;color:var(--hell);padding:16px 0;margin:-16px 0;white-space:nowrap;transition:opacity .3s var(--ease)}
.kopf__nav a:hover,.kopf__logo:hover{opacity:.7}

/* Monogramm aus dem Anfangsbuchstaben, an Stelle des Vorlagen-Logos */
.zeichen{display:flex;align-items:center;justify-content:center;width:30px;height:24px;border-radius:6px;background:var(--hell);color:var(--haupt);font:600 16px/1 var(--schrift-marke);letter-spacing:0}
.kopf--tief .zeichen{color:var(--tief)}
.zeichen--fuss{width:50px;height:37px;border-radius:9px;font-size:24px;background:var(--text);color:var(--grund)}

/* Bühne mit Foto */
.held{position:relative;display:grid;min-height:736px;color:var(--hell);background:#2b2b2b;overflow:hidden}
.held__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.held__schleier{position:absolute;inset:0;background:rgba(0,0,0,.4)}
/* unten leicht dunkler, damit die Schrift auf jedem Foto lesbar bleibt (Kontrast mindestens 4,5 zu 1) */
.held__schleier::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.3),rgba(0,0,0,0) 60%)}
.held__inhalt{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:25px 50px 70px}
.held__block{display:flex;flex-direction:column;gap:78px}
.held__unter{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.held__unter h2{width:623px;flex:0 1 auto;text-wrap:balance}
.held__unter p{width:370px;flex:0 1 auto}
.held--seite{min-height:686px;color:#fff}
.held--seite .held__inhalt{padding:50px 50px 70px}
.held__satz{max-width:734px}
.held__gross{color:#fff}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:18px 24px;border-radius:500px;font-size:18px;line-height:21.6px;letter-spacing:-.0036em;max-width:100%;text-wrap:balance;text-align:center;transition:background-color .3s var(--ease-knopf)}
.knopf--dunkel{background:var(--zweit);color:#fff}
.knopf--dunkel:hover{background:var(--tief)}
.knopf--hell{background:var(--weiss);color:#000}
.knopf--hell:hover{background:var(--grund)}
/* Fokusrahmen sichtbar auf dem Grund, auf dem der Knopf steht (currentColor wäre Weiß auf Creme oder Schwarz auf dunkler Fläche) */
.knopf--dunkel:focus-visible{outline-color:var(--zweit)}
.knopf--hell:focus-visible{outline-color:var(--weiss)}

/* Willkommen */
.willkommen{background:var(--grund);padding:135px 186px 178px 152px}
.willkommen__inhalt{display:flex;flex-direction:column;gap:60px}
.willkommen__text{display:flex;flex-direction:column;align-items:flex-start;gap:50px}
.willkommen__spalten{display:flex;gap:48px}
.willkommen__spalten p{width:447px}

/* Bildbänder, immer über die volle Breite */
.streifen{position:relative;width:100%;overflow:hidden;background:var(--linie);aspect-ratio:1280/625}
.streifen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.streifen__schleier{position:absolute;inset:0;background:rgba(0,0,0,.05)}
.streifen--breit{aspect-ratio:auto;height:625px}

/* Angebot auf der Hauptfarbe */
.angebot{background:var(--haupt);color:var(--grund);display:flex;align-items:flex-start;padding:93px 0 126px 152px}
.angebot__label{flex:none;width:clamp(289px,calc(var(--lb,0) * 33.3px + 40px),420px);padding-right:40px}
.angebot__rechts{display:flex;flex-direction:column;align-items:flex-start;gap:64px;padding-right:50px;max-width:100%}
.angebot__liste{max-width:100%}
.angebot__liste a{display:block;padding-left:.6em;text-indent:-.6em;font-family:var(--schrift-titel);font-weight:var(--g-titel);font-size:clamp(44px,calc((100vw - 217px - clamp(289px,calc(var(--lb,0) * 33.3px + 40px),420px)) / var(--wb,9)),76px);line-height:calc(.95 * var(--zeile));letter-spacing:calc(-.0456em * var(--lw));transition:opacity .3s var(--ease)}
.angebot__liste a:hover{opacity:.7}
.angebot__liste .angebot__mehr a{color:var(--mehr)}

/* Kundenstimmen */
.stimmen{background:var(--weiss);padding:116px 271px;display:flex;flex-direction:column;align-items:center;gap:74px}
.stimmen__inhalt{width:100%;display:flex;flex-direction:column;align-items:center;gap:56px}
.stimmen__kopf{display:flex;flex-direction:column;align-items:center;gap:32px;text-align:center}
.stimmen__kopf p,.stimmen__schluss{max-width:480px;text-align:center}
.stimmen__rechtlich{max-width:560px;margin-top:-24px;font-size:13px;line-height:1.5;color:rgba(0,0,0,.6);text-align:center}
.karte{touch-action:pan-y;width:738px;max-width:100%;background:var(--karte);padding:30px 50px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:80px;min-height:445px}
.karte__oben{width:100%;display:flex;flex-direction:column;align-items:center;gap:28px}
.karte__hinweis{font-size:13px;line-height:16px;letter-spacing:.02em;color:rgba(0,0,0,.6);text-align:center}
.karte__folien{display:grid;width:100%}
.folie{grid-area:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;text-align:center;opacity:0;visibility:hidden;transition:none}
.folie.ist-aktiv{opacity:1;visibility:visible;transition:opacity .8s var(--ease-auftritt)}
.folie blockquote{margin:0}
.folie blockquote,.folie figcaption{max-width:100%}
.karte__steuerung{display:flex;align-items:center;gap:20px;-webkit-user-select:none;user-select:none}
.pfeil{position:relative;flex-shrink:0;width:44px;height:44px;margin:-10px;display:grid;place-items:center;color:#000;transition:opacity .3s var(--ease)}
.pfeil svg{width:24px;height:24px}
.pfeil:hover{opacity:.7}
.punkte{display:flex;align-items:center;gap:10px}
.punkt{position:relative;flex-shrink:0;width:20px;height:26px;margin:-8px -5px;padding:8px 5px;border-radius:50%;background:rgba(0,0,0,.25);background-clip:content-box;transition:background-color .3s var(--ease)}
.punkt.ist-aktiv{background:var(--zweit)}
.punkt:not(.ist-aktiv):hover{background:rgba(0,0,0,.45)}

/* Fußbereich */
.fuss{background:var(--grund);color:var(--text);padding:68px 152px;display:flex;flex-direction:column;align-items:stretch;gap:84px}
.fuss__kopf{display:flex;justify-content:space-between;align-items:center;gap:24px}
.fuss__claim{text-wrap:balance}
.fuss__logo{display:block;flex-shrink:0;transition:opacity .3s var(--ease)}
.fuss__logo:hover{opacity:.7}
.fuss__name{font-family:var(--schrift-marke);font-size:clamp(30px,calc((100vw - 395px) / var(--wb,8)),46px);line-height:calc(.935 * var(--zeile));letter-spacing:calc(-.0348em * var(--lw));font-weight:var(--g-titel);text-align:right;text-wrap:balance}
.fuss__spalten{display:flex;align-items:flex-start;gap:45px}
.fuss__spalte{width:255px;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.fuss__spalte--dicht{gap:0}
.fuss__spalte a,.fuss__recht a{transition:opacity .3s var(--ease)}
.fuss__spalte a:hover,.fuss__recht a:hover{opacity:.7}
.fuss__recht a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.fuss__links{display:flex;flex-wrap:wrap;column-gap:.3em}
.fuss__links span{white-space:nowrap}
.fuss__links span:not(:last-child)::after{content:"\00a0·"}
.fuss a[href^="mailto:"],.schritt__text a[href^="mailto:"]{overflow-wrap:anywhere}
.fuss__hinweis{margin-top:10px;color:rgba(0,0,0,.6)}

/* Leistungen: Zahlenreihe */
.zahlen{background:var(--grund);padding:96px 160px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:48px 40px}
.zahl{display:flex;flex-direction:column;gap:56px;color:var(--zweit);min-width:auto}
/* alle Werte zusammen (--ws) nehmen höchstens 92 Prozent der Reihe ein, keiner bricht um (wie in der Vorlage) */
.zahl__wert{font-family:var(--schrift-titel);font-weight:var(--g-titel);font-size:min(120px,calc((100vw - 415px) * .92 / var(--ws,4)));line-height:calc(.95 * var(--zeile));letter-spacing:calc(-.036em * var(--lw));white-space:nowrap}
.zahl__text{font-size:24px;line-height:1.09;letter-spacing:-.012em;min-height:30px;max-width:360px}

/* Leistungen: Liste auf der Hauptfarbe */
.liste{background:var(--haupt);color:#fff;padding:114px 150px}
.liste__rahmen{display:flex;flex-direction:column;gap:170px;padding-bottom:20px;box-shadow:inset 0 -1px #fff}
.liste__titel{max-width:548px}
.liste__zeilen{display:flex;flex-direction:column;gap:20px}
.zeile{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;padding:20px 0;box-shadow:inset 0 1px #fff;scroll-margin-top:84px}
.zeile__rechts{width:420px;flex:none;display:flex;flex-direction:column;gap:14px}
.zeile__punkte li{position:relative}
.aufruf{display:flex;align-items:center;gap:100px}
.liste .aufruf{margin-top:120px}

/* Kontakt auf der tiefen Zweitfarbe */
.kontakt{background:var(--tief);color:#fff;padding:114px 150px 220px;display:flex;flex-direction:column;gap:220px}
.kontakt__rahmen{display:flex;flex-direction:column;gap:36px;box-shadow:inset 0 -1px #fff}
.kontakt__titel{max-width:548px}
.kontakt__zeilen{display:flex;flex-direction:column;gap:20px}
.schritt{display:flex;justify-content:space-between;align-items:center;gap:40px;padding:50px 0;box-shadow:inset 0 1px #fff}
.schritt__zahl{font-family:var(--schrift-titel);font-size:300px;line-height:1.09;letter-spacing:calc(-.15em * var(--lw));font-weight:var(--g-duenn);flex:none}
.schritt__text{width:481px;flex:none;display:flex;flex-direction:column;gap:56px}
.schritt__text a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:opacity .3s var(--ease)}
.schritt__text a:hover{opacity:.7}
.schritt__text p+p{margin-top:12px}

/* Impressum und Datenschutz */
.recht{background:var(--weiss);padding:135px 186px 178px 152px;min-height:620px}
.recht__inhalt{display:flex;flex-direction:column;align-items:flex-start;gap:60px}
.recht__text{max-width:min(700px,100%);display:flex;flex-direction:column;gap:16px}
.recht__text a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:opacity .3s var(--ease)}
.recht__text a:hover{opacity:.7}
.recht__text h2,.recht__text h3{font-weight:500;letter-spacing:-.02em;margin-top:12px}
.recht__text ul,.recht__text ol{padding-left:1.2em;list-style:disc}

/* Einblenden wie in der Vorlage: nur Deckkraft, 0,8 s, wiederholt sich beim erneuten Hineinscrollen.
   Ausblenden beim Verlassen als Übergang (0,6 s), das Einblenden steuert bauart.js als Web-Animation. */
.js [data-auftritt]{opacity:0;transition:opacity .6s var(--ease-auftritt)}
.js [data-auftritt].ist-sichtbar{opacity:1;transition:none}

/* Tablet */
@media (max-width:1279px){
  .t-titel{font-size:clamp(44px,calc((100vw - 115px) / var(--wb,6)),72px);letter-spacing:calc(-.0216em * var(--lw))}
  .t-text{letter-spacing:-.02em}
  .held__unter{flex-direction:column;gap:16px}
  .held__unter h2{width:623px;max-width:100%}
  .held__unter p{width:370px;max-width:100%}
  .willkommen{padding:135px 64px 178px}
  .willkommen__spalten p{width:auto;flex:1 1 0}
  .streifen{aspect-ratio:800/480}
  .streifen--breit{aspect-ratio:auto;height:480px}
  .angebot{flex-direction:column;gap:48px;padding:93px 64px 126px}
  .angebot__label{width:auto;padding-right:0}
  .angebot__rechts{padding-right:0}
  .angebot__liste a{font-size:clamp(40px,calc((100vw - 143px) / var(--wb,9)),64px);letter-spacing:calc(-.0384em * var(--lw))}
  .stimmen{padding:116px 84px}
  .fuss{padding:68px 28px;gap:48px}
  .fuss__kopf{align-items:flex-start}
  .zeichen--fuss{width:40px;height:30px;border-radius:8px;font-size:20px}
  .fuss__name{font-size:clamp(26px,calc((100vw - 135px) / var(--wb,8)),34px);letter-spacing:calc(-.0353em * var(--lw))}
  .fuss__spalten{gap:24px}
  .zahlen{padding:96px 64px}
  .zahl__wert{font-size:min(84px,calc((100vw - 191px) * .92 / var(--ws,4)));letter-spacing:calc(-.0252em * var(--lw))}
  .zahl__text{font-size:20px;letter-spacing:-.01em}
  .zahl{gap:28px}
  .zahlen{gap:48px 24px}
  .zahl__text{max-width:210px}
  .liste{padding:114px 64px}
  .liste__rahmen{gap:80px}
  .liste__titel{max-width:none}
  .liste__zeilen{display:grid;grid-template-columns:repeat(auto-fill,minmax(326px,1fr));gap:20px;align-items:start}
  .zeile{flex-direction:column;justify-content:flex-start;gap:24px}
  .zeile__rechts{width:auto}
  .liste .aufruf{margin-top:114px}
  .aufruf{justify-content:space-between}
  .held__satz{max-width:none}
  .stimmen__kopf p{max-width:632px}
  .kontakt{padding:114px 64px;gap:114px}
  .schritt__zahl{font-size:200px;letter-spacing:calc(-.1em * var(--lw))}
  .schritt__text{width:min(481px,55%)}
  .recht{padding:135px 64px 178px}
}

/* Handy */
@media (max-width:799px){
  .t-titel{font-size:clamp(28px,calc((100vw - 60px) / var(--wb,6)),36px);letter-spacing:calc(-.0108em * var(--lw))}
  /* Name auf der Startseite möglichst in einer Zeile wie in der Vorlage, sonst umbrochen, nie über den Rand */
  /* --wg ist 3 % knapper geschätzt (Unterschneidung); passt die Zeile doch nicht, bricht sie um, sie läuft nie über */
  .t-titel--start{font-size:max(26px,min(clamp(28px,calc((100vw - 48px) / var(--wg,10)),35px),calc((100vw - 52px) / var(--wb,6))));line-height:calc(34.2px * var(--zeile))}
  .held{min-height:392px}
  .held--start{min-height:450px}
  .t-ueber,.t-ueber-normal{font-size:22px;letter-spacing:calc(-.011em * var(--lw))}
  .held__inhalt{padding:25px 24px 70px}
  .held__unter h2,.held__unter p{width:100%}
  .held--seite{min-height:436px}
  .held--seite .held__inhalt{padding:24px}
  .held--kontakt .held__inhalt{padding:50px 28px 70px}
  .willkommen{padding:48px 24px 80px}
  .willkommen__inhalt{gap:40px}
  .willkommen__spalten{flex-direction:column;gap:24px}
  .willkommen__text .knopf{width:100%}
  .streifen{aspect-ratio:375/280}
  .streifen--breit{aspect-ratio:auto;height:280px}
  .angebot{gap:24px;padding:64px 28px}
  .angebot__liste{display:flex;flex-direction:column;gap:8px}
  .angebot__liste a{font-size:clamp(26px,calc((100vw - 58px) / var(--wb,9)),36px);letter-spacing:calc(-.0216em * var(--lw))}
  .stimmen{padding:64px 28px 80px;gap:48px}
  .stimmen__inhalt{gap:36px}
  .karte{min-height:0}
  .stimmen__kopf p{max-width:319px}
  .fuss{gap:48px}
  .fuss__kopf{flex-direction:column;gap:24px}
  .zeichen--fuss{width:32px;height:24px;border-radius:6px;font-size:16px}
  .fuss__name{font-size:clamp(22px,calc((100vw - 60px) / var(--wb,8)),26px);letter-spacing:calc(-.0346em * var(--lw));text-align:left}
  .fuss__spalten{flex-direction:column;gap:24px}
  .zahlen{flex-direction:column;align-items:center;gap:64px;padding:48px 28px}
  .zahl{align-items:flex-start;gap:24px;width:min(270px,100%)}
  .zahl__wert{font-size:min(84px,calc(min(270px,100vw - 58px) / var(--wg,3)))}
  .liste__zeilen{grid-template-columns:minmax(0,1fr)}
  .liste{padding:64px 28px}
  .liste__rahmen{gap:64px}
  .zeile{flex-direction:column;gap:24px}
  .zeile__rechts{width:100%}
  .aufruf{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:40px}
  .liste .aufruf{margin-top:64px}
  .kontakt{padding:64px 28px;gap:56px}
  .kontakt__rahmen{gap:36px}
  .schritt{flex-direction:column;align-items:flex-start;gap:16px}
  .schritt__zahl{font-size:100px;letter-spacing:calc(-.05em * var(--lw))}
  .schritt__text{width:100%;gap:56px}
  .kontakt .aufruf{gap:56px}
  .recht{padding:48px 24px 80px;min-height:0}
  .recht__inhalt{gap:40px}
}

@media (max-width:519px){
  .t-text,.t-text-fett,.t-klein,.recht__text,.zeile__punkte li,.stimmen__rechtlich{-webkit-hyphens:auto;hyphens:auto}
}
@media (max-width:360px){
  .kopf{padding:20px 24px}
  .karte{padding:30px 24px}
  .musterband{font-size:12px}
}
@media (max-width:359px){
  .angebot__liste a{font-size:clamp(24px,calc((100vw - 58px) / var(--wb,9)),31px)}
  .zahl__wert{font-size:min(76px,calc((100vw - 58px) / var(--wg,3)));letter-spacing:calc(-.025em * var(--lw))}
}

@media (prefers-reduced-motion:reduce){
  .js [data-auftritt]{opacity:1!important;transition:none!important}
  .folie,.folie.ist-aktiv{transition:none!important}
  .knopf,.kopf__nav a,.kopf__logo,.fuss__logo,.angebot__liste a,.punkt,.pfeil,.sprung,.fuss__spalte a,.fuss__recht a,.schritt__text a,.recht__text a{transition:none!important}
}

/* Bildausschnitte je Foto aus den Daten (fokus, fokus_handy): Köpfe bleiben auf breiten und schmalen Schirmen im Bild.
   Erlaubt sind Prozent, Pixel und Wörter wie „center top“, nichts anderes gelangt ins Stylesheet. */
.f-auftakt-0{object-position:50% 35%}
.f-band-0{object-position:50% 35%}
.f-band-1{object-position:50% 35%}
.f-leistungen_kopf-0{object-position:50% 35%}
.f-leistungen_band-0{object-position:50% 35%}
.f-kontakt_kopf-0{object-position:50% 35%}
@media (max-width:799px){
  .f-auftakt-0{object-position:50% 35%}
  .f-band-0{object-position:50% 35%}
  .f-band-1{object-position:50% 35%}
  .f-leistungen_kopf-0{object-position:50% 35%}
  .f-leistungen_band-0{object-position:50% 35%}
  .f-kontakt_kopf-0{object-position:50% 35%}
}

/* Mehr Menüpunkte (ergänzte Seiten, ergaenzung.py 27.10.2026): die Vorlage hatte zwei Punkte und kein Handymenü.
   Unter 900 px bricht das Menü in eine zweite Zeile um, statt Wörter abzuschneiden. */
@media (max-width: 899px){
  .kopf{height:auto;min-height:64px;flex-wrap:wrap;row-gap:10px;padding-top:14px;padding-bottom:14px}
  .kopf__nav{flex-wrap:wrap;gap:8px 18px;justify-content:flex-end}
  .kopf__nav a{padding:8px 0;margin:0;line-height:1.2}
}
@media (max-width: 420px){.kopf{padding-left:16px;padding-right:16px}.kopf__nav{gap:6px 14px}.kopf__nav a{font-size:13px}}

.yg-frage{margin:28px 0 12px;font-size:clamp(24px,3vw,34px);font-weight:600;color:#fff}
.yg-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.yg-wa{background:#1F7A45;color:#fff}.yg-wa:hover{background:#17623a}
.yg-leiste{display:none}
.kw-wa{display:none!important}
@media (max-width:799px){.yg-leiste{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(11,11,11,.97)}
.yg-leiste .knopf{flex:1 1 0;padding:15px 10px;font-size:16px}body{padding-bottom:78px}}

@font-face{font-family:"Playfair Display";src:url(schrift/playfair-normal-latin.woff2) format("woff2");font-weight:400 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Playfair Display";src:url(schrift/playfair-normal-latin-ext.woff2) format("woff2");font-weight:400 900;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--schrift-titel:"Playfair Display",Georgia,"Times New Roman",serif;--gold:#D4AC52}
h1,h2,h3,.t-titel,.t-ueber{font-family:"Playfair Display",Georgia,serif!important;letter-spacing:0!important;font-weight:500}
body{font-size:17px}
.yg-held{gap:0!important;max-width:820px}
.yg-marke{margin:0 0 18px;color:var(--gold);font-size:14px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.yg-h1{margin:0;font-size:clamp(40px,5.2vw,76px);line-height:1.06;color:#fff;font-weight:500;text-wrap:balance}
.yg-unter{margin:18px 0 0;font-size:clamp(20px,2vw,26px);color:#fff;font-weight:500}
.yg-text{margin:12px 0 0;max-width:36em;font-size:17px;line-height:1.55;color:#ececec}
.yg-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0}
.yg-knoepfe .knopf,.yg-leiste .knopf{min-height:56px;padding:0 26px}
.yg-wa{background:#18703D!important;color:#fff!important}.yg-wa:hover{background:#125a31!important}
.yg-tel,.yg-leiste .knopf--dunkel{background:var(--gold)!important;color:#000!important}.yg-tel:hover{background:#c39a3f!important}
.held__inhalt{align-items:flex-end}
.t-etikett,.eg-etikett,.zahl,.zahlen b{color:var(--gold)}
hr,.linie{border-color:var(--gold)}
@media (max-width:799px){.yg-h1{font-size:clamp(32px,9vw,44px)}.yg-knoepfe .knopf{flex:1 1 100%}}

.held__schleier{background:linear-gradient(0deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.5) 55%,rgba(0,0,0,.4) 100%)}

/* Ergänzte Seiten und Fußzeile (bauarten/ergaenzung.py): Farben und Schriften der Variante, Kontrast im Motor gerechnet */
.eg-main,.eg-buehne,.eg-abschnitt,.eg-band,.eg-fuss{--eg-grund:#F3EEE4;--eg-text:#000000;--eg-karte:#FFFFFF;--eg-band:#000000;--eg-band-text:#EFE7D6;--eg-akzent:#0B0B0B;--eg-knopf:#0B0B0B;--eg-knopf-text:#ffffff;--eg-linie:#DDD0B6;--eg-leise:#000000}
.eg-main{display:block;background:var(--eg-grund);color:var(--eg-text)}
.eg-in{width:100%;max-width:1160px;margin:0 auto;padding:0 clamp(16px,4vw,48px);box-sizing:border-box}
.eg-buehne{position:relative;isolation:isolate;overflow:hidden;background:var(--eg-band);color:#fff;min-height:clamp(420px,62vh,640px);display:flex;align-items:flex-end;padding:clamp(130px,16vw,190px) 0 clamp(44px,7vw,84px)}
.eg-buehne--klein{min-height:clamp(340px,46vh,480px)}
.eg-buehne--ohne{min-height:0}
.eg-buehne .eg-hg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.eg-schleier{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.25) 100%),linear-gradient(0deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 55%)}
.eg-buehne-in{position:relative}
.eg-etikett{font-family:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px;opacity:.9}
.eg-etikett--dunkel{color:var(--eg-akzent);opacity:1}
.eg-h1{font-family:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:clamp(34px,5.6vw,72px);line-height:1.04;margin:0 0 18px;max-width:16ch;color:#fff;overflow-wrap:break-word}
.eg-lead{font-family:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:clamp(17px,1.6vw,20px);line-height:1.55;max-width:58ch;margin:0;color:rgba(255,255,255,.92)}
.eg-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.eg-knopf{display:inline-flex;align-items:center;min-height:48px;padding:12px 22px;border-radius:4px;background:var(--eg-knopf);color:var(--eg-knopf-text);font-family:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:600;font-size:16px;text-decoration:none;border:1px solid transparent;transition:transform .2s ease,background-color .2s ease}
.eg-knopf:hover{transform:translateY(-1px)}
.eg-knopf--rand{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.eg-knopf--band{background:#EFE7D6;color:#000000;white-space:nowrap}
.eg-abschnitt{background:var(--eg-grund);color:var(--eg-text);padding:clamp(52px,8vw,104px) 0;font-family:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:17px;line-height:1.6}
.eg-abschnitt--karte{background:var(--eg-karte)}
.eg-abschnitt--knapp{padding:clamp(28px,4vw,44px) 0}
.eg-abschnitt p{margin:0 0 1em;max-width:68ch}
.eg-h2{font-family:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:clamp(26px,3.4vw,44px);line-height:1.12;margin:0 0 clamp(22px,3vw,36px);color:inherit;max-width:24ch;overflow-wrap:break-word}
.eg-h3{font-family:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:clamp(19px,1.8vw,23px);line-height:1.2;margin:0 0 10px;color:inherit}
.eg-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:clamp(14px,2vw,24px)}
.eg-karte{display:block;background:var(--eg-grund);color:var(--eg-text);border:1px solid var(--eg-linie);border-radius:4px;padding:clamp(20px,2.4vw,30px);text-decoration:none}
.eg-abschnitt--karte .eg-karte{background:var(--eg-grund)}
.eg-abschnitt:not(.eg-abschnitt--karte) .eg-karte{background:var(--eg-karte)}
.eg-karte p{margin:0 0 .6em}
.eg-pfeil{color:var(--eg-akzent);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.eg-leistung{padding:0 0 clamp(26px,3vw,40px);margin:0 0 clamp(26px,3vw,40px);border-bottom:1px solid var(--eg-linie)}
.eg-leistung:last-child{border-bottom:0;margin-bottom:0}
.eg-leistung .eg-h2{font-size:clamp(23px,2.6vw,34px);margin-bottom:12px}
.eg-foto{margin:0 0 clamp(26px,3vw,40px)}
.eg-foto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:4px}
.eg-foto--breit img{aspect-ratio:21/9}
.eg-zwei{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,64px);align-items:start}
.eg-zwei--ohne{grid-template-columns:1fr}
.eg-zwei .eg-foto{margin:0}
.eg-text p{font-size:clamp(17px,1.5vw,19px)}
.eg-schritte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:clamp(16px,2vw,28px)}
.eg-schritte li{display:flex;gap:16px;align-items:flex-start}
.eg-nr{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--eg-akzent);color:var(--eg-akzent);font-family:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:18px}
.eg-fragen{display:grid;gap:10px;max-width:860px}
.eg-frage{border:1px solid var(--eg-linie);border-radius:4px;background:var(--eg-grund);padding:0 20px}
.eg-abschnitt:not(.eg-abschnitt--karte) .eg-frage{background:var(--eg-karte)}
.eg-frage summary{cursor:pointer;padding:16px 0;font-weight:600;list-style-position:outside}
.eg-frage p{margin:0 0 16px}
.eg-wertung{font-family:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:clamp(20px,2vw,26px);margin:0 0 22px;color:var(--eg-akzent)}
.eg-stimme{margin:0;background:var(--eg-grund);border:1px solid var(--eg-linie);border-radius:4px;padding:clamp(20px,2.4vw,30px)}
.eg-abschnitt:not(.eg-abschnitt--karte) .eg-stimme{background:var(--eg-karte)}
.eg-zitat{margin:0 0 12px;font-size:17px;line-height:1.6}
.eg-zitat p{margin:0}
.eg-stimme figcaption{font-size:14px;color:var(--eg-leise)}
.eg-band{background:var(--eg-band);color:var(--eg-band-text);padding:clamp(44px,6vw,72px) 0}
.eg-band-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.eg-band .eg-h2{margin:0;color:var(--eg-band-text)}
.eg-band p{margin:10px 0 0;font-family:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
.eg-zeiten{margin:0;display:grid;gap:6px}
.eg-zeiten div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px}
.eg-zeiten dt{font-weight:600}
.eg-zeiten dd{margin:0}
.eg-gross{font-family:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:clamp(22px,2.4vw,30px);color:var(--eg-akzent);text-decoration:none;white-space:nowrap}
.eg-haken{margin:0;padding:0 0 0 1.2em;display:grid;gap:8px}
.eg-klein{font-size:14px;color:var(--eg-leise)}
.eg-orteliste{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:baseline;margin:0}
.eg-orteliste a{color:var(--eg-akzent);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.eg-ortkarte strong{display:block;font-family:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:clamp(21px,2vw,26px);margin-top:6px;overflow-wrap:anywhere}
.eg-ortkarte:hover{border-color:var(--eg-akzent)}
.eg-ortkarte--heim{border-color:var(--eg-akzent)}
.eg-fuss{grid-column:1/-1;flex:1 1 100%;width:100%;max-width:1160px;margin-left:auto;margin-right:auto;padding-left:clamp(16px,4vw,48px);padding-right:clamp(16px,4vw,48px);padding-bottom:18px;box-sizing:border-box;margin-top:28px;padding-top:18px;border-top:1px solid currentColor;border-top-color:color-mix(in srgb,currentColor 22%,transparent);font-size:14px;line-height:1.6;text-align:left}
.eg-fuss p{margin:0 0 6px;display:flex;flex-wrap:wrap;gap:4px 14px;max-width:none}
.eg-fuss span{font-weight:600}
.eg-fuss a{color:inherit;text-decoration:underline;text-underline-offset:3px;display:inline}
.eg-fuss-bild{opacity:.8}
.eg-main a,.eg-abschnitt a,.eg-fuss a{overflow-wrap:anywhere}
@media (max-width:760px){
  .eg-zwei{grid-template-columns:1fr}
  .eg-buehne{min-height:0}
  .eg-band-in{flex-direction:column;align-items:flex-start}
}
@media (max-width:520px){.eg-h1,.eg-h2{hyphens:auto}.eg-knopf{width:100%;justify-content:center}.eg-knopf--band{white-space:normal}}
@media (prefers-reduced-motion:reduce){.eg-knopf{transition:none}.eg-knopf:hover{transform:none}}
/* Anfrageformular, das live.py beim Livegang in kontakt.html setzt (Klassen aus live.formular) */
.eg-formular #anfrage{background:var(--eg-karte,#f5f5f5);color:var(--eg-text,#111);padding:clamp(48px,7vw,96px) 0;font-family:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:16px;line-height:1.55}
.eg-formular{--eg-grund:#F3EEE4;--eg-text:#000000;--eg-karte:#FFFFFF;--eg-linie:#DDD0B6;--eg-knopf:#0B0B0B;--eg-knopf-text:#ffffff}
.eg-formular .in{max-width:1160px;margin:0 auto;padding:0 clamp(16px,4vw,48px);display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,4vw,64px);box-sizing:border-box}
.eg-formular h2{font-family:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:clamp(26px,3vw,40px);line-height:1.12;margin:0 0 14px}
.eg-formular .ey{display:block;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
.eg-formular .haken{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:8px}
.eg-formular .haken svg,.eg-formular .btn svg{width:18px;height:18px;flex:0 0 auto}
.eg-formular .haken li{display:flex;gap:10px;align-items:flex-start}
.eg-formular form{display:grid;gap:14px;background:var(--eg-grund);border:1px solid var(--eg-linie);border-radius:4px;padding:clamp(18px,3vw,32px)}
.eg-formular .zeile{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.eg-formular label{display:grid;gap:6px;font-weight:600;font-size:15px}
.eg-formular input,.eg-formular select,.eg-formular textarea{font:inherit;font-weight:400;width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid var(--eg-linie);border-radius:4px;background:#fff;color:#111}
.eg-formular .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.eg-formular .klein{font-size:13px;margin:0}
.eg-formular .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border:0;border-radius:4px;background:var(--eg-knopf);color:var(--eg-knopf-text);font:inherit;font-weight:600;cursor:pointer}
@media (max-width:760px){.eg-formular .in,.eg-formular .zeile{grid-template-columns:1fr}}
.eg-ds{padding-bottom:40px}
.eg-symbol{position:absolute;right:12px;bottom:10px;z-index:1;font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.85);background:rgba(0,0,0,.35);padding:2px 8px;border-radius:3px}
.eg-symbol-zeile{font-size:12px;color:var(--eg-leise);margin-top:6px}