/* Farben aus dem Corporate Design (Eisautomat\Corporate Design):
   Nachtschwarz mit Goldstaub, goldener Schriftzug, Kugeln in Rosé / Gold / Silber. */
:root {
  color-scheme: dark;
  --grund: #0b111a;
  --flaeche: #131a25;
  --flaeche-2: #1a2230;
  --text: #f2ece2;
  --leise: #a8a296;
  --linie: rgba(217, 177, 92, .22);
  --gold: #d9b15c;
  --gold-hell: #f6dd9a;
  --gold-dunkel: #9c7128;
  --gold-verlauf: linear-gradient(180deg, #f8e3a6 0%, #e2bb62 45%, #b8862f 75%, #e9c877 100%);
  --rose: #e7a3a0;
  --silber: #cfd5dd;
  --ok: #5cc28a;
  --warn: #f0a843;
  --stoer: #ef6461;
  --grau: #6b7280;
  --balken-grund: #232c3a;
  --schatten: 0 10px 30px rgba(0, 0, 0, .35);
  --rund: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background-color: var(--grund);
  /* feiner Goldstaub wie auf den Automatenfolien */
  background-image:
    radial-gradient(circle at 12% 18%, rgba(217,177,92,.10) 0 1.5px, transparent 2px),
    radial-gradient(circle at 78% 42%, rgba(217,177,92,.08) 0 1px, transparent 1.5px),
    radial-gradient(circle at 34% 71%, rgba(207,213,221,.06) 0 1px, transparent 1.5px),
    radial-gradient(circle at 91% 88%, rgba(217,177,92,.09) 0 1.5px, transparent 2px);
  background-size: 180px 180px, 240px 240px, 200px 200px, 300px 300px;
}
a { color: var(--gold); }
a:hover { color: var(--gold-hell); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
h2 { font-size: clamp(1.7rem, 4vw, 2.3rem); }
.huelle { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.abschnitt { padding: 48px 16px; }
.leise { color: var(--leise); }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Goldener Schriftzug (Headlines) – angelehnt an das Logo */
.gold-schrift {
  font-style: italic; font-weight: 800; letter-spacing: .01em;
  background: var(--gold-verlauf); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.6));
}

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 1000; background: rgba(11, 17, 26, .85);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--linie); }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; height: 62px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 1.45rem; }
.logo img { height: 40px; width: auto; border-radius: 4px; }
.navi { display: flex; gap: 22px; }
.navi a { color: var(--text); text-decoration: none; font-weight: 500; opacity: .85; }
.navi a:hover { color: var(--gold); opacity: 1; }
@media (max-width: 560px) { .navi { gap: 14px; font-size: .92rem; } .navi a:last-child { display: none; } }

/* Held: Motiv der Automatenfolie, Ränder laufen in den Grund aus */
.held { position: relative; padding-bottom: 8px; }
.held-bild img {
  /* Höhe auf ~68 % des Bildschirms begrenzt (Seitenverhältnis 1,71), damit die Suche sichtbar bleibt */
  display: block; width: min(100%, 1150px, 116vh); height: auto; margin: 0 auto;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent), linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask-image: linear-gradient(180deg, #000 70%, transparent), linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.held-text-block { position: relative; margin-top: 4px; text-align: center; }
@media (min-width: 701px) { .held-text-block { margin-top: -40px; } }
.held-text { max-width: 560px; margin: 0 auto; color: var(--leise); font-size: 1.1rem; }
.sortensuche { margin: 22px auto 0; max-width: 440px; text-align: left; }
.sortensuche label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--gold); }
.sortensuche input { width: 100%; padding: 13px 16px; font: inherit; color: var(--text);
  background: var(--flaeche); border: 1px solid var(--gold-dunkel); border-radius: 999px; }
.sortensuche input::placeholder { color: #6f6a61; }
.sortensuche input:focus { outline: 2px solid var(--gold); outline-offset: 2px; }
.suchergebnis { min-height: 1.6em; margin-top: 12px; color: var(--leise); }
.suchergebnis strong { color: var(--text); }

/* Hinweisband (Demo-Daten, veralteter Stand, Ladefehler) */
.hinweis { max-width: 1068px; margin: 20px auto 0; padding: 12px 16px; border-radius: 12px;
  background: rgba(240, 168, 67, .10); border: 1px solid rgba(240, 168, 67, .45); }
@media (max-width: 1100px) { .hinweis { margin: 20px 16px 0; } }

/* Karten-Rahmen: goldene Kontur wie der QR-Rahmen auf der Folie */
.karte-rahmen { background: var(--flaeche); border: 1px solid var(--gold-dunkel); border-radius: var(--rund);
  box-shadow: var(--schatten); overflow: hidden; }
#kartenflaeche { height: 440px; background: #0e141d; }
@media (max-width: 600px) { #kartenflaeche { height: 330px; } }
/* helle OSM-Kacheln in eine dunkle Karte verwandeln */
#kartenflaeche .leaflet-tile-pane { filter: invert(1) hue-rotate(185deg) brightness(.85) contrast(.9) saturate(.35); }
.leaflet-container a { color: var(--gold-dunkel); }
.legende { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 0; padding: 12px 16px;
  font-size: .9rem; color: var(--leise); border-top: 1px solid var(--linie); }
.legende li { display: flex; align-items: center; gap: 7px; }
.punkt { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.punkt.ok { background: var(--ok); } .punkt.warn { background: var(--warn); }
.punkt.stoer { background: var(--stoer); } .punkt.grau { background: var(--grau); }

.marker { width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  border: 3px solid var(--gold-hell); box-shadow: 0 2px 8px rgba(0,0,0,.6); }
.marker.ok { background: var(--ok); } .marker.warn { background: var(--warn); }
.marker.stoer { background: var(--stoer); } .marker.grau { background: var(--grau); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--flaeche-2); color: var(--text);
  border: 1px solid var(--gold-dunkel); }
.leaflet-popup-content { font: 14px/1.5 system-ui, sans-serif; }
.leaflet-popup-content h3 { font-size: 1.05rem; margin: 0 0 4px; color: var(--gold); }
.leaflet-popup-content a { color: var(--gold); }
.leaflet-bar a { background: var(--flaeche-2); color: var(--text); border-color: var(--linie); }

/* Automatenkarten */
.abschnitt-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.stand { color: var(--leise); margin: 0; font-size: .95rem; }
.automatenliste { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; margin-top: 14px; }
@media (max-width: 400px) { .automatenliste { grid-template-columns: 1fr; } }
.automat { position: relative; background: linear-gradient(180deg, var(--flaeche-2), var(--flaeche));
  border: 1px solid var(--linie); border-radius: var(--rund); box-shadow: var(--schatten);
  padding: 22px; scroll-margin-top: 84px; overflow: hidden; }
/* goldene Oberkante */
.automat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--gold-verlauf); }
.automat.hervor { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), var(--schatten); }
.automat-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.automat h3 { font-size: 1.45rem; margin: 0; font-style: italic; color: var(--gold-hell); }
.adresse { color: var(--leise); font-size: .92rem; margin: 2px 0 0; }
.adresse a { color: inherit; }
.adresse a:hover { color: var(--gold); }
.lage { margin: 4px 0 0; font-size: .92rem; color: var(--gold-hell); }
.status { flex-shrink: 0; font-size: .8rem; font-weight: 600; padding: 4px 11px; border-radius: 999px; white-space: nowrap; border: 1px solid; }
.status.ok { color: var(--ok); border-color: rgba(92,194,138,.45); background: rgba(92,194,138,.10); }
.status.warn { color: var(--warn); border-color: rgba(240,168,67,.45); background: rgba(240,168,67,.10); }
.status.stoer { color: var(--stoer); border-color: rgba(239,100,97,.45); background: rgba(239,100,97,.10); }
.status.grau { color: var(--leise); border-color: rgba(107,114,128,.5); background: rgba(107,114,128,.12); }
.meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .88rem; color: var(--leise); margin: 12px 0 16px; }
.meldung { font-size: .9rem; margin: 0 0 14px; padding: 9px 12px; border-radius: 10px;
  background: rgba(240,168,67,.10); border-left: 3px solid var(--warn); }

.kategorie { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold); margin: 18px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--linie); }
.kategorie:first-of-type { margin-top: 4px; }
.sorten { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.sorte.ohne-balken { padding-bottom: 8px; border-bottom: 1px dashed var(--balken-grund); }
.sorte.ohne-balken:last-child { border-bottom: 0; padding-bottom: 0; }
.sorte { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; align-items: center; }
.sorte-name { font-weight: 500; }
.sorte-zahl { font-size: .85rem; color: var(--leise); font-variant-numeric: tabular-nums; }
.balken { grid-column: 1 / -1; height: 7px; border-radius: 4px; background: var(--balken-grund); overflow: hidden; }
.balken > span { display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--gold-dunkel), var(--gold) 60%, var(--gold-hell)); }
.sorte.knapp .balken > span { background: linear-gradient(90deg, #b9612b, var(--warn)); }
.sorte.knapp .sorte-zahl { color: var(--warn); }
.sorte.leer .sorte-name { color: var(--leise); text-decoration: line-through; }
.sorte.leer .sorte-zahl { color: var(--stoer); font-weight: 600; }
.sorte.treffer .sorte-name { color: var(--rose); font-weight: 700; }
.ohne-bestand { color: var(--leise); font-style: italic; margin: 0; }
.laedt { color: var(--leise); }

/* Fragen */
details { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 15px 18px; margin-bottom: 10px; }
details[open] { border-color: var(--gold-dunkel); }
summary { cursor: pointer; font-weight: 600; }
summary::marker { color: var(--gold); }
details p { margin: 10px 0 0; color: var(--leise); }

/* Kontakt – wie das Störungs-Schild am Automaten */
.kontakt { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px;
  padding: 28px; border-radius: var(--rund); border: 1px solid var(--gold-dunkel);
  background: linear-gradient(135deg, var(--flaeche-2), var(--flaeche)); box-shadow: var(--schatten); }
.kontakt h2 { margin-bottom: .3em; }
.kontakt p { margin: 0 0 10px; color: var(--leise); }
address { font-style: normal; line-height: 1.75; }
.insta { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-radius: 14px; text-decoration: none;
  color: var(--text); border: 1px solid var(--gold); background: rgba(217,177,92,.06); }
.insta svg { color: var(--gold); flex-shrink: 0; }
.insta:hover { background: rgba(217,177,92,.14); color: var(--text); }

/* Rechtstexte (Impressum, Datenschutz) */
.rechtstext { max-width: 820px; }
.rechtstext h1 { font-size: clamp(2rem, 5vw, 2.8rem); }
.rechtstext h2 { font-size: 1.15rem; color: var(--gold-hell); margin: 1.8em 0 .4em; }
.rechtstext p, .rechtstext li { color: #d9d3c8; }
.rechtstext ul { padding-left: 1.2em; }
.rechtstext li { margin-bottom: .25em; }
.rechtstext .zurueck { margin-top: 2.5em; }

/* Fuß */
.fuss { border-top: 1px solid var(--linie); padding: 26px 0; color: var(--leise); font-size: .9rem; }
.fuss-innen { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.fuss a { color: var(--leise); }
.fuss a:hover { color: var(--gold); }