/* app.css – WeCide: Kopfzeile, Tabs, Filter-Chips, Vorschlagskarten, Bewerten, Ergebnis, Blatt. Nur Variablen aus tokens.css/Farbwelt */
@layer app {
  body { padding-bottom: calc(var(--a8) + env(safe-area-inset-bottom)); }
  main { padding-top: calc(var(--a2) + 68px + env(safe-area-inset-top)); display: grid; gap: var(--a4); }
  #seite { display: grid; gap: var(--a4); }
  main > *, #seite > *, #ansicht-bewerten > * { min-width: 0; } /* Grid-Kinder sonst so breit wie das breite Meteogramm */
  h2, h3 { margin: 0; }
  [hidden] { display: none !important; }

  /* Kopfzeile: schwebende Glas-Pille */
  .titelzeile {
    position: fixed; z-index: 1000; inset: calc(env(safe-area-inset-top) + var(--a2)) var(--a3) auto;
    max-width: 680px; margin-inline: auto; display: flex; align-items: center; gap: var(--a2);
    padding: 4px; border-radius: 999px;
  }
  .marke { flex: 1; text-align: center; font-weight: 700; font-size: var(--fs-text); letter-spacing: .01em; }
  .kopf-knopf {
    inline-size: var(--tipp); block-size: var(--tipp); display: inline-grid; place-items: center; border-radius: 999px;
    color: var(--akzent-text); text-decoration: none;
  }
  .kopf-knopf svg { inline-size: 22px; block-size: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .kopf-knopf:active, .knopf-zweit:active, .filter-chip:active, .kat-tab:active, .rund:active, .stern:active { opacity: .6; }

  .grosstitel { font-size: var(--fs-titel2); line-height: 1.2; padding: 0; }
  .metazeile { color: var(--text-2); font-size: var(--fs-fussnote); margin-top: var(--a2); }
  .kopfbereich .chip { margin-top: var(--a2); }
  .abschnitt-titel { font-size: var(--fs-klein); font-weight: 600; color: var(--text-2); margin-bottom: var(--a2); }
  .leise { color: var(--text-2); font-weight: 400; }
  .breit { inline-size: 100%; }

  /* Knöpfe */
  .knopf-primaer { border: 0; cursor: pointer; }
  .knopf-primaer:disabled, .knopf-zweit:disabled { opacity: .45; }
  .knopf-zweit {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--a1); min-height: var(--tipp); padding: 0 var(--a4);
    border-radius: 999px; background: var(--akzent-weich); color: var(--akzent-text); font-weight: 600; font-size: var(--fs-klein);
    border: 0; text-decoration: none; white-space: nowrap;
  }
  .knopf-zweit[aria-pressed="true"] { background: var(--akzent); color: var(--akzent-kontrast); }
  .knopf-zweit.warn { background: var(--warn-hg); color: var(--warn-text); }

  /* Waagerecht wischbare Reihen */
  .reihe { display: flex; gap: var(--a2); flex-wrap: wrap; }
  .wisch { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--rand) * -1); padding: 2px var(--rand); scroll-padding-inline: var(--rand); }
  .wisch::-webkit-scrollbar { display: none; }

  .person { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 var(--a3); border-radius: 999px; background: var(--fuellung); font-size: var(--fs-fussnote); color: var(--text-2); }
  .person.fertig { background: var(--ok-hg); color: var(--ok-text); font-weight: 600; }
  .person .du { font-weight: 400; }

  /* Segment Bewerten | Ergebnis */
  .segment { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 999px; background: var(--fuellung); }
  .segment button { min-height: 44px; border-radius: 999px; font-weight: 600; color: var(--text-2); }
  .segment button[aria-selected="true"] { background: var(--hg-karte); color: var(--akzent-text); box-shadow: 0 2px 8px rgb(0 0 0 / .08); }

  #ansicht-bewerten, #ansicht-ergebnis { display: grid; gap: var(--a3); }

  .kat-tab, .filter-chip {
    flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--a4);
    border-radius: 999px; font-size: var(--fs-klein); font-weight: 600; white-space: nowrap;
    background: var(--hg-karte); border: 1px solid var(--trenner); color: var(--text);
  }
  .kat-tab[aria-pressed="true"] { background: var(--akzent); color: var(--akzent-kontrast); border-color: transparent; }
  .kat-tab .anzahl { font-weight: 400; opacity: .8; font-variant-numeric: tabular-nums; }
  .filter-chip.aktiv { background: var(--akzent-weich); color: var(--akzent-text); border-color: var(--akzent); }
  .filter-chip.zuruecksetzen { color: var(--fehler-text); }
  .werkzeug { display: grid; gap: var(--a2); }
  .stufen { display: flex; flex-wrap: wrap; gap: var(--a2); padding: var(--a3); border-radius: var(--r-innen, 16px); background: var(--fuellung); }
  .werkzeug-zeile { display: flex; align-items: center; gap: var(--a2); }
  .treffer { flex: 1; color: var(--text-2); font-size: var(--fs-fussnote); font-variant-numeric: tabular-nums; }
  select, input, textarea { font: inherit; color: var(--text); }
  select {
    min-height: var(--tipp); max-width: 52vw; padding: 0 var(--a3); border-radius: 999px; border: 1px solid var(--trenner);
    background: var(--hg-karte); font-size: max(16px, var(--fs-klein)); font-weight: 600; /* 16 px: iOS zoomt sonst beim Tippen */
    -webkit-appearance: none; appearance: none; /* sonst ignoriert Safari die Mindesthöhe */
  }

  .karte-box { block-size: 300px; border-radius: var(--r-karte); overflow: hidden; border: 1px solid var(--trenner); z-index: 0; }
  .punkte-rest { position: sticky; top: calc(env(safe-area-inset-top) + 72px); z-index: 5; justify-self: center; padding: var(--a2) var(--a4); border-radius: 999px; background: var(--akzent); color: var(--akzent-kontrast); font-size: var(--fs-klein); box-shadow: var(--schatten); }

  /* Vorschlagskarten */
  .liste { display: grid; gap: var(--a3); }
  .vorschlag { padding: var(--a4); display: grid; gap: var(--a1); scroll-margin-top: 90px; }
  .v-kopf { display: flex; gap: var(--a3); align-items: center; }
  .v-bild { flex: none; inline-size: 64px; block-size: 64px; border-radius: 14px; object-fit: cover; background: var(--fuellung); }
  .v-bild.platzhalter { display: grid; place-items: center; font-size: 30px; }
  .v-titel { font-size: var(--fs-text); font-weight: 650; line-height: 1.25; }
  .v-zeile { color: var(--text-2); font-size: var(--fs-fussnote); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .v-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .v-chips .chip, .v-zeile .chip { min-height: 26px; font-size: var(--fs-fussnote); }
  .v-hinweis { font-size: var(--fs-fussnote); color: var(--warn-text); background: var(--warn-hg); padding: var(--a1) var(--a2); border-radius: 8px; }
  .v-mehr summary { min-height: 44px; display: flex; align-items: center; color: var(--akzent-text); font-weight: 600; font-size: var(--fs-klein); cursor: pointer; }
  .v-mehr p { font-size: var(--fs-klein); color: var(--text-2); }
  .v-links { display: flex; gap: var(--a4); }
  .v-links .link { font-size: var(--fs-klein); }

  /* Bewerten */
  .bewertung { display: flex; align-items: center; justify-content: space-between; gap: var(--a2); flex-wrap: wrap; border-top: 1px solid var(--trenner); padding-top: var(--a2); }
  .sterne { display: flex; }
  .stern { inline-size: 48px; block-size: 48px; font-size: 30px; line-height: 1; color: var(--text-3); display: grid; place-items: center; }
  .stern.an { color: var(--orange); }
  .daumen { display: flex; gap: var(--a2); }
  .daumen-knopf, .veto { min-height: var(--tipp); padding: 0 var(--a4); border-radius: 999px; background: var(--fuellung); font-weight: 600; font-size: var(--fs-klein); }
  .daumen-knopf.an { background: var(--akzent); color: var(--akzent-kontrast); }
  .veto { color: var(--text-2); }
  .veto.an { background: var(--fehler-hg); color: var(--fehler-text); }
  .rang, .punkte { display: flex; align-items: center; gap: var(--a2); }
  .rang-text { font-size: var(--fs-klein); min-inline-size: 8.5em; }
  .rund { inline-size: var(--tipp); block-size: var(--tipp); border-radius: 999px; background: var(--akzent-weich); color: var(--akzent-text); font-size: 22px; font-weight: 700; display: grid; place-items: center; }
  .rund:disabled { opacity: .35; }
  .punkte-wert { min-inline-size: 2ch; text-align: center; font-size: var(--fs-titel3); font-weight: 700; font-variant-numeric: tabular-nums; }
  button:disabled { cursor: default; }

  /* Wetter */
  .wetter-zeile { display: flex; align-items: center; gap: var(--a3); font-size: var(--fs-text); }
  .wetter-symbol { font-size: 34px; line-height: 1; }
  .wetter-werte { display: flex; flex-wrap: wrap; gap: var(--a1) var(--a4); color: var(--text-2); font-size: var(--fs-fussnote); margin-top: var(--a2); font-variant-numeric: tabular-nums; }

  /* Aufklapper (Ebene 2) */
  details.mehr > summary {
    min-height: var(--tipp); display: flex; align-items: center; gap: var(--a2); cursor: pointer; list-style: none;
    color: var(--akzent-text); font-weight: 600; font-size: var(--fs-klein);
  }
  details.mehr > summary::-webkit-details-marker { display: none; }
  details.mehr > summary::after { content: "›"; margin-left: auto; font-size: 22px; transition: transform var(--dauer) var(--kurve); }
  details.mehr[open] > summary::after { transform: rotate(90deg); }
  .wetter details.mehr { margin-top: var(--a2); border-top: 1px solid var(--trenner); }
  .ideen { padding: 0 var(--a4); border-radius: var(--r-karte); background: var(--fuellung); }
  .ideen[open] { padding-bottom: var(--a4); }
  .ideen .hinweis { margin: 0 0 var(--a3); }
  .idee { display: flex; gap: var(--a3); align-items: center; justify-content: space-between; padding: var(--a3); border-radius: 16px; background: var(--hg-karte); }
  .idee .knopf-zweit { white-space: normal; text-align: center; max-inline-size: 11em; line-height: 1.2; flex: none; }
  .idee .link { min-height: 36px; font-size: var(--fs-fussnote); }

  /* Ergebnis */
  .ergebnis { display: grid; gap: var(--a2); }
  .gewinner-label { color: var(--text-2); font-size: var(--fs-fussnote); text-transform: uppercase; letter-spacing: .06em; }
  .gewinner { font-size: var(--fs-grosstitel); font-weight: 750; line-height: 1.12; color: var(--akzent-text); text-wrap: balance; }
  .gewinner-leer { color: var(--text-2); }
  .ergebnis .chip.warn { justify-self: start; }
  .rangliste { margin: 0; padding: 0; list-style: none; display: grid; }
  .rangliste li { display: flex; gap: var(--a3); align-items: baseline; padding: var(--a2) 0; border-top: 1px solid var(--trenner); }
  .rangliste .platz { inline-size: 2ch; color: var(--text-2); font-variant-numeric: tabular-nums; }
  .rangliste .r-titel { flex: 1; display: grid; }
  .rangliste .r-punkte { font-weight: 700; font-variant-numeric: tabular-nums; }
  .rangliste .sieger .r-titel { font-weight: 700; }
  .rangliste .blockiert .r-titel { color: var(--text-2); text-decoration: line-through; text-decoration-thickness: 1px; }
  .rangliste .r-veto { text-decoration: none; display: block; font-size: var(--fs-fussnote); color: var(--fehler-text); }
  .neugier { text-align: center; }

  .aktionen-unten { display: flex; flex-wrap: wrap; gap: var(--a2); justify-content: center; padding-top: var(--a2); }

  /* Formulare */
  .formzeile { display: flex; gap: var(--a2); margin-top: var(--a3); }
  .formzeile input { flex: 1; min-inline-size: 0; }
  input, textarea, .feld select {
    min-height: var(--tipp); padding: var(--a2) var(--a3); border-radius: 12px; border: 1px solid var(--trenner);
    background: var(--hg-karte); font-size: max(16px, var(--fs-text)); /* 16 px: iOS zoomt sonst beim Tippen */
  }
  textarea { resize: vertical; }
  .feld { display: grid; gap: var(--a1); font-size: var(--fs-fussnote); font-weight: 600; color: var(--text-2); }
  .feld .formzeile { margin-top: 0; }
  .feld select { max-width: none; border-radius: 12px; padding-inline-end: 36px; /* Pfeil, weil appearance: none den eigenen entfernt */
    background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
  .formfehler { color: var(--fehler-text); background: var(--fehler-hg); padding: var(--a2) var(--a3); border-radius: 10px; font-size: var(--fs-klein); margin-top: var(--a2); }
  fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--a2); }
  legend { font-size: var(--fs-fussnote); font-weight: 600; color: var(--text-2); margin-bottom: var(--a1); }
  .auswahl { display: flex; flex-wrap: wrap; gap: var(--a2); }
  .auswahl label { display: inline-flex; align-items: center; gap: var(--a2); min-height: var(--tipp); padding: 0 var(--a4); border-radius: 999px; background: var(--hg-karte); border: 1px solid var(--trenner); font-weight: 600; font-size: var(--fs-klein); cursor: pointer; }
  .auswahl label:has(input:checked) { background: var(--akzent); color: var(--akzent-kontrast); border-color: transparent; }
  .auswahl input { position: absolute; opacity: 0; pointer-events: none; }
  .auswahl label:has(input:focus-visible) { outline: 3px solid var(--akzent); outline-offset: 2px; }
  .schalter-zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--a3); min-height: var(--tipp); font-weight: 600; }
  .schalter-zeile input { inline-size: 26px; block-size: 26px; min-height: 0; accent-color: var(--akzent); }

  /* Blatt (dialog) */
  .blatt {
    inline-size: min(100%, 560px); max-inline-size: 100%; max-block-size: 92dvh; margin: auto auto 0; border: 0; padding: 0; /* max-inline-size: Browser-Vorgabe ließ sonst 40 px Rand */
    border-radius: var(--r-blatt) var(--r-blatt) 0 0; background: var(--hg); color: var(--text); box-shadow: var(--schatten);
  }
  .blatt::backdrop { background: rgb(0 0 0 / .35); }
  .blatt form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a3); padding: var(--a4) var(--rand) calc(var(--a4) + env(safe-area-inset-bottom)); }
  .blatt-kopf { display: flex; align-items: center; justify-content: space-between; }
  .blatt-kopf h2 { font-size: var(--fs-titel3); }
  @media (min-width: 768px) { .blatt { margin: auto; border-radius: var(--r-blatt); } }

  /* Meldung unten */
  .meldung {
    position: fixed; z-index: 2000; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + var(--a4));
    max-inline-size: calc(100% - 2 * var(--rand)); padding: var(--a3) var(--a4); border-radius: 18px; font-size: var(--fs-klein); font-weight: 600;
  }
  .meldung.fehler { background: var(--fehler-hg); color: var(--fehler-text); }

  /* Leer- und Ladezustände */
  .leer { text-align: center; display: grid; gap: var(--a2); justify-items: center; }
  .leer-symbol { font-size: 40px; line-height: 1; }
  .skelett { color: var(--text-2); animation: puls 1.4s ease-in-out infinite; }
  @keyframes puls { 50% { opacity: .55; } }
  @media (prefers-reduced-motion: reduce) { .skelett { animation: none; } }

  /* Übersicht */
  .entscheidungen { display: grid; gap: var(--a3); }
  .eintrag { display: flex; align-items: center; gap: var(--a3); padding: var(--a4); text-decoration: none; color: inherit; }
  .eintrag .e-text { flex: 1; min-inline-size: 0; }
  .eintrag .e-titel { font-weight: 650; }
  .eintrag .pfeil { color: var(--text-3); font-size: 24px; }
  .linkbox { word-break: break-all; font-size: var(--fs-klein); padding: var(--a3); border-radius: 12px; background: var(--fuellung); user-select: all; }

  /* Leaflet: Popup-Links in Akzentfarbe, Kartenrahmen rund */
  .leaflet-container { font: inherit; background: var(--fuellung); }
  .leaflet-popup-content a { color: #5B21B6; }

  @media (hover: hover) and (pointer: fine) {
    .knopf-zweit:hover, .filter-chip:hover, .kat-tab:hover { filter: brightness(.97); }
  }
}

/* Meteogramm: Rücksetz-Regel „svg max-width: 100%" staucht sonst die breiten Diagramme */
@layer app {
  #meteogramm :is(svg, img, canvas) { max-width: none; display: revert; }
  #meteogramm button { cursor: pointer; }
}

/* Schmale iPhones: Sterne und Veto in eine Zeile (44 px bleibt das Mindestmaß) */
@layer app {
  @media (max-width: 420px) {
    .stern { inline-size: 44px; block-size: 44px; font-size: 28px; }
    .veto { padding: 0 var(--a3); min-height: 44px; }
  }
}