@font-face{font-family:"Literata";src:url(/assets/fonts/literata.woff2) format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(/assets/fonts/hanken.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --tinte:#1D2433; --tinte-2:#2A3347; --wein:#6E1414; --rosa:#F4B8B6; --rot:#B02E2B; --rot-dunkel:#8E2321; --koralle:#E36664; --himmel:#DCE8F3; --stein:#F1F3F6; --linie:#D5DAE2; --leise:#566074; --weiss:#fff;
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:40px; --s6:64px; --s7:104px;
  --rand:clamp(20px,5vw,56px); --breit:1180px; --lese:46rem;
  --serif:"Literata","Georgia","Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif; --sans:"Hanken Grotesk","Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  --zh-serif:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif; --zh-sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px;color-scheme:light}
body{margin:0;background:var(--weiss);color:var(--tinte);font:400 1.125rem/1.7 var(--serif);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body:lang(zh){font-family:var(--zh-sans);line-height:1.85}
h1:lang(zh),h2:lang(zh),h3:lang(zh),.zitat-zh:lang(zh),.hero-zh:lang(zh){font-family:var(--zh-serif)}
img{max-width:100%;height:auto;display:block}
a{color:var(--rot);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--rot-dunkel)}
:focus-visible{outline:3px solid var(--rot);outline-offset:3px;border-radius:2px}
.wrap{width:min(100%,var(--breit));margin-inline:auto;padding-inline:var(--rand)}
.skip{position:absolute;left:-999px;top:8px;background:var(--wein);color:#fff;padding:10px 16px;z-index:100;font-family:var(--sans)}
.skip:focus{left:8px}
.band{background:var(--rot);color:#fff;font:500 .95rem/1.4 var(--sans);padding:10px 0;text-align:left}.band a{color:#fff}

/* Kopf */
.kopf{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);border-bottom:1px solid var(--linie);transition:box-shadow .2s}
.kopf.gescrollt{box-shadow:0 6px 24px -14px rgba(29,36,51,.35)}
.kopf-in{display:flex;align-items:center;gap:var(--s4);min-height:72px}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--tinte);margin-right:auto}
.siegel{flex:none;border-radius:6px}
.marke-text{display:flex;flex-direction:column;line-height:1.15}
.marke-text b{font:600 1.3rem/1.1 var(--serif);letter-spacing:.01em}
.marke-text small{font:500 .78rem/1.3 var(--sans);color:var(--leise);letter-spacing:.02em;margin-top:3px}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.nav a{display:block;padding:10px 14px;font:500 1rem/1 var(--sans);color:var(--tinte);text-decoration:none;border-radius:4px}
.nav a:hover{background:var(--stein)}
.nav a[aria-current=page]{color:var(--rot);box-shadow:inset 0 -3px 0 var(--rot);border-radius:0}
.sprachwahl{list-style:none;margin:0;padding:3px;display:flex;border:1px solid var(--linie);border-radius:999px;background:var(--stein)}
.sprachwahl a{display:block;padding:6px 14px;font:600 .9rem/1 var(--sans);color:var(--leise);text-decoration:none;border-radius:999px}
.sprachwahl a[aria-current]{background:var(--wein);color:#fff}
.menue-knopf{display:none;align-items:center;gap:10px;background:none;border:1px solid var(--linie);border-radius:6px;padding:10px 14px;font:600 .95rem/1 var(--sans);color:var(--tinte);cursor:pointer}
.striche{display:grid;gap:5px;width:18px}.striche i{display:block;height:2px;background:currentColor;transition:transform .2s}
.menue-knopf[aria-expanded=true] .striche i:first-child{transform:translateY(3.5px) rotate(45deg)}.menue-knopf[aria-expanded=true] .striche i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.krumen{padding-block:var(--s3) 0;font:500 .9rem/1.4 var(--sans)}
.krumen ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}.krumen li+li::before{content:"/";margin-right:6px;color:var(--leise)}
.krumen a{color:var(--leise)}.krumen [aria-current]{color:var(--tinte)}

/* Knöpfe */
.knopf{display:inline-block;background:var(--rot);color:#fff;border:2px solid var(--rot);border-radius:4px;padding:13px 24px;font:600 1rem/1.2 var(--sans);text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s}
.knopf:hover{background:var(--rot-dunkel);border-color:var(--rot-dunkel);color:#fff}
.hero .knopf:not(.hell){background:#fff;color:var(--wein);border-color:#fff}.hero .knopf:not(.hell):hover{background:var(--rosa);border-color:var(--rosa);color:var(--wein)}
.knopf.hell{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}.knopf.hell:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* Start: Kopfbereich */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:min(76vh,44rem);background:var(--wein);color:#fff}
.hero-text{display:flex;align-items:center;padding:var(--s6) var(--rand) var(--s6) max(var(--rand),calc((100vw - var(--breit))/2 + var(--rand)))}
.hero-in{max-width:30rem}
.hero h1{font:600 clamp(2.8rem,6vw,4.6rem)/1.02 var(--serif);margin:0;letter-spacing:-.01em}
.hero-zeile{font:500 clamp(1.15rem,2.1vw,1.45rem)/1.35 var(--sans);color:var(--rosa);margin:var(--s3) 0 0}
.hero-zh{font:600 clamp(1.1rem,1.9vw,1.45rem)/1.5 var(--zh-serif);letter-spacing:.1em;margin:var(--s4) 0 0;color:#fff}
.hero-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin:var(--s5) 0 0}
.hero-bild{position:relative;min-height:18rem}.hero-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}

/* Zitate */
.zitate{background:var(--himmel);padding:var(--s6) 0}
.zitate-raster{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6)}
.zitat p{margin:0 0 .35em}.zitat p:first-child{font:500 clamp(1.4rem,2.6vw,2rem)/1.35 var(--serif)}.zitat p+p{font:600 .95rem/1.4 var(--sans);color:var(--leise);letter-spacing:.03em}
.zitat-zh p:first-child{font:600 clamp(1.5rem,2.8vw,2.1rem)/1.5 var(--zh-serif);letter-spacing:.06em}
.zitat-zh{border-left:1px solid rgba(29,36,51,.25);padding-left:var(--s6)}
.zitat strong{font-weight:inherit}.zitat em{font-style:normal}

/* Start: Vorstellung */
.vorstellung{padding:var(--s7) 0 var(--s6)}
.vorstellung-raster{display:grid;grid-template-columns:minmax(0,1fr) 22rem;gap:clamp(40px,7vw,104px);align-items:start}
.willkommen p{font:600 clamp(1.5rem,2.6vw,2rem)/1.3 var(--serif);margin:0 0 var(--s4)}
.vorstellung-seite{position:sticky;top:100px}
.portrait{margin:0 0 var(--s4)}.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;border-radius:4px}
.qualifikation{font:400 1rem/1.55 var(--sans);border-left:3px solid var(--rot);padding-left:var(--s3)}
.qualifikation p{margin:0 0 .7em}
.justiz{font:400 .95rem/1.55 var(--sans);margin-top:var(--s4);color:var(--leise)}.justiz p{margin:0 0 .6em}.justiz em{font-style:normal}.justiz a{overflow-wrap:anywhere}

/* Unterseiten */
.seitenkopf{padding:var(--s6) 0 var(--s4)}
.seitenkopf-in{display:grid;gap:var(--s5);align-items:end}
.seitenkopf.mit-bild .seitenkopf-in{grid-template-columns:minmax(0,1fr) 15rem}
.seitenkopf h1{font:600 clamp(2rem,4.6vw,3.2rem)/1.1 var(--serif);margin:0;letter-spacing:-.005em;max-width:20ch;text-wrap:balance}
.seitenkopf h1:lang(zh){letter-spacing:.04em;max-width:none}
.kopf-bild img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;border-radius:4px}
.kopf-bild.breit img{aspect-ratio:16/9;max-height:28rem;margin-bottom:var(--s4)}
.post-datum{font:600 .9rem/1 var(--sans);color:var(--leise);margin:0 0 var(--s3)}
.seite-spalte{padding-bottom:var(--s6)}
.inhalt{max-width:var(--lese)}
.inhalt>*:first-child{margin-top:0}
.inhalt h2{font:600 clamp(1.5rem,2.8vw,2rem)/1.2 var(--serif);margin:var(--s6) 0 var(--s3)}
.inhalt h3{font:600 1.15rem/1.3 var(--sans);margin:var(--s5) 0 var(--s2);letter-spacing:.01em}
.inhalt h3:lang(zh),.inhalt h2:lang(zh){letter-spacing:.03em}
.inhalt p{margin:0 0 1.1em}
.inhalt ul,.inhalt ol{margin:0 0 1.2em;padding-left:1.3em}.inhalt li{margin-bottom:.45em}
.inhalt strong{font-weight:650}
.inhalt p.lead{font-size:1.3rem;line-height:1.55}
.inhalt .hinweis{background:var(--himmel);padding:var(--s3) var(--s4);border-radius:4px;margin:var(--s5) 0}.inhalt .hinweis p{margin:0}
.inhalt ul.leistungen{list-style:none;padding:0;display:grid;gap:var(--s3);margin-bottom:var(--s5)}
.inhalt ul.leistungen li{background:var(--stein);border-left:4px solid var(--rot);padding:var(--s4);margin:0;font-size:1.15rem}
.inhalt table.zeit{width:100%;border-collapse:collapse;font:400 1.05rem/1.55 var(--serif)}
.inhalt table.zeit td{padding:14px 0;vertical-align:top;border-top:1px solid var(--linie)}
.inhalt table.zeit tr:last-child td{border-bottom:1px solid var(--linie)}
.inhalt table.zeit td:first-child{width:7.5rem;padding-right:var(--s3);font:600 .95rem/1.6 var(--sans);color:var(--rot);white-space:nowrap}
.inhalt figure{margin:var(--s5) 0}.inhalt figure img{border-radius:4px;cursor:zoom-in}
.inhalt img[data-gross]{cursor:zoom-in;border-radius:4px}
.punkte{padding-left:1.2em}

/* Formular */
.anfrage-sektion{background:var(--stein);padding:var(--s7) 0;scroll-margin-top:90px}
.kon-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,88px)}
.kon-raster.einzeln{grid-template-columns:minmax(0,40rem)}
.kon-info h2{font:600 clamp(1.6rem,3vw,2.2rem)/1.2 var(--serif);margin:0 0 var(--s3)}
.kon-info p{margin:0 0 1em;font:400 1.05rem/1.65 var(--sans)}
.kon-form h2{font:600 clamp(1.5rem,2.6vw,1.9rem)/1.25 var(--serif);margin:0 0 var(--s4)}
.anfrage-form{display:grid;grid-template-columns:1fr;gap:var(--s3)}
.feld label{display:block;font:600 .95rem/1.3 var(--sans);margin-bottom:6px}
.feld input[type=text],.feld input[type=email],.feld input[type=tel],.feld textarea{width:100%;font:400 1.05rem/1.4 var(--sans);padding:13px 14px;border:1px solid #9aa3b2;border-radius:4px;background:#fff;color:var(--tinte)}
.feld input[aria-invalid=true],.feld textarea[aria-invalid=true]{border-color:var(--rot);box-shadow:0 0 0 1px var(--rot)}
.feld.haken label{display:flex;gap:12px;font:400 .95rem/1.5 var(--sans);align-items:flex-start}.feld.haken input{margin-top:4px;width:20px;height:20px;flex:none;accent-color:var(--rot)}
.pflicht{color:var(--rot)}
.feld-honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.klein{font:400 .88rem/1.4 var(--sans);color:var(--leise);margin-left:8px}
.form-status{font:500 1rem/1.5 var(--sans);min-height:1.5em}.form-status.fehler{color:var(--rot)}.form-status.ok{background:#fff;border-left:4px solid var(--rot);padding:var(--s3) var(--s4)}.form-status.ok p{margin:0 0 .3em}

/* Blog */
.blog-einl{font:500 1.1rem/1.5 var(--sans);color:var(--leise);margin:0 0 var(--s5)}
.post-liste{list-style:none;margin:0;padding:0;display:grid;gap:var(--s5);max-width:var(--lese)}
.post-liste a{display:grid;gap:var(--s3);text-decoration:none;color:var(--tinte);border-top:1px solid var(--linie);padding-top:var(--s4)}
.post-liste figure{margin:0}.post-liste img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px}
.post-text{display:grid;gap:6px}.post-text time{font:600 .88rem/1 var(--sans);color:var(--leise)}.post-text b{font:600 1.4rem/1.25 var(--serif)}.post-liste a:hover b{color:var(--rot)}.post-text span{font:400 1rem/1.5 var(--sans);color:var(--leise)}
.weiter{margin-top:var(--s5);font:600 1rem/1.4 var(--sans)}

/* Fuß */
.fuss{background:var(--wein);color:#d9deea;font:400 1rem/1.65 var(--sans);padding:var(--s6) 0 var(--s5)}
.fuss a{color:#fff}.fuss a:hover{color:var(--rosa)}
.fuss-raster{display:grid;grid-template-columns:1.3fr 1.3fr 1fr;gap:var(--s5)}
.fuss p{margin:0 0 .8em}.fuss-name{font:600 1.35rem/1.2 var(--serif);color:#fff}
.fuss-titel{font:600 .8rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--rosa)}
.fuss-unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3);margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid rgba(255,255,255,.18);font-size:.92rem}
.fuss-unten p{margin:0}.fuss-unten ul{list-style:none;margin:0;padding:0;display:flex;gap:var(--s4)}

.handyleiste{display:none}

/* Großansicht */
.lightbox{position:fixed;inset:0;background:rgba(18,22,32,.94);z-index:200;display:grid;place-items:center;padding:24px}.lightbox[hidden]{display:none}
.lightbox img{max-width:min(96vw,1400px);max-height:84vh;width:auto;height:auto;border-radius:2px}
.lb-zu,.lb-pfeil{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;width:48px;height:48px;border-radius:50%;font:400 30px/1 var(--sans);cursor:pointer}
.lb-zu{top:16px;right:16px}.lb-vor{left:16px;top:50%}.lb-weiter{right:16px;top:50%}.lb-zaehler{position:absolute;bottom:16px;color:#fff;font:500 .9rem var(--sans)}.lightbox.einzeln .lb-pfeil{display:none}
body.lb-offen{overflow:hidden}

@media (max-width:1000px){
  .hero{grid-template-columns:1fr}.hero-bild{order:-1;min-height:0;aspect-ratio:4/3}.hero-text{padding:var(--s5) var(--rand) var(--s6)}.hero-in{max-width:none}
  .vorstellung-raster{grid-template-columns:1fr}.vorstellung-seite{position:static;display:grid;grid-template-columns:minmax(0,16rem) 1fr;gap:var(--s4) var(--s5)}.portrait{grid-row:span 2}
  .kon-raster{grid-template-columns:1fr}
  .fuss-raster{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .menue-knopf{display:inline-flex}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--linie);padding:var(--s3) var(--rand) var(--s4)}
  .nav.offen{display:block}.nav ul{flex-direction:column;gap:0}.nav a{padding:14px 4px;font-size:1.1rem;border-bottom:1px solid var(--stein)}.nav a[aria-current=page]{box-shadow:none;color:var(--rot)}
  .kopf-in{gap:var(--s3)}.marke-text small{display:none}
  .zitate-raster{grid-template-columns:1fr;gap:var(--s5)}.zitat-zh{border-left:0;padding-left:0;border-top:1px solid rgba(29,36,51,.25);padding-top:var(--s5)}
  .seitenkopf.mit-bild .seitenkopf-in{grid-template-columns:1fr}.kopf-bild{max-width:13rem}
}
@media (max-width:640px){
  body{font-size:1.0625rem}
  .vorstellung-seite{grid-template-columns:1fr}.portrait{max-width:16rem}
  .fuss-raster{grid-template-columns:1fr}
  .inhalt table.zeit td:first-child{width:5.6rem;white-space:normal}
  .handyleiste{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--wein);border-top:1px solid rgba(255,255,255,.2)}
  .handyleiste a{padding:14px 6px;text-align:center;color:#fff;text-decoration:none;font:600 .95rem/1 var(--sans)}.handyleiste a+a{border-left:1px solid rgba(255,255,255,.2)}
  .fuss{padding-bottom:calc(var(--s5) + 56px)}
  .sprachwahl a{padding:6px 10px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}
@media (max-width:520px){
  .kopf-in{gap:8px}.marke{gap:8px;min-width:0}.siegel{width:34px;height:34px}.marke-text b{font-size:1.08rem}
  .sprachwahl a{padding:6px 8px;font-size:.8rem}.menue-knopf{padding:9px 10px;gap:7px;font-size:.9rem}
}
