/* Metvik – ein Stylesheet, keine Abhängigkeiten.
   Dunkles Nachtblau-Thema: tiefer Nebelhintergrund, gesperrte Serif-Versalien,
   Azurblau als Aktions-, Bernstein als Nebenakzent. */

:root {
  color-scheme: dark;

  --bg:            #060f1a;
  --bg-deep:       #030811;
  --surface:       rgba(20, 34, 52, .62);
  --surface-2:     rgba(31, 50, 73, .55);
  --surface-solid: #0e1a28;
  --border:        rgba(154, 192, 232, .12);
  --border-strong: rgba(154, 192, 232, .26);

  --text:  #dbe6f2;
  --muted: #8ca4bf;
  --faint: #5d7490;

  --accent:      #4aa8f0;
  --accent-soft: #8ecbff;
  --accent-bg:   rgba(74, 168, 240, .13);
  --gold:        #d9b06a;
  --gold-bg:     rgba(217, 176, 106, .12);

  --ok:      #5fd39f;
  --ok-bg:   rgba(95, 211, 159, .12);
  --warn:    #e0b063;
  --warn-bg: rgba(217, 176, 106, .14);
  --err:     #e58a8a;
  --err-bg:  rgba(229, 138, 138, .12);

  --radius: 14px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 34px rgba(0, 0, 0, .3);

  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font: 16px/1.6 var(--font-body);
  background-color: var(--bg-deep);
  -webkit-text-size-adjust: 100%;
}

/* Nebel und Sternenstaub liegen hinter allem und scrollen nicht mit. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* Farbverlauf und Nebelschwaden. Der Wald sitzt in einem eigenen Element,
   weil er sich bewegt – siehe .forest weiter unten. */
body::before {
  background-image:
    radial-gradient(760px 520px at 50% 14%, rgba(52, 122, 196, .32), transparent 66%),
    radial-gradient(1150px 760px at 24% 30%, rgba(26, 78, 142, .56), transparent 62%),
    radial-gradient(920px 640px at 80% 10%, rgba(20, 62, 110, .44), transparent 60%),
    radial-gradient(1000px 700px at 86% 94%, rgba(58, 38, 96, .38), transparent 60%),
    linear-gradient(175deg, #07121f 0%, #050c15 45%, #03070d 100%);
  background-repeat: no-repeat;
}

/* ---------------------------------------------------------------- Wald

   Eigenes Element, damit es sich neigen kann. Der Drehpunkt liegt am unteren
   Rand: die Stämme stehen still, die Wipfel wandern ein paar Pixel – etwa
   drei bei 1400 Pixel Fensterbreite. Der Bodennebel liegt im selben Element
   über der Grafik und wird unmerklich mitgeschert, weil ein waagrechter
   Verlauf unter einer Scherung gleich aussieht.
   forest.svg entsteht aus docs/forest_generator.py. */

.forest {
  position: fixed;
  /* Volle Fensterhöhe: die Grafik wird bei breiten Fenstern über 600 Pixel
     hoch, eine feste Elementhöhe würde die Wipfel abschneiden. */
  left: -3%; right: -3%; top: 0; bottom: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to top, rgba(3, 7, 13, .95) 0%, rgba(4, 10, 18, .55) 20%, rgba(4, 10, 18, 0) 62%),
    url("forest.svg?v=5");
  /* Beide Ebenen sitzen am unteren Rand; der Nebel behält seine eigene Höhe.
     Die Waldbreite ist bei 283vh gedeckelt – das ist genau die Breite, bei der
     die Grafik (1800 : 630) so hoch wie das Fenster würde. So bleiben die
     Wipfel auch auf extrem breiten Bildschirmen vollständig sichtbar. Ändert
     sich der Rahmen der Grafik, nennt forest_generator.py den neuen Wert. */
  background-position: 50% 100%, 50% 100%;
  background-size: 100% min(46vh, 430px), min(max(1150px, 100%), 283vh) auto;
  background-repeat: no-repeat, repeat-x;
  transform-origin: 50% 100%;
  animation: sway 19s ease-in-out infinite;
  will-change: transform;
}

/* Unregelmässige Auslenkung statt gleichmässigem Hin und Her: so wirkt es
   nach Böen und nicht nach Metronom. Ausschlag rund drei Pixel an den Wipfeln. */
@keyframes sway {
  0%   { transform: skewX(-0.40deg); }
  19%  { transform: skewX( 0.14deg); }
  34%  { transform: skewX(-0.08deg); }
  52%  { transform: skewX( 0.46deg); }
  68%  { transform: skewX( 0.06deg); }
  84%  { transform: skewX(-0.26deg); }
  100% { transform: skewX(-0.40deg); }
}

@media (prefers-reduced-motion: reduce) {
  .forest { animation: none; transform: none; }
}
body::after {
  opacity: .45;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 68% 14%, rgba(255,255,255,.34), transparent),
    radial-gradient(1px 1px at 34% 72%, rgba(255,255,255,.30), transparent),
    radial-gradient(1px 1px at 88% 58%, rgba(255,255,255,.38), transparent),
    radial-gradient(1px 1px at 52% 44%, rgba(205,232,255,.28), transparent),
    radial-gradient(1px 1px at 8% 84%, rgba(255,255,255,.26), transparent),
    radial-gradient(1px 1px at 76% 82%, rgba(255,255,255,.24), transparent),
    radial-gradient(1px 1px at 44% 8%, rgba(255,255,255,.28), transparent);
  background-size: 900px 900px;
}

/* ---------------------------------------------------------------- Sterne

   18 einzelne Lichter, die unabhängig voneinander auf- und abklingen.
   Position, Grösse, Takt und Verzögerung stehen als nth-child-Regeln fest –
   so bleibt das Markup frei von Inline-Styles. */

.stars {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  overflow: hidden;
}
.stars span {
  position: absolute;
  width: 2px; height: 2px; border-radius: 50%;
  background: #eaf4ff;
  opacity: 0;
  box-shadow: 0 0 6px 1px rgba(190, 222, 255, .75);
  animation: twinkle 6s ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: .06; transform: scale(.7); }
  50%      { opacity: .85; transform: scale(1); }
}

.stars span:nth-child(1)  { top:  7%; left:  9%; animation-duration: 5.5s; animation-delay: -0.2s; }
.stars span:nth-child(2)  { top: 12%; left: 23%; animation-duration: 7.0s; animation-delay: -2.4s; }
.stars span:nth-child(3)  { top:  5%; left: 38%; width: 3px; height: 3px; animation-duration: 8.2s; animation-delay: -4.1s; }
.stars span:nth-child(4)  { top: 17%; left: 47%; animation-duration: 6.3s; animation-delay: -1.1s; }
.stars span:nth-child(5)  { top:  9%; left: 61%; animation-duration: 5.0s; animation-delay: -3.6s; }
.stars span:nth-child(6)  { top: 21%; left: 72%; width: 3px; height: 3px; animation-duration: 7.6s; animation-delay: -0.8s; }
.stars span:nth-child(7)  { top:  6%; left: 84%; animation-duration: 6.8s; animation-delay: -5.2s; }
.stars span:nth-child(8)  { top: 15%; left: 93%; animation-duration: 5.9s; animation-delay: -2.9s; }
.stars span:nth-child(9)  { top: 27%; left: 15%; animation-duration: 8.8s; animation-delay: -6.0s; }
.stars span:nth-child(10) { top: 31%; left: 33%; animation-duration: 6.1s; animation-delay: -1.7s; }
.stars span:nth-child(11) { top: 24%; left: 55%; animation-duration: 7.3s; animation-delay: -4.8s; }
.stars span:nth-child(12) { top: 34%; left: 67%; width: 3px; height: 3px; animation-duration: 9.1s; animation-delay: -3.0s; }
.stars span:nth-child(13) { top: 29%; left: 88%; animation-duration: 5.4s; animation-delay: -0.5s; }
.stars span:nth-child(14) { top: 42%; left:  6%; animation-duration: 7.9s; animation-delay: -5.7s; }
.stars span:nth-child(15) { top: 45%; left: 26%; animation-duration: 6.6s; animation-delay: -2.2s; }
.stars span:nth-child(16) { top: 39%; left: 79%; animation-duration: 8.4s; animation-delay: -6.9s; }
.stars span:nth-child(17) { top: 52%; left: 43%; animation-duration: 7.1s; animation-delay: -3.9s; }
.stars span:nth-child(18) { top: 49%; left: 96%; animation-duration: 5.7s; animation-delay: -1.4s; }

/* Wer Bewegung im System abgestellt hat, bekommt ruhige Sterne. */
@media (prefers-reduced-motion: reduce) {
  .stars span { animation: none; opacity: .5; }
}

/* ---------------------------------------------------------------- Krähe

   Eine abstrahierte Krähe zieht über dem Wald hin und her: der Rahmen wandert
   quer durchs Bild und kippt an den Wendepunkten – ausserhalb des sichtbaren
   Bereichs – seitenverkehrt, damit sie in die Flugrichtung schaut. Der Vogel
   selbst steigt und sinkt in einem anderen Takt, die Flügel schlagen in einem
   dritten. Drei ungleiche Perioden – so wiederholt sich das Bild nicht sichtbar. */

.crow {
  position: fixed;
  /* Nicht weiter hoch als die Kopfleiste erlaubt: auf flachen Fenstern würde
     der Vogel sonst hinter ihr verschwinden. */
  top: max(70px, 7.5%); left: 0;
  width: clamp(42px, 5vw, 80px);
  z-index: -1;
  pointer-events: none;
  color: #8ecbff;
  opacity: .3;
  animation: crow-cross 52s linear infinite;
  will-change: transform;
}
/* Die Bahn selbst: der Vogel steigt und sinkt, statt auf einer Linie zu ziehen.
   Die Stützpunkte liegen bewusst ungleich weit auseinander, kein Ausschlag
   gleicht dem vorigen. An den Wendepunkten der Höhe steht die Neigung auf null,
   dazwischen kippt die Nase in die Richtung, in die es gerade geht – beim
   Sinken nach unten, beim Steigen nach oben. Die Spiegelung an den Enden der
   Bahn dreht das Vorzeichen gleich mit, der Rückweg stimmt also von selbst. */
.crow-arc {
  animation: crow-arc 52s ease-in-out infinite;
}
.crow-bird {
  display: block; width: 100%; height: auto;
  animation: crow-glide 7.3s ease-in-out infinite alternate;
}
/* Beide Flügel drehen um dieselbe Schulter und in dieselbe Richtung: von der
   Seite gesehen heben und senken sie sich gemeinsam. Der nähere hinkt einen
   Wimpernschlag nach, das gibt der Figur Tiefe. */
.crow-wing {
  transform-box: view-box;
  transform-origin: 53px 25px;
  animation: crow-flap .86s ease-in-out infinite;
}
.crow-wing-near { animation-delay: -.05s; }

@keyframes crow-cross {
  0%   { transform: translateX(-16vw) scaleX(1); }
  47%  { transform: translateX(112vw) scaleX(1); }
  50%  { transform: translateX(112vw) scaleX(-1); }
  97%  { transform: translateX(-16vw) scaleX(-1); }
  100% { transform: translateX(-16vw) scaleX(1); }
}
@keyframes crow-arc {
  0%   { transform: translateY(10px) rotate(0deg); }
  5%   { transform: translateY(32px) rotate(4.5deg); }
  10%  { transform: translateY(54px) rotate(0deg); }
  15%  { transform: translateY(30px) rotate(-4deg); }
  20%  { transform: translateY(6px)  rotate(0deg); }
  26%  { transform: translateY(34px) rotate(4.5deg); }
  32%  { transform: translateY(58px) rotate(0deg); }
  38%  { transform: translateY(32px) rotate(-4deg); }
  44%  { transform: translateY(12px) rotate(0deg); }
  50%  { transform: translateY(30px) rotate(3deg); }
  56%  { transform: translateY(52px) rotate(0deg); }
  62%  { transform: translateY(28px) rotate(-4deg); }
  68%  { transform: translateY(4px)  rotate(0deg); }
  74%  { transform: translateY(30px) rotate(4.5deg); }
  80%  { transform: translateY(56px) rotate(0deg); }
  86%  { transform: translateY(28px) rotate(-4deg); }
  92%  { transform: translateY(8px)  rotate(0deg); }
  100% { transform: translateY(10px) rotate(0deg); }
}
/* Darüber ein kleines Auf und Ab im Flügeltakt – die Bahn allein wirkt sonst
   wie auf Schienen gezogen. */
@keyframes crow-glide {
  from { transform: translateY(-4px) rotate(-1.5deg); }
  to   { transform: translateY(5px) rotate(1.5deg); }
}
@keyframes crow-flap {
  0%, 100% { transform: rotate(20deg); }
  55%      { transform: rotate(-16deg); }
}

/* Ohne Bewegung bleibt ein gleitender Vogel stehen, statt zu verschwinden. */
@media (prefers-reduced-motion: reduce) {
  .crow { animation: none; transform: translateX(16vw); }
  .crow-arc, .crow-bird, .crow-wing { animation: none; }
}

.wrap { width: min(1140px, 100% - 2.5rem); margin-inline: auto; }

a { color: var(--accent-soft); text-decoration-color: rgba(142, 203, 255, .35); }
a:hover { color: var(--accent); }

h1 {
  font-family: var(--font-display);
  font-size: 1.85rem; font-weight: 500; letter-spacing: .03em;
  margin: 0 0 .15rem; color: #e7f0fa;
}

/* Kartenüberschriften sind gesperrte Versalien – das prägt den Auftritt. */
h2 {
  font-family: var(--font-display);
  font-size: .82rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .24em;
  color: var(--muted);
  margin: 0 0 .9rem;
}
h3 { font-size: .98rem; margin: 0 0 .4rem; font-weight: 600; }

.muted { color: var(--muted); }
.small { font-size: .85rem; }
.mono  { font-variant-numeric: tabular-nums; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .04em; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.inline { display: inline; }

/* ---------------------------------------------------------------- Kopfzeile */

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(6, 15, 26, .78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 62px; flex-wrap: wrap; padding: .45rem 0;
}
.brand {
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--font-display);
  font-size: 1.02rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .3em;
  color: #e7f0fa; text-decoration: none;
}
.brand-mark {
  width: 17px; height: 17px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #d3e9ff, var(--accent) 55%, #1c5286 100%);
  box-shadow: 0 0 14px rgba(74, 168, 240, .55);
}
.topbar-date { font-size: .76rem; color: var(--faint); letter-spacing: .1em; }
@media (max-width: 980px) { .topbar-date { display: none; } }
.nav { display: flex; gap: .15rem; flex: 1; flex-wrap: wrap; }
.nav a {
  padding: .4rem .8rem; border-radius: 8px;
  color: var(--muted); text-decoration: none;
  font-size: .82rem; text-transform: uppercase; letter-spacing: .12em;
}
.nav a:hover { background: var(--surface-2); color: var(--text); }
.nav a.is-active {
  color: var(--accent-soft);
  background: var(--accent-bg);
  box-shadow: inset 0 0 0 1px rgba(74, 168, 240, .24);
}
.topbar-user { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.user-chip { font-size: .85rem; color: var(--muted); text-decoration: none; letter-spacing: .04em; }
.user-chip:hover { color: var(--text); }

/* Schmale Fenster: Navigation in eine eigene, seitlich scrollbare Zeile. */
@media (max-width: 860px) {
  .topbar-inner { gap: .8rem; padding-bottom: .1rem; }
  .nav {
    order: 3; width: 100%; flex: none; flex-wrap: nowrap;
    overflow-x: auto; padding-bottom: .35rem;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: .35rem .6rem; letter-spacing: .1em; }
}

/* ---------------------------------------------------------------- Seitenkopf */

main.wrap { padding: 1.75rem 0 3.5rem; }

.page-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem;
}
.page-head .muted { font-size: .88rem; letter-spacing: .04em; }
.page-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.footer {
  display: flex; justify-content: space-between;
  padding: 1.1rem 0 2.5rem; color: var(--faint); font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase;
  border-top: 1px solid var(--border);
}

/* ---------------------------------------------------------------- Startseite */

.hero { text-align: center; padding: 2.2rem 0 1.8rem; }
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 6vw, 3.2rem); font-weight: 400;
  text-transform: uppercase; letter-spacing: .34em;
  margin: 0 0 .55rem; color: #eef5fd;
  text-shadow: 0 0 46px rgba(74, 168, 240, .32);
}
.hero-runes {
  font-size: .9rem; letter-spacing: .55em; color: var(--gold);
  opacity: .65; margin: 0 0 .55rem; text-indent: .55em;
}
.hero-sub { color: var(--muted); font-size: .95rem; margin: 0; letter-spacing: .05em; }
.hero-note {
  color: var(--faint); font-size: .76rem; margin: .5rem 0 0;
  text-transform: uppercase; letter-spacing: .2em;
}
.hero-rule {
  width: 130px; height: 1px; margin: 1.3rem auto 0;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}

/* ---------------------------------------------------------------- Bausteine */

.card {
  background: var(--surface);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2rem 1.35rem;
  box-shadow: var(--shadow);
  margin-bottom: 1.15rem;
}
.card-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: .75rem; margin-bottom: .9rem; flex-wrap: wrap;
}
.card-head h2 { margin: 0; }

.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.stat {
  background: var(--surface);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .95rem 1.1rem;
}
.stat .label {
  font-family: var(--font-display);
  font-size: .7rem; text-transform: uppercase; letter-spacing: .2em;
  color: var(--faint);
}
.stat .value {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 500; margin-top: .2rem;
  font-variant-numeric: tabular-nums; color: #e7f0fa;
}
.stat .hint { font-size: .78rem; color: var(--muted); }

.empty {
  border: 1px dashed var(--border-strong); border-radius: var(--radius);
  padding: 2.4rem 1rem; text-align: center; color: var(--muted);
  background: rgba(12, 24, 38, .4);
}
.empty p { margin: 0 0 .9rem; }

/* ---------------------------------------------------------------- Knöpfe */

.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .95rem; border-radius: 9px;
  border: 1px solid var(--border-strong);
  background: rgba(31, 50, 73, .5); color: var(--text);
  cursor: pointer; font: inherit; font-size: .87rem;
  letter-spacing: .06em; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { background: rgba(44, 70, 100, .6); border-color: var(--accent); color: #fff; }
.btn-primary {
  background: linear-gradient(180deg, var(--accent-soft), var(--accent));
  border-color: transparent; color: #052540; font-weight: 600;
  box-shadow: 0 0 20px rgba(74, 168, 240, .25);
}
.btn-primary:hover { background: linear-gradient(180deg, #b3dcff, var(--accent-soft)); color: #052540; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--surface-2); border-color: transparent; color: var(--text); }
.btn-danger { color: var(--err); border-color: rgba(229, 138, 138, .3); background: transparent; }
.btn-danger:hover { background: var(--err-bg); border-color: var(--err); color: var(--err); }
.btn-sm { padding: .3rem .65rem; font-size: .8rem; }

/* ---------------------------------------------------------------- Formulare */

form .field { margin-bottom: .95rem; }
label {
  display: block; font-size: .72rem; color: var(--faint);
  text-transform: uppercase; letter-spacing: .16em; margin-bottom: .3rem;
}
input[type=text], input[type=password], input[type=number], input[type=date],
input[type=datetime-local], input[type=email], input[type=search], input[type=file],
select, textarea {
  width: 100%; padding: .55rem .7rem; font: inherit; font-size: .93rem;
  color: var(--text); background: rgba(8, 18, 30, .6);
  border: 1px solid var(--border); border-radius: 9px;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(74, 168, 240, .18);
}
input[type=file] { padding: .4rem .5rem; font-size: .85rem; color: var(--muted); }
input[type=checkbox] { width: auto; accent-color: var(--accent); }
textarea { min-height: 7rem; resize: vertical; line-height: 1.55; }
.field-row { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); }
.form-actions { display: flex; gap: .6rem; align-items: center; margin-top: 1.1rem; flex-wrap: wrap; }
.hint { font-size: .78rem; color: var(--faint); margin-top: .3rem; }

fieldset {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.15rem 1.35rem; margin: 0 0 1.15rem;
  background: var(--surface); backdrop-filter: blur(12px);
}
legend {
  padding: 0 .5rem; font-family: var(--font-display);
  font-size: .78rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .22em;
}

.filterbar { display: flex; gap: .7rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1.1rem; }
.filterbar .field { margin: 0; }
.filterbar input[type=search] { min-width: 250px; }

/* ---------------------------------------------------------------- Tabellen */

.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .91rem; }
table.data th, table.data td {
  padding: .6rem .65rem; border-bottom: 1px solid var(--border);
  text-align: left; vertical-align: top;
}
table.data th {
  font-family: var(--font-display); font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em; color: var(--faint);
}
table.data tbody tr:hover { background: rgba(44, 70, 100, .25); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data a { text-decoration: none; color: var(--text); font-weight: 550; }
table.data a:hover { color: var(--accent-soft); }
table.data tbody tr:last-child td { border-bottom: none; }

/* ---------------------------------------------------------------- Abzeichen */

.badge {
  display: inline-block; padding: .14rem .6rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; white-space: nowrap;
  border: 1px solid var(--border); background: rgba(31, 50, 73, .5); color: var(--muted);
}
.badge-ansatz     { background: var(--accent-bg); color: var(--accent-soft); border-color: rgba(74, 168, 240, .38); }
.badge-gaerung    { background: var(--accent-bg); color: var(--accent-soft); border-color: rgba(74, 168, 240, .38); }
.badge-klaerung   { background: var(--gold-bg);   color: var(--gold);        border-color: rgba(217, 176, 106, .35); }
.badge-reifung    { background: var(--gold-bg);   color: var(--gold);        border-color: rgba(217, 176, 106, .35); }
.badge-abgefuellt { background: rgba(170, 150, 245, .12); color: #b9a6f7; border-color: rgba(170, 150, 245, .32); }
.badge-fertig     { background: var(--ok-bg);     color: var(--ok);          border-color: rgba(95, 211, 159, .35); }
.badge-verworfen  { background: var(--err-bg);    color: var(--err);         border-color: rgba(229, 138, 138, .3); }
.badge-cat { font-weight: 500; font-size: .68rem; letter-spacing: .1em; }

/* ---------------------------------------------------------------- Meldungen */

.flash {
  padding: .75rem 1.05rem; border-radius: 10px; margin-bottom: 1rem;
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: .9rem; backdrop-filter: blur(10px);
}
.flash-ok    { background: var(--ok-bg);   border-color: rgba(95, 211, 159, .35); color: var(--ok); }
.flash-warn  { background: var(--warn-bg); border-color: rgba(217, 176, 106, .35); color: var(--warn); }
.flash-error { background: var(--err-bg);  border-color: rgba(229, 138, 138, .35); color: var(--err); }
.flash a { color: inherit; }
.flash code { font-size: .88em; }

/* ---------------------------------------------------------------- Anmeldung */

.login-shell { min-height: 76vh; display: grid; place-items: center; padding: 2.5rem 0; }
.login-card { width: min(400px, 100%); padding: 2rem 1.9rem; }
.login-card .brand { justify-content: center; font-size: 1.3rem; letter-spacing: .36em; margin-bottom: .5rem; }
.login-card .tagline {
  text-align: center; color: var(--faint); font-size: .76rem;
  text-transform: uppercase; letter-spacing: .24em; margin: 0 0 1.7rem;
}

.setup-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.setup-steps li {
  counter-increment: step; position: relative;
  padding: 0 0 1.5rem 2.6rem; border-left: 1px solid var(--border);
  margin-left: .6rem;
}
.setup-steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.setup-steps li::before {
  content: counter(step);
  position: absolute; left: -13px; top: 0;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-solid); border: 1px solid var(--border-strong);
  font-size: .78rem; color: var(--muted);
}
.setup-steps li.is-current::before {
  border-color: var(--accent); color: var(--accent-soft);
  box-shadow: 0 0 14px rgba(74, 168, 240, .32);
}
.setup-steps li.is-done::before { content: "\2713"; border-color: var(--ok); color: var(--ok); }
.setup-steps strong { display: block; margin-bottom: .2rem; color: #e7f0fa; }
.setup-steps p { margin: 0 0 .7rem; }

/* ---------------------------------------------------------------- Zeitstrahl */

.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 7px; top: .5rem; bottom: .5rem; width: 1px;
  background: linear-gradient(180deg, transparent, var(--border-strong) 12%, var(--border-strong) 88%, transparent);
}
.timeline li { position: relative; padding: 0 0 1.3rem 2.1rem; }
.timeline li::before {
  content: ""; position: absolute; left: 1px; top: .45rem;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--accent);
}
.timeline li.type-messung::before { background: var(--accent); box-shadow: 0 0 12px rgba(74, 168, 240, .5); }
.timeline li.type-aktion::before  { border-color: var(--gold); }
.entry-head { display: flex; gap: .65rem; align-items: baseline; flex-wrap: wrap; }
.entry-head time { font-size: .78rem; color: var(--faint); font-variant-numeric: tabular-nums; letter-spacing: .05em; }
.entry-title { font-weight: 600; color: #e7f0fa; }
.entry-body { margin: .4rem 0 0; color: var(--muted); }
.entry-values { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .45rem; }
.chip {
  background: rgba(31, 50, 73, .55); border: 1px solid var(--border);
  border-radius: 7px; padding: .12rem .55rem;
  font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--text);
}
.chip.muted { color: var(--faint); }
/* Fuer Chargen, von denen seit Wochen nichts mehr protokolliert wurde. */
.chip.warn { background: var(--warn-bg); border-color: rgba(217, 176, 106, .35); color: var(--warn); }
.entry-actions { display: flex; gap: .35rem; margin-top: .5rem; }

/* ---------------------------------------------------------------- Diagramm */

.chart { width: 100%; height: auto; display: block; }
.chart .gridline { stroke: var(--border); stroke-width: 1; }
.chart .tick, .chart .axis-label { fill: var(--faint); font-size: 11px; font-family: var(--font-body); }
.chart .line-sg {
  fill: none; stroke: var(--accent); stroke-width: 2.2;
  stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(74, 168, 240, .45));
}
.chart .line-temp { fill: none; stroke: var(--gold); stroke-width: 1.3; stroke-dasharray: 4 3; opacity: .75; }
.chart .dot { fill: var(--accent); stroke: var(--bg); stroke-width: 1.5; }
.legend {
  display: flex; gap: 1.2rem; font-size: .74rem; color: var(--muted);
  margin-top: .6rem; text-transform: uppercase; letter-spacing: .14em;
}
.legend span::before { content: "\2014"; margin-right: .35rem; font-weight: 700; }
.legend .l-sg::before { color: var(--accent); }
.legend .l-temp::before { color: var(--gold); }

/* ---------------------------------------------------------------- Zutatenzeilen */

.ing-row, .step-row {
  display: grid; gap: .5rem; align-items: start; margin-bottom: .5rem;
  grid-template-columns: 125px 1fr 80px 72px 85px 1fr 34px;
}
.step-row { grid-template-columns: 1fr 2fr 36px; }
.row-del {
  border: 1px solid var(--border); background: rgba(8, 18, 30, .6); color: var(--faint);
  border-radius: 8px; cursor: pointer; height: 40px; font-size: 1.1rem; line-height: 1;
}
.row-del:hover { background: var(--err-bg); color: var(--err); border-color: rgba(229, 138, 138, .35); }
.ing-head {
  display: grid; gap: .5rem; grid-template-columns: 125px 1fr 80px 72px 85px 1fr 34px;
  font-size: .68rem; color: var(--faint); text-transform: uppercase;
  letter-spacing: .16em; margin-bottom: .4rem;
}
@media (max-width: 760px) {
  .ing-row, .ing-head, .step-row { grid-template-columns: 1fr 1fr; }
  .ing-head { display: none; }
}

/* ---------------------------------------------------------------- Bilder */

.gallery { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); }
.gallery figure { margin: 0; }
.gallery img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface-solid); display: block;
}
.gallery img:hover { border-color: var(--accent); }
.gallery figcaption {
  font-size: .76rem; color: var(--faint); margin-top: .3rem;
  display: flex; justify-content: space-between; gap: .4rem; align-items: center;
}

/* ---------------------------------------------------------------- Kennzahlen */

dl.kv { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.1rem; margin: 0; font-size: .92rem; }
dl.kv dt { color: var(--faint); }
dl.kv dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--text); }

ol.steps { padding-left: 1.2rem; color: var(--text); }
ol.steps li::marker { color: var(--accent); }

/* ---------------------------------------------------------------- Druck */

@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  body::before, body::after { display: none; }
  .topbar, .footer, .page-actions, .btn, .entry-actions, form.editable,
  .hero-rule, .stars, .forest, .crow { display: none !important; }
  .card, .stat, fieldset {
    background: #fff; backdrop-filter: none; box-shadow: none;
    border-color: #ccc; break-inside: avoid;
  }
  h1, h2, h3, .stat .value, .entry-title, .hero-title { color: #000; }
  h2, table.data th, .stat .label { color: #444; }
  .muted, .hint, .small, .entry-body { color: #555; }
  .wrap { width: 100%; }
  a { color: #000; text-decoration: none; }
  .chart .line-sg { filter: none; stroke: #333; }
  .chart .dot { fill: #333; stroke: #fff; }
  .chart .tick, .chart .axis-label { fill: #555; }
  .badge { border-color: #999; color: #333; background: none; }
}