/* ==========================================================================
   Sofastil Berlin · Planer 2027 (Sofa-Planer und Küchen-Planer)
   Bühne mit 3D-Ansicht links, Schritte rechts. Auf dem Handy: 3D oben, Schritte darunter.
   ========================================================================== */
.planer-seite { background: var(--kalk); min-block-size: 100dvh; padding-block-end: 0 !important; }
.planer { display: grid; grid-template-rows: auto 1fr; min-block-size: 100dvh; }
.planer__leiste { position: sticky; inset-block-start: 0; z-index: 20; display: flex; align-items: center; gap: var(--r-4); padding: 0.6rem var(--rand); background: rgb(233 232 225 / 0.86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--linie); }
.planer__leiste .marke__name { font-size: 1.45rem; }
.planer__titel { font-size: var(--gr-klein); color: var(--grau); padding-inline-start: var(--r-4); border-inline-start: 1px solid var(--linie); }
.planer__leiste .rechts { margin-inline-start: auto; display: flex; gap: 0.35rem; align-items: center; }
@media (max-width: 47.99rem) { .planer__titel { display: none; } .planer__leiste [data-teilen] { padding-inline: 0.75rem; } .planer__leiste [data-teilen] .text { display: none; } }
.planer__koerper { display: grid; grid-template-columns: 1fr; }
@media (min-width: 64rem) { .planer__koerper { grid-template-columns: minmax(0, 1fr) 27.5rem; block-size: calc(100dvh - 3.75rem); } }

/* Bühne */
.planer__buehne { position: relative; min-block-size: 46svh; background: radial-gradient(120% 90% at 50% 62%, #F3F2EC, #E2E0D7 72%); overflow: hidden; }
@media (min-width: 64rem) { .planer__buehne { min-block-size: 0; } }
.planer__buehne canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; cursor: grab; touch-action: none; }
.planer__buehne canvas:active { cursor: grabbing; }
.planer__masse { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.planer__masse line { stroke: var(--tinte); stroke-width: 1; }
.planer__masse .ende { stroke-width: 1; }
.planer__masse text { font: 600 12px var(--schrift-text); fill: var(--tinte); paint-order: stroke; stroke: #F1F0EA; stroke-width: 5px; stroke-linejoin: round; }
.planer__chip { position: absolute; inset-block-start: 1rem; inset-inline-start: 1rem; display: grid; gap: 0.1rem; padding: 0.7rem 1rem; border-radius: 14px; background: var(--glas); border: 1px solid var(--glas-rand); box-shadow: var(--schatten-schwebend); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); max-inline-size: calc(100% - 2rem); }
.planer__chip strong { font-family: var(--schrift-titel); font-weight: 400; font-size: 1.35rem; line-height: 1.1; }
.planer__chip span { font-size: var(--gr-mini); color: var(--grau); font-variant-numeric: tabular-nums; }
.planer__werkzeuge { position: absolute; inset-block-end: 1rem; inset-inline-end: 1rem; display: flex; gap: 0.35rem; padding: 0.3rem; border-radius: var(--rund-pille); background: var(--glas); border: 1px solid var(--glas-rand); box-shadow: var(--schatten-schwebend); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.planer__werkzeuge button, .planer__werkzeuge a { display: inline-flex; align-items: center; gap: 0.4rem; min-block-size: 2.5rem; padding-inline: 0.85rem; border-radius: var(--rund-pille); font-size: var(--gr-mini); color: var(--tinte); text-decoration: none; }
.planer__werkzeuge button:hover, .planer__werkzeuge a:hover { background: rgb(29 31 28 / 0.06); }
.planer__werkzeuge button[aria-pressed="true"] { background: var(--tinte); color: var(--grund); }
.planer__werkzeuge svg { inline-size: 1rem; block-size: 1rem; }
.planer__hinweis { position: absolute; inset-block-end: 1.2rem; inset-inline-start: 1rem; font-size: var(--gr-mini); color: var(--grau); display: inline-flex; gap: 0.4rem; align-items: center; transition: opacity var(--dauer); }
@media (max-width: 47.99rem) { .planer__hinweis { display: none; } }
.planer__grundriss { position: absolute; inset: 0; display: grid; place-items: center; padding: 2rem; background: var(--grund); }
.planer__grundriss[hidden] { display: none; }
.planer__grundriss svg { inline-size: 100%; max-inline-size: 46rem; block-size: auto; max-block-size: 100%; }

/* Seitenleiste mit Schritten */
.planer__leiste-rechts { display: grid; grid-template-rows: auto 1fr auto; background: var(--grund); border-inline-start: 1px solid var(--linie); min-block-size: 0; }
.schritte { display: flex; gap: 0.1rem; padding: 1rem 1rem 0.75rem; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--linie); }
.schritte::-webkit-scrollbar { display: none; }
.schritte button { flex: none; display: inline-flex; align-items: center; gap: 0.4rem; min-block-size: 2.4rem; padding-inline: 0.6rem 0.75rem; border-radius: var(--rund-pille); font-size: 0.84375rem; color: var(--grau); }
.schritte button::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; border: 1.5px solid var(--linie); background: transparent; }
.schritte button[data-erledigt="ja"]::before { background: radial-gradient(circle at 34% 30%, #F1DDB0 0 12%, #CDA866 32%, var(--messing) 55%, #6E5026 100%); border-color: transparent; }
.schritte button[aria-current="step"] { background: var(--tinte); color: var(--grund); }
.schritte button[aria-current="step"]::before { border-color: var(--grund); }
.schritt-inhalt { overflow-y: auto; padding: 1.5rem 1.25rem 2rem; display: grid; gap: 1.75rem; align-content: start; }
.schritt-inhalt :is(h2,:where([data-seo-heading="h2"],[data-seo-caption="h2"])) { font-size: clamp(1.9rem, 1.6rem + 1vw, 2.4rem); }
.schritt-inhalt > p.leise { margin-top: -1rem; font-size: var(--gr-klein); }
.gruppe { display: grid; gap: 0.75rem; }
.gruppe__titel { font-size: var(--gr-klein); color: var(--grau); display: flex; justify-content: space-between; }

/* Formwahl mit Grundriss-Symbolen */
.formen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
.form { display: grid; gap: 0.5rem; justify-items: start; padding: 0.9rem; border-radius: 16px; border: 1px solid var(--linie); background: var(--weiss); text-align: start; transition: border-color var(--dauer-kurz), box-shadow var(--dauer-kurz); }
.form svg { inline-size: 100%; block-size: 4.2rem; color: var(--tinte); }
.form strong { font-weight: 400; font-size: 1rem; }
.form span { font-size: var(--gr-mini); color: var(--grau); }
.form:hover { border-color: var(--grau); }
.form[aria-pressed="true"] { border-color: var(--gruen); box-shadow: 0 0 0 1px var(--gruen) inset; }
.form[aria-pressed="true"] svg { color: var(--gruen); }

/* Maße mit Schieberegler und Zahl */
.mass { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; align-items: center; }
.mass label { font-size: var(--gr-klein); }
.mass output { font-variant-numeric: tabular-nums; font-size: var(--gr-klein); display: flex; align-items: center; gap: 0.35rem; }
.mass .stufe { inline-size: 2rem; block-size: 2rem; border-radius: 50%; border: 1px solid var(--linie); display: grid; place-items: center; background: var(--weiss); }
.mass .stufe svg { inline-size: 0.85rem; block-size: 0.85rem; }
.mass input[type="range"] { grid-column: 1 / -1; inline-size: 100%; accent-color: var(--gruen); block-size: 1.5rem; }
.mass input[type="number"] { inline-size: 4.4rem; text-align: center; min-block-size: 2.25rem; border-radius: 10px; border: 1px solid var(--linie); background: var(--weiss); font-variant-numeric: tabular-nums; }
.hinweis-kasten { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; padding: 0.9rem 1rem; border-radius: 14px; background: var(--kalk); font-size: var(--gr-klein); color: var(--tinte); }
.hinweis-kasten .nagel { margin-top: 0.45rem; }

/* Bezüge */
.reiter { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.reiter button { min-block-size: 2.4rem; padding-inline: 1rem; border-radius: var(--rund-pille); border: 1px solid var(--linie); background: var(--weiss); font-size: 0.875rem; }
.reiter button[aria-pressed="true"] { background: var(--tinte); border-color: var(--tinte); color: var(--grund); }
.stoffe-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
.stoff { display: grid; gap: 0.35rem; justify-items: center; text-align: center; font-size: 0.75rem; color: var(--grau); }
.stoff i { inline-size: 100%; max-inline-size: 4.25rem; aspect-ratio: 1; border-radius: 50%; background: var(--f); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12), inset 0 -8px 14px rgb(0 0 0 / 0.2), inset 0 8px 14px rgb(255 255 255 / 0.14); transition: transform var(--dauer-kurz) var(--kurve); }
.stoff:hover i { transform: scale(1.05); }
.stoff[aria-pressed="true"] i { outline: 2px solid var(--messing); outline-offset: 3px; }
.stoff[aria-pressed="true"] { color: var(--tinte); }

/* Zusammenfassung */
.liste-zusammenfassung { display: grid; gap: 0; border-top: 1px solid var(--linie); font-size: var(--gr-klein); }
.liste-zusammenfassung div { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.7rem; border-bottom: 1px solid var(--linie); }
.liste-zusammenfassung dt { color: var(--grau); }
.liste-zusammenfassung dd { text-align: end; }

/* Fußleiste mit Preis und Weiter */
.planer__fuss { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.75rem; padding: 0.85rem 1.25rem calc(0.85rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--linie); background: var(--grund); }
.preis { display: grid; line-height: 1.15; }
.preis small { font-size: var(--gr-mini); color: var(--grau); }
.preis strong { font-family: var(--schrift-titel); font-weight: 400; font-size: 1.75rem; font-variant-numeric: tabular-nums; }
.preis em { font-style: normal; font-size: 0.6875rem; color: var(--messing-dunkel); }
.planer__fuss .knopf-gruppe { flex-wrap: nowrap; }
@media (max-width: 63.99rem) {
  .planer__leiste-rechts { border-inline-start: 0; }
  .planer__fuss { position: sticky; inset-block-end: 0; z-index: 10; box-shadow: 0 -10px 30px -20px rgb(29 31 28 / 0.4); }
}

/* Wrapped translated floor-plan legend, clear of the summary and view controls. */
.planer__grundriss { grid-template-rows: minmax(0,1fr) auto; gap: .3rem; padding-block: 6rem 4.5rem; }
.planer__legende { font-size: .6875rem; line-height: 1.35; color: var(--grau); }

[data-seo-heading]{display:block}
.kitchen-planner-heading{padding-bottom:0}