/* Fliesen-Franke und CERA-XXL, Entwurf von hubfox
   Richtung: Ausstellung bei Streiflicht (C) plus Platte auf der Kante (A).
   Grundsatz: eine starke Bewegung im Kopf, alles andere ruhig. */

@font-face{font-family:"Fraunces";src:url(/fonts/fraunces.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Archivo";src:url(/fonts/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}

:root{
  --schiefer:#1D2225; --schiefer-2:#262C30; --schiefer-3:#30373C;
  --stein:#E4DED4; --nebel:#A2A9AE; --messing:#CDA36A; --messing-hell:#DDB984;
  --kalk:#EEEBE6; --kalk-2:#E4E0D9; --graphit:#22272B; --graphit-2:#4A5157; --messing-tief:#7A5820;
  --fehler-dunkel:#FF9C8A; --fehler-hell:#A3261A;

  --grund:var(--kalk); --grund-2:var(--kalk-2); --text:var(--graphit); --leise:var(--graphit-2);
  --akzent:var(--messing-tief); --linie:#CFC9C0; --fehler:var(--fehler-hell);

  --rand:clamp(16px,4vw,56px);
  --breit:1280px;
  --t-0:clamp(.9rem,.86rem + .15vw,.98rem);
  --t-1:clamp(1.0625rem,1rem + .25vw,1.2rem);
  --t-2:clamp(1.3rem,1.15rem + .6vw,1.65rem);
  --t-3:clamp(1.8rem,1.4rem + 1.8vw,2.9rem);
  --t-4:clamp(2.4rem,1.5rem + 4.2vw,5.4rem);
  --t-5:clamp(2.5rem,1.2rem + 5.4vw,6.4rem);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{--grund:var(--schiefer);--grund-2:var(--schiefer-2);--text:var(--stein);--leise:var(--nebel);
        --akzent:var(--messing-hell);--linie:#3A4247;--fehler:var(--fehler-dunkel)}
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{margin:0;background:var(--grund);color:var(--text);font-family:"Archivo",system-ui,sans-serif;font-size:var(--t-1);line-height:1.6;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--akzent);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--messing);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:360;font-variation-settings:"opsz" 120,"SOFT" 30;line-height:1.06;letter-spacing:-.015em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:var(--t-4)} h2{font-size:var(--t-3)} h3{font-size:var(--t-2);line-height:1.2;font-variation-settings:"opsz" 40}
p{margin:0 0 1em;max-width:68ch;text-wrap:pretty}
ul,ol{max-width:68ch}
.sprung{position:absolute;left:12px;top:-60px;background:var(--messing);color:var(--schiefer);padding:10px 16px;z-index:100;text-decoration:none;font-weight:600}
.sprung:focus{top:12px}
.nur-lesbar{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Hinweisband: ehrlich sagen, was diese Seite ist */
.entwurf{background:#14181A;color:#C9C3B8;font-size:.82rem;text-align:center;padding:7px var(--rand);line-height:1.4}
.entwurf a{color:#E4DED4}

/* Kopf */
.kopf{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--grund) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--linie)}
.kopf-innen{max-width:var(--breit);margin:0 auto;display:flex;align-items:center;gap:24px;padding:12px var(--rand);min-height:68px}
.marke{display:flex;flex-direction:column;text-decoration:none;color:var(--text);line-height:1.1;margin-right:auto}
.marke b{font-family:"Fraunces",serif;font-weight:500;font-size:1.25rem;letter-spacing:-.01em}
.marke span{font-size:.78rem;color:var(--leise);font-stretch:90%}
.menue{display:flex;gap:4px;align-items:center}
.menue a{color:var(--text);text-decoration:none;padding:10px 12px;border-radius:2px;font-size:.98rem}
.menue a:hover{background:var(--grund-2)}
.menue a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--messing);text-decoration-thickness:2px;text-underline-offset:.4em}
.menue-knopf{display:none}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.7em 1.35em;border-radius:2px;border:0;background:var(--messing);color:var(--schiefer);font:600 1rem/1.2 "Archivo",sans-serif;text-decoration:none;cursor:pointer;transition:background .15s}
.knopf:hover{background:var(--messing-hell);text-decoration:none}
.knopf.leise{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.knopf.leise:hover{background:color-mix(in srgb,currentColor 10%,transparent)}
.knopf[disabled]{opacity:.6;cursor:progress}

@media (max-width:980px){
  .menue-knopf{display:inline-flex;min-height:48px;min-width:48px;align-items:center;justify-content:center;background:transparent;border:1.5px solid var(--linie);color:var(--text);border-radius:2px;font:600 .95rem "Archivo",sans-serif;padding:0 14px;cursor:pointer}
  .menue{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;background:var(--grund);border-bottom:1px solid var(--linie);padding:8px var(--rand) 20px}
  .menue.offen{display:flex}
  .menue a{padding:14px 8px;font-size:1.1rem;border-bottom:1px solid var(--linie)}
  .kopf .knopf.kopf-cta{display:none}
}
.ohne-js .menue{display:flex;position:static;flex-wrap:wrap;padding:0;border:0}
.ohne-js .menue-knopf{display:none}

/* Grundraster */
.abschnitt{padding:clamp(64px,9vw,136px) var(--rand)}
.innen{max-width:var(--breit);margin:0 auto}
.dunkel{background:var(--schiefer);color:var(--stein);--text:var(--stein);--leise:var(--nebel);--akzent:var(--messing-hell);--linie:#3A4247;--grund-2:var(--schiefer-2)}
.zweispaltig{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,6vw,96px);align-items:start}
.zweispaltig.umgekehrt{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
@media (max-width:860px){.zweispaltig,.zweispaltig.umgekehrt{grid-template-columns:minmax(0,1fr)}}
.einleitung{font-size:var(--t-2);line-height:1.45;color:var(--text);font-family:"Fraunces",serif;font-weight:330;font-variation-settings:"opsz" 30}
.leise{color:var(--leise)}

/* =============== Kopfbühne: Platte im Streiflicht =============== */
.held{position:relative;height:240vh;background:#121517;color:#E4DED4}
.held .buehne{position:sticky;top:69px;height:calc(100vh - 69px - var(--band,34px));height:calc(100svh - 69px - var(--band,34px));overflow:hidden;perspective:1600px;perspective-origin:50% 38%}
.held .raum{position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 110%,#262C30 0,#121517 60%)}
.platte{position:absolute;left:50%;top:32%;width:min(78vw,1100px,84vh);aspect-ratio:2/1;transform-style:preserve-3d;
  transform:translate(-50%,-50%) rotateX(calc(12deg + var(--p,0) * 74deg)) rotateZ(calc(var(--p,0) * -7deg)) translateY(calc(var(--p,0) * 10%));will-change:transform}
.platte .flaeche{position:absolute;inset:0;background:#EDEAE4 url(/bilder/marmor-2400.webp) center/cover;box-shadow:0 60px 120px -40px rgba(0,0,0,.8)}
.platte .flaeche::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle 34vmax at var(--lx,25%) var(--ly,35%),rgba(255,248,236,.18) 0,rgba(0,0,0,0) 35%,rgba(8,10,11,.62) 85%);mix-blend-mode:multiply}
.platte .glanz{position:absolute;inset:0;background:radial-gradient(circle 22vmax at var(--lx,25%) var(--ly,35%),rgba(255,244,222,.38),rgba(255,244,222,0) 60%);mix-blend-mode:soft-light;pointer-events:none}
.platte .kante{position:absolute;left:0;right:0;bottom:0;height:7px;transform-origin:50% 100%;transform:rotateX(-90deg);
  background:linear-gradient(90deg,#8d877c,#f6efe2 calc(var(--lxk,40%) - 8%),#fffaf0 var(--lxk,40%),#a39c90 calc(var(--lxk,40%) + 14%),#77716a)}
.held .text{position:absolute;left:var(--rand);right:var(--rand);bottom:clamp(20px,5vh,64px);max-width:var(--breit);margin:0 auto}
.held h1{font-size:var(--t-5);font-weight:300;font-variation-settings:"opsz" 144,"SOFT" 60;line-height:.98;letter-spacing:-.025em;margin:0;color:#F1ECE3;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.held h1 .zeile{display:block}
.held h1 .zweite{opacity:calc(.5 + var(--p2,0) * .5)}
.held .unter{display:flex;flex-wrap:wrap;align-items:flex-end;gap:20px 40px;margin-top:22px}
.held .unter p{margin:0;max-width:40ch;color:#CFC8BC}
.held .aktionen{display:flex;flex-wrap:wrap;gap:12px}
.held .knopf.leise{color:#E4DED4}
.held .mass{position:absolute;right:var(--rand);top:22px;text-align:right;font-stretch:72%;font-size:.95rem;color:#B9B2A6;font-variant-numeric:tabular-nums;line-height:1.5}
.held .mass b{color:#F1ECE3;font-weight:600}
.held .weiter{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);font-size:.8rem;color:#8F979C;opacity:calc(1 - var(--p,0) * 4)}
@media (min-width:1100px){
  .held .text{display:grid;grid-template-columns:minmax(0,auto) minmax(300px,440px);align-items:end;gap:20px 56px}
  .held .unter{flex-direction:column;align-items:flex-start;margin:0 0 .6em}
}
@media (max-width:700px){
  :root{--band:64px}
  .held{height:190vh}
  .platte{top:27%;width:100vw}
  .held .unter{margin-top:14px;gap:14px}
  .held .unter p{font-size:1rem}

  .held .mass{top:14px;font-size:.85rem}
  .held .weiter{display:none}
}
@media (prefers-reduced-motion:reduce){
  .held{height:auto}
  .held .buehne{position:relative;height:100svh;min-height:620px}
  .platte{transform:translate(-50%,-50%) rotateX(62deg) rotateZ(-5deg)}
  .held h1 .zweite{opacity:1;transform:none}
}

/* Fakten */
.fakten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:48px 0 0;border-top:1px solid var(--linie)}
.fakten div{padding:22px 20px 6px 0;border-right:1px solid var(--linie);margin-right:20px}
.fakten div:last-child{border-right:0}
.fakten dt{font-size:var(--t-0);color:var(--leise)}
.fakten dd{margin:4px 0 0;font-family:"Fraunces",serif;font-size:var(--t-3);font-weight:330;line-height:1.05;font-variant-numeric:lining-nums}
.fakten dd small{display:block;font-family:"Archivo",sans-serif;font-size:var(--t-0);color:var(--leise);margin-top:6px}
@media (max-width:860px){.fakten{grid-template-columns:repeat(2,minmax(0,1fr))}.fakten div:nth-child(2){border-right:0}.fakten div{border-bottom:1px solid var(--linie)}}

/* Formate im Maßstab */
.massstab{margin-top:40px}
.massstab-buehne{position:relative;display:flex;align-items:flex-end;gap:clamp(6px,1.2vw,18px);padding:24px 0 0;border-bottom:2px solid var(--text);overflow-x:auto;scrollbar-width:thin}
.massstab .tuer,.massstab .format{flex:none;position:relative;height:calc(var(--h) * var(--m));width:calc(var(--b) * var(--m))}
.massstab-buehne{--m:clamp(.45px,.068vw,.95px)}
.massstab .tuer{border:2px solid var(--leise);border-bottom:0;background:repeating-linear-gradient(135deg,transparent 0 6px,color-mix(in srgb,var(--leise) 18%,transparent) 6px 7px)}
.massstab .format{background:#EDEAE4 url(/bilder/marmor-1200.webp) center/cover;border:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);cursor:pointer;padding:0;font:inherit;color:inherit}
.massstab .format[aria-pressed="true"]{outline:3px solid var(--messing);outline-offset:2px}
.massstab figcaption{display:block;font-size:var(--t-0);color:var(--leise);margin-top:14px}
.massstab .beschriftung{position:absolute;left:0;top:-1.6em;white-space:nowrap;font-size:.78rem;font-stretch:80%;color:var(--leise);font-variant-numeric:tabular-nums}
.massstab .auswahl{margin-top:22px;min-height:3.2em;font-size:var(--t-1)}

/* Bilder mit Angaben */
.bild-gross{position:relative;margin:0}
.bild-gross img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
.bild-gross figcaption{font-size:var(--t-0);color:var(--leise);margin-top:10px}
.angaben{display:grid;grid-template-columns:auto 1fr;gap:.45em 1.4em;margin:1.2em 0 0;max-width:46ch}
.angaben dt{color:var(--leise)}
.angaben dd{margin:0;font-variant-numeric:tabular-nums}

/* Zwei Betriebe */
.betriebe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,4vw,56px);margin-top:36px}
.betrieb{border-top:2px solid var(--text);padding-top:22px}
.betrieb ul{padding-left:1.1em;margin:0 0 1.2em}
.betrieb li{margin:.25em 0}
@media (max-width:760px){.betriebe{grid-template-columns:minmax(0,1fr)}}

.gewerke{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:20px 0 0;list-style:none;max-width:none}
.gewerke li{border:1px solid var(--linie);padding:.45em .9em;border-radius:999px;font-size:var(--t-0)}

/* Ablauf (echte Reihenfolge, darum nummeriert) */
.ablauf{counter-reset:schritt;list-style:none;padding:0;margin:32px 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;max-width:none}
.ablauf li{counter-increment:schritt;border-top:1px solid var(--linie);padding-top:16px}
.ablauf li::before{content:counter(schritt);display:block;font-family:"Fraunces",serif;font-size:var(--t-3);font-weight:300;line-height:1;margin-bottom:10px;color:var(--akzent)}
@media (max-width:900px){.ablauf{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:520px){.ablauf{grid-template-columns:minmax(0,1fr)}}

/* Galerie */
.galerie{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;margin-top:36px}
.galerie figure{margin:0;grid-column:span 4}
.galerie figure.breit{grid-column:span 8}
.galerie img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
.galerie figcaption{font-size:var(--t-0);color:var(--leise);margin-top:6px}
@media (max-width:760px){.galerie figure,.galerie figure.breit{grid-column:span 12}}

/* Referenzliste */
.referenzen{columns:3 260px;column-gap:40px;padding:0;list-style:none;max-width:none;margin:20px 0 0}
.referenzen li{break-inside:avoid;padding:.35em 0;border-bottom:1px solid var(--linie);font-size:var(--t-0)}
.referenzen li b{font-weight:600}

/* Tabelle Formate */
.tabelle-rahmen{overflow-x:auto;margin-top:24px;position:relative}
table{border-collapse:collapse;width:100%;min-width:520px;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:.65em .8em .65em 0;border-bottom:1px solid var(--linie);vertical-align:top}
th{font-weight:600;font-size:var(--t-0);color:var(--leise)}

/* Fragen und Antworten */
.fragen details{border-bottom:1px solid var(--linie);padding:4px 0}
.fragen summary{cursor:pointer;padding:16px 0;font-family:"Fraunces",serif;font-size:var(--t-2);font-weight:380;list-style-position:outside;min-height:48px}
.fragen details p{margin:0 0 18px}

/* Ratgeber */
.artikel{max-width:72ch}
.artikel h2{font-size:var(--t-2);margin-top:1.6em;line-height:1.2}
.artikel ul{padding-left:1.2em}
.karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px}
.karte{border-top:2px solid var(--text);padding-top:18px}
.karte a{color:var(--text);text-decoration:none}
.karte a:hover h2{text-decoration:underline;text-decoration-thickness:1px}
@media (max-width:860px){.karten{grid-template-columns:minmax(0,1fr)}}
.brotkrumen{font-size:var(--t-0);color:var(--leise);margin-bottom:22px}
.brotkrumen ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.brotkrumen li+li::before{content:"/";margin-right:6px;color:var(--linie)}

/* Seitenkopf der Unterseiten */
.seitenkopf{padding:clamp(48px,8vw,110px) var(--rand) clamp(28px,4vw,48px)}
.seitenkopf h1{max-width:18ch}

/* Anfrage-Assistent */
.assistent{max-width:880px}
.fortschritt{display:flex;gap:6px;margin:0 0 8px}
.fortschritt span{flex:1;height:4px;background:var(--linie);border-radius:2px}
.fortschritt span.erledigt{background:var(--messing)}
.schritt-angabe{font-size:var(--t-0);color:var(--leise);margin:0 0 26px}
.assistent fieldset{border:0;padding:0;margin:0 0 40px;min-width:0}
.assistent legend{font-family:"Fraunces",serif;font-size:var(--t-3);font-weight:340;line-height:1.1;padding:0;margin-bottom:.5em}
.mit-js .assistent fieldset[hidden]{display:none}
.wahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.wahl label{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:110px;padding:14px;border:1.5px solid var(--linie);border-radius:2px;cursor:pointer;background:var(--grund);transition:border-color .15s}
.wahl label:hover{border-color:var(--leise)}
.wahl input{position:absolute;opacity:0;width:1px;height:1px}
.wahl label:has(input:checked){border-color:var(--messing);box-shadow:inset 0 0 0 1.5px var(--messing);background:color-mix(in srgb,var(--messing) 9%,var(--grund))}
.wahl label:has(input:focus-visible){outline:3px solid var(--messing);outline-offset:2px}
.wahl b{font-weight:600}
.wahl small{color:var(--leise);font-size:.88rem;line-height:1.35;margin-top:3px}
.wahl.mit-bild label{min-height:170px;padding:0;overflow:hidden}
.wahl.mit-bild .flaeche{height:100px;background-size:cover;background-position:center}
.wahl.mit-bild .flaeche.marmor{background-image:url(/bilder/stil-marmor.webp)}
.wahl.mit-bild .flaeche.beton{background-image:url(/bilder/stil-beton.webp)}
.wahl.mit-bild .flaeche.hell{background-image:url(/bilder/stil-hell.webp)}
.wahl.mit-bild .flaeche.dunkel-stein{background-image:url(/bilder/stil-dunkel.webp)}
.wahl.mit-bild .flaeche.offen{background:repeating-linear-gradient(45deg,var(--grund-2) 0 10px,var(--grund) 10px 20px)}
.wahl.mit-bild .beschr{padding:10px 12px 12px}
.feld{margin:0 0 20px;max-width:560px}
.feld label,.feld .bezeichnung{display:block;font-weight:600;margin-bottom:6px}
.feld .hilfe{display:block;font-size:var(--t-0);color:var(--leise);margin:-2px 0 8px}
.feld input[type=text],.feld input[type=email],.feld input[type=tel],.feld input[type=number],.feld select,.feld textarea{width:100%;min-height:50px;padding:.7em .8em;border:1.5px solid var(--linie);border-radius:2px;background:var(--grund);color:var(--text);font:inherit}
.feld textarea{min-height:130px;resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{border-color:var(--messing);outline:2px solid var(--messing);outline-offset:0}
.feld [aria-invalid="true"]{border-color:var(--fehler)}
.feld .fehler{display:block;color:var(--fehler);font-size:var(--t-0);margin-top:6px;font-weight:600}
.feld .fehler:empty{display:none}
.reihe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;max-width:560px}
@media (max-width:560px){.reihe{grid-template-columns:minmax(0,1fr)}}
.check{display:flex;gap:12px;align-items:flex-start;margin:0 0 14px;max-width:62ch}
.check input{width:22px;height:22px;margin-top:3px;flex:none;accent-color:var(--messing)}
.hochladen{border:1.5px dashed var(--linie);padding:22px;border-radius:2px;max-width:560px}
.hochladen input[type=file]{font:inherit;max-width:100%}
.dateiliste{list-style:none;padding:0;margin:12px 0 0;font-size:var(--t-0)}
.dateiliste li{padding:4px 0;border-bottom:1px solid var(--linie)}
.navigation{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:8px}
.mit-js .navigation .senden{display:none}
.mit-js .navigation.letzter .senden{display:inline-flex}
.mit-js .navigation.letzter .weiter-knopf{display:none}
.ohne-js .zurueck-knopf,.ohne-js .weiter-knopf{display:none}
.lader{width:18px;height:18px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:drehen .8s linear infinite;display:none}
.sendet .lader{display:inline-block}
@keyframes drehen{to{transform:rotate(360deg)}}
.meldung{padding:14px 16px;border-left:4px solid var(--fehler);background:color-mix(in srgb,var(--fehler) 8%,transparent);margin:0 0 24px;max-width:62ch}
.meldung:empty{display:none}
.fang{position:absolute;left:-9999px;top:0}
.zusammenfassung{border:1px solid var(--linie);padding:18px 20px;max-width:620px;margin:0 0 24px}
.zusammenfassung dl{display:grid;grid-template-columns:auto 1fr;gap:.35em 1.2em;margin:0}
.zusammenfassung dt{color:var(--leise)}
.zusammenfassung dd{margin:0}

/* Anschrift, Karte ohne Fremddienst */
.anschriften{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.anschriften address{font-style:normal;line-height:1.7}
@media (max-width:700px){.anschriften{grid-template-columns:minmax(0,1fr)}}

/* Fuß */
.fuss{background:#14181A;color:#C9C3B8;padding:56px var(--rand) 110px;font-size:var(--t-0)}
.fuss a{color:#E4DED4}
.fuss-innen{max-width:var(--breit);margin:0 auto;display:grid;grid-template-columns:2fr 2fr 1.4fr;gap:32px}
.fuss address{font-style:normal;line-height:1.7}
.fuss h2{font-family:"Archivo",sans-serif;font-size:1rem;font-weight:600;letter-spacing:0;color:#F1ECE3;margin:0 0 .6em}
.fuss ul{list-style:none;padding:0;margin:0}
.fuss li{padding:3px 0}
.fuss .unten{max-width:var(--breit);margin:36px auto 0;padding-top:18px;border-top:1px solid #2C3337;color:#9AA1A6}
@media (max-width:820px){.fuss-innen{grid-template-columns:minmax(0,1fr)}}
@media (min-width:821px){.fuss{padding-bottom:56px}}

/* Dauerhafter Knopf auf Telefonen */
.mobil-cta{display:none}
@media (max-width:820px){
  .mobil-cta{display:flex;position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:60;gap:10px}
  .mobil-cta .knopf{flex:1;box-shadow:0 10px 30px -8px rgba(0,0,0,.45)}
  .mobil-cta .knopf.anruf{flex:0 0 auto;background:var(--schiefer-2);color:#E4DED4}
  .seite-anfrage .mobil-cta{display:none}
}

/* 404 und Danke */
.mitte{min-height:62vh;display:flex;flex-direction:column;justify-content:center}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.entwurf,.kopf,.mobil-cta,.fuss,.held .buehne{display:none}.held{height:auto}}

/* Hilfsklassen statt Stilattributen (CSP ohne unsafe-inline) */
.oben-ohne{padding-top:0!important}
.seitenkopf.unten-knapp{padding-bottom:16px}
.abstand{margin-top:1.4em}
address.schlicht{font-style:normal;line-height:1.8}
.betriebe.frei{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.galerie.ohne-abstand{margin-top:0}
.hilfe.knapp{margin-top:-8px}
.fehler.einzeln{display:block;margin:-6px 0 14px}
.hochladen .bezeichnung{font-weight:600}
.hochladen .hilfe{display:block;color:var(--leise);font-size:var(--t-0);margin:4px 0 10px}
.massstab .tuer{--b:88;--h:201}
.f-150x300{--b:150;--h:300}.f-120x360{--b:120;--h:360}.f-100x300{--b:100;--h:300}.f-120x240{--b:120;--h:240}.f-150x150{--b:150;--h:150}.f-100x100{--b:100;--h:100}.f-75x150{--b:75;--h:150}

.entwurf a,.fuss li a,.fuss address a,.brotkrumen a{display:inline-block;padding:4px 0;min-height:24px}
h2.klein{font-size:var(--t-2);line-height:1.2;font-variation-settings:"opsz" 40}
p,li,dd,address{overflow-wrap:break-word;hyphens:auto}
@media (max-width:980px){.mit-js .menue{display:flex}}
h1,h2,h3{overflow-wrap:break-word;hyphens:auto}
.betrieb > a,p > a:only-child,.angaben a{display:inline-block;padding:4px 0}
.wahl input{inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.hochladen input[type=file]{min-height:44px;padding:8px 0}
.fang input{min-height:44px}

@media (max-width:820px){.held .text{bottom:92px}.held .aktionen{display:none}}