/* Griese Kaminbau, Halle (Saale) – Demo nach Referenz somervilles.co.uk,
   Formensprache 1:1 aus der Schwester-Demo naturstein-halbach-demo.
   Farb-DNA: Creme + warmes Dunkelbraun-Schwarz + Bordeaux #7a0f12 aus dem Griese-Logo.
   Schrift: Hanken Grotesk, nur 400 und 500. */

@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(assets/fonts/hanken-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}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(assets/fonts/hanken-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --cream:#FBF8F2;      /* Grundfläche, Textfarbe auf Dunkel */
  --cream2:#EFE7DB;     /* zweite Cremestufe: Formular-Panel, Bildgrund */
  --dark:#241F1E;       /* dunkle Inseln, Footer, Buttons (Griese-Ink veredelt) */
  --dark2:#3B3331;      /* Kante auf Dunkel */
  --grey:#4A4241;       /* Fließtext auf Creme */
  --grey4:#6B6260;      /* Meta auf Creme */
  --grey3:#ADA5A3;      /* Meta auf Dunkel */
  --grey2:#D9D3D1;      /* Fließtext auf Dunkel */
  --bord:#7a0f12;       /* einzige Buntfarbe: Pillen, Plus, Unterstriche */
  --bord-hell:#96181c;
  --white:#fff;
  --akzent:var(--bord);
  --r-sm:10px; --r-lg:20px;
  --pad:56px;
  --side:23px;
}
@media (min-width:768px){:root{--pad:80px;--side:40px}}
@media (min-width:1024px){:root{--pad:100px}}
@media (min-width:1280px){:root{--side:65px}}
@media (min-width:1400px){:root{--pad:120px}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--grey);font-family:"Hanken Grotesk",Helvetica,Arial,sans-serif;font-size:18px;line-height:1.6;overflow-x:clip;font-weight:400}
@media (min-width:1024px){body{font-size:19px}}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:500;color:var(--dark);text-wrap:balance;overflow-wrap:normal}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
strong{font-weight:500;color:var(--dark)}
ul{margin:0;padding:0;list-style:none}

/* Typo-Spreizung wie Referenz: H1 34→78px, H2 26→54px, H3 23→28px */
h1,.h1{font-size:clamp(2.15rem,.95rem + 3.5vw,4.875rem);line-height:1.07;letter-spacing:-.022em}
h2,.h2{font-size:clamp(1.4rem,.9rem + 2vw,3.375rem);line-height:1.1;letter-spacing:-.015em}
h3,.h3{font-size:clamp(1.35rem,1.15rem + .6vw,1.75rem);line-height:1.22;letter-spacing:-.01em}
.lead{font-size:1.06em}
.sub{font-size:.97em;color:var(--grey4)}
.bg-dark .sub{color:var(--grey3)}

/* Insel-Layout: die ganze Seite steht im Creme, Sections mit gerundeten Ecken */
.insel{margin:0 auto;max-width:100%}
@media (min-width:768px){.insel{max-width:calc(100% - 80px)}}
@media (min-width:1400px){.insel{max-width:calc(100% - 200px)}}
.wrap{width:min(100% - var(--side) * 2,1620px);margin-inline:auto}
.sec{padding-top:var(--pad);padding-bottom:var(--pad)}
.bg-cream{background:var(--cream);color:var(--grey)}
.bg-dark{background:var(--dark);color:var(--grey2)}
.bg-dark h1,.bg-dark h2,.bg-dark h3,.bg-dark strong{color:var(--cream)}
.bg-dark a{color:var(--cream)}
.r-top{border-top-left-radius:var(--r-sm);border-top-right-radius:var(--r-sm)}
.r-bot{border-bottom-left-radius:var(--r-sm);border-bottom-right-radius:var(--r-sm)}
@media (min-width:768px){.r-top{border-top-left-radius:var(--r-lg);border-top-right-radius:var(--r-lg)}.r-bot{border-bottom-left-radius:var(--r-lg);border-bottom-right-radius:var(--r-lg)}}
/* zwei gleichfarbige Sections hintereinander werden EIN Block (Referenz-Regel) */
.bg-cream + .bg-cream{border-top-left-radius:0;border-top-right-radius:0;padding-top:0}
.bg-dark:not(.banner) + .bg-dark{border-top-left-radius:0;border-top-right-radius:0;padding-top:0}

/* Buttons: immer Pille, immer mit Pfeil */
.btn{display:inline-flex;align-items:center;gap:12px;border-radius:50px;padding:0 26px;min-height:58px;font-weight:500;font-size:1rem;line-height:1.2;text-decoration:none;border:0;cursor:pointer;transition:background .2s ease-in-out,color .2s ease-in-out;white-space:nowrap}
.btn svg{flex:0 0 auto;width:18px;height:18px;color:currentColor;transition:transform .3s ease}
.btn:hover svg{transform:translateX(4px)}
.btn--dark,.bg-cream .btn--dark{background:var(--dark);color:var(--cream)}
.btn--dark:hover{background:#100d0d}
.btn--light,.bg-dark .btn--light{background:var(--cream);color:var(--dark)}
.btn--light svg{color:var(--bord)}
.btn--light:hover{background:var(--white)}
.btn--akz{background:var(--bord);color:var(--cream)}
.btn--akz:hover{background:var(--bord-hell)}
.btn--glas{background:rgba(28,23,22,.68);color:var(--cream);border:1px solid rgba(251,248,242,.34)}
.btn--glas:hover{background:var(--cream);color:var(--dark)}
.btn--glas:hover svg{color:var(--bord)}

/* Umgekehrter Unterstrich: Strich ist da, zieht sich beim Hover weg */
.ul{position:relative;text-decoration:none;display:inline-block;padding:9px 0;margin:-9px 0}
.ul::before{content:"";position:absolute;left:0;right:0;bottom:7px;height:1px;background:currentColor;transform:scaleX(1);transform-origin:left;transition:transform .3s ease}
.ul:hover::before{transform:scaleX(0);transform-origin:right}
.ul--akz::before{height:2px;background:var(--bord)}
.bg-dark .ul--akz::before,.banner .ul--akz::before,.fuss .ul--akz::before{background:var(--cream)}

/* ---------- Header: absolut über dem Hero, nicht sticky ---------- */
.kopf{position:absolute;top:0;left:50%;transform:translateX(-50%);width:100%;z-index:99;padding:12px 0}
@media (min-width:768px){.kopf{padding:15px 0;width:calc(100% - 80px)}}
@media (min-width:1400px){.kopf{width:calc(100% - 200px)}}
.kopf__zeile{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 15px}
@media (min-width:1024px){.kopf__zeile{padding:0 30px}}
.kopf a{color:var(--cream);text-decoration:none}
.kopf__links,.kopf__rechts{display:flex;align-items:center;gap:6px}
.kopf__rechts{justify-content:flex-end}
.kopf__nav{display:none;gap:4px;align-items:center}
@media (min-width:1024px){.kopf__nav{display:flex}}
.kopf__nav a{padding:0 12px;min-height:46px;display:inline-flex;align-items:center;font-weight:500;font-size:1rem;position:relative}
.kopf__nav a::before{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:1px;background:var(--cream);transform:scaleX(0);transform-origin:right;transition:transform .3s ease}
.kopf__nav a:hover::before{transform:scaleX(1);transform-origin:left}
.burger{width:48px;height:48px;display:grid;place-items:center;background:none;border:0;cursor:pointer;color:var(--cream);padding:0}
.burger span{display:block;width:24px;height:2px;background:currentColor;box-shadow:0 -7px 0 currentColor,0 7px 0 currentColor}
.logo img{height:30px;width:auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,.9)) drop-shadow(0 2px 12px rgba(0,0,0,.75))}
@media (min-width:768px){.logo img{height:40px}}
@media (min-width:1280px){.logo img{height:46px}}
.kopf__tel{width:48px;height:48px;display:grid;place-items:center;border-radius:50%}
.kopf__tel svg{width:22px;height:22px}
.kopf__cta{display:none}
/* Rechtsseiten ohne Hero: Header als dunkles Band, Links Creme auf Dunkel */
.kopf--band{position:relative;left:0;transform:none;width:100%;background:var(--dark)}
.kopf--band + .fly + main .banner--split{border-top-left-radius:0;border-top-right-radius:0}
.kopf--band .kopf__zeile{width:min(100%,1620px);margin:0 auto}
@media (min-width:768px){.kopf--band .kopf__zeile{padding:0 40px}}
@media (min-width:1400px){.kopf--band .kopf__zeile{padding:0 100px}}
@media (min-width:1024px){.kopf__cta{display:inline-flex;margin-left:10px}}

/* ---------- Hero / Banner ---------- */
.banner{position:relative;overflow:hidden;background:var(--dark);color:var(--cream);isolation:isolate}
.banner--gross{height:95svh;min-height:560px}
@media (min-width:768px){.banner--gross{height:80svh;max-height:730px}}
@media (min-width:1680px){.banner--gross{max-height:1080px}}
.banner--klein{height:64svh;min-height:440px;max-height:620px}
.banner__bild{position:absolute;inset:0;z-index:0}
.banner__bild img{width:100%;height:100%;object-fit:cover;filter:brightness(1.1) saturate(1.04)}
.banner::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.45) 0,rgba(0,0,0,.2) 12%,rgba(0,0,0,0) 26%),linear-gradient(0deg,rgba(0,0,0,.45) 0,rgba(0,0,0,.44) 34%,rgba(0,0,0,.3) 56%,rgba(0,0,0,0) 80%),radial-gradient(ellipse 62% 72% at 22% 70%,rgba(0,0,0,.32),rgba(0,0,0,0) 72%)}
@media (max-width:767px){.banner::before{background:linear-gradient(180deg,rgba(0,0,0,.45) 0,rgba(0,0,0,.28) 8%,rgba(0,0,0,0) 20%),linear-gradient(0deg,rgba(0,0,0,.45) 0,rgba(0,0,0,.45) 52%,rgba(0,0,0,.2) 68%,rgba(0,0,0,0) 80%)}}
.banner__inhalt{position:absolute;left:50%;transform:translateX(-50%);bottom:30px;z-index:3;width:min(100% - var(--side) * 2,1620px)}
@media (min-width:768px){.banner__inhalt{bottom:40px}}
@media (min-width:1024px){.banner__inhalt{bottom:50px}}
.banner h1{color:var(--cream);max-width:20ch;margin-bottom:12px;text-shadow:0 1px 3px rgba(0,0,0,.5),0 3px 22px rgba(0,0,0,.55)}
@media (min-width:768px){.banner h1{margin-bottom:22px}}
.banner hr{border:0;height:1px;background:var(--cream);opacity:.25;margin:0 0 16px;max-width:820px}
.banner__sub{max-width:62ch;font-size:1.03em;margin:0;text-shadow:0 1px 3px rgba(0,0,0,.55),0 2px 12px rgba(0,0,0,.5)}
.banner__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:22px}
.banner__trust{display:flex;align-items:flex-start;flex-wrap:wrap;gap:6px 10px;font-size:.98em;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.banner__trust .sterne{display:inline-flex;gap:2px;color:#FFC742;margin-top:5px}
.banner__trust .sterne svg{width:17px;height:17px}
.banner__trust b{font-weight:500}
.banner__trust a{color:var(--cream)}

/* Split-Banner: Hochkant-Foto neben dem Titel (Abweichung, weil für zwei Seiten
   nur Hochformat-Material existiert und ein Querschnitt das Motiv zerschneiden würde) */
.banner--split{display:block;height:auto;min-height:0;max-height:none;background:var(--dark)}
.banner--split::before{display:none}
.split{display:grid;gap:0;align-items:stretch}
@media (min-width:1024px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.split__text{padding:34px var(--side) var(--pad);width:min(100%,860px);margin-left:auto}
@media (min-width:1024px){.split__text{padding:var(--pad) 60px var(--pad) max(var(--side),calc((100vw - 1620px) / 2));display:flex;flex-direction:column;justify-content:center}}
.split__text h1{color:var(--cream);margin-bottom:20px;text-shadow:none}
.split__text hr{border:0;height:1px;background:var(--cream);opacity:.25;margin:0 0 16px;max-width:820px}
.split__text p{max-width:52ch;color:var(--grey2);margin:0}
.split__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:26px}
.split__bild{position:relative;min-height:340px}
.split__bild img{width:100%;height:100%;object-fit:cover;filter:brightness(1.08) saturate(1.04)}
@media (min-width:1024px){.split__bild{min-height:640px}}

.krumen{display:flex;gap:10px;align-items:center;font-size:.95em;padding:22px 0 0;color:var(--grey4)}
.krumen a{color:var(--dark);text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:46px}
.krumen svg{width:18px;height:18px}

/* ---------- Leistungen (Karten) ---------- */
.leist__kopf{max-width:22ch;margin-bottom:40px}
@media (min-width:1024px){.leist__kopf{margin-bottom:60px}}
.karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
@media (max-width:1023px){
  .karten{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:18px;padding-bottom:6px;
    margin-inline:calc(var(--side) * -1);padding-inline:var(--side);scroll-padding-inline:var(--side);scrollbar-width:none}
  .karten::-webkit-scrollbar{display:none}
  .karten > *{flex:0 0 min(82vw,420px);scroll-snap-align:start}
}
.karte{display:block;text-decoration:none;color:inherit}
.karte__bild{display:block;position:relative;border-radius:var(--r-sm);overflow:hidden;margin-bottom:20px;aspect-ratio:4/5;transition:.4s;background:var(--cream2)}
@media (min-width:768px){.karte__bild{border-radius:15px;margin-bottom:24px}}
.karte__bild img{width:100%;height:100%;object-fit:cover;transition:transform .4s;filter:brightness(1.05) saturate(1.04)}
.karte__bild .plus{position:absolute;right:15px;bottom:15px;width:40px;height:40px}
@media (min-width:1024px){.karte__bild .plus{width:48px;height:48px}}
.plus circle{fill:var(--white);transition:all .4s}
.plus path{stroke:var(--bord);stroke-width:2;fill:none;transition:all .4s}
.karte:hover .karte__bild{border-bottom-right-radius:35px}
.karte:hover .karte__bild img{transform:scale(1.1)}
.karte:hover .plus circle{fill:var(--bord)}
.karte:hover .plus path{stroke:var(--white)}
.karte h3{margin-bottom:10px}
.karte p{margin:0;font-size:.98em}
.bg-dark .karte p{color:var(--grey2)}

/* ---------- USP-Block (dunkel) ---------- */
.usp__kopf{max-width:60ch;margin-bottom:50px}
.usp__kopf h2{max-width:20ch;margin-bottom:22px}
.usp__kopf p{margin-bottom:28px;max-width:56ch}
@media (min-width:1024px){.usp__kopf{margin-bottom:70px}}

/* ---------- Text-Block (Creme, 2 Spalten) ---------- */
.textblock{display:grid;gap:34px}
@media (min-width:1024px){.textblock{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:60px}}
@media (min-width:1400px){.textblock{gap:120px}}
.textblock h2{max-width:14ch}
.textblock .btn{margin-top:14px}

/* ---------- Projekte (dunkel) ---------- */
.proj{display:grid;gap:40px}
@media (min-width:640px){.proj{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 30px}}
@media (min-width:1024px){.proj{grid-template-columns:repeat(3,minmax(0,1fr))}}
.proj__raster{display:contents}
.proj__titel h2{max-width:14ch;margin-bottom:20px}
.proj__titel p{max-width:36ch;margin-bottom:30px}
.proj__titel{padding-right:20px}
.proj__raster .karte__bild{aspect-ratio:4/5}
.proj .karte h3{color:var(--cream);font-size:clamp(1.2rem,1.05rem + .5vw,1.5rem);margin-bottom:12px}
.meta{display:flex;flex-wrap:wrap;gap:0 14px;font-size:.95em;color:var(--grey3)}
.bg-cream .meta{color:var(--grey4)}
.meta li{display:flex;align-items:center;gap:14px}
.meta li + li::before{content:"";width:1px;height:14px;background:currentColor;display:inline-block;opacity:.6}
.meta b{font-weight:500;color:var(--cream)}
.bg-cream .meta b{color:var(--dark)}

/* ---------- Vollbild-Medienblock ---------- */
.medien{position:relative;overflow:hidden;color:var(--cream);isolation:isolate;min-height:520px;height:72svh;max-height:800px;display:flex;align-items:flex-end;margin-top:var(--pad)}
.medien .banner__bild img{filter:brightness(1.06) saturate(1.04)}
.medien::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(0,0,0,.58) 0,rgba(0,0,0,.2) 42%,rgba(0,0,0,0) 70%)}
.medien__inhalt{position:relative;z-index:2;padding:0 0 40px;width:min(100% - var(--side) * 2,1620px);margin-inline:auto}
@media (min-width:1024px){.medien__inhalt{padding-bottom:60px}}
.medien h2{color:var(--cream);max-width:18ch;margin-bottom:26px;text-shadow:0 2px 14px rgba(0,0,0,.35)}

/* ---------- Text-Media (Bild links, Text rechts) ---------- */
.tm{display:grid;gap:34px;align-items:center}
@media (min-width:1024px){.tm{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:70px}}
@media (min-width:1400px){.tm{gap:115px}}
.tm__bild{border-radius:var(--r-sm);overflow:hidden;background:var(--cream2)}
@media (min-width:768px){.tm__bild{border-radius:15px}}
.tm__bild img{width:100%;height:auto}
.tm h2{max-width:16ch;margin-bottom:22px}
.tm .btn{margin-top:22px}
.tm--rechts .tm__bild{order:2}

/* ---------- Bewertungen (Baustein) ---------- */
.bew__kopf{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin-bottom:34px}
.bew__kopf h2{max-width:18ch}
.bew__wert{display:flex;flex-direction:column;gap:6px}
.bew__label{font-size:.95em;color:var(--grey4)}
.bew__sterne{display:flex;gap:3px;color:#B87A00}
.bew__sterne svg{width:22px;height:22px}
.bew__zahl{font-size:1.05em}
.bew__zahl a{color:var(--dark)}
.rvs{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;padding-bottom:8px;scrollbar-width:thin}
.rv{flex:0 0 min(340px,82vw);scroll-snap-align:start;background:#fff;border-radius:12px;
  padding:18px 18px 20px;box-shadow:0 1px 2px rgba(0,0,0,.12);display:flex;flex-direction:column}
.rv__kopf{display:flex;align-items:center;gap:10px}
.rv__ini{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:#e8eaed;color:#3c4043;font-weight:600}
.rv__meta{display:flex;flex-direction:column;line-height:1.25;flex:1 1 auto}
.rv__name{font-size:16px;color:#202124}
.rv__zeit{font-size:16px;color:#5f6368}
.rv__sterne{display:flex;gap:2px;color:#B87A00;margin:10px 0 8px;flex:0 0 auto}
.rv__sterne svg{width:18px;height:18px;flex:0 0 auto}
.rv__text{margin:0;color:#3c4043;font-size:16px;line-height:1.55;flex:1}
.rv__quelle{display:inline-block;align-self:flex-start;margin-top:12px;font-size:15.5px;color:#5f6368;border:1px solid #dadce0;border-radius:6px;padding:3px 8px}
.rvs-hinweis{font-size:15.5px;color:var(--grey4);margin:10px 0 0}
@media (min-width:1024px){.rvs-hinweis{display:none}}

/* ---------- Kontakt-Panel (zweite Cremestufe) ---------- */
.kontakt{display:grid;gap:40px}
@media (min-width:1024px){.kontakt{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:70px}}
.kontakt h2{max-width:14ch;margin-bottom:22px}
.kontakt__zeilen{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px 30px;margin-top:30px}
.kontakt__zeilen h3{font-size:1.1rem;margin-bottom:6px}
.kontakt__zeilen a{color:var(--dark)}
.panel{background:var(--cream2);border-radius:var(--r-lg);padding:28px 22px}
@media (min-width:768px){.panel{padding:46px 44px}}
.panel h3{margin-bottom:22px}
.feld{display:grid;gap:8px;margin-bottom:18px}
.feld label{font-weight:500;font-size:.95em;color:var(--dark)}
.feld input,.feld textarea,.feld select{width:100%;border:1px solid #bcb2a6;border-radius:8px;background:var(--white);color:var(--dark);font:inherit;font-size:1em;padding:14px 16px;min-height:56px}
.feld textarea{min-height:150px;resize:vertical}
.feld input:focus,.feld textarea:focus,.feld select:focus{outline:2px solid var(--bord);outline-offset:1px}
.zwei{display:grid;gap:0 20px}
@media (min-width:640px){.zwei{grid-template-columns:1fr 1fr}}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0;overflow:hidden}
.form__hinweis{font-size:.95em;color:var(--grey);margin:6px 0 22px}
.anfrage [hidden]{display:none!important}
.form__ok{display:block;padding:18px 20px;border-radius:12px;background:var(--white);color:var(--dark);margin-top:18px}
.form__fehler{margin:14px 0 0;padding:12px 16px;border-radius:10px;background:#fbe9e9;color:#7a1d1d;font-size:.95em}

/* ---------- Faktenzeile (redaktionell, keine Kacheln) ---------- */
.fakten{display:grid;gap:0;border-top:1px solid rgba(0,0,0,.14)}
.fakten li{display:flex;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid rgba(0,0,0,.14)}
.fakten b{font-weight:500;color:var(--dark);flex:0 0 auto;min-width:9ch}
@media (min-width:900px){.fakten{grid-template-columns:1fr 1fr;column-gap:60px}}
.bg-dark .fakten{border-color:rgba(255,255,255,.18)}
.bg-dark .fakten li{border-color:rgba(255,255,255,.18)}
.bg-dark .fakten b{color:var(--cream)}

/* Zeitleiste / Ablauf */
.zeit{display:grid;gap:0}
.zeit li{display:grid;grid-template-columns:1fr;gap:4px;padding:16px 0;border-bottom:1px solid rgba(0,0,0,.14)}
@media (min-width:768px){.zeit li{grid-template-columns:14ch 1fr;gap:24px;align-items:baseline}}
.zeit b{font-weight:500;color:var(--dark)}
.bg-dark .zeit b{color:var(--cream)}
.bg-dark .zeit li{border-color:rgba(255,255,255,.18)}
.bg-dark .zeit li:first-child{border-top-color:rgba(255,255,255,.18)}
.zeit li:first-child{border-top:1px solid rgba(0,0,0,.14)}

/* Prosa-Spalten Unterseiten */
.prosa{max-width:70ch}
.prosa h2{margin-bottom:20px}
.prosa h3{margin:32px 0 10px}
.prosa ul{padding-left:1.2em;list-style:disc}
.prosa li{margin-bottom:.4em}
.prosa .fakten,.prosa .zeit{padding-left:0;list-style:none}
.prosa .fakten li,.prosa .zeit li{margin-bottom:0}
.intro{padding-top:40px}
@media (min-width:1024px){.intro{padding-top:70px}}
.intro h1,.intro .h1{margin-bottom:22px}

/* Team */
.team{display:grid;gap:40px 30px}
@media (min-width:640px){.team{grid-template-columns:repeat(3,minmax(0,1fr))}}
.team .karte__bild{aspect-ratio:4/5}
.team h3{margin-bottom:6px}
.team .sub{margin-bottom:10px;display:block}

/* ---------- Footer ---------- */
.fuss{position:relative;overflow:hidden;padding:var(--pad) 0 40px;color:var(--grey2)}
.fuss h2{color:var(--cream);margin-bottom:40px;max-width:24ch}
.fuss h2 a{color:var(--cream)}
.fuss__nav{display:flex;flex-wrap:wrap;gap:14px 30px;margin-bottom:70px}
@media (max-width:767px){.fuss__nav{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px}}
.fuss__nav a{color:var(--grey2);text-decoration:none;padding:0;min-height:46px;display:inline-flex;align-items:center}
.fuss__unten{display:grid;gap:30px;align-items:end;position:relative;z-index:1}
@media (min-width:1024px){.fuss__unten{grid-template-columns:1fr auto}}
.fuss__klein{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;font-size:.95em;color:#bbb4b2}
.fuss__klein a{color:#bbb4b2}
.fuss__klein .trenn{opacity:.6}
.fuss__adresse{font-size:.97em;line-height:1.55;color:var(--grey2);font-style:normal}
.fuss__adresse a{display:inline-block;padding:8px 0;margin:-8px 0}
.prosa a:not(.btn),.kontakt__zeilen a:not(.btn){display:inline-block;padding:9px 0;margin:-9px 0}
.fuss__adresse b{color:var(--cream);font-weight:500}
.fuss__logo{height:30px;width:auto;margin-bottom:16px}
.fuss__wasser{position:absolute;left:0;right:0;bottom:-.14em;z-index:0;pointer-events:none;font-size:clamp(90px,17vw,300px);line-height:1;font-weight:500;letter-spacing:-.03em;color:rgba(255,255,255,.035);white-space:nowrap;padding-left:2vw;user-select:none}
.striv{display:inline-block;padding:11px 0;line-height:24px;color:#bbb4b2;text-decoration:none}
.striv b{color:#e6e6e6;font-weight:500}
.striv i{font-style:normal;color:#3B72E0}

/* ---------- Sticky-Pille Desktop (Referenz: Talk to us) ---------- */
.pille{position:fixed;left:50%;bottom:-100px;transform:translateX(-50%);z-index:60;display:none;align-items:center;gap:12px;padding:8px 22px 8px 8px;border-radius:50px;background:var(--dark);color:var(--cream);text-decoration:none;font-weight:500;box-shadow:0 14px 40px -14px rgba(0,0,0,.6);transition:bottom .4s ease}
.pille.is-an{bottom:30px}
.pille__ico{width:44px;height:44px;border-radius:50%;background:var(--bord);display:grid;place-items:center;color:var(--cream)}
.pille__ico svg{width:20px;height:20px}
.pille > svg{width:16px;height:16px;color:var(--cream)}
@media (min-width:1020px){.pille{display:flex}}

/* ---------- Sticky-Kapsel mobil (Baustein, wortwörtlich) ---------- */
.stky{position:fixed;left:14px;right:14px;bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:60;display:flex;align-items:center;gap:8px;padding:7px;border-radius:999px;
  background:rgba(28,23,22,.58);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 16px 34px -18px rgba(0,0,0,.78);
  transform:translateY(150%);transition:transform .34s cubic-bezier(.22,.61,.36,1)}
.stky.is-an{transform:none}
.stky__tel{flex:0 0 auto;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  color:#fff;border:1px solid rgba(255,255,255,.34);background:transparent}
.stky__cta{flex:1 1 auto;min-height:48px;border-radius:999px;display:flex;align-items:center;
  justify-content:center;gap:8px;padding:0 16px;background:var(--bord);color:#fff;
  font-weight:600;font-size:15.5px;white-space:nowrap;text-decoration:none}
@media (min-width:1020px){.stky{display:none}}
@media (max-width:1019px){.seite-fuss{padding-bottom:100px}}

/* ---------- Flyout-Navigation 55/45 ---------- */
.fly{position:fixed;inset:0;z-index:200;display:grid;grid-template-columns:1fr;background:var(--cream);color:var(--dark);opacity:0;visibility:hidden;transform:translateY(-4%);transition:opacity .4s ease-in-out,transform .4s ease-in-out,visibility 0s .4s;overflow:auto}
.fly.is-auf{opacity:1;visibility:visible;transform:none;transition:opacity .4s ease-in-out,transform .4s ease-in-out}
@media (min-width:1024px){.fly{grid-template-columns:55fr 45fr;overflow:hidden}}
.fly__links{padding:24px 24px 60px}
@media (min-width:1024px){.fly__links{padding:36px 60px 60px 80px;overflow:auto}}
.fly__zu{display:inline-flex;align-items:center;gap:12px;background:none;border:0;cursor:pointer;color:var(--dark);font:inherit;font-weight:500;padding:0;min-height:48px}
.fly__zu span{width:48px;height:48px;border-radius:50%;background:var(--dark);display:grid;place-items:center;color:var(--cream)}
.fly__zu svg{width:18px;height:18px}
.fly__menu{margin:30px 0 34px}
@media (min-width:1024px){.fly__menu{margin:40px 0 40px 30px}}
.fly__menu a{display:block;text-decoration:none;color:var(--dark);font-size:clamp(1.45rem,1.05rem + 1.5vw,2.6rem);line-height:1.28;font-weight:500;letter-spacing:-.015em;padding:3px 0;position:relative;width:max-content;max-width:100%}
.fly__menu a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--bord);transform:scaleX(0);transform-origin:right;transition:transform .3s ease}
.fly__menu a:hover::after,.fly__menu a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.fly__kontakt{display:grid;gap:8px;margin-bottom:30px;font-size:1.05em}
@media (min-width:1024px){.fly__kontakt{margin-left:30px}}
.fly__kontakt a{color:var(--dark);text-decoration:none;display:inline-flex;align-items:center;min-height:46px;margin:-4px 0}
.fly__cta{margin-left:0}
@media (min-width:1024px){.fly__cta{margin-left:30px}}
.fly__bild{display:none;position:relative;height:100%}
@media (min-width:1024px){.fly__bild{display:block}}
.fly__bild img{width:100%;height:100%;object-fit:cover;border-radius:20px 0 0 20px;filter:brightness(1.06) saturate(1.04)}

/* ---------- Lightbox (Baustein) ---------- */
.lb-oeffner{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;text-align:left;color:inherit;font:inherit}
.lb{border:0;padding:0;background:transparent;max-width:min(1100px,94vw);max-height:92vh}
.lb::backdrop{background:rgba(10,9,9,.88)}
.lb__bild{display:block;margin:0 auto;max-width:100%;max-height:80vh;width:auto;height:auto}
.lb__zu{position:fixed;top:14px;right:14px;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.4);
  background:rgba(0,0,0,.4);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer}
.lb__bu{color:#fff;text-align:center;margin:12px 0 0;font-size:1rem}
.karte .lb-oeffner{margin-bottom:0}

/* Galerie-Seite: Sprungmarken */
.marken{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:26px}
.marken a{display:inline-flex;align-items:center;min-height:46px;padding:0 20px;border-radius:50px;border:1px solid rgba(0,0,0,.2);text-decoration:none;color:var(--dark);font-weight:500;font-size:1rem;transition:.2s}
.marken a:hover{background:var(--dark);color:var(--cream);border-color:var(--dark)}
.gal-titel{margin-bottom:30px;scroll-margin-top:30px}

/* Karte Anfahrt */
.anfahrt img{border-radius:var(--r-sm);width:100%;height:auto}
@media (min-width:768px){.anfahrt img{border-radius:15px}}
.anfahrt p{margin-top:14px;font-size:.95em;color:var(--grey4)}

/* Hero-Zeilen: einzige Einblend-Animation der Seite */
.zeile{display:block;overflow:hidden;padding:.06em 0 .12em;margin:-.06em 0 -.12em}
.zeile > span{display:block;transform:translateY(100%);opacity:0;animation:hoch 1s cubic-bezier(.19,1,.22,1) forwards}
.zeile:nth-child(2) > span{animation-delay:.1s}
.zeile:nth-child(3) > span{animation-delay:.2s}
@keyframes hoch{to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.zeile > span{animation:none;transform:none;opacity:1}.btn svg,.karte__bild img{transition:none}}

.skip{position:absolute;left:-9999px;top:0;background:var(--dark);color:var(--cream);padding:12px 16px;z-index:300}
.skip:focus{left:10px;top:10px}

.mt50{margin-top:50px}
.recht{padding-top:50px}
@media (min-width:1024px){.recht{padding-top:80px}}
.recht h1{margin-bottom:24px;font-size:clamp(2.3rem,1.1rem + 3.6vw,4.2rem)}
.recht h3,.recht h2{font-size:1.3rem}
.prosa.recht h2,.recht .prosa h2{margin:32px 0 10px}

[hidden]{display:none!important}
.bg-cream .proj .karte h3{color:var(--dark)}
.prosa .fakten{grid-template-columns:1fr}
.prosa .fakten b{min-width:12ch}

/* Pascal 06.09.: Das Hero-Motiv ist der hellste Ofen im Bestand, weisse Schrift darauf
   reisst mobil den Kontrast. Auf dem Handy steht der Text deshalb unter dem Foto auf
   Creme, das Foto bleibt ungefiltert. Desktop bleibt wie Halbach. */
@media (max-width:760px){
  .hero.banner--gross{display:flex;flex-direction:column;min-height:0;height:auto;background:var(--cream);color:var(--grey)}
  .hero.banner--gross .banner__bild{position:relative;inset:auto;width:100%}
  .hero.banner--gross .banner__bild img{position:relative;height:auto;aspect-ratio:4/5;border-radius:inherit}
  .hero.banner--gross .banner__bild::after,.hero.banner--gross::after,.hero.banner--gross::before{display:none}
  .hero.banner--gross .banner__inhalt{position:relative;left:auto;bottom:auto;transform:none;width:100%;padding:22px 0 0}
  .hero.banner--gross h1,.hero.banner--gross h2,.hero.banner--gross strong{color:var(--dark)}
  .hero.banner--gross p,.hero.banner--gross .banner__trust,.hero.banner--gross .banner__trust span{color:var(--grey);text-shadow:none}
  .hero.banner--gross h1{text-shadow:none}
  .hero.banner--gross .banner__trust a{color:var(--bord)}
}

/* Kopf mobil beim Scrollen: schlanke feste Leiste auf Dunkel (Pascal 06.09.) */
@media (max-width:1019px){
  .kopf--fest{position:fixed;top:0;left:0;transform:none;width:100%;padding:8px 0;
    background:rgba(36,31,30,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    box-shadow:0 8px 26px -18px rgba(0,0,0,.8);animation:kopfRein .28s ease-out}
  .kopf--fest .kopf__wort img,.kopf--fest .kopf__marke img{max-height:30px}
}
@keyframes kopfRein{from{transform:translateY(-100%)}to{transform:translateY(0)}}

/* Originallogo als Paar: Schriftzug plus G-Flamme, wie auf der Bestandsseite (Pascal 06.09.) */
.logo{display:inline-flex;align-items:center;gap:10px}
.logo__wort{height:auto}
.logo__g{width:auto;height:1.85em;flex:0 0 auto}
@media (max-width:1019px){.logo__g{height:1.6em}}

/* Hero mobil: gleicher Seitenrand wie alle anderen Abschnitte (Pascal 06.09.) */
@media (max-width:760px){
  .hero.banner--gross .banner__inhalt{width:100%;padding-left:var(--side,23px);padding-right:var(--side,23px)}
}

/* Besprechung Alexander Griese 10.09.: Balken hinter dem Logo auf allen Seiten,
   mobil bleibt der Balken oben kleben statt auszublenden (kein Sprung beim Scrollen) */
.kopf--band + .fly + main .banner{border-top-left-radius:0;border-top-right-radius:0}
@media (max-width:1019px){
  .kopf.kopf--band{position:sticky;top:0;left:0;transform:none;width:100%;padding:12px 0;animation:none;
    background:var(--dark);-webkit-backdrop-filter:none;backdrop-filter:none}
  .kopf.kopf--band.kopf--fest{box-shadow:0 8px 26px -18px rgba(0,0,0,.8)}
}
/* WhatsApp als zweiter Direktkanal in der mobilen Leiste */
.stky__wa{flex:0 0 auto;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;border:1px solid rgba(255,255,255,.34);background:transparent}
.stky__wa svg{width:21px;height:21px}
@media (min-width:640px){.team--zwei{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}}

/* Hero-Video (Besprechung 10.09.): brennender Kachelofen, nur ab Tablet, mobil bleibt das Foto */
.hero__video{display:none}
@media (min-width:768px) and (prefers-reduced-motion:no-preference){
  .hero__video{display:block;position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;filter:brightness(1.1) saturate(1.04);border-radius:inherit}

}

/* FAQ (SEO-Ausbau 10.09.): Aufklapp-Zeilen im Fakten-Raster */
.faq{border-top:1px solid rgba(0,0,0,.14)}
.faq__item{border-bottom:1px solid rgba(0,0,0,.14)}
.faq__item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:16px 0;font-weight:500;color:var(--dark);min-height:48px}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";font-size:1.4em;line-height:1;color:var(--bord);flex:0 0 auto;transition:transform .25s ease}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__item p{margin:0 0 18px;max-width:64ch;color:var(--grey)}
.bew__cta{margin-top:18px;color:var(--grey)}

/* Bühne mobil (Pascal 10.09.: "mobil noch abgeschnitten"): Foto komplett im Seitenverhältnis 7:8, Text darunter auf Dunkel */
@media (max-width:767px){
  .medien{height:auto;min-height:0;max-height:none;display:block}
  .medien .banner__bild{position:relative;inset:auto;display:block;width:100%;aspect-ratio:840/960}
  .medien .banner__bild img{position:relative;width:100%;height:100%;object-fit:cover}
  .medien::before{display:none}
  .medien__inhalt{padding:26px 0 34px}
  .medien h2{text-shadow:none;margin-bottom:20px}
}

/* Bühnen-Video (Pascal 10.09.): Feuer im Marmor-Heizkamin bewegt sich, Desktop und Mobil */
.medien__video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;filter:brightness(1.06) saturate(1.04);pointer-events:none}
@media (max-width:767px){
  .medien{position:relative}
  .medien__video{position:absolute;top:0;left:0;height:auto;aspect-ratio:840/960}
  .medien__inhalt{position:relative;background:var(--dark)}
}
@media (prefers-reduced-motion:reduce){.medien__video,.hero__video{display:none}}

/* Bewertungen Desktop: links Titel + Google-Wert + Bewertungslink, rechts beide Karten (Pascal 27.09.: "schöner anordnen", vorher halbe Breite leer) */
@media (min-width:1024px){
  .bewertungen .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;column-gap:70px;align-items:start}
  .bewertungen .bew__kopf{grid-column:1;grid-row:1;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:28px;margin:0}
  .bewertungen .bew__kopf h2{max-width:none;text-wrap:balance}
  .bewertungen .bew__wert{padding-top:24px;border-top:1px solid #d9d0c5;width:100%}
  .bewertungen .rvs{grid-column:2;grid-row:1 / span 2;display:grid;grid-template-columns:1fr 1fr;gap:20px;overflow:visible;padding:0;margin:0}
  .bewertungen .rv{flex:none;padding:30px}
  .bewertungen .rvs-hinweis{display:none}
  .bewertungen .bew__cta{grid-column:1;grid-row:2;margin-top:22px}
}

/* Fußzeile neu geordnet (Pascal 27.09.: "sieht durcheinander aus"): drei Spalten, darunter eine Leiste Recht links, Credit rechts */
.fuss__spalten{position:relative;z-index:1;display:grid;gap:34px;padding-top:40px;border-top:1px solid rgba(255,255,255,.12)}
@media (min-width:768px){.fuss__spalten{grid-template-columns:1.4fr 1fr 1fr;gap:40px}}
.fuss__sp h3{font-size:.8em;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#bbb4b2;margin-bottom:14px}
.fuss__sp address,.fuss__sp p{font-style:normal;line-height:1.65;color:var(--grey2);margin:0}
.fuss__sp address b{color:var(--cream);font-weight:500}
.fuss__liste{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.fuss__liste a{color:var(--grey2);text-decoration:none;display:inline-block;padding:6px 0;line-height:1.5}
.fuss__liste a:hover{color:var(--cream)}
.fuss__leiste{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;margin-top:56px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font-size:16px;color:#bbb4b2}
.fuss__recht{display:flex;flex-wrap:wrap;align-items:center;gap:4px 22px}
.fuss__recht a{color:#bbb4b2;text-decoration:none;padding:11px 0}
.fuss__recht a:hover{color:var(--cream)}

/* Unterseiten-Intro Desktop: linke Spalte wandert mit, darunter Beratung + Telefon (Pascal 27.09.: links war nur leere Fläche) */
.seite__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin:0}
.textblock__seite h2{margin-bottom:28px}
@media (max-width:1023px){.seite__cta{display:none}}
@media (min-width:1024px){.textblock__seite{position:sticky;top:40px;align-self:start}}

/* Fakten zweispaltig: Begriff über dem Text, damit beide Spalten bündig laufen (Pascal 27.09.: "nicht parallel") */
@media (min-width:900px){
  .fakten:not(.prosa .fakten) li{display:grid;grid-template-columns:1fr;gap:8px;align-content:start;padding:22px 0 24px}
  .fakten:not(.prosa .fakten) b{min-width:0;justify-self:start}
}