/* ==========================================================================
   handwerker-blesius.de – Design-System „Das verlegte Brett“ (tasteskill v2, Richtung „The well-kept board“)
   Idee: Die Seite ist ein verlegter Boden aus Kacheln. Fuge 8 px (Handy 6 px), Reihen im Verband,
   jede Kachel eine gefüllte Fläche ohne Linie und ohne Schatten, eine Ecke (eckig), ein Akzent (Orange).
   Gliederung:
     01 Tokens          07 Hero-Brett            13 Über uns            19 Footer-Kacheln
     02 Basis           08 Fischgrät-Mosaik      14 Fakten-Kacheln      20 Mobilbar
     03 Typografie      09 Leistungen (Balken)   15 Aufmaß-Rechner      21 Motion-Zustände
     04 Kacheln         10 Unter der Oberfläche  16 CTA-Reihe           22 Responsive
     05 Buttons, Links  11 Vorher/Nachher        17 Kontakt + Formular
     06 Kopf + Menüs    12 Projekte-Wand         18 Fotostreifen          23 Unterseiten-Bausteine
   Konvention: BEM-light (.block, .block__teil, .block--variante). Zustände: .is-open, .is-on …  JS-Haken: data-*.
   Hausregeln: keine Eyebrows, kein Mono, keine Haarlinien/1px-Rahmen, keine Schatten in Ruhe, keine Verläufe,
   nichts unter 13 px, Fließtext in voller Tinte. Fünf Schriftgrößen: display · head · lead · body · small.
   ========================================================================== */

/* 01 Tokens --------------------------------------------------------------- */
:root{
  /* 3. Runde (25.10.2026): weiche Flächen wie in der Vorlage, aber in Blesius-Farben. Grund = helles Estrichgrau,
     Karten weiß mit großen Radien, Graphit aus dem Logo für Schrift und Hauptknopf, Logo-Orange als Akzent. */
  --bg:#F1F2EF;            /* Seitengrund */
  --tile:#FFFFFF;          /* Karte */
  --tile-2:#EEF0ED;        /* Karte aktiv/hover, Felder, Bild-Platzhalter */
  --tile-3:#E3E6E2;
  --ink:#232625;           /* Graphit */
  --soft:#5A5F5C;          /* Nebeninfos, ≥ 6:1 auf Weiß */
  --paper:#E6E8E4;         /* betonte Karte: Estrichgrau */
  --on-paper:#232625;
  --on-paper-soft:#4F5451;
  --graphite:#DADED9;      /* dunklere Grau-Stufe (keine dunkle Fläche) */
  --graphite-2:#D0D5CF;
  --graphite-3:#C6CCC6;
  --on-graphite:#232625;
  --accent:#F28135;        /* Logo-Orange: Aktion */
  --accent-hover:#F4914F;
  --on-accent:#1E2120;
  --g1:#FFFFFF; --g2:#F6F7F5; --g3:#EEF0ED; --g4:#E6E8E4; --g5:#DEE1DD;  /* Stufen hell → dunkler */
  --graphite-0:#E6E8E4;
  --line:rgba(35,38,37,.09);                 /* Haarlinie um weiße Karten */
  --shadow:0 1px 2px rgba(35,38,37,.05);   /* Karten: flach, nur ein Hauch */
  --shadow-float:0 1px 2px rgba(35,38,37,.04),0 8px 24px rgba(35,38,37,.06),0 32px 64px -24px rgba(35,38,37,.12);   /* schwebender Kopf, Menüs */
  --r-s:8px; --r:12px; --r-l:16px;           /* Radien: klein (Chips, Zeilen) · Karte · große Fläche */
  --error:#B42318;
  --ok:#1E6B34;

  --serif:"Instrument Sans","Helvetica Neue",Arial,system-ui,sans-serif;   /* Überschriften (Name bleibt aus Kompatibilität) */
  --sans:"Instrument Sans","Helvetica Neue",Arial,system-ui,sans-serif;

  --m:clamp(16px,3.2vw,48px);  /* Seitenrand */
  --max:1600px;            /* größte Inhaltsbreite */
  --j:12px;                /* Abstand zwischen Karten */
  --pad:clamp(18px,1.67vw,24px);
  --sec:clamp(72px,8.4vw,128px);
  --hdr:100px;             /* Kopf: 14 + 72 + 14 */

  --fs-display:clamp(80px,12.5vw,190px);
  --fs-head:clamp(32px,2.9vw,46px);
  --fs-say:clamp(24px,2.4vw,34px);   /* Aussage (Absatz groß gesetzt, ≤ 36 px) */
  --fs-figure:clamp(60px,7.4vw,112px); /* eine Kennzahl */
  --fs-lead:clamp(20px,1.67vw,24px);
  --fs-body:17px;
  --fs-small:14px;

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
  --ease-soft:cubic-bezier(.33,1,.68,1);
  --t-press:140ms; --t-hover:180ms; --t-ui:240ms;
}

/* 02 Basis ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;color-scheme:light;background:var(--bg);scroll-padding-top:calc(var(--hdr) + 12px);}
@media (prefers-reduced-motion:no-preference){html:focus-within{scroll-behavior:smooth;}}
body{
  margin:0;min-height:100svh;background:var(--bg);color:var(--ink);
  font:400 var(--fs-body)/1.55 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;text-rendering:optimizeLegibility;font-kerning:normal;
}
img,svg,video{display:block;max-width:100%;}
img{height:auto;}
picture{display:contents;}
a{color:inherit;}
p,figure,blockquote,dl,dd,h1,h2,h3,h4{margin:0;}
ul[class],ol[class]{list-style:none;margin:0;padding:0;}
address{font-style:normal;}
button,input,select,textarea{font:inherit;color:inherit;}
button{cursor:pointer;background:none;border:0;padding:0;}
fieldset{margin:0;padding:0;border:0;min-width:0;}
legend{padding:0;}
[hidden]{display:none !important;}
::selection{background:var(--accent);color:var(--on-accent);}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.t--accent :focus-visible{outline-color:var(--on-accent);}
main:focus{outline:none;}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden;}
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.nowrap{white-space:nowrap;}
.skip-link{
  position:fixed;left:16px;top:16px;z-index:200;padding:14px 20px;background:var(--accent);color:var(--on-accent);
  font-weight:600;text-decoration:none;transform:translateY(-200%);transition:transform var(--t-ui) var(--ease-out);
}
.skip-link:focus{transform:none;}

/* 03 Typografie ------------------------------------------------------------
   Instrument Sans für alles: Überschriften kräftig (600) und eng gesetzt, Text normal,
   Instrument Sans = alles andere. Fünf Größen, weit auseinander.               */
h1,h2{font-family:var(--serif);font-weight:700;letter-spacing:-.04em;line-height:1;text-wrap:balance;font-optical-sizing:auto;}
h2{font-size:var(--fs-head);}
h3{font:600 var(--fs-lead)/1.2 var(--sans);letter-spacing:-.01em;text-wrap:balance;}
p{text-wrap:pretty;}
.giant{font-size:var(--fs-display);line-height:.84;letter-spacing:-.045em;margin-left:-.05em;}
.giant--caps{text-transform:uppercase;letter-spacing:-.015em;line-height:.8;}
.lead{font-size:var(--fs-lead);line-height:1.35;}
.small{font-size:var(--fs-small);line-height:1.45;}

/* 04 Kacheln ----------------------------------------------------------------
   .t = gefüllte Kachel. Varianten: --paper (hell), --accent (Aktion), --graphite (Markenfarbe), --photo. */
.t{position:relative;display:block;min-width:0;padding:var(--pad);background:var(--tile);color:var(--ink);text-decoration:none;}
.t--paper{background:var(--paper);color:var(--on-paper);}
.t--accent{background:var(--accent);color:var(--on-accent);}
.t--graphite{background:var(--graphite);color:var(--on-graphite);}
.t--photo{padding:0;overflow:clip;background:var(--tile-2);}
.t--photo > img,.t--photo > picture > img{width:100%;height:100%;object-fit:cover;}
a.t,button.t{transition:background-color var(--t-hover) ease,color var(--t-hover) ease,transform var(--t-press) var(--ease-out);}
a.t:active,button.t:active{transform:scale(.985);}
@media (hover:hover) and (pointer:fine){
  a.t:hover,button.t:hover{background:var(--tile-2);}
  a.t--paper:hover,button.t--paper:hover{background:#D9DDD8;}
  a.t--accent:hover,button.t--accent:hover{background:var(--accent-hover);}
}
/* Rahmen der Seite: ein Paar gleicher Ränder, ab 1920 px mittig begrenzt */
.sec,.hero,.ftr{padding-inline:max(var(--m),calc((100% - var(--max)) / 2));}
.sec{margin-top:var(--sec);}
.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--j);}

/* 05 Buttons & Links ------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:15px 26px;
  font:600 var(--fs-body)/1.1 var(--sans);text-decoration:none;text-align:center;
  transition:transform var(--t-press) var(--ease-out),background-color var(--t-hover) ease,color var(--t-hover) ease;
}
.btn:active{transform:scale(.97);}
.btn--ink{background:var(--ink);color:#FFFFFF;}
@media (hover:hover) and (pointer:fine){.btn--ink:hover{background:#3A342E;}}
.link{
  font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.28em;
  text-decoration-color:currentColor;transition:text-decoration-color var(--t-hover) ease,text-underline-offset var(--t-ui) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){.link:hover{text-underline-offset:.42em;}}

/* 06 Kopf & Menüs ------------------------------------------------------------
   Eine Kachelreihe (60 px): Logo-Kachel · Navigations-Kachel (Links ab ca. Spalte 5) · Telefon · Aktion. */
.hdr{position:sticky;top:0;z-index:50;padding:16px max(var(--m),calc((100% - var(--max)) / 2)) var(--j);background:var(--bg);}
.hdr__row{display:flex;gap:var(--j);height:60px;}
.hdr__logo{flex:0 0 60px;display:grid;place-items:center;padding:8px;}
.hdr__logo img{width:100%;height:auto;}
.hdr__bar{flex:1 1 auto;display:flex;align-items:center;padding:0 22px;min-width:0;}
.hdr__name{flex:0 1 calc(33.333vw - 104px);min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;}
.hdr__tel{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;gap:1px;padding:0 20px;line-height:1.2;}
.hdr__num{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;}
.hdr__status{font-size:var(--fs-small);color:var(--soft);white-space:nowrap;}
.hdr__cta{flex:0 0 auto;display:flex;align-items:center;padding:0 24px;font-weight:600;white-space:nowrap;}
.hdr__menu{display:none;flex:0 0 auto;align-items:center;gap:14px;padding:0 20px;font-weight:600;}
.burger{position:relative;display:block;width:22px;height:12px;}
.burger span{position:absolute;left:0;width:100%;height:2px;background:currentColor;transition:transform var(--t-ui) var(--ease-out),top var(--t-ui) var(--ease-out);}
.burger span:first-child{top:0;}
.burger span:last-child{top:10px;}
.hdr.is-open .burger span:first-child{top:5px;transform:rotate(45deg);}
.hdr.is-open .burger span:last-child{top:5px;transform:rotate(-45deg);}

.nav__list{display:flex;align-items:center;gap:28px;}
.nav__item{position:relative;display:flex;align-items:center;height:60px;}
.nav__link{
  font-weight:500;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.4em;
  text-decoration-color:transparent;transition:text-decoration-color var(--t-hover) ease;
}
.nav__link[aria-current="page"]{text-decoration-color:var(--accent);}
@media (hover:hover) and (pointer:fine){.nav__link:hover{text-decoration-color:currentColor;}}
.nav__toggle{display:grid;place-items:center;width:28px;height:36px;margin-left:2px;}
.nav__toggle svg{width:15px;height:15px;transition:transform var(--t-ui) var(--ease-out);}
.nav__item--sub.is-open .nav__toggle svg{transform:rotate(180deg);}
.dropdown{
  position:absolute;top:calc(100% + var(--j));left:-24px;z-index:5;width:min(600px,90vw);display:grid;gap:var(--j);padding:var(--j);
  background:var(--bg);opacity:0;transform:translateY(-8px);transform-origin:top left;display:none;
  transition:opacity var(--t-ui) var(--ease-out),transform var(--t-ui) var(--ease-out),display var(--t-ui) allow-discrete;
}
.dropdown::before{content:"";position:absolute;left:0;right:0;top:calc(var(--j) * -1 - 2px);height:calc(var(--j) + 2px);}
@media (hover:hover) and (pointer:fine){
  .nav__item--sub:hover:not(.is-suppressed) .dropdown{display:grid;opacity:1;transform:none;}
}
.nav__item--sub.is-open .dropdown{display:grid;opacity:1;transform:none;}
@starting-style{
  .nav__item--sub:hover .dropdown,.nav__item--sub.is-open .dropdown{opacity:0;transform:translateY(-8px);}
}
.dropdown__list{display:grid;grid-template-columns:1fr 1fr;gap:var(--j);}
.dropdown__list a{display:block;height:100%;padding:16px 18px;background:var(--tile-2);text-decoration:none;transition:background-color var(--t-hover) ease;}
.dropdown__list span{display:block;font-weight:600;}
.dropdown__list small{display:block;margin-top:2px;font-size:var(--fs-small);line-height:1.4;color:var(--soft);}
.dropdown__all{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;background:var(--paper);color:var(--on-paper);font-weight:600;text-decoration:none;}
.dropdown__all svg{width:20px;height:20px;transition:transform var(--t-ui) var(--ease-out);}
@media (hover:hover) and (pointer:fine){
  .dropdown__list a:hover{background:var(--tile-3);}
  .dropdown__all:hover svg{transform:translateX(4px);}
}

/* Mobiles Menü: Bogen aus Kacheln unter der Kopfreihe */
.mnav{
  height:calc(100dvh - 84px);overflow:auto;overscroll-behavior:contain;margin-top:var(--j);
  padding-bottom:calc(var(--m) + env(safe-area-inset-bottom));opacity:0;transform:translateY(-8px);
  transition:opacity var(--t-ui) var(--ease-out),transform var(--t-ui) var(--ease-out);
}
.mnav.is-open{opacity:1;transform:none;}
.mnav__list{display:grid;gap:var(--j);}
.mnav__link{font:600 34px/1.1 var(--serif);letter-spacing:-.02em;padding:18px 20px;}
.mnav__link[aria-current="page"]{background:var(--tile-2);}
.mnav__sub{display:grid;grid-template-columns:1fr 1fr;gap:var(--j);}
.mnav__sub a{padding:14px 18px;font-weight:500;}
.mnav__foot{display:grid;grid-template-columns:1fr 1fr;gap:var(--j);margin-top:var(--j);}
.mnav__cta{grid-column:1 / -1;font-weight:600;font-size:var(--fs-lead);padding:20px;}
.mnav__tel{display:flex;align-items:center;gap:10px;font-weight:600;white-space:nowrap;}
.mnav__foot .mnav__tel{grid-column:1 / -1;}
.mnav__foot .mnav__tel--wa{grid-column:auto;}
.mnav__tel svg{width:20px;height:20px;flex:none;}
.mnav__hours{font-size:var(--fs-small);color:var(--soft);}
body.is-locked{overflow:hidden;}

/* 07 Hero-Brett: 2 × 2, unten rechts zwei Kacheln --------------------------- */
.hero__board{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:var(--j);
  height:calc(100svh - var(--hdr) - var(--m));min-height:620px;max-height:1040px;
}
.hero__name{grid-column:1 / 3;grid-row:1;}
.hero__pic--a{grid-column:3 / 5;grid-row:1;}
.hero__pic--b{grid-column:1 / 3;grid-row:2;}
.hero__say{grid-column:3;grid-row:2;display:flex;flex-direction:column;justify-content:space-between;gap:16px;font-size:var(--fs-lead);line-height:1.3;}
.hero__area{font-size:var(--fs-small);line-height:1.45;color:var(--soft);}
.hero__call{grid-column:4;grid-row:2;display:flex;flex-direction:column;justify-content:space-between;gap:16px;font-size:var(--fs-lead);line-height:1.3;font-weight:500;}
.hero__call-status{font-size:var(--fs-small);font-weight:600;line-height:1.4;text-wrap:balance;}
.hero__name h1{display:flex;flex-direction:column-reverse;justify-content:space-between;gap:16px;height:100%;}
.hero__word{display:block;overflow:clip;padding:.04em 0 .1em;margin:0 0 -.1em -.055em;font-size:var(--fs-display);font-weight:500;line-height:.8;letter-spacing:-.05em;}
.hero__word > span{display:block;}
.hero__sub{display:block;font-size:var(--fs-head);line-height:1.05;letter-spacing:-.02em;}
.hero__pic img{width:100%;height:100%;object-fit:cover;}

/* 08 Fischgrät-Mosaik: ein Foto über 6 × 4 quadratische Kacheln (Handy 3 × 6) --------------- */
.mosaic__wrap{container-type:inline-size;}
.mosaic__grid{
  --cols:6;--t:calc((100cqw - 5 * var(--j)) / 6);--bh:calc(4 * var(--t) + 3 * var(--j));
  --iw:100cqw;--ih:75cqw;--ox:0px;--oy:calc((75cqw - var(--bh)) * .7);
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--j);
}
.mcell{grid-column:var(--c);grid-row:var(--r);aspect-ratio:1;min-width:0;--x:var(--c);--y:var(--r);}
.piece{position:relative;display:block;overflow:clip;background:var(--tile-2);}
.piece::before{
  content:"";position:absolute;inset:0;background-repeat:no-repeat;
  background-image:url(../img/fischgraet-raum-1600.jpg);
  background-image:image-set(url(../img/fischgraet-raum-1600.webp) type("image/webp"),url(../img/fischgraet-raum-1600.jpg) type("image/jpeg"));
  background-size:var(--iw) var(--ih);
  background-position:calc((var(--x) - 1) * (var(--t) + var(--j)) * -1 - var(--ox)) calc((var(--y) - 1) * (var(--t) + var(--j)) * -1 - var(--oy));
  transition:transform .7s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){.piece:hover::before{transform:scale(1.08);}}
.mtile{display:flex;flex-direction:column;justify-content:space-between;font-size:var(--fs-body);line-height:1.4;}
.mtile__h{font-size:var(--fs-head);line-height:1;}
.mtile--go{font-weight:600;}
.mtile--go svg{width:28px;height:28px;align-self:flex-end;transition:transform var(--t-ui) var(--ease-out);}
@media (hover:hover) and (pointer:fine){.mtile--go:hover svg{transform:translateX(6px);}}

/* 09 Leistungen: Riesenwort, Foto-Kachel, gefüllte Balken (details) ---------------------------- */
.svc__head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--j);align-items:end;}
.svc__head .giant{grid-column:1 / 9;}
.svc__intro{grid-column:9 / 13;padding-bottom:.4em;max-width:46ch;}
.svc__board{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--j);margin-top:40px;align-items:start;}
.svc__pic{grid-column:1 / 6;position:sticky;top:calc(var(--hdr) + var(--j));aspect-ratio:4 / 5;max-height:calc(100svh - var(--hdr) - 24px);width:100%;}
.svc__img{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s;}
.svc__img.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s;}
.svc__img img{width:100%;height:100%;object-fit:cover;}
.svc__img--word{display:flex;align-items:flex-end;padding:var(--pad);background:var(--graphite);}
.svc__img--word span{font:600 var(--fs-display)/.8 var(--serif);letter-spacing:-.045em;color:var(--on-graphite);}
.svc__bars{grid-column:6 / 13;display:grid;gap:6px;}
.bar{background:var(--tile);transition:background-color var(--t-hover) ease;}
.bar[open]{background:var(--tile-2);}
.bar summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;padding:12px var(--pad);
  cursor:pointer;list-style:none;font:600 var(--fs-lead)/1.15 var(--serif);letter-spacing:-.01em;
}
.bar summary::-webkit-details-marker{display:none;}
@media (hover:hover) and (pointer:fine){.bar:not([open]) summary:hover{background:var(--tile-2);}}
.bar__plus{position:relative;flex:none;width:18px;height:18px;}
.bar__plus::before,.bar__plus::after{content:"";position:absolute;left:0;top:8px;width:18px;height:2px;background:currentColor;transition:transform var(--t-ui) var(--ease-out);}
.bar__plus::after{transform:rotate(90deg);}
.bar[open] .bar__plus::after{transform:rotate(0deg);}
.bar__panel{display:grid;gap:16px;padding:0 var(--pad) var(--pad);max-width:64ch;}
.bar:not([open]) .bar__panel{display:none;}
.bar__items{display:flex;flex-wrap:wrap;gap:6px;}
.bar__items li{padding:7px 12px;background:var(--tile-3);font-size:var(--fs-small);font-weight:500;}
.bar__panel .link{justify-self:start;}

/* 10 Unter der Oberfläche: Akkordeon getönter Paneele, dunkel → hell ------------------------- */
.ug__intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--j);align-items:end;}
.ug__intro h2{grid-column:1 / 9;}
.ug__intro p{grid-column:9 / 13;max-width:46ch;}
.acc{display:grid;gap:var(--j);margin-top:56px;}
.acc__stage{position:relative;background:var(--tone);color:var(--ink);overflow:clip;}
.acc__name{margin:0;font:inherit;}
.acc__btn{display:flex;align-items:center;width:100%;min-height:64px;padding:0 var(--pad);text-align:left;}
.acc__label{font:600 var(--fs-lead)/1.15 var(--sans);}
.acc__panel{display:grid;gap:20px;padding:0 var(--pad) var(--pad);}
.acc__text{max-width:36ch;}
.acc__fig svg{width:100%;height:auto;}
.acc__fig figcaption{margin-top:6px;font-size:var(--fs-small);color:var(--on-graphite);opacity:.82;}
.js .acc__stage:not(.is-open) .acc__panel{display:none;}
.js .acc__stage.is-open .acc__btn{cursor:default;}
@media (hover:hover) and (pointer:fine){.js .acc__stage:not(.is-open) .acc__btn:hover .acc__label{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.25em;}}
@media (min-width:1100px){
  /* horizontales Akkordeon: offene Stufe ≈ 58 %, die anderen sind schmale Dielen */
  .js .acc{display:flex;height:580px;}
  .js .acc__stage{flex:1 1 0;min-width:0;transition:flex-grow .45s var(--ease-io);}
  .js .acc__stage.is-open{flex-grow:5.6;}
  .js .acc__name{position:absolute;inset:0;}
  .js .acc__btn{position:absolute;inset:0;align-items:flex-end;padding:var(--pad);}
  .js .acc__stage:not(.is-open) .acc__label{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;}
  .js .acc__stage.is-open .acc__btn{align-items:flex-start;}
  .js .acc__stage.is-open .acc__label{font:600 var(--fs-head)/1 var(--serif);letter-spacing:-.025em;}
  .js .acc__panel{
    position:absolute;left:0;top:calc(var(--pad) + var(--fs-head) + 14px);bottom:0;width:calc((100vw - 2 * var(--m)) * .58);max-width:1100px;z-index:1;
    display:flex;flex-direction:column;justify-content:space-between;gap:20px;pointer-events:none;
  }
  .js .acc__fig{max-width:620px;}
  .js .acc__stage:not(.is-open) .acc__panel{display:flex;opacity:0;visibility:hidden;}
  .js .acc__stage.is-open .acc__panel{opacity:1;visibility:visible;transition:opacity .4s ease .25s;}
}

/* 11 Vorher/Nachher-Regler (Kundenfavorit) ------------------------------------------------
   <div class="compare" data-compare [data-swing]> __before / __after, __tag, __handle, <input class="compare__range">. */
.ug__cmp{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--j);margin-top:var(--j);}
.cmp-tile{grid-column:1 / 9;}
.cmp-say{grid-column:9 / 13;display:flex;flex-direction:column;gap:24px;}
.cmp-say__big{font:600 var(--fs-say)/1.12 var(--serif);letter-spacing:-.02em;}
.cmp-say__hint{margin-top:auto;font-size:var(--fs-small);line-height:1.5;}
.cmp-say .link{align-self:flex-start;}
.compare{--pos:50%;position:relative;overflow:hidden;aspect-ratio:16 / 10;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize;}
.compare__before,.compare__after{position:absolute;inset:0;}
.compare__before img,.compare__after img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;}
.compare__after{clip-path:inset(0 0 0 var(--pos));}
.compare__handle{position:absolute;top:0;bottom:0;left:var(--pos);width:4px;margin-left:-2px;background:var(--ink);pointer-events:none;}
.compare__knob{
  position:absolute;top:50%;left:50%;display:grid;place-items:center;width:60px;height:60px;margin:-30px 0 0 -30px;
  background:var(--accent);color:var(--on-accent);transition:transform var(--t-ui) var(--ease-out);
}
.compare__knob svg{width:28px;height:28px;}
.compare:hover .compare__knob,.compare.is-dragging .compare__knob{transform:scale(1.08);}
.compare:has(.compare__range:focus-visible) .compare__knob{outline:3px solid var(--ink);outline-offset:3px;}
.compare__range{position:absolute;left:0;bottom:0;width:100%;height:2px;margin:0;opacity:0;pointer-events:none;}
.compare__tag{position:absolute;top:16px;padding:9px 12px;background:var(--bg);color:var(--ink);font:600 var(--fs-small)/1 var(--sans);pointer-events:none;}
.compare__tag--before{left:16px;}
.compare__tag--after{right:16px;background:var(--paper);color:var(--on-paper);}

/* 12 Projekte: Riesentitel, ungleichmäßige Wand auf eigenem Grund ------------------------- */
.work{padding-block:clamp(48px,6vw,96px);background:var(--tile);}
.work__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;}
.work__all{flex:none;margin-bottom:.5em;}
.wall{display:grid;gap:20px;margin-top:40px;}
.wall__row{display:flex;gap:var(--j);}
.wall__item{flex:var(--r) 1 0;min-width:0;display:flex;flex-direction:column;gap:10px;}
.wall__item img{width:100%;height:var(--h);object-fit:cover;transition:opacity .4s ease;}
.wall__item figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 12px;font-size:var(--fs-small);line-height:1.3;}
.wall__item figcaption span:last-child{color:var(--soft);text-align:right;}
@media (hover:hover) and (pointer:fine){.wall:has(.wall__item:hover) .wall__item:not(:hover) img{opacity:.5;}}

/* 13 Über uns: breites Foto mit Papierblock, Graphit-Kachel mit Karte, Team-Reihe ---------- */
.about__head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px var(--j);}
.about__head h2{grid-column:1 / 9;}
.about__lead{grid-column:1 / 7;font-size:var(--fs-lead);line-height:1.35;}
.about__board{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--j);margin-top:56px;}
.about__place{grid-column:1 / 9;aspect-ratio:16 / 10;}
.about__photo{position:absolute;inset:0;overflow:clip;}
.about__photo img{width:100%;height:100%;object-fit:cover;}
.about__note{position:absolute;top:0;right:0;width:min(360px,44%);padding:22px;background:var(--paper);color:var(--on-paper);}
.about__cap{position:absolute;left:0;bottom:0;padding:10px 14px;background:var(--bg);color:var(--ink);font-size:var(--fs-small);}
.about__side{grid-column:9 / 13;display:flex;flex-direction:column;gap:var(--j);}
.about__map{flex:1 1 auto;display:flex;flex-direction:column;gap:12px;}
.about__maph{font:600 var(--fs-lead)/1.15 var(--serif);letter-spacing:-.01em;}
.map{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end;min-height:0;}
.map svg{width:100%;max-height:300px;height:auto;}
.map figcaption{margin-top:6px;font-size:var(--fs-small);}
.about__facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--j);}
.about__facts div{padding:14px 18px;background:var(--tile);}
.about__facts dt{font-size:var(--fs-small);color:var(--soft);}
.about__facts dd{font-weight:600;line-height:1.35;}
.about__team{grid-column:1 / 4;aspect-ratio:4 / 5;}
.about__crew{grid-column:10 / 13;aspect-ratio:4 / 5;}
.about__team img,.about__crew img{width:100%;height:100%;object-fit:cover;}
.about__team figcaption,.about__crew figcaption{position:absolute;left:0;bottom:0;padding:10px 14px;background:var(--bg);color:var(--ink);font-size:var(--fs-small);}
.about__job{grid-column:4 / 10;display:flex;flex-direction:column;align-items:flex-start;gap:18px;}
.about__job h3{max-width:20ch;}
.about__bonus{margin-top:auto;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;}
.about__amount{font:600 var(--fs-figure)/.85 var(--serif);letter-spacing:-.04em;}
.about__bonus-word{font:600 var(--fs-lead)/1.2 var(--sans);}
.about__job p:not(.about__bonus){max-width:46ch;}
.roll{display:inline-flex;font-variant-numeric:tabular-nums;}
.roll__col{display:inline-block;height:1em;overflow:hidden;line-height:1;}
.roll__strip{display:flex;flex-direction:column;}
.roll__strip span{display:block;height:1em;line-height:1;}
.roll__strip span::before{content:attr(data-n);}

/* 14 Fakten-Kacheln: Namen groß gesetzt, Überschrift doppelt breit ------------------------- */
.proof__board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--j);}
.proof__board > li{min-height:220px;display:flex;flex-direction:column;gap:10px;}
.proof__board p{color:var(--soft);max-width:30ch;}
.proof__board h3{overflow-wrap:anywhere;hyphens:manual;}
.proof__head{grid-column:span 2;}
.proof__head h2{font-size:var(--fs-head);max-width:12ch;}
.proof__link{padding:0;}
.proof__link a{display:flex;flex-direction:column;gap:10px;height:100%;padding:var(--pad);text-decoration:none;transition:background-color var(--t-hover) ease;}
@media (hover:hover) and (pointer:fine){.proof__link a:hover{background:var(--tile-2);}.proof__link a:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em;}}
.proof__todo p{color:var(--on-paper-soft);}

/* 15 Aufmaß-Rechner ------------------------------------------------------------------------ */
.calc__head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--j);align-items:end;}
.calc__head h2{grid-column:1 / 9;}
.calc__head p{grid-column:9 / 13;max-width:46ch;}
.calc__board{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--j);margin-top:40px;}
.calc__in{grid-column:1 / 5;display:grid;gap:22px;align-content:start;}
.calc__plan{grid-column:5 / 10;display:flex;flex-direction:column;justify-content:space-between;gap:12px;}
.calc__plan figcaption{font-size:var(--fs-small);color:var(--soft);}
.calc__out{grid-column:10 / 13;display:flex;flex-direction:column;align-items:flex-start;gap:20px;}
.num label,.pick label,.lay legend{display:block;margin-bottom:8px;font-size:var(--fs-small);font-weight:600;color:var(--soft);}
.num__row{display:grid;grid-template-columns:56px minmax(0,1fr) 56px;gap:6px;}
.num__btn{display:grid;place-items:center;height:56px;background:var(--tile-3);transition:background-color var(--t-hover) ease,transform var(--t-press) var(--ease-out);}
.num__btn svg{width:20px;height:20px;}
.num__btn:active{transform:scale(.94);}
@media (hover:hover) and (pointer:fine){.num__btn:hover{background:var(--graphite);}}
.num__field{display:flex;align-items:center;gap:8px;padding:0 16px;background:var(--bg);}
.num__field:focus-within{outline:2px solid var(--accent);outline-offset:2px;}
.num__field input{width:100%;min-width:0;height:56px;border:0;background:transparent;font:400 var(--fs-lead)/1 var(--sans);font-variant-numeric:tabular-nums;text-align:right;outline:none;}
.num__field span{color:var(--soft);}
.pick__field{position:relative;display:block;}
.pick__field select{width:100%;height:56px;padding:0 48px 0 16px;border:0;background:var(--bg);appearance:none;-webkit-appearance:none;font-size:var(--fs-body);}
.pick__field select option{background:var(--tile);}
.pick__field svg{position:absolute;right:16px;top:50%;width:18px;height:18px;margin-top:-9px;pointer-events:none;}
.lay__opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
.lay__opt{position:relative;}
.lay__opt input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;appearance:none;-webkit-appearance:none;cursor:pointer;}
.lay__opt span{display:grid;place-items:center;height:56px;padding:0 8px;background:var(--tile-3);font-weight:600;text-align:center;transition:background-color var(--t-hover) ease,color var(--t-hover) ease,transform var(--t-press) var(--ease-out);}
.lay__opt input:checked + span{background:var(--paper);color:var(--on-paper);}
.lay__opt input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px;}
.lay__opt input:active + span{transform:scale(.97);}
@media (hover:hover) and (pointer:fine){.lay__opt input:not(:checked):hover + span{background:var(--graphite);}}
.plan{width:100%;height:auto;}
.plan text{font:500 15px var(--sans);fill:var(--ink);}
.calc__res{display:grid;gap:14px;width:100%;}
.res{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:14px;}
.res dt{display:flex;flex-direction:column;font-size:var(--fs-small);font-weight:600;line-height:1.35;color:var(--on-paper);}
.res dt span{font-weight:400;color:var(--on-paper-soft);}
.res dd{flex:none;width:max-content;font:600 var(--fs-head)/1 var(--serif);letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-align:right;}
.calc__note{font-size:var(--fs-small);color:var(--on-paper-soft);margin-top:auto;}
.calc__out .btn{width:100%;}

/* 16 CTA: drei Kacheln, die Flanken laufen über den Rand ------------------------------------ */
.cta__row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--j);height:380px;}
.cta__flank--pic{grid-column:1 / 3;margin-left:calc(var(--m) * -1);}
.cta__flank--pic img{width:100%;height:100%;object-fit:cover;}
.cta__main{grid-column:3 / 11;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:18px;padding:40px clamp(24px,4vw,64px);}
.cta__main p{max-width:52ch;}
.cta__flank:last-child{grid-column:11 / 13;margin-right:calc(var(--m) * -1);}
.cta__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:6px;}
.cta__wa{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.28em;}
.cta__wa svg{width:22px;height:22px;}

/* 17 Kontakt: Graphit-Feld, Formular als Zellen ---------------------------------------------- */
.contact{padding-block:48px clamp(56px,6vw,96px);background:var(--graphite);color:var(--on-graphite);}
.contact__body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--j);margin-top:72px;}
.contact__main{grid-column:1 / 9;}
.contact__main h2{margin-bottom:40px;}
.contact__side{grid-column:9 / 13;display:flex;flex-direction:column;gap:var(--j);padding-top:calc(var(--fs-head) + 40px);}
.form__cells{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,4.6fr);gap:var(--j);}
.cell{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;min-height:96px;padding:16px 18px 12px;background:var(--graphite-2);color:var(--on-graphite);transition:background-color var(--t-hover) ease,color var(--t-hover) ease;}
.cell label{font-size:var(--fs-small);font-weight:600;}
.field__error{margin-top:6px;font-size:var(--fs-small);font-weight:600;line-height:1.4;color:var(--error);}   /* Meldung unter dem Feld (site.js) */
.cell__req{color:inherit;}
.cell input:not([type="checkbox"]),.cell select,.cell textarea{width:100%;min-height:36px;padding:2px 0;border:0;background:transparent;color:inherit;font-size:var(--fs-body);outline:none;}
.cell textarea{resize:vertical;line-height:1.5;min-height:150px;}
.cell ::placeholder{color:inherit;opacity:.72;}
.cell select{appearance:none;-webkit-appearance:none;cursor:pointer;}
.cell select option{background:var(--graphite);color:var(--on-graphite);}
.cell--select svg{position:absolute;right:18px;bottom:20px;width:18px;height:18px;pointer-events:none;}
.cell:focus-within{background:var(--paper);color:var(--on-paper);outline:2px solid var(--accent);outline-offset:2px;}
.cell:has([aria-invalid="true"]){outline:3px solid var(--error);outline-offset:-3px;}
@media (hover:hover) and (pointer:fine){.cell:not(:focus-within):not(.cell--submit):hover{background:var(--graphite-3);}}
.cell--wide{grid-column:1 / -1;justify-content:flex-start;}
.cell--check{grid-column:1 / 3;flex-direction:row;align-items:center;gap:16px;}
.cell--check input{flex:none;width:24px;height:24px;margin:0;accent-color:var(--accent);}
.cell--check label{font-weight:400;line-height:1.45;}
.cell--check label a{font-weight:600;}
.cell--submit{grid-column:3;justify-content:center;align-items:center;background:var(--paper);color:var(--on-paper);font:600 var(--fs-lead)/1.1 var(--sans);text-align:center;transition:background-color var(--t-hover) ease,transform var(--t-press) var(--ease-out);}
.cell--submit:active{transform:scale(.985);}
.cell--submit:disabled{opacity:.7;cursor:progress;}
@media (hover:hover) and (pointer:fine){.cell--submit:hover{background:#D9DDD8;}}
.form__note{margin-top:12px;font-size:var(--fs-small);}
.form__hp{position:absolute !important;left:-9999px;width:2px;height:2px;overflow:hidden;clip:rect(0,0,0,0);}
.form__status:empty{display:none;}
.form__status{margin-top:var(--j);padding:20px 22px;background:var(--paper);color:var(--on-paper);}
.form__status:focus{outline:none;}
.form__status.is-error{background:#FFE2DC;}
.form__status strong{display:block;margin-bottom:4px;font:600 var(--fs-lead)/1.25 var(--serif);}
.form__status a{font-weight:600;}
.form.is-sent .form__cells,.form.is-sent .form__note{display:none;}
.form.is-sent .form__status{margin-top:0;}
.form__prefill{margin-bottom:var(--j);padding:14px 18px;background:var(--paper);color:var(--on-paper);font-size:var(--fs-small);font-weight:600;}
.reach{display:grid;gap:var(--j);}
.reach__cell{display:flex;flex-direction:column;gap:2px;padding:16px 18px;background:var(--graphite-2);text-decoration:none;font-size:var(--fs-small);transition:background-color var(--t-hover) ease,transform var(--t-press) var(--ease-out);}
.reach__cell:active{transform:scale(.985);}
@media (hover:hover) and (pointer:fine){.reach__cell:hover{background:var(--graphite-3);}}
.reach__big{font:600 var(--fs-lead)/1.25 var(--sans);overflow-wrap:anywhere;}
.reach__big--mail{font-size:var(--fs-body);}
.next{padding:20px 18px;background:var(--graphite-0);}
.next h3{font:600 var(--fs-lead)/1.15 var(--serif);letter-spacing:-.01em;margin-bottom:12px;}
.next__list{margin:0;padding-left:1.4em;display:grid;gap:4px;}
.next__list li::marker{font-weight:600;}

/* 18 Fotostreifen (Laufband aus echten Fotos) ----------------------------------------------- */
.strip{overflow:hidden;margin-inline:calc(var(--m) * -1);}
.marquee__track{display:flex;width:max-content;}
.marquee__set{display:flex;flex:none;gap:var(--j);padding-right:var(--j);}
.strip__pic{flex:none;height:150px;overflow:clip;background:var(--graphite-2);}
.strip__pic img{width:100%;height:100%;object-fit:cover;}
.strip__pic--34{width:113px;}
.strip__pic--11{width:150px;}
.strip__pic--32{width:225px;}

/* 19 Footer aus Kacheln --------------------------------------------------------------------- */
.ftr{padding-top:var(--sec);padding-bottom:var(--m);}
.ftr__board{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--j);}
.ftr__say{grid-column:1 / 5;min-height:240px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;}
.ftr__statement{font:600 var(--fs-lead)/1.3 var(--serif);max-width:24ch;}
.ftr__legal{font-size:var(--fs-small);color:var(--soft);}
.ftr__legal a{color:var(--ink);}
.ftr__nav{grid-column:5 / 8;display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.ftr__nav ul{display:grid;align-content:start;gap:4px;list-style:none;margin:0;padding:0;}
.ftr__nav a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.3em;text-decoration-color:transparent;transition:text-decoration-color var(--t-hover) ease;}
@media (hover:hover) and (pointer:fine){.ftr__nav a:hover,.ftr__reach a:hover{text-decoration-color:currentColor;}}
.ftr__time{grid-column:8 / 10;display:flex;flex-direction:column;gap:8px;}
.ftr__city{font:600 var(--fs-lead)/1.2 var(--serif);}
.ftr__live{font-weight:600;}
.ftr__hours{margin-top:auto;display:grid;gap:2px;font-size:var(--fs-small);}
.ftr__hours div{display:flex;justify-content:space-between;gap:8px;}
.ftr__hours dt{color:var(--soft);}
.ftr__hours dd{font-variant-numeric:tabular-nums;}
.ftr__reach{grid-column:10 / 13;display:flex;flex-direction:column;gap:12px;}
.ftr__reach a{overflow-wrap:anywhere;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.3em;text-decoration-color:transparent;transition:text-decoration-color var(--t-hover) ease;}
.ftr__links{color:var(--ink);}
.ftr__email{margin-top:auto;font-size:var(--fs-body);font-weight:600;overflow-wrap:anywhere;}
.ftr__mark{grid-column:1 / 9;min-height:340px;display:grid;place-items:center;}
.ftr__mark img{width:min(72%,820px);height:auto;transition:transform .6s var(--ease-out);}
@media (hover:hover) and (pointer:fine){.ftr__mark:hover img{transform:scale(1.02);}}
.ftr__go{grid-column:9 / 13;min-height:340px;display:flex;flex-direction:column;justify-content:space-between;}
.ftr__go-text{font:600 var(--fs-head)/1 var(--serif);letter-spacing:-.025em;max-width:9ch;}
.ftr__arrow{width:72px;height:72px;align-self:flex-end;transition:transform var(--t-ui) var(--ease-out);}
@media (hover:hover) and (pointer:fine){.ftr__go:hover .ftr__arrow{transform:translate(8px,-8px);}}
.ftr__credit{margin-top:16px;font-size:var(--fs-small);color:var(--soft);}
.ftr__credit a{color:var(--ink);}

/* 20 Mobilbar (nur Handy): Anrufen · WhatsApp · Anfragen ------------------------------------ */
.mobilebar{display:none;}

/* 21 Ruhig: keine Einblend- oder Scroll-Animationen (Kundenwunsch). Nur Hover-Übergänge in den Bausteinen. */
[data-shutter],[data-parallax]{overflow:clip;}

/* 22 Responsive --------------------------------------------------------------------------- */
@media (max-width:1279px){
  .hdr__name{display:none;}
  .hdr__bar{justify-content:flex-start;}
  .nav__list{gap:22px;}
}
@media (max-width:1099px){
  .hdr__bar{display:none;}
  .hdr__tel{flex:1 1 auto;}
  .hdr__menu{display:flex;}
  .hdr.is-open{position:fixed;left:0;right:0;top:0;}
  .mosaic__grid{
    --t:calc((100cqw - 2 * var(--j)) / 3);--bh:calc(6 * var(--t) + 5 * var(--j));
    --ih:var(--bh);--iw:calc(var(--bh) * 4 / 3);--ox:calc((var(--iw) - 100cqw) * .5);--oy:0px;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .mcell{grid-column:var(--pc);grid-row:var(--pr);--x:var(--pc);--y:var(--pr);}
  .mcell.is-wide{display:none;}
  .mcell.mtile{aspect-ratio:auto;}
  .svc__head .giant{grid-column:1 / -1;}
  .svc__intro{grid-column:1 / 9;}
  .svc__pic{grid-column:1 / 6;}
  .ug__intro h2{grid-column:1 / 7;}
  .ug__intro p{grid-column:7 / 13;}
  .cmp-tile{grid-column:1 / -1;}
  .cmp-say{grid-column:1 / -1;}
  .about__place{grid-column:1 / -1;}
  .about__side{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;}
  .about__team{grid-column:1 / 5;}
  .about__job{grid-column:5 / 13;}
  .about__crew{display:none;}
  .wall{display:flex;flex-wrap:wrap;gap:16px var(--j);}
  .wall__row{display:contents;}
  .wall__item{flex:none;width:100%;}
  .wall__item img{height:300px;}
  .wall__item.p-full img{height:420px;}
  .wall__item.p-62{width:calc(62% - var(--j) / 2);}
  .wall__item.p-38{width:calc(38% - var(--j) / 2);}
  .wall__item figcaption{flex-direction:column;gap:0;}
  .wall__item figcaption span:last-child{text-align:left;}
  .proof__board{grid-template-columns:repeat(2,minmax(0,1fr));}
  .calc__in{grid-column:1 / 7;}
  .calc__plan{grid-column:7 / 13;}
  .calc__out{grid-column:1 / -1;}
  .calc__head h2{grid-column:1 / -1;}
  .calc__head p{grid-column:1 / 10;}
  .contact__main,.contact__side{grid-column:1 / -1;}
  .contact__side{padding-top:0;display:grid;grid-template-columns:1fr 1fr;}
  .ftr__say{grid-column:1 / 7;}
  .ftr__nav{grid-column:7 / 13;}
  .ftr__time{grid-column:1 / 7;}
  .ftr__reach{grid-column:7 / 13;}
  .ftr__mark{grid-column:1 / -1;min-height:240px;}
  .ftr__go{grid-column:1 / -1;min-height:220px;}
}
@media (max-width:599px){
  :root{--j:8px;--hdr:0px;--pad:18px;--sec:80px;--fs-display:22vw;--fs-head:32px;--fs-lead:20px;--fs-say:24px;--fs-figure:15.5vw;}
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom));}
  .hdr{position:relative;padding-top:var(--m);}
  .hdr.is-open{position:fixed;}
  .hdr__row{height:56px;}
  .hdr__logo{flex-basis:56px;}
  .hdr__tel,.hdr__cta{display:none;}
  .hero__area{display:none;}
  .hdr__menu{flex:1 1 auto;justify-content:space-between;}
  .mnav{height:calc(100dvh - 78px);}

  .hero__board{grid-template-columns:1fr 1fr;grid-template-rows:none;height:auto;min-height:0;max-height:none;}
  .hero__name{grid-column:1 / -1;grid-row:auto;height:max(220px,27svh);}
  .hero__pic--a{grid-column:1 / -1;grid-row:auto;aspect-ratio:4 / 3;}
  .hero__say{grid-column:1;grid-row:auto;font-size:var(--fs-body);line-height:1.4;}
  .hero__call{grid-column:2;grid-row:auto;font-size:var(--fs-body);}
  .hero__pic--b{grid-column:1 / -1;grid-row:auto;order:5;aspect-ratio:4 / 3;}
  .hero__sub{font-size:var(--fs-lead);}

  .mcell.mtile{padding:10px;font-size:var(--fs-small);line-height:1.3;}
  .mtile--go svg{width:22px;height:22px;}

  .svc__head{display:block;}
  .svc__intro{margin-top:16px;padding:0;}
  .svc__board{display:flex;flex-direction:column;margin-top:24px;}
  .svc__pic{position:relative;top:auto;aspect-ratio:3 / 2;max-height:none;}
  .svc__img--word span{font-size:calc(var(--fs-display) * .7);}
  .bar summary{min-height:56px;}

  .ug__intro{display:block;}
  .ug__intro p{margin-top:16px;}
  .acc{margin-top:28px;}
  .ug__cmp{display:flex;flex-direction:column;}
  .compare{aspect-ratio:4 / 3;}
  .compare__knob{width:52px;height:52px;margin:-26px 0 0 -26px;}

  .work__head{display:block;}
  .work__all{display:inline-block;margin-top:12px;}
  .giant--caps{font-size:15.5vw;}
  .svc__head .giant{font-size:15.5vw;}
  .wall{display:flex;flex-wrap:wrap;gap:14px var(--j);margin-top:24px;}
  .wall__row{display:contents;}
  .wall__item{flex:none;width:100%;}
  .wall__item img{height:150px;}
  .wall__item.p-full img{height:220px;}
  .wall__item.p-62{width:calc(62% - var(--j) / 2);}
  .wall__item.p-38{width:calc(38% - var(--j) / 2);}
  .wall__row:last-child .wall__item:nth-child(n+2){display:none;}  /* Handy: zehn Fotos genügen */
  .wall__item figcaption{flex-direction:column;gap:0;}
  .wall__item figcaption span:last-child{text-align:left;}

  .about__head{display:block;}
  .about__lead{margin-top:16px;}
  .about__board{display:flex;flex-direction:column;margin-top:28px;}
  .about__place{aspect-ratio:auto;display:flex;flex-direction:column;}
  .about__photo{position:relative;inset:auto;aspect-ratio:4 / 3;}
  .about__note{position:static;width:auto;}
  .about__cap{position:static;}
  .about__side{display:flex;}
  .about__team{display:none;}
  .about__crew{display:block;aspect-ratio:auto;}
  .about__crew img{aspect-ratio:4 / 5;height:auto;}
  .about__crew figcaption{position:static;}
  .about__job{order:2;}

  .proof__board{grid-template-columns:1fr 1fr;}
  .proof__board > li{min-height:150px;padding:16px;}
  .proof__board h3{font-size:var(--fs-body);}
  .proof__board p{font-size:var(--fs-small);}
  .proof__head{grid-column:1 / -1;min-height:120px !important;}
  .proof__link{padding:0 !important;}
  .proof__link a{padding:16px;}

  .calc__head{display:block;}
  .calc__head p{margin-top:16px;}
  .calc__board{display:flex;flex-direction:column;margin-top:24px;}

  .cta__row{display:grid;grid-template-columns:1fr 1fr;height:auto;}
  .cta__main{grid-column:1 / -1;grid-row:1;padding:28px 22px;min-height:300px;}
  .cta__flank--pic{grid-column:1;grid-row:2;height:120px;margin-left:0;}
  .cta__flank:last-child{grid-column:2;grid-row:2;height:120px;margin-right:0;}
  .cta__actions .btn{width:100%;}

  .contact{padding-top:32px;}
  .strip__pic{height:110px;}
  .strip__pic--34{width:83px;}
  .strip__pic--11{width:110px;}
  .strip__pic--32{width:165px;}
  .contact__body{margin-top:40px;}
  .contact__main h2{margin-bottom:24px;}
  .contact__side{display:flex;}
  .form__cells{grid-template-columns:1fr;}
  .cell{min-height:72px;}
  .cell--check,.cell--submit{grid-column:auto;}
  .cell--submit{min-height:64px;}

  .ftr__board{grid-template-columns:1fr 1fr;}
  .ftr__mark{grid-column:1 / -1;order:-2;min-height:160px;}
  .ftr__mark img{width:84%;}
  .ftr__go{grid-column:1 / -1;order:-1;min-height:150px;}
  .ftr__nav{grid-column:1;order:0;display:block;}
  .ftr__nav ul + ul{margin-top:16px;}
  .ftr__time{grid-column:2;order:1;}
  .ftr__hours div{display:block;}
  .ftr__reach{grid-column:1 / -1;order:2;}
  .ftr__say{grid-column:1 / -1;order:3;min-height:0;}

  .mobilebar{
    position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:var(--j);
    padding:var(--j) var(--m) calc(var(--j) + env(safe-area-inset-bottom));background:var(--bg);
  }
  .mobilebar__item{display:flex;align-items:center;justify-content:center;gap:7px;min-height:50px;padding:0 6px;font-weight:600;font-size:var(--fs-body);}
  .mobilebar__item svg{width:19px;height:19px;flex:none;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-delay:0s !important;}
}

/* ==========================================================================
   23 Unterseiten-Bausteine (Stand 24.10.2026) · Doku + HTML-Beispiele: SPEC.md „## Unterseiten-Bausteine“
   Für alle Unterseiten im Board-Stil. Seiten ändern diese Datei nicht; Feinschliff, den nur ein Seitentyp
   teilt, gehört in eine eigene Datei (z. B. leistungen.css über `css:` im Seitenkopf).
     23a .sec-head       Abschnittskopf: H2 links, Untersatz rechts (--stack)        · .sec--band (getöntes Feld)
     23b .page-board     Seiten-Hero als Kachel-Brett (--text ohne Foto, --duo mit zweitem Foto)
     23c .crumbs         Brotkrumen ohne Linien
     23d .tiles / .tile  freies Brett: Größen (--quarter --half --wide --full --tall), Flächen (--tone --paper
                         --accent --graphite --photo), Inhalte (__name __say __cap __end), Aktions-Kachel --go
     23e .feature-tiles  Eigenschaften/Vorteile als Kacheln ohne Icons (--pic: Foto-Kachel + Liste)
     23f .split-tile     Foto + Text nebeneinander (--flip, --even)
     23g .choice/.switch Zwei oder mehr Tafeln; mit [data-switch] schaltet ein Segment-Schalter um (site.js)
     23h Kleinteile      .specs (Kennwerte) · .data-table + .table-scroll · .list · .hint · .actions
                         · .btn--quiet / .btn--paper / .btn--accent
     23i .photo-wall     ungleichmäßige Bildwand (Reihen mit eigener Höhe, Breite nach Seitenverhältnis)
     23j .faq            Fragen als gefüllte Balken (details/summary)
     23k .steps-row      Ablauf als steigende Treppe in Tonstufen, ohne Ziffern
     23l .related        verwandte Seiten als Link-Kacheln (erste mit Foto)
     23m .cta            Abschluss-Aktion: Ergänzung .cta__meta (Markup wie Partial cta-band / cta-page)
     23n .prose-board / .prose / .note   Textseiten (Impressum, Datenschutz), PRÜFEN-Hinweise
   Mobil (≤ 599 px) hat jeder Baustein seine eigene Komposition, am Ende des Abschnitts.
   ========================================================================== */
:root{
  --fs-h1:clamp(40px,5.6vw,92px);   /* H1 der Unterseiten (Startseite: --fs-display) */
  --tone-on:color-mix(in srgb,currentColor 9%,transparent);   /* Tonstufe auf jeder Fläche (hell wie dunkel) */
  --tone-on-2:color-mix(in srgb,currentColor 16%,transparent);
}

/* 23a Abschnittskopf ------------------------------------------------------------------------------
   <div class="sec-head"><h2>…</h2><p>Untersatz</p></div>  · alles außer h2 steht rechts (Spalte 8–12)  */
.sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px var(--j);align-items:end;margin-bottom:clamp(28px,3vw,44px);}
.sec-head > h2,.sec-head > .giant{grid-column:1 / 8;}
.sec-head > :not(h2):not(.giant){grid-column:8 / 13;max-width:46ch;}
.sec-head > p{padding-bottom:.15em;}
.sec-head--stack{align-items:start;}
.sec-head--stack > *,.sec-head--stack > :not(h2):not(.giant){grid-column:1 / 9;}
.sec-head--stack > p{font-size:var(--fs-lead);line-height:1.35;}
.sec-after{margin-top:clamp(24px,2.4vw,36px);}          /* Abstand für Zeilen/Links unter einem Brett */
/* Bretter direkt untereinander sind ein Brett: nur die Fuge dazwischen */
:is(.tiles,.feature-tiles,.split-tile,.related,.photo-wall,.choice,.steps-row,.data-table,.table-scroll) + :is(.tiles,.feature-tiles,.split-tile,.related,.photo-wall,.choice,.steps-row,.data-table,.table-scroll){margin-top:var(--j);}
.measure{max-width:68ch;}
/* getöntes Feld (einmal pro Seite, wie die Projekte-Wand): Kacheln darin eine Stufe heller */
.sec--band{padding-block:clamp(48px,6vw,96px);background:var(--tile);}
.sec--band .t:not([class*="t--"]),.sec--band .tile:not([class*="tile--"]),.sec--band .feature:not([class*="feature--"]),
.sec--band .faq__item,.sec--band .related__item{background:var(--tile-2);}

/* 23b Seiten-Hero als Brett -------------------------------------------------------------------------
   Desktop: Kachel mit Brotkrumen, H1, Untersatz, Aktion (Spalten 1–7) · Foto (8–12, zwei Reihen hoch)
   · darunter Fakt-Kachel (1–4) und Ruf-Kachel in Orange (5–7). Fehlt eine Kachel, rücken die anderen nach. */
.page-board{padding-inline:max(var(--m),calc((100% - var(--max)) / 2));}
.page-board__grid{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:minmax(0,1fr) auto;gap:var(--j);
  height:clamp(580px,calc(100svh - var(--hdr) - var(--m)),900px);
}
.page-board__main{grid-column:1 / 8;grid-row:1;display:flex;flex-direction:column;gap:20px;min-height:0;}
.page-board__main .crumbs{margin-bottom:auto;}
.page-board__h{font-size:var(--fs-h1);font-weight:400;line-height:.94;letter-spacing:-.035em;overflow-wrap:break-word;hyphens:manual;}
.page-board__mask{display:block;overflow:clip;padding:.02em 0 .12em;margin-bottom:-.12em;}
.page-board__mask > span{display:block;}
.page-board__lead{font-size:var(--fs-lead);line-height:1.35;max-width:40ch;}
.page-board__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;}
.page-board__pic{grid-column:8 / 13;grid-row:1 / 3;margin:0;}
.page-board__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.page-board__pic--b{grid-column:1 / 5;grid-row:2;min-height:180px;}
.page-board__cap,.tile__cap,.split-tile__cap,.choice__cap{
  position:absolute;left:0;bottom:0;z-index:1;max-width:calc(100% - 24px);padding:10px 14px;
  background:var(--bg);color:var(--ink);font-size:var(--fs-small);line-height:1.35;
}
.page-board__fact{grid-column:1 / 5;grid-row:2;display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-height:170px;}
.page-board__fact p{max-width:46ch;}
.page-board__call{grid-column:5 / 8;grid-row:2;display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-height:170px;font-size:var(--fs-lead);line-height:1.3;font-weight:500;}
.page-board__call small{font-size:var(--fs-small);font-weight:600;line-height:1.4;}
/* fehlende Kacheln: Nachbarn füllen die Reihe */
.page-board__grid:not(:has(.page-board__call)) .page-board__fact,
.page-board__grid:not(:has(.page-board__fact)):not(:has(.page-board__pic--b)) .page-board__call{grid-column:1 / 8;}
.page-board__grid:not(:has(.page-board__fact,.page-board__call,.page-board__pic--b)) .page-board__main{grid-row:1 / 3;}
/* --text: ohne Foto (Rechtstexte, 404): Hauptkachel breit, rechts Fakt + Ruf übereinander */
.page-board--text .page-board__grid{height:auto;min-height:clamp(380px,48svh,560px);grid-template-rows:minmax(0,1fr) minmax(0,1fr);}
.page-board--text .page-board__main{grid-column:1 / 9;grid-row:1 / 3;}
.page-board--text .page-board__fact,.page-board--text .page-board__call{grid-column:9 / 13 !important;min-height:0;}
.page-board--text .page-board__fact{grid-row:1;}
.page-board--text .page-board__call{grid-row:2;}
.page-board--text .page-board__grid:not(:has(.page-board__call)) .page-board__fact,
.page-board--text .page-board__grid:not(:has(.page-board__fact)) .page-board__call{grid-row:1 / 3;}
.page-board--text .page-board__grid:not(:has(.page-board__fact,.page-board__call)) .page-board__main{grid-column:1 / -1;}

/* 23c Brotkrumen ------------------------------------------------------------------------------------
   <nav class="crumbs" aria-label="Brotkrumen"><ol><li><a href="{{root}}">Start</a></li>…<li aria-current="page">Parkett</li></ol></nav> */
.crumbs{font-size:var(--fs-small);line-height:1.4;color:var(--soft);}
.t--paper .crumbs,.tile--paper .crumbs{color:var(--on-paper-soft);}
.t--graphite .crumbs,.tile--graphite .crumbs,.t--accent .crumbs{color:inherit;}
.crumbs ol{display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none;}
.crumbs li{display:flex;align-items:center;}
.crumbs li + li::before{content:"›";padding:0 .6em;}
.crumbs a{font-weight:500;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.3em;text-decoration-color:transparent;transition:text-decoration-color var(--t-hover) ease;}
.crumbs [aria-current]{font-weight:600;color:var(--ink);}
.t--paper .crumbs [aria-current],.tile--paper .crumbs [aria-current]{color:var(--on-paper);}
@media (hover:hover) and (pointer:fine){.crumbs a:hover{text-decoration-color:currentColor;}}
.sec > .crumbs:first-child{margin-bottom:var(--j);}

/* 23d Freies Brett ------------------------------------------------------------------------------------
   <div class="tiles"> .tile (4 von 12 Spalten) · --quarter 3 · --half 6 · --wide 8 · --full 12 · --tall 2 Reihen */
.tiles{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--j);grid-auto-flow:row dense;}
.tile{
  grid-column:span 4;position:relative;display:flex;flex-direction:column;gap:14px;min-width:0;min-height:200px;margin:0;
  padding:var(--pad);background:var(--tile);color:var(--ink);text-decoration:none;
}
.tile--quarter{grid-column:span 3;}
.tile--half{grid-column:span 6;}
.tile--wide{grid-column:span 8;}
.tile--full{grid-column:1 / -1;}
.tile--tall{grid-row:span 2;}
.tile--tone{background:var(--tile-2);}
.tile--paper{background:var(--paper);color:var(--on-paper);}
.tile--accent{background:var(--accent);color:var(--on-accent);}
.tile--graphite{background:var(--graphite);color:var(--on-graphite);}
.tile--photo{padding:0;overflow:clip;background:var(--tile-2);min-height:var(--tile-h,280px);}   /* Höhe per style="--tile-h:460px" */
.tile--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.tile__name{font:600 var(--fs-lead)/1.2 var(--serif);letter-spacing:-.01em;text-wrap:balance;}
.tile__say{font:600 var(--fs-say)/1.12 var(--serif);letter-spacing:-.02em;max-width:24ch;}
.tile__end{margin-top:auto;}
.tile p{max-width:52ch;}
.tile .link,.tile .btn{align-self:flex-start;}
.tile--go{justify-content:space-between;font:600 var(--fs-head)/1 var(--serif);letter-spacing:-.025em;}
.tile--go svg{width:44px;height:44px;align-self:flex-end;transition:transform var(--t-ui) var(--ease-out);}
a.tile{transition:background-color var(--t-hover) ease,color var(--t-hover) ease,transform var(--t-press) var(--ease-out);}
a.tile:active{transform:scale(.985);}
@media (hover:hover) and (pointer:fine){
  a.tile:hover{background:var(--tile-2);}
  a.tile--paper:hover{background:#D9DDD8;}
  a.tile--accent:hover{background:var(--accent-hover);}
  a.tile--graphite:hover{background:var(--graphite-2);}
  a.tile--go:hover svg{transform:translateX(8px);}
}

/* 23e Eigenschaften als Kacheln ------------------------------------------------------------------------
   <dl class="feature-tiles"><div class="feature"><dt class="feature__name">…</dt><dd>…</dd></div>…</dl>
   2 oder 4 Einträge: je halbe Breite · 5: zwei halbe, drei Drittel · sonst Drittel. --pic: Foto links, Liste rechts. */
.feature-tiles{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--j);margin:0;}
.feature-tiles > *{grid-column:span 4;}
.feature-tiles > :first-child:nth-last-child(2),.feature-tiles > :first-child:nth-last-child(2) ~ *,
.feature-tiles > :first-child:nth-last-child(4),.feature-tiles > :first-child:nth-last-child(4) ~ *,
.feature-tiles > :first-child:nth-last-child(5),.feature-tiles > :first-child:nth-last-child(5) + *{grid-column:span 6;}
.feature{display:flex;flex-direction:column;gap:12px;min-height:200px;margin:0;padding:var(--pad);background:var(--tile);color:var(--ink);}
.feature--tone{background:var(--tile-2);}
.feature--paper{background:var(--paper);color:var(--on-paper);}
.feature--graphite{background:var(--graphite);color:var(--on-graphite);}
.feature__name{font:600 var(--fs-lead)/1.2 var(--serif);letter-spacing:-.01em;text-wrap:balance;}
.feature dd,.feature__text{margin:0;max-width:52ch;}
.feature-tiles--pic{grid-template-columns:repeat(12,minmax(0,1fr));}
.feature-tiles--pic > *{grid-column:auto;}
.feature-tiles__pic{grid-column:1 / 6 !important;position:relative;min-height:420px;margin:0;}
.feature-tiles__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.feature-tiles__list{grid-column:6 / 13 !important;display:grid;grid-template-columns:1fr 1fr;gap:var(--j);margin:0;}
.feature-tiles__list > :last-child:nth-child(odd){grid-column:1 / -1;}
.feature-tiles--flip .feature-tiles__pic{grid-column:8 / 13 !important;grid-row:1;}
.feature-tiles--flip .feature-tiles__list{grid-column:1 / 8 !important;grid-row:1;}
/* mehrere Fotos in der Bildspalte: <div class="feature-tiles__pic feature-tiles__pic--stack"><figure class="t t--photo">…</figure>…</div> */
.feature-tiles__pic--stack{display:grid;grid-auto-rows:minmax(0,1fr);gap:var(--j);min-height:0;}
.feature-tiles__pic--stack > figure{position:relative;min-height:220px;margin:0;}

/* 23f Foto + Text nebeneinander ------------------------------------------------------------------------
   <div class="split-tile"><figure class="split-tile__pic t t--photo">{{img}}<figcaption class="split-tile__cap">…</figcaption></figure>
   <div class="split-tile__body t">…</div></div>  · Fläche des Textes über .t--paper / .t--graphite */
.split-tile{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--j);}
.split-tile__pic{grid-column:1 / 8;position:relative;min-height:clamp(340px,38vw,600px);margin:0;}
.split-tile__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.split-tile__body{grid-column:8 / 13;display:flex;flex-direction:column;gap:18px;padding:clamp(22px,2.6vw,40px);}
.split-tile__body > h2{font-size:var(--fs-head);}
.split-tile__body p,.split-tile__body ul{max-width:52ch;}
.split-tile__body .link,.split-tile__body .btn,.split-tile__body .actions{align-self:flex-start;}
.split-tile__body > :last-child:is(.link,.btn,.actions){margin-top:auto;}
.split-tile--flip .split-tile__pic{grid-column:6 / 13;grid-row:1;}
.split-tile--flip .split-tile__body{grid-column:1 / 6;grid-row:1;}
.split-tile--even .split-tile__pic{grid-column:1 / 7;}
.split-tile--even .split-tile__body{grid-column:7 / 13;}
.split-tile--even.split-tile--flip .split-tile__pic{grid-column:7 / 13;}
.split-tile--even.split-tile--flip .split-tile__body{grid-column:1 / 7;}

/* 23g Tafeln zur Wahl + Segment-Schalter -------------------------------------------------------------
   Ohne JS: alle Tafeln nebeneinander (Foto oben, Text darunter), Schalter unsichtbar.
   Mit [data-switch] (site.js setzt .is-live): Schalter sichtbar, eine Tafel, Foto links und Text rechts.  */
.choice{display:grid;gap:var(--j);}
.switch{display:none;flex-wrap:wrap;gap:6px;}
.choice.is-live .switch{display:flex;}
.switch__opt{
  min-height:56px;padding:0 26px;background:var(--tile);color:var(--ink);font-weight:600;
  transition:background-color var(--t-hover) ease,color var(--t-hover) ease,transform var(--t-press) var(--ease-out);
}
.switch__opt[aria-checked="true"]{background:var(--paper);color:var(--on-paper);}
.switch__opt:active{transform:scale(.97);}
@media (hover:hover) and (pointer:fine){.switch__opt[aria-checked="false"]:hover{background:var(--tile-3);}}
.choice__panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:var(--j);}
.choice__panel{display:grid;grid-template-rows:auto 1fr;gap:var(--j);min-width:0;}
.choice__pic{position:relative;aspect-ratio:4 / 3;margin:0;}
.choice__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.choice__badge{position:absolute;top:0;right:0;z-index:1;width:clamp(96px,9vw,140px);padding:10px;background:var(--bg);}
.choice__badge svg{width:100%;height:auto;}
.choice__body{display:flex;flex-direction:column;gap:18px;}
.choice__body p{max-width:56ch;}
.choice__body .link,.choice__body .btn{align-self:flex-start;margin-top:auto;}
.choice__note{font-size:var(--fs-small);color:var(--soft);}
.choice.is-live .choice__panels{display:block;}
.choice.is-live .choice__panel{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:none;}
.choice.is-live .choice__pic{grid-column:1 / 8;aspect-ratio:auto;min-height:clamp(360px,36vw,560px);}
.choice.is-live .choice__body{grid-column:8 / 13;padding:clamp(22px,2.6vw,40px);}

/* 23h Kleinteile ------------------------------------------------------------------------------------- */
/* Kennwerte: <dl class="specs"><div><dt>Wirkung</dt><dd>ruhig, großzügig</dd></div>…</dl> – Zeilen als Tonstufe, auf jeder Fläche */
.specs{display:grid;gap:4px;margin:0;}
.specs > div{display:grid;grid-template-columns:minmax(6.5em,34%) minmax(0,1fr);gap:4px 14px;padding:11px 14px;background:var(--tone-on);}
.specs dt{font-size:var(--fs-small);font-weight:600;line-height:1.5;padding-top:.15em;}
.specs dd{margin:0;line-height:1.45;}
/* Vergleichstabelle: <div class="table-scroll" tabindex="0" role="region" aria-label="…"><table class="data-table">…
   Zellen sind Kacheln mit Fuge. --stack: am Handy jede Zeile als Block (td braucht data-label="Spaltenname"). */
.table-scroll{overflow-x:auto;overscroll-behavior-x:contain;}
.table-scroll:focus-visible{outline-offset:4px;}
.data-table{--gap-c:var(--bg);width:100%;min-width:var(--table-min,0);border-collapse:separate;border-spacing:0;font-size:var(--fs-body);line-height:1.45;}
.data-table th,.data-table td{padding:14px 18px;text-align:left;vertical-align:top;background:var(--tile);border:0 solid var(--gap-c);border-width:0 var(--j) var(--j) 0;}
.data-table tr > :last-child{border-right-width:0;}
.data-table tbody tr:last-child > *{border-bottom-width:0;}
.data-table thead th{background:var(--tile-2);font:600 var(--fs-lead)/1.2 var(--serif);letter-spacing:-.01em;vertical-align:bottom;}
.data-table thead th:first-child:empty,.data-table thead td:first-child{background:transparent;}
.data-table tbody th{width:18%;font-weight:600;background:var(--tile-2);}
.data-table caption{caption-side:top;text-align:left;padding-bottom:12px;font-weight:600;}
.data-table--wide{--table-min:760px;}
.sec--band .data-table{--gap-c:var(--tile);}
/* Liste mit gefülltem Quadrat */
.list{display:grid;gap:8px;margin:0;padding:0;list-style:none;}
.list > li{position:relative;padding-left:22px;}
.list > li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;background:currentColor;opacity:.6;}
.list--tight{gap:4px;}
/* Hinweis-Zeile (z. B. Fußbodenheizung): gefüllte Fläche, kein Rahmen */
.hint{display:block;max-width:72ch;padding:16px 20px;background:var(--tile-2);}
.hint a{font-weight:600;text-decoration-thickness:2px;text-underline-offset:.25em;}
.t--paper .hint,.tile--paper .hint{background:var(--tone-on);}
/* Knopfreihe + weitere Knöpfe (eckig, gefüllt) */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;}
.btn svg{width:20px;height:20px;flex:none;}
.btn--quiet{background:var(--tone-on-2);color:inherit;}
.btn--paper{background:var(--paper);color:var(--on-paper);}
.btn--accent{background:var(--accent);color:var(--on-accent);}
@media (hover:hover) and (pointer:fine){
  .btn--quiet:hover{background:color-mix(in srgb,currentColor 24%,transparent);}
  .btn--paper:hover{background:#D9DDD8;}
  .btn--accent:hover{background:var(--accent-hover);}
}

/* 23i Bildwand ------------------------------------------------------------------------------------------
   <div class="photo-wall"><div class="photo-wall__row" style="--h:420px">
     <figure class="photo-wall__item" style="--r:1.333">{{img}}<figcaption>Raum, Material</figcaption></figure>…</div></div>
   --r = Breite/Höhe des Fotos (Breite in der Reihe), --h = Reihenhöhe. Ohne __row: eine Reihe. Mobil: erstes Bild und
   .photo-wall__item--big volle Breite, die übrigen zu zweit. */
.photo-wall{--h:clamp(280px,30vw,460px);display:flex;flex-direction:column;gap:var(--j);}
.photo-wall:not(:has(> .photo-wall__row)){flex-direction:row;}
.photo-wall__row{display:flex;gap:var(--j);}
.photo-wall__item{position:relative;flex:var(--r,1.333) 1 0;min-width:0;margin:0;overflow:clip;background:var(--tile-2);}
.photo-wall__item img{width:100%;height:var(--h);object-fit:cover;transition:opacity .4s ease,scale .9s var(--ease-out);}
.photo-wall__item figcaption{position:absolute;left:0;bottom:0;max-width:calc(100% - 16px);padding:9px 13px;background:var(--bg);font-size:var(--fs-small);line-height:1.35;}
@media (hover:hover) and (pointer:fine){
  .photo-wall:has(.photo-wall__item:hover) .photo-wall__item:not(:hover) img{opacity:.55;}
  .photo-wall__item:hover img{scale:1.03;}
}

/* 23j Häufige Fragen -------------------------------------------------------------------------------------
   <section class="sec faq" id="faq"><div class="faq__head"><h2>…</h2><p>…</p></div><div class="faq__list">
   <details class="faq__item" open><summary><span class="faq__q">Frage?</span><span class="faq__plus" aria-hidden="true"></span></summary>
   <div class="faq__a"><p>Antwort</p></div></details>…</div></section> */
.faq{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px var(--j);align-items:start;}
.faq__head{grid-column:1 / 5;position:sticky;top:calc(var(--hdr) + var(--j));display:flex;flex-direction:column;gap:18px;padding-top:6px;}
.faq__head p{max-width:40ch;}
.faq__head .link{align-self:flex-start;}
.faq__list{grid-column:5 / 13;display:grid;gap:6px;}
.faq > .faq__list:only-child{grid-column:1 / -1;}
.faq__item{background:var(--tile);transition:background-color var(--t-hover) ease;}
.faq__item[open]{background:var(--tile-2);}
.faq__item summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px;padding:14px var(--pad);
  cursor:pointer;list-style:none;font:600 var(--fs-lead)/1.2 var(--serif);letter-spacing:-.01em;
}
.faq__item summary::-webkit-details-marker{display:none;}
@media (hover:hover) and (pointer:fine){.faq__item:not([open]) summary:hover{background:var(--tile-2);}}
.faq__q{text-wrap:balance;}
.faq__plus{position:relative;flex:none;width:18px;height:18px;}
.faq__plus::before,.faq__plus::after{content:"";position:absolute;left:0;top:8px;width:18px;height:2px;background:currentColor;transition:transform var(--t-ui) var(--ease-out);}
.faq__plus::after{transform:rotate(90deg);}
.faq__item[open] .faq__plus::after{transform:rotate(0deg);}
.faq__a{display:grid;gap:14px;max-width:66ch;padding:0 var(--pad) calc(var(--pad) + 4px);}

/* 23k Ablauf als Treppe ------------------------------------------------------------------------------------
   <ol class="steps-row" role="list"><li class="step"><h3 class="step__name">Anfrage</h3><p>…</p></li>…</ol>
   Reihenfolge über Position und Ton: jede Stufe höher und heller, die letzte (fertig) in Papier. Bis 6 Stufen. */
.steps-row{--rise:clamp(24px,2.6vw,44px);--step-h:clamp(300px,25vw,380px);display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--j);align-items:end;margin:0;padding:0;list-style:none;}
.steps-row > li{--k:0;--tone:var(--g1);display:flex;flex-direction:column;gap:12px;min-height:calc(var(--step-h) + var(--k) * var(--rise));padding:var(--pad);background:var(--tone);color:var(--ink);}
.steps-row > li:nth-child(2){--k:1;--tone:var(--g2);}
.steps-row > li:nth-child(3){--k:2;--tone:var(--g3);}
.steps-row > li:nth-child(4){--k:3;--tone:var(--g4);}
.steps-row > li:nth-child(5){--k:4;--tone:var(--g5);}
.steps-row > li:nth-child(6){--k:5;--tone:var(--graphite);}
.steps-row > li:last-child:not(:first-child){background:var(--paper);color:var(--on-paper);}
.step__name{font:600 var(--fs-lead)/1.15 var(--serif);letter-spacing:-.01em;}
.steps-row p{max-width:44ch;}

/* 23l Verwandte Seiten ---------------------------------------------------------------------------------------
   <ul class="related"><li><a class="related__item" href="…"><span class="related__pic">{{img}}</span>
   <span class="related__body"><h3 class="related__name">Treppen</h3><span class="related__text">…</span></span>
   <svg class="related__arrow" aria-hidden="true"><use href="#i-arrow"/></svg></a></li>…</ul>
   Ein Eintrag mit Foto wird groß (links, zwei Reihen), die übrigen stehen rechts davon bzw. zu dritt. */
.related{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--j);margin:0;padding:0;list-style:none;}
.related > li{grid-column:span 4;display:flex;min-width:0;}
.related > li:has(.related__pic){grid-column:1 / 8;grid-row:span 2;}
.related > li:has(.related__pic) ~ li{grid-column:8 / 13;}
.related__item{
  position:relative;flex:1 1 auto;display:flex;flex-direction:column;gap:12px;min-height:200px;padding:var(--pad);
  background:var(--tile);color:var(--ink);text-decoration:none;
  transition:background-color var(--t-hover) ease,transform var(--t-press) var(--ease-out);
}
.related__item:active{transform:scale(.99);}
.related__item:has(.related__pic){display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);padding:0;gap:0;}
.related__pic{position:relative;display:block;min-height:320px;overflow:clip;background:var(--tile-2);}
.related__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:scale .9s var(--ease-out);}
.related__body{display:flex;flex-direction:column;gap:12px;}
.related__item:has(.related__pic) .related__body{padding:var(--pad) var(--pad) 84px;}
.related__name{font:600 clamp(26px,2.2vw,36px)/1.05 var(--serif);letter-spacing:-.02em;}
.related__text{display:block;max-width:44ch;margin:0;}
.related__arrow{width:30px;height:30px;margin-top:auto;align-self:flex-end;transition:transform var(--t-ui) var(--ease-out);}
.related__item:has(.related__pic) .related__arrow{position:absolute;right:var(--pad);bottom:var(--pad);}
.related__more{margin-top:clamp(20px,2vw,28px);max-width:72ch;}
.related__more a{font-weight:600;text-decoration-thickness:2px;text-underline-offset:.25em;}
@media (hover:hover) and (pointer:fine){
  .related__item:hover{background:var(--tile-2);}
  .related__item:hover .related__arrow{transform:translateX(6px);}
  .related__item:hover .related__pic img{scale:1.04;}
  .related__item:hover .related__name{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.18em;}
}

/* 23m Abschluss-Aktion: Reihe .cta wie Startseite (Partial cta-band = Startseite, cta-page = Unterseiten,
   eigene Fassung = Markup kopieren). Ergänzung: kleine Zeilen unter den Knöpfen. */
.cta__meta{display:grid;gap:2px;font-size:var(--fs-small);line-height:1.45;font-weight:500;}
.cta__row:has(.cta__meta){height:auto;min-height:380px;}
.cta__row:has(.cta__meta) .cta__flank--pic img{position:absolute;inset:0;}

/* 23n Textseiten -----------------------------------------------------------------------------------------------
   <div class="prose-board"><nav class="prose-board__side" aria-label="Auf dieser Seite">…</nav>
   <div class="prose-board__main"><div class="prose">…</div></div></div>  · .note = PRÜFEN-Hinweis */
.prose-board{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--j);align-items:start;}
.prose-board__side{grid-column:1 / 4;position:sticky;top:calc(var(--hdr) + var(--j));display:grid;gap:var(--j);}
.prose-board__side > .t{padding:var(--pad);}
.prose-board__main{grid-column:4 / 13;padding:clamp(24px,4.4vw,72px);background:var(--tile);}
.prose-board:not(:has(.prose-board__side)) .prose-board__main{grid-column:1 / -1;}
.toc{display:grid;gap:4px;margin:0;padding:0;list-style:none;}
.toc a{display:block;padding:10px 14px;background:var(--tile);text-decoration:none;font-size:var(--fs-small);font-weight:600;line-height:1.35;transition:background-color var(--t-hover) ease;}
@media (hover:hover) and (pointer:fine){.toc a:hover{background:var(--tile-2);}}
.prose{max-width:68ch;}
.prose > * + *{margin-top:1em;}
.prose h2{font-size:clamp(28px,2.3vw,38px);line-height:1.08;margin-top:2.2em;}
.prose h3{font-size:var(--fs-lead);margin-top:1.8em;}
.prose h4{font:600 var(--fs-body)/1.4 var(--sans);margin-top:1.4em;}
.prose > :first-child{margin-top:0;}
.prose h2 + *,.prose h3 + *,.prose h4 + *{margin-top:.6em;}
.prose ul,.prose ol{padding-left:1.35em;}
.prose li + li{margin-top:.35em;}
.prose li::marker{color:var(--soft);}
.prose a{font-weight:500;text-decoration-thickness:2px;text-underline-offset:.22em;overflow-wrap:anywhere;}
.prose strong{font-weight:600;}
.prose address{line-height:1.6;}
.prose .lead{font-size:var(--fs-lead);}
.prose .small{font-size:var(--fs-small);color:var(--soft);}
.note{display:block;max-width:68ch;padding:14px 18px;background:var(--graphite-0);color:var(--on-graphite);font-size:16px;line-height:1.5;}
.note strong{font-weight:600;}

/* 23 Responsive: Tablet (≤ 1099 px) ------------------------------------------------------------------------------ */
@media (max-width:1099px){
  .sec-head > h2,.sec-head > .giant{grid-column:1 / -1;}
  .sec-head > :not(h2):not(.giant){grid-column:1 / 10;}

  .page-board__grid,.page-board--text .page-board__grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;height:auto;min-height:0;}
  .page-board__main,.page-board--text .page-board__main{grid-column:1 / -1 !important;grid-row:auto !important;min-height:400px;}
  .page-board__pic{grid-column:1 / -1;grid-row:auto;aspect-ratio:16 / 10;}
  .page-board__pic--b{grid-column:1;aspect-ratio:auto;}
  .page-board__fact,.page-board__call,.page-board--text .page-board__fact,.page-board--text .page-board__call{grid-row:auto !important;min-height:180px;}
  .page-board__fact,.page-board--text .page-board__fact{grid-column:1 !important;}
  .page-board__call,.page-board--text .page-board__call{grid-column:2 !important;}
  .page-board__grid:not(:has(.page-board__call)) .page-board__fact,
  .page-board__grid:not(:has(.page-board__fact,.page-board__pic--b)) .page-board__call{grid-column:1 / -1 !important;}

  .tile{grid-column:span 6;}
  .tile--quarter{grid-column:span 6;}
  .tile--wide,.tile--full{grid-column:1 / -1;}

  .feature-tiles > *,.feature-tiles > :first-child:nth-last-child(5) + *{grid-column:span 6;}
  .feature-tiles > :last-child:nth-child(odd){grid-column:1 / -1;}
  .feature-tiles__pic,.feature-tiles--flip .feature-tiles__pic{grid-column:1 / -1 !important;grid-row:auto;min-height:0;aspect-ratio:16 / 9;}
  .feature-tiles__list,.feature-tiles--flip .feature-tiles__list{grid-column:1 / -1 !important;grid-row:auto;}
  .feature-tiles__pic--stack{aspect-ratio:auto;grid-template-columns:1fr 1fr;grid-auto-rows:auto;}
  .feature-tiles__pic--stack > figure{aspect-ratio:4 / 5;min-height:0;}

  .split-tile__pic,.split-tile--flip .split-tile__pic,.split-tile--even .split-tile__pic,.split-tile--even.split-tile--flip .split-tile__pic{grid-column:1 / -1;grid-row:auto;min-height:0;aspect-ratio:16 / 10;}
  .split-tile__body,.split-tile--flip .split-tile__body,.split-tile--even .split-tile__body,.split-tile--even.split-tile--flip .split-tile__body{grid-column:1 / -1;grid-row:auto;}

  .choice.is-live .choice__pic{grid-column:1 / -1;min-height:0;aspect-ratio:16 / 10;}
  .choice.is-live .choice__body{grid-column:1 / -1;}

  .photo-wall{--h:300px;}
  .faq{display:block;}
  .faq__head{position:static;margin-bottom:28px;}
  .faq__head p{max-width:60ch;}

  .steps-row{--indent:4.5%;grid-auto-flow:row;grid-auto-columns:auto;align-items:stretch;}
  .steps-row > li{min-height:0;margin-left:calc(var(--k) * var(--indent));}

  .related > li,.related > li:has(.related__pic) ~ li{grid-column:span 6;}
  .related > li:has(.related__pic){grid-column:1 / -1;grid-row:auto;}

  .prose-board__side{grid-column:1 / -1;position:static;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
  .prose-board__main{grid-column:1 / -1;}
}

/* 23 Responsive: Handy (≤ 599 px) – eigene Komposition je Baustein ------------------------------------------------ */
@media (max-width:599px){
  .sec-head{display:block;margin-bottom:24px;}
  .sec-head > * + *{margin-top:14px;}
  .sec-head--stack > p{font-size:var(--fs-body);}

  .page-board__grid{gap:var(--j);}
  .page-board__main{min-height:min(440px,62svh);gap:16px;}
  .page-board--text .page-board__main{min-height:min(320px,46svh);gap:16px;}
  .page-board__lead{font-size:var(--fs-body);line-height:1.45;}
  .page-board__actions .btn{flex:1 1 auto;}
  .page-board__pic{aspect-ratio:4 / 3;}
  .page-board__pic--b{grid-column:1 / -1;aspect-ratio:4 / 3;}
  .page-board__fact,.page-board__call,.page-board--text .page-board__fact,.page-board--text .page-board__call{grid-column:1 / -1 !important;min-height:0;padding:18px;}
  .page-board__call{min-height:120px;}

  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));}
  .tile,.tile--half,.tile--wide,.tile--full{grid-column:1 / -1;min-height:0;}
  .tile--quarter{grid-column:span 1;min-height:150px;padding:16px;}
  .tile--tall{grid-row:auto;}
  .tile--photo{min-height:0;aspect-ratio:4 / 3;}
  .tile--go{min-height:150px;}

  .feature-tiles,.feature-tiles__list{display:flex;flex-direction:column;}
  .feature{min-height:0;gap:8px;}
  .feature-tiles__pic:not(.feature-tiles__pic--stack),.feature-tiles--flip .feature-tiles__pic:not(.feature-tiles__pic--stack){aspect-ratio:4 / 3;}
  .feature-tiles__pic--stack{gap:var(--j);grid-template-columns:1fr;}
  .feature-tiles__pic--stack > figure{aspect-ratio:4 / 3;}            /* Handy: Fotos untereinander, Unterschrift verdeckt wenig */
  .tile--quarter.tile--photo{grid-column:1 / -1;min-height:240px;}     /* Foto-Viertel wären am Handy zu klein */

  .split-tile{display:flex;flex-direction:column;}
  .split-tile__pic{aspect-ratio:4 / 3 !important;}
  .split-tile__body{padding:20px 18px 24px;}

  .switch__opt{flex:1 1 0;min-width:max-content;padding:0 14px;}
  .choice__panels{grid-template-columns:1fr;}
  .choice.is-live .choice__panel{display:flex;flex-direction:column;}
  .choice__pic,.choice.is-live .choice__pic{aspect-ratio:4 / 3;}
  .choice.is-live .choice__body{padding:20px 18px 24px;}
  .choice__badge{width:88px;padding:8px;}

  .specs > div{grid-template-columns:1fr;gap:0;padding:10px 12px;}
  .data-table th,.data-table td{padding:12px 14px;}
  .data-table--stack,.data-table--stack tbody,.data-table--stack tr,.data-table--stack th,.data-table--stack td{display:block;width:auto;border:0;}
  .data-table--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
  .data-table--stack tbody{display:grid;gap:var(--j);}
  .data-table--stack tbody th{background:var(--tile-2);font-size:var(--fs-lead);font-family:var(--serif);font-weight:400;}
  .data-table--stack tbody th{width:auto;}
  .data-table--stack td{display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:12px;}
  .data-table--stack td + td{margin-top:2px;}
  .data-table--stack td::before{content:attr(data-label);font-size:var(--fs-small);font-weight:600;line-height:1.6;}
  .data-table:not(.data-table--stack){--table-min:540px;}
  .data-table--stack{min-width:0 !important;}

  .hint{padding:14px 16px;}
  .actions .btn{flex:1 1 auto;}

  .photo-wall,.photo-wall:not(:has(> .photo-wall__row)){display:grid;grid-template-columns:1fr 1fr;gap:var(--j);}
  .photo-wall__row{display:contents;}
  .photo-wall__item{display:flex;flex-direction:column;background:none;}
  .photo-wall__item img{height:170px;}
  .photo-wall > .photo-wall__item:first-child,.photo-wall > .photo-wall__row:first-child > .photo-wall__item:first-child,.photo-wall__item--big{grid-column:1 / -1;}
  .photo-wall > .photo-wall__item:first-child img,.photo-wall > .photo-wall__row:first-child > .photo-wall__item:first-child img,.photo-wall__item--big img{height:240px;}
  .photo-wall__item figcaption{position:static;max-width:none;padding:8px 0 4px;background:none;}

  .faq__head{margin-bottom:20px;gap:14px;}
  .faq__item summary{min-height:64px;padding:12px 16px;gap:14px;font-size:20px;}
  .faq__a{padding:0 16px 20px;}

  .steps-row{--indent:12px;}
  .steps-row > li{padding:16px 18px 20px;gap:8px;}

  .related{display:flex;flex-direction:column;}
  .related__item{min-height:0;}
  .related__item:has(.related__pic){display:flex;flex-direction:column;}
  .related__pic{min-height:0;aspect-ratio:3 / 2;}
  .related__item:has(.related__pic) .related__body{padding:18px 18px 64px;}
  .related__arrow{width:26px;height:26px;}

  .cta__meta{margin-top:4px;}

  .prose-board{display:flex;flex-direction:column;}
  .prose-board__side{display:grid;grid-template-columns:1fr;}
  .prose-board__main{padding:22px 18px 28px;}
  .prose h2{font-size:26px;}
}

/* ==========================================================================
   24 Weiche Ebene (3. Runde, 25.10.2026): Vorlage „weiche Karten“ in Blesius-Farben
   Weiße Karten mit großen Radien auf hellem Estrichgrau, Knöpfe als Pillen (Hauptknopf Graphit mit orangem
   Kreis), schwebende Kopfleiste. Ändert nur Form und Farbe der Bausteine, keine Abläufe, keine Animationen.
   ========================================================================== */

/* Karten und Flächen: Radius, weiße Karten mit Haarlinie */
.t,.tile,.feature,.faq__item,.related__item,.steps-row > li,.prose-board__main,.page-board__pic,.split-tile__pic,
.choice__pic,.feature-tiles__pic,.photo-wall__item,.wall__item img,.compare,.cmp-tile,.acc__stage{border-radius:var(--r);}
.t:not([class*="t--"]),.tile:not([class*="tile--"]),.feature:not([class*="feature--"]),.faq__item,.related__item,
.prose-board__main{box-shadow:inset 0 0 0 1px var(--line);}
.t--photo,.tile--photo,.related__pic,.split-tile__pic,.choice__pic,.feature-tiles__pic{overflow:clip;}
.related__item:has(.related__pic){overflow:clip;}
.specs > div{border-radius:10px;}
.hint{border-radius:var(--r-s);}
.toc a{border-radius:12px;}
.bar__items li{border-radius:6px;}
/* Beschriftungen auf Fotos: weiße Pille statt ausgesparter Ecke */
.page-board__cap,.tile__cap,.split-tile__cap,.choice__cap,.photo-wall__item figcaption,.about__cap,
.about__team figcaption,.about__crew figcaption,.tp-plan__label{
  left:12px;bottom:12px;background:rgba(255,255,255,.94);border-radius:8px;
}
.tp-plan__label{top:12px;bottom:auto;}
.compare__tag{top:14px;padding:8px 12px;border-radius:8px;background:rgba(255,255,255,.94);}
.compare__tag--before{left:14px;}
.compare__tag--after{right:14px;background:var(--ink);color:#FFFFFF;}
.compare__handle{width:4px;background:#FFFFFF;box-shadow:0 0 0 1px rgba(35,38,37,.12);}
.compare__knob{border-radius:50%;box-shadow:0 8px 20px rgba(0,0,0,.25),0 0 0 5px rgba(255,255,255,.85);}
.choice__badge{background:#FFFFFF;border-radius:0 var(--r) 0 var(--r-s);}
.faq__item[open]{background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--line);}
.faq__plus{width:34px;height:34px;border-radius:50%;background:var(--tile-2);transition:background-color var(--t-hover) ease;}
.faq__plus::before,.faq__plus::after{left:11px;top:16px;width:12px;}
.faq__item[open] .faq__plus{background:var(--ink);color:var(--accent);}
.switch{gap:6px;padding:5px;background:var(--tile-3);border-radius:12px;width:max-content;max-width:100%;}
.switch__opt{min-height:48px;padding:0 22px;border-radius:8px;background:transparent;}
.switch__opt[aria-checked="true"]{background:#FFFFFF;color:var(--ink);box-shadow:0 1px 2px rgba(35,38,37,.08),0 4px 10px rgba(35,38,37,.06);}
@media (hover:hover) and (pointer:fine){.switch__opt[aria-checked="false"]:hover{background:rgba(255,255,255,.5);}}

/* Knöpfe als Pillen; Haupt-Knöpfe ohne eigenes Symbol bekommen den runden Pfeil rechts */
.btn{border-radius:10px;}
.btn--ink:not(:has(svg)),.btn--accent:not(:has(svg)){gap:16px;padding:8px 8px 8px 26px;}
.btn--ink:not(:has(svg))::after,.btn--accent:not(:has(svg))::after{
  content:"";flex:none;width:36px;height:36px;border-radius:7px;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23232625' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.btn--accent:not(:has(svg))::after{background-color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
@media (hover:hover) and (pointer:fine){
  .btn--ink:hover{background:#353937;}
  .btn--ink:not(:has(svg)):hover::after,.btn--accent:not(:has(svg)):hover::after{transform:rotate(-45deg);}
}
.btn--ink{box-shadow:none;}

/* Kopf: schwebende, halbtransparente Leiste mit Logo, Menü, Telefon und Hauptknopf */
.hdr{padding:14px max(var(--m),calc((100% - var(--max)) / 2)) 14px;background:transparent;pointer-events:none;}
.hdr > *{pointer-events:auto;}
.hdr__row{
  align-items:center;gap:20px;height:72px;padding:0 10px 0 22px;border-radius:var(--r);
  background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),var(--shadow-float);
}
.hdr__logo{flex:0 0 auto;display:block;padding:0;}
.hdr__logo img{width:auto;height:54px;}
.hdr__bar{flex:1 1 auto;justify-content:center;padding:0;background:none;}
.nav__item{height:72px;}
.nav__link{color:var(--soft);font-weight:500;transition:color var(--t-hover) ease,text-decoration-color var(--t-hover) ease;}
.nav__link[aria-current]{color:var(--ink);}
@media (hover:hover) and (pointer:fine){.nav__link:hover{color:var(--ink);text-decoration-color:transparent;}}
.hdr__tel{flex:0 0 auto;flex-direction:row;align-items:center;gap:10px;padding:0 4px;background:none;text-decoration:none;}
.hdr__ico{display:grid;place-items:center;width:40px;height:40px;border-radius:8px;background:var(--tile-2);}
.hdr__ico svg{width:19px;height:19px;}
.hdr__tel-txt{display:flex;flex-direction:column;gap:1px;line-height:1.2;}
.hdr__status{font-size:13px;}
.hdr__cta{flex:0 0 auto;min-height:52px;font-size:15px;}
.hdr__cta.btn--ink:not(:has(svg))::after{width:32px;height:32px;}
.hdr__menu{height:48px;padding:0 16px;border-radius:10px;background:var(--tile-2);}
.dropdown{top:calc(100% - 4px);padding:10px;border-radius:var(--r);background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--line),var(--shadow-float);}
.dropdown__list a{border-radius:var(--r-s);background:var(--tile-2);}
.dropdown__all{border-radius:var(--r-s);background:var(--paper);}
.mnav__list,.mnav__sub,.mnav__foot{gap:6px;}
.mnav .t{border-radius:10px;}
/* Handy-Menü kompakt: passt ohne Scrollen auf den Bildschirm */
.mnav__link{font-size:23px;padding:13px 18px;}
.mnav__sub a{padding:10px 16px;font-size:16px;}
.mnav__foot{margin-top:6px;}
.mnav__cta{font-size:18px;padding:15px 18px;}
.mnav__tel{padding:12px 16px;}
.mnav__hours{padding:10px 16px;}
.hdr.is-open{background:var(--bg);}
@media (max-width:1279px){.hdr__status{display:none;}}
@media (max-width:1099px){
  .hdr__row{padding:0 8px 0 18px;gap:12px;}
  .hdr__tel{flex:0 0 auto;margin-left:auto;}
  .hdr__cta{display:none;}
}
@media (max-width:599px){
  .hdr{padding:10px var(--m) 6px;}
  .hdr__row{height:60px;padding:0 6px 0 14px;}
  .hdr__logo img{height:34px;}
  .hdr__menu{flex:0 0 auto;height:46px;margin-left:auto;}
  .mnav{height:calc(100dvh - 82px);padding-bottom:calc(84px + env(safe-area-inset-bottom));}
  /* Anfragen, Anrufen und WhatsApp stehen in der Leiste unten: im Menü nicht doppelt */
  .mnav__foot .mnav__cta,.mnav__foot .mnav__tel{display:none;}
  .mnav__foot{grid-template-columns:1fr;}
}

/* Abschluss-Reihe, Fuß, Handy-Leiste */
.cta__flank--pic{margin-left:0;}
.cta__flank:last-child{margin-right:0;}
.ftr__mark,.ftr__go{border-radius:var(--r-l);}
.ftr__mark{background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--line);}
/* Fuß ruhiger: Logo- und Anfrage-Kachel nur halb so hoch (die Anfrage steht schon direkt darüber) */
@media (min-width:600px){.ftr__mark,.ftr__go{min-height:200px;}}
.ftr__mark img{width:min(46%,460px);}
.ftr__go-text{font-size:clamp(26px,2.2vw,34px);}
.ftr__arrow{width:52px;height:52px;}
/* Unterseiten-Kopf: Hauptkarte weiß wie die Karten der Startseite */
.page-board__main.t--paper{background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--line);}
@media (hover:hover) and (pointer:fine){a.ftr__mark:hover{background:#FFFFFF;}}
.ftr__city{font-size:clamp(18px,1.4vw,21px);letter-spacing:-.02em;}
@media (min-width:1100px){
  .ftr__say{grid-column:1 / 4;}
  .ftr__nav{grid-column:4 / 7;}
  .ftr__time{grid-column:7 / 10;}
  .ftr__reach{grid-column:10 / 13;}
}
.mobilebar{background:rgba(241,242,239,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);}
.mobilebar__item{border-radius:12px;}
/* Handy-Leiste: Anrufen und WhatsApp als Symbol über kleiner Beschriftung, damit nichts überläuft (auch bei großer Systemschrift) */
@media (max-width:599px){
  .mobilebar{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.5fr);gap:8px;}
  .mobilebar__item{min-width:0;min-height:56px;white-space:nowrap;}
  .mobilebar__item:not(.mobilebar__item--primary){flex-direction:column;gap:3px;padding:6px 4px;border-radius:18px;font-size:12px;line-height:1.1;}
  .mobilebar__item:not(.mobilebar__item--primary) svg{width:20px;height:20px;}
  .mobilebar__item--primary{font-size:16px;}
}

/* Kleine Kennzeichnung über Abschnitten (Punkt + Wort), sparsam einsetzen */
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:16px;font-size:var(--fs-small);font-weight:600;color:var(--soft);}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(242,129,53,.18);}

/* Unterseiten in der weichen Ebene: H1 kräftig wie auf der Startseite, getönte Karten weiß, Formular- und
   Filter-Felder rund, Fotos der Projekte-Wand rund */
.page-board__h{font-weight:700;letter-spacing:-.035em;}
.tile--tone,.feature--tone{background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--line);}
.cell,.kt-prefill,.ww__opt span,.sb__opt label{border-radius:var(--r-s);}
.cell input:not([type="checkbox"]),.cell select,.cell textarea{border-radius:10px;}
.cell--submit,.cell--submit button{border-radius:var(--r);}
.pj-filter__bar button{border-radius:10px;background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--line);}
.pj-filter__bar button[aria-pressed="true"]{background:var(--ink);color:#FFFFFF;box-shadow:none;}
.pj-filter__bar button[aria-pressed="true"] .pj-filter__n{color:rgba(255,255,255,.75);}
.pj-zoom,.pj-item img{border-radius:18px;}
.lb__bar button,.lb__bar a{border-radius:10px;}

/* 25 Typografie ruhig und schlicht (26.10.2026): alle Überschriften Instrument Sans, mittleres Gewicht, moderate Größen. */
:root{
  --display:"Instrument Sans","Helvetica Neue",Arial,system-ui,sans-serif;
  --serif:"Instrument Sans","Helvetica Neue",Arial,system-ui,sans-serif;
  --fs-body:16px;--fs-lead:clamp(17px,1.3vw,19px);--fs-head:clamp(28px,2.4vw,38px);--fs-say:clamp(20px,1.8vw,26px);
  --fs-h1:clamp(36px,3.8vw,54px);
}
h1,h2{font-family:var(--display);font-weight:500;letter-spacing:-.02em;line-height:1.1;}
.page-board__h{font-weight:500;letter-spacing:-.02em;line-height:1.06;}
.mnav__link{font-family:var(--display);font-weight:500;font-size:22px;letter-spacing:-.01em;}
.btn{font-size:15px;}
@media (max-width:599px){:root{--fs-head:28px;--fs-lead:17px;}}

/* Anfrage-Block unten auf den Unterseiten: ohne Fotoflanken, eine ruhige Fläche über die ganze Breite */
.cta__row{height:auto;min-height:0;}
.cta__main{grid-column:1 / -1;min-height:280px;padding:clamp(28px,4vw,56px) clamp(24px,4vw,64px);border-radius:var(--r-l);}
@media (max-width:599px){.cta__main{grid-row:auto;min-height:0;}}

/* ==========================================================================
   26 Handy-Menü (26.10.2026): Leistungen aufklappbar, Symbole in Markenorange, kleine Bodenfotos
   ========================================================================== */
.mnav__list{gap:8px;}
.mnav .t,.mnav__group{border-radius:var(--r);}
.mnav__link{
  display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:8px 16px 8px 8px;
  font-size:20px;line-height:1.2;text-align:left;
}
.mnav__link[aria-current]{background:var(--tile);font-weight:600;}
.mnav__ico{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:10px;background:#FCEBDD;color:#A64B0C;}
.mnav__ico svg{width:21px;height:21px;}
/* aktuelle Seite: Symbolfeld in vollem Orange */
.mnav__link[aria-current] .mnav__ico,.mnav__group:has([aria-current]) .mnav__ico{background:var(--accent);color:var(--on-accent);}

/* Leistungen: eine Karte, die nach unten aufklappt */
.mnav__group{background:var(--tile);box-shadow:inset 0 0 0 1px var(--line);}
.mnav__toggle{margin:0;border:0;background:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.mnav__group:has([aria-current]) .mnav__toggle{font-weight:600;}
.mnav__txt{flex:1 1 auto;}
.mnav__chev{
  display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--tile-2);
  transition:transform var(--t-ui) var(--ease-out),background-color var(--t-ui) ease;
}
.mnav__chev svg{width:18px;height:18px;}
.mnav__group.is-expanded .mnav__chev{transform:rotate(180deg);background:var(--accent);color:var(--on-accent);}
.js .mnav__group:not(.is-expanded) .mnav__panel{display:none;}
.mnav__panel{padding:0 8px 8px;}
.mnav__group.is-expanded .mnav__panel{animation:mnav-in var(--t-ui) var(--ease-out);}
@keyframes mnav-in{from{opacity:0;transform:translateY(-6px);}}
.mnav__sub{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}
.mnav__sub-wide{grid-column:1 / -1;}
.mnav__sub a{
  display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 8px 6px 6px;border-radius:10px;
  background:var(--bg);color:var(--ink);font-size:16px;font-weight:500;line-height:1.2;text-decoration:none;
  transition:background-color var(--t-hover) ease,transform var(--t-press) var(--ease-out);
}
.mnav__sub a:active{transform:scale(.985);}
.mnav__sub picture{flex:none;}
.mnav__sub img{display:block;width:36px;height:36px;border-radius:7px;object-fit:cover;}
.mnav__sub span{min-width:0;}
.mnav__sub a[aria-current]{background:#FCEBDD;font-weight:600;}
.mnav__all{
  display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;margin-top:6px;padding:11px 14px 11px 14px;
  border-radius:10px;background:#FCEBDD;color:#8F3F0A;font-size:16px;font-weight:600;text-decoration:none;
}
.mnav__all svg{flex:none;width:20px;height:20px;}
.mnav__all[aria-current="page"]{background:var(--accent);color:var(--on-accent);}

/* Öffnungsstatus mit farbigem Punkt: grün = jetzt erreichbar, orange = gerade geschlossen */
.mnav__hours{display:grid;gap:3px;padding:13px 16px;}
.mnav__status{display:flex;align-items:flex-start;gap:10px;font-size:15px;font-weight:600;line-height:1.35;color:var(--ink);}
.mnav__status::before{content:"";flex:none;width:8px;height:8px;margin-top:6px;border-radius:50%;background:#B9BDB8;}
.mnav__status[data-open="ja"]::before{background:#2E9B57;box-shadow:0 0 0 4px rgba(46,155,87,.16);}
.mnav__status[data-open="nein"]::before{background:var(--accent);box-shadow:0 0 0 4px rgba(242,129,53,.18);}
.mnav__times{padding-left:18px;font-size:13px;color:var(--soft);}
@media (max-width:380px){.mnav__sub a{font-size:15px;}}
@media (hover:hover) and (pointer:fine){
  .mnav__sub a:hover{background:var(--tile-2);}
  .mnav__toggle:hover .mnav__chev{background:var(--tile-3);}
  .mnav__group.is-expanded .mnav__toggle:hover .mnav__chev{background:var(--accent);}
}
@media (prefers-reduced-motion:reduce){
  .mnav__group.is-expanded .mnav__panel{animation:none;}
  .mnav__chev{transition:none;}
}
/* Desktop: auch auf einer Leistungsseite ist „Leistungen“ orange unterstrichen (wie das orange Symbolfeld im Handy-Menü) */
.nav__link[aria-current]{text-decoration-color:var(--accent);}