/* ══ sc-dresscode.css — Dresscode als Anziehpuppe (sc-dresscode.js) ══
   19.10.2026. Dunkel wie der Rechner, .sc-dc--hell für helle Seiten (Verwaltung). Die Bühne mit den
   Figuren bleibt immer dunkel: die Zeichnungen sind weiße Linien auf Schwarz. Eigenständig, keine
   Tailwind-Klassen. */
/* Farben bewusst leise (Betreiber 19.10.2026): Auswahl in Weiß/Grau, Preise gedämpft — der Fokus
   gehört dem eigentlichen „Weiter“ des Rechners. Markenblau nur noch für den Tastaturfokus. */
.sc-dc { --scd-feld: #26262b; --scd-rand: #34343e; --scd-text: #e5e7eb; --scd-text2: #9b9ba6; --scd-akzent: #d4d6dc;
    --scd-fokus: #4cb3d6; --scd-gruen: #7cc4a2; --scd-amber: #d2ac64; --scd-lila: #b9a0e6; --scd-spur: #3a3a44; --scd-hoehe: 400px;
    color: var(--scd-text); font-size: 14px; line-height: 1.45; text-align: left; }
.sc-dc--hell { --scd-feld: #f4f8fa; --scd-rand: #d9e3e7; --scd-text: #17262e; --scd-text2: #5d6f78; --scd-akzent: #3b4a52;
    --scd-fokus: #1f8fb3; --scd-gruen: #2e9c72; --scd-amber: #b7801c; --scd-lila: #7a55c2; --scd-spur: #d5dfe3; }
/* Der Rechner hebt jeden Knopf beim Überfahren an (rechner.css button:hover translateY(-1px), transition all)
   und gibt am Handy jedem Knopf 44 px Mindesthöhe und einen blauen Fokusrahmen. Im Modul flackerten dadurch
   die Vorlagen, die Reglermarken (per translateX gesetzt) sprangen zur Seite, und Schalter und Marken
   quollen auf. Hier gelten nur die eigenen Maße. */
.sc-dc button { min-height: 0; }
.sc-dc button:hover { transform: none; transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease; }
.sc-dc button:focus { outline: none; }
.sc-dc button:focus-visible { outline: 2px solid var(--scd-fokus); outline-offset: 2px; }
.sc-dc *, .sc-dc *::before, .sc-dc *::after { box-sizing: border-box; }

.sc-dc__raster { display: grid; gap: 22px; align-items: start; }
.sc-dc--auswahl .sc-dc__raster { grid-template-columns: minmax(250px, 0.95fr) minmax(0, 1.05fr); }
.sc-dc--anzeige .sc-dc__raster { grid-template-columns: auto minmax(0, 1fr); --scd-hoehe: 320px; }
/* kompakt: in Schicht-Modalen (Dashboard, Kalender) */
.sc-dc--kompakt.sc-dc--anzeige .sc-dc__raster { --scd-hoehe: 250px; gap: 16px; }
.sc-dc--kompakt .sc-dc__buehne { padding: 12px 10px 10px; }
.sc-dc--kompakt .sc-dc__titel { margin-bottom: 6px; }
@media (max-width: 760px) {
    .sc-dc--auswahl .sc-dc__raster, .sc-dc--anzeige .sc-dc__raster { grid-template-columns: minmax(0, 1fr); }
    .sc-dc { --scd-hoehe: 270px; }
    .sc-dc--anzeige .sc-dc__raster { --scd-hoehe: 250px; }
    .sc-dc--kompakt.sc-dc--anzeige .sc-dc__raster { --scd-hoehe: 230px; }
}

/* ── Bühne ── */
.sc-dc__buehne { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 4%;
    padding: 18px 14px 14px; border-radius: 16px; overflow: hidden;
    background: radial-gradient(120% 90% at 50% 15%, #17171b 0%, #08080a 70%); border: 1px solid #1f1f25; }
/* Linke Spalte: Figuren + Preis. Am Desktop klebt sie beim Scrollen mit (im Website-Rahmen schiebt
   rechner.js sie per transform nach, dort greift sticky nicht). Am Handy (unten) klebt nur die Bühne. */
.sc-dc__links { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (min-width: 761px) { .sc-dc--auswahl .sc-dc__links { position: sticky; top: 12px; align-self: start; z-index: 2; } }
/* Unter den Figuren: woraus der Dresscode besteht (grau, kursiv), darunter leise Preis und Prüfhinweise */
.sc-dc__inhaltfeld { padding: 0 2px; }
/* unter den Reglern nur am Handy (siehe unten), links unter den Figuren nur am Desktop */
.sc-dc__inhaltfeld--unten { display: none; }
.sc-dc__inhalt { margin: 0; font-size: 12.5px; line-height: 1.5; font-style: italic; color: var(--scd-text2); }
.sc-dc__inhalt-info { margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: var(--scd-text2); opacity: 0.85; }
.sc-dc__chip { display: none; position: absolute; left: 10px; bottom: 10px; z-index: 2; padding: 2px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700; background: rgba(8, 8, 10, 0.78); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--scd-text2); }
.sc-dc__chip--aufpreis { color: var(--scd-amber); }
.sc-dc__chip--kostuem { color: var(--scd-lila); }
@media (max-width: 760px) {
    .sc-dc--auswahl .sc-dc__links { display: contents; }
    .sc-dc--auswahl .sc-dc__raster { --scd-hoehe: 190px; gap: 14px; }
    .sc-dc--auswahl .sc-dc__buehne { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 6px); z-index: 4; order: 0; padding: 10px 10px 8px;
        box-shadow: 0 10px 18px -12px rgba(0, 0, 0, 0.9); }
    .sc-dc--auswahl .sc-dc__links > .sc-dc__inhaltfeld { display: none; }
    .sc-dc--auswahl .sc-dc__inhaltfeld--unten { display: block; margin: 4px 0 14px; }
    .sc-dc--auswahl .sc-dc__steuer { order: 1; }
    .sc-dc--auswahl .sc-dc__chip { display: inline-block; }
}
.sc-dc__figur { position: relative; margin: 0; height: var(--scd-hoehe); flex: 0 0 auto; }
.sc-dc__ebene { position: absolute; display: block; max-width: none; user-select: none; -webkit-user-select: none;
    pointer-events: none; }
.sc-dc__ebene[hidden] { display: none; }
.sc-dc__unter { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ── Felder ── */
.sc-dc__steuer { min-width: 0; }
.sc-dc__feld { margin: 0 0 18px; }
.sc-dc__feldkopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.sc-dc__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--scd-text2); }

/* Schieberegler, einrastend */
.sc-dc__regler { --p: 0%; display: block; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer;
    -webkit-appearance: none; appearance: none; touch-action: pan-y; }
.sc-dc__regler:focus { outline: none; }
.sc-dc__regler::-webkit-slider-runnable-track { height: 4px; border-radius: 2px;
    background: linear-gradient(to right, var(--scd-akzent) var(--p), var(--scd-spur) var(--p)); }
.sc-dc__regler::-moz-range-track { height: 4px; border-radius: 2px; background: var(--scd-spur); }
.sc-dc__regler::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--scd-akzent); }
.sc-dc__regler::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%;
    background: #fff; border: 1px solid rgba(0, 0, 0, 0.25); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); transition: transform 0.12s ease; }
.sc-dc__regler::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 1px solid rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); }
.sc-dc__regler:active::-webkit-slider-thumb { transform: scale(1.1); }
.sc-dc__regler:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(76, 179, 214, 0.35); }
.sc-dc__regler:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(76, 179, 214, 0.35); }
.sc-dc__regler:disabled { cursor: not-allowed; opacity: 0.4; }

.sc-dc__marken { position: relative; height: 22px; margin-top: 2px; }
.sc-dc__marke { position: absolute; top: 0; left: calc(11px + (100% - 22px) * var(--f, 0)); transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: 12px; color: var(--scd-text2); white-space: nowrap; }
.sc-dc .sc-dc__marke, .sc-dc .sc-dc__marke:hover { transform: translateX(-50%); }
.sc-dc .sc-dc__marke.is-erste, .sc-dc .sc-dc__marke.is-erste:hover { left: 0; transform: none; }
.sc-dc .sc-dc__marke.is-letzte, .sc-dc .sc-dc__marke.is-letzte:hover { left: auto; right: 0; transform: none; }
.sc-dc__marke:hover { color: var(--scd-text); }
.sc-dc__marke.is-an { color: var(--scd-text); font-weight: 600; }
.sc-dc__marke:disabled { cursor: not-allowed; opacity: 0.45; }
@media (max-width: 420px) { .sc-dc__marke { font-size: 11px; } }

/* Farbpunkte */
.sc-dc__farben { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sc-dc .sc-dc__farbe { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 5px 12px 5px 7px; border-radius: 999px;
    border: 1px solid var(--scd-rand); background: var(--scd-feld); color: var(--scd-text); font: inherit; font-size: 12.5px; cursor: pointer; }
.sc-dc__farbe:hover { border-color: var(--scd-text2); }
.sc-dc__farbe.is-an { border-color: var(--scd-akzent); }
.sc-dc__punkt { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #8a8a94; }
.sc-dc__farbe--schwarz .sc-dc__punkt { background: #050505; border-color: #d0d0d6; }
.sc-dc__farbe--weiss .sc-dc__punkt { background: #fafafa; border-color: #6a6a72; }
.sc-dc__farbe--individuell .sc-dc__punkt { border-color: #e8e8ec;
    background: repeating-linear-gradient(170deg, #9d9da3 0 2px, #b9b9be 2px 3px, #8f8f96 3px 5px); }

.sc-dc__text, .sc-dc__notiz { display: block; width: 100%; margin-top: 10px; padding: 10px 12px; border-radius: 10px;
    border: 1px solid var(--scd-rand); background: var(--scd-feld); color: var(--scd-text); font: inherit; font-size: 14px; }
.sc-dc__notiz { resize: vertical; min-height: 60px; margin-top: 6px; }
.sc-dc__text:focus, .sc-dc__notiz:focus { outline: none; border-color: var(--scd-text2); }
.sc-dc__text::placeholder, .sc-dc__notiz::placeholder { color: var(--scd-text2); opacity: 0.8; }

.sc-dc__hinweis { margin: 8px 0 0; font-size: 12.5px; color: var(--scd-text2); }
.sc-dc__hinweis--leise { font-style: italic; }
/* „Keine Vorgabe“ unter „Selbst anpassen“: Satz über dem Aufschlag-Schalter */
.sc-dc__hinweis--oben { margin: 0 0 14px; font-style: italic; }
.sc-dc__segment { display: flex; margin-top: 6px; padding: 3px; border-radius: 10px; background: var(--scd-feld); border: 1px solid var(--scd-rand); }
.sc-dc .sc-dc__seg { flex: 1 1 0; min-width: 0; min-height: 34px; padding: 6px 4px; border: 0; border-radius: 7px; background: none; color: var(--scd-text2);
    font: inherit; font-size: 12.5px; cursor: pointer; }
.sc-dc__seg.is-an { background: #3b3c45; color: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.sc-dc--hell .sc-dc__seg.is-an { background: #fff; color: var(--scd-text); }

.sc-dc__bisher { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--scd-feld); font-size: 13px; color: var(--scd-text2); }
.sc-dc__bisher strong { color: var(--scd-text); }

.sc-dc__sperre { margin-bottom: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(232, 179, 75, 0.45);
    background: rgba(232, 179, 75, 0.08); font-size: 13.5px; }
.sc-dc__sperre p { margin: 0; }
.sc-dc__sperre p + p { margin-top: 4px; color: var(--scd-text2); }
.sc-dc__tel { color: var(--scd-fokus); font-weight: 600; text-decoration: none; white-space: nowrap; }

/* Dresscode-Aufschlag: Schalter schaltet Stoffhose, Lederschuhe, Frisur, Schmuck (+ Weste … nach Verfügbarkeit) frei */
.sc-dc__aufschlag { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 18px; padding: 12px 14px; border-radius: 12px;
    border: 1px dashed var(--scd-rand); background: transparent; transition: border-color 0.15s ease, background-color 0.15s ease; }
.sc-dc__aufschlag.is-an { border-style: solid; border-color: rgba(232, 179, 75, 0.3); background: rgba(232, 179, 75, 0.035); }
.sc-dc .sc-dc__schalter { position: relative; flex: 0 0 auto; width: 44px; height: 26px; margin-top: 1px; padding: 0; border: 0; border-radius: 999px;
    background: var(--scd-spur); cursor: pointer; transition: background-color 0.15s ease; }
.sc-dc__schalter-knopf { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); transition: transform 0.15s ease; }
.sc-dc__aufschlag.is-an .sc-dc__schalter { background: var(--scd-amber); }
.sc-dc__aufschlag.is-an .sc-dc__schalter-knopf { transform: translateX(18px); }
.sc-dc__schalter:focus-visible { outline: 2px solid var(--scd-fokus); outline-offset: 2px; }
.sc-dc__aufschlag-text { min-width: 0; }
.sc-dc__aufschlag-titel { display: block; font-weight: 700; cursor: pointer; }
.sc-dc__aufschlag-preis { margin-left: 4px; font-weight: 600; color: var(--scd-amber); white-space: nowrap; }
.sc-dc__aufschlag-info { margin: 3px 0 0; font-size: 12.5px; color: var(--scd-text2); }

/* kleine Zeichen an den Reglermarken */
.sc-dc__sym { width: 13px; height: 13px; flex: 0 0 auto; fill: currentColor; }
.sc-dc__sym--uhr { color: var(--scd-text2); }
.sc-dc__sym--herz { color: #ff6b8a; }
.sc-dc__marke .sc-dc__sym--herz, .sc-dc__hinweis--herz .sc-dc__sym--herz { animation: scDcHerz 0.6s ease-out 1; }
@keyframes scDcHerz { 0% { transform: scale(0.4); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
.sc-dc__tipp { margin: 0 0 12px; padding: 10px 12px; border-left: 2px solid var(--scd-rand); border-radius: 0 10px 10px 0;
    background: rgba(255, 255, 255, 0.03); font-size: 12.5px; color: var(--scd-text2); }
.sc-dc__tipp p { margin: 0; }
/* im Schuh-Regler (Selbst anpassen offen): Abstand zu den Reglermarken */
.sc-dc__feld > .sc-dc__tipp, .sc-dc__feld > .sc-dc__hinweis--herz { margin: 10px 0 0; }
.sc-dc .sc-dc__herzknopf { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; margin-top: 8px; padding: 6px 12px;
    border-radius: 999px; border: 1px solid var(--scd-rand); background: transparent; color: var(--scd-text);
    font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.sc-dc__herzknopf:hover { border-color: rgba(255, 107, 138, 0.5); }
.sc-dc__herzknopf .sc-dc__sym { width: 14px; height: 14px; color: #ff6b8a; }
.sc-dc__hinweis--herz { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; color: var(--scd-text); }
.sc-dc__zwas .sc-dc__sym--herz { margin-left: 6px; vertical-align: -1px; }
@media (prefers-reduced-motion: reduce) { .sc-dc__sym--herz { animation: none !important; }
    .sc-dc__schalter, .sc-dc__schalter-knopf, .sc-dc__karte, .sc-dc__anpassen-kopf .sc-dc__sym { transition: none; } }

/* ── Vorlagen-Karten (Runde 3: simpel + verkaufsstark) ── */
.sc-dc__frage { margin: 0 0 10px; font-size: 17px; font-weight: 700; line-height: 1.25; text-wrap: balance; }
/* höchstens vier Spalten (acht Vorlagen = zwei volle Reihen, Betreiber 20.10.2026), schmaler wird es dreispaltig */
.sc-dc__karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(104px, calc((100% - 24px) / 4)), 1fr));
    gap: 8px; margin: 0 0 12px; }
.sc-dc__karte { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0;
    padding: 8px 6px 9px; border-radius: 12px; border: 1px solid var(--scd-rand); cursor: pointer; font: inherit; color: var(--scd-text);
    background: radial-gradient(120% 80% at 50% 10%, #18181d 0%, #0a0a0c 75%); transition: border-color 0.15s ease, transform 0.15s ease; }
.sc-dc__karte:hover { border-color: var(--scd-text2); }
.sc-dc__karte.is-an { border-color: var(--scd-akzent); box-shadow: 0 0 0 1px var(--scd-akzent); }
.sc-dc__karte-bild { display: block; width: auto; max-width: 100%; height: 96px; object-fit: contain; pointer-events: none; }
.sc-dc__karte-name { font-size: 12.5px; font-weight: 700; line-height: 1.2; text-align: center; color: #f1f2f4; }
.sc-dc__karte-beliebt { position: absolute; top: 6px; left: 6px; padding: 0 6px; border-radius: 999px; font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--scd-text2); border: 1px solid var(--scd-rand); background: rgba(8, 8, 10, 0.6); }
.sc-dc__karte-haken { position: absolute; top: 6px; right: 6px; display: flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%; background: var(--scd-akzent); color: #111216; }
.sc-dc__karte-haken .sc-dc__sym { width: 12px; height: 12px; }
.sc-dc__preis { padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.sc-dc__preis--frei { color: var(--scd-gruen); background: rgba(72, 191, 145, 0.08); }
.sc-dc__preis--aufpreis { color: var(--scd-amber); background: rgba(232, 179, 75, 0.08); }
.sc-dc__preis--kostuem { color: var(--scd-lila); background: rgba(170, 120, 255, 0.09); }
@media (max-width: 760px) {
    /* am Handy vier Spalten: alle acht Vorlagen samt Preis auf einen Blick (zwei volle Reihen), nichts
       versteckt sich hinter Wischen */
    .sc-dc__karten { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .sc-dc__karte { padding: 6px 3px 7px; border-radius: 10px; }
    .sc-dc__karte-bild { height: 66px; }
    .sc-dc__karte-name { font-size: 11px; }
    .sc-dc__preis { padding: 1px 5px; font-size: 10px; }
    .sc-dc__karte-beliebt { top: 4px; left: 4px; padding: 0 4px; font-size: 8.5px; }
    .sc-dc__karte-haken { top: 4px; right: 4px; width: 16px; height: 16px; }
}
@media (max-width: 380px) {
    /* „Restaurant“ (längstes Wort ohne Umbruch) und „from +€15/h“ reichten bei 360 px bis an den Kartenrand */
    .sc-dc__karte-name { font-size: 10.5px; letter-spacing: -0.01em; }
    .sc-dc__karte .sc-dc__preis { padding: 1px 4px; font-size: 9.5px; }
}
@media (max-width: 340px) {
    .sc-dc__karte-name { font-size: 9.5px; }
    .sc-dc__karte .sc-dc__preis { padding: 1px 3px; font-size: 9px; }
}

/* Zusatzfragen zur Wahl (Kostüm, Branding) */
.sc-dc__box { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--scd-rand); }
.sc-dc__box .sc-dc__feld { margin: 0; }
.sc-dc__box .sc-dc__feld--abstand { margin-top: 14px; }
.sc-dc__box .sc-dc__label + .sc-dc__text { margin-top: 6px; }

/* Selbst anpassen */
.sc-dc__anpassen { border-top: 1px solid var(--scd-rand); }
.sc-dc__anpassen-kopf { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 0; cursor: pointer; list-style: none;
    font-weight: 700; color: var(--scd-text); }
.sc-dc__anpassen-kopf::-webkit-details-marker { display: none; }
.sc-dc__anpassen-kopf .sc-dc__sym { width: 14px; height: 14px; transition: transform 0.15s ease; }
.sc-dc__anpassen[open] > .sc-dc__anpassen-kopf .sc-dc__sym { transform: rotate(90deg); }
.sc-dc__anpassen-kopf:focus-visible { outline: 2px solid var(--scd-fokus); outline-offset: 2px; border-radius: 6px; }
.sc-dc__anpassen-innen { padding-top: 6px; }
.sc-dc__eigen { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--scd-text2); border: 1px solid var(--scd-rand); }

/* Abschluss für den Einbau (Rechner): „Dresscode übernehmen“ klappt das Modul zu, „Für alle Schichten“ */
.sc-dc__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 16px; margin: 0;
    padding-top: 14px; border-top: 1px solid var(--scd-rand); }
.sc-dc__fuss-info { margin-right: auto; font-size: 12px; color: var(--scd-text2); }
.sc-dc .sc-dc__fuss-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 8px 18px;
    border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.07); color: #f3f4f6;
    font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.sc-dc .sc-dc__fuss-knopf:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.4); }
.sc-dc .sc-dc__fuss-knopf .sc-dc__sym { width: 15px; height: 15px; }
.sc-dc .sc-dc__fuss-link { min-height: 42px; padding: 8px 4px; border: 0; background: none; color: var(--scd-text2); font: inherit; font-size: 13px;
    text-decoration: underline; text-decoration-color: rgba(155, 155, 166, 0.45); text-underline-offset: 3px; cursor: pointer; }
.sc-dc .sc-dc__fuss-link:hover { color: var(--scd-text); }
@media (max-width: 760px) {
    .sc-dc__fuss { justify-content: center; }
    .sc-dc__fuss-info { flex: 1 1 100%; margin: 0; text-align: center; }
    .sc-dc .sc-dc__fuss-knopf { flex: 1 1 100%; }
}

/* Zugeklappt: eine Zeile mit kleiner Figur, Name + Preis, Inhalt, „Ändern“ */
.sc-dc__zu { display: flex; align-items: center; gap: 14px; padding: 8px 12px 8px 8px; border-radius: 14px; border: 1px solid var(--scd-rand);
    background: rgba(255, 255, 255, 0.02); cursor: pointer; transition: border-color 0.15s ease; }
.sc-dc__zu:hover { border-color: #4a4a55; }
.sc-dc__zu-bild { flex: 0 0 auto; }
.sc-dc__buehne--mini { --scd-hoehe: 78px; gap: 2px; padding: 6px 10px 4px; border-radius: 10px; }
.sc-dc__zu-text { flex: 1 1 auto; min-width: 0; }
.sc-dc__zu-titel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 3px; }
.sc-dc__zu-name { font-weight: 700; color: #f1f2f4; }
.sc-dc__zu-info { margin: 4px 0 0; font-size: 12px; color: var(--scd-text2); }
.sc-dc .sc-dc__zu-knopf { flex: 0 0 auto; min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--scd-rand);
    background: transparent; color: var(--scd-text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.sc-dc .sc-dc__zu-knopf:hover { border-color: var(--scd-text2); }
.sc-dc .sc-dc__zu-knopf--stift { width: 32px; height: 32px; min-height: 0; padding: 0; display: inline-flex; align-items: center;
    justify-content: center; border-color: transparent; color: var(--scd-text2); }
.sc-dc .sc-dc__zu-knopf--stift:hover { color: var(--scd-text); border-color: var(--scd-rand); }
.sc-dc__zu-knopf--stift .sc-dc__sym { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
@media (max-width: 760px) {
    .sc-dc__zu { align-items: flex-start; gap: 10px; padding: 8px; }
    .sc-dc__buehne--mini { --scd-hoehe: 66px; padding: 5px 6px 3px; }
    .sc-dc .sc-dc__zu-knopf { min-height: 32px; padding: 4px 11px; font-size: 12.5px; }
}

/* ── Anzeige ── */
.sc-dc__titel { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--scd-text2); }
.sc-dc__liste { margin: 0; padding: 0; list-style: none; }
.sc-dc__zeile { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--scd-rand); }
.sc-dc__zeile:first-child { border-top: 0; }
.sc-dc__zbereich { font-size: 12px; color: var(--scd-text2); }
.sc-dc__zwas { font-weight: 600; overflow-wrap: anywhere; }
.sc-dc__zzusatz { display: block; font-weight: 400; font-size: 12.5px; color: var(--scd-text2); }
.sc-dc__sauber { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; border-left: 3px solid var(--scd-fokus);
    background: rgba(76, 179, 214, 0.08); font-size: 12.5px; line-height: 1.45; }
.sc-dc__alt strong { font-weight: 600; color: var(--scd-text2); }
.sc-dc__notiztext, .sc-dc__alt { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--scd-feld); white-space: pre-wrap;
    overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .sc-dc__regler::-webkit-slider-thumb { transition: none; } }

/* ── Fenster (sc-dresscode.js dialog): Verwaltung + Kundenportal ── */
.sc-dc-dialog { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: flex-start; justify-content: center;
    padding: max(16px, env(safe-area-inset-top, 0px)) 12px 16px; overflow-y: auto; background: rgba(4, 6, 8, 0.72);
    font-family: inherit; }
.sc-dc-dialog__panel { width: 100%; max-width: 1060px; margin: auto 0; border-radius: 18px; background: #121317; color: #e5e7eb;
    border: 1px solid #262830; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8); display: flex; flex-direction: column; }
.sc-dc-dialog__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 4px; }
.sc-dc-dialog__titel { margin: 0; font-size: 18px; font-weight: 800; color: #f3f4f6; }
.sc-dc-dialog__zu { width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: #9b9ba6; font-size: 26px;
    line-height: 1; cursor: pointer; }
.sc-dc-dialog__zu:hover { background: #1f2027; color: #fff; }
.sc-dc-dialog__koerper { padding: 8px 18px 4px; }
.sc-dc-dialog__fuss { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #262830; background: #121317;
    border-radius: 0 0 18px 18px; }
.sc-dc-dialog__meldung { margin: 0 auto 0 0; font-size: 13px; color: #9b9ba6; min-height: 1em; }
.sc-dc-dialog__knopf { min-height: 42px; padding: 9px 18px; border-radius: 10px; border: 1px solid #34343e; background: transparent;
    color: #e5e7eb; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.sc-dc-dialog__knopf--los { border-color: #4cb3d6; background: #4cb3d6; color: #08151b; font-weight: 800; }
.sc-dc-dialog__knopf:disabled { opacity: 0.5; cursor: not-allowed; }
.sc-dc-dialog__knopf:focus-visible, .sc-dc-dialog__zu:focus-visible { outline: 2px solid #4cb3d6; outline-offset: 2px; }
.sc-dc-dialog .sc-dc--auswahl .sc-dc__links { top: 0; }
@media (max-width: 760px) { .sc-dc-dialog { padding: 0; } .sc-dc-dialog__panel { border-radius: 0; min-height: 100%; }
    .sc-dc-dialog__fuss { border-radius: 0; } }