/* shrinkling — mobile-first, light/dark via prefers-color-scheme */

:root {
  color-scheme: light;
  --accent: #7c3aed;
  --accent-strong: #6d28d9;
  --accent-soft: #ede9fe;
  --bg: #f5f3ff;
  --panel: #ffffff;
  --text: #1e1b2e;
  --text-soft: #6b6584;
  --border: #e5e1f0;
  --error: #dc2626;
  --warn: #b45309;
  --ok: #007433;           /* 4,56 auf seiner eigenen Tönung im Ersparnis-Schild (vorher #15803d: 3,91) */
  --shadow: 0 10px 30px rgba(30, 27, 46, 0.10);
}

/* Dark theme comes in two doors with identical furniture:
   1) system preference (unless the user forced light),
   2) the theme dropdown forcing dark. Keep both in sync! */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --accent: #a78bfa;
    --accent-strong: #c4b5fd;
    --accent-soft: #2e1065;
    --bg: #120f1e;
    --panel: #1a1628;
    --text: #e8e5f4;
    --text-soft: #a49dbd;
    --border: #2b2440;
    --error: #f87171;
    --warn: #fbbf24;
    --ok: #4ade80;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --accent: #a78bfa;
  --accent-strong: #c4b5fd;
  --accent-soft: #2e1065;
  --bg: #120f1e;
  --panel: #1a1628;
  --text: #e8e5f4;
  --text-soft: #a49dbd;
  --border: #2b2440;
  --error: #f87171;
  --warn: #fbbf24;
  --ok: #4ade80;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }

/* the hidden attribute must always win, even over display rules on classes */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.app-shell {
  max-width: 52rem;
  margin: 0 auto;
  padding: 1rem 1rem 2rem;
}

/* ---------- header ---------- */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem 1rem;
  padding: 0.5rem 0 1.25rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex: 1 1 18rem;
}

.brand-icon { width: 46px; height: 46px; flex: none; }

.brand h1 { margin: 0; font-size: 1.35rem; line-height: 1.2; }

.tagline { margin: 0.15rem 0 0; color: var(--text-soft); font-size: 0.92rem; }

.header-controls { display: flex; align-items: center; gap: 0.5rem; }

.lang-wrap select,
.install-btn {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.45rem 0.6rem;
  font: inherit;
  font-size: 0.9rem;
}

/* Install button: looks like the selects next to it, hidden until the browser offers
   installation (see app.js). On phones it gets a full row of its own. */
.install-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.install-btn[hidden] { display: none; }
.install-btn svg { flex: none; }
.install-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 560px) {
  .header-controls { flex: 1 1 100%; flex-wrap: wrap; }
  .install-btn { flex: 1 1 100%; }
}

/* ---------- layout ---------- */

main {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.25rem;
}

.panel-title {
  margin: 0 0 0.75rem;
  font-size: 1.02rem;
}

/* ---------- dropzone ---------- */

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 2rem 1rem 1.6rem;
  border: 2px dashed var(--border);
  border-radius: 0.85rem;
  text-align: center;
  cursor: pointer;
  color: var(--text);
  transition: border-color 120ms, background-color 120ms;
}

.dropzone:hover,
.dropzone:focus-visible,
.dropzone.is-drag {
  border-color: var(--accent);
  background: var(--accent-soft);
  outline: none;
}

.drop-icon { color: var(--accent); }

.drop-title { margin: 0.3rem 0 0; font-weight: 700; font-size: 1.08rem; }

.drop-or { margin: 0; color: var(--text-soft); font-size: 0.85rem; }

.drop-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.drop-hint { margin: 0.55rem 0 0; color: var(--text-soft); font-size: 0.82rem; }

.toast {
  margin: 0.6rem 0 0;
  color: var(--text-soft);
  font-size: 0.85rem;
  text-align: center;
}

/* live regions stay in the DOM when idle — collapse them without display:none */
.toast:empty,
.total-line:empty { margin: 0; }

.privacy-note {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin: 0.9rem 0 0;
  color: var(--text-soft);
  font-size: 0.85rem;
}

.privacy-note svg { flex: none; margin-top: 0.15rem; color: var(--accent); }

/* ---------- presets ---------- */

.preset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

@media (min-width: 640px) {
  .preset-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.preset {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.8rem 0.5rem 0.7rem;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 0.75rem;
  cursor: pointer;
  text-align: center;
}

.preset svg { color: var(--accent); margin-bottom: 0.15rem; }

.preset-name { font-weight: 700; font-size: 0.9rem; }

.preset-desc { color: var(--text-soft); font-size: 0.78rem; }

.preset[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.preset:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- custom settings ---------- */

.custom-box { margin-top: 0.9rem; }

.custom-box summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-soft);
}

.custom-box[open] summary { color: var(--text); }

.custom-note { margin: 0.5rem 0 0.75rem; color: var(--text-soft); font-size: 0.82rem; }

.custom-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

@media (min-width: 640px) {
  .custom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.field label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 0.3rem;
}

.field label output { font-weight: 400; color: var(--text-soft); }

.field input[type="number"],
.field select {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  padding: 0.55rem 0.65rem;
}

.field input[type="range"] { width: 100%; accent-color: var(--accent); }

.field input:focus-visible,
.field select:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem;
}

.input-row select { width: auto; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
}

.btn:hover { border-color: var(--accent); }

.btn.primary {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn.primary { color: #1a1628; }
}
:root[data-theme="dark"] .btn.primary { color: #1a1628; }

.btn:disabled { opacity: 0.5; cursor: default; }

/* ---------- results ---------- */

.results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.results-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.total-line { margin: 0.35rem 0 0; color: var(--text-soft); font-size: 0.88rem; }

.result-list {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.result-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.6rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
}

.result-thumb {
  width: 56px;
  height: 56px;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background:
    linear-gradient(45deg, rgba(128,128,128,0.18) 25%, transparent 25%, transparent 75%, rgba(128,128,128,0.18) 75%) 0 0 / 14px 14px,
    linear-gradient(45deg, rgba(128,128,128,0.18) 25%, transparent 25%, transparent 75%, rgba(128,128,128,0.18) 75%) 7px 7px / 14px 14px,
    var(--panel);
  padding: 0;
  cursor: zoom-in;
  overflow: hidden;
  flex: none;
}

.result-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.result-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.result-thumb.is-empty { cursor: default; }

.result-info { min-width: 0; }

.result-name {
  margin: 0;
  font-weight: 600;
  font-size: 0.88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-sizes {
  margin: 0.1rem 0 0;
  font-size: 0.85rem;
  color: var(--text-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.saved-badge {
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--ok);
  background: rgba(0, 116, 51, 0.12); /* fallback for browsers without color-mix() */
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  border-radius: 0.4rem;
  padding: 0.05rem 0.4rem;
}

.result-note { margin: 0.2rem 0 0; font-size: 0.8rem; }

.result-note.warn { color: var(--warn); }

.result-note.error { color: var(--error); }

.result-note .btn {
  font-size: 0.78rem;
  padding: 0.2rem 0.5rem;
  margin-left: 0.35rem;
  vertical-align: baseline;
}

.result-dl { flex: none; }

.result-dl .btn svg { flex: none; }

@media (max-width: 480px) {
  .result-dl .btn span { display: none; }
  .result-dl .btn { padding: 0.55rem; }
}

.spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
  vertical-align: middle;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2.4s; }
}

/* ---------- lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(10, 8, 18, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  cursor: zoom-out;
}

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 0.5rem;
  box-shadow: var(--shadow);
}

.lightbox-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: none;
  border-radius: 50%;
  width: 2.4rem;
  height: 2.4rem;
  cursor: pointer;
}

.lightbox-close:hover { background: rgba(255, 255, 255, 0.28); }

/* ---------- footer ---------- */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
  color: var(--text-soft);
  font-size: 0.82rem;
  text-align: center;
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: inherit;
}

.site-footer a:hover { color: var(--accent); }

.sep { opacity: 0.6; }

/* ---------- Sehhilfen: Hoher Kontrast, Farbenblind, Umgekehrte Farben ----------
   (31.10.2026) Eine Wahl für die ganze Werkstatt: localStorage
   „werkstatt.darstellung“, alle Werkzeuge liegen auf einem Ursprung. Das
   Kopf-Skript setzt data-theme (light/dark, wie bisher) und data-vision
   (contrast, cvd, invert). Die beiden Farbblöcke oben bleiben, wie sie sind. */

/* Hoher Kontrast dunkel: Schwarz, Schrift #E0E0E0 (15,91:1), jede Farbe 7:1.
   Akzent und die drei Meldefarben halten das im Dunkeln schon. */
:root[data-vision="contrast"][data-theme="dark"] {
  --accent-soft: #241552;  /* gewählte Vorlage, Schrift darauf 13:1 */
  --bg: #000000;
  --panel: #000000;
  --text: #E0E0E0;
  --text-soft: #C4C4C4;    /* 12,04 */
  --border: #A0A0A0;       /* 8,03 */
  --shadow: none;
}

/* Hoher Kontrast hell: Weiß, Schrift Schwarz, gleiche Farbtöne nachgedunkelt */
:root[data-vision="contrast"][data-theme="light"] {
  --accent: #6407CD;       /* 7,21 auf --accent-soft, 8,4 auf Weiß */
  --accent-strong: #6C26D8;
  --bg: #FFFFFF;
  --panel: #FFFFFF;
  --text: #000000;
  --text-soft: #2B2B2B;    /* 14,16 */
  --border: #585757;       /* 7,20 */
  --error: #B2000F;        /* 7,24 */
  --warn: #903F00;         /* 7,25 */
  --ok: #005625;           /* 7,29 auf seiner eigenen Tönung im Ersparnis-Schild */
  --shadow: none;
}
/* Dunkle Knopfschrift auf Lila hielt nur 6,49:1, Schwarz hält 7,72 */
:root[data-vision="contrast"][data-theme="dark"] .btn.primary { color: #000000; }

:root[data-vision="contrast"] :is(.panel, .btn, .result-row, .result-thumb, .lang-wrap select, .install-btn, select, input) { border-width: 2px; }
/* Die gewählte Vorlage zeigt mehr als nur eine andere Rahmenfarbe */
:root[data-vision="contrast"] .preset[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--accent); }
:root[data-vision="contrast"] :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Am Handy teilen sich Darstellung und Sprache eine Zeile. Ein Auswahlfeld ist
   so breit wie sein längster Eintrag, und das ist seit den acht Darstellungen
   „Hoher Kontrast dunkel“ (ru „Для дальтоников, светлая“). Ohne diese Regel
   rutschten die Felder bei 320 px in zwei Zeilen; die Darstellung bekommt den
   größeren Teil, ein zu langer Eintrag wird im Feld gekappt. */
@media (max-width: 560px) {
  .header-controls .lang-wrap { flex: 1 1 0; min-width: 0; }
  .header-controls .lang-wrap:has(#themeSelect) { flex-grow: 1.6; }
  .header-controls .lang-wrap select { width: 100%; min-width: 0; }
}
:root[data-vision="contrast"] .site-footer a { text-decoration: underline; }
:root[data-vision="contrast"] .sep { opacity: 1; }

/* Farbenblind: Okabe-Ito statt Grün/Gelb/Rot. Gespart heißt Blau, Hinweis
   Ocker bzw. Gelb, Fehler Zinnober, im Hellen zusätzlich dunkler als der
   Hinweis, damit beide auch über die Helligkeit auseinanderzuhalten sind.
   Jede Meldung steht ohnehin als Text da. */
:root[data-vision="cvd"][data-theme="light"] {
  --ok: #0067A2;     /* 4,65 auf der eigenen Tönung im Ersparnis-Schild */
  --warn: #956500;   /* 4,63 */
  --error: #974100;  /* 6,23 */
}
:root[data-vision="cvd"][data-theme="dark"] {
  --ok: #56B4E9;     /* 7,65 */
  --warn: #F0E442;   /* 13,35 */
  --error: #E8743A;  /* 5,88 */
}

/* Umgekehrte Farben wie der Farbfilter von Windows. Deine Bilder (Vorschau,
   Großansicht) werden ein zweites Mal umgedreht und bleiben so echt. */
:root[data-vision="invert"] { filter: invert(1); }
:root[data-vision="invert"] :is(img:not([src*=".svg"]), video, [data-echt]):not([data-echt] *) { filter: invert(1); }
:root[data-vision="invert"] .sep { opacity: 1; }
/* Umdrehen erhält den WCAG-Kontrast nicht. Im Dunkeln kämen Akzent, Fehler
   und das Ersparnis-Schild umgedreht auf 4,33, 3,22 und 4,31; leicht
   angehoben halten sie 4,6. */
@media (prefers-color-scheme: dark) {
  :root[data-vision="invert"] {
    --accent: #AB90FF;
    --error: #FF8D8A;
    --ok: #50E385;
  }
}
@media print {
  :root[data-vision="invert"],
  :root[data-vision="invert"] :is(img:not([src*=".svg"]), video, [data-echt]):not([data-echt] *) { filter: none; }
}