/* ==========================================================================
   tomstown.ch – der Niesen mit aktuellem Wetter, nur CSS
   Grösse über font-size: .niesen { font-size: 12px; } → Bild 10em × 5em
   Zustand über data-wetter: sonnig | klar | heiter | bewoelkt | nebel | regen | schnee | gewitter
   data-tag="0" = Nacht, data-schnee="1" = Schneekappe auf dem Gipfel
   ========================================================================== */
.niesen {
  --ni-ink: var(--ink, #f4f2ef);
  --ni-muted: var(--mute, #8b8a88);
  --ni-accent: var(--accent, #c873ec);      /* tomstown-Lila: Sonne, Blitz */
  --ni-face-l: #2c2c31;      /* Bergflanke im Licht */
  --ni-face-r: #18181b;      /* Bergflanke im Schatten */
  --ni-cloud: #4a4a52;
  --ni-lake: #1d2a30;

  display: inline-flex; align-items: center; gap: 1em;
  font-size: 12px; line-height: 1; color: var(--ni-muted);
}
.niesen .ni-scene {
  position: relative; flex: none; width: 10em; height: 5em; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.niesen .ni-scene > * { position: absolute; transition: opacity .8s ease; }

/* ---------- Himmel ---------- */
.niesen .ni-sun {
  right: 1.3em; top: .45em; width: 1.2em; height: 1.2em; border-radius: 50%;
  background: var(--ni-accent); box-shadow: 0 0 0 .3em rgba(200, 115, 236, .14), 0 0 1.2em rgba(200, 115, 236, .35);
  opacity: 0; animation: ni-glow 4s ease-in-out infinite;
}
@keyframes ni-glow { 50% { box-shadow: 0 0 0 .45em rgba(200, 115, 236, .08), 0 0 1.6em rgba(200, 115, 236, .45); } }
.niesen .ni-moon {
  right: 1.6em; top: .45em; width: 1em; height: 1em; border-radius: 50%;
  color: var(--ni-accent); opacity: 0;
}
.niesen .ni-moon svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Mondphase (data-mond setzt niesen.js): bei Neumond kein Mond, bei
   Vollmond ein leichter Schein. */
.niesen[data-mond="neu"] .ni-moon { visibility: hidden; }
.niesen[data-mond="voll"] .ni-moon svg { filter: drop-shadow(0 0 .18em rgba(200, 115, 236, .6)); }
.niesen .ni-stars {
  inset: 0 0 45% 0; opacity: 0;
  background:
    radial-gradient(1px 1px at 12% 30%, var(--ni-ink) 99%, transparent),
    radial-gradient(1px 1px at 28% 12%, var(--ni-ink) 99%, transparent),
    radial-gradient(1px 1px at 40% 40%, var(--ni-muted) 99%, transparent),
    radial-gradient(1px 1px at 63% 18%, var(--ni-ink) 99%, transparent),
    radial-gradient(1px 1px at 72% 55%, var(--ni-muted) 99%, transparent),
    radial-gradient(1px 1px at 88% 70%, var(--ni-ink) 99%, transparent);
  animation: ni-twinkle 3s ease-in-out infinite;
}
@keyframes ni-twinkle { 50% { filter: brightness(.45); } }

/* Wolken: weiche Kugeln, ziehen langsam vorbei */
.niesen .ni-cloud {
  width: 3.4em; height: 1.3em; opacity: 0;
  background:
    radial-gradient(circle at 30% 70%, var(--ni-cloud) .55em, transparent .58em),
    radial-gradient(circle at 55% 45%, var(--ni-cloud) .7em, transparent .73em),
    radial-gradient(circle at 76% 72%, var(--ni-cloud) .5em, transparent .53em),
    linear-gradient(var(--ni-cloud), var(--ni-cloud)) 30% 100% / 50% .5em no-repeat;
  animation: ni-drift 26s linear infinite;
}
.niesen .ni-cloud--1 { top: .5em; left: 0; }
.niesen .ni-cloud--2 { top: 1.35em; left: 0; transform: scale(.75); animation-duration: 34s; animation-delay: -14s; filter: brightness(.85); }
@keyframes ni-drift { from { translate: -4em 0; } to { translate: 11em 0; } }

/* ---------- Berg ---------- */
.niesen .ni-mountain {
  left: .4em; right: .4em; bottom: .55em; top: .35em;
  background: linear-gradient(90deg, var(--ni-face-l) 0 51.5%, var(--ni-face-r) 51.5% 100%);
  clip-path: polygon(0 100%, 14% 78%, 22% 74%, 51.5% 0, 63% 30%, 70% 40%, 100% 100%);
}
/* feine Kante am Grat */
.niesen .ni-ridge {
  left: .4em; right: .4em; bottom: .55em; top: .35em;
  background: var(--ni-muted); opacity: .55;
  clip-path: polygon(0 100%, 14% 78%, 22% 74%, 51.5% 0, 63% 30%, 70% 40%, 100% 100%,
                     99% 100%, 69.4% 41.6%, 62.4% 31.6%, 51.5% 2.6%, 22.4% 75.6%, 14.4% 79.6%, 1% 100%);
}
.niesen .ni-snow {
  left: .4em; right: .4em; bottom: .55em; top: .35em; opacity: 0;
  background: linear-gradient(90deg, var(--ni-ink) 0 51.5%, #c9c9c4 51.5% 100%);
  clip-path: polygon(41% 26%, 44% 22%, 46% 25%, 48.5% 20%, 51.5% 0, 56% 12%, 58% 19%, 56% 18%, 54% 22%, 52% 19%, 49% 23%, 47% 27%, 45% 24%);
}

/* ---------- Thunersee ----------
   Wasser mit zwei gegenlaeufigen Wellenreihen. data-wind (ruhig | mittel |
   stark) steuert Hoehe und Tempo der Wellen; bei Sonne und Mond glitzert
   ein Lichtstreifen im Wasser, bei starkem Wind gibt es Schaumkronen. */
.niesen { --ni-w1: #2b4b56; --ni-w2: #3d6672; --ni-tempo: 5s; --ni-hoch: 1; }
.niesen .ni-lake {
  left: 0; right: 0; bottom: 0; height: .7em;
  background: linear-gradient(var(--ni-w1), var(--ni-lake) 85%);
}
.niesen .ni-wave {
  left: -1em; right: -1em; bottom: 0; height: calc(.6em * var(--ni-hoch));
  background:
    radial-gradient(circle at 50% 100%, var(--ni-w1) .24em, transparent calc(.24em + .5px)) 0 0 / .66em calc(.26em * var(--ni-hoch)) repeat-x,
    linear-gradient(var(--ni-w1), var(--ni-lake)) 0 calc(.24em * var(--ni-hoch)) / 100% 100% no-repeat;
  animation: ni-welle var(--ni-tempo) linear infinite;
}
.niesen .ni-wave--front {
  height: calc(.36em * var(--ni-hoch)); z-index: 2;
  background:
    radial-gradient(circle at 50% 100%, var(--ni-w2) .18em, transparent calc(.18em + .5px)) 0 0 / .5em calc(.2em * var(--ni-hoch)) repeat-x,
    linear-gradient(var(--ni-w2), var(--ni-w1)) 0 calc(.18em * var(--ni-hoch)) / 100% 100% no-repeat;
  animation: ni-welle-2 calc(var(--ni-tempo) * .7) linear infinite reverse;
}
@keyframes ni-welle   { to { background-position: .66em 0, 0 calc(.24em * var(--ni-hoch)); } }
@keyframes ni-welle-2 { to { background-position: .5em 0, 0 calc(.18em * var(--ni-hoch)); } }
/* Lichtstreifen im Wasser unter Sonne bzw. Mond */
.niesen .ni-glanz {
  right: 1.1em; bottom: .04em; width: 1.8em; height: .5em; opacity: 0; z-index: 3;
  background: repeating-linear-gradient(180deg, var(--ni-glanz, var(--ni-accent)) 0 1px, transparent 1px .12em);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0, #000 30%, transparent 72%);
          mask-image: radial-gradient(ellipse at 50% 0, #000 30%, transparent 72%);
  animation: ni-glitzer 2.4s ease-in-out infinite;
}
@keyframes ni-glitzer { 50% { opacity: .35; translate: .12em 0; } }
/* Schaumkronen bei starkem Wind */
.niesen .ni-gischt {
  left: -1em; right: -1em; bottom: .34em; height: .1em; opacity: 0; z-index: 3;
  background: radial-gradient(circle, var(--ni-ink) .035em, transparent .05em) 0 0 / .9em .1em repeat-x;
  animation: ni-welle-2 calc(var(--ni-tempo) * .55) linear infinite reverse;
}
.niesen[data-wind="ruhig"] { --ni-tempo: 9s; --ni-hoch: .6; }
.niesen[data-wind="stark"] { --ni-tempo: 2.4s; --ni-hoch: 1.45; }
.niesen[data-wind="stark"] .ni-gischt { opacity: .55; }
/* Wetter faerbt das Wasser */
.niesen[data-wetter="regen"], .niesen[data-wetter="gewitter"] { --ni-w1: #24383f; --ni-w2: #304a53; --ni-lake: #172328; }
.niesen[data-wetter="nebel"] { --ni-w1: #33403f; --ni-w2: #435250; --ni-lake: #252d2e; }
.niesen[data-wetter="schnee"] { --ni-w1: #34484f; --ni-w2: #47606a; }
.niesen[data-tag="0"] { --ni-w1: #1f3640; --ni-w2: #2b4a56; --ni-lake: #12191d; }
.niesen[data-wetter="sonnig"] .ni-glanz,
.niesen[data-wetter="heiter"][data-tag="1"] .ni-glanz { opacity: .9; }
.niesen[data-wetter="klar"] .ni-glanz,
.niesen[data-wetter="heiter"][data-tag="0"] .ni-glanz { opacity: .6; }
.niesen[data-mond="neu"][data-tag="0"] .ni-glanz { opacity: 0; }
.niesen[data-wetter="gewitter"] .ni-gischt { opacity: .55; }

/* ---------- Niederschlag, Nebel, Blitz ---------- */
.niesen .ni-rain {
  inset: 1.4em 0 .55em 0; opacity: 0;
  background: repeating-linear-gradient(105deg, transparent 0 .45em, rgba(190, 200, 215, .38) .45em calc(.45em + 1px));
  background-size: 100% 1.4em;
  -webkit-mask-image: repeating-linear-gradient(0deg, #000 0 .35em, transparent .35em .7em);
          mask-image: repeating-linear-gradient(0deg, #000 0 .35em, transparent .35em .7em);
  animation: ni-fall .5s linear infinite;
}
@keyframes ni-fall { to { -webkit-mask-position: 0 .7em; mask-position: 0 .7em; background-position: -.2em .7em; } }
.niesen .ni-flakes {
  inset: 1.2em 0 .55em 0; opacity: 0;
  background:
    radial-gradient(circle, var(--ni-ink) .06em, transparent .08em) 0 0 / 1.6em 1.3em,
    radial-gradient(circle, var(--ni-muted) .05em, transparent .07em) .7em .6em / 2.1em 1.7em;
  animation: ni-snowfall 4s linear infinite;
}
@keyframes ni-snowfall { to { background-position: .4em 1.3em, 1em 2.3em; } }
.niesen .ni-fog {
  left: -2em; right: -2em; bottom: .5em; height: 2.6em; opacity: 0;
  background:
    linear-gradient(transparent 0 15%, rgba(160, 160, 165, .38) 15% 32%, transparent 32% 48%, rgba(160, 160, 165, .3) 48% 66%, transparent 66% 78%, rgba(160, 160, 165, .42) 78% 100%);
  filter: blur(2px);
  animation: ni-fogdrift 9s ease-in-out infinite alternate;
}
@keyframes ni-fogdrift { to { translate: 1.6em 0; } }
.niesen .ni-bolt {
  left: 3.2em; top: 1.4em; width: .7em; height: 1.6em; opacity: 0;
  background: var(--ni-accent);
  clip-path: polygon(45% 0, 100% 0, 62% 42%, 92% 42%, 18% 100%, 40% 54%, 8% 54%);
}
@keyframes ni-flash { 0%, 86%, 92%, 100% { opacity: 0; } 88%, 95% { opacity: 1; } }

/* ---------- Zustände ---------- */
.niesen[data-wetter="sonnig"] .ni-sun,
.niesen[data-wetter="heiter"][data-tag="1"] .ni-sun { opacity: 1; }
.niesen[data-wetter="klar"] .ni-moon, .niesen[data-wetter="klar"] .ni-stars,
.niesen[data-wetter="heiter"][data-tag="0"] .ni-moon { opacity: 1; }
.niesen[data-wetter="heiter"] .ni-cloud--1 { opacity: 1; }
.niesen[data-wetter="bewoelkt"] .ni-cloud,
.niesen[data-wetter="regen"] .ni-cloud,
.niesen[data-wetter="schnee"] .ni-cloud,
.niesen[data-wetter="gewitter"] .ni-cloud { opacity: 1; }
.niesen[data-wetter="regen"] .ni-rain,
.niesen[data-wetter="gewitter"] .ni-rain { opacity: 1; }
.niesen[data-wetter="schnee"] .ni-flakes { opacity: 1; }
.niesen[data-wetter="nebel"] .ni-fog { opacity: 1; }
.niesen[data-wetter="gewitter"] { --ni-cloud: #34343b; }
.niesen[data-wetter="gewitter"] .ni-bolt { animation: ni-flash 5s steps(1, end) infinite; }
.niesen[data-schnee="1"] .ni-snow { opacity: 1; }
.niesen[data-tag="0"] { --ni-face-l: #202024; --ni-face-r: #121214; --ni-lake: #141c20; }

/* ---------- Beschriftung ---------- */
.niesen .ni-label {
  margin: 0; display: flex; flex-direction: column; gap: .45em;
  font: 400 1em/1 ui-monospace, "JetBrains Mono", Menlo, monospace;
  letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
}
.niesen .ni-name { color: var(--ni-ink); }
.niesen .ni-name::after { content: " •"; color: var(--ni-accent); }
.niesen .ni-src { font-size: .75em; letter-spacing: .1em; text-transform: none; color: var(--ni-muted); opacity: .7; text-decoration: none; }
.niesen .ni-src:hover { opacity: 1; color: var(--ni-ink); }

@media (prefers-reduced-motion: reduce) {
  .niesen .ni-scene *, .niesen .ni-scene { animation: none !important; }
  .niesen[data-wetter="gewitter"] .ni-bolt { opacity: 1; }
}

/* ==========================================================================
   Header-Variante: mittig in der Kopfzeile von tomstown.ch
   <div class="niesen niesen--kopf" …>
   ========================================================================== */
.niesen--kopf { font-size: 9px; gap: 1.2em; }
.niesen--kopf { justify-self: center; }
.niesen--kopf .ni-label { font-family: inherit; font-size: 1.25em; gap: .5em; letter-spacing: .2em; }
.niesen--kopf .ni-src { font-size: .7em; }

/* Handy: nur Berg und Temperatur */
@media (max-width: 640px) {
  .niesen--kopf { font-size: 6px; gap: .8em; }
  .niesen--kopf .ni-name, .niesen--kopf .ni-sep, .niesen--kopf .ni-text, .niesen--kopf .ni-src { display: none; }
  .niesen--kopf .ni-label { font-size: 1.8em; }
}

@media (prefers-reduced-motion: reduce) {
  .niesen .ni-wave, .niesen .ni-gischt, .niesen .ni-glanz { animation: none; }
}