/* caricly — „Tinte & Papier" (R2)
   Tokens und Masse stammen aus documentation/design_handoff_caricly_claudeDesign/README.md.
   Erhoehung entsteht ausschliesslich ueber harte Versatzschatten, nie ueber Blur. */

@font-face {
  font-family: 'Fredoka';
  src: url('/static/assets/fonts/fredoka-latin-var.woff2?v=3') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('/static/assets/fonts/nunito-sans-latin-var.woff2?v=3') format('woff2');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --canvas: #FBF7EF;
  --sunken: #F3EADA;
  --raised: #FFFFFF;
  --ink: #181512;
  --ink-muted: #6B6157;
  --ink-faint: #9C9198;
  --accent: #E1442B;
  --accent-press: #B72F1C;
  --accent-wash: #FCE7E1;
  --success: #2E7D6E;
  --success-wash: #E7F1EE;
  --line-soft: #DED3C6;
  --disabled-bg: #EFE6DA;
  --disabled-line: #C9BDAE;
  --disabled-ink: #A99C8C;

  --shadow: 4px 4px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);
  --border: 2.5px solid var(--ink);
  --display: 'Fredoka', system-ui, sans-serif;
  --text: 'Nunito Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }

/* iOS Safari faerbt Button-Text von sich aus blau (-apple-system-blue). Das
   trifft ueber `stroke: currentColor` auch alle Icons. Auf dem Desktop faellt
   es nicht auf, weil Chrome Schwarz vorgibt — auf dem iPhone waren Zahnrad
   und Kachelnamen blau. Farbe deshalb ausdruecklich setzen, nicht erben. */
button { color: var(--ink); font-family: var(--text); }

/* Muss vor allen Komponenten stehen und muss !important sein: Jede spaetere
   Regel mit `display` (etwa `.photo-actions { display: grid }`) schlaegt sonst
   die Vorgabe des Browsers fuer [hidden], und versteckte Elemente bleiben
   sichtbar. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--ink);
  font-family: var(--text);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}

.phone {
  position: relative;
  width: 100%;
  max-width: 430px;
  /* svh, nicht dvh: `dvh` ist die *dynamische* Hoehe und loest auf iOS Safari
     beim ersten Laden auf den grossen Viewport auf, obwohl die Adressleiste
     noch eingeblendet ist. Der untere Teil des Bildschirms — Startknopf und
     Fusszeile — lag dann unter der Leiste und war unerreichbar.
     `svh` ist die kleine Variante und passt immer. */
  height: 100vh;
  height: 100svh;
  margin: 0 auto;
  background: var(--canvas);
  overflow: hidden;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 20px calc(16px + env(safe-area-inset-bottom));
  padding-top: calc(12px + env(safe-area-inset-top));
  /* Sicherheitsnetz. Der Entwurf sieht Bildschirme ohne Scrollen vor, und in
     aller Regel passt es auch. Aber bei sehr kleinen Geraeten oder grosser
     Systemschrift darf der Startknopf nicht einfach unerreichbar sein —
     lieber scrollen als klemmen. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.screen[hidden] { display: none; }
.screen-centered { justify-content: center; align-items: center; gap: 14px; text-align: center; }
.screen-narrow { padding-left: 32px; padding-right: 32px; gap: 12px; }

/* ── Kopfzeile ─────────────────────────────────────────────── */
.topbar { display: flex; align-items: center; gap: 8px; }
.spacer { flex: 1; }
.wordmark { font-family: var(--display); font-weight: 600; font-size: 17px; }
.topbar-title { font-family: var(--display); font-weight: 600; font-size: 17px; margin: 0; }
.title-lg { font-size: 22px; }

/* min-height: 0 gegen das globale `button { min-height: 44px }` — das drueckte
   den 38er-Kreis auf 38x44, sichtbar als Ei um das Zahnrad. Die 44-px-
   Trefferflaeche liefert stattdessen das unsichtbare ::after. */
.circle-btn {
  width: 38px; height: 38px; min-height: 0; flex: none; position: relative;
  border-radius: 50%; border: var(--border); background: var(--canvas);
  display: grid; place-items: center; cursor: pointer; padding: 0;
}
.circle-btn::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
.pill {
  height: 38px; min-height: 0; padding: 0 13px; border-radius: 999px; border: var(--border);
  background: var(--canvas); display: flex; align-items: center; gap: 6px;
  font-family: var(--display); font-weight: 600; font-size: 14px; cursor: pointer;
}
.icon-18 { width: 18px; height: 18px; }
.icon-24 { width: 24px; height: 24px; }
svg { fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }

/* ── Typografie ────────────────────────────────────────────── */
/* Eine Zeile, nie umbrechen: Der Umbruch "Werd zur / Karikatur." hat auf dem
   iPhone eine ganze Kachelreihe Hoehe gekostet. clamp haelt die Zeile auf
   schmalen Geraeten im Platz (gemessen: 207 px Text bei 350 px Platz auf 390er
   Viewport), auf breiten waechst sie bis 29 px. */
.display {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(22px, 6.8vw, 29px);
  line-height: 1.05; letter-spacing: -1px; margin: 0; white-space: nowrap;
}
.underlined {
  color: var(--accent); text-decoration: underline;
  text-decoration-thickness: 3.5px; text-underline-offset: 5px;
}
.subline { font-size: 13.5px; font-weight: 700; color: var(--ink-muted); margin: 0; }
.title { font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -.5px; margin: 0; }
.body-text { font-size: 14px; font-weight: 600; color: var(--ink-muted); line-height: 1.5; margin: 0; }
.caption { font-size: 11.5px; color: var(--ink-faint); margin: 0; }
.section-title {
  font-size: 11px; font-weight: 900; text-transform: uppercase;
  letter-spacing: .7px; color: var(--ink-faint); margin: 4px 0 0;
}
.footnote { font-size: 11.5px; font-weight: 700; color: var(--ink-muted); text-align: center; margin: 0; }

/* ── Upload ────────────────────────────────────────────────── */
.dropzone {
  position: relative; flex: 1; min-height: 120px;
  border-radius: 22px; border: 2.5px dashed var(--disabled-line);
  background: var(--sunken); overflow: hidden;
  display: grid; place-items: center; cursor: pointer;
}
.dropzone.has-photo { border-style: solid; border-color: var(--ink); }
/* Kompakter als frueher (Kreis 48 statt 60, Abstand 6 statt 8): Seit die
   Kacheln das ganze Beispielbild zeigen, bekommt die Dropzone weniger Hoehe —
   mit den alten Massen wurde die zweite Textzeile abgeschnitten. */
.dropzone-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 10px; }
.dropzone-empty strong { font-family: var(--display); font-weight: 600; font-size: 17px; }
.dropzone-empty small { font-size: 12.5px; color: var(--ink-muted); }
.plus-circle {
  width: 48px; height: 48px; border-radius: 50%; background: var(--accent);
  border: var(--border); color: #fff; display: grid; place-items: center;
}
#dropzone-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Miniatur des vollstaendigen Fotos, unten rechts eingesetzt. `contain` statt
   `cover`: Sie soll gerade das zeigen, was die grosse Flaeche wegschneidet. */
#dropzone-thumb {
  position: absolute; right: 10px; bottom: 10px;
  width: 62px; height: 62px; object-fit: contain;
  background: var(--canvas); border: 2px solid var(--ink);
  border-radius: 8px; box-shadow: 2px 2px 0 var(--ink);
  padding: 2px;
}
.dropzone-busy {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(251, 247, 239, .82); font-weight: 700; font-size: 13px;
}

.photo-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ── Knoepfe ───────────────────────────────────────────────── */
.btn-primary, .btn-secondary, .btn-destructive {
  font-family: var(--display); font-weight: 600; cursor: pointer;
  border: var(--border); transition: transform .12s ease-out, box-shadow .12s ease-out;
}
.btn-primary {
  padding: 16px; border-radius: 15px; background: var(--accent);
  box-shadow: var(--shadow); color: #fff; font-size: 17px; width: 100%;
}
.btn-primary:disabled {
  background: var(--disabled-bg); border-color: var(--disabled-line);
  color: var(--disabled-ink); box-shadow: none; cursor: default;
}
.btn-primary:not(:disabled):active {
  background: var(--accent-press); box-shadow: 1px 1px 0 var(--ink); transform: translate(3px, 3px);
}
.btn-secondary {
  padding: 11px; border-radius: 12px; background: var(--canvas); font-size: 14px; color: var(--ink);
}
.btn-secondary:active { transform: scale(.97); }
.btn-destructive {
  padding: 11px; border-radius: 12px; background: var(--canvas);
  border-color: var(--accent-press); color: var(--accent-press); font-size: 14px;
}
.btn-destructive:active { transform: scale(.97); }
.btn-quiet {
  background: none; border: 0; padding: 8px 4px; cursor: pointer;
  font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px;
}

/* ── Stil-Raster ───────────────────────────────────────────── */
/* Der Startbildschirm ist seit den Bildkacheln der dichteste der App. Rhythmus
   6 statt 8 und Rasterzeilen 8 statt 10, damit auf einem iPhone 12 alles bis
   zum Startknopf ohne Scrollen sichtbar ist (gemessen bei 390 x 664). */
#screen-start { gap: 6px; }
.style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
/* Gruppentitel (Frech / Freundlich) laufen im selben Raster ueber die volle
   Breite. Sie kommen aus /v1/styles (`gruppe`), nicht aus dem Markup. */
.style-group-title {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 8px;
  margin: 2px 0 0; font-size: 11px; font-weight: 900; text-transform: uppercase;
  letter-spacing: .7px; color: var(--ink-faint);
}
.style-group-title::after { content: ""; flex: 1; height: 2px; background: var(--line-soft); border-radius: 2px; }
.style-tile {
  position: relative; padding: 0; border-radius: 14px; overflow: hidden;
  background: var(--sunken); border: var(--border); cursor: pointer;
}
.style-tile.is-selected { border-color: var(--accent); box-shadow: 3px 3px 0 var(--accent); }
/* 4:3 statt fester 66 px: Die Kacheln zeigten nur einen schmalen Streifen des
   Beispielbilds. object-position 18 % haelt die Gesichter im Ausschnitt. */
.style-tile img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 18%; }
/* Eigene Klasse statt `.style-tile span`: Die Typselektor-Variante haette auch
   das Haekchen getroffen und es mit display:block sichtbar gemacht.
   Der Name liegt als Auflage auf dem Bild, damit das Bild die volle Kachel hat. */
.style-name {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 8px 6px; text-align: center; color: #fff;
  font-family: var(--display); font-weight: 600; font-size: 13.5px;
  background: linear-gradient(180deg, transparent, rgba(24, 21, 18, .78) 62%);
}
.style-tile.is-selected .style-name { background: linear-gradient(180deg, transparent, rgba(183, 47, 28, .85) 62%); }

/* ── Benutzerfuehrung nach dem Foto-Upload ─────────────────── */
.guide-banner {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  background: var(--accent-wash); border: 2px solid var(--accent);
  border-radius: 12px; font-size: 13px; font-weight: 800; color: var(--accent-press);
}
.guide-banner .spacer { flex: 1; }
.guide-arrow { font-size: 16px; animation: guide-bounce 1.1s ease-in-out infinite; }
@keyframes guide-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
/* Wackeln wie iOS-Icons im Bearbeiten-Modus, aber sanfter: kleiner Winkel,
   halbe Frequenz, leichtes Heben statt Zittern. app.js nimmt die Klasse nach
   drei Sekunden oder beim ersten Antippen wieder weg. */
@keyframes jiggle {
  0% { transform: rotate(-1deg) translateY(0); }
  25% { transform: rotate(0deg) translateY(-1px); }
  50% { transform: rotate(1deg) translateY(0); }
  75% { transform: rotate(0deg) translateY(1px); }
  100% { transform: rotate(-1deg) translateY(0); }
}
.style-tile.guide-jiggle { animation: jiggle .5s ease-in-out infinite; }
.style-tile.guide-jiggle:nth-child(odd) { animation-delay: .25s; }
@media (prefers-reduced-motion: reduce) {
  .style-tile.guide-jiggle, .guide-arrow { animation: none; }
}
.style-tick {
  position: absolute; top: 6px; right: 6px; width: 23px; height: 23px;
  border-radius: 50%; background: var(--accent); border: 2px solid var(--ink);
  color: #fff; font-size: 12px; font-weight: 900;
  display: none; align-items: center; justify-content: center;
}
.style-tile.is-selected .style-tick { display: flex; }

.cta-block { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }

/* ── Laden ─────────────────────────────────────────────────── */
.scan-frame {
  position: relative; width: 216px; height: 216px; border-radius: 28px;
  border: var(--border); box-shadow: 6px 6px 0 var(--ink); overflow: hidden; background: var(--sunken);
}
.scan-frame img { width: 100%; height: 100%; object-fit: cover; }
.scan-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(225, 68, 43, .45) 50%, transparent 58%);
  animation: scan 1.7s ease-in-out infinite;
}
@keyframes scan { from { transform: translateY(-100%); } to { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) {
  .scan-overlay { animation: pulse 1.7s ease-in-out infinite; }
  @keyframes pulse { 0%, 100% { opacity: .25; } 50% { opacity: .7; } }
}
.status-line { font-size: 14px; font-weight: 700; color: var(--ink-muted); height: 20px; margin: 0; }
.progress {
  width: 210px; height: 12px; border-radius: 999px; border: var(--border);
  background: var(--canvas); overflow: hidden;
}
.progress-fill { display: block; height: 100%; width: 0; background: var(--accent); transition: width .4s ease; }
.progress.is-waiting .progress-fill { animation: shimmer 1.4s ease-in-out infinite; }
@keyframes shimmer { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ── Ergebnis ──────────────────────────────────────────────── */
.credit-chip {
  padding: 5px 10px; border-radius: 999px; background: var(--accent-wash);
  color: var(--accent-press); font-size: 11.5px; font-weight: 800;
}
.segment {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  background: var(--sunken); border: var(--border); border-radius: 14px; padding: 4px;
}
.segment-item {
  padding: 10px 4px; border-radius: 10px; background: transparent; border: 0;
  font-size: 13px; font-weight: 700; color: var(--ink-muted); cursor: pointer; font-family: var(--text);
}
.segment-item.is-active {
  background: var(--raised); border: 2px solid var(--ink);
  font-family: var(--display); font-weight: 600; color: var(--ink);
}

.compare {
  position: relative; flex: 1; min-height: 180px; border-radius: 20px;
  border: var(--border); overflow: hidden; background: var(--sunken);
  touch-action: none; cursor: ew-resize;
  -webkit-user-select: none; user-select: none;
}
.compare img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
/* Schichtung: Die Karikatur ist der Grund, das Original liegt als Auflage
   darueber. Alle drei Modi steuern nur die Auflage — Breite beim Schieben,
   ausgeblendet bei der Lupe, Deckkraft beim Tippen. */
.compare-after { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare-before-clip {
  position: absolute; inset: 0; width: 50%; overflow: hidden;
  transition: opacity .25s ease;
}
.compare-before { position: absolute; top: 0; left: 0; height: 100%; object-fit: cover; }
.compare-divider {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px;
  background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .35); z-index: 4;
}
.compare-knob {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%; background: #fff; border: var(--border);
  display: grid; place-items: center; font-size: 16px; font-weight: 900; color: var(--accent); z-index: 5;
}
.compare.mode-lupe { cursor: crosshair; }
.compare.mode-tap { cursor: pointer; }

/* Lupe: Auflage komplett weg, das Original zeigt nur der Kreis. */
.compare.mode-lupe .compare-before-clip,
.compare.mode-lupe .compare-divider,
.compare.mode-lupe .compare-knob { display: none; }

/* Tippen: Auflage vollflaechig, aber unsichtbar — man sieht die Karikatur.
   Ein Tipp blendet sie ein und damit das Original.
   Frueher wurde stattdessen die Deckkraft der *Karikatur* umgeschaltet. Die
   liegt darunter, also war der Wechsel unsichtbar und man sah dauerhaft das
   Original. Die Breite des Ausschnitts setzt compare.js, weil applySplit()
   sie inline schreibt und Inline jede Regel hier schlaegt. */
.compare.mode-tap .compare-divider,
.compare.mode-tap .compare-knob { display: none; }
.compare.mode-tap .compare-before-clip { opacity: 0; }
.compare.mode-tap.is-flipped .compare-before-clip { opacity: 1; }

.loupe {
  position: absolute; width: 126px; height: 126px; border-radius: 50%;
  border: 3px solid #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .34);
  overflow: hidden; z-index: 6; pointer-events: none; background: var(--sunken);
}
.loupe img { position: absolute; max-width: none; }

/* Klasse statt [hidden]: Die Tags sollen ausblenden, nicht verschwinden —
   mit display:none gaebe es keinen Uebergang. */
.compare-tags { position: absolute; inset: 0; pointer-events: none; z-index: 4; transition: opacity .5s ease; }
.compare-tags.is-faded { opacity: 0; }
.tag {
  position: absolute; top: 10px; padding: 3px 8px; border-radius: 9px;
  background: rgba(24, 21, 18, .7); color: #fff; font-size: 11px; font-weight: 800;
}
.tag-left { left: 10px; }
.tag-right { right: 10px; }
.tap-hint {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  padding: 5px 12px; border-radius: 999px; background: rgba(24, 21, 18, .7);
  color: #fff; font-size: 11.5px; font-weight: 800; z-index: 5; pointer-events: none;
}

.tool-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* ── Fehler ────────────────────────────────────────────────── */
.emoji-circle {
  width: 76px; height: 76px; border-radius: 50%; background: var(--sunken);
  border: var(--border); display: grid; place-items: center; font-size: 32px;
}
.chip-success {
  padding: 7px 14px; border-radius: 999px; background: var(--success-wash);
  color: var(--success); font-size: 12.5px; font-weight: 800;
}

/* ── Verlauf ───────────────────────────────────────────────── */
.gallery-grid {
  flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  overflow-y: auto; align-content: start; padding: 2px;
}
.gallery-item { position: relative; border: var(--border); border-radius: 16px; overflow: hidden; background: var(--sunken); padding: 0; cursor: pointer; }
.gallery-item img { display: block; width: 100%; height: 132px; object-fit: cover; object-position: 50% 22%; }
.gallery-foot { background: var(--canvas); border-top: var(--border); padding: 7px 8px; text-align: left; }
.gallery-foot strong { display: block; font-family: var(--display); font-weight: 600; font-size: 12.5px; }
.gallery-foot small { font-size: 10.5px; color: var(--ink-faint); }
.gallery-delete {
  position: absolute; top: -6px; right: -6px; width: 28px; height: 28px;
  border-radius: 50%; background: var(--accent-press); border: var(--border);
  color: #fff; font-size: 15px; font-weight: 900; display: none;
  align-items: center; justify-content: center; cursor: pointer; padding: 0; z-index: 2;
}
.gallery-grid.is-editing .gallery-delete { display: flex; }
.gallery-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.icon-circle { width: 68px; height: 68px; border-radius: 50%; border: var(--border); background: var(--sunken); display: grid; place-items: center; }

/* ── Einstellungen ─────────────────────────────────────────── */
.settings-scroll { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 2px; }
.credit-card {
  border: var(--border); border-radius: 16px; background: var(--sunken);
  padding: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.credit-card strong { display: block; font-family: var(--display); font-weight: 600; font-size: 15px; }
.credit-card small { font-size: 11.5px; color: var(--ink-muted); }
.switch-row {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px;
  border: var(--border); border-radius: 14px; background: var(--canvas);
  cursor: pointer; text-align: left; font-family: var(--text);
}
.switch-row > span:first-child { flex: 1; }
.switch-row strong { display: block; font-size: 14px; font-weight: 800; }
.switch-row small { font-size: 11.5px; color: var(--ink-muted); }
.switch {
  width: 52px; height: 30px; border-radius: 999px; border: var(--border);
  background: var(--disabled-bg); display: flex; align-items: center;
  padding: 2px; flex: none; justify-content: flex-start;
}
.switch.is-on { background: var(--accent); justify-content: flex-end; }
.switch-knob { width: 21px; height: 21px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); display: block; }
.row-btn {
  width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between;
  padding: 14px; border: var(--border); border-radius: 14px; background: var(--canvas);
  font-family: var(--text); font-size: 14px; font-weight: 700; cursor: pointer; text-align: left;
}
.row-danger { color: var(--accent-press); border-color: var(--accent-press); }
/* Hiess urspruenglich `privacy-note` — und war damit unsichtbar. Werbeblocker
   bringen Kosmetikfilter gegen Cookie- und Datenschutzbanner mit und blenden
   solche Klassennamen pauschal aus. Beim Datenschutzhinweis ist das kein
   Schoenheitsfehler, denn er muss vor dem ersten Hochladen lesbar sein.
   Nicht zurueckbenennen. */
.hinweis { font-size: 11.5px; line-height: 1.5; color: var(--ink-muted); margin: 0; }
.version { text-align: center; font-size: 11.5px; color: var(--ink-faint); margin: 8px 0 0; }

/* ── Toast ─────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 20px; right: 20px; bottom: calc(26px + env(safe-area-inset-bottom));
  max-width: 390px; margin: 0 auto; background: var(--ink); color: var(--canvas);
  border-radius: 14px; padding: 13px 16px; font-size: 13.5px; font-weight: 700;
  text-align: center; z-index: 50;
}
.toast[hidden] { display: none; }

/* Trefferflaeche mindestens 44 px, auch wo das Sichtbare kleiner ist. */
button { min-height: 44px; }
.style-tile, .gallery-item, .segment-item, .gallery-delete { min-height: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }