:root {
  --bg: #0b0e17;
  --bg-soft: #0f1320;
  --card-bg: rgba(19, 24, 38, 0.74);
  --card-bg-raised: rgba(23, 29, 45, 0.8);
  --overlay-bg: #171d2d;
  --border: #232a3d;
  --border-soft: #1a2032;
  --text: #edeff7;
  --text-muted: #8a91a8;
  --accent: #7c5cff;
  --accent-hover: #6a47f0;
  --accent-soft: rgba(124, 92, 255, 0.16);
  --accent-soft-border: rgba(124, 92, 255, 0.35);
  --green: #22c55e;
  --green-bg: rgba(34, 197, 94, 0.14);
  --amber: #f5a623;
  --amber-bg: rgba(245, 166, 35, 0.14);
  --red: #f04447;
  --red-bg: rgba(240, 68, 71, 0.14);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-elevated: 0 12px 32px rgba(0, 0, 0, 0.45);
  --mock-card-bg: rgba(23, 29, 45, 0.72);
  --hero-scrim-1: rgba(11, 14, 23, 0.32);
  --hero-scrim-2: rgba(11, 14, 23, 0.48);
  --hero-scrim-angled-1: rgba(11, 14, 23, 0.55);
  --hero-scrim-angled-2: rgba(11, 14, 23, 0.22);
  --hero-scrim-angled-3: rgba(11, 14, 23, 0.48);
  --radius: 14px;
  --radius-sm: 10px;
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Hell-Theme - überschreibt nur die Farb-Tokens, der ganze Rest der App
   (Layout, Abstände, Komponenten) bleibt identisch, da alles über diese
   Variablen läuft. Das Hintergrundfoto wechselt separat (s. body.dashboard-bg
   und .hero-scene-image-*) auf die Tag-Aufnahme, damit hell hinterlegter
   Text darauf nicht unlesbar wird. */
:root[data-theme="light"] {
  --bg: #f4f5f9;
  --bg-soft: #eceef4;
  --card-bg: rgba(255, 255, 255, 0.74);
  --card-bg-raised: rgba(255, 255, 255, 0.82);
  --overlay-bg: #ffffff;
  --border: #dde1ea;
  --border-soft: #e7e9f1;
  --text: #1a1d29;
  --text-muted: #5b6178;
  --accent-soft: rgba(124, 92, 255, 0.1);
  --accent-soft-border: rgba(124, 92, 255, 0.3);
  --green-bg: rgba(34, 197, 94, 0.12);
  --amber-bg: rgba(245, 166, 35, 0.14);
  --red-bg: rgba(240, 68, 71, 0.1);
  --shadow-card: 0 1px 2px rgba(30, 41, 59, 0.08);
  --shadow-elevated: 0 12px 32px rgba(30, 41, 59, 0.14);
  --mock-card-bg: rgba(255, 255, 255, 0.78);
  --hero-scrim-1: rgba(255, 255, 255, 0.2);
  --hero-scrim-2: rgba(255, 255, 255, 0.38);
  --hero-scrim-angled-1: rgba(255, 255, 255, 0.45);
  --hero-scrim-angled-2: rgba(255, 255, 255, 0.15);
  --hero-scrim-angled-3: rgba(255, 255, 255, 0.38);
}

* { box-sizing: border-box; }
.hidden { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1200px 480px at 15% -10%, rgba(124, 92, 255, 0.16), transparent 60%),
    radial-gradient(900px 420px at 100% 40%, rgba(34, 197, 94, 0.10), transparent 60%),
    repeating-linear-gradient(0deg, rgba(140, 150, 180, 0.05) 0, rgba(140, 150, 180, 0.05) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(90deg, rgba(140, 150, 180, 0.05) 0, rgba(140, 150, 180, 0.05) 1px, transparent 1px, transparent 40px),
    var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  position: relative;
}
body.dashboard-bg {
  background-image:
    linear-gradient(var(--hero-scrim-1), var(--hero-scrim-2)),
    url("/hero-mountain.jpg");
  background-size: cover, cover;
  background-position: center, center;
  background-attachment: fixed, fixed;
  background-repeat: no-repeat, no-repeat;
  background-color: var(--bg);
}
:root[data-theme="light"] body.dashboard-bg {
  background-image:
    linear-gradient(var(--hero-scrim-1), var(--hero-scrim-2)),
    url("/hero-mountain-day.jpg");
}

header {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 22px 32px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo {
  display: flex;
  align-items: flex-end;
  gap: 0;
}

.logo-icon {
  height: 30px;
  width: auto;
  flex-shrink: 0;
}
/* Das Icon ist eine weiße PNG-Grafik (kein einfärbbares SVG mit
   currentColor) - im Hellmodus wird es sonst auf hellem Hintergrund
   praktisch unsichtbar, während der Schriftzug daneben (.logo-text, per
   var(--text)) schon automatisch schwarz wird. brightness(0) macht jeden
   nicht-transparenten Pixel schwarz und passt die beiden so an. */
:root[data-theme="light"] .logo-icon { filter: brightness(0); }

.logo-text {
  font-family: "Century Gothic", "Questrial", sans-serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text);
}

.header-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
}
.header-icon-btn:hover { color: var(--text); border-color: var(--accent-soft-border); }
.header-icon-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.lang-switcher { position: relative; margin-left: 4px; }
.lang-switcher-btn {
  gap: 6px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.lang-switcher-btn[aria-expanded="true"] { color: var(--text); border-color: var(--accent-soft-border); }

.lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 150px;
  background: var(--overlay-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-elevated);
  padding: 6px;
  z-index: 30;
}
.lang-dropdown.hidden { display: none; }
.lang-dropdown-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.lang-dropdown-option:hover { background: var(--accent-soft); }
.lang-dropdown-option.active { color: var(--accent); }
.lang-dropdown-code {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  width: 22px;
  flex-shrink: 0;
}
.lang-dropdown-option.active .lang-dropdown-code { color: var(--accent); }

/* Kein eigenes margin-left:auto hier - der Regler davor (.theme-toggle,
   immer sichtbar) übernimmt den Rechts-Schub für beide zusammen. Mit einem
   auto-Margin an BEIDEN Elementen teilt sich der freie Platz gleichmäßig
   zwischen ihnen auf (CSS-Flexbox-Verhalten bei mehreren Auto-Margins auf
   derselben Achse) - das Zahnrad würde dann sichtbar vom Regler abrücken
   statt direkt daneben zu sitzen. */
.settings-switcher { position: relative; }
.settings-switcher-btn { width: 36px; border-radius: 50%; }
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.theme-toggle-icon { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0;
}
.settings-row label { font-size: 14px; font-weight: 600; color: var(--text); }

/* Eigenes Dropdown statt <select> - ein natives Auswahlfeld lässt sich
   nicht stylen (auf iOS z.B. ein eigenes Rad-Overlay), das passte
   dadurch überhaupt nicht zum Rest der App. Klappt wie die Benachrichtigungen-
   /Konto-Abschnitte nach unten auf (.settings-collapsible-toggle), der
   aktuelle Wert steht dabei rechts vor dem Pfeil in derselben Zeile. */
.settings-select-current {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 13px;
}
.settings-select-value { text-align: right; }
.settings-select-chevron { flex-shrink: 0; display: inline-flex; color: var(--text-muted); transition: transform 0.15s ease; }
.settings-select-chevron svg { width: 16px; height: 16px; }
.settings-select-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--card-bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px;
}
.settings-divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.settings-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.settings-delete-btn { display: block; margin-top: 14px; }
.settings-admin-link { display: block; text-decoration: none; }

.settings-collapsible-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 4px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}
.settings-collapsible-toggle[aria-expanded="true"] .settings-select-chevron { transform: rotate(180deg); }
.settings-collapsible-body { margin-top: 12px; }
.settings-collapsible-body.hidden { display: none; }
.admin-user-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.admin-user-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.admin-user-row:last-child { border-bottom: none; }
.admin-user-info { display: flex; flex-direction: column; gap: 4px; }
.admin-status-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-status-badge { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; }
.admin-status-badge.off { color: var(--text-muted); background: var(--bg-soft); }
.admin-status-badge.warn { color: var(--amber); background: var(--amber-bg); }
.admin-status-badge.danger { color: var(--red); background: var(--red-bg); }
.admin-user-actions { display: flex; gap: 12px; flex-shrink: 0; }

/* Eigenständige Admin-Seite (admin.html/admin.js) - bewusst eigene,
   einfache Klassen statt der Dashboard-Kacheln/-Spalten, da diese Seite
   keine Setup-Schritte hat, nur zwei schlichte Karten-Bereiche. */
.admin-header-badge {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-soft-border);
  padding: 3px 9px; border-radius: 999px; margin-left: 6px;
}
.admin-header-spacer { flex: 1; }
.admin-back-link { text-decoration: none; }
.admin-main { max-width: 720px; margin: 0 auto; padding: 24px 20px 60px; display: flex; flex-direction: column; gap: 20px; }
.admin-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--border); }
.admin-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-muted); font-weight: 600; font-size: 14px; padding: 10px 4px; cursor: pointer;
}
.admin-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.admin-tab-panel.hidden { display: none; }

main {
  /* width:100% ist hier nötig, nicht nur Kosmetik: body ist seit dem
     Sticky-Footer-Umbau ein Flex-Container (display:flex; flex-direction:
     column), und ein Flex-Kind mit margin:0 auto, aber OHNE eigene width,
     schrumpft auf seine Inhaltsbreite statt sich über align-items:stretch
     auf die volle Breite zu strecken (Auto-Margins gewinnen gegen
     stretch) - dadurch war "main" zuletzt schmaler als sein eigenes
     max-width und die Dashboard-Spalten wirkten seltsam schmal/verschoben
     statt wirklich zentriert. */
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 22px 32px 80px;
}

section { margin-bottom: 36px; }

h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 4px; }
.hint { color: var(--text-muted); font-size: 14px; margin-top: 0; margin-bottom: 16px; line-height: 1.5; }

.dashboard-columns {
  display: grid;
  /* Rechte Spalte bewusst nicht mehr "1fr" (füllt sonst stur den ganzen
     Rest von main aus) - stattdessen wächst sie mit ihrem Inhalt bis zu
     einer Obergrenze, und die ganze Spaltengruppe wird über
     justify-content als Block zentriert statt am linken Rand zu kleben. */
  grid-template-columns: 340px minmax(340px, 520px);
  justify-content: center;
  align-items: start;
  gap: 24px;
}
.signals-column {
  order: 2;
  min-width: 0;
  overflow-y: auto;
}
.setup-column {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.setup-column > section { margin-bottom: 0; }

/* 1080px statt 820px, damit auch gängige iPad-Breiten im Hochformat
   (834px iPad Pro 11", 1024px iPad Pro 12.9", ...) noch die gestapelte
   Ein-Spalten-Ansicht bekommen - bei 820px fiel z.B. das 834px breite
   iPad Pro 11" schon ins enge 340px-Sidebar-Layout, das für einen
   Desktop-Bildschirm gedacht ist, nicht fürs Tablet. */
@media (max-width: 1080px) {
  .dashboard-columns { grid-template-columns: 1fr; }
  .signals-column { order: 1; }
  .setup-column { order: 2; }
}

/* Diese Abschnitte klappen bewusst NICHT mehr inline auf - das verschob
   den kompletten restlichen Seiteninhalt nach unten. Stattdessen bleibt
   die Kachel immer in dieser kompakten Form; ein Klick auf die Überschrift
   öffnet den Inhalt (.section-body) in einem eigenen Dialogfenster, siehe
   openSectionModal() in app.js. */
.collapsible {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  transition: border-color 0.15s;
}
.collapsible:hover { border-color: var(--accent-soft-border); }
.collapsible .section-heading { margin-bottom: 0; }
.disclaimer-status { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.disclaimer-status-outdated { color: var(--amber); }

/* Titel und Status-Chips stehen bewusst IMMER untereinander (nicht nur im
   eingeklappten Zustand) - die Chips sind sichtbare farbige Pills, keine
   dünne Textzeile mehr, die noch neben dem Titel Platz gehabt hätte. Im
   schmalen Kachel-Raster nebeneinander gepackt, sprengten sie sonst die
   Zeile und überlagerten sich mit einem umbrechenden Titel. Der Pfeil
   bleibt oben rechts fest, egal wie hoch Titel + Chips werden. */
.section-heading { display: flex; align-items: flex-start; gap: 10px; }
.section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 1px;
}
.section-icon svg { width: 17px; height: 17px; }

.collapsible > .section-heading {
  cursor: pointer;
  user-select: none;
}
.section-heading-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.section-title-text { min-width: 0; }
.section-summary {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  max-width: 100%;
}
.section-chevron {
  display: inline-flex;
  flex-shrink: 0;
  margin-left: auto;
  margin-top: 1px;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}
.section-chevron svg { width: 16px; height: 16px; }
.collapsible .section-chevron { transform: rotate(-90deg); }
.collapsible > .section-body { display: none; }

.section-summary-line {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.section-summary-line.status-ok { background: var(--green-bg); color: var(--green); }
.section-summary-line.status-warn { background: var(--amber-bg); color: var(--amber); }
.section-summary-line.status-danger { background: var(--red-bg); color: var(--red); }
.section-summary-line.status-off {
  background: var(--card-bg-raised);
  color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 1px 9px;
}

.dashboard-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 24px;
  padding: 12px 0;
  animation: hero-fade-in 0.5s ease-out both;
}
.dashboard-hero-copy { max-width: 480px; }
.dashboard-hero-heading {
  font-size: 30px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 14px 0 12px;
}
.dashboard-hero .hero-subheading { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .dashboard-hero { animation: none; }
}
@media (max-width: 820px) {
  .dashboard-hero { padding: 28px; }
}

/* Kompakte Strategie-Kacheln (Titel + Risiko-Badge, keine Fließtext-
   Beschreibung mehr) - die volle Beschreibung steht erst im
   Konfigurationsdialog, der beim Klick ohnehin aufgeht. Ersetzt die
   vorher hier stehenden großen .card-Kacheln mit ausgeschriebenem Text,
   die den Abschnitt unübersichtlich gemacht haben. */
.strategy-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
}
.strategy-chip {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.strategy-chip:hover { border-color: var(--accent-soft-border); }
.strategy-chip-active { border-color: var(--accent); }
.strategy-chip-title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.strategy-chip-desc {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.strategy-chip-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text-muted);
  font-size: 13px;
  border-style: dashed;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.card-title { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.card-desc { color: var(--text-muted); font-size: 14px; line-height: 1.5; flex-grow: 1; }

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: 999px;
  width: fit-content;
}
.badge.niedrig { background: var(--green-bg); color: var(--green); }
.badge.mittel { background: var(--amber-bg); color: var(--amber); }
.badge.hoch { background: var(--red-bg); color: var(--red); }
.badge.connected { background: var(--green-bg); color: var(--green); }
.active-select-badge { display: block; width: fit-content; margin-top: 8px; }
.badge.info { background: var(--accent-soft); color: var(--accent); }

button {
  border: none;
  border-radius: var(--radius-sm);
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, border-color 0.15s, transform 0.05s;
  font-family: inherit;
}
button:active { transform: translateY(1px); }

.btn-primary { background: var(--accent); color: white; box-shadow: 0 4px 16px rgba(124, 92, 255, 0.35); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--card-bg-raised); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--accent-soft-border); background: var(--card-bg); }

#modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 6, 12, 0.65);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

#modal {
  background: var(--overlay-bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px;
  width: 420px;
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--shadow-elevated);
}
#modal h3 { margin-top: 0; font-size: 18px; letter-spacing: -0.01em; }
#modal.modal-wide { width: 640px; }
#modal.modal-xwide { width: 860px; }
.modal-section-title { margin: 0 0 16px; font-size: 19px; letter-spacing: -0.01em; }

/* Einstellungen öffnen am rechten Bildrand statt mittig - Nutzer klickt
   oben rechts aufs Zahnrad, das Fenster soll direkt darunter/daneben
   aufgehen, nicht quer über den Bildschirm springen. */
#modal-backdrop.modal-backdrop-side {
  justify-content: flex-end;
  align-items: flex-start;
  padding: 96px 24px 0 0;
}
#modal.modal-side { width: 360px; }
@media (max-width: 640px) {
  #modal-backdrop.modal-backdrop-side { padding: 96px 16px 0; }
}

.close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  font-size: 20px;
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 8px;
}
.close-btn:hover { background: var(--border-soft); }

.field { margin-bottom: 14px; position: relative; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.field-hint { color: var(--text-muted); font-size: 12px; margin-top: 4px; }
.field-hint-saved { color: var(--green); }
.field input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  /* 16px, nicht kleiner: unter 16px zoomt iOS Safari beim Antippen eines
     Eingabefelds automatisch in die ganze Seite rein (inkl. Hintergrund-
     bild), eine reine Lesbarkeits-Notbremse von Apple, keine bewusste
     Design-Entscheidung von uns. */
  font-size: 16px;
  background: var(--bg-soft);
  color: var(--text);
  font-family: inherit;
}
.field input[type="number"] {
  /* Kurze Zahlenfelder (Beträge, Intervalle, ...) sollen nicht über die
     ganze, teils sehr breite Kartenbreite gezogen werden - unabhängig
     davon, wie breit die umgebende Karte ist. */
  max-width: 160px;
}

.field-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
}
/* align-items: flex-end statt des Standards (stretch): wenn ein Label in
   dieser Zeile (z.B. "Betragsrahmen (max. Einsatz gesamt, in €)") länger
   ist und zweizeilig umbricht, während das Label daneben einzeilig bleibt,
   sorgt stretch nur dafür, dass beide .field-Boxen gleich hoch werden -
   das Eingabefeld selbst bleibt dabei direkt unter seinem eigenen (kürzeren)
   Label, also sichtbar höher als das Feld daneben. flex-end richtet stattdessen
   die untere Kante jeder Box (und damit beide Eingabefelder) aneinander aus. */
.field-row .field { flex: 1 1 200px; margin-bottom: 14px; }
.field input::placeholder { color: var(--text-muted); }
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 16px;
  background: var(--bg-soft);
  color: var(--text);
  font-family: inherit;
}

.chooser-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.chooser-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  background: var(--card-bg);
}
.chooser-item:hover { border-color: var(--accent-soft-border); background: var(--card-bg-raised); }
.chooser-item .card-title { font-size: 14px; }
.chooser-item .card-desc { font-size: 13px; margin-top: 2px; }

.result-msg {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
}
.result-msg.ok { background: var(--green-bg); color: var(--green); }
.result-msg.error { background: var(--red-bg); color: var(--red); }

.modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.modal-actions:first-child { margin-top: 0; margin-bottom: 18px; }
#signal-history-body { margin-top: 18px; }

.toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 8px 0;
}
.toggle-label { font-weight: 600; font-size: 14px; }
.toggle-sub { color: var(--text-muted); font-size: 13px; margin-top: 2px; line-height: 1.4; }

.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; cursor: pointer; inset: 0;
  background-color: var(--border); border-radius: 999px; transition: 0.15s;
}
.slider::before {
  content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px;
  background-color: white; border-radius: 50%; transition: 0.15s;
}
.switch input:checked + .slider { background-color: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(18px); }

#automation-card { margin-bottom: 16px; }

code#webhook-url {
  display: block;
  margin-top: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
  word-break: break-all;
  color: var(--text-muted);
}

.role-row { display: flex; gap: 14px; font-size: 13px; margin-top: 4px; }
.role-row label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

#signal-log-section {
  background: var(--card-bg-raised);
  border: 1px solid var(--accent-soft-border);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-card);
}
#portfolio-section {
  background: var(--card-bg-raised);
  border: 1px solid var(--accent-soft-border);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-card);
}
#portfolio-balance { margin-bottom: 12px; }
/* Höhe wird per JS (siehe syncSignalsColumnHeight in app.js) auf die Höhe
   der Kachelspalte 1-4 daneben begrenzt, damit die beiden Karten
   zusammen nicht beliebig lang werden - die ganze Spalte scrollt dann
   als Einheit statt jede Karte für sich. */

.signal-entry {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 10px;
  font-size: 14px;
}
.signal-entry .signal-head {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.signal-action-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border-radius: 999px;
  margin-right: 8px;
  vertical-align: 1px;
}
.signal-action-badge.buy { background: var(--green-bg); color: var(--green); }
.signal-action-badge.sell { background: var(--red-bg); color: var(--red); }
.signal-action-badge.close { background: var(--bg-soft); color: var(--text-muted); }
.signal-entry .signal-time {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.signal-entry .signal-meta {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 3px;
}
.signal-entry .signal-msg { color: var(--text-muted); }
.signal-entry.executed { border-left: 3px solid var(--green); }
.signal-entry.dry-run { border-left: 3px solid var(--amber); }
.signal-entry.blocked { border-left: 3px solid var(--text-muted); }
.signal-entry.pending-confirmation { border-left: 3px solid var(--accent); }
.signal-entry .delete-signal-btn { font-size: 12px; font-weight: 600; flex-shrink: 0; }

.signal-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.signal-log-header h2 { margin-bottom: 0; font-size: 20px; }
.signal-log-header-actions { display: flex; gap: 8px; flex-shrink: 0; }

.history-day-heading {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-muted);
  margin: 20px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.history-day-group:first-child .history-day-heading { margin-top: 0; }

.builder-section { margin-bottom: 18px; }
.builder-section-title { font-weight: 700; font-size: 14px; margin-bottom: 8px; }

.condition-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin-bottom: 8px;
  background: var(--bg-soft);
}

.operand-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.operand-picker select, .condition-operator {
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  background: var(--card-bg);
  color: var(--text);
  font-family: inherit;
}

.operand-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.operand-extra input {
  width: 70px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  background: var(--card-bg);
  color: var(--text);
  font-family: inherit;
}

.mini-label { font-size: 11px; color: var(--text-muted); }

.remove-condition-btn { padding: 6px 10px; font-size: 12px; }

.dropdown-toggle {
  width: 100%;
  text-align: left;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  color: var(--text);
  font-family: inherit;
  position: relative;
}
.dropdown-toggle:hover { border-color: var(--accent-soft-border); }
.dropdown-toggle::after {
  content: "▾";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

.dropdown-panel {
  position: relative;
  margin-top: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-bg-raised);
  box-shadow: var(--shadow-elevated);
  padding: 8px;
  z-index: 20;
}

.dropdown-panel input[type="text"] {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 14px;
  background: var(--bg-soft);
  color: var(--text);
  font-family: inherit;
  margin-bottom: 6px;
}

.checklist { max-height: 260px; overflow-y: auto; }
.checklist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
}
.checklist-logo {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: #fff;
  object-fit: contain;
  padding: 2px;
  flex-shrink: 0;
}
.checklist-item:hover { background: var(--accent-soft); }
.checklist-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; }
.checklist-item .checklist-symbol { color: var(--text-muted); font-size: 12px; font-weight: 700; margin-left: auto; }
.checklist-empty, .checklist-message { padding: 10px 8px; font-size: 13px; color: var(--text-muted); }

#watchlist-browse-toggle {
  display: block;
  margin: 6px 0;
  font-size: 12px;
}
.watchlist-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  padding: 4px 8px 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.breadcrumb-link {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.breadcrumb-link:hover { color: var(--accent-hover); }
.breadcrumb-sep { color: var(--text-muted); margin-right: 2px; }
.breadcrumb-current { color: var(--text); font-weight: 600; }
.checklist-category-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
.checklist-category-item:hover { background: var(--accent-soft); }
.checklist-category-arrow { color: var(--text-muted); }

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 40px 24px;
  border-style: dashed;
  border-color: var(--border);
}
.empty-state-title { font-weight: 700; font-size: 16px; }
.empty-state-desc { color: var(--text-muted); font-size: 14px; max-width: 420px; margin-bottom: 8px; line-height: 1.5; }

.active-strategy-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 8px;
}

.active-strategy-card {
  border: 1.5px solid var(--accent-soft-border);
  background: var(--accent-soft);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-elevated);
}
.active-strategy-card .card-title {
  font-size: 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.active-strategy-card .card-desc { font-size: 14px; line-height: 1.6; margin-top: 8px; }
.active-strategy-card .modal-actions { margin-top: 16px; }

.template-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--card-bg-raised);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
}

.active-strategy-empty {
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  padding: 24px;
  color: var(--text-muted);
  font-size: 14px;
}

.account-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--text-muted);
}

.auth-overlay {
  min-height: calc(100vh - 130px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  position: relative;
  overflow: hidden;
}
.auth-overlay.hidden { display: none; }
.auth-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-scene-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hero-scene-image-day { display: none; }
:root[data-theme="light"] .hero-scene-image-night { display: none; }
:root[data-theme="light"] .hero-scene-image-day { display: inline; }
/* Blinkende Autoscheinwerfer und das pulsierende Leuchtturm-Licht passen
   nur zur Nacht-Aufnahme - bei Tag ist die Lampe schlicht nicht an. */
:root[data-theme="light"] .headlight-flare { display: none; }
:root[data-theme="light"] .lighthouse-lamp-glow { display: none; }
:root[data-theme="light"] .shooting-star { display: none; }
:root[data-theme="light"] .shooting-star-head { display: none; }
.headlight-flare {
  fill: #ffffff;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(255, 240, 200, 1)) drop-shadow(0 0 13.5px rgba(255, 225, 160, 1));
  animation-name: headlight-blink;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes headlight-blink {
  0%, 90%, 100% { opacity: 0; }
  92% { opacity: 1; }
  94.5% { opacity: 0.375; }
  96% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .headlight-flare { animation: none; opacity: 0; }
}
.lighthouse-lamp-glow {
  mix-blend-mode: screen;
  animation: lighthouse-lamp-pulse 4s ease-in-out infinite;
}
@keyframes lighthouse-lamp-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .lighthouse-lamp-glow { animation: none; opacity: 0.6; }
}
.shooting-star {
  fill: none;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.35));
  animation: shooting-star-flight 2.2s ease-out 1 forwards;
}
/* Kein Intervall/keine Wiederholung mehr - läuft genau einmal, wenn die
   Login-Seite lädt (jeder Login/Logout ist ein echter Seiten-Neuladen,
   siehe logout-btn: location.reload(), also startet die CSS-Animation
   dabei automatisch neu, ganz ohne JavaScript). animation-fill-mode:
   forwards hält den Endzustand (unsichtbar) danach, statt zum
   ursprünglichen CSS-Wert zurückzuspringen.

   Bewusst KEIN abruptes Ende: nach dem Zeichnen (bis 62%) folgt ein
   langes, ungleichmäßiges Ausblenden (62%->100%, nicht linear, sondern
   erst langsam dann schneller) statt eines kurzen linearen Fades direkt
   auf 0 - wirkt sonst wie ein Abschalten statt einem Verglühen. */
@keyframes shooting-star-flight {
  0% { opacity: 0; stroke-dashoffset: 100; }
  2% { opacity: 1; }
  62% { stroke-dashoffset: 0; opacity: 1; }
  80% { opacity: 0.55; }
  92% { opacity: 0.15; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .shooting-star { animation: none; opacity: 0; }
}
.shooting-star-head {
  opacity: 0;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
  animation: shooting-star-head-flight 2.2s ease-out 1 forwards;
}
/* Heller Punkt am Vorderende, kurz bevor der Streifen fertig gezeichnet
   ist (62%, s.o.) sichtbar - simuliert den eigentlichen "Meteor" an der
   Spitze der Leuchtspur, statt dass nur eine blasse Linie erscheint.
   Erlischt bewusst FRÜHER (bis 88%) als die Spur selbst (bis 100%) - der
   helle Punkt "verglüht" zuerst, die schwächere Leuchtspur hängt noch
   kurz nach, wie bei einem echten Meteor. */
@keyframes shooting-star-head-flight {
  0%, 58% { opacity: 0; }
  63% { opacity: 1; }
  70% { opacity: 1; }
  80% { opacity: 0.35; }
  88% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .shooting-star-head { animation: none; opacity: 0; }
}
.auth-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--hero-scrim-angled-1) 0%, var(--hero-scrim-angled-2) 45%, var(--hero-scrim-angled-3) 100%);
}
.hero-grid {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}
/* Nur ab einer Mindesthöhe/-breite nach oben verschieben - auf kurzen
   Handy-Bildschirmen würde ein fester 4cm-Versatz sonst den Anfang des
   Textes ("Trade. Navigate.") aus dem sichtbaren Bereich hinter den
   Header schieben. */
@media (min-width: 641px) and (min-height: 700px) {
  .hero-grid { transform: translateY(-4cm); }
}

.hero-copy {
  animation: hero-fade-in 0.6s ease-out both;
  text-align: center;
}

.hero-tagline-large {
  font-family: "Century Gothic", "Questrial", sans-serif;
  font-size: clamp(32px, 8vw, 58px);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text);
  text-align: center;
  margin: 0 0 28px;
}
/* Ab Tablet-Breite aufwärts genug Platz für eine einzige Zeile - auf
   Handy-Breiten bleibt der Zeilenumbruch (s. Basis-Regel oben), sonst
   würde ein erzwungenes "nowrap" den Text seitlich abschneiden. */
@media (min-width: 641px) {
  .hero-tagline-large {
    /* Bei diesen Schriftgrößen ist der Text oft breiter als die 640px-
       Spalte (.hero-grid) - text-align:center allein reicht dann nicht,
       weil Browser überstehenden Inline-Inhalt nicht symmetrisch nach
       beiden Seiten zentrieren, sondern wie linksbündig behandeln (kein
       Bug, Standardverhalten). Deshalb hier stattdessen "aus der Spalte
       ausbrechen" und über left:50% + translateX(-50%) wirklich mittig
       zur Spalte positionieren, unabhängig von der eigenen Breite. */
    display: block;
    width: max-content;
    max-width: 92vw;
    white-space: nowrap;
    font-size: clamp(40px, 5.4vw, 68px);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}
.hero-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-border);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 20px;
}
/* An den Bildrand fixiert - gilt für die "Lokale Handelssignal-App"-Pille
   auf der Login-/Startseite genauso wie für "Dein Dashboard" danach,
   beide tragen dieselbe Klasse und sollen sich gleich verhalten. */
.hero-eyebrow {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 2;
  margin-bottom: 0;
  /* Schwebt direkt über dem Hintergrundfoto statt über einer Karte - die
     sonst verwendete, nur leicht eingefärbte Badge-Optik (--accent-soft)
     ist im Hellmodus gegen ein helles Tagesfoto kaum lesbar. Stattdessen
     denselben blickdichten Hintergrund wie die Header-Icons verwenden
     (--bg-soft), der in beiden Themes unabhängig vom Foto funktioniert. */
  background: var(--bg-soft);
  border-color: var(--border);
  box-shadow: var(--shadow-card);
}
.hero-heading {
  font-size: 44px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.hero-heading-accent {
  background: linear-gradient(90deg, var(--accent) 0%, var(--green) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-subheading {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 460px;
  margin: 0 auto 40px;
}

@keyframes hero-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-copy { animation: none; opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  /* Account-Leiste (Nutzername + Abmelden + Konto löschen) passt auf
     schmalen Bildschirmen nicht in eine Zeile neben Logo/Sprachwahl -
     daher umbrechen statt über den Viewport hinauslaufen zu lassen. */
  header { flex-wrap: wrap; row-gap: 10px; padding: 16px 20px; }
  .account-bar { margin-left: 0; flex-wrap: wrap; justify-content: flex-end; order: 3; width: 100%; row-gap: 8px; }

  /* Historie/Verlauf-leeren-Buttons neben der Überschrift sprengen bei
     schmalen Karten die Breite - auf Mobile untereinander anzeigen. */
  .signal-log-header { flex-wrap: wrap; }
  .signal-log-header-actions { width: 100%; justify-content: flex-end; }
}

.login-trigger-wrap { position: relative; }
.login-trigger-btn {
  width: 36px;
  border-radius: 50%;
  transition: background 0.15s, border-color 0.15s;
}
.login-trigger-btn svg { width: 19px; height: 19px; }

.auth-popover {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 30;
}
.auth-popover.hidden { display: none; }

.auth-card {
  width: 340px;
  max-width: calc(100vw - 48px);
  position: relative;
  z-index: 1;
  box-shadow: var(--shadow-elevated);
  /* .card ist bewusst transparent (Dashboard-Kacheln zeigen das Hintergrund-
     foto durch) - für ein schwebendes Overlay wie den Login/Registrieren-
     Popover ist das falsch, dahinter schien z.B. ein noch offenes
     Einstellungen-Fenster durch. Gleiche undurchsichtige Fläche wie
     #modal/.lang-dropdown verwenden. */
  background: var(--overlay-bg);
}
.auth-card .card-title { font-size: 20px; text-align: center; }
.auth-card .modal-actions { justify-content: stretch; }
.auth-card .modal-actions .btn-primary { width: 100%; }
#auth-toggle-hint {
  text-align: center;
  margin-top: 4px;
  margin-bottom: 0;
}
#auth-forgot-hint {
  text-align: center;
  margin-top: 8px;
  margin-bottom: 0;
}

.link-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.link-btn:hover { color: var(--accent-hover); }
.link-btn.danger { color: var(--red); }
.link-btn.danger:hover { color: #ff6b6e; }

.subtle-link {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}
.subtle-link:hover { color: var(--text); }

.backtest-stats {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  font-size: 14px;
  margin: 12px 0;
}
.backtest-stats span { color: var(--text-muted); }
.backtest-disclaimer { font-size: 12px; margin-top: 12px; margin-bottom: 0; }

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
  cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
}

.disclaimer-card { max-width: 480px; }
.disclaimer-body {
  max-height: 40vh;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.disclaimer-body p { margin: 0 0 12px; }
.disclaimer-body p:last-child { margin-bottom: 0; }
#modal-content .disclaimer-body { max-height: none; }

.app-footer {
  display: flex;
  justify-content: center;
  padding: 24px 32px 40px;
  /* body ist eine Flex-Spalte (s. body-Regel) - margin-top:auto schiebt
     den Footer an den unteren Bildschirmrand, solange der Inhalt (z.B.
     alle Kacheln eingeklappt) kürzer als der Viewport ist. Ist der Inhalt
     länger, hat auto keinen Effekt und der Footer folgt ganz normal danach. */
  margin-top: auto;
}
.app-footer.hidden { display: none; }
.app-footer .link-btn { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.app-footer .link-btn:hover { color: var(--text); }

/* Die Kacheln waren zwar jetzt volle Breite, wirkten auf einem großen
   Tablet-Bildschirm (im Gegensatz zu einem Desktop-Monitor meist aus
   Armlänge/Touch-Abstand betrachtet) mit den unveränderten Desktop-
   Schriftgrößen trotzdem winzig. Ab hier (Tablet, nicht Handy - Handys
   unter 640px sollen kompakt bleiben) Text, Icons und Abstände gezielt
   größer. Bewusst ganz am Dateiende, sonst verlieren einzelne Regeln
   (gleiche Spezifität) gegen später im Stylesheet stehende Basis-Regeln,
   unabhängig von der Media Query.

   "pointer: coarse" statt einer festen Breiten-Obergrenze: ein iPad im
   Querformat ist 1180-1366px breit, also außerhalb jeder sinnvollen
   Desktop/Tablet-Breitengrenze, bleibt aber ein Touch-Gerät, das aus der
   Hand/Armlänge bedient wird - genau wie im Hochformat. "pointer: coarse"
   erkennt das unabhängig von Ausrichtung und Fenstergröße (echte Desktop-
   Mäuse/Trackpads melden "pointer: fine" und sind davon nie betroffen). */
@media (min-width: 641px) and (pointer: coarse) {
  h2 { font-size: 21px; }
  .hint, .card-desc { font-size: 16px; }
  .field label { font-size: 15px; }
  .field input, .field select { padding: 12px 14px; }
  .collapsible { padding: 18px 22px; }
  .card { padding: 20px 22px; }
  button { padding: 13px 20px; font-size: 15px; }
  .section-icon { width: 38px; height: 38px; }
  .section-icon svg { width: 21px; height: 21px; }
  .section-summary-line { font-size: 14px; padding: 4px 12px; }
  .dashboard-hero-heading { font-size: 36px; }
  .hero-subheading { font-size: 18px; }
  /* Größere Überschrift/Untertext oben machen den Kopfbereich höher -
     Abstände hier gegenrechnen, sonst frisst das den Platz wieder auf,
     den main/.dashboard-hero eigentlich sparen sollten (v.a. im
     Querformat merklich, wo die Bildschirmhöhe knapp ist und die unterste
     Kachel sonst zu nah an den unteren Rand rückt). */
  main { padding-top: 14px; }
  .dashboard-hero { padding: 4px 0; margin-bottom: 16px; }
}