/* ==========================================================================
   Daten und Diagramme — Design-Tokens & Basis
   Token-System übernommen aus „Zeit und Uhr" (bewährte Blaupause):
   - Karten: cornerRadius 18, shadow(black 10%, radius 8, y 4), border tint 10%
   - Typografie: SwiftUI-Textstile in pt → px
   Eigene Identität dieser App: Petrol als Akzentfarbe — zwischen dem Blaugrau
   von „Zeit und Uhr" (#4f6f90) und dem Teal von „Zerlegen" (#3E8E8E).
   ========================================================================== */

:root {
  /* --- Farben ------------------------------------------------------------ */
  --tint: #2b7a8b;                        /* Petrol, sRGB-Fallback */
  --tint-rgb: 43, 122, 139;
  --bg-top: #f2f2f2;
  --bg-bottom: #e6e6e6;
  --surface: #ffffff;
  --surface-2: #f7f7f8;
  --text: #1c1c1e;                        /* .primary */
  --text-secondary: #6c6c70;              /* .secondary */
  --text-tertiary: #8e8e93;               /* .gray */
  --separator: rgba(60, 60, 67, 0.18);

  /* Semantische Farben — iOS-Systemfarben (helles Erscheinungsbild).
     Dienen auch als Kategorienfarben der Diagramme (siehe models/projekt.js —
     dort liegt die geordnete Palette als Hex-Liste). */
  --blue: #0088ff;
  --green: #34c759;
  --red: #ff383c;
  --indigo: #6155f5;
  --teal: #00c3d0;
  --orange: #ff8d28;
  --yellow: #ffcc00;
  --amber: #ffbf00;
  --purple: #cb30e0;
  --pink: #ff2d55;

  /* --- Maße -------------------------------------------------------------- */
  --radius-card: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-card: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-soft: 0 2px 3px rgba(0, 0, 0, 0.1);

  /* Content-Breite: das iPhone-Layout bleibt lesbar, größere Schirme
     bekommen mehr Spalten statt endlos breiter Karten. */
  --content-max: 1360px;
  --gap: 20px;

  /* --- Typografie (SwiftUI-Textstile in pt → px) -------------------------- */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-rounded: ui-rounded, -apple-system, BlinkMacSystemFont, "SF Pro Rounded",
    "Segoe UI", Roboto, sans-serif;
  --fs-large-title: 34px;
  --fs-title: 28px;
  --fs-title2: 22px;
  --fs-title3: 20px;
  --fs-headline: 17px;
  --fs-body: 17px;
  --fs-subheadline: 15px;
  --fs-footnote: 13px;
  --fs-caption: 12px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Display-P3-fähige Geräte bekommen ein satteres Petrol */
@supports (color: color(display-p3 1 1 1)) {
  :root { --tint: color(display-p3 0.20 0.47 0.54); }
}

@media (prefers-color-scheme: dark) {
  :root {
    --tint: #5fb0c2;
    --tint-rgb: 95, 176, 194;
    --bg-top: #1c1c1e;
    --bg-bottom: #000000;
    --surface: #2c2c2e;
    --surface-2: #1c1c1e;
    --text: #ffffff;
    --text-secondary: #aeaeb2;
    --text-tertiary: #8e8e93;
    --separator: rgba(84, 84, 88, 0.6);
    --shadow-card: 0 4px 8px rgba(0, 0, 0, 0.4);
  }
  @supports (color: color(display-p3 1 1 1)) {
    :root { --tint: color(display-p3 0.42 0.68 0.75); }
  }
}

/* Nutzer-Override über den Einstellungen-Dialog */
:root[data-theme="light"] {
  --tint: #2b7a8b; --tint-rgb: 43, 122, 139;
  --bg-top: #f2f2f2; --bg-bottom: #e6e6e6;
  --surface: #ffffff; --surface-2: #f7f7f8;
  --text: #1c1c1e; --text-secondary: #6c6c70; --separator: rgba(60, 60, 67, 0.18);
  --shadow-card: 0 4px 8px rgba(0, 0, 0, 0.1);
}
:root[data-theme="dark"] {
  --tint: #5fb0c2; --tint-rgb: 95, 176, 194;
  --bg-top: #1c1c1e; --bg-bottom: #000000;
  --surface: #2c2c2e; --surface-2: #1c1c1e;
  --text: #ffffff; --text-secondary: #aeaeb2; --separator: rgba(84, 84, 88, 0.6);
  --shadow-card: 0 4px 8px rgba(0, 0, 0, 0.4);
}
@supports (color: color(display-p3 1 1 1)) {
  :root[data-theme="light"] { --tint: color(display-p3 0.20 0.47 0.54); }
  :root[data-theme="dark"] { --tint: color(display-p3 0.42 0.68 0.75); }
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  color: var(--text);
  background: linear-gradient(to bottom, var(--bg-top), var(--bg-bottom)) fixed;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}
button { font: inherit; color: inherit; }
/* Knöpfe, in denen nur ein Symbol steht, brauchen keine Innenfläche — WebKit
   gibt jedem <button> eine Standardfläche, die das Symbol aus der Mitte
   schiebt (Details: gleiche Regel in „Zeit und Uhr"). */
:where(button:has(> svg:only-child)) { padding: 0; }
:focus-visible { outline: 3px solid var(--tint); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- App-Rahmen ----------------------------------------------------------- */
#app { min-height: 100%; }

.screen {
  min-height: 100dvh;
  padding: calc(var(--safe-top) + 8px) 16px calc(var(--safe-bottom) + 24px);
}
.screen--flush { padding: 0; }
.screen--flush .navbar { margin: 0; padding: calc(var(--safe-top) + 6px) 12px 6px; }
.screen__inner {
  max-width: var(--content-max);
  margin: 0 auto;
}

/* --- Karten (MenuCard / CompactMenuCard) ---------------------------------- */
.card {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px 16px;
  text-align: left;
  background: var(--surface);
  border: 1px solid rgba(var(--tint-rgb), 0.1);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.13); }
.card:active { transform: translateY(0) scale(0.99); }

.card__preview {
  flex: 0 0 110px;
  width: 110px;
  height: 110px;
  position: relative;
  display: grid;
  place-items: center;
}
.card__body { flex: 1 1 auto; min-width: 0; }
.card__title {
  margin: 0 0 6px;
  font-size: var(--fs-title2);
  font-weight: 700;
  color: var(--tint);
  line-height: 1.15;
  overflow-wrap: break-word;
  hyphens: auto;
}
.card__desc {
  margin: 0;
  font-size: var(--fs-subheadline);
  color: var(--text-secondary);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__chevron { flex: 0 0 auto; color: rgba(var(--tint-rgb), 0.7); padding-right: 8px; }

.card--compact { padding: 14px 16px; gap: 12px; }
.card--compact .card__title { font-size: var(--fs-title3); margin: 0; }
.card--compact .card__icon {
  flex: 0 0 40px; width: 40px; height: 40px;
  display: grid; place-items: center; color: var(--tint);
}

/* --- Sektionsüberschrift -------------------------------------------------- */
.section-header {
  grid-column: 1 / -1;
  padding-top: 28px;
  padding-bottom: 4px;
}
.section-header::before {
  content: "";
  display: block;
  height: 1px;
  background: rgba(var(--tint-rgb), 0.2);
  margin-bottom: 4px;
}
.section-header h2 {
  margin: 0;
  font-size: var(--fs-title3);
  font-weight: 700;
  color: var(--tint);
}

/* --- Menü-Raster ---------------------------------------------------------- */
/* minmax(0, 1fr) statt 1fr: sonst kann die Spur nicht unter die Min-Content-
   Breite der Karte schrumpfen und die Seite scrollt seitwärts. */
.menu-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}
@media (max-width: 430px) {
  .card { gap: 12px; padding: 16px 12px; }
  .card__preview { flex-basis: 92px; width: 92px; height: 92px; }
  .card__preview > * { transform: scale(0.84); transform-origin: center; }
  .card__title { font-size: var(--fs-title3); }
}
@media (min-width: 720px) {
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  .menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Menü-Kopf ------------------------------------------------------------ */
.menu-head { text-align: center; padding-top: 20px; }
.menu-head__logo {
  width: 160px; height: 160px; margin: 0 auto;
  display: grid; place-items: center;
  background: var(--surface);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.menu-head__title {
  margin: 10px 0 0;
  font-size: 38px;
  font-weight: 700;
  color: var(--tint);
  text-shadow: 0 1px 2px rgba(128, 128, 128, 0.3);
}
.menu-head__subtitle {
  margin: 4px 0 20px;
  font-size: var(--fs-subheadline);
  color: var(--text-tertiary);
}

/* Weiße Fläche hinter den Diagramm-Vorschauen der Menükarten */
.preview-disc {
  background: #ffffff;
  border-radius: 22px;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.menu-footer {
  margin-top: 40px;
  padding-bottom: 20px;
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
}

/* --- Runde Icon-Buttons (Info / Einstellungen) ---------------------------- */
.icon-button {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--surface);
  border: none;
  border-radius: 50%;
  box-shadow: var(--shadow-soft);
  color: var(--tint);
  cursor: pointer;
}
.icon-button:hover { background: var(--surface-2); }
.navbar__actions .icon-button.is-active { color: var(--tint); background: rgba(var(--tint-rgb), 0.15); }

.menu-corner {
  position: sticky;
  top: calc(var(--safe-top) + 10px);
  z-index: 5;
  display: flex;
  justify-content: space-between;
  padding: 0 14px;
  height: 0;                 /* nimmt keinen Fluss-Platz ein */
}
.menu-corner > * { pointer-events: auto; }

/* --- Navigationsleiste der Unterseiten ------------------------------------ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  margin: calc(var(--safe-top) * -1 - 8px) -16px 12px;
  padding: calc(var(--safe-top) + 6px) 12px 6px;
  background: color-mix(in srgb, var(--bg-top) 82%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--separator);
}
.navbar__back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  color: var(--tint);
  font-size: var(--fs-headline);
  cursor: pointer;
  padding: 6px 4px;
}
.navbar__title {
  margin: 0;
  font-size: var(--fs-headline);
  font-weight: 600;
  flex: 1 1 auto;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.navbar__actions { display: flex; gap: 4px; min-width: 44px; justify-content: flex-end; }

/* --- Segmentierter Umschalter --------------------------------------------- */
.segmented-nav {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
  background: rgba(120, 120, 128, 0.16);
  border-radius: 9px;
  padding: 2px;
}
.segmented-nav button {
  border: none;
  background: none;
  padding: 6px 16px;
  border-radius: 7px;
  cursor: pointer;
  font-size: var(--fs-subheadline);
  color: var(--text);
  white-space: nowrap;
}
@media (max-width: 480px) {
  .segmented-nav button { padding: 6px 10px; font-size: var(--fs-footnote); }
}
.segmented-nav button[aria-pressed="true"] {
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  font-weight: 600;
}

/* Formularzeilen — von Blättern und Bildschirmen gleichermaßen genutzt */
.row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; background: var(--surface-2); border-radius: var(--radius-md);
  margin-bottom: 8px;
}
.row label { flex: 1 1 auto; }
.row select, .row input[type="number"], .row input[type="text"] {
  font: inherit; padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--separator); background: var(--surface); color: var(--text);
}
.segmented { display: inline-flex; background: var(--surface-2); border-radius: 9px; padding: 2px;
  border: 1px solid var(--separator); }
.segmented button {
  border: none; background: none; padding: 6px 12px; border-radius: 7px; cursor: pointer;
  font-size: var(--fs-subheadline);
}
.segmented button[aria-pressed="true"] { background: var(--surface); box-shadow: var(--shadow-soft); font-weight: 600; }
.stepper { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--separator);
  border-radius: 9px; overflow: hidden; background: var(--surface); }
.stepper button {
  font: inherit; font-size: var(--fs-title3); line-height: 1; width: 40px; padding: 6px 0;
  border: none; background: none; color: var(--tint); cursor: pointer;
}
.stepper button + button { border-left: 1px solid var(--separator); }
.stepper button:disabled { color: var(--text-secondary); opacity: 0.4; cursor: default; }
.row__note { margin: -4px 0 10px; padding: 0 4px; font-size: var(--fs-caption); color: var(--text-secondary); }
.row__note--warn { color: var(--red); }
.slider-row { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px;
  background: var(--surface-2); border-radius: var(--radius-md); margin-bottom: 8px; }
.slider-row__head { display: flex; justify-content: space-between; gap: 12px; }
.slider-row__head b { color: var(--tint); font-weight: 600; }
.slider-row input[type="range"] { width: 100%; accent-color: var(--tint); }
.slider-row__scale { display: flex; justify-content: space-between; font-size: var(--fs-caption);
  color: var(--text-secondary); }
.switch { position: relative; width: 51px; height: 31px; flex: 0 0 auto; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch span {
  position: absolute; inset: 0; border-radius: 999px; background: rgba(120,120,128,0.32);
  transition: background 0.2s; pointer-events: none;
}
.switch span::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform 0.2s;
}
.switch input:checked + span { background: var(--green); }
.switch input:checked + span::after { transform: translateX(20px); }

/* --- Primär-/Ghost-Knöpfe (Sammlung, Dialoge) ----------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: 10px; padding: 10px 18px;
  font-size: var(--fs-subheadline); font-weight: 600; cursor: pointer;
  background: var(--tint); color: #fff;
}
.btn--ghost { background: rgba(120, 120, 128, 0.16); color: var(--text); }
.btn--danger { background: var(--red); }
.btn:disabled { opacity: 0.4; cursor: default; }

/* Zahlen in Tabellen und Achsen: gleichbreite Ziffern */
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* --- Ladeanzeige beim Screenwechsel -------------------------------------- */
body.is-loading-screen::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  z-index: 9999;
  background: linear-gradient(90deg, transparent, var(--tint), transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: screen-loading 1s linear infinite;
  pointer-events: none;
}
@keyframes screen-loading {
  from { background-position: -40% 0; }
  to { background-position: 140% 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.is-loading-screen::before { animation: none; background: var(--tint); opacity: 0.5; }
}

/* --- Diagrammflächen ------------------------------------------------------ */
/* Diagramme liegen immer auf heller Fläche — gedruckt wie am Bildschirm.
   Damit bleiben die Kategorienfarben in beiden Farbschemata identisch und
   Arbeitsblätter sehen aus wie die App. Texte im Diagramm folgen deshalb
   lokal fest dunklen Werten (gleiches Muster wie die Panels in „Zeit und Uhr"). */
.diagramm-flaeche {
  --surface: #ffffff;
  --surface-2: #f7f7f8;
  --text: #1c1c1e;
  --text-secondary: #6c6c70;
  --separator: rgba(60, 60, 67, 0.18);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* --- Drucken -------------------------------------------------------------- */
/* Safari auf dem iPad lässt Flächenfarben ohne `print-color-adjust: exact`
   ersatzlos weg — Diagrammbalken kämen sonst weiß aus dem Drucker. */
@media print {
  html {
    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
  }
  html, body {
    background: #fff !important;
    height: auto !important;
  }
  .screen { min-height: 0 !important; }
  .navbar { display: none !important; }
  .screen__inner { overflow: visible !important; max-width: none !important; }
}