/* ============================================================
   assets/theme.css — DARSTELLUNGSEBENE, gemeinsam fuer BEIDE Seiten

   Hier stehen Farben, Schrift, Kopfzeile, Navigation und der
   Umschalter zwischen hell und dunkel. Sonst nirgends.

   Willst du die Seite umfaerben, reicht diese eine Datei.
   Tarife bleiben davon unberuehrt (data/plans.js).

   Die Farben stammen aus dem Braun-Theme:
     #18100F  fast schwarz, warm      #F0EDEA  warmes Off-White
     #5A3725  dunkelbraun             #FFFFFF  weiss
     #7E5039  mittelbraun             #B1967C  helles Tan
     #A06C43  Karamell (Akzent)       #876553  gedaempftes Braun
   ============================================================ */

/* ---------- 1. HELL (Standard) ---------- */
:root{
  --ink:#F0EDEA;        /* Seitenhintergrund */
  --panel:#FFFFFF;      /* Karten */
  --panel2:#E9E2DA;     /* zweite Flaeche, Rillen */
  --line:#D3C7B9;       /* Trennlinien */
  --paper:#18100F;      /* Haupttext */
  --muted:#6B584A;      /* Nebentext */
  --gold:#8A5524;       /* Akzent */
  --gold-soft:rgba(138,85,36,.30);
  --warn:#A33F12;
  --warn-soft:rgba(163,63,18,.30);
  --shadow:0 1px 2px rgba(24,16,15,.07), 0 4px 14px rgba(24,16,15,.05);

  /* Betreiberstreifen auf den Tarifkarten (Markenfarben) */
  --dialog:#E4002B; --mobitel:#00A94F; --hutch:#E6007E;
  --op-fallback:#8C7A6B;   /* fuer Betreiber ohne eigene Farbe */

  /* Karte: mehr Versorgung = dunkler (auf hellem Grund) */
  --cov-t1:#643D17; --cov-t2:#976230; --cov-t3:#C88A52; --cov-t4:#F3B885;
  --cov-sea:#E4DCD2;

  /* Balken: bewusst NICHT die Markenfarben, siehe data/coverage.js */
  --cov-dialog:#E4002B; --cov-mobitel:#10A760; --cov-hutch:#8F67CE;

  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
}

/* ---------- 2. DUNKEL ---------- */
/* Nicht einfach umgedreht: eigene Stufen, gegen den dunklen
   Untergrund geprueft. Die Kartenstufen laufen hier andersherum,
   weil auf dunklem Grund "mehr" = heller gelesen wird.          */
:root[data-theme="dark"]{
  --ink:#18100F;
  --panel:#241A15;
  --panel2:#31231B;
  --line:#45332A;
  --paper:#F0EDEA;
  --muted:#B1967C;
  --gold:#D19A5C;
  --gold-soft:rgba(209,154,92,.34);
  --warn:#E2814F;
  --warn-soft:rgba(226,129,79,.34);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);

  --cov-t1:#FFB97A; --cov-t2:#CD8F57; --cov-t3:#9A6A3F; --cov-t4:#6B492A;
  --cov-sea:#120C0B;
}

/* Geraeteeinstellung, solange niemand den Schalter benutzt hat */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#18100F;
    --panel:#241A15;
    --panel2:#31231B;
    --line:#45332A;
    --paper:#F0EDEA;
    --muted:#B1967C;
    --gold:#D19A5C;
    --gold-soft:rgba(209,154,92,.34);
    --warn:#E2814F;
    --warn-soft:rgba(226,129,79,.34);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
    --cov-t1:#FFB97A; --cov-t2:#CD8F57; --cov-t3:#9A6A3F; --cov-t4:#6B492A;
    --cov-sea:#120C0B;
  }
}

/* ---------- 2b. Betreiberfarben ----------
   Zuordnung ueber das data-op-Attribut, das die Logikebene setzt.
   Gilt gleichzeitig fuer die Filter-Chips und die Ergebniszeilen.

   Kommt ein neuer Betreiber in data/plans.js dazu, ohne dass hier
   eine Zeile ergaenzt wird, bekommt er die neutrale Ersatzfarbe —
   die Seite bleibt also heil, sieht nur unauffaelliger aus.        */
[data-op]{--c:var(--op-fallback)}
[data-op="Dialog"]{--c:var(--dialog)}
[data-op="SLT-Mobitel"]{--c:var(--mobitel)}
[data-op="Hutch"]{--c:var(--hutch)}

/* ---------- 3. Grundgeruest ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.45;
  padding:0 0 64px;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:820px;margin:0 auto;padding:0 18px}

/* ---------- 4. Kopfzeile ---------- */
.mast{padding:22px 0 18px;border-bottom:1px solid var(--line)}
.masttop{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.mark{
  display:flex;align-items:baseline;gap:9px;
  font-weight:800;font-size:25px;letter-spacing:-.028em;
}
.mark a{color:inherit;text-decoration:none;display:flex;align-items:baseline;gap:9px}
.mark .bars{display:inline-flex;align-items:flex-end;gap:2.5px;height:19px}
.mark .bars i{width:4px;background:var(--gold);border-radius:1px;display:block}
.mark .bars i:nth-child(1){height:6px}
.mark .bars i:nth-child(2){height:11px}
.mark .bars i:nth-child(3){height:16px}
.mark .bars i:nth-child(4){height:19px;background:var(--muted);opacity:.45}
.mark .call{
  font-weight:400;font-size:14px;color:var(--gold);
  letter-spacing:0;margin-left:10px;white-space:nowrap;
}
@media (max-width:460px){.mark{flex-wrap:wrap}.mark .call{margin-left:0;width:100%}}
.tag{margin-top:9px;color:var(--muted);font-size:14.5px;max-width:52ch}
.src{
  margin-top:13px;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--gold-soft);
  border-radius:2px;padding:5px 9px;
}
.src b{color:var(--paper);font-weight:400}

/* ---------- 5. Umschalter hell / dunkel ---------- */
.themeswitch{
  display:inline-flex;flex:0 0 auto;border:1px solid var(--line);
  border-radius:999px;padding:3px;background:var(--panel);gap:2px;
}
.themeswitch button{
  font-family:var(--sans);font-size:12px;font-weight:600;
  border:0;border-radius:999px;padding:6px 12px;cursor:pointer;
  background:transparent;color:var(--muted);line-height:1.3;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
.themeswitch button:hover{color:var(--paper)}
.themeswitch button[aria-pressed="true"]{background:var(--gold);color:var(--ink);}
:root[data-theme="dark"] .themeswitch button[aria-pressed="true"],
.themeswitch button[aria-pressed="true"]{color:#FFF8F0}
:root:not([data-theme="dark"]) .themeswitch button[aria-pressed="true"]{color:#FFF8F0}
.themeswitch button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.themeswitch .si{font-size:13px;letter-spacing:0}
.themeswitch .lat{display:none}

/* Auf schmalen Schirmen eigene Zeile, damit die Sinhala-Woerter
   lesbar bleiben statt auf ein Symbol zusammenzuschrumpfen.
   Zwei gleich breite Flaechen sind dort ausserdem leichter zu treffen. */
@media (max-width:560px){
  .masttop{flex-wrap:wrap}
  #themeswitch{order:3;width:100%;margin-top:12px}
  .themeswitch{width:100%}
  .themeswitch button{flex:1 1 0;justify-content:center;padding:8px 6px;font-size:12px}
}

/* ---------- 6. Navigation ---------- */
.nav{display:flex;gap:18px;margin-top:16px;font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase}
.nav a{color:var(--muted);text-decoration:none;padding-bottom:4px;border-bottom:1px solid transparent}
.nav a:hover{color:var(--paper)}
.nav a[aria-current=page]{color:var(--gold);border-bottom-color:var(--gold)}
.nav a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- 7. Lade- und Fehlermeldung der Datenebene (beide Seiten) ---------- */
.loading{
  color:var(--muted);font-family:var(--mono);font-size:12.5px;padding:26px 0;
}
.dataerr{
  margin:18px 0;background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--warn);border-radius:8px;padding:14px 15px;
}
.dataerr h3{font-size:14.5px;font-weight:700;color:var(--warn)}
.dataerr p{margin-top:8px;font-size:13.5px;color:var(--muted);line-height:1.5}
.dataerr ul{margin:9px 0 0 18px;font-family:var(--mono);font-size:12px;color:var(--paper);line-height:1.7}
.dataerr code{color:var(--gold)}

@media (prefers-reduced-motion:no-preference){
  body{transition:background-color .18s ease, color .18s ease}
}