/* Schriften liegen lokal in assets/fonts, nichts wird von fremden Servern geladen */
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --nacht:#131C2E;
  --nacht-tief:#0D1422;
  --messing:#B8955E;
  --messing-hell:#D9BE8F;
  --messing-text:#7E6235;
  --papier:#FAF8F4;
  --linie:#E3DED4;
  --stein:#6A6861;
  --weiss:#FFFFFF;
  --auf-nacht:#C6C9D0;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk","Segoe UI",Arial,sans-serif;
  --breite:1240px;
  --rand:clamp(20px,5vw,64px);
  --abstand:clamp(64px,9vw,120px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:116px}
body{margin:0;background:var(--papier);color:var(--nacht);font:400 18px/1.65 var(--sans);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:var(--nacht);text-underline-offset:.2em;text-decoration-thickness:1px;text-decoration-color:var(--messing)}
a:hover{color:var(--messing-text)}
:focus-visible{outline:2px solid var(--messing);outline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.14;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(2.5rem,4.3vw,4.1rem)}
h2{font-size:clamp(2rem,3.5vw,3rem)}
h3{font-size:clamp(1.4rem,1.9vw,1.55rem);line-height:1.25}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0}

.innen{max-width:var(--breite);margin-inline:auto;padding-inline:var(--rand)}
.abschnitt{padding-block:var(--abstand)}
.dachzeile{font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--messing-text);margin-bottom:1rem}
.einleitung{font-size:clamp(1.1rem,1.5vw,1.22rem);max-width:38em}
.leise{color:var(--stein)}
.sprunglink{position:absolute;left:-999px;top:0;background:var(--papier);color:var(--nacht);padding:12px 16px;z-index:100}
.sprunglink:focus{left:8px;top:8px}

/* Knopf */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:54px;padding:.8em 1.6em;background:var(--messing);color:var(--nacht);border:0;font:600 1.02rem/1.2 var(--sans);text-decoration:none;cursor:pointer;transition:background .2s ease}
.knopf:hover{background:var(--messing-hell);color:var(--nacht)}
.knopf svg{width:18px;height:18px;flex:none}
.textlink{font-weight:500;text-decoration:none;border-bottom:1px solid var(--messing);padding-bottom:2px;transition:padding .2s ease}
.textlink:hover{padding-bottom:5px}

/* Kopfzeile */
.kopf{position:sticky;top:0;z-index:50;background:var(--nacht);color:var(--weiss);border-bottom:1px solid rgba(217,190,143,.28)}
.kopf .innen{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:92px}
.logo img{filter:invert(1) brightness(1.8)}
.logo img{width:clamp(190px,18vw,230px)}
.haupt-nav{display:flex;align-items:center;gap:36px}
.haupt-nav ul{display:flex;gap:30px;list-style:none}
.haupt-nav li a{display:block;padding:8px 0;color:var(--weiss);text-decoration:none;font-weight:600;font-size:1rem;border-bottom:1px solid transparent;transition:border-color .2s ease}
.haupt-nav li a:hover,.haupt-nav li a[aria-current]{border-color:var(--messing-hell)}
.kopf-tel{color:var(--messing-hell);font-weight:600;line-height:1.25;text-decoration:none;white-space:nowrap}
.kopf-tel span{display:block;font-size:.72rem;font-weight:500;letter-spacing:.04em;color:var(--auf-nacht)}
.kopf-tel:hover{color:var(--weiss)}
.menue-knopf{display:none;width:48px;height:48px;background:none;border:0;padding:12px;cursor:pointer;color:var(--weiss)}
.menue-knopf span{display:block;height:2px;background:currentColor;margin:6px 0;transition:transform .2s ease,opacity .2s ease}

/* Startseite Kopfbereich */
.held{position:relative;display:flex;align-items:center;min-height:min(calc(100vh - 93px),740px);background:var(--nacht);color:var(--weiss);overflow:hidden}
.held>img{position:absolute;top:0;right:0;width:68%;height:100%;object-fit:cover;object-position:50% 12%}
.held::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#131C2E 0%,#131C2E 32%,rgba(19,28,46,.72) 44%,rgba(19,28,46,.12) 60%,rgba(19,28,46,0) 72%),linear-gradient(0deg,rgba(19,28,46,.5),transparent 30%)}
.held .innen{position:relative;z-index:2;width:100%;padding-block:64px}
.held .dachzeile{color:var(--messing-hell)}
.held h1{max-width:9.6em;margin-bottom:1.3rem}
.held .einleitung{max-width:30em;margin-bottom:2rem;color:#E7E4DD}
.notfall-zeile{margin-top:1.1rem;color:var(--auf-nacht)}
.notfall-zeile a{color:var(--messing-hell);font-weight:600;white-space:nowrap}

/* Polizei-Post */
.pol-kopf{max-width:660px;margin-bottom:clamp(36px,5vw,60px)}
.pol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,44px);list-style:none}
.pol li{border-top:2px solid var(--nacht);padding-top:18px}
.pol strong{display:block;font:400 1.4rem/1.25 var(--serif);margin-bottom:.6rem}
.pol p{font-size:1rem;color:var(--stein)}

/* Dunkle Flächen */
.dunkel{background:var(--nacht);color:#F3F0E9}
.dunkel .dachzeile{color:var(--messing-hell)}
.dunkel a:not(.knopf){color:#F3F0E9}
.zweispaltig{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,7vw,96px);align-items:start}

/* Rechtsgebiete als Zeilen */
.zeilen{list-style:none}
.zeilen a{display:grid;grid-template-columns:minmax(0,1fr) 28px;gap:4px 24px;padding:24px 0;border-bottom:1px solid rgba(255,255,255,.16);text-decoration:none;transition:padding .25s ease}
.zeilen li:first-child a{padding-top:0}
.zeilen a:hover{padding-left:10px}
.zeilen p{grid-column:1;color:var(--auf-nacht)}
.zeilen .pfeil{grid-column:2;grid-row:1;color:var(--messing-hell);text-align:right;font-size:1.25rem}

/* Ablauf */
.abl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin-top:48px;position:relative}
.abl::before{content:"";position:absolute;left:0;right:0;top:23px;height:1px;background:var(--linie)}
.ziffer{display:flex;width:46px;height:46px;border:1px solid var(--messing);border-radius:50%;align-items:center;justify-content:center;font:400 1.3rem var(--serif);background:var(--papier);margin-bottom:18px;position:relative;z-index:1}
.abl h3{margin-bottom:.5rem}

/* Über Dr. Koch */
.ueber-band{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;background:var(--weiss)}
.ueber-band img{width:100%;height:100%;min-height:520px;object-fit:cover}
.ueber-band>div{padding:clamp(40px,6vw,88px)}
.ueber-band h2{margin-bottom:1.2rem}
.zitat{margin:1.6rem 0;padding-left:20px;border-left:2px solid var(--messing);font:italic 400 1.35rem/1.45 var(--serif)}
.zitat-gross{max-width:880px;margin:0 auto;padding:0;border:0;text-align:center;font:italic 400 clamp(1.6rem,3vw,2.5rem)/1.3 var(--serif)}
.zitat-gross footer{margin-top:1.3rem;font:400 1rem/1.5 var(--sans);color:var(--stein)}

/* Bild und Text auf Unterseiten */
.bild-text{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px,7vw,96px);align-items:center}
.bild-text.umgekehrt{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.bild-text img{width:100%;aspect-ratio:3/2;object-fit:cover}

/* Bewertungen */
.kopf-reihe{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:clamp(28px,4vw,44px);flex-wrap:wrap}
.stimmen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
.stimmen figure{margin:0;padding:28px 0;border-top:1px solid var(--linie)}
.stimmen blockquote{margin:0;font:400 1.2rem/1.5 var(--serif)}
.stimmen figcaption{margin-top:.7rem;font-size:.95rem;color:var(--stein)}
.wisch-hinweis{display:none;font-size:.92rem;color:var(--stein);margin-top:14px}

/* Kanzlei */
.kanzlei{position:relative}
.kanzlei img{width:100%;height:clamp(420px,48vw,640px);object-fit:cover;object-position:50% 62%}
.kanzlei-karte{position:absolute;right:max(var(--rand),calc((100vw - var(--breite))/2 + var(--rand)));bottom:-48px;width:min(420px,calc(100% - 2*var(--rand)));background:var(--papier);padding:36px;border-top:3px solid var(--messing)}
.kanzlei-karte h2{font-size:1.9rem;margin-bottom:.8rem}
.nach-kanzlei{padding-top:calc(var(--abstand) + 48px)}

/* Fragen */
.fragen details{border-top:1px solid var(--linie)}
.fragen details:last-child{border-bottom:1px solid var(--linie)}
.fragen summary{display:flex;justify-content:space-between;gap:24px;align-items:baseline;padding:22px 0;cursor:pointer;list-style:none;font:400 1.3rem/1.3 var(--serif);transition:color .2s ease}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary:hover{color:var(--messing-text)}
.fragen summary::after{content:"+";font:400 1.6rem/1 var(--sans);color:var(--messing-text);transition:transform .2s ease}
.fragen details[open] summary::after{transform:rotate(45deg)}
.fragen details p{padding-bottom:22px;max-width:40em}

/* Abschluss */
.abschluss{background:var(--nacht);color:var(--weiss)}
.abschluss .innen{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center;padding-block:clamp(56px,8vw,96px)}
.abschluss h2{margin-bottom:.8rem}
.abschluss p{color:var(--auf-nacht)}
.abschluss-rechts{text-align:right}

/* Unterseiten */
.seitenkopf{padding-block:clamp(48px,7vw,96px)}
.seitenkopf h1{font-size:clamp(2.3rem,4.4vw,3.8rem);margin-bottom:1.2rem}
.seitenkopf .einleitung{margin-bottom:1.6rem}
.merkmale{list-style:none;margin:2rem 0 0}
.merkmale li{padding:15px 0;border-top:1px solid var(--linie);font-weight:500}
.merkmale li:last-child{border-bottom:1px solid var(--linie)}
.hell{background:var(--weiss)}
.galerie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(36px,5vw,56px)}
.galerie figure{margin:0}
.galerie img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .5s ease}
.galerie figure:first-child{grid-column:1/-1}
.galerie figure:first-child img{aspect-ratio:21/9;object-position:50% 62%}
.galerie div{overflow:hidden}
.galerie figure:hover img{transform:scale(1.025)}
.galerie figcaption{margin-top:.6rem;font-size:.95rem;color:var(--stein)}
.gebiet{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,6vw,80px);padding-block:clamp(40px,5vw,64px);border-top:1px solid var(--linie)}
.gebiet ul{margin:1rem 0 0;padding-left:1.1em}
.gebiet li{margin-bottom:.4em}
.gebiet li::marker{color:var(--messing)}
.notfall-kasten{background:#EFE6D6;color:var(--nacht);border-left:3px solid var(--messing);padding:clamp(28px,4vw,44px);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.notfall-kasten h2{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.notfall-kasten p{margin-top:.4rem}
.notfall-kasten .knopf{background:var(--nacht);color:var(--weiss)}
.notfall-kasten .knopf:hover{background:var(--nacht-tief);color:var(--messing-hell)}

/* Kontakt */
.kontakt-raster{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(40px,7vw,96px);align-items:start}
.feld{margin-bottom:22px}
.feld label{display:block;font-weight:600;font-size:.96rem;margin-bottom:6px}
.feld .frei{font-weight:400;color:var(--stein)}
.feld input,.feld textarea{width:100%;padding:14px;background:var(--weiss);border:1px solid #B9B3A7;color:var(--nacht);font:400 1rem/1.5 var(--sans);transition:border-color .2s ease}
.feld input:focus,.feld textarea:focus{border-color:var(--nacht);outline:1px solid var(--nacht)}
.feld textarea{min-height:170px;resize:vertical}
.honig{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.formular-hinweis{font-size:.94rem;color:var(--stein);margin-bottom:22px}
.meldung{padding:16px 18px;margin-bottom:24px;border-left:3px solid var(--messing);background:var(--weiss)}
.meldung[hidden]{display:none}
.meldung.fehler{border-left-color:#8E2A1E}
.daten-liste{margin:0}
.daten-liste dt{font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--stein);margin-top:22px}
.daten-liste dt:first-child{margin-top:0}
.daten-liste dd{margin:.15rem 0 0}

/* Rechtstexte */
.rechtstext{max-width:780px;overflow-wrap:break-word}
.rechtstext h1,.rechtstext h2{hyphens:auto}
.rechtstext h1{margin-bottom:2rem;font-size:clamp(2.3rem,4vw,3.4rem)}
.rechtstext h2{font-size:1.65rem;margin:2.4rem 0 .7rem}
.rechtstext ul{padding-left:1.1em}

/* Fuß */
.fuss{background:var(--nacht-tief);color:var(--auf-nacht);font-size:.94rem}
.fuss-zeile{display:flex;justify-content:space-between;align-items:center;gap:12px 32px;flex-wrap:wrap;padding-block:20px}
.fuss ul{display:flex;gap:24px;list-style:none}
.fuss a{display:inline-block;padding:4px 0;color:var(--papier);text-decoration:none}
.fuss a:hover{color:var(--messing-hell)}

/* Nach oben */
.nach-oben{position:fixed;right:20px;bottom:20px;z-index:55;display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:var(--nacht);color:var(--messing-hell);border:1px solid var(--messing);transition:opacity .25s ease,visibility .25s ease,background .2s ease}
.nach-oben:hover{background:var(--messing);color:var(--nacht)}
.nach-oben svg{width:20px;height:20px}
.js .nach-oben{opacity:0;visibility:hidden}
.js .nach-oben.sichtbar{opacity:1;visibility:visible}

/* Dunkle Flächen: Gemälde der Kanzlei als stark abgedunkelte Struktur */
.kopf{background-image:linear-gradient(180deg,#1A2438,#131C2E)}
.dunkel{background-image:linear-gradient(90deg,rgba(19,28,46,.97) 0%,rgba(19,28,46,.9) 55%,rgba(19,28,46,.8) 100%),url("../img/12.jpg");background-size:cover;background-position:center}
.abschluss{background-image:linear-gradient(90deg,rgba(19,28,46,.98) 0%,rgba(19,28,46,.93) 50%,rgba(19,28,46,.84) 100%),url("../img/11.jpg");background-size:cover;background-position:center}
.fuss{border-top:1px solid rgba(217,190,143,.22)}

.anruf-leiste{display:none}

/* Sanftes Einblenden, nur wenn JavaScript läuft */
.js .einblenden{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.js .einblenden.sichtbar{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
  .js .einblenden{opacity:1;transform:none}
}

/* Platz für den Nach-oben-Knopf neben den Footer-Links */
@media (min-width:761px) and (max-width:1420px){
  .fuss-zeile{padding-right:84px}
}

/* Tablet */
@media (max-width:1020px){
  .pol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .haupt-nav{gap:22px}
  .haupt-nav ul{gap:20px}
  .held>img{width:62%}
  .held .einleitung{max-width:21em}
}
@media (max-width:380px){
  h1{font-size:2.2rem}
  .innen .rechtstext h1{font-size:1.72rem}
  .rechtstext h2{font-size:1.45rem}
  .kopf .logo img{width:128px}
  .kopf .kopf-tel{font-size:.86rem}
  .kopf-tel span{font-size:.66rem;letter-spacing:0}
}

/* Handy: eigener Aufbau */
@media (max-width:760px){
  body{font-size:17px;padding-bottom:68px}
  .kopf .innen{min-height:66px}
  .logo img{width:172px}
  html{scroll-padding-top:84px}
  .menue-knopf{display:block}
  .haupt-nav{gap:8px}
  .kopf .innen{gap:10px}
  .kopf-tel{font-size:.95rem}
  .haupt-nav ul{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;gap:0;background:var(--nacht);padding:8px var(--rand) 18px}
  .haupt-nav ul.offen{display:flex}
  .haupt-nav li a{padding:13px 0;font-size:1.15rem}
  .menue-knopf[aria-expanded=true] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .menue-knopf[aria-expanded=true] span:nth-child(2){opacity:0}
  .menue-knopf[aria-expanded=true] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

  /* Porträt zuerst, dann Botschaft und Knopf auf dunklem Grund */
  .held{display:block;min-height:0}
  .held>img{position:static;width:100%;height:auto;aspect-ratio:1/1;object-position:62% 0}
  .held::after{display:none}
  .held .innen{padding-block:32px 40px}
  .held .knopf{width:100%}

  .pol{grid-template-columns:minmax(0,1fr)}
  .zweispaltig,.bild-text,.bild-text.umgekehrt,.kontakt-raster,.gebiet,.ueber-band,.abschluss .innen{grid-template-columns:minmax(0,1fr)}
  .abl{grid-template-columns:minmax(0,1fr)}
  .abl::before{display:none}
  .ueber-band img{min-height:0;aspect-ratio:3/2}
  .ueber-band>div{padding:36px var(--rand) 48px}
  .bild-text>img{order:-1}
  .abschluss-rechts{text-align:left}
  .abschluss .knopf{width:100%}

  /* Bewertungen seitlich wischen statt lange Spalte */
  .stimmen{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--rand)*-1);padding-inline:var(--rand);scrollbar-width:none}
  .stimmen::-webkit-scrollbar{display:none}
  .stimmen figure{flex:0 0 84%;scroll-snap-align:center;background:var(--weiss);padding:22px;border-top:2px solid var(--messing)}
  .stimmen blockquote{font-size:1.08rem}
  .wisch-hinweis{display:block}

  .kanzlei img{height:280px}
  .kanzlei-karte{position:static;width:auto;padding:28px var(--rand);border-top:0}
  .nach-kanzlei{padding-top:var(--abstand)}
  .galerie{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;margin-inline:calc(var(--rand)*-1);padding-inline:var(--rand);scrollbar-width:none}
  .galerie figure{flex:0 0 82%;scroll-snap-align:center}
  .galerie figure:first-child img{aspect-ratio:3/2}
  .fragen summary{font-size:1.18rem;padding:20px 0}
  .rechtstext h1{font-size:2.05rem}
  .knopf-breit-mobil{width:100%}
  .fuss-zeile{flex-direction:column;align-items:flex-start;padding-block:16px}
  .nach-oben{right:12px;bottom:82px;width:44px;height:44px}

  /* Anruf bleibt immer einen Daumen weit entfernt */
  .anruf-leiste{position:fixed;left:0;right:0;bottom:0;z-index:60;display:block;padding:9px 12px calc(9px + env(safe-area-inset-bottom));background:var(--nacht)}
  .anruf-leiste .knopf{min-height:50px;width:100%}
}