/* ==========================================================================
   Reinhardt Dachdeckerei, Suhl
   Leitgedanke: Jedes Band überdeckt das nächste — wie eine Reihe Ziegel.
   Trennprinzip „Der Überstand": Traufkante unten, geworfener Schatten oben.
   ========================================================================== */

@font-face{font-family:"Gabarito";src:url("schriften/gabarito-latin.woff2") format("woff2");
  font-weight:400 900;font-style:normal;font-display:swap;
  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;}
@font-face{font-family:"Gabarito";src:url("schriften/gabarito-latin-ext.woff2") format("woff2");
  font-weight:400 900;font-style:normal;font-display:swap;
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Golos";src:url("schriften/golos-latin.woff2") format("woff2");
  font-weight:400 900;font-style:normal;font-display:swap;
  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;}
@font-face{font-family:"Golos";src:url("schriften/golos-latin-ext.woff2") format("woff2");
  font-weight:400 900;font-style:normal;font-display:swap;
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  /* Grundflächen: Ton, gebrannt und ungebrannt */
  --ton:#E8D5C8;
  --ton-tief:#DCC3B2;
  --kalk:#FBF7F4;
  --weiss:#FFFFFF;
  /* Schiefer aus dem Logo */
  --schiefer:#333B44;
  --schiefer-tief:#232A31;
  --schiefer-nacht:#1A2027;
  --grau:#464F5A;
  --grau-dunkelgrund:#B8C0CA;
  /* Rot und Gold aus dem Logo (neues Logo, 15.09.2026) */
  --ziegel:#900A0E;
  --ziegel-text:#900A0E;
  --ziegel-hell:#F0A72F;

  --rand:14px;
  --rand-klein:9px;
  --spalte:1180px;
  --luft:clamp(3.6rem,2.2rem + 4.4vw,6.4rem);
  --innen:clamp(1.15rem,.7rem + 1.9vw,2.6rem);

  --traufe:#C9A98F;
  --traufe-licht:#F3E6DC;
  --schatten:rgba(60,38,24,.20);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

body{
  margin:0;background:var(--ton);color:var(--schiefer);
  font-family:"Golos","Segoe UI",system-ui,sans-serif;
  font-size:1.0625rem;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
@media (min-width:900px){body{font-size:1.125rem}}

img{max-width:100%;display:block}
a{color:var(--ziegel-text)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,
summary:focus-visible{outline:3px solid var(--ziegel);outline-offset:3px;border-radius:3px}

h1,h2,h3,h4{font-family:"Gabarito","Segoe UI",system-ui,sans-serif;
  font-weight:800;line-height:1.06;letter-spacing:-.018em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.35rem,1.35rem + 3.6vw,4.15rem)}
h2{font-size:clamp(1.8rem,1.2rem + 2.1vw,2.85rem)}
h3{font-size:clamp(1.22rem,1.06rem + .55vw,1.5rem);font-weight:700;letter-spacing:-.01em}
h4{font-size:1.06rem;font-weight:700;letter-spacing:0}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
.fuehrung{font-size:clamp(1.1rem,1rem + .5vw,1.32rem);line-height:1.55}
.leise{color:var(--grau)}

/* --- Ziegel: die Kennzeichnung ---------------------------------------- */
.ziegel-marke{display:inline-block;width:10px;height:13px;flex:0 0 10px;
  background:var(--ziegel);border-radius:5px 5px 2px 2px}

.rubrik{font-family:"Gabarito",system-ui,sans-serif;font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ziegel-text);
  display:flex;align-items:center;gap:.6rem;margin:0 0 1.1rem}
.rubrik::before{content:"";width:10px;height:13px;flex:0 0 10px;
  background:var(--ziegel);border-radius:5px 5px 2px 2px}

/* --- Bänder und der Überstand ------------------------------------------ */
.band{position:relative;background:var(--ton);
  padding:var(--luft) var(--innen) calc(var(--luft) + 14px)}
.band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:11px;
  background:var(--traufe);border-top:2px solid var(--traufe-licht)}
.band + .band::before{content:"";position:absolute;left:0;right:0;top:0;height:26px;
  background:linear-gradient(var(--schatten),rgba(60,38,24,0));pointer-events:none}

.band--kalk{background:var(--kalk);--traufe:#DDC5B4;--traufe-licht:#FFFFFF}
.band--tief{background:var(--ton-tief);--traufe:#BE9E85;--traufe-licht:#EEDFD2}
.band--dunkel{background:var(--schiefer-tief);color:var(--kalk);
  --traufe:#12171D;--traufe-licht:#4A545F;--schatten:rgba(0,0,0,.42)}
.band--dunkel h1,.band--dunkel h2,.band--dunkel h3,.band--dunkel h4{color:var(--kalk)}
.band--dunkel .rubrik{color:var(--ziegel-hell)}
.band--dunkel .rubrik::before,.band--dunkel .ziegel-marke{background:var(--ziegel-hell)}
.band--dunkel .leise{color:var(--grau-dunkelgrund)}
.band--dunkel a{color:var(--ziegel-hell)}

.mitte{max-width:var(--spalte);margin:0 auto}
.schmal{max-width:760px}

/* --- Kopfzeile ---------------------------------------------------------- */
.kopf{position:sticky;top:0;z-index:60;background:var(--kalk);
  border-bottom:11px solid #DDC5B4}
.kopf::after{content:"";position:absolute;left:0;right:0;bottom:-11px;height:2px;background:#fff}
.kopf::before{content:"";position:absolute;left:0;right:0;bottom:-37px;height:26px;
  background:linear-gradient(var(--schatten),rgba(60,38,24,0));opacity:0;
  transition:opacity .2s ease;pointer-events:none}
.kopf.abgesetzt::before{opacity:1}
.kopf-innen{max-width:var(--spalte);margin:0 auto;padding:.55rem var(--innen);
  display:flex;align-items:center;gap:1rem}
.marke{display:flex;align-items:center;flex:0 0 auto;background:var(--weiss);
  border-radius:var(--rand-klein);padding:6px 10px;line-height:0}
.marke img{width:144px;height:58px;object-fit:contain}
@media (max-width:600px){.marke img{width:112px;height:45px}}

.menue{display:none;margin-left:auto;align-items:center;gap:.15rem}
.menue a{display:flex;align-items:center;gap:0;min-height:44px;padding:0 .7rem;
  font-family:"Gabarito",system-ui,sans-serif;font-weight:600;font-size:1rem;
  color:var(--schiefer);text-decoration:none;border-radius:var(--rand-klein)}
.menue a:hover{background:#F0E2D8;color:var(--ziegel-text)}
.menue a::before{content:"";width:0;height:13px;background:var(--ziegel);
  border-radius:5px 5px 2px 2px;margin-right:0;transition:width .16s ease,margin .16s ease}
.menue a[aria-current="page"]{color:var(--ziegel-text)}
.menue a[aria-current="page"]::before{width:10px;margin-right:.45rem}

.ruf{display:inline-flex;align-items:center;gap:.55rem;min-height:46px;padding:0 1.05rem;
  background:var(--ziegel);color:#fff;text-decoration:none;border-radius:var(--rand-klein);
  font-family:"Gabarito",system-ui,sans-serif;font-weight:700;font-size:1rem;
  letter-spacing:.01em;white-space:nowrap;flex:0 0 auto}
.ruf:hover{background:#6E070A}
.ruf svg{width:18px;height:18px;fill:currentColor;flex:0 0 18px}
.kopf .ruf{margin-left:auto;min-height:48px}
@media (min-width:1040px){.kopf .ruf{margin-left:.7rem}}
@media (max-width:759px){
  .kopf .ruf{width:48px;flex:0 0 48px;padding:0;justify-content:center;gap:0}
  .kopf .ruf .nummer{display:none}
}

.schalter{margin-left:.5rem;width:48px;height:48px;flex:0 0 48px;display:inline-flex;
  align-items:center;justify-content:center;background:var(--weiss);color:var(--schiefer);
  border:2px solid #E2D2C6;border-radius:var(--rand-klein);cursor:pointer}
.schalter svg{width:22px;height:22px;fill:currentColor}
.schalter .kreuz{display:none}
.schalter[aria-expanded="true"] .balken{display:none}
.schalter[aria-expanded="true"] .kreuz{display:block}

.schublade{display:none;background:var(--kalk);border-top:2px solid #E9DACE;
  padding:.5rem var(--innen) 1.1rem}
.schublade.offen{display:block}
.schublade a{display:flex;align-items:center;gap:.6rem;min-height:52px;
  font-family:"Gabarito",system-ui,sans-serif;font-weight:600;font-size:1.08rem;
  color:var(--schiefer);text-decoration:none;border-bottom:1px solid #EDE0D6}
.schublade a::before{content:"";width:10px;height:13px;flex:0 0 10px;background:#D8C6B8;
  border-radius:5px 5px 2px 2px}
.schublade a[aria-current="page"]{color:var(--ziegel-text)}
.schublade a[aria-current="page"]::before{background:var(--ziegel)}
@media (min-width:1040px){
  .menue{display:flex}
  .schalter{display:none}
  .schublade{display:none!important}
}

/* --- Knöpfe ------------------------------------------------------------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:52px;padding:0 1.4rem;border-radius:var(--rand-klein);
  font-family:"Gabarito",system-ui,sans-serif;font-weight:700;font-size:1.05rem;
  text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease}
.knopf--voll{background:var(--ziegel);color:#fff}
.knopf--voll:hover{background:#6E070A}
.knopf--rand{background:transparent;color:var(--schiefer);border-color:#C4A992}
.knopf--rand:hover{background:#F2E6DC;border-color:var(--schiefer)}
.band--dunkel .knopf--rand{color:var(--kalk);border-color:#5A6673}
.band--dunkel .knopf--rand:hover{background:#2E3740;border-color:var(--kalk)}
.knopf svg{width:18px;height:18px;fill:currentColor;flex:0 0 18px}
.knopfreihe{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}

/* --- Titelbereich ------------------------------------------------------- */
.titel .fuehrung{max-width:60ch;margin-top:1.4rem}
.titelbild{position:relative;aspect-ratio:16/6.4;overflow:hidden;
  border-radius:var(--rand);margin-top:clamp(2.2rem,1.4rem + 3vw,3.6rem);
  background:#D8CABF}
.titelbild picture{position:absolute;inset:0}
.titelbild img{width:100%;height:100%;object-fit:cover}
@media (max-width:640px){.titelbild{aspect-ratio:4/3}}

/* --- Kennlinie (Tatsachen ohne Kasten) ---------------------------------- */
.kennlinie{display:grid;gap:0;border-top:2px solid #C9A98F;
  margin:clamp(2.4rem,1.6rem + 2vw,3.4rem) 0 0}
.kennlinie > div{padding:1.15rem 0;border-bottom:1px solid #D3B9A6}
.kennlinie dt{font-family:"Gabarito",system-ui,sans-serif;font-weight:700;font-size:1.12rem;
  margin:0 0 .25rem}
.kennlinie dd{margin:0;color:var(--grau);font-size:.99rem;line-height:1.5}
@media (min-width:820px){
  .kennlinie{grid-template-columns:repeat(3,1fr);gap:0 2.6rem}
  .kennlinie > div{border-bottom:none;padding:1.4rem 0 0}
}

/* --- Leistungsfelder ---------------------------------------------------- */
.felder{display:grid;gap:1.1rem;margin-top:clamp(2rem,1.4rem + 1.6vw,2.8rem)}
@media (min-width:720px){.felder{grid-template-columns:1fr 1fr}}
.feld{background:var(--kalk);border-radius:var(--rand);overflow:hidden;
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  border:2px solid transparent;transition:border-color .16s ease,transform .16s ease}
a.feld:hover{border-color:var(--ziegel);transform:translateY(-3px)}
.band--kalk .feld{background:var(--weiss)}
.feld-bild{position:relative;aspect-ratio:16/9;background:#D8CABF}
.feld-bild picture{position:absolute;inset:0}
.feld-bild img{width:100%;height:100%;object-fit:cover}
.feld-text{padding:1.35rem 1.4rem 1.5rem}
.feld-text h3{margin-bottom:.5rem}
.feld-text p{font-size:1rem;color:var(--grau);margin:0}
.feld-mehr{display:inline-flex;align-items:center;gap:.45rem;margin-top:.9rem;
  font-family:"Gabarito",system-ui,sans-serif;font-weight:700;font-size:.98rem;
  color:var(--ziegel-text)}
.feld-mehr svg{width:15px;height:15px;fill:currentColor}

/* --- Listen ------------------------------------------------------------- */
.liste{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.62rem}
.liste li{display:flex;align-items:flex-start;gap:.7rem;line-height:1.5}
.liste li::before{content:"";width:10px;height:13px;flex:0 0 10px;margin-top:.36em;
  background:var(--ziegel);border-radius:5px 5px 2px 2px}
.band--dunkel .liste li::before{background:var(--ziegel-hell)}
@media (min-width:760px){.liste--zwei{grid-template-columns:1fr 1fr;gap:.62rem 2rem}}

/* --- Leistungsabschnitte ------------------------------------------------ */
.leistung{padding-top:clamp(2.6rem,1.8rem + 2.4vw,4rem)}
.leistung > p{max-width:74ch}
.leistung:first-of-type{padding-top:0}
.leistung + .leistung{border-top:1px solid #CFB6A3;margin-top:clamp(2.6rem,1.8rem + 2.4vw,4rem)}
.band--kalk .leistung + .leistung{border-top-color:#EADCD1}
.leistung-kopf{display:grid;gap:1.2rem}
@media (min-width:900px){
  .leistung-kopf{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.8rem;align-items:start}
}
.leistung-bild{position:relative;aspect-ratio:16/10;border-radius:var(--rand);
  overflow:hidden;background:#D8CABF}
.leistung-bild picture{position:absolute;inset:0}
.leistung-bild img{width:100%;height:100%;object-fit:cover}

/* --- Merksatz / Fachangabe ---------------------------------------------- */
.merksatz{margin-top:1.6rem;padding:1.15rem 1.3rem;background:var(--ton-tief);
  border-radius:var(--rand);border-left:5px solid var(--ziegel)}
.band--tief .merksatz{background:var(--kalk)}
.band--kalk .merksatz{background:#F4E7DD}
.merksatz p{font-size:1rem;margin:0}
.masse{font-variant-numeric:tabular-nums;font-weight:700}

/* --- Der Dachaufbau (Zeichnung) ----------------------------------------- */
.aufbau{margin-top:clamp(2rem,1.4rem + 1.6vw,2.8rem)}
.riss{background:var(--kalk);border-radius:var(--rand);padding:clamp(.5rem,1.4vw,1.4rem)}
.band--kalk .riss{background:var(--ton)}
.riss svg{width:100%;height:auto;
  --z-innen:#CFC0B2;--z-bahn:#6F7B89;--z-daemm:#EFE3CD;--z-daemm-linie:#C9B291;
  --z-holz:#A97B4E;--z-latte:#D3A87A;--z-linie:#7E5A33;--z-luft:#E7E3DC;
  --z-ziegel:#BD301A;--z-ziegel-kante:#8A2113;--z-riss:#8A94A1}
.riss .z-nr circle{fill:#fff;stroke:#333B44;stroke-width:2}
.riss .z-nr text{font-family:"Gabarito",system-ui,sans-serif;font-weight:800;font-size:16px;fill:#333B44}
.riss .z-wort{font-family:"Gabarito",system-ui,sans-serif;font-weight:700;font-size:15px;
  fill:#464F5A;letter-spacing:.08em}
.riss svg.riss--breit{display:none;max-width:1020px;margin:0 auto}
.riss svg.riss--schmal{display:block;max-width:390px;margin:0 auto}
@media (min-width:760px){
  .riss svg.riss--breit{display:block}
  .riss svg.riss--schmal{display:none}
}

.schichten{list-style:none;margin:clamp(1.6rem,1.2rem + 1.2vw,2.4rem) 0 0;padding:0;
  display:grid;gap:0 3rem}
@media (min-width:820px){.schichten{grid-template-columns:1fr 1fr}}
.schichten li{display:grid;grid-template-columns:34px 1fr;gap:.85rem;
  padding:.72rem 0;border-bottom:1px solid #CFB6A3}
.band--kalk .schichten li{border-bottom-color:#EADCD1}

.schichten b{display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  border:2px solid var(--schiefer);border-radius:50%;background:var(--kalk);
  font-family:"Gabarito",system-ui,sans-serif;font-weight:800;font-size:.95rem}
.band--kalk .schichten b{background:var(--weiss)}
.schichten h4{margin:.15rem 0 .1rem}
.schichten p{font-size:.97rem;color:var(--grau);margin:0}

/* --- Ablauf (Sturmschaden) ---------------------------------------------- */
.schritte{list-style:none;margin:clamp(2rem,1.4rem + 1.6vw,2.8rem) 0 0;padding:0;
  display:grid;gap:1.1rem}
@media (min-width:900px){.schritte{grid-template-columns:repeat(4,1fr)}}
.schritte li{background:var(--kalk);border-radius:var(--rand);padding:1.3rem 1.3rem 1.4rem;
  border-top:5px solid var(--ziegel)}
.band--dunkel .schritte li{background:#262E36;border-top-color:var(--ziegel-hell)}
.schritte h3{font-size:1.14rem;margin:0 0 .45rem}
.schritte p{font-size:.99rem;color:var(--grau);margin:0}
.band--dunkel .schritte p{color:var(--grau-dunkelgrund)}
.schritt-nr{font-family:"Gabarito",system-ui,sans-serif;font-weight:800;font-size:.8rem;
  letter-spacing:.14em;color:var(--ziegel-text);display:block;margin-bottom:.5rem}
.band--dunkel .schritt-nr{color:var(--ziegel-hell)}

/* --- Stelle ------------------------------------------------------------- */
.stelle{background:var(--kalk);border-radius:var(--rand);padding:var(--innen);
  margin-top:clamp(2rem,1.4rem + 1.6vw,2.8rem)}
.band--kalk .stelle{background:var(--weiss)}
.stelle-kopf{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;
  padding-bottom:1.1rem;border-bottom:2px solid #E4D4C7;margin-bottom:1.5rem}
.stelle-kopf h3{font-size:clamp(1.4rem,1.1rem + 1vw,1.85rem);margin-right:auto}
.schild{display:inline-flex;align-items:center;gap:.45rem;padding:.34rem .7rem;
  background:var(--ton-tief);border-radius:var(--rand-klein);
  font-family:"Gabarito",system-ui,sans-serif;font-weight:700;font-size:.87rem}
.stelle-teil + .stelle-teil{margin-top:1.7rem}
.stelle-teil h4{margin-bottom:.35rem}
.stelle-teil p{max-width:74ch}

/* --- Kontakt und Formular ----------------------------------------------- */
.kontakt-gitter{display:grid;gap:2rem;margin-top:clamp(2rem,1.4rem + 1.6vw,2.8rem)}
@media (min-width:940px){.kontakt-gitter{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:3rem}}
.daten{list-style:none;margin:0;padding:0}
.daten li{padding:.85rem 0;border-bottom:1px solid #CFB6A3;display:grid;
  gap:.15rem;align-items:baseline}
@media (min-width:520px){.daten li{grid-template-columns:140px 1fr;gap:1rem}}
.band--kalk .daten li{border-bottom-color:#EADCD1}
.daten li:first-child{padding-top:0}
.daten .was{font-family:"Gabarito",system-ui,sans-serif;font-weight:700;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--grau)}
.daten .wert{font-size:1.06rem}
.daten a{text-decoration:none;font-weight:600}
.daten a:hover{text-decoration:underline}

.formular{background:var(--kalk);border-radius:var(--rand);padding:var(--innen)}
.band--kalk .formular{background:var(--ton)}
.feldreihe{display:grid;gap:0}
@media (min-width:620px){.feldreihe--zwei{grid-template-columns:1fr 1fr;gap:0 1.1rem}}
.eingabe{display:block;margin-bottom:1.05rem}
.eingabe > span{display:block;font-family:"Gabarito",system-ui,sans-serif;font-weight:700;
  font-size:.92rem;margin-bottom:.4rem}
.eingabe .pflicht{color:var(--ziegel-text)}
.eingabe--haken{display:flex;gap:.8rem;align-items:flex-start;min-height:44px;padding:.5rem 0}
.eingabe--haken input{width:26px;min-height:26px;height:26px;flex:0 0 26px;margin:.15rem 0 0;
  accent-color:var(--ziegel);cursor:pointer}
.eingabe--haken span{font-weight:400;font-size:.95rem;margin:0;line-height:1.45}
.eingabe input,.eingabe textarea,.eingabe select{
  width:100%;min-height:52px;padding:.75rem .9rem;background:var(--weiss);
  border:2px solid #D7C4B6;border-radius:var(--rand-klein);color:var(--schiefer);
  font-family:inherit;font-size:1rem;line-height:1.45}
.eingabe textarea{min-height:150px;resize:vertical}
.eingabe input:focus,.eingabe textarea:focus,.eingabe select:focus{border-color:var(--ziegel)}
.eingabe input:user-invalid,.eingabe textarea:user-invalid{border-color:var(--ziegel-text);background:#FDF2EF}
.hinweis-klein{font-size:.9rem;color:var(--grau);margin:.1rem 0 1.2rem}
.melder{display:none;margin-top:1.3rem;padding:1rem 1.15rem;background:var(--ton-tief);
  border-left:5px solid var(--ziegel);border-radius:var(--rand-klein);font-size:1rem}
.melder.sichtbar{display:block}
.band--kalk .melder{background:#F4E7DD}

.pruefhinweis{margin:0 0 1.8rem;padding:.9rem 1.1rem;background:var(--ton-tief);
  border-left:5px solid var(--ziegel);border-radius:var(--rand-klein);
  font-size:.98rem;color:var(--schiefer)}
.band--kalk .pruefhinweis{background:#F4E7DD}

/* --- Rechtstexte -------------------------------------------------------- */
.recht h2{margin-top:2.4rem;font-size:clamp(1.35rem,1.15rem + .8vw,1.7rem)}
.recht h2:first-of-type{margin-top:1.8rem}
.recht h3{margin-top:1.6rem;font-size:1.12rem}
.recht p,.recht li{max-width:74ch}
.recht ul{padding-left:1.15rem}
.recht li{margin-bottom:.4rem}

/* --- Fußzeile ----------------------------------------------------------- */
.fuss{background:var(--schiefer-nacht);color:var(--kalk);padding:var(--luft) var(--innen) 2.4rem}
.fuss-gitter{max-width:var(--spalte);margin:0 auto;display:grid;gap:2.2rem}
@media (min-width:820px){.fuss-gitter{grid-template-columns:auto 1fr 1fr;gap:3rem}}
.fuss h4{font-family:"Gabarito",system-ui,sans-serif;font-size:.82rem;text-transform:uppercase;
  letter-spacing:.14em;color:#A9B2BD;margin:0 0 .9rem;font-weight:700}
.fuss a{color:var(--kalk);text-decoration:none}
.fuss a:hover{color:var(--ziegel-hell);text-decoration:underline}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin-bottom:.55rem;line-height:1.5}
.fuss .marke{background:var(--weiss);align-self:start}
.fuss-schluss{max-width:var(--spalte);margin:2.6rem auto 0;padding-top:1.4rem;
  border-top:1px solid #333D48;display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;
  font-size:.93rem;color:#A9B2BD}
.fuss-schluss a{color:#A9B2BD}

.sprung{position:absolute;left:-9999px;top:0;background:var(--ziegel);color:#fff;
  padding:.8rem 1.2rem;border-radius:0 0 var(--rand-klein) 0;z-index:100;font-weight:700;
  text-decoration:none}
.sprung:focus{left:0}

/* --- Nachtrag 15.09.2026: neues Logo, Referenzen, Gold auf dunklem Grund --- */
.band--dunkel .knopf--voll{background:var(--ziegel-hell);color:#1A2027}
.band--dunkel .knopf--voll:hover{background:#F6BE5E}
.band--dunkel a:focus-visible,.band--dunkel button:focus-visible,.fuss a:focus-visible,
.gross button:focus-visible{outline-color:var(--ziegel-hell)}

@media (min-width:641px){.titelbild--betrieb{aspect-ratio:2/1}}
.titelbild--betrieb img{object-position:50% 32%}

.leistung-bild--hoch{aspect-ratio:4/5;width:100%;max-width:480px;justify-self:center}

/* Startseite: Anriss der Referenzen */
.anriss{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;
  margin-top:clamp(1.8rem,1.3rem + 1.4vw,2.6rem)}
@media (min-width:820px){.anriss{grid-template-columns:repeat(4,1fr);gap:1.1rem}}
.anriss-bild{display:block;text-decoration:none;color:var(--schiefer);background:var(--weiss);
  border-radius:var(--rand);overflow:hidden;border:2px solid transparent;
  transition:border-color .16s ease,transform .16s ease}
.anriss-bild:hover{border-color:var(--ziegel);transform:translateY(-3px)}
.anriss-bild .rahmen{position:relative;display:block;aspect-ratio:3/4;background:#D8CABF;overflow:hidden}
.anriss-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.anriss-bild .wort{display:flex;align-items:center;gap:.55rem;min-height:48px;padding:.55rem .9rem;
  font-family:"Gabarito",system-ui,sans-serif;font-weight:700;font-size:1rem;line-height:1.25}
.anriss-bild .wort::before{content:"";width:10px;height:13px;flex:0 0 10px;background:var(--ziegel);
  border-radius:5px 5px 2px 2px}

/* Referenzen */
.ref-kopf{max-width:760px}
.ref-kopf h2{margin-bottom:1rem}
.ref-reihe{display:grid;gap:1.25rem;margin-top:clamp(1.8rem,1.3rem + 1.4vw,2.6rem)}
@media (min-width:700px){.ref-reihe--2,.ref-reihe--3,.ref-reihe--text{grid-template-columns:1fr 1fr}
  .ref-reihe--text > .ref-text{grid-column:1 / -1}}
@media (min-width:980px){.ref-reihe--3,.ref-reihe--text{grid-template-columns:repeat(3,1fr)}
  .ref-reihe--text > .ref-text{grid-column:auto}
  .ref-reihe--seite{grid-template-columns:2fr 1fr;align-items:start}}
.ref-reihe--text,.ref-reihe--seite{margin-top:0}
.ref-text h2{margin-bottom:1rem}
.ref{margin:0;display:flex;flex-direction:column;background:var(--kalk);border-radius:var(--rand);overflow:hidden}
.band--kalk .ref{background:var(--weiss)}
.band--tief .ref{background:var(--kalk)}
.ref-bild{position:relative;display:block;aspect-ratio:3/4;background:#D8CABF;overflow:hidden}
.ref-bild--quer{aspect-ratio:4/3}
.ref-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
a.ref-bild:hover img{transform:scale(1.03)}
.ref-lupe{position:absolute;right:.7rem;bottom:.7rem;width:44px;height:44px;border-radius:50%;
  background:rgba(26,32,39,.74);display:flex;align-items:center;justify-content:center}
.ref-lupe svg{width:21px;height:21px;fill:#fff}
.ref figcaption{padding:1.05rem 1.2rem 1.25rem;font-size:.98rem;line-height:1.55;color:var(--grau)}
.ref figcaption strong{display:block;margin-bottom:.3rem;font-family:"Gabarito",system-ui,sans-serif;
  font-size:1.1rem;font-weight:700;color:var(--schiefer)}
.mehr{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;margin-top:.4rem;
  font-family:"Gabarito",system-ui,sans-serif;font-weight:700;font-size:1rem;color:var(--ziegel-text);
  text-decoration:none}
.mehr:hover{text-decoration:underline}
.mehr svg{width:15px;height:15px;fill:currentColor}

/* Foto groß ansehen */
.gross{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;overflow:visible}
.gross::backdrop{background:rgba(12,15,19,.9)}
.gross-rahmen{display:flex;flex-direction:column;align-items:center;gap:.8rem;padding:1rem}
.gross img{display:block;max-width:min(94vw,1100px);max-height:80vh;width:auto;height:auto;
  border-radius:var(--rand-klein);background:#222}
.gross p{margin:0;max-width:70ch;padding:0 .5rem;color:#E9EDF1;font-size:.98rem;text-align:center}
.gross-zu{position:fixed;top:12px;right:12px;width:48px;height:48px;border:0;border-radius:50%;
  background:#fff;color:#1A2027;cursor:pointer;display:flex;align-items:center;justify-content:center}
.gross-zu svg{width:22px;height:22px;fill:currentColor}
html:has(dialog.gross[open]){overflow:hidden}

/* --- Nachtrag 15.09.2026 (2): Holzrahmenbau mit zwei Objekten --- */
.ref-objekt{margin-top:clamp(2.2rem,1.6rem + 1.8vw,3.2rem)}
.ref-objekt + .ref-objekt{padding-top:clamp(2.2rem,1.6rem + 1.8vw,3.2rem);border-top:1px solid #EADCD1}
.ref-objekt h3{margin-bottom:.5rem}
.ref-objekt > p,.ref-objekt .ref-text p{max-width:66ch;color:var(--grau)}
.ref-objekt > .ref-reihe{margin-top:clamp(1.4rem,1.1rem + 1vw,2rem)}
@media (min-width:700px){.ref-reihe--4{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.ref-reihe--4{grid-template-columns:repeat(4,1fr)}}
.ref-reihe--bild{margin-top:0}
@media (min-width:980px){.ref-reihe--bild{grid-template-columns:1fr 2fr;align-items:start}}
.ref-bild--breit{aspect-ratio:16/9}

/* --- Nachtrag 15.09.2026 (3): Holzrahmenbau als Leistung --- */
.leistung-bild--breit{aspect-ratio:16/9}

/* --- Nachtrag 16.09.2026: schmale Bereiche an der linken Inhaltskante, Stellenanzeigen --- */
.mitte.schmal{max-width:var(--spalte)}
.mitte.schmal > *{max-width:760px}

.stelle + .stelle{margin-top:1.3rem}
.stelle-kurz{max-width:70ch;margin:0 0 1.5rem}
.stelle-gitter{display:grid;gap:1.6rem 2.6rem}
@media (min-width:900px){.stelle-gitter{grid-template-columns:repeat(3,minmax(0,1fr))}}
.stelle-gitter .stelle-teil + .stelle-teil{margin-top:0}
.stelle-gitter .liste{margin-top:.75rem}
.bewerbung{max-width:760px;margin-top:clamp(2.2rem,1.6rem + 1.8vw,3.2rem)}
.bewerbung h3{margin-bottom:.6rem}
@media (max-width:599px){.stelle-kopf h3{flex-basis:100%}}

/* --- Nachtrag 09.10.2026: Tippflächen und lange Wörter --- */
@media (max-width:860px){
  .fuss-gitter ul a{display:flex;align-items:center;min-height:44px}
  .fuss-gitter ul li{margin-bottom:0}
  .fuss-schluss a{display:inline-flex;align-items:center;min-height:44px}
  .daten .wert a{display:inline-flex;align-items:center;min-height:44px}
}
@media (max-width:640px){h1,h2,h3{overflow-wrap:break-word;hyphens:auto}}
@media (max-width:420px){h1{font-size:2rem}}

/* Sprungziele nicht unter die klebende Kopfzeile schieben */
[id]{scroll-margin-top:clamp(5.5rem,5rem + 2vw,7rem)}

/* --- Nachtrag 17.10.2026: Kontaktformular scharf --- */
/* Honigtopf gegen Spam-Skripte: für Menschen unsichtbar, für Programme sichtbar. */
.honigtopf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Seiten, die anfrage.php selbst ausgibt (Hinweis, Fehler): Logo einzeln, schmale Fußzeile. */
.marke--allein{display:inline-flex;margin-bottom:clamp(1.6rem,1.2rem + 1.4vw,2.4rem)}
.fuss--schmal{padding-top:1.6rem;padding-bottom:1.6rem}
.fuss--schmal .fuss-schluss{margin-top:0;border-top:0;padding-top:0}
.schmalseite{display:flex;flex-direction:column;min-height:100vh}
.schmalseite main{flex:1 0 auto}