/* Figtree (variable, lokal eingebunden) */
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/figtree-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/figtree-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{--font-head:'Figtree',system-ui,sans-serif;--font-body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;--maxw:1180px;--r:18px;--r-btn:999px;--r-img:16px;--bg:#eef1f1;--bg2:#e1e7e7;--fg:#17252b;--muted:#3a4850;--line:#c6d0d3;--card:#ffffff;--accent:#c8161d;--accent-text:#b3141b;--accent-fg:#ffffff;--plate:transparent;color-scheme:light}

/* Basis */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:1.125rem;font-weight:500;line-height:1.6}
img{display:block;max-width:100%}
p{margin:0}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--font-head);text-wrap:balance}
:focus-visible{outline:3px solid var(--accent-text);outline-offset:3px}
.wrap{width:100%;max-width:var(--maxw,1100px);margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.skip{position:absolute;left:-999px;top:0;background:var(--fg);color:var(--bg);padding:.6rem 1rem;z-index:50}
.skip:focus{left:8px;top:8px}
section[id]{scroll-margin-top:16px}

/* Bild-Platzhalter (Klassen ok/x setzt das Skript) */
.ph{position:relative;background:var(--bg2);overflow:hidden;border-radius:var(--r-img,0)}
.ph::before{content:attr(data-label);position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:.5rem;font-size:.72rem;line-height:1.3;color:var(--muted);background:repeating-linear-gradient(135deg,transparent 0 10px,color-mix(in srgb,var(--line) 55%,transparent) 10px 11px)}
.ph.ok::before{display:none}
.ph img{position:relative;width:100%;height:100%;object-fit:cover}
.ph img.x{visibility:hidden}

/* Logo (Klasse nologo setzt das Skript) */
.brand{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.4rem 1rem;text-decoration:none;min-width:0}
.brand img{height:46px;width:auto;background:var(--plate,transparent);padding:3px 6px;border-radius:3px}
.brand img.x{display:none}
.wordmark{display:none;line-height:1;font-family:'Arial Black','Helvetica Neue',Arial,sans-serif}
.wordmark small{display:block;font:400 .7rem/1.3 var(--font-body)}
.wordmark b{display:block;font-size:2rem;letter-spacing:-.02em}
.brand.nologo .wordmark{display:block}

/* Buttons, Chips, Links */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:.6rem 1.4rem;background:var(--accent);color:var(--accent-fg,#fff);border:2px solid var(--accent);border-radius:var(--r-btn,3px);font-size:1.0625rem;font-weight:700;text-decoration:none;font-variant-numeric:tabular-nums;white-space:nowrap}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--fg)}
.btn.ghost:hover{background:var(--fg);color:var(--bg);filter:none}
.cta{display:flex;gap:.75rem;flex-wrap:wrap}
.chips{list-style:none;margin:1.1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.chips li{padding:.5rem 1.15rem;border:1px solid var(--fg);border-radius:var(--r-btn,3px);font-weight:600;font-size:1.125rem}
.textlink{font-weight:600;color:var(--accent-text);text-underline-offset:3px}
/* Handy: Buttons volle Breite untereinander, Chips als 2er-Raster */
@media (max-width:479px){.cta .btn{flex:1 1 100%}}
@media (max-width:599px){.chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.chips li{text-align:center}}

/* Kopfbereich */
.top{background:var(--bg);border-bottom:1px solid var(--line)}
.topin{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem 1.2rem;padding-block:.8rem}
.nav{order:3;width:100%;display:flex;flex-wrap:wrap;gap:.5rem}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:.35rem 1rem;border:1px solid var(--line);border-radius:999px;background:var(--card);font-weight:600;font-size:1.0625rem;text-decoration:none}
.nav a:hover{border-color:var(--fg)}
/* Handy/Tablet: Menü einzeilig, seitlich wischbar */
@media (max-width:899px){
  .nav{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-block:4px;margin-block:-4px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:none}
}
@media (min-width:900px){
  .brand img{height:62px}
  .top{position:sticky;top:0;z-index:20}
  .nav{order:0;width:auto;flex:1;justify-content:flex-end;gap:.2rem}
  .nav a{border-color:transparent;background:transparent}
  .nav a:hover{border-color:var(--line);background:var(--card)}
  [id]{scroll-margin-top:100px}
}

/* Kachel-Raster */
.bento{display:grid;gap:20px;grid-template-columns:repeat(12,minmax(0,1fr));padding-block:1.5rem 3.5rem}
.t{border-radius:var(--r);background:var(--card);padding:clamp(1.3rem,3vw,2rem);min-width:0;grid-column:span 12;overflow:hidden}
@media (min-width:700px){.s3{grid-column:span 6}}
@media (min-width:1000px){.s3{grid-column:span 3}.svc-t{grid-column:span 6}}
.bh{grid-column:span 12;font-size:clamp(1.75rem,3.6vw,2.4rem);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:1.8rem 0 0}

/* Hero: Foto oben in voller Breite, Text darunter, keine Überlagerung */
.hero-t{padding:0;display:grid;align-content:start}
.hero-t>.ph{aspect-ratio:16/9;border-radius:0}
@media (min-width:700px){.hero-t>.ph{aspect-ratio:2.6/1}}
.hero-t .in{padding:clamp(1.3rem,3.5vw,2.4rem);display:grid;gap:1rem;max-width:58rem}
.kicker{font-weight:600;color:var(--accent-text);font-size:1.0625rem}
.hero-t h1{font-size:clamp(2rem,4.6vw,3rem);font-weight:800;line-height:1.1;letter-spacing:-.02em}
.hero-t p.lead{font-size:1.1875rem;color:var(--muted)}
.mailline{font-size:1.0625rem}
.mailline a{font-weight:600;overflow-wrap:anywhere}

/* Kehrgebiet: Vollbreite direkt unter dem Hero */
.gebiet-t{display:grid;gap:1.5rem 2.5rem;align-items:center}
@media (min-width:900px){.gebiet-t{grid-template-columns:1.1fr .9fr}}
.gebiet-t h2{font-size:clamp(1.75rem,3.6vw,2.4rem);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-bottom:.7rem}
.gebiet-t p{font-size:1.1875rem;color:var(--muted)}
.map{aspect-ratio:4/3;background:#fff;border-radius:var(--r-img);max-width:32rem}
.map img{object-fit:contain}

/* Leistungen: Foto klein (die Originale sind klein) */
.svc-t{display:grid;gap:1.1rem 1.6rem;align-content:start;grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){.svc-t{grid-template-columns:180px minmax(0,1fr);align-items:start}}
.svc-t .ph{width:180px;max-width:100%;aspect-ratio:4/3;border-radius:14px}
.svc-t h3{font-size:1.4rem;font-weight:800;line-height:1.2;margin-bottom:.8rem}
.svc-t ul{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.svc-t li{font-size:1.0625rem;color:var(--muted);line-height:1.55}
.svc-t li b{display:block;color:var(--fg);font-size:1.125rem}

/* Team */
.team-t p{color:var(--muted);margin-bottom:1.4rem;max-width:46rem;font-size:1.0625rem}
.grp .ph{aspect-ratio:1200/514;border-radius:var(--r-img);margin-bottom:1.6rem}
.team{display:grid;gap:1.4rem 1.2rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,160px),1fr))}
.person .ph{aspect-ratio:3/4;border-radius:14px;margin-bottom:.7rem}
.person b{display:block;line-height:1.25;font-size:1.0625rem}
.person span{font-size:1rem;color:var(--muted);line-height:1.35;display:block}

/* Geschichte */
.hist-t b{display:block;font-size:2.4rem;font-weight:800;letter-spacing:-.03em;color:var(--accent-text);line-height:1.1}
.hist-t span{display:block;margin-top:.5rem;color:var(--muted);font-size:1.0625rem}

/* Kontakt */
.kont-t{background:var(--fg);color:var(--bg);display:grid;gap:1.1rem;padding:clamp(1.6rem,5vw,3rem)}
.kont-t h2{font-size:clamp(1.75rem,3.6vw,2.4rem);font-weight:800;line-height:1.15}
.kont-t .tel{font-size:clamp(2.3rem,7vw,3.8rem);font-weight:800;letter-spacing:-.03em;text-decoration:none;font-variant-numeric:tabular-nums;line-height:1.05}
.kont-t address{font-style:normal;font-size:1.125rem;opacity:.92}
.kont-t .btn{background:var(--bg);color:var(--fg);border-color:var(--bg)}
.kont-t .btn.ghost{background:transparent;color:var(--bg);border-color:var(--bg)}
.kont-t .btn.ghost:hover{background:var(--bg);color:var(--fg)}

/* Fußzeile */
.foot{background:var(--bg2);border-top:1px solid var(--line);padding-block:1.6rem;font-size:1rem;color:var(--muted)}
.foot .wrap{display:flex;justify-content:space-between;gap:.75rem 2rem;flex-wrap:wrap}
.foot nav{display:flex;gap:1.25rem;flex-wrap:wrap}
.foot a{text-underline-offset:3px}

/* Rechtsseiten */
.lhead{border-bottom:1px solid var(--line);background:var(--bg)}
.lhead .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.9rem}
.lhead .back{font-weight:600;text-decoration:none}
.lhead .back:hover{text-decoration:underline}
.legal{max-width:46rem;margin-inline:auto;padding:clamp(2rem,6vw,3.5rem) max(16px,env(safe-area-inset-left,0px)) clamp(2.5rem,7vw,4.5rem)}
.legal h1{font-size:clamp(1.9rem,4.5vw,2.6rem);line-height:1.1;margin-bottom:1.5rem}
.legal h2{font-size:1.3rem;margin:2.2rem 0 .7rem;line-height:1.25}
.legal h3{font-size:1.1rem;margin:1.6rem 0 .5rem;line-height:1.3}
.legal h4{font-size:1rem;margin:1.2rem 0 .4rem}
.legal p,.legal li,.legal dd{color:var(--muted);font-size:1.0625rem}
.legal p+p{margin-top:.8rem}
.legal ul{padding-left:1.2rem;display:grid;gap:.3rem;margin:.6rem 0}
.legal dl{display:grid;grid-template-columns:max-content 1fr;gap:.35rem 1.25rem;margin:.6rem 0}
.legal dt{font-weight:600;color:var(--fg);font-size:1.0625rem}
.legal dd{margin:0;overflow-wrap:anywhere}
@media (max-width:520px){.legal dl{grid-template-columns:1fr;gap:0}.legal dd{margin-bottom:.6rem}}
.legal details{margin-top:1.5rem;border:1px solid var(--line);border-radius:var(--r,3px)}
.legal summary{cursor:pointer;padding:.9rem 1.1rem;font-weight:700;font-size:1.0625rem;min-height:48px;display:flex;align-items:center}
.legal details .inner{padding:0 1.1rem 1.1rem}
.todo{background:color-mix(in srgb,#ffc928 32%,transparent);outline:1px dashed #b8860b;padding:0 .3em;border-radius:2px;color:var(--fg)}

@media print{
  body{background:#fff;color:#000}
  .nav,.ph,.skip{display:none!important}
  .t{border:1px solid #999;break-inside:avoid;background:#fff;color:#000}
  .kont-t{background:#fff;color:#000}
}