/* D14 Werrewerk · Station 4 Kueche umgestalten · editor.css · v0.18 Stand 2026-10-17: Auftritt (große Überschrift, Selbstlauf), Musterplatten
   v0.13: Text und Preisposten ab 16 px, Leiste am Rechner in sich rollbar
   Herkunft: Kopie aus editor/probe/index.html (Stand 2026-10-06), Regeln auf #umgestalten begrenzt,
   Hoehe und Klebe-Kante um die Kopfleiste (--kopf) versetzt. Aenderungen an der Mechanik gehoeren in die Probe. */
#umgestalten { --grund: #14100c; --flaeche: #1d1813; --linie: rgba(243,236,226,.14); --text: #f3ece2; --leise: rgba(243,236,226,.66);
          --messing: #D4A853; }
#umgestalten * { box-sizing: border-box; }
#umgestalten { margin: 0; background: var(--grund); color: var(--text); font: 16px/1.5 Inter, system-ui, sans-serif; }
#umgestalten .editor { display: grid; grid-template-columns: minmax(0, 1fr) 380px; min-height: calc(100vh - var(--kopf)); min-height: calc(100svh - var(--kopf)); }
#umgestalten .buehne { position: relative; background: #000; overflow: hidden; }
#umgestalten .buehne canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; display: block; }
#umgestalten .buehne canvas.neu { opacity: 0; transition: opacity .38s ease; }
#umgestalten .buehne canvas.neu.da { opacity: 1; }
#umgestalten .leiste { background: var(--flaeche); border-left: 1px solid var(--linie); padding: 40px 32px; display: flex; flex-direction: column; gap: 28px; }
#umgestalten .ed-titel { font: 700 26px/1.15 Archivo, sans-serif; margin: 0; letter-spacing: -.01em; }
#umgestalten .einleitung { margin: 8px 0 0; color: var(--leise); }
#umgestalten fieldset { border: 0; margin: 0; padding: 0; }
#umgestalten legend { font: 500 12px/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); margin-bottom: 14px; padding: 0; }
/* v0.18 · Musterkoffer: Fronten und Stein als Musterplatten, leicht gefächert und überlappend. Zeiger hebt eine Platte an, die gewählte
   steht angehoben mit Messingrand und rückt Richtung Küche (am Rechner nach links). Name steht als Etikett auf der Platte. */
#umgestalten .koffer { display: flex; align-items: flex-end; isolation: isolate; padding: 16px 2px 2px; --pb: 86px; --ph: 108px; --ueber: -10px; }
#umgestalten .feld { appearance: none; border: 0; background: none; color: #14100c; padding: 0; cursor: pointer; position: relative; flex: 0 0 auto;
          width: var(--pb); height: var(--ph); margin-left: var(--ueber); border-radius: 6px; transform: rotate(var(--dreh, 0deg));
          transition: transform .22s cubic-bezier(.3,.7,.3,1); font: 600 13px/1.2 Inter, sans-serif; text-align: left; }
#umgestalten .feld:first-child { margin-left: 0; }
#umgestalten .feld:nth-child(1) { --dreh: -1.5deg; } #umgestalten .feld:nth-child(2) { --dreh: 1deg; }
#umgestalten .feld:nth-child(3) { --dreh: -1deg; } #umgestalten .feld:nth-child(4) { --dreh: 1.5deg; }
#umgestalten .feld:not(:last-child) span { right: calc(4px - var(--ueber)); }   /* Etikett bleibt frei von der nächsten Platte */
#umgestalten .feld i { position: absolute; inset: 0; display: block; border-radius: inherit; background: center / cover;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px rgba(243,236,226,.16), 0 8px 18px rgba(0,0,0,.5); transition: box-shadow .2s; }
#umgestalten .feld span { position: absolute; left: 4px; right: 4px; bottom: 5px; padding: 4px 5px; border-radius: 4px; background: rgba(243,236,226,.94);
            hyphens: manual; overflow-wrap: normal; box-shadow: 0 1px 2px rgba(0,0,0,.35); }
/* v0.18 Nachtrag: Angehobene Platten bleiben in der Stapelfolge (kein z-index, kein Seitwärtsrücken). So überdeckt keine Platte je das
   Etikett einer Nachbarin: jede liegt nur über dem rechten Rand ihrer linken Nachbarin, und dort hält das Etikett Abstand. */
#umgestalten .feld:hover, #umgestalten .feld:focus-visible, #umgestalten .feld.zeigt { transform: translateY(-10px) rotate(0deg); }   /* nach links: das Etikett der Nachbarplatte bleibt frei */
#umgestalten .feld[aria-pressed="true"] { transform: translateY(-14px) rotate(0deg); }
#umgestalten .feld[aria-pressed="true"] i { box-shadow: 0 0 0 2px var(--flaeche), 0 0 0 4px var(--messing), 0 12px 24px rgba(0,0,0,.55); }
#umgestalten .feld[aria-pressed="true"] span { background: var(--messing); }
#umgestalten .feld:focus-visible { outline: none; }
#umgestalten .feld:focus-visible i { box-shadow: 0 0 0 2px var(--flaeche), 0 0 0 4px var(--text), 0 12px 24px rgba(0,0,0,.55); }
.ed-flug { position: fixed; z-index: 15; border-radius: 6px; pointer-events: none; box-shadow: 0 16px 36px rgba(0,0,0,.5); background-repeat: no-repeat; }
#umgestalten .lack { margin-top: 18px; padding: 16px; border-radius: 14px; background: rgba(0,0,0,.22); display: none; }
#umgestalten .lack.offen { display: block; }
#umgestalten .lack p { margin: 0 0 12px; font-size: 16px; color: var(--leise); }
#umgestalten .toene { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
#umgestalten .ton { appearance: none; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; box-shadow: 0 0 0 1px var(--linie); }
#umgestalten .ton[aria-checked="true"] { box-shadow: 0 0 0 2px var(--flaeche), 0 0 0 4px var(--messing); }
#umgestalten .eigene { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: 16px; cursor: pointer; margin-left: 4px; }
#umgestalten .eigene input { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
#umgestalten .eigene input::-webkit-color-swatch-wrapper { padding: 0; }
#umgestalten .eigene input::-webkit-color-swatch { border: 0; border-radius: 50%; }
#umgestalten .auswahl { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--linie); }
#umgestalten .auswahl strong { display: block; font: 700 18px/1.3 Archivo, sans-serif; }
#umgestalten .auswahl > span, #umgestalten .preis > span { color: var(--leise); font-size: 13px; }
#umgestalten .preis { margin-top: 14px; }
#umgestalten .preis .rahmen { font: 700 22px/1.2 Archivo, sans-serif; color: var(--messing); }
#umgestalten .preis ul { list-style: none; margin: 10px 0 0; padding: 0; font-size: 16px; }
#umgestalten .preis li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px dashed var(--linie); }
#umgestalten .preis li span:last-child { font-variant-numeric: tabular-nums; }
#umgestalten .preis small { display: block; margin-top: 8px; color: var(--leise); font-size: 16px; line-height: 1.45; }
#umgestalten .zurueck { margin-top: 12px; appearance: none; background: none; border: 0; padding: 0; color: var(--messing); font: 500 16px Inter, sans-serif;
             cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
#umgestalten .zurueck[hidden] { display: none; }
/* v0.13 · Rechner: Die Station ist genau einen Schirm hoch, die Leiste rollt in sich. So bleiben Überschrift, Wahl und Preis mit
   allen Posten auch bei 1440 × 900 und 1280 × 720 erreichbar, und das Bild der Küche wird nicht höher als der Schirm. */
@media (min-width: 900px) {
#umgestalten .editor { height: calc(100vh - var(--kopf)); height: calc(100svh - var(--kopf)); min-height: 480px; }
#umgestalten .leiste { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(243,236,226,.34) transparent; }
#umgestalten .auswahl { margin-top: 0; }
 }
@media (max-width: 899px) {
#umgestalten .editor { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
#umgestalten .buehne { position: sticky; top: var(--kopf); z-index: 2; height: 44svh; min-height: 260px; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
#umgestalten .leiste { border-left: 0; border-top: 1px solid var(--linie); padding: 24px 16px 32px; gap: 22px; }
#umgestalten .ed-titel { font-size: 22px; }
#umgestalten .koffer { --pb: min(96px, calc((100vw - 8px) / 4)); --ph: 116px; --ueber: -10px; }   /* vier Platten passen auch bei 360 px ohne Überlauf */
#umgestalten .feld[aria-pressed="true"] { transform: translateY(-16px) rotate(0deg); }   /* am Handy steht die Küche oben: die Platte steigt höher */
 }
@media (prefers-reduced-motion: reduce) {
#umgestalten .buehne canvas.neu { transition: none; }
#umgestalten .feld, #umgestalten .feld i { transition: none; }
 }

/* v0.17 · Die Station steht jetzt unter dem hellen Abschnitt Handwerk. Am Handy wirft die klebende Bühne ihren Schatten (0 8px 24px) sonst
   als grauen Streifen auf den Kalkgrund darüber. Die Station schneidet alles ab, was über ihre eigene Fläche hinausragt; Kleben bleibt erhalten. */
#umgestalten { clip-path: inset(0); }

/* ===== v0.18 · Auftritt: große Überschrift, Selbstlauf, Haltestrecke ===== */
#umgestalten .ed-auftakt { position: relative; z-index: 3; }
#umgestalten .ed-kicker { margin: 0 0 clamp(10px, 1vw, 20px); font: 500 clamp(15px, 1.05vw, 22px)/1.3 Inter, sans-serif; color: var(--messing); }
#umgestalten .ed-gross { margin: 0; font: 700 clamp(30px, 3.3vw, 84px)/1.06 Archivo, sans-serif; letter-spacing: -.02em; max-width: 22ch; color: var(--text); }
#umgestalten .ed-kicker::before { content: ""; display: block; width: clamp(44px, 3.4vw, 84px); height: 3px; background: var(--messing); margin-bottom: clamp(16px, 1.6vw, 34px); }
#umgestalten .ed-unter { margin: clamp(10px, 1.2vw, 24px) 0 0; font-size: clamp(18px, 1.3vw, 30px); line-height: 1.45; max-width: 44ch; color: rgba(243,236,226,.86); }
#umgestalten .buehne canvas.lauf { will-change: opacity; transition: opacity .12s linear; }
#umgestalten .buehne canvas.lauf.aus { opacity: 0 !important; transition: opacity .38s ease; }
#umgestalten .ed-zeigt { position: absolute; z-index: 3; top: clamp(14px, 1.6vw, 36px); left: clamp(14px, 1.6vw, 36px); margin: 0; padding: 8px 14px; border-radius: 999px;
          background: rgba(20,16,12,.74); border: 1px solid var(--linie); font: 500 clamp(15px, .95vw, 20px)/1.2 Inter, sans-serif; color: var(--leise); pointer-events: none; }
#umgestalten .ed-zeigt b { color: var(--text); font-weight: 600; }
#umgestalten .ed-zeigt[hidden] { display: none; }
#umgestalten .ed-platz { display: none; }
@media (min-width: 900px) {
#umgestalten .editor { grid-template-rows: minmax(0, 1fr); }
#umgestalten .buehne { grid-column: 1; grid-row: 1; }
#umgestalten .ed-auftakt { grid-column: 1; grid-row: 1; align-self: end; pointer-events: none; padding: clamp(80px, 12svh, 200px) clamp(28px, 3.2vw, 80px) clamp(28px, 4svh, 72px);
          background: linear-gradient(to top, rgba(20,16,12,.88) 0%, rgba(20,16,12,.66) 45%, rgba(20,16,12,0) 100%); text-shadow: 0 2px 18px rgba(20,16,12,.6); }
#umgestalten .leiste { grid-column: 2; grid-row: 1; padding-top: 24px; padding-bottom: 20px; gap: 16px; }
#umgestalten .leiste legend { margin-bottom: 8px; }
#umgestalten .koffer { padding-top: 14px; }
#umgestalten .auswahl { padding-top: 16px; position: relative; }
#umgestalten .zurueck { position: absolute; right: 0; top: 4px; margin: 0; min-height: 44px; display: inline-flex; align-items: center; }   /* neben „Ihre Küche“ statt darunter: die Leiste wird nach einer Wahl nicht länger */
#umgestalten .preis { margin-top: 10px; }
#umgestalten .preis li { padding: 2px 0; }
#umgestalten .preis small { font-size: 15px; line-height: 1.4; }
}
/* Haltestrecke: am Rechner klebt die Station eine Dreiviertel-Bildschirmhöhe, während die Küche von selbst wechselt. Ohne Skript und bei
   reduzierter Bewegung gibt es sie nicht (dann steht die Station wie bisher). */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
html.js #umgestalten .ed-platz { display: block; height: 75vh; height: 75svh; }
html.js #umgestalten .editor { position: sticky; top: var(--kopf); }
}
@media (max-width: 899px) {
#umgestalten .ed-auftakt { z-index: 1; padding: 30px 16px 6px; background: var(--flaeche); }   /* rollt unter dem klebenden Bild durch */
#umgestalten .ed-gross { font-size: 32px; }
#umgestalten .leiste { border-top: 0; padding-top: 18px; }
#umgestalten .ed-zeigt { top: 12px; left: 12px; padding: 6px 12px; }
}