:root {
  --amber: #FFB300;
  --accent: #E53935;
  --ink: #EFEFEF;
  --muted: #9E9E9E;
  /* Zwischen ink und muted: fuer kleine Schrift, die lesbar sein muss, ohne
     so laut zu werden wie der Fliesstext (Bildnamen, Schlagworte). */
  --ink-weich: #CFCAC4;
  --panel: #141414;
  --line: #262626;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Das hidden-Attribut muss jede display-Regel schlagen.
   Ohne das hier gewinnt schon eine Klasse wie .fetch-box { display: flex }
   gegen den Browser-Standard [hidden] { display: none } -- der Kasten bleibt
   sichtbar, obwohl das Skript ihn ausgeblendet hat. Genau das passierte auf
   jeder Design-Seite: Der Android-Knopf "In die App laden" stand auch am
   Rechner da, direkt neben dem QR-Code, den er ersetzen sollte
   (16.08. auf dockwerk.app nachgemessen). */
[hidden] { display: none !important; }

body {
  background: #000;
  color: var(--ink);
  font-family: "Segoe UI", Roboto, system-ui, sans-serif;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Die Kopfleiste bleibt beim Blaettern stehen: In der Galerie scrollt man an
   183 Kacheln vorbei, und der Weg zurueck zum Editor lag bis dahin ganz oben.
   Eigener Hintergrund ist Pflicht -- transparent scrollte der Inhalt sichtbar
   hindurch. z-index nur, weil das Editor-Overlay absolut positioniert ist;
   der Bilddialog liegt ohnehin in der Top-Layer und bleibt darueber. */
header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #000;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
  padding: 1.1rem clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
}
/* Sprungmarken und Anker duerfen nicht unter der Leiste landen. */
:target { scroll-margin-top: 5rem; }
/* Auf niedrigen Bildschirmen frisst eine feste Leiste zu viel Hoehe --
   dort schmaler, statt sie ganz aufzugeben. */
@media (max-height: 34rem) {
  header { padding-block: 0.5rem; }
  .brand { font-size: 1.1rem; }
}
.brand {
  color: var(--amber); text-decoration: none;
  font-size: 1.35rem; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase;
}
.brand .dot { color: var(--accent); }
nav { display: flex; align-items: center; gap: 1.4rem; }
nav a { color: var(--muted); text-decoration: none; }
nav a:hover { color: var(--ink); }
/*
  Aktive Seite: Bernstein wie die gewaehlte Kachel in der App -- und dazu ein
  Strich. Farbe allein waere zu wenig; wer Rot/Gelb schlecht unterscheidet,
  saehe sonst gar keinen Unterschied zum Rest der Leiste.
*/
nav a[aria-current="page"] {
  color: var(--amber);
  border-bottom: 2px solid var(--amber);
  padding-bottom: 0.15rem;
}
nav a.cta {
  color: #000; background: var(--amber);
  padding: 0.45rem 0.9rem; border-radius: 999px; font-weight: 600;
}
form.inline { display: inline; }
.linkish {
  background: none; border: 0; color: var(--muted);
  font: inherit; cursor: pointer;
}
.linkish:hover { color: var(--ink); }

/* Destruktiv: gedaempft, damit es nicht einlaedt, aber im Rot des Akzents,
   damit ein Fehlgriff auffaellt, bevor er passiert. */
.linkish.danger { color: var(--accent); opacity: 0.75; }
.linkish.danger:hover { color: var(--accent); opacity: 1; }

/* Links im Inhalt: ohne diese Regel greift die Browser-Vorgabe -- dunkelblau
   auf schwarzem Grund und damit praktisch unlesbar. Kacheln (.card) und
   Abzeichen (.badge) setzen ihre Farbe selbst und bleiben unberuehrt. */
main a { color: var(--amber); text-decoration-color: rgba(255, 179, 0, 0.45); }
main a:hover { text-decoration-color: var(--amber); }

main {
  flex: 1;
  width: 100%; max-width: 68rem; margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3.5rem) clamp(1rem, 4vw, 3rem);
}

h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin-bottom: 0.6rem; }
h2 { font-size: 1.3rem; margin: 2.5rem 0 1rem; }
p.lead { color: var(--muted); max-width: 42rem; }

.grid {
  display: grid; gap: 1.2rem; margin-top: 1.6rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
/* Reiner Hochkant-Filter: Alle Kacheln zeigen die Hochkant-Fassung, also
   schmalere Spalten -- in voller Kachelbreite waere jedes Geraet doppelt so
   hoch wie breit und das Raster ellenlang. Der lange Selektor uebersteuert
   die 34%-Regel fuer EINZELNE hochkante Kacheln im gemischten Raster
   (:has zaehlt mit seinem Inhalt in die Spezifitaet). */
.grid-hoch { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }
.grid-hoch .card .dw-device:has(> .dw-stage.dw-hoch) { width: 100%; }
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 0.7rem; padding: 1rem; text-decoration: none; color: inherit;
  display: block;
}
.card:hover { border-color: var(--amber); }

/* Kuratier-Knoepfe unter der Karte: eigener Streifen, damit sie nicht im
   Link stecken und ein Fehlgriff nicht bloss "danebengeklickt" bedeutet. */
.card-slot { display: flex; flex-direction: column; }
.card-slot .card { flex: 1; }
.card-actions {
  display: flex; gap: 1rem; align-items: center;
  padding: 0.5rem 0.2rem 0;
}
.linkish.approve { color: var(--amber); }
.queue-switch { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-top: 1rem; }
.queue-switch .chip { text-decoration: none; }
.card h3 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.card .meta { color: var(--muted); font-size: 0.85rem; }
.badge {
  display: inline-block; font-size: 0.75rem; color: var(--amber);
  border: 1px solid var(--amber); border-radius: 999px;
  padding: 0.05rem 0.5rem; margin-inline-end: 0.3rem;
}
/* Lage-Kennzeichen auf der Kachel: kleiner und an den rechten Rand der
   Meta-Zeile -- es traegt 70 von 83 Kacheln und soll Hinweis bleiben, nicht
   Blickfang. inline-end statt right, damit es auf RTL-Seiten links sitzt. */
.badge-lage {
  float: inline-end;
  font-size: 0.68rem;
  margin-inline-end: 0;
  margin-inline-start: 0.3rem;
}

.empty {
  border: 1px dashed var(--line); border-radius: 0.7rem;
  padding: 2.5rem 1.5rem; text-align: center; color: var(--muted);
}

/* Herkunft eines Designs ("von Dockwerk") -- bewusst OHNE Rahmen: Die
   Badge-Optik gehoert klickbaren Links, ein Abzeichen darf nicht wie ein
   Knopf aussehen. */
.origin { font-size: 0.75rem; color: var(--muted); margin-inline-end: 0.3rem; }

/* Bausteine-Filter der Galerie: Checkboxen, als Chips verkleidet. Der
   unsichtbare Haken bleibt fokussierbar -- focus-within zeichnet den Ring. */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 1rem 0 0.6rem; }

/* Beschriftung der beiden Gruppen -- gleiche Mindestbreite, damit Filter-
   und Sortier-Chips an derselben Kante beginnen und die Zeilen als zwei
   getrennte Werkzeuge lesbar sind. */
.gruppen-label {
  min-width: 6rem; font-size: 0.8rem; color: var(--ink);
  text-transform: uppercase; letter-spacing: 0.12em;
}
.filter-hinweis { margin: 0 0 0.7rem; }

/* Suche: dieselbe Zeilenform wie Filter und Sortierung, damit die drei
   Werkzeuge als eine Leiste gelesen werden. */
.suche { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 1rem 0 0; }
.suche input {
  flex: 1 1 14rem; max-width: 22rem;
  padding: 0.4rem 0.7rem; font: inherit; font-size: 0.95rem;
  color: var(--ink); background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px;
}
.suche input::placeholder { color: var(--muted); }

/* Haken im angehakten Filter: Er sagt, dass hier mehrere gleichzeitig
   gelten duerfen. Die Sortierung daneben laesst nur eines zu und traegt
   deshalb keinen -- dafuer ist ihr aktiver Chip gefuellt statt umrandet. */
.filters .chip.on::before { content: "✓ "; }
.sorts .chip.on { background: var(--amber); color: #000; }

/* Sortierung: dieselben Chips, aber mit Radios darin -- die drei
   schliessen einander aus. Eigene Zeile unter den Filtern, damit man
   "wovon" und "in welcher Reihenfolge" nicht fuer dasselbe haelt. */
.sorts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 1.4rem; }
/* Lage: quer oder hochkant. Die beiden schliessen einander aus -- deshalb
   der gefuellte Chip wie bei der Sortierung und kein Haken. */
.lage-switch {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin: 1.4rem 0 0;
}
.lage-switch .chip { background: none; font: inherit; font-size: 0.85rem; }
.lage-switch .chip.on { background: var(--amber); color: #000; }

.chip {
  position: relative; display: inline-block; cursor: pointer;
  font-size: 0.85rem; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.25rem 0.8rem;
}
.chip:hover { border-color: var(--muted); }
.chip.on { color: var(--amber); border-color: var(--amber); }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:focus-within { outline: 2px solid var(--amber); outline-offset: 2px; }

/* Fliesstext (Datenschutz): schmalere Spalte, damit die Zeilen lesbar bleiben --
   68rem sind fuer Kachelgitter richtig und fuer Absaetze zu breit. */
.prose { max-width: 44rem; }
.prose h3 { font-size: 1.05rem; margin: 1.6rem 0 0.4rem; }
.prose p { margin-bottom: 0.9rem; }
.prose .muted { color: var(--muted); font-size: 0.85rem; }

pre {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 0.7rem; padding: 1rem; overflow-x: auto;
  font-size: 0.85rem; color: var(--amber);
}

footer {
  border-top: 1px solid var(--line);
  padding: 1.2rem clamp(1rem, 4vw, 3rem);
  color: var(--muted); font-size: 0.85rem;
}
footer a { color: var(--muted); }
footer a:hover { color: var(--ink); }

/* Weltkarte: das Canvas bringt sein Seitenverhaeltnis mit (120 zu 50
   Zellen). max-* statt fester Groesse laesst es proportional schrumpfen,
   der Flex-Container setzt es mittig -- sonst zoege es sich auf die
   Flaeche und das Land klebte am Rand. */
.dw-worldmap {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.dw-worldmap canvas { max-width: 100%; max-height: 100%; }

/* --- Design-Vorschau (Renderer) --------------------------------------- */

.dw-stage {
  position: relative;
  aspect-ratio: 2244 / 1008;
  /* Die Vorschau bleibt IMMER links-nach-rechts, auch auf RTL-Seiten:
     Das Layout eines Designs ist Gestaltung, nicht Sprache. Das Geraet
     erzwingt dasselbe (DesignRenderer setzt LAYOUT_DIRECTION_LTR). */
  direction: ltr;
  background: #000;
  border-radius: 0.5rem;
  overflow: hidden;
  --dw-u: 1px;              /* wird per JS auf kurze Buehnenseite/100 gesetzt */
}
/* Hochkant: dieselbe Buehne, gedrehtes Seitenverhaeltnis. */
.dw-stage.dw-hoch { aspect-ratio: 1008 / 2244; }
.dw-frame {
  position: absolute; inset: 0;
  display: flex;
  padding: calc(var(--dw-u) * 1.5);
}
.dw-frame > * { flex: 1; }

.dw-box { display: flex; min-width: 0; min-height: 0; }
.dw-row { flex-direction: row; }
.dw-col { flex-direction: column; }

/* Ebenen (overlay, Format-Version 2): Kinder teilen sich die Flaeche,
   das letzte liegt oben. Heisst dw-stack, weil .dw-overlay bereits dem
   Bedien-Overlay des Editors gehoert. */
.dw-stack { position: relative; min-width: 0; min-height: 0; }
.dw-stack > * { position: absolute; inset: 0; }

.dw-widget {
  display: flex; align-items: center; justify-content: center;
  min-width: 0; min-height: 0;
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
  white-space: pre-line; text-align: center;
  line-height: 1.1;
}

.dw-analog { padding: calc(var(--dw-u) * 1); }
.dw-dial { width: 100%; height: 100%; }

.dw-digital { font-size: calc(var(--dw-u) * 62); font-weight: 200; }
.dw-place   { font-size: calc(var(--dw-u) * 7); font-weight: 400; }
.dw-date    { font-size: calc(var(--dw-u) * 9); font-weight: 300; }
.dw-alarm   { font-size: calc(var(--dw-u) * 9); font-weight: 300; }
/* Widget-Flaeche: gestrichelter Rahmen statt Inhalt -- hier haengt am
   Geraet ein App-Widget, das der Browser nicht kennen kann. */
.dw-widgetslot {
  font-size: calc(var(--dw-u) * 7); font-weight: 300; opacity: 0.55;
  border: 1px dashed currentColor; border-radius: calc(var(--dw-u) * 2);
}
/* Fokus-Flaeche (Format-Version 4): Ring hinter dem Text, beides mittig.
   Die Schrift haengt an der Flaechenhoehe (--dw-fh, in fitWidgets gesetzt),
   nicht an der Buehne -- in der App sind es dieselben Anteile 22 % und 40 %
   der View-Hoehe. */
.dw-focus { position: relative; }
.dw-focus-ring {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  color: inherit;
}
.dw-focus-text {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  line-height: 1.15;
}
/* nowrap, weil die App jede Zeile in EINEM Zug zeichnet: Dort gibt es keinen
   Umbruch, nur eine kleinere Schrift. Ohne das brach "25 Min" um und lief aus
   der Flaeche -- und die Breitenkorrektur in fitWidgets kann erst messen, wenn
   der Text nicht umbricht (scrollWidth). */
.dw-focus-line { white-space: nowrap; }
.dw-focus-word { font-size: calc(var(--dw-fh, var(--dw-u)) * 22); font-weight: 300; }
.dw-focus-time { font-size: calc(var(--dw-fh, var(--dw-u)) * 40); font-weight: 300; }

.dw-weather { font-size: calc(var(--dw-u) * 10); font-weight: 300; }
.dw-agenda  {
  font-size: calc(var(--dw-u) * 8); font-weight: 300;
  text-align: left; justify-content: flex-start;
  padding-left: calc(var(--dw-u) * 2);
}

/* Der Kalender fuellt seine Box, wie MonthCalendarView.kt: 7 gleiche Spalten,
   gleich hohe Zeilen, Schrift an der Zeilenhoehe (--dw-cell, per JS gesetzt).
   Frueher waren die Zellen quadratisch und die Schrift haengte an der Buehne --
   dadurch lief der Kalender in kleinen Feldern ueber. */
.dw-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr;
  align-content: stretch;
  padding: calc(var(--dw-u) * 2);
  --dw-cell: calc(var(--dw-u) * 10);
}
.dw-cal-month {
  grid-column: 1 / -1;
  font-size: calc(var(--dw-cell) * 0.70); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.dw-cal-head {
  font-size: calc(var(--dw-cell) * 0.55); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.dw-cal-day {
  font-size: calc(var(--dw-cell) * 0.55);
  display: flex; align-items: center; justify-content: center;
}
/* Durchmesser 0.84 der Zeilenhoehe = Radius 0.42 wie in MonthCalendarView.kt */
.dw-cal-day .dw-today {
  color: #000; border-radius: 50%; font-weight: 500;
  width: calc(var(--dw-cell) * 0.84); height: calc(var(--dw-cell) * 0.84);
  display: flex; align-items: center; justify-content: center;
}

/* Beispieldaten kennzeichnen (Weckzeit/Termine kennt der Browser nicht) */
.dw-sample { position: relative; }

/* Abstand liegt jetzt am Rahmen (.dw-device), nicht mehr am Bildschirm --
   sonst zaehlt er als Innenabstand und der Rahmen wird unten dicker. */

/*
  Hinweis nur auf schmalen Bildschirmen. Bewusst ein Hinweis und keine Sperre:
  Der Editor laeuft auf dem Handy, er ist dort nur eng (die Knoepfe im
  gewaehlten Feld sind 27 px gross, empfohlen sind 44). Wer trotzdem bauen
  will, soll es duerfen -- eine Behauptung "geht nicht" waere schlicht falsch.
*/
/* Hinweis auf das fehlende Konto -- auffaellig genug, um vor der Arbeit
   gelesen zu werden, aber keine Fehlermeldung: Es ist ja nichts schiefgegangen. */
.anmelde-hinweis {
  background: var(--panel);
  border: 1px solid var(--amber);
  border-radius: 0.6rem;
  padding: 0.8rem 1rem;
  margin: 1.1rem 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted);
}
.anmelde-hinweis strong { color: var(--ink); }
.anmelde-hinweis a { color: var(--amber); }

/* Betreiber-Modus: Was hier gespeichert wird, sehen alle sofort. Rot und der
   Balken links, damit die Zeile sich von den beiden anderen Hinweisen auf
   dieser Seite unterscheidet -- sie tragen dieselbe Form, aber nicht dieselbe
   Tragweite. */
.dockwerk-modus {
  background: var(--panel);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--accent);
  border-radius: 0.6rem;
  padding: 0.8rem 1rem;
  margin: 1.1rem 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted);
}
.dockwerk-modus strong { color: var(--accent); }

.klein-hinweis { display: none; }
@media (max-width: 48rem) {
  .klein-hinweis {
    display: block;
    background: var(--panel); border: 1px solid var(--line);
    border-radius: 0.6rem; padding: 0.8rem 1rem; margin: 1.1rem 0;
    font-size: 0.9rem; color: var(--muted); line-height: 1.5;
  }
  .klein-hinweis strong { color: var(--ink); }
}

/* Sprachumschalter im Fuss: Knoepfe, die wie Links aussehen */
.lang-switch { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-inline-start: 1rem; }
.lang-switch button {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--muted); cursor: pointer;
}
.lang-switch button:hover { color: var(--ink); }
.lang-switch button[aria-current="true"] { color: var(--amber); }

/* .status wird vom Editor benutzt (Speichern-Meldungen) */
.status { font-size: 0.85rem; color: var(--muted); }
.status.ok { color: #4CD964; }
.status.bad { color: var(--accent); }

/* --- Klappanzeige ------------------------------------------------------ */

.dw-flip {
  gap: calc(var(--dw-u) * 1.6);
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
}
.dw-flip-card {
  position: relative;
  height: calc(var(--dw-u) * 62);
  width: calc(var(--dw-u) * 45);          /* Verhaeltnis 0.72 wie in der App */
  background: #161616;
  border-radius: calc(var(--dw-u) * 4);
  overflow: hidden;
  perspective: calc(var(--dw-u) * 200);
}
.dw-flip-lower, .dw-flip-upper {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--dw-u) * 48);
  font-weight: 300;
  line-height: 1;
}
/* Obere Haelfte: nur der Bereich ueber der Fuge ist sichtbar */
.dw-flip-upper {
  clip-path: inset(0 0 50% 0);
  /* Erben statt eigener Wert: Setzt ein Design die Kartenfarbe (card),
     traegt die Karte sie -- ein fester Ton hier liesse die obere Haelfte
     grau, waehrend die untere die Designfarbe zeigt. */
  background: inherit;
  transform-origin: center center;
}
.dw-flip-upper.dw-flipping { animation: dw-flip-down 420ms ease-in forwards; }
@keyframes dw-flip-down {
  from { transform: scaleY(1); }
  to   { transform: scaleY(0); }
}
.dw-flip-seam {
  position: absolute; left: 0; right: 0; top: 50%;
  height: calc(var(--dw-u) * 1);
  transform: translateY(-50%);
  background: #000;
}
.dw-flip-colon {
  font-size: calc(var(--dw-u) * 30);
  font-weight: 300;
  padding: 0 calc(var(--dw-u) * 0.5);
}

/* --- Handy-Rahmen um die Vorschau -------------------------------------- */

.dw-device {
  position: relative;
  /* flex + flex-start: sonst streckt der Container den Bildschirm und wird
     dabei hoeher als dessen Seitenverhaeltnis -- der Rand waere unten dicker */
  display: flex;
  align-items: flex-start;
  /* Gehaeuse: Bildschirm plus Rand ringsum */
  padding: 2.1%;
  background: linear-gradient(155deg, #3a3a3c 0%, #1c1c1e 45%, #2c2c2e 100%);
  border-radius: 6.5% / 14%;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),   /* Kante des Gehaeuses */
    0 0.6rem 1.6rem rgba(0, 0, 0, 0.55);
}
/* Der Bildschirm sitzt im Gehaeuse und ist innen etwas runder */
.dw-device > .dw-stage {
  flex: 1;
  border-radius: 4% / 9%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.85);
}
/* Hochkant steht das Gehaeuse auf der schmalen Seite: Rundungen tauschen (sie
   sind in Prozent der jeweiligen Achse angegeben) und die Breite deckeln --
   in voller Kachelbreite waere die Kachel mehr als doppelt so hoch wie die
   queren daneben, und das Raster spraenge auseinander. */
.dw-device:has(> .dw-stage.dw-hoch) {
  width: 46%;
  margin-inline: auto;
  border-radius: 14% / 6.5%;
}
/* In der Kachel schmaler: Dort steht die Vorschau neben queren im selben
   Raster, auf der Detailseite darf sie so gross sein, dass man sie beurteilen
   kann. */
.card .dw-device:has(> .dw-stage.dw-hoch) { width: 34%; }
.dw-device > .dw-stage.dw-hoch { border-radius: 9% / 4%; }

/* Seitentasten -- deuten die Geraeteform an, ohne aufdringlich zu sein */
.dw-device::before,
.dw-device::after {
  content: "";
  position: absolute;
  right: -0.14%;
  width: 0.5%;
  background: #48484a;
  border-radius: 0 0.2rem 0.2rem 0;
}
.dw-device::before { top: 26%; height: 9%; }    /* Ein/Aus */
.dw-device::after  { top: 41%; height: 15%; }   /* Lautstaerke */

.card .dw-device { margin-bottom: 0.8rem; }
.card .dw-device::before,
.card .dw-device::after { display: none; }      /* in der Kachel zu klein */

/* --- Bildwahl im Editor ------------------------------------------------- */

/* Knopf statt Auswahlfeld: zeigt die aktuelle Wahl mitsamt Miniatur */
.bild-knopf {
  display: flex; align-items: center; gap: 0.5rem;
  max-width: 60%; padding: 0.3rem 0.5rem;
  font: inherit; font-size: 0.9rem; text-align: start;
  color: var(--ink); background: #000; cursor: pointer;
  border: 1px solid var(--line); border-radius: 0.4rem;
}
.bild-knopf:hover { border-color: var(--amber); }
/* Feste Fläche für die Miniatur, damit der Knopf beim Wechseln zwischen
   "kein Bild" und Bild nicht springt -- und beim Lagewechsel nicht schmaler
   wird, wenn die hochkante Miniatur einrückt. */
.bild-knopf-mini {
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 1.5rem; flex: 0 0 auto;
  background: #000; border: 1px solid var(--line); border-radius: 0.2rem;
  font-size: 0.8rem; overflow: hidden;
}
.bild-knopf-mini img { max-width: 100%; max-height: 100%; object-fit: cover; }

.bild-dialog {
  /* 44rem statt 56: Der Dialog deckte die Vorschau zu weit ab. Wer stoebern
     will, zieht ihn unten rechts auf -- das Raster fuellt sich per auto-fill
     von selbst mit mehr Spalten. */
  width: min(44rem, 92vw);
  max-width: 96vw;
  min-width: 18rem;
  min-height: 12rem;
  resize: both;
  /* Der Reset ganz oben (* { margin: 0 }) raeumt dem <dialog> sein margin:auto
     ab -- also die Zentrierung, die der Browser modalen Dialogen von Haus aus
     gibt. Ohne Gegenmassnahme klebt er oben links am Fensterrand, genau dort,
     wo die feste Kopfleiste steht.

     Waagerecht zentrieren, senkrecht aber FEST unter die Leiste setzen: Ueber
     die Hoehe zu zentrieren hing davon ab, wie gross der Dialog gerade ist --
     bei 1280x720 blieben 5 px Luft, bei 768x1024 lag er schon wieder 2 px
     darunter. top wirkt direkt, weil ein modaler Dialog fixed positioniert
     ist. */
  margin: 0 auto;
  top: 6rem;
  bottom: auto;
  max-height: calc(100vh - 8rem);
  padding: 0; border: 1px solid var(--line); border-radius: 0.8rem;
  background: var(--panel); color: var(--ink);
  /* Der Dialog scrollt in sich, nicht die Seite darunter */
  display: flex; flex-direction: column; overflow: hidden;
}
/* ⚠️ Pflicht, sobald ein <dialog> ein eigenes display bekommt: Der Browser
   blendet geschlossene Dialoge mit display:none aus -- eine UA-Regel, die
   jede Autoren-Regel schlaegt. Ohne die Zeile hier steht die Bildwahl
   dauerhaft auf der Seite (und der Schliessen-Knopf sieht kaputt aus: Er
   setzt open=false, sichtbar bleibt sie trotzdem). Aufgefallen erst, als
   top: 6rem sie aus dem Seitenende in den Blick geschoben hat -- geschlossen
   ist ein Dialog position:absolute, nicht fixed. */
.bild-dialog:not([open]) { display: none; }
/* Nur leicht abgedunkelt: Man waehlt hier ein Motiv und will dabei sehen, wie
   es in der Vorschau wirkt -- der Dialog laesst sich dafuer zur Seite
   schieben. Ganz ohne Schleier ginge auch, aber dann fehlt das Zeichen, dass
   darunter nichts anklickbar ist. */
.bild-dialog::backdrop { background: rgba(0, 0, 0, 0.28); }
/* Beim Zuschneiden bleibt es dunkel: Dort arbeitet man IM Dialog, und das
   Bild darin soll die Aufmerksamkeit haben. */
.bild-kopf {
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  padding: 1rem 1.2rem 0.7rem;
  /* Griff zum Verschieben. touch-action verhindert, dass der Browser das
     Ziehen als Wischgeste versteht und stattdessen scrollt. */
  cursor: move;
  touch-action: none;
  user-select: none;
}
/* Was man bedienen kann, bleibt bedienbar -- der Zeiger sagt es auch. */
.bild-kopf input, .bild-kopf button { cursor: auto; user-select: auto; }
.bild-kopf button { cursor: pointer; }
.bild-kopf h2 { font-size: 1.05rem; margin: 0; flex: 0 0 auto; }
.bild-kopf input {
  flex: 1 1 12rem; min-width: 8rem;
  padding: 0.35rem 0.7rem; font: inherit; font-size: 0.9rem;
  color: var(--ink); background: #000;
  border: 1px solid var(--line); border-radius: 999px;
}
.bild-kopf .chip { background: none; font: inherit; font-size: 0.92rem; color: var(--ink); }
.bild-tags {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  padding: 0 1.2rem 0.7rem;
}
/* Lesbarkeit im Dialog: 0,78 rem sind 12,5 px, und in Grau auf dunklem Grund
   liest das im Vorbeigehen niemand. Die Schlagworte und der Schliessen-Knopf
   tragen hier die Bedienung, also groesser und heller. */
.bild-tags .chip { background: none; font: inherit; font-size: 0.92rem; color: var(--ink); }
.bild-tags .chip.on { background: var(--amber); color: #000; }

.bild-raster {
  display: grid; gap: 0.7rem; padding: 0 1.2rem 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  overflow-y: auto;
}
.bild-kachel {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: 0.3rem; cursor: pointer; font: inherit; text-align: start;
  background: none; color: var(--ink-weich);
  border: 1px solid transparent; border-radius: 0.5rem;
}
.bild-kachel:hover { border-color: var(--muted); color: var(--ink); }
.bild-kachel.on { border-color: var(--amber); color: var(--amber); }
.bild-kachel img,
.bild-ohne {
  width: 100%; aspect-ratio: 2244 / 1008; object-fit: cover;
  border-radius: 0.3rem; background: #000;
}
/* "Schwarz" und "Eigene Bilder" haben kein Bild -- gleiche Kachelform */
.bild-ohne {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); font-size: 1.4rem;
}
/* Hochkant bearbeitet: schmalere, hohe Kacheln -- und weil jede schmaler
   ist, passen mehr nebeneinander. */
.bild-raster.hoch { grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); }
.bild-raster.hoch .bild-kachel img,
.bild-raster.hoch .bild-ohne { aspect-ratio: 1008 / 2244; }
/* --- Ausschnitt waehlen ------------------------------------------------- */
.crop-dialog {
  width: min(52rem, 94vw);
  margin: 0 auto;
  top: 5rem;
  bottom: auto;
  max-height: calc(100vh - 7rem);
  padding: 0; border: 1px solid var(--line); border-radius: 0.8rem;
  background: var(--panel); color: var(--ink);
  display: flex; flex-direction: column; overflow: hidden;
}
/* Ohne das bliebe der geschlossene Dialog sichtbar -- display:flex schlaegt
   das display:none, das der Browser geschlossenen Dialogen gibt. */
.crop-dialog:not([open]) { display: none; }
.crop-dialog::backdrop { background: rgba(0, 0, 0, 0.72); }
.crop-lage {
  font-size: 0.85rem; color: var(--muted); margin-inline-start: auto;
}

.crop-buehne {
  position: relative; margin: 0 1.2rem; align-self: center;
  /* touch-action, damit das Ziehen auf dem Tablet nicht scrollt */
  touch-action: none; user-select: none;
  max-width: calc(100% - 2.4rem);
  /* Schneidet den Schatten des Rahmens am Bildrand ab. Ohne das legt er sich
     ueber den ganzen Bildschirm -- auch ueber die Kopfzeile dieses Dialogs. */
  overflow: hidden;
}
.crop-buehne img { display: block; width: 100%; height: auto; }

.crop-rahmen {
  position: absolute;
  border: 2px solid var(--amber);
  cursor: move;
  /* Verdunkelt alles ausserhalb des Rahmens, ohne ein zweites Element */
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.66);
}
/* Der Griff sitzt INNEN: Die Buehne schneidet jetzt ab, was ueber den Bildrand
   ragt -- aussen liegend waere er bei einem Rahmen am Rand halb weg. */
.crop-griff {
  position: absolute; right: 0; bottom: 0;
  width: 18px; height: 18px;
  background: var(--amber); border-radius: 3px 0 0 0;
  cursor: nwse-resize;
}
.crop-dialog .hint { padding: 0.8rem 1.2rem 1.2rem; }

.bild-name {
  font-size: 0.86rem; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bild-dialog .hint { padding: 0 1.2rem 1.2rem; }

/* --- Aufs Handy holen (QR) --------------------------------------------- */

.fetch-box {
  display: flex; gap: 1.4rem; align-items: flex-start;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 0.7rem; padding: 1.2rem; margin-top: 1rem;
  flex-wrap: wrap;
}
.fetch-box .qr {
  /* QR-Codes brauchen hellen Grund, damit Kameras sie sicher lesen */
  background: #fff; padding: 0.5rem; border-radius: 0.4rem;
  flex: 0 0 auto;
}
.fetch-box > div { flex: 1; min-width: 14rem; }
.fetch-box .lead { max-width: none; }
code.slug {
  display: inline-block;
  background: #000; color: var(--amber);
  border: 1px solid var(--line); border-radius: 0.4rem;
  padding: 0.3rem 0.7rem; font-family: ui-monospace, Consolas, monospace;
}

/* --- Editor ------------------------------------------------------------- */

.editor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.2rem;
  align-items: start;
}
@media (max-width: 900px) {
  .editor-grid { grid-template-columns: 1fr; }
}
.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 0.7rem; padding: 1rem 1.1rem;
}
.panel h2 {
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--muted); margin-bottom: 0.8rem;
}
.panel h3 { font-size: 1rem; margin-bottom: 0.4rem; }
.hint { color: var(--muted); font-size: 0.85rem; }



/* Einstell-Zeilen */
.ctl {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.8rem; margin-bottom: 0.65rem;
}
.ctl > span { color: var(--muted); font-size: 0.9rem; flex: 0 0 auto; }
.ctl select, .ctl input[type="text"], .ctl input[type="number"] {
  background: #000; color: var(--ink);
  border: 1px solid var(--line); border-radius: 0.4rem;
  padding: 0.35rem 0.5rem; font: inherit; min-width: 0;
}
.ctl input[type="text"] { flex: 1; }
.ctl input[type="number"] { width: 4.5rem; }
.range-wrap { display: flex; align-items: center; gap: 0.5rem; flex: 1; }
.range-wrap input[type="range"] { flex: 1; accent-color: var(--amber); }
.range-wrap output { color: var(--muted); font-size: 0.85rem; min-width: 2.5rem; text-align: end; }
.color-wrap { display: flex; align-items: center; gap: 0.4rem; }
.color-wrap input[type="color"] {
  width: 2.2rem; height: 2rem; border: 1px solid var(--line);
  border-radius: 0.4rem; background: #000; padding: 0.15rem; cursor: pointer;
}

.save-row { display: flex; align-items: center; gap: 0.8rem; margin-top: 1rem; }
.cta-btn {
  background: var(--amber); color: #000; border: none;
  border-radius: 999px; padding: 0.55rem 1.4rem;
  font: inherit; font-weight: 600; cursor: pointer;
  /* Wird auch auf <a> benutzt ("In die App laden") -- ein Knopf traegt
     keine Unterstreichung, main a wuerde sie sonst mitgeben. */
  text-decoration: none;
}
.cta-btn:hover { filter: brightness(1.1); }

/* Umrissvariante fuer die zweitwichtigste Handlung einer Seite: gleiche
   Groesse und Form, aber ohne Fuellung -- so bleibt klar, welcher Knopf
   der Hauptweg ist. */
.cta-btn.ghost {
  background: none; color: var(--amber);
  border: 1px solid var(--amber);
}
.cta-btn.ghost:hover { background: rgba(255, 179, 0, 0.12); filter: none; }
.design-actions { margin-top: 1rem; }

/* --- Editor: Flaechen teilen ------------------------------------------- */

/* Das Overlay liegt deckungsgleich auf der Buehne und traegt Auswahlrahmen
   und Ziehgriffe -- der Renderer weiss so nichts von der Bedienung. */
.dw-editable { position: relative; }
.dw-overlay {
  position: absolute;
  /*
    Deckt die Buehne, nicht das Gehaeuse. Die Masse setzt der Editor per JS
    (legeOverlay), gemessen an der Buehne selbst.

    In CSS ging das zweimal schief: `inset` braucht zwei verschiedene Zahlen,
    weil top/bottom gegen die HOEHE rechnen, Prozent-Padding aber gegen die
    BREITE -- die zweite Zahl galt dann nur fuer ein Seitenverhaeltnis und sass
    hochkant daneben. Prozent-MARGIN rechnet zwar wie Padding gegen die Breite,
    aber gegen eine ANDERE: das Padding des Gehaeuses gegen die Breite seines
    Elternteils, das Margin gegen die des Gehaeuses -- und hochkant ist das
    Gehaeuse nur ein Drittel so breit. Gemessen stimmt es in jeder Lage.
  */
  inset: 0;
  pointer-events: none;            /* Klicks gehen an die Vorschau durch ... */
}
.dw-overlay > * { pointer-events: auto; }   /* ... nur Griffe fangen sie ab */

.dw-editable .dw-empty {
  outline: 1px dashed #4a4a4a;
  outline-offset: -3px;
  background: repeating-linear-gradient(
    45deg, transparent, transparent 7px,
    rgba(255, 255, 255, 0.035) 7px, rgba(255, 255, 255, 0.035) 14px);
}

/* Ebenen-Modus: inaktive Ebenen zuruecknehmen und fuer Klicks durchlaessig
   machen -- getaggt und bedient wird nur die aktive Ebene. */
.dw-stack > .dw-layer-dim { opacity: 0.25; pointer-events: none; }

/* Ebenen-Liste im Feld-Panel; aktive Zeile in Bernstein wie die Auswahl */
.layer-row { display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.4rem; }
.layer-name {
  flex: 1; min-width: 0; text-align: start; font: inherit; cursor: pointer;
  background: #000; color: var(--ink);
  border: 1px solid var(--line); border-radius: 0.4rem;
  padding: 0.35rem 0.6rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.layer-row.on .layer-name { border-color: var(--amber); color: var(--amber); }
.layer-name:hover { border-color: var(--ink); }
.layer-all {
  display: block; width: 100%; margin: 0.2rem 0 0.8rem;
  background: none; border: 1px dashed var(--line); border-radius: 0.4rem;
  color: var(--muted); font: inherit; cursor: pointer;
  padding: 0.3rem 0.6rem;
}
.layer-all.on { border-color: var(--amber); color: var(--amber); }
.layer-all:hover { border-color: var(--ink); }

.dw-sel-frame {
  position: absolute;
  outline: 2px solid var(--amber);
  outline-offset: -2px;
  border-radius: 0.2rem;
  pointer-events: none;
}
.dw-actions {
  position: absolute; top: 0.25rem; right: 0.25rem;
  display: flex; gap: 0.2rem;
  pointer-events: auto;
}
.dw-act {
  background: rgba(0, 0, 0, 0.78);
  color: var(--amber);
  border: 1px solid var(--amber);
  border-radius: 0.3rem;
  width: 1.7rem; height: 1.7rem;
  font-size: 0.9rem; line-height: 1;
  cursor: pointer;
}
.dw-act:hover:not(:disabled) { background: var(--amber); color: #000; }
.dw-act:disabled { opacity: 0.3; cursor: default; border-color: var(--muted); color: var(--muted); }

/* Ziehgriffe auf den Trennlinien */
.dw-grip { position: absolute; }
.dw-grip.vert { width: 11px; cursor: col-resize; }
.dw-grip.horz { height: 11px; cursor: row-resize; }
.dw-grip::after {
  content: ""; position: absolute; background: transparent;
  transition: background 0.12s;
}
.dw-grip.vert::after { left: 4px; top: 0; width: 3px; height: 100%; }
.dw-grip.horz::after { top: 4px; left: 0; height: 3px; width: 100%; }
.dw-grip:hover::after { background: var(--amber); }

.editor-grid.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .editor-grid.two { grid-template-columns: 1fr; } }

/* Vorschau + Panels. Quer stehen sie untereinander (die Vorschau ist dann so
   breit wie die Seite), das ist der Normalfall und braucht keine Regel. */
.editor-buehne > .dw-device { margin: 1.4rem 0; }

/* Hochkant rücken sie nebeneinander: Das Handy ist schmal, rechts davon bleibt
   Platz frei -- untereinander müsste man scrollen, um Feld und Vorschau
   zugleich zu sehen. Erst ab 900px, darunter ist für zwei Spalten kein Raum. */
@media (min-width: 901px) {
  .editor-buehne:has(.dw-stage.dw-hoch) {
    display: flex;
    align-items: flex-start;
    gap: 1.4rem;
  }
  .editor-buehne:has(.dw-stage.dw-hoch) > .dw-device {
    /* Linksbündig statt zentriert -- hier teilt es sich die Zeile. Breiter als
       zum Ansehen nötig: Im Editor wird auf der Bühne gearbeitet, Felder
       angetippt und Trennlinien gezogen. Rechts bleiben rund 55 % für die
       beiden Kästen, was für ihre Formulare reicht. */
    /* 38 % der Breite. Die zweite Grenze ist nur eine Notbremse für flache
       Fenster (Laptop im Querformat, geteilter Schirm) -- im Normalfall
       gewinnt die Prozentangabe. Enger gesetzt fiele das Gerät wieder auf
       seine alte Breite zurück, denn über der Bühne steht noch der Seitenkopf. */
    width: min(38%, 45vh);
    flex: 0 0 auto;
    margin: 0;
  }
  .editor-buehne:has(.dw-stage.dw-hoch) > .editor-grid {
    flex: 1;
    /* Eine Spalte: Neben dem hohen Handy steht mehr Höhe als Breite zur
       Verfügung, und zwei schmale Kästen nebeneinander nutzen die nicht. */
    grid-template-columns: 1fr;
    align-content: start;
  }
  /* „Design" nach oben, „Feld" darunter: Design bleibt gleich, während Feld
     mit jeder Auswahl wechselt -- oben steht damit das Ruhige. */
  .editor-buehne:has(.dw-stage.dw-hoch) > .editor-grid > .panel:first-child {
    order: 2;
  }
}

/* Besitzer-Kasten auf der Design-Detailseite (veroeffentlichen / zurueckziehen) */
.owner-box {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 0.7rem; padding: 1rem 1.1rem; margin-top: 1rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
}
.owner-box p { flex: 1; min-width: 16rem; margin: 0; }
.owner-box form { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }

/* Bewerten: fuenf Knoepfe, keine Zeile JavaScript.
   Die Sterne stehen im HTML rueckwaerts (5 zuerst) und werden per
   row-reverse wieder gedreht. Nur so trifft der Geschwister-Selektor beim
   Ueberfahren die KLEINEREN Zahlen, und die Vorschau fuellt sich von links
   auf -- CSS kennt keinen Selektor fuer "alles davor". */
.rate-box { margin-top: 1.2rem; }
.rate-form { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.star-row { display: flex; flex-direction: row-reverse; justify-content: flex-end; }
.star {
  background: none; border: 0; padding: 0 0.1rem;
  font: inherit; font-size: 1.7rem; line-height: 1;
  color: var(--muted); cursor: pointer;
}
.star.on { color: var(--amber); }
.star:hover, .star:hover ~ .star { color: var(--amber); }

/* In der Kachel kleiner: Dort ist das Design die Hauptsache, die Sterne
   sind eine Zugabe. Gleiche Reihenfolge-Umkehr wie oben (.star-row). */
.card-stars { margin-top: 0.3rem; }
.card-stars .star { font-size: 1.15rem; }

/* Foto-Baustein: im Browser nur ein Platzhalter -- die Bilder liegen auf dem
   Geraet und werden nie hochgeladen. */
.dw-photo {
  border: 1px dashed rgba(255, 255, 255, 0.22);
  border-radius: calc(var(--dw-u) * 1.5);
}
.dw-photo-hint {
  display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--dw-u) * 0.8);
  font-size: calc(var(--dw-u) * 7); font-weight: 300;
  opacity: 0.75;
}
.dw-photo-icon { font-size: calc(var(--dw-u) * 16); line-height: 1; }
.dw-photo-sub { font-size: calc(var(--dw-u) * 5); opacity: 0.7; }

/* Hintergrundbild: Der Browser kennt die Bilder des Geraets nicht, deshalb
   ein schematischer Ersatz -- der Schleier darueber ist dagegen echt und
   zeigt, ob der Inhalt lesbar bleibt. */
.dw-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 35%, rgba(255,255,255,0.16), transparent 55%),
    linear-gradient(155deg, #35506b 0%, #6b5140 55%, #2b3038 100%);
}
/* Nur fuer die Bilder des Geraets, die der Browser nicht kennt. Bis zum
   24.08.2026 hing das an .dw-bg und stand damit auf JEDER Vorschau --
   auch ueber mitgelieferten Bildern, wo es nichts zu suchen hat, und bei
   background_flip sogar spiegelverkehrt (die Klasse traegt das scaleX). */
.dw-bg-eigene::after {
  content: "Deine Bilder";
  position: absolute; right: calc(var(--dw-u) * 3); bottom: calc(var(--dw-u) * 2);
  font-size: calc(var(--dw-u) * 4);
  color: rgba(255, 255, 255, 0.5);
  font-family: system-ui, sans-serif;
}
.dw-scrim { position: absolute; inset: 0; }

/* Staff-Werkzeuge: Sprach-Schnellwahl in der Kopfleiste und die
   Sammel-Leiste ueber der Galerie. Bewusst unauffaellig -- sie sind
   Werkzeug, nicht Inhalt. */
.lang-quick select {
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.2rem 0.5rem; font: inherit; font-size: 0.85rem;
}
.sammel-leiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin: 0 0 1rem; padding: 0.6rem 0.8rem;
  border: 1px solid var(--line); border-radius: 0.7rem;
}
.sammel-leiste .chip { background: none; }
.sammel-leiste .chip.danger { color: var(--accent); border-color: var(--accent); }
.sammel-leiste .hint { margin: 0; }
.sammel-pick {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.4rem; cursor: pointer;
  font-size: 0.85rem; color: var(--muted);
}
.sammel-pick input { width: 1.1rem; height: 1.1rem; accent-color: var(--amber); }
.sammel-pick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Rueckmeldung nach Sammel-Aktionen */
.messages { list-style: none; margin: 0 0 1.2rem; display: flex;
            flex-direction: column; gap: 0.4rem; }
.msg { padding: 0.6rem 0.9rem; border-radius: 0.5rem;
       border: 1px solid var(--line); background: var(--panel); }
.msg.success { border-color: var(--amber); }
.msg.warning { border-color: var(--accent); }