/* =====================================================================
   Patentanwalt Dipl.-Ing. Johannes Grawe – Website im Entwurf D3 „Tag & Nacht“
   Dunkler Hero bzw. Seitenkopf, helle Inhaltsflächen, dunkler Fuß. Alle 10 Seiten.
   Geist / Geist Mono.
   ===================================================================== */

@font-face{font-family:'Geist';src:url('../fonts/geist.woff') format('woff');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/montserrat.woff') format('woff');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('../fonts/geist-mono.woff') format('woff');font-weight:100 900;font-style:normal;font-display:swap}

:root{
  /* Nacht – Marineblau aus dem Logo (#142E49) */
  /*PALETTE*/--night:#142E49;--night-rgb:20,46,73;--glow-rgb:46,86,130;--ink:#0E2238;/*/PALETTE*/
  --on-night:#EEF2F8;
  --on-night-2:#C5CEDB;
  --on-night-3:#9BA7BA;
  --ice:#8FD0FF;
  --hair-n:rgba(238,242,248,.1);
  --hair-n2:rgba(238,242,248,.2);
  /* Tag */
  --bg:#F5F6F8;
  --white:#FFFFFF;
  --ink-2:#4A5566;
  --navy:#1F3A5F;
  --blue:#2F6FB0;
  --hair:#DCE1E8;
  --hair-2:#C9D0DA;

  --gut:clamp(20px,5vw,72px);
  --maxw:1320px;
  --gap:24px;
  --hh:80px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --sans:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
}
@media (max-width:859px){:root{--hh:64px;--gap:16px}}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;font-weight:380;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg{display:block}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
p,h1,h2,h3,ul,figure,address{margin:0}
ul{padding:0;list-style:none}
address{font-style:normal}
button{font:inherit;color:inherit}
::selection{background:var(--navy);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:3px}
.hero :focus-visible,.site-footer :focus-visible,.site-header:not(.is-day) :focus-visible{outline-color:var(--ice)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.i{width:1em;height:1em;flex:none}
.wrap{width:100%;max-width:calc(var(--maxw) + 2*var(--gut));margin-inline:auto;padding-inline:var(--gut)}

.h2{font-weight:280;font-size:clamp(2.2rem,1.3rem + 2.8vw,4rem);line-height:1.02;letter-spacing:-.04em;color:var(--ink);text-wrap:balance}
.lead{font-weight:340;font-size:clamp(1.08rem,.95rem + .45vw,1.35rem);line-height:1.5;letter-spacing:-.01em;color:var(--ink-2);text-wrap:pretty}
.idx{display:flex;align-items:center;gap:14px;margin-bottom:22px;font-family:var(--mono);font-size:12px;font-weight:450;letter-spacing:.16em;color:var(--blue)}
.idx::after{content:'';width:44px;height:1px;background:var(--blue);opacity:.55}
.actions{margin-top:30px}
@media (max-width:599px){.lead,.hero-lead{-webkit-hyphens:auto;hyphens:auto}}

/* ---------- Einblendungen: nur Deckkraft + 10 px, 500 ms, einmalig ---------- */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]{opacity:0;transform:translate3d(0,10px,0);transition:opacity .5s var(--ease) var(--d,0s),transform .5s var(--ease) var(--d,0s)}
  .js [data-reveal].is-in{opacity:1;transform:none}
}

/* ---------- Kopf ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--hh);color:var(--on-night);transition:color .35s var(--ease)}
.site-header::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--hair);opacity:0;transition:opacity .35s var(--ease)}
.site-header.is-day{color:var(--ink)}
.site-header.is-day::before{opacity:1}
.hdr{position:relative;height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;flex-direction:column;justify-content:center;min-height:44px;line-height:1.25}
.brand-k{font-family:var(--mono);font-size:10.5px;font-weight:450;letter-spacing:.22em;text-transform:uppercase;color:var(--on-night-3);transition:color .35s var(--ease)}
.brand-n{margin-top:3px;font-size:16px;font-weight:470;letter-spacing:-.012em}
.is-day .brand-k{color:var(--ink-2)}
.nav ul{display:flex;align-items:center;gap:2px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;font-size:14.5px;font-weight:440;transition:background-color .3s var(--ease),border-color .3s var(--ease)}
.nav a:hover{background:rgba(143,208,255,.08)}
.is-day .nav a:hover{background:rgba(31,58,95,.06)}
.nav .nav-cta{margin-left:10px;padding:0 22px;border:1px solid var(--hair-n2)}
.is-day .nav .nav-cta{border-color:var(--hair-2)}

/* Sprachumschaltung: Flaggen oben rechts (Beschriftung nur für Vorleseprogramme) */
.hdr{justify-content:flex-start}
.nav{margin-left:auto}
.lang--hdr{margin-left:12px}
.lang ul{display:flex;align-items:center;gap:2px}
.lang-a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;opacity:.45;transition:opacity .3s var(--ease),background-color .3s var(--ease)}
.lang-a:hover,.lang-a:focus-visible{opacity:1;background:rgba(143,208,255,.1)}
.is-day .lang-a:hover,.is-day .lang-a:focus-visible{background:rgba(31,58,95,.07)}
.lang-a[aria-current="true"]{opacity:1}
.lang .flag{width:20px;height:14px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.lang-t{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.menu-btn{display:none}
.menu{display:none}
@media (max-width:859px){
  .nav{display:none}
  .lang--hdr{margin-left:auto}
  .menu-btn{position:relative;display:inline-flex;width:48px;height:48px;margin-right:-10px;margin-left:4px;padding:0;background:transparent;border:0;cursor:pointer;color:inherit}
  .menu-btn span{position:absolute;left:14px;right:14px;top:50%;height:1.5px;background:currentColor;transition:transform .3s var(--ease)}
  .menu-btn span:first-child{transform:translate3d(0,-4px,0)}
  .menu-btn span:last-child{transform:translate3d(0,4px,0)}
  .menu-open .menu-btn span:first-child{transform:rotate(45deg)}
  .menu-open .menu-btn span:last-child{transform:rotate(-45deg)}
  .menu{display:block;position:absolute;top:var(--hh);left:0;right:0;background:var(--white);color:var(--ink);border-bottom:1px solid var(--hair);visibility:hidden;opacity:0;transition:opacity .3s var(--ease),visibility 0s linear .3s}
  .menu-open .menu{visibility:visible;opacity:1;transition:opacity .3s var(--ease),visibility 0s}
  .menu-open .site-header{color:var(--ink)}
  .menu-open .site-header::before{opacity:1}
  .menu-open .brand-k{color:var(--ink-2)}
  .menu-links{padding-bottom:12px}
  .menu-links li{border-top:1px solid var(--hair)}
  .menu-links a{display:flex;align-items:center;min-height:56px;font-size:1.5rem;font-weight:320;letter-spacing:-.03em}
}

/* ---------- Hero (Nacht) ---------- */
.hero{position:relative;min-height:clamp(520px,66vh,700px);display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--hh) + 40px) 0 clamp(104px,13vh,150px);background:var(--night);color:var(--on-night);overflow:hidden}
.stage{position:absolute;inset:0;pointer-events:none;background:radial-gradient(50% 58% at var(--gx,64%) var(--gy,38%),rgba(var(--glow-rgb),.5) 0%,rgba(var(--glow-rgb),.22) 46%,rgba(var(--night-rgb),0) 74%)}
.stage canvas{position:absolute;inset:0;width:100%;height:100%}
.stage::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--night-rgb),.7) 0,rgba(var(--night-rgb),0) calc(var(--hh) + 60px)),linear-gradient(0deg,var(--night) 0,rgba(var(--night-rgb),.55) 14%,rgba(var(--night-rgb),0) 40%)}
.hero-in{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end}
.hero-h1{grid-column:1/span 8;font-weight:240;font-size:clamp(3rem,.6rem + 7vw,7.4rem);line-height:.95;letter-spacing:-.05em}
.hero-h1 .ln{display:block}
.hero-side{grid-column:9/span 4;padding-bottom:.3rem}
.hero-lead{max-width:30ch;font-size:clamp(1.05rem,.92rem + .4vw,1.25rem);font-weight:340;line-height:1.5;color:var(--on-night-2)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
@media (max-width:1023px){
  .hero-in{grid-template-columns:minmax(0,1fr)}
  .hero-h1,.hero-side{grid-column:1/-1}
  .hero-h1{font-size:clamp(2.8rem,12.5vw,6rem)}
  .hero-side{margin-top:24px}
}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:50px;padding:0 22px 0 24px;border:1px solid transparent;border-radius:999px;font-size:15px;font-weight:480;line-height:1;cursor:pointer;transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.btn .i{transition:transform .3s var(--ease)}
.btn:hover .i{transform:translate3d(3px,0,0)}
.btn-light{background:var(--on-night);color:var(--night)}
.btn-light:hover{background:#fff}
.btn-ghost{border-color:var(--hair-n2);color:var(--on-night)}
.btn-ghost:hover{border-color:rgba(143,208,255,.7)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--navy)}
.btn-line{border-color:var(--hair-2);color:var(--ink);background:var(--white)}
.btn-line:hover{border-color:var(--navy)}

/* ---------- Sektionen (Tag) ---------- */
.sec{position:relative;padding:clamp(80px,10vw,144px) 0}
/* Übergang Nacht → Tag: klare Kante, das Porträt ragt als Brücke in den Hero */
.person{--lift:clamp(56px,7vw,104px);background:var(--bg);padding-top:0}
.pt-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center}
.pt-fig{grid-column:1/span 5;position:relative;align-self:start;margin-top:calc(-1 * var(--lift));background:var(--white);border:1px solid var(--hair);box-shadow:0 24px 48px -28px rgba(var(--night-rgb),.45)}
.pt-fig img{width:100%;aspect-ratio:900/1071;object-fit:cover}
.pt-copy{grid-column:7/span 5}
.pt-copy .lead{margin-top:26px;max-width:34ch}
@media (max-width:859px){
  .pt-grid{grid-template-columns:minmax(0,1fr);row-gap:40px}
  .pt-fig,.pt-copy{grid-column:1/-1}
  .pt-fig{max-width:420px}
}

.services{background:var(--white);border-top:1px solid var(--hair)}
.sv-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start;margin-bottom:clamp(44px,5vw,72px)}
.sv-head>div:first-child{grid-column:1/span 6}
.sv-intro{grid-column:7/span 6;padding-top:36px}
.sv-intro .lead{max-width:38ch}
@media (max-width:859px){.sv-intro{padding-top:0}.sv-head{grid-template-columns:minmax(0,1fr);row-gap:22px}.sv-head>div:first-child,.sv-intro{grid-column:1/-1}}

/* Rechtsgebiete: helle Spalten mit Haarlinien */
.areas{--cg:clamp(28px,3vw,48px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--cg);border-top:1px solid var(--navy);border-bottom:1px solid var(--hair)}
.area{position:relative;display:flex;flex-direction:column;min-width:0;padding:0 0 30px}
.area+.area::before{content:'';position:absolute;top:0;bottom:0;left:calc(var(--cg) / -2);width:1px;background:var(--hair)}
.art{position:relative;margin:clamp(22px,2vw,30px) 0 0;aspect-ratio:320/220;background:var(--bg);border:1px solid var(--hair)}
.art::before,.art::after{content:'';position:absolute;width:9px;height:9px;border:0 solid var(--navy);opacity:.55}
.art::before{left:-1px;top:-1px;border-left-width:1px;border-top-width:1px}
.art::after{right:-1px;bottom:-1px;border-right-width:1px;border-bottom-width:1px}
.motif{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.motif path,.motif rect,.motif circle{transition:stroke .35s var(--ease),opacity .35s var(--ease)}
.motif .ln{stroke:var(--navy);opacity:.62}
.motif .ln--f{opacity:.26}
.motif .ac{stroke:var(--blue)}
.motif .ac--h{opacity:.7}
.motif .cl{stroke:var(--navy);opacity:.45;stroke-dasharray:10 3 1.5 3}
.motif .kn{fill:var(--white);stroke:var(--blue)}
.motif .hd{fill:var(--blue);stroke:none}
/* Hover: nur dezente Aufhellung der Linien */
.area:hover .motif .ln,.area:focus-within .motif .ln{stroke:#3F6E9E}
.area:hover .motif .ac,.area:focus-within .motif .ac,.area:hover .motif .kn,.area:focus-within .motif .kn{stroke:#4A86C4}
.area:hover .motif .hd,.area:focus-within .motif .hd{fill:#4A86C4}

/* Motiv-Schnittstelle (SPEZ.md): Linienfarbe über color, Akzent über .akzent, Größe wie .motif */
.art{color:var(--navy);transition:color .35s var(--ease)}
.art .motiv-svg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.motiv-svg .akzent{color:var(--blue);stroke:var(--blue);transition:color .35s var(--ease),stroke .35s var(--ease)}
.motiv-svg .akzent [fill]:not([fill="none"]){fill:var(--blue);transition:fill .35s var(--ease)}
.area:hover .art,.area:focus-within .art{color:#3F6E9E}
.area:hover .motiv-svg .akzent,.area:focus-within .motiv-svg .akzent{color:#4A86C4;stroke:#4A86C4}
.area:hover .motiv-svg .akzent [fill]:not([fill="none"]),.area:focus-within .motiv-svg .akzent [fill]:not([fill="none"]){fill:#4A86C4}

@media (prefers-reduced-motion:no-preference){
  .js [data-draw] .motif .kn,.js [data-draw] .motif .hd,.js [data-draw] .motif .cl{opacity:0;transition:opacity .4s var(--ease) .75s,stroke .35s var(--ease),fill .35s var(--ease)}
  .js [data-draw].is-drawn .motif .kn,.js [data-draw].is-drawn .motif .hd{opacity:1}
  .js [data-draw].is-drawn .motif .cl{opacity:.45}
}

.area-body{display:flex;flex-direction:column;flex:1;padding-top:26px}
.area-num{display:flex;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--blue)}
.area-num span{color:var(--ink-2);opacity:.7}
.area-title{margin-top:14px;font-weight:320;font-size:clamp(1.6rem,1.2rem + .9vw,2.1rem);line-height:1.08;letter-spacing:-.035em;color:var(--ink)}
.area-title--long{-webkit-hyphens:manual;hyphens:manual}
.svc-list{margin-top:20px;border-top:1px solid var(--hair)}
.svc-list li{border-bottom:1px solid var(--hair)}
.svc-list a{display:flex;align-items:center;min-height:40px;padding:6px 0;font-size:15px;line-height:1.35;color:var(--ink-2);overflow-wrap:anywhere;transition:color .25s var(--ease)}
.svc-list a:hover{color:var(--navy)}
.more{display:inline-flex;align-self:flex-start;align-items:center;gap:10px;margin-top:auto;padding-top:26px;min-height:44px;font-size:14.5px;font-weight:500;color:var(--blue)}
.more span{border-bottom:1px solid rgba(47,111,176,.35);padding-bottom:2px;transition:border-color .25s var(--ease)}
.more:hover span{border-color:var(--blue)}
.more .i{transition:transform .3s var(--ease)}
.more:hover .i{transform:translate3d(3px,0,0)}

@media (max-width:1099px){
  .areas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .area:nth-child(3)::before{display:none}
  .area:nth-child(n+3){border-top:1px solid var(--hair)}
}
@media (max-width:599px){
  .areas{grid-template-columns:minmax(0,1fr)}
  .area+.area::before{display:none}
  .area+.area{border-top:1px solid var(--hair)}
}

/* ---------- Behörden ---------- */
.authorities{background:var(--bg);padding:clamp(56px,6vw,88px) 0;border-top:1px solid var(--hair)}
.logos-row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:var(--gap);align-items:center}
.plate-label{font-family:var(--mono);font-size:11px;font-weight:450;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px 40px}
.logos img{height:var(--h);width:auto;mix-blend-mode:multiply}
@media (max-width:859px){
  .logos-row{grid-template-columns:minmax(0,1fr);row-gap:28px}
  .logos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px;justify-items:start}
}

/* ---------- Fuß (Nacht) ---------- */
.site-footer{position:relative;overflow:hidden;padding:clamp(96px,11vw,160px) 0 28px;background:var(--night);color:var(--on-night)}
.ft-flow{position:absolute;left:0;top:0;width:100%;height:clamp(120px,12.5vw,180px);fill:none;stroke:rgba(197,206,219,.16);stroke-width:1;pointer-events:none}
.ft-flow path{vector-effect:non-scaling-stroke}
.ft-flow .f{stroke:rgba(143,208,255,.45)}
.ft-flow .foil{fill:rgba(var(--night-rgb),.55);stroke:rgba(143,208,255,.5)}
@media (max-width:719px){.ft-flow .foil{display:none}}
.ft-in{position:relative}
.ft-mail{display:inline-flex;align-items:flex-end;gap:.28em;max-width:100%;font-size:clamp(1.3rem,.35rem + 3.8vw,4rem);font-weight:240;line-height:1.1;letter-spacing:-.045em}
.ft-mail-t{position:relative;min-width:0;overflow-wrap:anywhere;border-bottom:1px solid var(--hair-n2);transition:border-color .3s var(--ease)}
.ft-mail:hover .ft-mail-t{border-color:var(--ice)}
.ft-mail .at{color:var(--ice)}
.ft-mail .i{width:.6em;height:.6em;margin-bottom:.16em;color:var(--ice);transform:rotate(-45deg)}
.ft-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin-top:clamp(52px,6vw,96px);padding-top:26px;border-top:1px solid var(--hair-n)}
.ft-col{display:flex;flex-direction:column;min-width:0}
.ft-addr{grid-column:1/span 4;padding-top:10px;font-size:15px;line-height:1.75;color:var(--on-night-2)}
.ft-grid>.ft-col:nth-child(2){grid-column:5/span 4}
.ft-nav{grid-column:10/span 3}
.ft-link{display:inline-flex;align-items:center;min-height:44px;font-size:15px;color:var(--on-night-2);overflow-wrap:anywhere;transition:color .25s var(--ease)}
.ft-link:hover{color:#fff}
.ft-base{margin-top:40px;padding-top:22px;border-top:1px solid var(--hair-n);font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--on-night-3)}
@media (max-width:859px){
  .ft-grid{grid-template-columns:minmax(0,1fr);row-gap:8px}
  .ft-addr,.ft-grid>.ft-col:nth-child(2),.ft-nav{grid-column:1/-1}
}


/* =====================================================================
   Gesamtwebsite: Seiten, Seitenköpfe, Unterseiten
   ===================================================================== */
.nw{white-space:nowrap}
.skip{position:absolute;left:12px;top:-80px;z-index:100;padding:12px 16px;border-radius:6px;background:var(--ink);color:#fff;font-size:14px}
.skip:focus{top:12px}
main:focus,h1:focus{outline:none}
.page[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){.page.page-enter{animation:pgIn .45s var(--ease)}}
@keyframes pgIn{from{opacity:0}to{opacity:1}}
.nav a[aria-current="page"]:not(.nav-cta),.nav a.is-parent{background:rgba(143,208,255,.1)}
.is-day .nav a[aria-current="page"]:not(.nav-cta),.is-day .nav a.is-parent{background:rgba(31,58,95,.07)}
.nav .nav-cta[aria-current="page"]{border-color:var(--ice)}
.is-day .nav .nav-cta[aria-current="page"]{border-color:var(--navy)}
.menu-links a[aria-current="page"]{color:var(--blue)}

/* Zeichnen der Motive erst beim Erscheinen (auch auf Unterseiten) */
@media (prefers-reduced-motion:no-preference){.js .draw-wait .motif,.js .draw-wait .motiv-svg{opacity:0}}

/* ---------- Seitenkopf (Nacht) ---------- */
.phead{position:relative;overflow:hidden;background:var(--night);color:var(--on-night);padding:calc(var(--hh) + clamp(56px,7vw,112px)) 0 clamp(72px,8vw,120px)}
.phead::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(46% 70% at 78% 30%,rgba(var(--glow-rgb),.55) 0%,rgba(var(--glow-rgb),.2) 50%,rgba(var(--night-rgb),0) 76%)}
.ph-flow{position:absolute;left:0;right:0;bottom:-2px;width:100%;height:clamp(110px,13vw,190px);fill:none;stroke:rgba(197,206,219,.14);stroke-width:1;pointer-events:none;transform:scaleY(-1)}
.ph-in{position:relative}
.ph-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:24px;font-family:var(--mono);font-size:12px;font-weight:450;letter-spacing:.18em;text-transform:uppercase;color:var(--ice)}
.ph-eyebrow::after{content:'';width:44px;height:1px;background:var(--ice);opacity:.5}
.ph-h1{max-width:16ch;font-weight:240;font-size:clamp(2.9rem,1rem + 6.2vw,6.8rem);line-height:.98;letter-spacing:-.05em;text-wrap:balance}
.ph-h1--long{max-width:none;font-size:clamp(2.2rem,.5rem + 5.4vw,6.2rem);-webkit-hyphens:manual;hyphens:manual}
.ph-lead{max-width:56ch;margin-top:26px;font-size:clamp(1.02rem,.92rem + .35vw,1.2rem);font-weight:340;line-height:1.55;color:var(--on-night-2);text-wrap:pretty}
.crumb{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-bottom:16px;font-family:var(--mono);font-size:12px;font-weight:450;letter-spacing:.16em;text-transform:uppercase;color:var(--ice)}
.crumb .i{transition:transform .3s var(--ease)}
.crumb:hover .i{transform:translate3d(-3px,0,0)}
.crumb span{border-bottom:1px solid rgba(143,208,255,.35);padding-bottom:2px}

/* ---------- Zur Person ---------- */
.bio{padding-top:clamp(64px,8vw,112px)}
.bio-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.bio-head{grid-column:1/span 5}
.bio-sub{margin-top:16px;font-family:var(--mono);font-size:12px;font-weight:450;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.bio-text{grid-column:7/span 6;display:grid;gap:18px;max-width:60ch;color:var(--ink-2)}
.bio-text .lead{color:var(--ink)}
.quals{background:var(--white);border-top:1px solid var(--hair)}
.quals-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(28px,3vw,48px);margin-top:clamp(36px,4vw,56px);border-top:1px solid var(--navy)}
.qcol{min-width:0;padding-top:24px}
.qh{margin-bottom:12px;font-family:var(--mono);font-size:12px;font-weight:450;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.qlist li,.qtext{padding:11px 0;border-bottom:1px solid var(--hair);font-size:15.5px;line-height:1.45;color:var(--ink)}
.qlinks li{color:var(--ink-2)}
.qlinks a{color:var(--ink);border-bottom:1px solid rgba(31,58,95,.22);transition:color .25s var(--ease),border-color .25s var(--ease)}
.qlinks a:hover{color:var(--blue);border-color:var(--blue)}
.i-ext{display:inline-block;width:.9em;height:.9em;margin-left:3px;vertical-align:-.08em;color:var(--blue)}
.coop{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center;margin-top:clamp(56px,6vw,88px);padding:clamp(26px,3vw,44px);background:var(--bg);border:1px solid var(--hair)}
.coop-copy{grid-column:1/span 5}
.coop-h{font-weight:340;font-size:clamp(1.3rem,1.05rem + .7vw,1.7rem);line-height:1.2;letter-spacing:-.02em}
.coop-t{margin-top:12px;font-size:15.5px;color:var(--ink-2)}
.badges{grid-column:7/span 6;display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
.badges img{width:auto;height:var(--h)}
@media (max-width:1023px){.coop{grid-template-columns:minmax(0,1fr);row-gap:26px}.coop-copy,.badges{grid-column:1/-1}}
@media (max-width:859px){
  .bio-grid{grid-template-columns:minmax(0,1fr);row-gap:28px}
  .bio-head,.bio-text{grid-column:1/-1}
  .quals-grid{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Leistungen ---------- */
.services--page{border-top:0;padding-top:clamp(56px,6vw,88px)}
.fields-sec{background:var(--bg);border-top:1px solid var(--hair)}
.fields-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.fields-grid>div{grid-column:1/span 5}
.fields-grid .lead{margin-top:24px;max-width:34ch}
.fields{grid-column:7/span 6;align-self:start;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);margin-top:10px;border-top:1px solid var(--navy)}
.fields li{display:flex;align-items:baseline;gap:14px;min-width:0;padding:15px 0;border-bottom:1px solid var(--hair);font-size:16px;line-height:1.35;color:var(--ink)}
.fields .n{flex:none;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--blue)}
@media (max-width:859px){.fields-grid{grid-template-columns:minmax(0,1fr);row-gap:28px}.fields-grid>div,.fields{grid-column:1/-1}}
@media (max-width:479px){.fields{grid-template-columns:minmax(0,1fr)}}

/* ---------- Rechtsgebiet (Detail) ---------- */
.detail{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding-top:clamp(56px,6vw,96px);padding-bottom:clamp(72px,8vw,128px)}
.d-side{grid-column:1/span 4;position:sticky;top:calc(var(--hh) + 28px);align-self:start}
.d-side .art{margin-top:0}
.toc{margin-top:28px;border-top:1px solid var(--navy)}
.toc ol{margin:0;padding:0;list-style:none}
.toc a{display:flex;align-items:baseline;gap:14px;min-height:44px;padding:11px 0;border-bottom:1px solid var(--hair);font-size:15px;line-height:1.35;color:var(--ink-2);transition:color .25s var(--ease)}
.toc .n{flex:none;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;opacity:.7}
.toc a:hover,.toc a.is-active{color:var(--ink)}
.toc a.is-active .n{color:var(--blue);opacity:1}
.dbody{grid-column:6/span 7;min-width:0}
.dsec{padding-bottom:clamp(36px,4vw,56px);margin-bottom:clamp(36px,4vw,56px);border-bottom:1px solid var(--hair)}
.dsec:last-child{margin-bottom:0;border-bottom:0}
.dsec .n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--blue)}
.dh{margin-top:12px;font-weight:300;font-size:clamp(1.7rem,1.2rem + 1.3vw,2.5rem);line-height:1.08;letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.dsec>p:last-child{max-width:62ch;margin-top:18px;font-size:clamp(1.02rem,.95rem + .25vw,1.15rem);line-height:1.65;color:var(--ink-2);text-wrap:pretty}
.dsec--note{padding:clamp(22px,2.6vw,34px);background:var(--white);border:1px solid var(--hair);border-left:2px solid var(--blue)}
.dsec--note .dh{font-size:clamp(1.3rem,1.1rem + .6vw,1.7rem)}
.dsec--note+.dsec{padding-top:0}
.areas-nav{padding:clamp(40px,5vw,64px) 0 clamp(48px,6vw,80px);background:var(--white);border-top:1px solid var(--hair)}
.areas-nav ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap);margin-top:18px;border-top:1px solid var(--navy)}
.areas-nav a{position:relative;display:flex;flex-direction:column;gap:8px;min-height:44px;padding:18px 0 4px;font-size:clamp(1.05rem,.9rem + .5vw,1.4rem);font-weight:320;line-height:1.15;letter-spacing:-.02em;color:var(--ink-2);-webkit-hyphens:manual;hyphens:manual;transition:color .25s var(--ease)}
.areas-nav .n{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;color:var(--blue)}
.areas-nav a:hover{color:var(--ink)}
.areas-nav a[aria-current="page"]{color:var(--ink)}
.areas-nav a[aria-current="page"]::before{content:'';position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--blue)}
@media (max-width:1023px){
  .d-side{position:static;grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--gap);margin-bottom:clamp(40px,6vw,64px)}
  .d-side .toc{margin-top:0;align-self:start}
  .dbody{grid-column:1/-1}
}
@media (max-width:859px){.areas-nav ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.d-side{grid-template-columns:minmax(0,1fr)}.d-side .art{display:none}}

/* ---------- Kontakt ---------- */
.contact{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding-top:clamp(56px,6vw,96px);padding-bottom:clamp(72px,9vw,128px)}
.contact-main{grid-column:1/span 7;min-width:0}
.contact-aside{grid-column:9/span 4;min-width:0}
.h3{font-weight:300;font-size:clamp(1.8rem,1.3rem + 1.4vw,2.7rem);line-height:1.05;letter-spacing:-.035em;color:var(--ink)}
.contact-main .lead{max-width:46ch;margin-top:18px}
.notice{display:flex;align-items:flex-start;gap:12px;margin-top:26px;padding:16px 18px;background:var(--white);border:1px solid var(--hair);border-left:2px solid var(--blue);font-size:15px;line-height:1.5;color:var(--ink-2)}
.notice .i{width:20px;height:20px;margin-top:1px;color:var(--blue)}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px var(--gap);margin-top:34px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field--full{grid-column:1/-1}
.field label{font-size:14px;font-weight:480;color:var(--ink)}
.req{margin-left:2px;color:var(--blue)}
.field input,.field textarea{width:100%;min-height:50px;padding:12px 14px;font:inherit;font-size:16px;color:var(--ink);background:var(--white);border:1px solid var(--hair-2);border-radius:6px;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,111,176,.18)}
.privacy{font-size:14px;line-height:1.5;color:var(--ink-2)}
.privacy a{color:var(--blue);border-bottom:1px solid rgba(47,111,176,.35)}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px}
.form-ok{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--navy)}
.form-ok[hidden]{display:none}
.form-ok .i{width:20px;height:20px;color:var(--blue)}
.addr{display:flex;flex-direction:column;margin-top:18px;font-size:16px;line-height:1.75;color:var(--ink-2)}
.addr span:first-child{margin-bottom:4px;font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase}
.contact-links{margin-top:26px;border-top:1px solid var(--hair)}
.contact-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;border-bottom:1px solid var(--hair);font-size:15.5px;color:var(--ink);overflow-wrap:anywhere;transition:color .25s var(--ease)}
.contact-links a span{min-width:0}
.contact-links a:hover{color:var(--blue)}
@media (max-width:1023px){.contact-main,.contact-aside{grid-column:1/-1}.contact-aside{margin-top:56px}}
@media (max-width:599px){.form{grid-template-columns:minmax(0,1fr)}}

/* ---------- Impressum & Datenschutz ---------- */
.legal{padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(72px,9vw,128px)}
.imp{border-top:1px solid var(--navy)}
.lg{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--gap);padding:22px 0;border-bottom:1px solid var(--hair)}
.lg-k{font-size:14.5px;font-weight:500;line-height:1.5;color:var(--ink)}
.lg-v{display:grid;gap:10px;max-width:64ch;font-size:15.5px;line-height:1.6;color:var(--ink-2);overflow-wrap:anywhere}
.lg-v a{color:var(--blue);border-bottom:1px solid rgba(47,111,176,.3)}
.lines{display:flex;flex-direction:column}
@media (max-width:767px){.lg{grid-template-columns:minmax(0,1fr);row-gap:6px}}
.draft-note{max-width:72ch;margin-bottom:40px;padding:16px 18px;background:#FFF6E5;border:1px solid #EFD9AE;border-left:2px solid #B7791F;font-size:15px;line-height:1.55;color:#57400F}
.prose{max-width:72ch}
.ds>p{margin-top:14px;font-size:16px;line-height:1.7;color:var(--ink-2);overflow-wrap:anywhere}
.ds>.ds-title{margin-top:0;font-size:clamp(1.5rem,1.2rem + 1vw,2rem);font-weight:320;line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.ds-h{margin-top:48px;padding-top:22px;border-top:1px solid var(--hair);font-weight:420;font-size:1.3rem;line-height:1.3;letter-spacing:-.015em;color:var(--ink)}
.ds-h3{margin-top:24px;font-size:1rem;font-weight:560;color:var(--ink)}
.ds-list{display:grid;gap:6px;margin-top:12px}
.ds-list li{position:relative;padding-left:22px;font-size:16px;line-height:1.6;color:var(--ink-2)}
.ds-list li::before{content:'';position:absolute;left:0;top:.8em;width:10px;height:1px;background:var(--blue)}

.req-note{margin-top:-4px;font-size:13px;color:var(--ink-2)}
.logos li{min-width:0;max-width:100%}
.logo-cap{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.logo-cap span{max-width:100%;font-family:var(--mono);font-size:10.5px;line-height:1.4;letter-spacing:.06em;color:var(--ink-2);overflow-wrap:anywhere}
.coop-sec{background:var(--white);padding-top:0}
.coop-sec .coop{margin-top:0}
.coop .idx{margin-bottom:16px}

.coop{align-items:start}
.coop-copy{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.coop-copy .idx{grid-column:1/-1}
.coop-h{grid-column:1/span 5}
.coop-t{grid-column:7/span 6;margin-top:0;font-size:16px;line-height:1.6}
@media (max-width:859px){.coop-h,.coop-t{grid-column:1/-1}.coop-t{margin-top:14px}}

/* ---------- Logo JG (aus dem Briefpapier) ---------- */
.brand{flex-direction:row;align-items:center;gap:13px}
.brand-t{display:flex;flex-direction:column;justify-content:center;line-height:1.2}
.brand .brand-k{font-family:'Montserrat',var(--sans);font-size:15px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:inherit}
.brand .brand-n{margin-top:3px;font-family:'Montserrat',var(--sans);font-size:13.5px;font-weight:400;letter-spacing:.045em}
.ft-base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px}
.ft-brand{display:flex;align-items:center;gap:13px;color:var(--on-night);font-family:inherit;letter-spacing:0}
.ft-brand .brand-k{font-family:'Montserrat',var(--sans);font-size:14px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:inherit}
.ft-brand .brand-n{margin-top:3px;font-family:'Montserrat',var(--sans);font-size:13px;letter-spacing:.045em;text-transform:none}
@media (max-width:420px){.brand .brand-k{font-size:13px}.brand .brand-n{font-size:12px;letter-spacing:.02em}}

/* ---------- Anfahrt: Google Maps erst nach Klick ---------- */
.map-sec{padding:0 0 clamp(72px,9vw,128px)}
.map-sec .h3{margin-bottom:22px}
.map{position:relative;overflow:hidden;min-height:clamp(320px,34vw,440px);background:var(--white);border:1px solid var(--hair)}
.map-deco{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--navy);stroke-width:1.2;opacity:.5}
.map-deco path{vector-effect:non-scaling-stroke}
.map-deco .t{opacity:.35}
.map-deco .ring{stroke:var(--blue);opacity:.8}
.map-deco .dot{fill:var(--blue);stroke:none}
.map-ph{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:520px;margin:clamp(24px,4vw,48px);padding:clamp(20px,2.4vw,30px);background:rgba(255,255,255,.94);border:1px solid var(--hair);box-shadow:0 18px 40px -26px rgba(var(--night-rgb),.4)}
.map-addr{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.map-note{font-size:15px;line-height:1.55;color:var(--ink-2)}
.map-note a{color:var(--blue);border-bottom:1px solid rgba(47,111,176,.35)}
.map-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.map-ext{display:inline-flex;align-items:center;min-height:44px;font-size:14.5px;font-weight:500;color:var(--blue)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* ---------- Einzelseiten (IONOS) ---------- */
html{scroll-padding-top:calc(var(--hh) + 24px)}
.form-err{display:flex;align-items:center;gap:10px;font-size:15px;color:#8A2A12}
.form-err[hidden]{display:none}
.btn[disabled]{opacity:.6;cursor:progress}
.ft-ver{margin-left:1.6em;opacity:.55;white-space:nowrap;cursor:default}