/* =============================================================================
   NEONNACHT — Komponenten
   =============================================================================

   atelier.css traegt Tokens und Primitives. Diese Datei traegt die Bausteine,
   die alle Kundenseiten gemeinsam brauchen und die bisher aus styles-news.css
   kamen.

   Warum getrennt: atelier.css gilt fuer JEDE umgestellte Seite, auch fuer die
   Startseite, die von alledem nichts braucht. Wer nur Tokens will, laedt nur
   atelier.css.

   Reihenfolge auf einer Seite:
       atelier.css → atelier-komponenten.css → atelier-panel.css → seite.css

   -----------------------------------------------------------------------------
   Grundlage ist eine Analyse aller vierzehn Kundenseiten. Was hier steht, wurde
   dort mehrfach gebraucht; was nur einmal vorkam, bleibt bei der Seite.
   Ausdruecklich NICHT gebaut: eine Tabellenkomponente. In keiner der vierzehn
   Seiten und in keinem der Renderer steht ein <table>.
   ============================================================================= */

/* =============================================================================
   1  RESET UND FLIESSTEXT
   -----------------------------------------------------------------------------
   styles-news.css:4-8 setzt `* { margin:0; padding:0 }` und wird heute von
   allen vierzehn Seiten geladen. atelier.css liefert nur box-sizing. Ohne
   Ersatz kaemen auf jeder umgestellten Seite die Browser-Voreinstellungen fuer
   h1-h6, p, ul und form zurueck — und zwar ueberall gleichzeitig.

   Bewusst kein `* { margin: 0 }`: das nimmt auch dem Fliesstext seinen Rhythmus
   und man baut ihn danach muehsam wieder auf. Stattdessen gezielt.
   ============================================================================= */

.atelier h1, .atelier h2, .atelier h3, .atelier h4, .atelier h5, .atelier h6,
.atelier p, .atelier figure, .atelier blockquote, .atelier dl, .atelier dd {
  margin: 0;
}
.atelier ul, .atelier ol { margin: 0; padding: 0; }
.atelier ul[class], .atelier ol[class] { list-style: none; }
.atelier fieldset { margin: 0; padding: 0; border: 0; }
.atelier legend { padding: 0; }
.atelier img, .atelier svg, .atelier video { max-inline-size: 100%; }
.atelier button, .atelier input, .atelier select, .atelier textarea { font: inherit; color: inherit; }

/* -- Prosa --------------------------------------------------------------------
   Fuer die Rechtstexte und jeden laengeren Fliesstext. Als eigene Klasse, weil
   sie NUR dort gelten soll: eine globale h2-Regel wuerde in der App jede
   Ueberschrift treffen, die eigentlich Bebas Neue tragen soll.

   Die Rechtstexte sind der Grund, warum es diese Komponente ueberhaupt gibt —
   datenschutz.html hat 22 Zwischenueberschriften der dritten und 7 der vierten
   Ebene. Die Skala reicht deshalb bis h4.                                     */

.a-prosa { max-inline-size: 72ch; color: var(--c-text-body); }

.a-prosa h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--t-2xl); line-height: .95; text-transform: uppercase;
  color: var(--c-text);
  margin-block-end: var(--s-5);
}
.a-prosa h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--t-xl); line-height: 1; text-transform: uppercase;
  color: var(--c-text);
  margin-block: var(--s-7) var(--s-3);
  padding-block-end: var(--s-2);
  border-block-end: var(--line);
}
.a-prosa h3 {
  font-size: var(--t-md); font-weight: 700; line-height: var(--lh-snug);
  color: var(--c-text);
  margin-block: var(--s-5) var(--s-2);
}
.a-prosa h4 {
  font-size: var(--t-base); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-text-muted);
  margin-block: var(--s-4) var(--s-2);
}
.a-prosa p { margin-block-end: var(--s-4); line-height: var(--lh-loose); }
.a-prosa ul, .a-prosa ol { margin-block-end: var(--s-4); padding-inline-start: var(--s-5); }
.a-prosa li { margin-block-end: var(--s-2); line-height: var(--lh-loose); }
.a-prosa li::marker { color: var(--c-accent-2); }
.a-prosa strong, .a-prosa b { color: var(--c-text); font-weight: 700; }
.a-prosa hr { margin-block: var(--s-6); block-size: 1px; border: 0; background: var(--c-line); }
.a-prosa > :first-child { margin-block-start: 0; }

/* -- Links --------------------------------------------------------------------
   In KEINEM Stylesheet des Projekts gab es bisher eine a-Regel — auch nicht in
   den alten. Links im Fliesstext waren also browserblau auf hellem Grund und
   waeren auf dunklem Grund kaum noch lesbar. Betrifft die Rechtstexte, wo
   Links auf Behoerden und die EU-Streitschlichtung stehen und funktionieren
   muessen.                                                                    */

.atelier a { color: var(--c-accent-3); text-decoration-color: rgb(34 211 238 / .4); text-underline-offset: 2px; }
@media (hover: hover) { .atelier a:hover { color: var(--c-text); text-decoration-color: currentColor; } }
/* Knoepfe und Karten sind auch <a> — die sollen davon nichts abbekommen. */
.atelier a.a-btn, .atelier a.a-card, .atelier a.hn-link, .atelier a.product-item { color: inherit; text-decoration: none; }

/* =============================================================================
   2  IKONEN
   -----------------------------------------------------------------------------
   styles-news.css:17 setzt .icon auf 20x20 mit flex-shrink:0. Sechs Seiten
   verlassen sich darauf. Ohne Ersatz laufen Inline-SVGs auf ihre natuerliche
   Groesse auf — bei viewBox="0 0 24 24" ohne Breitenangabe sind das 300px.
   ============================================================================= */

.atelier .icon { inline-size: 20px; block-size: 20px; flex-shrink: 0; }
.atelier .icon-sm { inline-size: 15px; block-size: 15px; flex-shrink: 0; }

/* =============================================================================
   3  FORMULARE
   -----------------------------------------------------------------------------
   styles-news.css traegt die Formularoptik ueber ELEMENT-Selektoren
   (input, select, textarea) — deshalb steht im Markup der Seiten keine einzige
   Klasse an den Feldern. Ein Umbau auf .a-field muesste jedes Feld anfassen.
   Deshalb hier ebenfalls ueber Elementselektoren, aber auf .atelier begrenzt.
   ============================================================================= */

.atelier .form-group { display: flex; flex-direction: column; gap: var(--s-2); margin-block-end: var(--s-4); }

.atelier .form-group label,
.atelier .form-label {
  font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--c-text-muted);
}

.atelier input[type='text'], .atelier input[type='email'], .atelier input[type='tel'],
.atelier input[type='number'], .atelier input[type='password'], .atelier input[type='search'],
.atelier input[type='url'], .atelier input[type='date'], .atelier input[type='time'],
.atelier input[type='datetime-local'], .atelier select, .atelier textarea {
  inline-size: 100%;
  min-block-size: 3rem;
  padding: var(--s-2) var(--s-4);
  font-family: var(--font-ui); font-size: 16px;   /* 16px verhindert den iOS-Zoom */
  color: var(--c-text);
  background: var(--c-surface-sunk);
  border: 1px solid var(--c-line);
  border-radius: var(--r-full);
  transition: border-color var(--dur-2) var(--ease-inout), box-shadow var(--dur-2) var(--ease-inout);
}
.atelier textarea { min-block-size: 7rem; border-radius: var(--r-lg); resize: vertical; padding-block: var(--s-3); }
.atelier select {
  appearance: none;
  /* Der Pfeil als Data-URI, damit kein zusaetzlicher Request noetig ist. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237A7389' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
  padding-inline-end: var(--s-7);
}
.atelier ::placeholder { color: var(--c-text-muted); }
.atelier input:focus, .atelier select:focus, .atelier textarea:focus {
  outline: none;
  border-color: rgb(139 92 246 / .7);
  box-shadow: 0 0 0 3px rgb(139 92 246 / .16);
}
.atelier input[aria-invalid='true'], .atelier .form-group.has-error input { border-color: var(--c-bad); }
.atelier input:disabled, .atelier select:disabled, .atelier textarea:disabled { opacity: .5; cursor: not-allowed; }

.atelier .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: var(--s-4); }

.atelier .checkbox-label {
  display: flex; align-items: flex-start; gap: var(--s-3);
  font-size: var(--t-base); line-height: var(--lh-body); color: var(--c-text-body);
  cursor: pointer;
}
.atelier input[type='checkbox'], .atelier input[type='radio'] {
  inline-size: 1.15rem; block-size: 1.15rem;
  margin-block-start: .18rem;
  flex-shrink: 0;
  accent-color: var(--c-accent-2);
  min-block-size: 0; padding: 0; border-radius: var(--r-xs); background: none; border: 0;
}
.atelier .form-hint { font-size: var(--t-xs); color: var(--c-text-muted); }
.atelier .form-error { font-size: var(--t-xs); color: var(--c-bad); }

/* =============================================================================
   4  ZUSTAENDE
   -----------------------------------------------------------------------------
   Die App kennt neun Bestell- und Zahlungszustaende, verteilt auf zwei
   Klassensaetze mit identischer Bedeutung: .badge-sm.* (meine-bestellungen)
   und .badge.* (meine-bestellung-details). Beide werden hier bedient, damit
   das Markup unangetastet bleibt.

   Das Gelb #FBCD0A bleibt ausserhalb: es gehoert dem Exklusiven. Warn- und
   Zwischenzustaende tragen Bernstein (--c-warn).
   ============================================================================= */

.atelier .badge, .atelier .badge-sm {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 2px var(--s-2);
  font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid transparent; border-radius: var(--r-sm);
  white-space: nowrap;
}

/* bezahlt / versendet / abgeschlossen */
.atelier .badge.paid, .atelier .badge-sm.paid,
.atelier .badge.s-paid, .atelier .badge-sm.s-paid,
.atelier .badge.s-shipped, .atelier .badge-sm.s-shipped {
  color: var(--c-good); border-color: rgb(61 220 151 / .4); background: rgb(61 220 151 / .1);
}
/* offen / wartet / teilweise */
.atelier .badge.pending, .atelier .badge-sm.pending,
.atelier .badge.s-pending, .atelier .badge-sm.s-pending,
.atelier .badge.s-open, .atelier .badge-sm.s-open,
.atelier .badge.s-partial, .atelier .badge-sm.s-partial {
  color: var(--c-warn); border-color: rgb(232 155 60 / .45); background: rgb(232 155 60 / .1);
}
/* fehlgeschlagen / storniert */
.atelier .badge.failed, .atelier .badge-sm.failed,
.atelier .badge.s-cancelled, .atelier .badge-sm.s-cancelled {
  color: var(--c-bad); border-color: rgb(255 71 87 / .4); background: rgb(255 71 87 / .1);
}
/* erstattet — neutral, weder gut noch schlecht */
.atelier .badge.refunded, .atelier .badge-sm.refunded {
  color: var(--c-info); border-color: rgb(34 211 238 / .4); background: rgb(34 211 238 / .1);
}

/* =============================================================================
   5  LEERZUSTAND
   -----------------------------------------------------------------------------
   Neun Klassennamen fuer dieselbe Sache im Bestand (.empty-text kommt allein
   24-mal vor). Alle werden hier bedient statt umbenannt — Umbenennen hiesse,
   jeden Renderer anzufassen.
   ============================================================================= */

.atelier .empty-state, .atelier .empty-state-box, .atelier .empty-cart-state,
.atelier .cart-empty, .atelier .empty-orders {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-3);
  padding: var(--s-9) var(--s-5);
  text-align: center;
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--r-lg);
}
.atelier .empty-icon, .atelier .empty-cart-icon, .atelier .empty-emoji {
  inline-size: 2.5rem; block-size: 2.5rem;
  font-size: 2.25rem; line-height: 1;
  color: var(--c-text-faint); opacity: .8;
}
.atelier .empty-title {
  font-family: var(--font-display); font-size: var(--t-xl);
  text-transform: uppercase; color: var(--c-text); margin: 0;
}
.atelier .empty-text, .atelier .empty-subtitle {
  font-size: var(--t-sm); color: var(--c-text-muted); margin: 0;
  max-inline-size: 44ch;
}

/* =============================================================================
   6  KENNZAHLENKARTE
   ============================================================================= */

.atelier .stat-card, .atelier .stat-item {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--c-surface);
  border: var(--line); border-radius: var(--r-lg);
  transition: border-color var(--dur-2) var(--ease-paper), background var(--dur-2) var(--ease-paper);
}
@media (hover: hover) { .atelier .stat-card:hover { border-color: var(--c-line-strong); background: var(--c-surface-up); } }
.atelier .stat-content { flex: 1; min-inline-size: 0; }
.atelier .stat-label {
  font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--c-text-muted);
}
.atelier .stat-value {
  font-family: var(--font-display); font-size: 1.75rem; line-height: 1;
  color: var(--c-text); font-variant-numeric: tabular-nums;
}

/* =============================================================================
   7  SUMMENZEILEN
   -----------------------------------------------------------------------------
   ACHTUNG, STRUKTURVERTRAG: In diese Container haengen die Renderer per
   parentElement Zeilen ein — js/cart-page.js:699/724/742 und
   js/checkout.js:689, letzteres ueber ZWEI Ebenen
   (totalElement.parentElement.parentElement.appendChild). Die Verschachtelung
   .summary-details > .summary-row > #total darf deshalb nicht veraendert
   werden, auch nicht durch einen zusaetzlichen Wrapper.

   Und: .summary-details bleibt FLEX. Wird daraus ein Grid, werden drei heute
   wirkungslose grid-column:1/-1 aus cart-page.js schlagartig aktiv.
   ============================================================================= */

.atelier .summary-card {
  padding: var(--s-5);
  background: var(--c-surface);
  border: var(--line); border-radius: var(--r-lg);
}
.atelier .summary-details, .atelier .summary-totals {
  display: flex; flex-direction: column; gap: var(--s-3);
}
.atelier .summary-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  font-size: var(--t-base); color: var(--c-text-body);
}
.atelier .summary-row.total {
  padding-block-start: var(--s-3);
  border-block-start: var(--line);
  color: var(--c-text);
}
.atelier .summary-row.total strong, .atelier .summary-row.total #total {
  font-family: var(--font-display); font-size: 1.75rem; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.atelier .summary-items { max-block-size: 350px; overflow-y: auto; }
.atelier .price-current { font-weight: 700; color: var(--c-text); font-variant-numeric: tabular-nums; }
.atelier .price-old { color: var(--c-text-muted); text-decoration: line-through; font-variant-numeric: tabular-nums; }

/* =============================================================================
   8  ZEITSTRAHL
   -----------------------------------------------------------------------------
   Die 7px Einrueckung der Linie haengen an der 16px-Punktgroesse (halbe Breite
   minus halbe Linienbreite). Wer den Punkt aendert, muss die Linie mitziehen.
   ============================================================================= */

.atelier .tl-item { position: relative; padding-inline-start: var(--s-6); padding-block-end: var(--s-5); }
.atelier .tl-item:not(:last-child)::after {
  content: ''; position: absolute;
  inset-inline-start: 7px; inset-block: 20px 0;
  inline-size: 2px; background: var(--c-line);
}
.atelier .tl-dot {
  position: absolute; inset-inline-start: 0; inset-block-start: 3px; z-index: 1;
  inline-size: 16px; block-size: 16px;
  border-radius: var(--r-full);
  background: var(--c-surface-up);
  border: 2px solid var(--c-line-strong);
}
.atelier .tl-item.is-erledigt .tl-dot { background: var(--c-good); border-color: var(--c-good); }
.atelier .tl-item.is-aktuell .tl-dot { background: var(--c-accent-2); border-color: var(--c-accent-2); box-shadow: 0 0 0 4px rgb(139 92 246 / .2); }

/* =============================================================================
   9  EVENT-COUNTDOWN
   -----------------------------------------------------------------------------
   Dasselbe Markup wird an zwei Stellen erzeugt (js/cart-page.js:209 und
   js/checkout.js:217) und im Sekundentakt per innerHTML ersetzt.
   ============================================================================= */

.atelier .event-countdown-box {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--c-surface);
  border: var(--line); border-radius: var(--r-lg);
}
.atelier .event-countdown-box.event-urgent { border-color: rgb(232 155 60 / .5); background: rgb(232 155 60 / .08); }
.atelier .event-countdown-box.event-expired { border-color: rgb(255 71 87 / .45); background: rgb(255 71 87 / .08); }
.atelier .countdown-icon { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.atelier .countdown-info { flex: 1; min-inline-size: 0; }
.atelier .countdown-info h3 {
  font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--c-text-muted);
}
.atelier .countdown-info p { font-size: var(--t-sm); color: var(--c-text-body); }
.atelier .countdown-display-inline {
  display: flex; align-items: baseline; gap: var(--s-1);
  font-family: var(--font-display); font-size: 1.75rem; line-height: 1;
  color: var(--c-text); font-variant-numeric: tabular-nums;
}
.atelier .countdown-unit-inline { display: inline-flex; align-items: baseline; }
.atelier .countdown-sep { color: var(--c-line-strong); }

/* =============================================================================
   10  BESTAETIGUNGSDIALOG
   -----------------------------------------------------------------------------
   js/ui.js:463 erzeugt diese sechs Klassen zur Laufzeit. Fuer KEINE davon gab
   es je eine Definition — in keinem Stylesheet des Projekts. Der Dialog war
   also immer unformatiert; auf dunklem Grund faellt das nur staerker auf.
   ============================================================================= */

.atelier .confirm-dialog-overlay {
  position: fixed; inset: 0; z-index: var(--z-panel-2);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-4);
  background: rgb(3 2 5 / .78);
  backdrop-filter: blur(6px);
}
.atelier .confirm-dialog {
  inline-size: min(26rem, 100%);
  padding: var(--s-5);
  background: var(--c-surface);
  border: var(--line-strong); border-radius: var(--r-lg);
  box-shadow: var(--d-4);
}
.atelier .confirm-dialog-message { font-size: var(--t-md); color: var(--c-text); margin-block-end: var(--s-5); }
.atelier .confirm-dialog-buttons { display: flex; gap: var(--s-3); }
.atelier .confirm-btn-cancel, .atelier .confirm-btn-ok {
  flex: 1;
  min-block-size: 2.75rem; padding-inline: var(--s-4);
  font-family: var(--font-ui); font-size: var(--t-sm); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  border-radius: var(--r-full); cursor: pointer;
}
.atelier .confirm-btn-cancel { color: var(--c-text); background: transparent; border: 1px solid var(--c-line-strong); }
.atelier .confirm-btn-ok { color: var(--c-text-on-accent); background: var(--c-verlauf); border: 1px solid transparent; }

/* =============================================================================
   11  TOAST UND LADER
   -----------------------------------------------------------------------------
   js/ui.js:227 haengt #toast-container mit z-index 9999 an den body,
   js/ui.js:338 #global-loader mit 10000. Beide liegen damit UNTER Navigation
   (100100) und Panels (100300) — eine Fehlermeldung waere hinter dem Panel
   unsichtbar. Das ist ein Fehler, den erst die neue z-index-Skala erzeugt hat.

   Korrigiert wird hier statt in js/ui.js, weil die Datei von allen Seiten
   geladen wird — auch von den noch hellen. !important ist noetig, weil ui.js
   die Werte inline setzt.
   ============================================================================= */

.atelier #toast-container { z-index: var(--z-toast) !important; }
.atelier #global-loader  { z-index: calc(var(--z-toast) - 50) !important; background: rgb(3 2 5 / .72) !important; }

.atelier #toast-container .toast,
.atelier #toast-container > div {
  color: var(--c-text) !important;
  background: var(--c-surface) !important;
  border: 1px solid var(--c-line-strong) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--d-3) !important;
}
/* showToast kennt genau drei Typen: success, error, info (js/ui.js:221). */
.atelier #toast-container .toast.success { border-inline-start: 3px solid var(--c-good) !important; }
.atelier #toast-container .toast.error   { border-inline-start: 3px solid var(--c-bad) !important; }
.atelier #toast-container .toast.info    { border-inline-start: 3px solid var(--c-info) !important; }

/* =============================================================================
   12  SEITENRAHMEN
   -----------------------------------------------------------------------------
   .page-content kommt in allen vierzehn Seiten vor (styles-news.css:135) und
   setzt margin-top:72px — zusammen mit body.has-hn-navigation (header.js) sind
   das heute 144px Leerraum unter der Leiste. Der Abstand gehoert an EINE
   Stelle, und das ist die Navigation.
   ============================================================================= */

.atelier .page-content {
  max-inline-size: var(--page-max);
  margin-inline: auto;
  margin-block-start: 0;                /* nicht noch einmal 72px */
  padding: var(--gap-section) var(--gutter) var(--s-9);
}
.atelier .page-header { margin-block-end: var(--s-6); }
.atelier .page-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--t-2xl); line-height: .95; text-transform: uppercase;
  color: var(--c-text);
}
.atelier .page-subtitle { font-size: var(--t-md); color: var(--c-text-muted); margin-block-start: var(--s-2); }

.atelier .breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  font-size: var(--t-xs); color: var(--c-text-muted);
  margin-block-end: var(--s-4);
}

/* =============================================================================
   13  ALTE KNOPFKLASSEN
   -----------------------------------------------------------------------------
   .btn-primary, .btn-secondary, .btn-large, .btn-cancel und .btn-save stehen
   im Markup der Seiten und in JS-Templates. Sie hier zu bedienen ist billiger
   und sicherer, als in vierzehn Dateien und mehreren Renderern umzubenennen.
   ============================================================================= */

.atelier .btn-primary, .atelier .btn-secondary, .atelier .btn-cancel, .atelier .btn-save {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-block-size: 3rem; padding-inline: var(--s-5);
  font-family: var(--font-ui); font-size: var(--t-sm); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  border-radius: var(--r-full); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: box-shadow var(--dur-3) var(--ease-paper), background var(--dur-2) var(--ease-inout),
              border-color var(--dur-2) var(--ease-inout), transform var(--dur-1) var(--ease-paper);
}
.atelier .btn-primary, .atelier .btn-save {
  color: var(--c-text-on-accent); background: var(--c-verlauf); border: 1px solid transparent;
}
@media (hover: hover) { .atelier .btn-primary:hover, .atelier .btn-save:hover { box-shadow: var(--glow-accent); transform: translateY(-1px); } }
.atelier .btn-secondary, .atelier .btn-cancel {
  color: var(--c-text); background: transparent; border: 1px solid var(--c-line-strong);
}
@media (hover: hover) { .atelier .btn-secondary:hover, .atelier .btn-cancel:hover { background: rgb(255 255 255 / .05); border-color: var(--c-text-muted); } }
.atelier .btn-large { min-block-size: 3.5rem; padding-inline: var(--s-6); font-size: var(--t-base); }
.atelier .btn-primary:disabled, .atelier .btn-secondary:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
.atelier .btn-primary:active, .atelier .btn-secondary:active { transform: translateY(1px); }

/* =============================================================================
   14  ALTE MODALKLASSEN
   -----------------------------------------------------------------------------
   Wichtig: js/product-carousel.js:292-397 baut sein Variantenmodal zur Laufzeit
   in .modal-overlay/.modal-content/.modal-header/.modal-close. Diese Klassen
   kamen aus styles-news.css und faellt die weg, ist das Modal unformatiert.
   Bis der Baustein auf Panels umgestellt ist, wird er hier bedient.

   NICHT die alte .modal-overlay-Regel wiederbeleben: styles-news.css definiert
   sie zweimal (970 mit display:none, 3759 mit display:flex), weshalb alle
   statischen Modals dort ausschliesslich ueber ihr inline display:none
   funktionieren. Hier steht deshalb KEIN display.
   ============================================================================= */

.atelier .modal-overlay {
  position: fixed; inset: 0; z-index: var(--z-panel);
  align-items: center; justify-content: center;
  padding: var(--s-4);
  background: rgb(3 2 5 / .78);
  backdrop-filter: blur(6px);
}
.atelier .modal-content {
  inline-size: min(34rem, 100%); max-block-size: 86dvh; overflow-y: auto;
  background: var(--c-surface);
  border: var(--line-strong); border-radius: var(--r-lg);
  box-shadow: var(--d-4);
}
.atelier .modal-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-block-end: var(--line);
}
.atelier .modal-header h2, .atelier .modal-header h3 {
  font-family: var(--font-display); font-size: var(--t-xl);
  text-transform: uppercase; color: var(--c-text);
}
.atelier .modal-close {
  display: grid; place-items: center;
  inline-size: 2.25rem; block-size: 2.25rem;
  color: var(--c-text-muted); background: none;
  border: 1px solid transparent; border-radius: var(--r-full); cursor: pointer;
}
.atelier .modal-close:hover { color: var(--c-text); border-color: var(--c-line-strong); }
.atelier .modal-body { padding: var(--s-5); }
.atelier .modal-footer { display: flex; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-block-start: var(--line); }