/*
Theme Name: PSG Bau
Theme URI: https://psg-bau.de/
Description: Schlankes Theme für PSG Bau GmbH: Startseite, Beiträge mit Bildergalerie, Firmendaten und Impressum im Customizer. Ohne Page-Builder, ohne externe Dienste, ohne Cookies für Besucher.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
Text Domain: psg-bau-theme
Update URI: false
License: Proprietär – nur für PSG Bau GmbH
*/
/* Layout: Basaltbänder (Kopf, Start, Über uns, Kontakt, Fuß) wechseln mit hellen Kalksteinflächen; der Segmentbogen aus dem Logo ist das Leitmotiv, Fugenbänder gliedern. */
:root{
  color-scheme: light;
  --basalt:#1c1f22;
  --basalt-2:#262a2e;
  --basalt-tief:#141618;
  --fuge:#3a3f44;
  --fuge-hell:#5b6166;
  --logo-grau:#f8f8f8;
  --hell-gedaempft:#b8bec3;
  --kalk:#f1f2f2;
  --platte:#ffffff;
  --linie:#dcdfe1;
  --stein:#c9cdd0;
  --granit:#5b6268;
  --tinte:#1c1f22;
  --sand:#d9a660;
  --sand-hell:#e6b979;
  --sand-tief:#80531a;
  --schatten:rgba(20,22,24,.42);
  --glas:rgba(20,22,24,.66);
  --glas-stark:rgba(20,22,24,.86);
  --r:4px;
  --display:"Archivo","Arial Narrow",Arial,"Helvetica Neue",sans-serif;
  --text:"Atkinson Hyperlegible Next","Segoe UI",Roboto,Arial,sans-serif;
  --logo:url(assets/img/logo.png);
}
@font-face{font-family:"Archivo";src:url(assets/fonts/archivo-latin-wdth-normal.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url(assets/fonts/atkinson-hyperlegible-next-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url(assets/fonts/atkinson-hyperlegible-next-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{background:var(--kalk);color:var(--tinte);font-family:var(--text);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-stretch:112%;line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.01em;font-weight:800}
h2{font-size:clamp(1.75rem,1.25rem + 2vw,2.75rem)}
p,ul,ol,dl,figure{margin:0}
.seite{overflow-x:clip}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.eyebrow{font-family:var(--display);font-stretch:125%;font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sand-tief)}
.dunkel .eyebrow{color:var(--sand)}
.intro{color:var(--granit);max-width:60ch;font-size:1.125rem;margin-top:16px}
.dunkel .intro{color:var(--hell-gedaempft)}
.kopfzeile{display:grid;gap:14px;max-width:760px}
.platzhalter{background:rgba(217,166,96,.12);border:1px dashed currentColor;color:var(--sand-tief);padding:0 5px;border-radius:3px;font-size:.92em;white-space:normal}
.dunkel .platzhalter{border-color:var(--sand);color:var(--sand)}
:focus-visible{outline:3px solid var(--sand);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-9999px;top:8px}
.skip:focus{left:16px;z-index:100;background:var(--sand);color:var(--basalt);padding:12px 16px;font-weight:700}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Entwurf-Kennzeichnung */
.entwurfleiste{background:var(--sand);color:var(--basalt);font-size:.875rem;text-align:center;padding:7px 16px;line-height:1.4}
.entwurfleiste strong{font-family:var(--display);font-stretch:125%;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;margin-right:6px}

/* Kopf */
.kopf{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--basalt);border-bottom:1px solid var(--fuge);color:var(--logo-grau)}
.kopf-in{display:flex;align-items:center;gap:20px;min-height:72px;padding-block:10px}
.marke{display:flex;align-items:center;gap:14px;text-decoration:none;flex-shrink:0}
.logo{display:block;width:88px;aspect-ratio:2073/1298;background:var(--logo) 17.2% 53.97%/143.464% auto no-repeat}
.chip{font-family:var(--display);font-stretch:125%;font-weight:700;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--basalt);background:var(--sand);padding:5px 7px 4px;border-radius:3px;line-height:1}
.nav{margin-left:auto}
.nav ul{display:flex;gap:2px;list-style:none;padding:0}
.nav a{display:block;padding:10px 12px;text-decoration:none;font-weight:700;font-size:.95rem;color:var(--hell-gedaempft);border-radius:var(--r);transition:color .2s,background-color .2s}
.nav a:hover{color:var(--logo-grau);background:var(--basalt-2)}
.kopf-tel{flex-shrink:0}
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--fuge-hell);border-radius:var(--r)}
.menu summary::-webkit-details-marker{display:none}
.menu summary svg{width:22px;height:22px}
.menu[open] summary{background:var(--basalt-2)}
.menu ul{position:absolute;right:0;top:calc(100% + 12px);min-width:240px;list-style:none;padding:8px;background:var(--basalt-2);border:1px solid var(--fuge);border-radius:var(--r);box-shadow:0 18px 40px -16px var(--schatten)}
.menu a{display:block;padding:13px 14px;text-decoration:none;font-weight:700;border-radius:var(--r)}
.menu a:hover{background:var(--fuge)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 20px;border-radius:var(--r);font-family:var(--text);font-weight:700;font-size:1rem;line-height:1.2;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .2s ease,background-color .2s,border-color .2s,color .2s}
.btn svg{width:20px;height:20px;flex-shrink:0}
.btn-sand{background:var(--sand);color:var(--basalt)}
.btn-sand:hover{background:var(--sand-hell);transform:translateY(-1px)}
.btn-linie{border-color:var(--fuge-hell);color:var(--logo-grau);background:transparent}
.btn-linie:hover{border-color:var(--logo-grau)}
.btn-dunkel{background:var(--basalt);color:var(--logo-grau)}
.btn-dunkel:hover{background:var(--basalt-2)}
.btn-hell{background:var(--platte);color:var(--tinte);border-color:var(--linie)}
.btn-hell:hover{border-color:var(--granit)}
.btn-lg{min-height:56px;padding:14px 24px;font-size:1.0625rem}
.btn-klein{min-height:40px;padding:8px 14px;font-size:.9375rem}

/* Start */
.start{background:radial-gradient(circle at 78% 45%,var(--basalt-2),var(--basalt) 60%);color:var(--logo-grau);overflow:hidden;position:relative}
.start-in{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);gap:clamp(32px,5vw,72px);align-items:center;padding-block:clamp(44px,6vw,88px) clamp(40px,5vw,72px)}
.start-text{min-width:0;position:relative;z-index:1}
.start h1{font-size:clamp(2.1rem,1.2rem + 2.7vw,3.45rem);font-stretch:106%;margin-top:18px;max-width:17ch}
.lead{font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);color:var(--hell-gedaempft);max-width:36em;margin-top:22px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.fakten{display:flex;flex-wrap:wrap;gap:10px 26px;list-style:none;padding:0;margin-top:30px;color:var(--hell-gedaempft);font-size:.95rem}
.fakten li{display:flex;align-items:center;gap:10px}
.fakten li::before{content:"";width:9px;height:9px;background:var(--sand);border-radius:1.5px;flex-shrink:0}
.start-bild{display:grid;gap:14px;justify-items:center;min-width:0}
.kreis{position:relative;width:100%;max-width:560px;aspect-ratio:1}
.kreis .bogen{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.kreis .bogen .st{will-change:transform}
.kreis .rund{position:absolute;inset:21.25%;border-radius:50%;overflow:hidden;background:var(--fuge);box-shadow:0 24px 60px -24px rgba(0,0,0,.7)}
.kreis .rund img{width:100%;height:100%;object-fit:cover;transform-origin:50% 50%}
.start-bild{position:relative}
.start-bild figcaption{display:grid;gap:4px;justify-items:center;text-align:center;font-size:.875rem;color:var(--hell-gedaempft)}
.start-bild figcaption .label{font-family:var(--display);font-stretch:125%;font-weight:700;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sand)}
.fugenband{height:34px;background:var(--basalt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='34'%3E%3Cg fill='%23c9cdd0'%3E%3Crect x='1' y='1' width='30' height='14' rx='1.5'/%3E%3Crect x='33' y='1' width='30' height='14' rx='1.5'/%3E%3Crect x='-15' y='19' width='30' height='14' rx='1.5'/%3E%3Crect x='17' y='19' width='30' height='14' rx='1.5'/%3E%3Crect x='49' y='19' width='30' height='14' rx='1.5'/%3E%3C/g%3E%3C/svg%3E") repeat-x left center}

/* Abschnitte */
.sektion{padding-block:clamp(64px,8vw,112px)}
.weiss{background:var(--platte)}
.dunkel{background:var(--basalt);color:var(--logo-grau)}

/* Leistungen */
.leistungen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;list-style:none;padding:0;margin-top:44px}
.kachel{background:var(--platte);border:1px solid var(--linie);border-radius:var(--r);padding:24px 20px 22px;display:flex;flex-direction:column;gap:16px;min-height:156px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s}
.kachel:hover{transform:translateY(-4px);box-shadow:0 16px 32px -20px var(--schatten);border-color:var(--stein)}
.kachel svg{width:38px;height:38px;color:var(--sand-tief);flex-shrink:0}
.kachel h3{font-size:1.125rem;font-stretch:104%;font-weight:700;line-height:1.2;hyphens:auto}
.kachel-dunkel{background:var(--basalt);border-color:var(--basalt);color:var(--logo-grau);justify-content:space-between}
.kachel-dunkel p{color:var(--hell-gedaempft);font-size:.95rem}
.kachel-dunkel a{color:var(--sand);font-weight:700;text-decoration:none}
.kachel-dunkel a:hover{text-decoration:underline}

/* Pflasterarten */
.muster{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;margin-top:44px}
.platte{grid-column:span 2;background:var(--kalk);border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease}
.platte:nth-child(n+4){grid-column:span 3}
.platte:hover{transform:translateY(-4px);box-shadow:0 18px 34px -22px var(--schatten)}
.platte .swatch{display:block;width:100%;height:132px;transition:transform .6s ease}
.platte:hover .swatch{transform:scale(1.04)}
.platte-bild{overflow:hidden;border-bottom:1px solid var(--linie)}
.platte-text{padding:22px 22px 26px;display:grid;gap:14px;align-content:start}
.platte h3{font-size:1.35rem}
.platte dl{display:grid;gap:12px}
.platte dt{font-weight:700}
.platte dd{margin:2px 0 0;color:var(--granit)}

/* Über uns */
.ueber-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:center}
.ueber-text{display:grid;gap:18px;min-width:0}
.ueber-text p{color:var(--hell-gedaempft);max-width:58ch}
.teamfoto{aspect-ratio:4/3;border:1px dashed var(--fuge-hell);border-radius:var(--r);display:grid;place-items:center;text-align:center;padding:24px;background:repeating-linear-gradient(135deg,var(--basalt-2) 0 14px,var(--basalt) 14px 28px);color:var(--hell-gedaempft);font-size:.95rem}
.teamfoto strong{display:block;color:var(--sand);font-family:var(--display);font-stretch:112%;font-size:1.05rem;margin-bottom:6px}
.werte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:clamp(48px,6vw,72px);border-top:1px solid var(--fuge)}
.wert{padding:26px 22px 4px 0;display:grid;gap:10px;align-content:start}
.wert + .wert{padding-left:22px;border-left:1px solid var(--fuge)}
.wert h3{font-size:1.15rem;font-stretch:108%;display:flex;align-items:center;gap:10px}
.wert h3::before{content:"";width:12px;height:12px;background:var(--sand);border-radius:2px;flex-shrink:0}
.wert p{color:var(--hell-gedaempft);font-size:.975rem}

/* Galerie */
.galerie{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(120px,14vw,190px);gap:12px;list-style:none;padding:0;margin-top:44px}
.galerie li{position:relative;overflow:hidden;border-radius:var(--r);background:var(--stein);grid-row:span 2}
.galerie .g-gross{grid-column:span 2}
.galerie img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.galerie li:hover img{transform:scale(1.045)}
.galerie-hinweis{margin-top:18px;font-size:.9rem;color:var(--granit)}

/* Aktuelles */
.aktuell-kopf{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px}
.beitraege{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}
.beitraege[data-n="1"]{grid-template-columns:minmax(0,1fr)}
.beitraege[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.beitrag{position:relative;background:var(--kalk);border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease}
.beitraege[data-n="1"] .beitrag{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
.beitrag:hover{transform:translateY(-4px);box-shadow:0 18px 34px -22px var(--schatten)}
.beitrag-bild{position:relative;aspect-ratio:16/10;background:var(--stein) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='34'%3E%3Cg fill='%23c9cdd0'%3E%3Crect x='1' y='1' width='30' height='14' rx='1.5'/%3E%3Crect x='33' y='1' width='30' height='14' rx='1.5'/%3E%3Crect x='-15' y='19' width='30' height='14' rx='1.5'/%3E%3Crect x='17' y='19' width='30' height='14' rx='1.5'/%3E%3Crect x='49' y='19' width='30' height='14' rx='1.5'/%3E%3C/g%3E%3C/svg%3E") repeat;overflow:hidden}
.beitraege[data-n="1"] .beitrag-bild{aspect-ratio:auto;min-height:240px}
.beitrag-bild img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.beitrag:hover .beitrag-bild img{transform:scale(1.04)}
.foto-anzahl{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;background:var(--glas);color:var(--logo-grau);font-size:.8rem;font-weight:700;line-height:1;padding:7px 10px;border-radius:20px;backdrop-filter:blur(4px)}
.foto-anzahl svg{width:15px;height:15px}
img.fehlt{visibility:hidden}
.beitrag-text{padding:20px 22px 24px;display:grid;gap:10px;align-content:start}
.meta{font-size:.85rem;color:var(--granit);display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.kat{font-family:var(--display);font-stretch:125%;font-weight:700;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sand-tief)}
.beitrag h3{font-size:1.25rem;font-stretch:106%;line-height:1.2}
.beitrag h3 button{all:unset;cursor:pointer}
.beitrag h3 button::after{content:"";position:absolute;inset:0}
.beitrag h3 button:focus-visible{outline:none}
.beitrag:has(button:focus-visible){outline:3px solid var(--sand);outline-offset:3px}
.beitrag p.kurz{color:var(--granit);font-size:.975rem}
.weiter{font-weight:700;font-size:.95rem;color:var(--sand-tief)}
.leer{margin-top:40px;padding:36px 28px;border:1px dashed var(--stein);border-radius:var(--r);color:var(--granit);display:grid;gap:14px;justify-items:start;background:var(--kalk)}
.mehr-row{margin-top:28px;display:flex;justify-content:center}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,72px);align-items:start}
.faq-kopf{display:grid;gap:16px;position:sticky;top:120px}
.faq-liste{border-top:1px solid var(--stein)}
.faq-liste details{border-bottom:1px solid var(--stein)}
.faq-liste summary{list-style:none;cursor:pointer;padding:22px 48px 22px 0;font-weight:700;font-size:1.125rem;line-height:1.35;position:relative}
.faq-liste summary::-webkit-details-marker{display:none}
.faq-liste summary::after{content:"";position:absolute;right:10px;top:50%;width:11px;height:11px;border-right:2.5px solid var(--sand-tief);border-bottom:2.5px solid var(--sand-tief);transform:translateY(-75%) rotate(45deg);transition:transform .25s ease}
.faq-liste details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq-liste .antwort{padding:0 48px 24px 0;color:var(--granit);max-width:64ch}

/* Kontakt */
.kontakt-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(32px,5vw,80px);align-items:start}
.kontakt-text{display:grid;gap:18px;min-width:0}
.tel-gross{font-family:var(--display);font-stretch:112%;font-weight:800;font-size:clamp(1.9rem,1.2rem + 2.6vw,3.1rem);line-height:1.05;color:var(--logo-grau);text-decoration:none;font-variant-numeric:tabular-nums;margin-top:10px;display:inline-block;transition:color .2s}
.tel-gross:hover{color:var(--sand)}
.kontakt-text .cta-row{margin-top:8px}
.kontakt-daten{border-top:1px solid var(--fuge)}
.kontakt-daten > div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--fuge)}
.kontakt-daten dt{font-family:var(--display);font-stretch:125%;font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--hell-gedaempft);padding-top:4px}
.kontakt-daten dd{margin:0;font-variant-numeric:tabular-nums}
.kontakt-daten a{color:var(--logo-grau);text-decoration-color:var(--fuge-hell);text-underline-offset:3px}
.kontakt-daten a:hover{color:var(--sand)}
.klein{font-size:.875rem;color:var(--hell-gedaempft)}

/* Fuß */
.fuss{background:var(--basalt-tief);color:var(--hell-gedaempft);padding-block:40px;font-size:.925rem}
.fuss-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px}
.fuss .logo{width:92px}
.fuss nav ul{display:flex;flex-wrap:wrap;gap:6px 22px;list-style:none;padding:0}
.fuss a{color:var(--logo-grau);text-underline-offset:3px}
.recht{padding-block:56px 64px;font-size:.925rem;color:var(--granit)}
.recht-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.recht h2{font-size:1.35rem;color:var(--tinte);margin-bottom:14px}
.recht p + p{margin-top:10px}

/* Handy-Leiste */
.aktionsleiste{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:var(--basalt-tief);border-top:1px solid var(--fuge)}
.aktionsleiste .btn{min-height:52px;padding:10px 12px}

/* Dialoge */
dialog{border:0;padding:0;border-radius:var(--r);width:min(760px,calc(100vw - 32px));max-height:calc(100dvh - 48px);background:var(--platte);color:var(--tinte);box-shadow:0 30px 80px -30px var(--schatten)}
dialog::backdrop{background:rgba(20,22,24,.62)}
.dlg-kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid var(--linie);position:sticky;top:0;background:var(--platte);z-index:2}
.dlg-kopf h2{font-size:1.2rem;font-stretch:108%}
.x{width:44px;height:44px;border-radius:var(--r);border:1px solid var(--linie);background:var(--platte);cursor:pointer;display:grid;place-items:center;color:var(--tinte)}
.x:hover{border-color:var(--granit)}
.x svg{width:18px;height:18px}
.leser-bild:empty{display:none}
.gs{background:var(--basalt-tief)}
.gs-buehne{position:relative}
.gs-spur{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.gs-spur::-webkit-scrollbar{display:none}
.gs-spur:focus-visible{outline:3px solid var(--sand);outline-offset:-3px;border-radius:0}
.gs-folie{flex:0 0 100%;margin:0;scroll-snap-align:center;scroll-snap-stop:always;height:min(58vh,480px);display:grid;place-items:center;background:var(--basalt-tief)}
.gs-folie img{width:100%;height:100%;object-fit:contain}
.gs-pfeil{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;background:var(--glas);color:var(--logo-grau);display:grid;place-items:center;cursor:pointer;transition:background-color .2s,opacity .2s}
.gs-pfeil:hover{background:var(--glas-stark)}
.gs-pfeil:disabled{opacity:0;pointer-events:none}
.gs-pfeil svg{width:22px;height:22px}
.gs-zurueck{left:12px}
.gs-vor{right:12px}
.gs-zaehler{position:absolute;right:12px;top:12px;margin:0;background:var(--glas);color:var(--logo-grau);font-size:.8rem;font-weight:700;padding:5px 10px;border-radius:20px;font-variant-numeric:tabular-nums}
.gs-daumen{display:flex;gap:6px;padding:8px;overflow-x:auto;scrollbar-width:thin;background:var(--basalt-tief)}
.gs-daumen button{flex:0 0 68px;height:50px;padding:0;border:2px solid transparent;border-radius:3px;overflow:hidden;cursor:pointer;opacity:.55;background:var(--fuge);transition:opacity .2s,border-color .2s}
.gs-daumen button:hover{opacity:.85}
.gs-daumen button[aria-current="true"]{border-color:var(--sand);opacity:1}
.gs-daumen img{width:100%;height:100%;object-fit:cover;display:block}
.leser-text{padding:26px clamp(20px,4vw,40px) 36px;display:grid;gap:14px}
.leser-text h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem)}
.leser-text .inhalt{display:grid;gap:14px;max-width:65ch}
.leser-text .inhalt h3{font-size:1.2rem;margin-top:8px}
.leser-text .inhalt ul{padding-left:1.2em;display:grid;gap:6px}

#verwaltung{width:min(1080px,calc(100vw - 32px))}
.vw-grid{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:0}
.vw-liste{border-right:1px solid var(--linie);padding:16px;display:grid;gap:10px;align-content:start;background:var(--kalk)}
.vw-liste ul{list-style:none;padding:0;display:grid;gap:6px}
.vw-eintrag{width:100%;text-align:left;border:1px solid var(--linie);background:var(--platte);border-radius:var(--r);padding:10px 12px;cursor:pointer;display:grid;gap:4px;font:inherit;color:inherit}
.vw-eintrag:hover{border-color:var(--granit)}
.vw-eintrag[aria-current="true"]{border-color:var(--sand-tief);box-shadow:inset 3px 0 0 var(--sand-tief)}
.vw-eintrag strong{font-size:.95rem;line-height:1.3}
.vw-eintrag span{font-size:.8rem;color:var(--granit);display:flex;gap:8px;align-items:center}
.status{display:inline-block;font-size:.7rem;font-weight:700;padding:2px 7px;border-radius:20px;letter-spacing:.02em}
.status-live{background:#dcefd2;color:#2f5a1f}
.status-entwurf{background:#f3e3cc;color:#6b4513}
.vw-form{padding:20px 24px 28px;display:grid;gap:18px;min-width:0}
.feld{display:grid;gap:6px}
.feld label,.feld legend{font-weight:700;font-size:.95rem}
.feld .hilfe{font-size:.82rem;color:var(--granit)}
.feld input[type=text],.feld input[type=date],.feld select,.feld textarea{font:inherit;font-size:1rem;color:var(--tinte);background:var(--platte);border:1px solid var(--stein);border-radius:var(--r);padding:11px 12px;width:100%}
.feld textarea{resize:vertical;min-height:90px;line-height:1.5}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:2px solid var(--sand);outline-offset:1px;border-color:var(--sand-tief)}
.zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
fieldset{border:0;padding:0;margin:0}
.bildwahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;margin-top:6px}
.bildwahl label{position:relative;aspect-ratio:1;border-radius:var(--r);overflow:hidden;border:2px solid var(--linie);cursor:pointer;display:grid;place-items:center;background:var(--kalk);font-size:.8rem;text-align:center;font-weight:700;color:var(--granit);padding:4px}
.bildwahl label img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bw-nr{position:absolute;top:5px;left:5px;z-index:1;min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:var(--sand);color:var(--basalt);font-size:.78rem;font-weight:700;display:none;place-items:center;box-shadow:0 2px 6px -2px var(--schatten)}
.bildwahl label:has(input:checked) .bw-nr{display:grid}
.bw-upload{position:relative;border:2px dashed var(--stein);background:var(--kalk);font:inherit;font-size:.8rem;font-weight:700;color:var(--granit);cursor:pointer;display:grid;place-items:center;align-content:center;gap:6px;text-align:center;padding:6px;aspect-ratio:1;border-radius:var(--r)}
.bw-upload svg{width:24px;height:24px}
.bw-upload:hover{border-color:var(--granit);color:var(--tinte)}
.bildwahl input{position:absolute;opacity:0;pointer-events:none}
.bildwahl label:has(input:checked){border-color:var(--sand-tief);box-shadow:0 0 0 2px var(--sand)}
.bildwahl label:has(input:focus-visible){outline:3px solid var(--sand);outline-offset:2px}
.statuswahl{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.statuswahl label{display:flex;align-items:center;gap:8px;border:1px solid var(--stein);border-radius:var(--r);padding:10px 14px;cursor:pointer;font-weight:400}
.statuswahl label:has(input:checked){border-color:var(--sand-tief);background:var(--kalk);font-weight:700}
.vw-aktionen{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding-top:6px;border-top:1px solid var(--linie)}
.vw-aktionen .rechts{margin-left:auto}
.btn-loeschen{background:transparent;color:#9b2c1f;border-color:#e3c3bd}
.btn-loeschen:hover{border-color:#9b2c1f}
.bestaetigen{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:#fbeeeb;border:1px solid #e3c3bd;border-radius:var(--r);padding:12px 14px;color:#6e1f15;font-size:.95rem}
.fehler{color:#9b2c1f;font-size:.9rem}
.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--basalt);color:var(--logo-grau);padding:12px 18px;border-radius:var(--r);font-weight:700;z-index:200;box-shadow:0 16px 36px -14px var(--schatten);max-width:calc(100vw - 32px)}

/* Einblenden beim Scrollen (nur mit JavaScript und ohne „Bewegung reduzieren“) */
.warte{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.warte.drin{opacity:1;transform:none}

@media (max-width:1040px){
  .nav{display:none}
  .menu{display:block;margin-left:auto}
}
@media (max-width:960px){
  .leistungen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .muster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .platte,.platte:nth-child(n+4){grid-column:span 1}
  .platte:last-child{grid-column:span 2}
  .werte{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wert:nth-child(3){padding-left:0;border-left:0}
  .wert:nth-child(n+3){border-top:1px solid var(--fuge);margin-top:22px}
  .beitraege{grid-template-columns:repeat(2,minmax(0,1fr))}
  .beitraege[data-n="1"] .beitrag{display:flex}
  .beitraege[data-n="1"] .beitrag-bild{aspect-ratio:16/10;min-height:0}
  .faq-grid,.kontakt-grid,.ueber-grid{grid-template-columns:minmax(0,1fr)}
  .faq-kopf{position:static}
}
@media (max-width:860px){
  .start-in{grid-template-columns:minmax(0,1fr)}
  .kreis{max-width:360px}
}
@media (max-width:760px){
  .aktionsleiste{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
  body{padding-bottom:76px}
  .kopf-tel{display:none}
  .logo{width:76px}
  .kopf-in{min-height:64px;padding-block:8px}
  .galerie{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(110px,30vw,170px)}
  .recht-grid{grid-template-columns:minmax(0,1fr)}
  .vw-grid{grid-template-columns:minmax(0,1fr)}
  .vw-liste{border-right:0;border-bottom:1px solid var(--linie)}
  .zwei{grid-template-columns:minmax(0,1fr)}
  .kontakt-daten > div{grid-template-columns:minmax(0,1fr);gap:4px}
}
@media (max-width:640px){
  .muster,.beitraege,.beitraege[data-n="2"]{grid-template-columns:minmax(0,1fr)}
  .platte:last-child{grid-column:auto}
  .werte{grid-template-columns:minmax(0,1fr)}
  .wert,.wert + .wert{padding-left:0;border-left:0}
  .wert + .wert{border-top:1px solid var(--fuge);margin-top:0}
  .wert{padding-bottom:22px}
  .faq-liste summary{padding-right:40px}
  .faq-liste .antwort{padding-right:0}
}
@media (max-width:420px){
  .leistungen{gap:10px}
  .kachel{padding:18px 14px;min-height:140px}
  .kachel h3{font-size:1rem}
  .chip{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .warte{opacity:1;transform:none}
}

/* ---------- WordPress ---------- */
.admin-bar .kopf{top:calc(32px + env(safe-area-inset-top,0px))}
@media (max-width:782px){.admin-bar .kopf{top:46px}}
@media (max-width:600px){.admin-bar .kopf{top:0}}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.beitrag h3 a{color:inherit;text-decoration:none}
.beitrag h3 a::after{content:"";position:absolute;inset:0}
.beitrag h3 a:focus-visible{outline:none}
.beitrag:has(h3 a:focus-visible){outline:3px solid var(--sand);outline-offset:3px}
.ueber-grid.ohne-foto{grid-template-columns:minmax(0,1fr)}
.ueber-grid.ohne-foto .ueber-text{max-width:760px}
.teamfoto-bild{margin:0;border-radius:var(--r);overflow:hidden;background:var(--basalt-2)}
.teamfoto-bild img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.seitenkopf{padding-block:clamp(44px,6vw,80px) clamp(36px,4vw,56px)}
.seitenkopf h1{font-size:clamp(2rem,1.3rem + 2.6vw,3.2rem);margin-top:12px;max-width:24ch}
.seitenkopf .lead{margin-top:18px}
.seitenkopf .meta{color:var(--hell-gedaempft);margin-top:4px}
.seitenkopf .kat{color:var(--sand)}
.seitenkopf .cta-row{margin-top:24px}
.zurueck{display:inline-flex;gap:8px;align-items:center;color:var(--sand);font-weight:700;text-decoration:none;margin-bottom:14px}
.zurueck:hover{text-decoration:underline}
.schmal{max-width:860px}
.breit{max-width:1140px}
.artikel-galerie{background:var(--basalt);padding-bottom:clamp(24px,4vw,48px)}
.artikel-galerie .gs{border-radius:var(--r);overflow:hidden}
.artikel-galerie .gs-folie{height:clamp(240px,62vw,620px);max-height:72vh}
.gs-text{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;background:var(--glas);color:var(--logo-grau);font-size:.875rem}
.gs-folie{position:relative}
.artikel-text{padding-top:clamp(36px,5vw,64px)}
.inhalt{font-size:1.0625rem;line-height:1.7}
.inhalt > * + *{margin-top:1.05em}
.inhalt h2{font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);margin-top:1.8em}
.inhalt h3{font-size:1.3rem;margin-top:1.6em}
.inhalt h4,.inhalt h5,.inhalt h6{font-family:var(--display);font-stretch:108%;font-weight:700;font-size:1.05rem;margin-top:1.4em;margin-bottom:0}
.inhalt ul,.inhalt ol{padding-left:1.3em}
.inhalt li + li{margin-top:.35em}
.inhalt a{color:var(--sand-tief);text-underline-offset:3px}
.inhalt img{height:auto;max-width:100%;border-radius:var(--r)}
.inhalt figure{margin-inline:0}
.inhalt figcaption{font-size:.875rem;color:var(--granit);margin-top:8px}
.inhalt blockquote{margin:0;padding:4px 0 4px 20px;border-left:3px solid var(--sand)}
.inhalt hr{border:0;border-top:1px solid var(--linie)}
.inhalt .wp-block-image{margin-block:1.6em}
.inhalt .alignwide{max-width:none}
.hinweis-intern{border:1px dashed var(--sand-tief);background:rgba(217,166,96,.12);padding:14px 16px;border-radius:var(--r);font-size:.95rem}
.artikel-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:48px;border-top:1px solid var(--linie);padding-top:24px}
.artikel-nav a{display:grid;gap:4px;text-decoration:none;color:var(--tinte);font-weight:700;padding:14px 16px;border:1px solid var(--linie);border-radius:var(--r);background:var(--platte)}
.artikel-nav a:hover{border-color:var(--granit)}
.artikel-nav span{font-size:.72rem;color:var(--granit);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-family:var(--display);font-stretch:125%}
.artikel-nav .naechster{text-align:right;grid-column:2}
.cta-box{margin-top:48px;background:var(--basalt);color:var(--logo-grau);border-radius:var(--r);padding:clamp(22px,4vw,32px);display:grid;gap:12px}
.cta-box h2{font-size:1.5rem}
.cta-box p{color:var(--hell-gedaempft)}
.cta-box .cta-row{margin-top:6px}
.nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:36px}
.nav-links .page-numbers{min-width:44px;height:44px;display:grid;place-items:center;padding:0 14px;border:1px solid var(--linie);border-radius:var(--r);text-decoration:none;color:var(--tinte);font-weight:700;background:var(--platte)}
.nav-links .page-numbers:hover{border-color:var(--granit)}
.nav-links .current{background:var(--basalt);color:var(--logo-grau);border-color:var(--basalt)}
.aktuell-kopf .btn{flex-shrink:0}
@media (max-width:640px){.artikel-nav{grid-template-columns:minmax(0,1fr)}.artikel-nav .naechster{grid-column:auto;text-align:left}}