:root{
  --grund:#fdfcfa; --text:#23201c; --gedaempft:#6b6257;
  --linie:#e4ddd2; --akzent:#8d6026; --feld:#f5f1ea;
}
/* Sepia - warm, gedaempft, fuer langes Lesen und fuer draussen.
   Uebernommen aus dem ET-Explorer, auf die Dorffarben gezogen. */
:root[data-theme="sepia"]{
  --grund:#f2ead9; --text:#241b10; --gedaempft:#5a4a34;
  --linie:#c7b794; --akzent:#7d4f17; --feld:#e9dcc3;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="sepia"]){
    --grund:#16140f; --text:#ece6dc; --gedaempft:#a69d8e;
    --linie:#332e26; --akzent:#d6a65f; --feld:#1e1b15;
  }
}
:root[data-theme="dark"]{
  --grund:#16140f; --text:#ece6dc; --gedaempft:#a69d8e;
  --linie:#332e26; --akzent:#d6a65f; --feld:#1e1b15;
}

*{box-sizing:border-box}
/* Der Schriftgrad haengt an der Wurzel: ansicht.js dreht hier, und
   weil fast alles in rem steht, waechst die ganze Seite mit. */
html{font-size:100%}
body{
  margin:0; background:var(--grund); color:var(--text);
  /* Schnoerkelfrei. Serifen brechen auf dem Handy bei kleinen Graden
     weg; die Systemschrift ist dort gezeichnet, wo sie laeuft.
     "Noto Sans Thai" steht davor, damit บ้านห้วยหัน sauber kommt. */
  font:1.0625rem/1.65 system-ui,-apple-system,"Segoe UI",Roboto,
       "Noto Sans Thai","Helvetica Neue",Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
main{max-width:46rem; margin:0 auto; padding:2.5rem 16px 4rem}

.kopf{
  position:sticky; top:0; z-index:20;
  border-bottom:1px solid var(--linie); background:var(--feld);
  padding:.8rem 16px;
  /* Marke und Menue auf eine Zeile, solange sie nebeneinander passen.
     Im Querformat spart das die halbe Leistenhoehe - sie klebt oben
     und frisst dort dauerhaft Platz. Wird es zu eng, bricht das Menue
     von allein in die zweite Zeile. */
  display:flex; align-items:baseline; flex-wrap:wrap; gap:.3em 1.2em;
  /* Feste Grundgroesse: die Leiste ist Moebel, nicht Inhalt. Waechst
     sie mit der Lesegroesse mit, nimmt sie bei 150 % vier Zeilen und
     28 % des Handyschirms - mehr, als das Vergroessern einbringt.
     Alles in der Leiste rechnet deshalb in em von diesen 16 px. */
  font-size:16px;
}
.marke{
  display:block; font-size:1.45em; color:var(--text);
  text-decoration:none; letter-spacing:.01em;
}
.marke span{color:var(--gedaempft); font-size:.7em; margin-left:.5rem}
.kopf nav{display:flex; flex-wrap:wrap; gap:1.1rem}
.kopf nav a{
  color:var(--gedaempft); text-decoration:none; font-size:.95em;
  font-family:inherit;
}
.kopf nav a:hover{color:var(--akzent)}

/* --- Schrift und Anzeige ------------------------------------------
   Ein Knopf in der Leiste, dahinter zwei Reihen. Nicht sechs Knoepfe
   offen: die Kopfzeile ist im Querformat knapp, und wer die Schrift
   einmal eingestellt hat, fasst sie nie wieder an. */
.ansicht-knopf{
  /* Kein margin-left:auto - der Knopf soll der Menuezeile folgen und
     nicht an den rechten Rand springen; sonst bekommt er beim Umbruch
     eine eigene Zeile. */
  flex:0 0 auto;
  background:none; border:1px solid var(--linie); border-radius:6px;
  color:var(--gedaempft); cursor:pointer;
  font:600 .95em/1 inherit; padding:.42em .6em;
}
.ansicht-knopf:hover{color:var(--akzent); border-color:var(--akzent)}
.ansicht{
  position:absolute; right:12px; top:100%; z-index:30;
  background:var(--feld); border:1px solid var(--linie);
  border-radius:8px; padding:.7rem .85rem;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
}
.ansicht[hidden]{display:none}
.ansicht h2{
  margin:0 0 .35rem; font-size:.72rem; font-weight:600;
  color:var(--gedaempft); text-transform:uppercase; letter-spacing:.06em;
}
.ansicht h2:not(:first-child){margin-top:.9rem}
.ansicht div{display:flex; gap:.3rem}
.ansicht button{
  background:var(--grund); border:1px solid var(--linie);
  border-radius:6px; color:var(--text); cursor:pointer;
  font:inherit; font-size:.95rem;
  /* 44 px ist die Fingerkuppe - darunter trifft man im Gehen daneben */
  min-width:44px; min-height:44px; padding:.3rem .55rem;
}
.ansicht button:hover{border-color:var(--akzent)}
.ansicht button[aria-pressed="true"]{
  border-color:var(--akzent); color:var(--akzent); font-weight:600;
}

h1{font-size:1.9rem; line-height:1.25; margin:0 0 .4rem; font-weight:normal}
h2{font-size:1.3rem; margin:2.2rem 0 .6rem; font-weight:normal; color:var(--akzent)}
a{color:var(--akzent)}
.datum{
  color:var(--gedaempft); font-size:.9rem; margin:0 0 1.8rem;
  font-family:system-ui,sans-serif;
}

img{max-width:100%; height:auto; border-radius:3px; display:block}
/* Titelbild der Startseite: volle Breite der Textspalte.
   width/height stehen im Markup, damit beim Laden kein Sprung
   entsteht; fetchpriority=high, weil es das erste ist, was man
   sieht - und deshalb ausnahmsweise kein loading=lazy. */
.titelbild{width:100%; margin:0 0 2.2rem}
figure{margin:1.8rem 0}
figcaption{
  color:var(--gedaempft); font-size:.88rem; margin-top:.45rem;
  font-family:system-ui,sans-serif;
}

.galerie{
  display:grid; gap:.6rem; margin:1.8rem 0;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
}

.liste{list-style:none; padding:0}
.liste li{
  border-bottom:1px solid var(--linie); padding:.85rem 0;
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
}
.liste a{text-decoration:none}
.liste time{
  color:var(--gedaempft); font-size:.85rem; white-space:nowrap;
  font-family:system-ui,sans-serif;
}

.fuss{
  border-top:1px solid var(--linie); padding:1.6rem 16px;
  color:var(--gedaempft); font-size:.85rem; text-align:center;
  font-family:system-ui,sans-serif;
}

.galerie a{display:block; line-height:0}
.galerie img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  transition:transform .15s ease, filter .15s ease;
}
.galerie a:hover img{transform:scale(1.03); filter:brightness(1.06)}

/* Bildbetrachter */
.lupe{
  display:none; position:fixed; inset:0; z-index:50;
  background:rgba(8,6,4,.94);
  align-items:center; justify-content:center;
}
.lupe.offen{display:flex}
.lupe figure{margin:0; max-width:94vw; max-height:92vh; text-align:center}
.lupe img{
  max-width:94vw; max-height:84vh; width:auto; height:auto;
  margin:0 auto; border-radius:2px;
}
.lupe figcaption{
  color:#e8e0d4; font-size:.9rem; margin-top:.8rem;
  font-family:system-ui,sans-serif; padding:0 1rem;
}
.lupe button{
  position:absolute; background:none; border:0; cursor:pointer;
  color:#e8e0d4; font-size:2.6rem; line-height:1;
  padding:.4rem .9rem; opacity:.65; transition:opacity .15s;
}
.lupe button:hover{opacity:1}
.lupe-zu{top:.3rem; right:.6rem; font-size:2.4rem}
.lupe-vor{left:.2rem; top:50%; transform:translateY(-50%)}
.lupe-zurueck{right:.2rem; top:50%; transform:translateY(-50%)}
.lupe-zaehler{
  position:absolute; bottom:1rem; left:0; right:0; text-align:center;
  color:#a69d8e; font-size:.82rem; font-family:system-ui,sans-serif;
}

/* Wetterkasten */
#wetter{
  background:var(--feld); border:1px solid var(--linie); border-radius:4px;
  padding:1.1rem 1.2rem; margin:1.6rem 0;
  font-family:system-ui,sans-serif; font-size:.95rem;
}
.wetter-zeit{
  margin:0 0 .8rem; font-size:.84rem; color:var(--gedaempft);
  border-bottom:1px solid var(--linie); padding-bottom:.6rem;
}
.wetter-zeit span{opacity:.75}

.wetter-jetzt{
  /* Umbruch erlaubt: bei grosser Schrift passen Zeichen, Grad und
     Lage nicht mehr nebeneinander - gemessen 12 px Ueberlauf. */
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding-bottom:.9rem; margin-bottom:.5rem;
  border-bottom:1px solid var(--linie);
}
.wetter-zeichen{font-size:2.6rem; line-height:1}
.wetter-grad{font-size:1.8rem; font-weight:600; white-space:nowrap}
.wetter-lage{color:var(--gedaempft); line-height:1.4}
.wetter-lage small{font-size:.82rem}

.wetter-tage{width:100%; border-collapse:collapse; font-size:.9rem}
.wetter-tage th{
  text-align:left; font-weight:normal; color:var(--gedaempft);
  padding:.35rem 0; white-space:nowrap;
}
.wetter-tage td{padding:.35rem .3rem; text-align:right; white-space:nowrap}
.wetter-tage tr.heute th, .wetter-tage tr.heute td{font-weight:600; color:var(--text)}
.w-zeichen{font-size:1.15rem; text-align:center !important}
.w-min{color:var(--gedaempft)}
.w-regen{color:var(--gedaempft)}
.w-regen.viel{color:var(--akzent); font-weight:600}
.w-wahrsch{color:var(--gedaempft); font-size:.82rem; width:3.4rem}
.wetter-quelle{
  margin:.9rem 0 0; font-size:.78rem; color:var(--gedaempft); text-align:right;
}

/* Notfallkasten - soll auffallen, ohne zu schreien */
.notfall{
  border:2px solid var(--akzent); border-radius:4px;
  padding:1rem 1.2rem; margin:1.6rem 0;
  background:var(--feld);
}
.notfall h2{
  margin:0 0 .6rem; font-size:1.1rem; color:var(--akzent);
  font-family:system-ui,sans-serif; letter-spacing:.02em;
}
.notfall p{margin:.5rem 0; font-family:system-ui,sans-serif; font-size:.95rem}
.notfall strong{font-size:1.05em}

/* Verweise auf die staatliche Wetterbehoerde */
.wetter-amt{
  margin:.9rem 0 0; padding-top:.7rem;
  border-top:1px solid var(--linie);
  font-size:.82rem; color:var(--gedaempft); line-height:1.6;
}

/* Videos von R2 */
.filme{margin:1.8rem 0}
.filme video{
  display:block; margin:0 auto .9rem;
  /* Querformat wird von der Breite begrenzt, Hochformat von der Hoehe -
     sonst fuellt ein Handyvideo im Hochformat den halben Bildschirm. */
  max-width:100%; max-height:72vh;
  width:auto; height:auto;
  border-radius:3px; background:#000;
}

/* Jahresniederschlag als Saeulen.
   Farben gegen die Pruefung gelaufen; hell und dunkel getrennt gewaehlt. */
:root{
  --trocken:#a35a28;
  --nass:#1b6ea8;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="sepia"]){ --trocken:#c0803f; --nass:#4f93c4; }
}
:root[data-theme="dark"]{ --trocken:#c0803f; --nass:#4f93c4; }

#klimakurve{position:relative; margin:1.6rem 0 .4rem}
svg.kurve{width:100%; height:auto; display:block; overflow:visible}

svg.kurve .raster{stroke:var(--linie); stroke-width:1}
svg.kurve .achse{
  fill:var(--gedaempft); font-size:10px;
  font-family:system-ui,sans-serif;
}
svg.kurve .saeule{transition:opacity .12s}
svg.kurve .saeule.trocken{fill:var(--trocken)}
svg.kurve .saeule.nass{fill:var(--nass)}
svg.kurve .saeule.frueh{opacity:.55}          /* duennere Datengrundlage */
svg.kurve .saeule.offen{
  fill:none; stroke:var(--trocken); stroke-width:1.5; stroke-dasharray:2 2;
}
svg.kurve:hover .saeule{opacity:.45}
svg.kurve .saeule:hover{opacity:1}

svg.kurve .normal{stroke:var(--text); stroke-width:1.5; opacity:.55}
svg.kurve .normaltext, svg.kurve .spitze{
  fill:var(--gedaempft); font-size:10px;
  font-family:system-ui,sans-serif;
  /* Saum in Flaechenfarbe: sonst verschwindet die Schrift auf den
     Saeulen. paint-order legt den Saum hinter die Fuellung. */
  paint-order:stroke;
  stroke:var(--feld); stroke-width:3px; stroke-linejoin:round;
}
svg.kurve .spitze{fill:var(--text); font-weight:600}

.kurve-legende{
  margin:.4rem 0 0; font-size:.8rem; color:var(--gedaempft);
  font-family:system-ui,sans-serif;
}
.kurve-legende .punkt{
  display:inline-block; width:.62rem; height:.62rem; border-radius:2px;
  margin:0 .35rem 0 1.1rem; vertical-align:baseline;
}
.kurve-legende .punkt:first-child{margin-left:0}
.kurve-legende .punkt.trocken{background:var(--trocken)}
.kurve-legende .punkt.nass{background:var(--nass)}
.kurve-legende .punkt.offen{
  background:none; border:1.5px dashed var(--trocken);
}
.kurve-fuss{
  margin:.3rem 0 1.2rem; font-size:.76rem; color:var(--gedaempft);
  font-family:system-ui,sans-serif; opacity:.8;
}

.kurve-blase{
  position:absolute; pointer-events:none;
  background:var(--text); color:var(--grund);
  padding:.3rem .55rem; border-radius:3px; white-space:nowrap;
  font-size:.8rem; font-family:system-ui,sans-serif; z-index:5;
}
.kurve-blase[hidden]{display:none}

/* Klimatabelle mit Jahresauswahl */
.klima-kopf{
  margin:1.4rem 0 .6rem; font-family:system-ui,sans-serif; font-size:.9rem;
  color:var(--gedaempft);
}
.klima-wahl{
  font:inherit; font-size:.95rem; padding:.25rem .5rem;
  border:1px solid var(--linie); border-radius:3px;
  background:var(--feld); color:var(--text); cursor:pointer;
}
.klima-summe{
  margin:.5rem 0 1.4rem; font-family:system-ui,sans-serif; font-size:.9rem;
  color:var(--gedaempft);
}
svg.monate{width:100%; height:auto; display:block; margin:.6rem 0 .2rem}
svg.monate .raster{stroke:var(--linie); stroke-width:1}
svg.monate .achse{
  fill:var(--gedaempft); font-size:9px; font-family:system-ui,sans-serif;
}
svg.monate .monat.trocken{fill:var(--trocken)}
svg.monate .monat.nass{fill:var(--nass)}
svg.monate .monat.neutral{fill:var(--nass); opacity:.6}
svg.monate .normmarke{stroke:var(--text); stroke-width:1.6; opacity:.75}
.monate-legende{
  margin:0 0 .8rem; font-size:.76rem; color:var(--gedaempft);
  font-family:system-ui,sans-serif; opacity:.85;
}

.abw{font-size:.82em; font-family:system-ui,sans-serif}
.abw.nah{color:var(--gedaempft); opacity:.7}   /* nahe am Normal */
.befund{
  border-left:3px solid var(--akzent);
  padding:.2rem 0 .2rem 1.1rem; margin:1.6rem 0 2rem;
}
.befund h3{
  margin:0 0 .6rem; font-size:1.05rem; font-weight:normal;
  color:var(--akzent); font-family:system-ui,sans-serif;
}
.befund p{margin:.6rem 0; font-size:.95rem}
.befund p:last-child{
  font-size:.86rem; color:var(--gedaempft); margin-bottom:0;
}

.klima-hinweis{
  margin:.4rem 0 0; font-size:.76rem; color:var(--gedaempft);
  font-family:system-ui,sans-serif; opacity:.85;
}
/* Hell und sepia teilen sich die dunklen Werte, dunkel bekommt eigene.
   ⚠️ Die Medienabfrage ist Pflicht: ohne sie galten die Dunkelfarben
   auch auf hellen Geraeten - #7fc08f auf #fdfcfa sind 2,08:1. */
.abw.mehr{color:#2f6f3e}        /* 5,91 auf hell · 5,07 auf sepia */
.abw.weniger{color:#8b5229}     /* 6,14 auf hell · 5,26 auf sepia */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="sepia"]) .abw.mehr{color:#7fc08f}
  :root:not([data-theme="light"]):not([data-theme="sepia"]) .abw.weniger{color:#d6a65f}
}
:root[data-theme="dark"] .abw.mehr{color:#7fc08f}      /* 8,62 auf dunkel */
:root[data-theme="dark"] .abw.weniger{color:#d6a65f}   /* 8,31 auf dunkel */
table.klima tr.leer td{color:var(--gedaempft); opacity:.6}

/* Klimatabelle */
table.klima{
  width:100%; border-collapse:collapse; margin:1.4rem 0;
  font-family:system-ui,sans-serif; font-size:.88rem;
}
table.klima th{
  text-align:right; font-weight:normal; color:var(--gedaempft);
  border-bottom:1px solid var(--linie); padding:.4rem .5rem;
}
table.klima th:first-child{text-align:left}
/* Die Einheit im Spaltenkopf leiser als die Bezeichnung - sie sagt,
   womit gerechnet wird, und soll nicht mitlesen. */
table.klima th span{opacity:.7; font-size:.86em}
table.klima td{padding:.3rem .5rem; text-align:right; border-bottom:1px solid var(--linie)}
table.klima td:first-child{text-align:left}
table.klima tr.nass td{color:var(--akzent); font-weight:600}
table.klima tr.trocken td{color:var(--text)}

/* In rem statt px: 30 rem sind die gewohnten 480 px, aber die Abfrage
   folgt jetzt der Grundeinstellung des Browsers - wer dort groesser
   gestellt hat, bekommt frueher das schmale Bild.
   ⚠️ Mit unseren Aa-Knoepfen hat das nichts zu tun: `rem` rechnet in
   Medienabfragen mit der Anfangsgroesse, nicht mit html{font-size}.
   Dafuer gibt es :root[data-schrift="gross"]. */
@media (max-width:30rem){
  body{font-size:1rem}
  .galerie{grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:.4rem}
  /* Auf dem Handy frisst eine stehende Leiste Hoehe - also flacher. */
  .kopf{padding:.5rem 16px}
  .marke{font-size:1.2em}
  .marke span{display:none}
  .kopf nav{gap:.9em}
  .wetter-jetzt{gap:.7rem}
  .wetter-grad{font-size:1.5rem}
  .w-wahrsch{display:none}
  table.klima{font-size:.8rem}
  .lupe button{font-size:2rem}
  main{padding-top:1.8rem}
  h1{font-size:1.55rem}
}

/* Liegendes Handy: breit genug fuer eine Zeile, aber in der Hoehe knapp.
   Gemessen bei 812x375 ohne diese Regel: 99,5 px Leiste = 26,5 % des Bildes. */
/* Grosse Schrift gewaehlt (ab 125 %) - ansicht.js setzt das Merkmal
   an die Wurzel.
   ⚠️ Eine Medienabfrage taugt dafuer NICHT: `rem` rechnet dort mit der
   Anfangsgroesse der Wurzel, nicht mit dem, was wir einstellen.
   Gemessen war die Wettertabelle bei 150 % auf 385 px 332 px breit in
   einem 328 px breiten Kasten - sie stand ueber den Rand hinaus. */
:root[data-schrift="gross"] .wetter-tage .w-min{display:none}
:root[data-schrift="gross"] .wetter-tage th{white-space:normal}
:root[data-schrift="gross"] .wetter-tage{font-size:.8em}
:root[data-schrift="gross"] .wetter-zeichen{font-size:2.1rem}
:root[data-schrift="gross"] .wetter-grad{font-size:1.5rem}
/* Letzter Ausweg, falls es trotzdem nicht reicht: der Kasten schiebt,
   die Seite nicht. Besser ein Schubfach als ein zerrissenes Blatt. */
.wetter-tage{max-width:100%}
#wetter{overflow-x:auto}

@media (max-height:480px){
  .kopf{padding:.3rem 16px}
  .marke{font-size:1.1em}
  .marke span{display:none}
  .kopf nav a{font-size:.9em}
  main{padding-top:1.4rem}
}