/* Jahresring — Tischlerei demo. Shared stylesheet for all 5 pages.
   Band: saturated spruce green, chroma-forward (not neutral-dark, not paper).
   Type: Big Shoulders (display, condensed industrial) + Karla (everything else). */

@font-face{
  font-family:'Big Shoulders';
  src:url('fonts/bigshoulders-var-latin.woff2?v=e1ffd660') format('woff2-variations');
  font-weight:300 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Karla';
  src:url('fonts/karla-var-latin.woff2?v=3006def8') format('woff2-variations');
  font-weight:400 700; font-style:normal; font-display:swap;
}
/* metric-matched fallbacks so the swap costs no layout shift */
@font-face{
  font-family:'BigShoulders Fallback'; src:local('Arial Narrow'),local('Arial');
  size-adjust:78%; ascent-override:96%; descent-override:24%; line-gap-override:0%;
}
@font-face{
  font-family:'Karla Fallback'; src:local('Segoe UI'),local('Arial');
  size-adjust:97%; ascent-override:98%; descent-override:25%; line-gap-override:0%;
}

:root{
  --ink:#082018;          /* deepest green, page field */
  --ink-2:#0E3A28;        /* raised green surface */
  --ink-3:#17513A;        /* line / hover */
  --bone:#F2EBDD;         /* warm bone text */
  --bone-dim:#BCC7BC;     /* muted text on green */
  --ochre:#E0A73F;        /* sawdust accent — the only bright colour */
  --ochre-deep:#B87D22;
  --rust:#C4552F;         /* used once, for "belegt"/warnings */
  --grain:#0B2A1F;

  --wrap:min(1180px, 100% - 2.5rem);
  --step--1:clamp(.82rem,.79rem + .12vw,.9rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.12rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.5rem);
  --step-2:clamp(1.6rem,1.35rem + 1.2vw,2.4rem);
  --step-3:clamp(2.4rem,1.8rem + 3vw,4.4rem);
  --step-4:clamp(3.2rem,2rem + 6vw,7.5rem);
  --ease:cubic-bezier(.2,.7,.3,1);
  --radius:3px;           /* joinery, not bubbles: near-square everywhere */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:'Karla','Karla Fallback',system-ui,sans-serif;
  font-size:var(--step-0); line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{
  font-family:'Big Shoulders','BigShoulders Fallback',Arial Narrow,sans-serif;
  font-weight:700; line-height:1.0; letter-spacing:.005em; margin:0;
  text-transform:uppercase;
}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1); letter-spacing:.02em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.wrap{width:var(--wrap); margin-inline:auto}
.stack>*+*{margin-top:var(--gap,1rem)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--ochre); outline-offset:3px}
.skip{position:absolute;left:.5rem;top:-4rem;z-index:99;background:var(--ochre);color:var(--ink);padding:.6rem 1rem;font-weight:700;transition:top .15s}
.skip:focus{top:.5rem}

/* ---------- demo notice: a stamped workshop tag, not a banner ---------- */
.demobar{
  background:var(--ochre); color:#241703;
  font-size:var(--step--1); font-weight:600; letter-spacing:.01em;
}
.demobar .wrap{display:flex; gap:.6rem 1.2rem; flex-wrap:wrap; align-items:baseline; padding:.5rem 0}
.demobar b{font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:.8em}
.demobar a{color:#241703; text-underline-offset:3px}

/* ---------- header ---------- */
.site-head{position:sticky; top:0; z-index:40; background:rgba(8,32,24,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--ink-3)}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:64px}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; font-family:'Big Shoulders','BigShoulders Fallback',sans-serif; font-weight:800; font-size:1.45rem; letter-spacing:.06em; text-transform:uppercase}
.brand svg{flex:none}
.nav-toggle{display:none; background:none; border:1px solid var(--ink-3); color:var(--bone); padding:.5rem .7rem; font:inherit; border-radius:var(--radius); cursor:pointer}
.nav-main{display:flex; gap:1.6rem; align-items:center}
.nav-main a{text-decoration:none; font-size:var(--step--1); letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:var(--bone-dim); padding:.4rem 0; position:relative}
.nav-main a:hover,.nav-main a[aria-current="page"]{color:var(--bone)}
.nav-main a[aria-current="page"]::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--ochre)}
@media (max-width:800px){
  .nav-toggle{display:block}
  .nav-main{position:absolute; left:0; right:0; top:100%; background:var(--ink-2); border-bottom:1px solid var(--ink-3); flex-direction:column; align-items:stretch; gap:0; padding:.5rem 1.25rem 1rem; display:none}
  .nav-main[data-open="true"]{display:flex}
  .nav-main a{padding:.75rem 0; border-bottom:1px solid var(--ink-3)}
}

/* ---------- generic sections ---------- */
.section{padding:clamp(3.5rem,7vw,6.5rem) 0}
.section--raised{background:var(--ink-2)}
.eyebrow{font-size:var(--step--1); letter-spacing:.18em; text-transform:uppercase; color:var(--ochre); font-weight:600; margin:0 0 .8rem}
.lede{font-size:var(--step-1); color:var(--bone); max-width:46ch}
.muted{color:var(--bone-dim)}
.rule{height:1px; background:var(--ink-3); border:0; margin:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.5rem;
  font:inherit; font-weight:700; letter-spacing:.02em; text-decoration:none;
  border:1px solid transparent; border-radius:var(--radius); cursor:pointer;
  transition:transform .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn--solid{background:var(--ochre); color:#241703}
.btn--solid:hover{background:#EEBC5C}
.btn--ghost{border-color:var(--ink-3); color:var(--bone)}
.btn--ghost:hover{border-color:var(--ochre); color:var(--ochre)}
.btn[disabled]{opacity:.45; cursor:not-allowed; transform:none}

/* ---------- the measured-drawing card (portfolio + planner share it) ---------- */
.draw{
  background:var(--grain); border:1px solid var(--ink-3); border-radius:var(--radius);
  position:relative; overflow:hidden;
}
.draw::before{ /* millimetre paper, drawn not loaded */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(188,199,188,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(188,199,188,.07) 1px,transparent 1px);
  background-size:16px 16px;
}
.draw svg{position:relative; display:block; width:100%; height:auto}

/* ---------- data rows: the numbers the field hides ---------- */
.facts{display:grid; gap:1px; background:var(--ink-3); border:1px solid var(--ink-3); border-radius:var(--radius)}
.fact{background:var(--ink); padding:1.1rem 1.2rem}
.fact dt{font-size:var(--step--1); letter-spacing:.12em; text-transform:uppercase; color:var(--bone-dim); margin:0 0 .35rem}
.fact dd{margin:0; font-family:'Big Shoulders','BigShoulders Fallback',sans-serif; font-size:var(--step-2); font-weight:700; line-height:1; color:var(--bone)}
.fact dd small{display:block; font-family:inherit; font-size:.5em; font-weight:400; letter-spacing:.04em; color:var(--bone-dim); margin-top:.4rem; text-transform:none}
@media (min-width:700px){ .facts--3{grid-template-columns:repeat(3,1fr)} .facts--2{grid-template-columns:repeat(2,1fr)} }

/* ---------- forms ---------- */
label{display:block; font-size:var(--step--1); letter-spacing:.1em; text-transform:uppercase; color:var(--bone-dim); font-weight:600; margin-bottom:.4rem}
input,select,textarea{
  width:100%; font:inherit; color:var(--bone); background:var(--grain);
  border:1px solid var(--ink-3); border-radius:var(--radius); padding:.7rem .8rem;
}
input:hover,select:hover,textarea:hover{border-color:var(--ink-3)}
textarea{min-height:7rem; resize:vertical}
.field+.field{margin-top:1.1rem}
.err{color:var(--rust); font-size:var(--step--1); margin-top:.35rem; min-height:1.2em}

/* ---------- footer ---------- */
.site-foot{background:var(--grain); border-top:1px solid var(--ink-3); padding:3rem 0 2.5rem; font-size:var(--step--1)}
.site-foot .cols{display:grid; gap:2rem}
@media (min-width:760px){ .site-foot .cols{grid-template-columns:1.4fr 1fr 1fr} }
.site-foot h3{font-size:1rem; letter-spacing:.12em; margin-bottom:.9rem; color:var(--bone)}
.site-foot a{color:var(--bone-dim); text-decoration:none; display:block; padding:.2rem 0}
.site-foot a:hover{color:var(--ochre)}
.site-foot .legal{margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--ink-3); color:var(--bone-dim)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important; transition-duration:.001ms!important}
}

/* ---------- Werkplaner: the mechanism is the first screen ---------- */
.planer-wrap{padding:clamp(2rem,4vw,3.5rem) 0 clamp(3rem,5vw,4.5rem); background:
  radial-gradient(120% 80% at 15% 0%, #0F3D2A 0%, var(--ink) 62%)}
.planer-head{display:grid; gap:1.5rem; margin-bottom:clamp(1.8rem,3vw,2.6rem)}
.planer-head h1{font-size:var(--step-3); max-width:14ch}
.planer-intro{max-width:52ch}
@media (min-width:900px){
  .planer-head{grid-template-columns:1fr 1fr; align-items:end; gap:3rem}
}
.planer{display:grid; gap:1.5rem}
@media (min-width:980px){
  .planer{grid-template-columns:minmax(280px,340px) 1fr; gap:2.5rem; align-items:start}
}
.fs{border:0; padding:0; margin:0 0 1.6rem}
.fs legend{padding:0; font-size:var(--step--1); letter-spacing:.1em; text-transform:uppercase; color:var(--bone-dim); font-weight:600; margin-bottom:.5rem}
.opts{display:grid; gap:.4rem}
.opts--4{grid-template-columns:repeat(2,1fr)}
.opts--3{grid-template-columns:repeat(3,1fr)}
.opt{position:relative; margin:0; text-transform:none; letter-spacing:0; font-size:var(--step-0); font-weight:400; color:var(--bone)}
.opt input{position:absolute; opacity:0; width:0; height:0}
.opt span{display:block; padding:.6rem .7rem; border:1px solid var(--ink-3); border-radius:var(--radius);
  background:var(--grain); cursor:pointer; transition:border-color .15s var(--ease), color .15s var(--ease)}
.opt span:hover{border-color:var(--ochre-deep)}
.opt input:checked+span{border-color:var(--ochre); color:var(--ochre); box-shadow:inset 0 0 0 1px var(--ochre)}
.opt input:focus-visible+span{outline:3px solid var(--ochre); outline-offset:3px}

.riss-box{aspect-ratio:760/460}          /* reserved: the drawing can never shift layout */
.planer-out>*+*{margin-top:1.1rem}
.riss-note{font-size:var(--step--1); max-width:60ch; min-height:2.6em}
.riss-fine{font-size:var(--step--1)}
.planer-cta{display:flex; flex-wrap:wrap; gap:.75rem}

/* ---------- shared page furniture ---------- */
.two-col{display:grid; gap:2rem}
@media (min-width:900px){ .two-col{grid-template-columns:.85fr 1fr; gap:4rem} }
.cards{display:grid; gap:1px; background:var(--ink-3); border:1px solid var(--ink-3); border-radius:var(--radius); margin-top:2rem}
@media (min-width:640px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .cards{grid-template-columns:repeat(4,1fr)} }
.card{background:var(--ink-2); padding:1.5rem 1.4rem 1.6rem}
.card h3{color:var(--bone); margin-bottom:.7rem}
.card-num{margin-top:1.1rem; font-family:'Big Shoulders','BigShoulders Fallback',sans-serif; font-size:1.5rem; font-weight:700; color:var(--ochre); letter-spacing:.02em}
.cards-more{margin-top:2rem}
.steps{list-style:none; counter-reset:s; margin:0; padding:0; display:grid; gap:1.4rem}
.steps li{counter-increment:s; padding-left:3.2rem; position:relative}
.steps li::before{content:counter(s,decimal-leading-zero); position:absolute; left:0; top:-.15em;
  font-family:'Big Shoulders','BigShoulders Fallback',sans-serif; font-size:1.8rem; font-weight:700; color:var(--ochre); opacity:.8}
.steps b{display:block; font-size:var(--step-1); font-family:'Big Shoulders','BigShoulders Fallback',sans-serif; text-transform:uppercase; letter-spacing:.02em; margin-bottom:.25rem}
.cta-band{display:grid; gap:1.5rem; align-items:center}
@media (min-width:820px){ .cta-band{grid-template-columns:1fr auto} }

/* ============================================================
   kontakt.html additions only — the Beratungstermin booking widget.
   Reuses the existing .opt control (see werkplaner rules above);
   these just change its layout from a fixed grid to a flowing row,
   and mark a booked slot / closed day as disabled.
   ============================================================ */
.opts--scroll{display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.35rem; -webkit-overflow-scrolling:touch}
.opts--scroll .opt{flex:0 0 auto}
.opts--wrap{display:flex; flex-wrap:wrap; gap:.5rem}
.opts--wrap .opt{flex:0 0 auto}
.opt input:disabled+span{opacity:.4; cursor:not-allowed; text-decoration:line-through}
.draw--panel{padding:1.5rem 1.6rem}

/* ---------- Arbeiten: portfolio filter + technical-drawing cards ---------- */
.werk-filter-row{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1rem 2rem}
.filter-opts{display:flex; flex-wrap:wrap; gap:.5rem .6rem}
.filter-opts .opt{flex:0 0 auto}
.werk-count{margin:0}
.werke-grid{grid-template-columns:1fr}
@media (min-width:640px){ .werke-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:980px){ .werke-grid{grid-template-columns:repeat(3,1fr)} }
.werk-draw{aspect-ratio:4/3}
.werk .eyebrow{margin-bottom:.5rem}

/* ==========================================================================
   Added for werkstatt.html / ablauf.html (Wild Digital Moments demo build).
   Reuses only existing tokens/classes above; nothing here touches them.
   ========================================================================== */

/* reserved space for the two authored inline-SVG diagrams on werkstatt.html,
   same CLS-guard pattern as .riss-box */
.draw--floor{aspect-ratio:800/480}
.draw--weeks{aspect-ratio:800/340}

/* a step on ablauf.html carries an extra small facts grid (decision / cost
   of deciding late) after its muted description; dl has a default browser
   margin that doesn't match the .steps rhythm */
.steps .facts{margin-top:.9rem}

/* FAQ on ablauf.html: <details>/<summary>, no JS accordion. Visual language
   matches .facts/.card (ink-3 hairline gaps between ink cells) */
.faq{display:grid; gap:1px; background:var(--ink-3); border:1px solid var(--ink-3); border-radius:var(--radius); margin-top:2rem}
.faq details{background:var(--ink)}
.faq summary{
  cursor:pointer; list-style:none; padding:1.1rem 1.2rem;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  font-family:'Big Shoulders','BigShoulders Fallback',sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.02em; font-size:var(--step-1); color:var(--bone);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--ochre); font-size:1.4em; line-height:1; flex:none}
.faq details[open] summary::after{content:"\2013"}
.faq summary:focus-visible{outline:3px solid var(--ochre); outline-offset:-3px}
.faq .faq-a{margin:0; padding:0 1.2rem 1.3rem; color:var(--bone-dim); max-width:65ch}

/* Fix: a <fieldset> refuses to shrink below its min-content width, so a horizontal
   day-strip inside one widened the whole layout viewport on mobile (375 -> 913px).
   Flex/grid children need min-width:0 for an inner overflow-x:auto to actually clip. */
.two-col > *, .fs, .fs > *, .opts--scroll{min-width:0}
.opts--scroll{max-width:100%}

/* ---------- 3D viewer + view tabs ---------- */
.views{display:grid; gap:.75rem}
.viewtabs{display:flex; gap:.4rem}
.viewtabs button{
  font:inherit; font-weight:600; font-size:var(--step--1); letter-spacing:.08em; text-transform:uppercase;
  color:var(--bone-dim); background:var(--grain); border:1px solid var(--ink-3);
  border-radius:var(--radius); padding:.5rem .9rem; cursor:pointer;
}
.viewtabs button[aria-selected="true"]{color:var(--ochre); border-color:var(--ochre); box-shadow:inset 0 0 0 1px var(--ochre)}
.stage{position:absolute; inset:0}
.stage canvas{display:block; width:100%; height:100%}
.stage-hint{
  position:absolute; left:0; right:0; bottom:.55rem; margin:0; text-align:center;
  font-size:var(--step--1); color:var(--bone-dim); pointer-events:none;
}
.stage-hint[data-state="loading"]{color:var(--ochre)}
.stage-ctl{display:flex; flex-wrap:wrap; gap:.5rem}
.btn--sm{padding:.5rem .9rem; font-size:var(--step--1)}

/* ==========================================================================
   Added for raum.html (Raumplaner). Reuses .opts/.opt, .fs, .field, .facts,
   .draw, .riss-box, .stage/.stage-ctl and the .two-col/.planer grids above;
   nothing here touches them. Only new rules: the elevation's reserved box,
   the repeating add/remove list shared by walls/openings/pieces/Prüfung,
   and the level colours the brief asks for (--rust / --ochre, both existing
   tokens). Same min-width:0 discipline as the fix noted above applies here.
   ========================================================================== */
.draw--elevation{aspect-ratio:900/520}
.raum-list{display:grid; gap:1px; background:var(--ink-3); border:1px solid var(--ink-3); border-radius:var(--radius); min-width:0}
.raum-row{background:var(--ink); padding:.75rem .9rem; display:flex; align-items:center; justify-content:space-between;
  gap:.6rem 1rem; flex-wrap:wrap; min-width:0; font:inherit; text-align:left; border:0; width:100%; color:var(--bone)}
.raum-row--sel{box-shadow:inset 0 0 0 1px var(--ochre)}
button.raum-row{cursor:pointer}
button.raum-row:hover{background:var(--ink-2)}
.raum-msg{border-left:3px solid var(--rust)}
.raum-msg--hinweis{border-left-color:var(--ochre)}

/* Fix: a real <button class="btn btn--ghost"> (this page's Bearbeiten/Entfernen/
   Zeigen buttons, and werkplaner.js's stage-ctl buttons on index.html) rendered as
   an opaque native button face, because .btn--ghost only ever set border-color and
   color, never a background — <a class="btn"> got transparent for free, a real
   <button> did not. Adding the background here, later in the cascade, fixes every
   page that shares this stylesheet without editing any of them. */
.btn--ghost{background:transparent}

/* ==========================================================================
   Raumplaner, room-first pass (added 2026-07-31, 2nd session). Reuses every
   token/class above (.fs, .field, .opts, .raum-list, .draw, .planer,
   .two-col, .eyebrow) — the Grundriss is drawn with the same fixed-viewBox-
   scaled-to-fit technique as .draw--elevation, just its own aspect ratio,
   so adding it cannot shift any layout (CLS stays 0).
   ========================================================================== */
.draw--grundriss{aspect-ratio:900/640}

/* ==========================================================================
   Raumplaner wizard (added 2026-07-31, 4th session). Reuses every token/
   class above (.fs, .opts/.opt, .btn, .draw, .raum-list, .facts, .eyebrow,
   .two-col, .field) — these are the new step-nav, stepper, picture-button,
   piece-card and profi-details rules only. Same min-width:0 discipline as
   the fix noted earlier in this file applies throughout.
   ========================================================================== */
.wiz-step{padding:clamp(2.4rem,5vw,4rem) 0}
.wiz-step:nth-of-type(even){background:var(--ink-2)}
.wiz-sub{font-size:var(--step-1); margin:1.6rem 0 .8rem}

/* ---- numbered step nav: tappable, wraps on narrow screens, never causes
   horizontal scroll of the page itself ---- */
.wizard-nav{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.4rem; min-width:0}
.wiz-step-link{
  display:flex; align-items:center; gap:.5rem; text-decoration:none; padding:.5rem .9rem .5rem .6rem;
  border:1px solid var(--ink-3); border-radius:var(--radius); color:var(--bone-dim); flex:0 0 auto;
}
.wiz-step-link:hover{border-color:var(--ochre-deep)}
.wiz-step-num{
  display:flex; align-items:center; justify-content:center; width:1.6rem; height:1.6rem; flex:none;
  border-radius:50%; border:1px solid var(--ink-3); font-family:'Big Shoulders','BigShoulders Fallback',sans-serif;
  font-weight:700; font-size:.95rem;
}
.wiz-step-label{font-size:var(--step--1); letter-spacing:.06em; text-transform:uppercase; font-weight:600}
.wiz-step-link[aria-current="step"]{border-color:var(--ochre); color:var(--bone)}
.wiz-step-link[aria-current="step"] .wiz-step-num{background:var(--ochre); border-color:var(--ochre); color:#241703}
.wiz-step-link.is-done .wiz-step-num{border-color:var(--ochre-deep); color:var(--ochre-deep)}
.wiz-nav-row{justify-content:space-between}
.btn--wide{flex:1 1 auto; justify-content:center}
@media (min-width:640px){ .btn--wide{flex:0 0 auto; min-width:14rem} }

/* ---- Schritt 1: three steppers + live mini floor plan ---- */
.wiz-room-grid{display:grid; gap:1.6rem}
@media (min-width:860px){ .wiz-room-grid{grid-template-columns:1.1fr 1fr} }
.wiz-room-fields{display:grid; gap:1.1rem; align-content:start}
.stepper-field{min-width:0}
.stepper{display:flex; align-items:stretch; gap:.5rem}
.stepper input{text-align:center; flex:1 1 auto; min-width:0}
.stepper-btn{
  flex:0 0 auto; width:2.8rem; font-size:1.3rem; line-height:1; font-weight:700; color:var(--bone);
  background:var(--grain); border:1px solid var(--ink-3); border-radius:var(--radius); cursor:pointer;
}
.stepper-btn:hover{border-color:var(--ochre); color:var(--ochre)}
.wiz-room-preview{min-width:0}
.draw--miniroom{aspect-ratio:300/220}
.wiz-room-colors{display:grid; gap:1rem; grid-column:1/-1}
@media (min-width:640px){ .wiz-room-colors{grid-template-columns:1fr 1fr} }

/* ---- Schritt 2 & 3: picture-buttons (Fenster/Tür/Vorsprung, Objekte) and
   the three big furniture cards. Real <button>s, wrap instead of
   overflowing on a 375px viewport. ---- */
.picbtn-row{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1rem; min-width:0}
.picbtn{
  display:flex; flex-direction:column; align-items:center; gap:.4rem; flex:1 1 7rem; min-width:6rem;
  padding:.9rem .6rem; background:var(--grain); border:1px solid var(--ink-3); border-radius:var(--radius);
  color:var(--bone); cursor:pointer; font:inherit; font-size:var(--step--1); font-weight:600;
}
.picbtn svg{width:2.6rem; height:auto; color:var(--bone-dim)}
.picbtn:hover{border-color:var(--ochre); color:var(--ochre)}
.picbtn:hover svg{color:var(--ochre)}

.piece-cards{display:grid; gap:1px; background:var(--ink-3); border:1px solid var(--ink-3); border-radius:var(--radius); grid-template-columns:1fr}
@media (min-width:640px){ .piece-cards{grid-template-columns:repeat(3,1fr)} }
.piece-card{
  background:var(--ink); padding:1.4rem 1.2rem; display:flex; flex-direction:column; align-items:center; gap:.6rem;
  border:0; color:var(--bone); cursor:pointer; font:inherit; text-align:center; min-width:0;
}
.piece-card:hover{background:var(--ink-2); color:var(--ochre)}
.piece-card svg{width:100%; max-width:9rem; height:auto; color:var(--bone-dim)}
.piece-card:hover svg{color:var(--ochre)}
.piece-card span:not(.piece-card-note){font-family:'Big Shoulders','BigShoulders Fallback',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.02em; font-size:var(--step-1)}
.piece-card-note{display:block; font-size:var(--step--1); color:var(--rust); font-weight:400; text-transform:none; letter-spacing:0; min-height:1.2em}

.piece-editor{margin-top:1.6rem; display:grid; gap:1.1rem}
.piece-editor[hidden]{display:none}   /* our own display:grid above would otherwise beat [hidden]'s UA default */

/* Front pills carry a tiny drawing above a short label, so the group is a
   little wider per item than the plain text .opts pills */
.opts--front{display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem}
@media (min-width:560px){ .opts--front{grid-template-columns:repeat(5,1fr)} }
.opt--front span{display:flex; flex-direction:column; align-items:center; gap:.3rem; text-align:center}
.opt--front em{font-style:normal; font-size:var(--step--1)}

.raum-msg-inline{padding:.6rem .8rem; border-left:3px solid var(--rust); background:var(--grain); min-height:1.2em}
.raum-msg-inline--hinweis{border-left-color:var(--ochre)}
.raum-msg-inline--problem{border-left-color:var(--rust)}

/* "Maße anpassen": exact-cm fields under a placed stuff/objekt row, same
   visual language as .faq (ink-3 hairline, no JS accordion needed) */
.anpassen{background:var(--ink); border-top:1px solid var(--ink-3); padding:0 .9rem}
.anpassen summary{cursor:pointer; list-style:none; padding:.6rem 0; font-size:var(--step--1); color:var(--bone-dim); letter-spacing:.06em; text-transform:uppercase}
.anpassen summary::-webkit-details-marker{display:none}
.anpassen summary::before{content:"+ "; color:var(--ochre)}
.anpassen[open] summary::before{content:"\2013 "}
.anpassen-grid{padding-bottom:.9rem; gap:.8rem}
.anpassen-grid .field{margin:0}

/* ---- Profi details: same visual language as .faq ---- */
.profi{background:var(--ink-2); border:1px solid var(--ink-3); border-radius:var(--radius)}
.profi summary{
  cursor:pointer; list-style:none; padding:1.1rem 1.2rem; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-family:'Big Shoulders','BigShoulders Fallback',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  font-size:var(--step-1); color:var(--bone);
}
.profi summary::-webkit-details-marker{display:none}
.profi summary::after{content:"+"; color:var(--ochre); font-size:1.4em; line-height:1; flex:none}
.profi[open] summary::after{content:"\2013"}
.profi summary:focus-visible{outline:3px solid var(--ochre); outline-offset:-3px}
.profi-body{padding:0 1.3rem 1.6rem; display:grid; gap:1.8rem}
/* Fix: a bare `1fr` track can still respect a radio label's min-content
   width, pushing the grid a sub-pixel past the viewport at 375px (measured:
   375.7px). minmax(0,1fr) is the standard grid-blowout fix, scoped here to
   the profi section only so the shared .opts--3 rule stays untouched for
   every other page. */
.profi-body .opts--3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ==========================================================================
   Free pieces (added 2026-07-31, 5th session): Tisch and Treppe join the
   piece-cards row as a 4th card. Reuses .piece-cards/.piece-card/.draw--
   grundriss/.raum-row/.btn as-is; the single override below just widens
   the cards grid so four fit as comfortably as three did, later in the
   cascade so it wins over the original rule at the same breakpoint
   without editing it.
   ========================================================================== */
@media (min-width:640px){ .piece-cards{grid-template-columns:repeat(4,1fr)} }

/* Same grid-blowout bug the profi section already had, now hit by the
   Treppe form pills: "halbgewendelt"/"viertelgewendelt" are long enough
   that a bare `1fr` track respects their min-content width and pushes the
   page a few px past 375. minmax(0,1fr) + overflow-wrap, scoped to this
   one box so the shared .opts--3 rule everywhere else stays untouched. */
#piece-groesse-opts.opts--3{grid-template-columns:repeat(3,minmax(0,1fr))}
#piece-groesse-opts .opt span{overflow-wrap:break-word}

/* ---------- Planer (planer.html): only what the existing wizard CSS lacks.
   Everything else reuses .wiz-step / .picbtn / .piece-card / .opt / .stepper
   / .raum-msg / .draw--* unchanged. Appended, so no existing rule changes. --- */

/* A tab rendered as a real <button class="opt"> has no :checked to hang the
   selected state on, unlike the radio-backed labels the rest of the site uses. */
.opt--sel>span{border-color:var(--ochre); color:var(--ochre); box-shadow:inset 0 0 0 1px var(--ochre)}
button.opt{appearance:none; -webkit-appearance:none; background:transparent; border:0; padding:0;
  font:inherit; text-align:left; width:100%}
button.opt small{display:block; font-size:var(--step--1); color:var(--bone-dim)}

/* Feature dimension entry: a plain two-up grid that collapses on a phone. */
#feature-masse label,#anzahl-grid label{display:block}
#feature-masse input{width:100%; margin-top:.3rem}

/* The picture-button rows are grouped under headings in step 2, so they need
   a little air the single-row version never did. */
.section--raised h3{margin:1.6rem 0 .7rem}
.section--raised h3:first-child{margin-top:0}

/* Long German labels ("Nein, darf zugebaut werden", "viertelgewendelt") make a
   bare 1fr track respect their min-content width and blow past 375px. Scoped so
   no other page's .opts--3 / .opts--4 changes. */
#feature-zugang.opts--3,#element-art.opts--4,#element-tuerart.opts--4,
#element-funktion.opts--4,#element-glas.opts--4,#piece-front.opts--4{
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){
  #feature-zugang.opts--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  #element-art.opts--4,#element-tuerart.opts--4,#element-funktion.opts--4,
  #element-glas.opts--4,#piece-front.opts--4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
#feature-zugang .opt span,#element-tuerart .opt span{overflow-wrap:break-word; hyphens:auto}

/* The interiors view is wider than it is tall; the shared 760/460 box would
   waste most of it. */
#innen-svg{aspect-ratio:900/400}

/* The plan is monospaced so the columns of numbers line up when it is pasted
   into an email, which is exactly what happens to it. */
#plan-out pre{white-space:pre-wrap; word-break:break-word; margin:0;
  font-family:ui-monospace,'Cascadia Mono','Consolas',monospace;
  background:var(--grain); border:1px solid var(--ink-3); border-radius:var(--radius);
  padding:1.1rem 1.2rem; max-height:60vh; overflow:auto}

/* Nothing may widen the layout viewport: grid children default to min-width:auto. */
#feature-masse>*,#anzahl-grid>*,.picbtn-row>*,.piece-cards>*{min-width:0}

/* The .piece-cards 1px-gap-over-a-background trick draws its hairlines by
   letting the container show through. That works when the cards fill every
   cell; the Planer has nine, so the last row leaves three cells showing as a
   pale empty block. Scoped to that grid: the container goes transparent and
   each card carries its own hairline, so a ragged last row looks deliberate. */
#moebel-cards{background:transparent; border-color:transparent}
#moebel-cards .piece-card{box-shadow:0 0 0 1px var(--ink-3)}

/* ---------- Planer: steps on the left, the room always visible on the right.
   The whole point is that changing something shows its result without
   scrolling. On a phone there is no "side", so the stage sits above the
   controls and sticks to the top of the viewport instead. ---------------- */
.planer-shell{width:var(--wrap); margin-inline:auto; display:grid; gap:1.6rem}
.planer-main{min-width:0}
.planer-main .wiz-step .wrap{width:100%; margin-inline:0}
.planer-stage{min-width:0}
.stage-inner{background:var(--ink-2); border:1px solid var(--ink-3);
  border-radius:var(--radius); padding:1rem 1rem 1.1rem}
.stage-inner>*+*{margin-top:.9rem}
.stage-view[hidden]{display:none}
.planer-stage .viewtabs{flex-wrap:wrap}
.planer-stage .riss-box{background:var(--ink); border-radius:var(--radius)}
.planer-stage #stage-pruefung{display:grid; gap:.5rem; max-height:14rem; overflow-y:auto}
.planer-stage #stage-pruefung:empty{display:none}
.planer-stage .stage-ctl{display:flex; flex-wrap:wrap; gap:.5rem}
#innen-svg{aspect-ratio:900/400}
#stage-3d{aspect-ratio:16/11}
#stage-3d canvas{width:100%; height:100%; display:block}

/* Phone: the stage leads, then the controls. Sticky to the top so a drag in
   the drawing and the pills that change it are on screen together. */
@media (max-width:1023px){
  .planer-shell{display:flex; flex-direction:column}
  .planer-stage{order:-1; position:sticky; top:0; z-index:5;
    background:var(--ink); padding-block:.5rem;
    margin-inline:calc(var(--radius) * -1)}
  .stage-inner{padding:.7rem}
  .planer-stage .riss-box{aspect-ratio:16/10}
  .planer-stage #stage-pruefung{max-height:7rem}
  #stage-note{display:none}
}

@media (min-width:1024px){
  .planer-shell{grid-template-columns:minmax(0,1fr) minmax(360px,.82fr); gap:2.4rem; align-items:start}
  .planer-stage{position:sticky; top:1rem}
  .planer-main .wiz-step{padding-block:0}
  .planer-main .wiz-step+.wiz-step{padding-top:0}
}
@media (min-width:1280px){
  .planer-shell{grid-template-columns:minmax(0,1fr) minmax(440px,.75fr)}
}
/* The Prüfung list scrolls inside the sticky panel; a default scrollbar renders
   as a bright white bar against the dark panel and reads as a broken element. */
.planer-stage #stage-pruefung{scrollbar-width:thin; scrollbar-color:var(--ink-3) transparent}
.planer-stage #stage-pruefung::-webkit-scrollbar{width:8px}
.planer-stage #stage-pruefung::-webkit-scrollbar-track{background:transparent}
.planer-stage #stage-pruefung::-webkit-scrollbar-thumb{background:var(--ink-3); border-radius:4px}

/* One Prüfung list, two homes: in the sticky panel on desktop, at the foot of
   the column on a phone (where the sticky panel has no room for it). */
#pruefung-unten{display:none; padding-block:1.4rem 2rem}
@media (max-width:1023px){
  #pruefung-unten{display:block}
  .planer-stage #stage-pruefung{display:none}
  .planer-stage .riss-box{aspect-ratio:16/9}
}
#pruefung-unten h2{font-size:var(--step-1); margin-bottom:.8rem}

/* The wall strip lives in the dark panel now: a default horizontal scrollbar
   renders as a white bar, and full-width pills mean only one wall is visible
   at a time — the strip is there precisely so you can see and pick all four. */
.planer-stage .opts--scroll{scrollbar-width:thin; scrollbar-color:var(--ink-3) transparent}
.planer-stage .opts--scroll::-webkit-scrollbar{height:8px}
.planer-stage .opts--scroll::-webkit-scrollbar-track{background:transparent}
.planer-stage .opts--scroll::-webkit-scrollbar-thumb{background:var(--ink-3); border-radius:4px}
.planer-stage #wand-strip{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(7.5rem,1fr);
  gap:.4rem; overflow-x:auto}
.planer-stage #wand-strip .opt span{padding:.45rem .55rem; font-size:var(--step--1)}

/* ============================================================
   language switcher — js/i18n.js fills .lang-host in the nav
   The control ships dark-on-dark by default, which is almost right here;
   only the border and the hover take the ochre so it reads as part of the
   same bar. .lang-host keeps its box before the button is injected, so the
   header does not jump on load (CLS).
   ============================================================ */
:root{
  --wdm-lang-bg:rgba(14,58,40,.96);
  --wdm-lang-fg:var(--bone);
  --wdm-lang-border:var(--ink-3);
  --wdm-lang-font:'Karla','Karla Fallback',system-ui,sans-serif;
}
.lang-host{display:inline-flex; min-width:62px; min-height:30px; flex:none}
.wdm-lang__btn{letter-spacing:.06em; text-transform:uppercase; font-weight:600}
.wdm-lang__btn:hover{border-color:var(--ochre); color:var(--ochre)}
.wdm-lang__list li[aria-selected="true"]{color:var(--ochre)}