/* =========================================================================
   feglager.dyncoy.com – Stylesheet
   Reihenfolge: :root → Reset → Basis/Typo → Layout → Komponenten →
                Utilities → Media Queries → reduced-motion → print
   ========================================================================= */

:root {
  color-scheme: light;

  /* ---------- Blau-Skala (Rohpalette) ---------- */
  --blau-50:  #F2F7FD;
  --blau-100: #E3EDFA;
  --blau-200: #C9DDF5;
  --blau-300: #9CC2EC;
  --blau-400: #5C86BC;
  --blau-500: #2E7AC9;
  --blau-600: #1B5FA8;
  --blau-700: #134A85;
  --blau-800: #0F3A69;
  --blau-900: #0B2745;
  --blau-950: #071A2F;

  /* ---------- Rollen-Tokens ---------- */
  --bg:              var(--blau-50);
  --bg-tief:         var(--blau-950);
  --flaeche:         #FFFFFF;
  --flaeche-leise:   var(--blau-100);
  --flaeche-leise-2: #DDE7F4;
  --flaeche-dunkel:  var(--blau-900);
  --flaeche-dunkel-2:var(--blau-700);

  --text:              var(--blau-900);
  --text-leise:        #4F6684;
  --text-invers:       #FFFFFF;
  --text-invers-leise: #A9C4E4;
  --text-deaktiviert:  #6B7F99;

  --akzent:       var(--blau-600);
  --akzent-hover: var(--blau-700);
  --akzent-aktiv: var(--blau-800);
  --akzent-leise: rgba(27, 95, 168, 0.10);
  --akzent-ring:  rgba(27, 95, 168, 0.20);

  --rand:       var(--blau-200);   /* nur dekorativ: Kartenkante, Trennlinie */
  --rand-stark: var(--blau-400);   /* Kanten interaktiver Elemente (>= 3:1) */
  --rand-fokus: var(--blau-900);

  --erfolg:          #0F6E52;
  --erfolg-flaeche:  #E2F4EC;
  --erfolg-rand:     #A8DCC7;
  --erfolg-flaeche-2:#D6EEE3;
  --fehler:          #B32338;
  --fehler-flaeche:  #FBE7EA;
  --fehler-rand:     #F0BCC5;
  --fehler-aktiv:    #8E1B2C;
  --hinweis:         #7A5300;
  --hinweis-flaeche: #FFF3DA;
  --hinweis-rand:    #EBD3A0;

  /* ---------- Radien ---------- */
  --r-xs:   6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-2xl: 36px;
  --r-3xl: 48px;
  --r-pill: 999px;

  /* ---------- Abstaende ---------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  /* ---------- Layout ---------- */
  --breite-inhalt: 68rem;
  --breite-schmal: 26rem;
  --breite-text:   38rem;
  --rand-seite:    var(--s-4);
  --rand-seite-lg: var(--s-6);
  --header-hoehe:  4rem;

  /* ---------- Typografie ---------- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               "Noto Sans", Arial, sans-serif;
  --font-zahl: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;

  --fs-200: 0.75rem;
  --fs-300: 0.8125rem;
  --fs-400: 1rem;
  --fs-500: 1.0625rem;
  --fs-600: clamp(1.1875rem, 1.10rem + 0.45vw, 1.375rem);
  --fs-700: clamp(1.5rem,    1.32rem + 0.90vw, 2rem);
  --fs-800: clamp(1.875rem,  1.45rem + 2.10vw, 3rem);

  --lh-eng:    1.15;
  --lh-normal: 1.35;
  --lh-lesen:  1.6;

  --fw-normal: 400;
  --fw-mittel: 500;
  --fw-halb:   600;
  --fw-fett:   700;

  --ls-eng:  -0.02em;
  --ls-weit:  0.06em;

  /* ---------- Schatten ---------- */
  --schatten-1: 0 1px 2px rgba(11,39,69,0.05), 0 2px 8px rgba(11,39,69,0.06);
  --schatten-2: 0 2px 4px rgba(11,39,69,0.05), 0 10px 26px rgba(11,39,69,0.10);
  --schatten-3: 0 4px 8px rgba(11,39,69,0.06), 0 20px 48px rgba(11,39,69,0.16);
  --schatten-dunkel: 0 18px 44px rgba(7,26,47,0.28);
  /* Gradient-Endpunkt braucht dieselbe Farbe mit Alpha 0 (Safari-Premultiply) */
  --flaeche-0:       rgba(255,255,255,0);
  --scroll-schatten: rgba(11,39,69,0.16);

  /* ---------- Bewegung ---------- */
  --t-schnell: 120ms;
  --t-normal:  200ms;
  --t-langsam: 320ms;
  --ease:      cubic-bezier(0.2, 0.7, 0.3, 1);

  /* ---------- Fokus ---------- */
  --fokus-farbe:   var(--rand-fokus);
  --fokus-breite:  3px;
  --fokus-abstand: 2px;

  /* ---------- Z-Index ---------- */
  --z-deko: 0;
  --z-inhalt: 1;
  --z-header: 50;
  --z-overlay: 100;
}

/* Auf dunklen Panels kippen Fokus- und Randfarben mit. */
.auf-dunkel {
  --text: var(--text-invers);
  --text-leise: var(--text-invers-leise);
  --fokus-farbe: #FFFFFF;
  --rand: rgba(255,255,255,0.22);
  --rand-stark: rgba(255,255,255,0.55);
  --flaeche-leise: rgba(255,255,255,0.10);
  --flaeche-leise-2: rgba(255,255,255,0.16);
}

/* ============================== Reset ================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg-tief);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-400);
  line-height: var(--lh-lesen);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

h1 { font-size: var(--fs-800); line-height: var(--lh-eng);    letter-spacing: var(--ls-eng); font-weight: var(--fw-fett); text-wrap: balance; }
h2 { font-size: var(--fs-700); line-height: var(--lh-eng);    letter-spacing: var(--ls-eng); font-weight: var(--fw-fett); text-wrap: balance; }
h3 { font-size: var(--fs-600); line-height: var(--lh-normal); font-weight: var(--fw-halb); }

p { max-width: var(--breite-text); }

.lead { font-size: var(--fs-500); color: var(--text-leise); }
.meta { font-size: var(--fs-300); color: var(--text-leise); }
.overline {
  font-size: var(--fs-200); font-weight: var(--fw-halb);
  letter-spacing: var(--ls-weit); text-transform: uppercase;
  color: var(--text-leise);
}
.zahl { font-family: var(--font-zahl); font-variant-numeric: tabular-nums; }

a { color: var(--akzent); text-underline-offset: 0.2em; border-radius: var(--r-xs); }
a:hover { color: var(--akzent-hover); }

/* ============================== Layout ================================= */

.huelle {
  width: 100%;
  max-width: var(--breite-inhalt);
  margin-inline: auto;
  padding-inline: var(--rand-seite);
}
.haupt { flex: 1 0 auto; padding-block: 0 var(--s-8); }
.stapel > * + * { margin-top: var(--s-5); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--s-4); top: var(--s-4);
  z-index: var(--z-overlay);
  transform: translateY(-200%);
  background: var(--flaeche); color: var(--akzent);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  box-shadow: var(--schatten-2);
  font-weight: var(--fw-halb); text-decoration: none;
  transition: transform var(--t-normal) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ============================== Fokus ================================== */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--fokus-breite) solid var(--fokus-farbe);
  outline-offset: var(--fokus-abstand);
}
:where(a, button, input, select, textarea):focus:not(:focus-visible) { outline: none; }

/* Sprungziele nicht unter der schwebenden Kopfleiste parken */
[id] { scroll-margin-top: calc(var(--header-hoehe) + var(--s-5)); }

/* ============================== Button ================================= */

.btn {
  --btn-bg: var(--akzent);
  --btn-text: var(--text-invers);
  --btn-rand: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 2.75rem;
  padding: var(--s-3) var(--s-5);
  border: 2px solid var(--btn-rand);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-text);
  font-size: var(--fs-400);
  font-weight: var(--fw-halb);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--t-schnell) var(--ease),
    border-color     var(--t-schnell) var(--ease),
    box-shadow       var(--t-normal)  var(--ease),
    transform        var(--t-schnell) var(--ease);
}

.btn:hover  { box-shadow: var(--schatten-2); }
.btn:active { transform: translateY(1px); box-shadow: var(--schatten-1); }
.btn[aria-disabled="true"],
.btn:disabled {
  --btn-bg: var(--flaeche-leise-2);
  --btn-text: var(--text-deaktiviert);
  --btn-rand: transparent;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Hoehere Spezifitaet als die Varianten-Hovers (0,3,0 vs 0,2,0):
   ein deaktivierter Button darf beim Ueberfahren nicht wieder aktiv aussehen. */
.btn:disabled:hover,
.btn[aria-disabled="true"]:hover {
  --btn-bg: var(--flaeche-leise-2);
  --btn-text: var(--text-deaktiviert);
  --btn-rand: transparent;
  box-shadow: none;
}

.btn--primaer:hover  { --btn-bg: var(--akzent-hover); }
.btn--primaer:active { --btn-bg: var(--akzent-aktiv); }

.btn--sekundaer {
  --btn-bg: var(--flaeche);
  --btn-text: var(--akzent);
  --btn-rand: var(--rand-stark);
}
.btn--sekundaer:hover  { --btn-bg: var(--blau-50);  --btn-rand: var(--akzent); }
.btn--sekundaer:active { --btn-bg: var(--blau-100); --btn-text: var(--akzent-aktiv); }

.btn--geist {
  --btn-bg: transparent;
  --btn-text: var(--akzent);
  --btn-rand: transparent;
  padding-inline: var(--s-4);
}
.btn--geist:hover  { --btn-bg: var(--akzent-leise); box-shadow: none; }
.btn--geist:active { --btn-bg: var(--blau-200); }

.btn--gefahr {
  --btn-bg: transparent;
  --btn-text: var(--fehler);
  --btn-rand: var(--fehler-rand);
}
.btn--gefahr:hover  { --btn-bg: var(--fehler); --btn-text: var(--text-invers); --btn-rand: var(--fehler); }
.btn--gefahr:active { --btn-bg: var(--fehler-aktiv); --btn-rand: var(--fehler-aktiv); }

.btn--gross { min-height: 3.25rem; padding: var(--s-4) var(--s-7); font-size: var(--fs-500); }
.btn--klein { min-height: 2.25rem; padding: var(--s-2) var(--s-4); font-size: var(--fs-300); }
.btn--voll  { width: 100%; }

.btn[data-laedt="true"] { pointer-events: none; color: transparent; position: relative; }
.btn[data-laedt="true"]::after {
  content: "";
  position: absolute; inset: 50% auto auto 50%;
  width: 1.125rem; height: 1.125rem;
  margin: -0.5625rem 0 0 -0.5625rem;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #FFFFFF;
  border-radius: var(--r-pill);
  animation: dreh 700ms linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }

.btn svg { width: 1.125rem; height: 1.125rem; flex: none; }

/* Auf dunklem Grund: sekundaerer Button wird transparent-weiss */
.auf-dunkel .btn--sekundaer {
  --btn-bg: rgba(255,255,255,0.08);
  --btn-text: var(--text-invers);
  --btn-rand: rgba(255,255,255,0.55);
}
.auf-dunkel .btn--sekundaer:hover  { --btn-bg: rgba(255,255,255,0.18); --btn-rand: #FFFFFF; }
.auf-dunkel .btn--sekundaer:active { --btn-bg: rgba(255,255,255,0.26); }

/* ============================== Karte ================================== */

.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-xl);
  box-shadow: var(--schatten-1);
  padding: var(--s-5);
}
.karte--gross { border-radius: var(--r-2xl); padding: var(--s-6); box-shadow: var(--schatten-2); }
.karte--flach { box-shadow: none; }
.karte__kopf  { display: flex; align-items: flex-start; justify-content: space-between;
                gap: var(--s-4); margin-bottom: var(--s-4); flex-wrap: wrap; }
.karte__titel { font-size: var(--fs-600); font-weight: var(--fw-halb); }
.karte__fuss  { margin-top: var(--s-5); padding-top: var(--s-4);
                border-top: 1px solid var(--rand);
                display: flex; flex-wrap: wrap; gap: var(--s-3); }

.plaettchen {
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  border-radius: var(--r-pill);
  background: var(--flaeche-leise);
  color: var(--akzent);
  flex: none;
}
.plaettchen--gross  { width: 4.5rem; height: 4.5rem; }
.plaettchen--erfolg { background: var(--erfolg-flaeche); color: var(--erfolg); }

/* Login-Karte */
.karte--login {
  width: 100%;
  max-width: var(--breite-schmal);
  margin-inline: auto;
  border-radius: var(--r-2xl);
  box-shadow: var(--schatten-3);
  padding: var(--s-6);
  text-align: center;
}
.karte--login .feld { text-align: left; }
.mitte-schirm {
  flex: 1 0 auto;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: var(--s-6) var(--s-8);
}

/* ============================== Hero =================================== */

.hero-block { position: relative; margin-bottom: var(--s-7); }

.hero {
  position: relative;
  overflow: hidden;
  padding: var(--s-7) var(--s-5) calc(var(--s-7) + 3.5rem);
  border-radius: var(--r-3xl);
  background: linear-gradient(152deg, var(--flaeche-dunkel-2) 0%, var(--flaeche-dunkel) 68%);
  box-shadow: var(--schatten-dunkel);
  color: var(--text-invers);
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute; z-index: -1;
  top: -30%; right: -18%;
  width: 34rem; aspect-ratio: 1;
  border-radius: var(--r-pill);
  background: radial-gradient(circle at 35% 35%, rgba(92,134,188,0.55), rgba(92,134,188,0) 68%);
  pointer-events: none;
}
.hero__inhalt { max-width: var(--breite-text); }
.hero__aktionen { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
/* Steht die Karte nicht mehr darunter, entfaellt der Platz fuer die Ueberlappung. */
.hero--allein { padding-bottom: var(--s-7); margin-bottom: var(--s-7); }
.hero .overline { color: var(--text-invers-leise); }
.hero .lead     { color: var(--text-invers-leise); margin-top: var(--s-4); }

.hero-block .plan-karte,
.hero-block .zugang-karte,
.hero-block .leer {
  margin-inline: var(--s-5);     /* buendig mit dem Hero-Innenabstand */
  margin-top: -3.5rem;
  position: relative; z-index: var(--z-inhalt);
}

/* ============================== Tabs =================================== */
/* Navigations-Links, KEIN ARIA-Tab-Widget: es gibt kein Panel im selben Dokument,
   jeder Tab ist eine eigene URL (?tab=...). Aktiv = aria-current="page".
   Verboten waeren hier role="tablist|tab|tabpanel", aria-selected, aria-controls. */

.tabs {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-pill);
  box-shadow: var(--schatten-1);
  margin-bottom: var(--s-6);
}

/* Die Spur traegt das Padding, NICHT .tabs: overflow clippt sonst den
   Fokus-Ring (3px Breite + 2px Offset = 5px Platzbedarf). */
.tabs__spur {
  display: flex;
  gap: var(--s-1);
  padding: var(--s-2);
  border-radius: var(--r-pill);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: var(--s-5);
  scrollbar-width: none;

  /* Scroll-Schatten rein in CSS: die Deckgradienten scrollen mit (local),
     die Schatten stehen fest (scroll) - sie erscheinen nur, wenn wirklich
     etwas ausserhalb liegt. */
  background:
    linear-gradient(to right, var(--flaeche), var(--flaeche-0)) left center,
    linear-gradient(to left,  var(--flaeche), var(--flaeche-0)) right center,
    radial-gradient(farthest-side at 0    50%, var(--scroll-schatten), transparent) left center,
    radial-gradient(farthest-side at 100% 50%, var(--scroll-schatten), transparent) right center;
  background-repeat: no-repeat;
  background-size: 2.5rem 100%, 2.5rem 100%, 0.875rem 100%, 0.875rem 100%;
  background-attachment: local, local, scroll, scroll;
}
.tabs__spur::-webkit-scrollbar { height: 0; }

.tabs__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  color: var(--text-leise);
  font-size: var(--fs-400);
  font-weight: var(--fw-mittel);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  flex: none;
  transition: background-color var(--t-schnell) var(--ease),
              color            var(--t-schnell) var(--ease);
}
.tabs__link:hover  { background: var(--akzent-leise); color: var(--akzent-hover); }
.tabs__link:active { background: var(--blau-200); }

.tabs__link[aria-current="page"] {
  background: var(--akzent);
  color: var(--text-invers);
  font-weight: var(--fw-fett);         /* zweiter, farbunabhaengiger Traeger */
}
.tabs__link[aria-current="page"]:hover { background: var(--akzent-hover); color: var(--text-invers); }

.kopf--eng { margin-bottom: var(--s-4); }

/* Aufklappbare Restliste (Archiv) */
.mehr__knopf {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 2.75rem; padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  color: var(--akzent); font-weight: var(--fw-halb);
  cursor: pointer; list-style: none;
}
.mehr__knopf::-webkit-details-marker { display: none; }
.mehr__knopf::after { content: "\25BE"; transition: transform var(--t-schnell) var(--ease); }
.mehr[open] .mehr__knopf::after { transform: rotate(180deg); }
.mehr__knopf:hover { background: var(--akzent-leise); }

/* Einmalig angezeigtes Passwort */
.geheimnis {
  display: inline-block;
  margin: var(--s-2) 0;
  padding: var(--s-2) var(--s-3);
  background: var(--flaeche);
  border: 1px solid var(--erfolg-rand);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--font-zahl);
  font-size: var(--fs-500);
  letter-spacing: 0.04em;
  user-select: all;
}

/* Begruendung fuer gesperrte Zeilenaktionen - sichtbar UND per aria-describedby */
.zeilen-grund { display: block; margin-top: var(--s-2); font-size: var(--fs-300); color: var(--text-leise); }

/* ============================== Zeitleiste ============================= */
/* Struktur: section.tag  >  h2.tagesbalken  +  ol.punkte > li.punkt
   Der Tagesbalken ist blau (Vorgabe) und bleibt beim Scrollen stehen,
   damit man auf dem Handy nie raet, zu welchem Tag eine Zeile gehoert. */

.zeitleiste { margin-top: var(--s-5); }

.tag + .tag { margin-top: var(--s-6); }

.tagesbalken {
  position: sticky;
  top: calc(var(--header-hoehe) + var(--s-4));
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-3);
  margin: 0;
  padding: var(--s-3) var(--s-5);
  background: var(--akzent);
  color: var(--text-invers);
  border-radius: var(--r-pill);
  box-shadow: var(--schatten-1);
  font-size: var(--fs-500);
  font-weight: var(--fw-fett);
  letter-spacing: 0;
  line-height: 1.25;
}
.tagesbalken__titel {
  font-size: var(--fs-300);
  font-weight: var(--fw-mittel);
  color: var(--text-invers);
  opacity: 0.9;
}
.tagesbalken__marke {
  margin-left: auto;
  padding: 0.1rem var(--s-3);
  border-radius: var(--r-pill);
  background: var(--text-invers);
  color: var(--akzent);
  font-size: var(--fs-200);
  font-weight: var(--fw-fett);
  letter-spacing: var(--ls-weit);
  text-transform: uppercase;
}
.tag--vorbei .tagesbalken { background: var(--blau-400); }
.tag--laeuft .tagesbalken { background: var(--flaeche-dunkel); }

.punkte {
  margin: var(--s-3) 0 0;
  padding: 0;
  list-style: none;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-xl);
  overflow: hidden;
}

.punkt {
  display: grid;
  grid-template-columns: 3.75rem 1fr;
  gap: var(--s-3);
  align-items: baseline;
  padding: var(--s-3) var(--s-4);
  border-left: 4px solid transparent;   /* Kategorie-Kante, s. u. */
}
.punkt + .punkt { border-top: 1px solid var(--rand); }

.punkt__zeit {
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-halb);
  color: var(--text-leise);
  white-space: nowrap;
}
.punkt__text { overflow-wrap: anywhere; }

/* „nur MA" ist die einzige Kategorie mit Folgen fuers Handeln – die steht
   als Text da, nicht nur als Farbe. */
.punkt__marke {
  display: inline-block;
  margin-left: var(--s-2);
  padding: 0.05rem var(--s-2);
  border-radius: var(--r-pill);
  background: var(--flaeche-leise);
  color: var(--text-leise);
  font-size: var(--fs-200);
  font-weight: var(--fw-halb);
  letter-spacing: var(--ls-weit);
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: 0.1em;
}

/* Laufender Punkt */
.punkt--jetzt {
  background: var(--akzent-leise);
  scroll-margin-top: calc(var(--header-hoehe) + var(--s-8));
}
.punkt--jetzt .punkt__zeit { color: var(--akzent); }
.punkt--jetzt .punkt__text { font-weight: var(--fw-halb); }

/* Vergangene Tage treten zurueck, bleiben aber lesbar (>= 4.5:1). */
.tag--vorbei .punkte { background: var(--blau-50); }

/* Kategorie-Kanten – reine Verstaerkung, der Text traegt die Bedeutung */
.punkt--programm   { border-left-color: #5F7F45; }
.punkt--input      { border-left-color: #B07C10; }
.punkt--lagerfeuer { border-left-color: var(--fehler); }
.punkt--ma         { border-left-color: var(--akzent); }
.punkt--essen      { border-left-color: #A5714B; }
.punkt--wahl       { border-left-color: #A45A73; }
.punkt--frei       { border-left-color: var(--rand-stark); }

/* Farbmuster in der Kategorienliste des Editors */
.punkt-farbe {
  display: inline-block; width: 0.9rem; height: 0.9rem;
  border-radius: var(--r-xs); vertical-align: -0.1em; margin-right: var(--s-2);
}
.punkt-farbe--programm   { background: #5F7F45; }
.punkt-farbe--input      { background: #B07C10; }
.punkt-farbe--lagerfeuer { background: var(--fehler); }
.punkt-farbe--ma         { background: var(--akzent); }
.punkt-farbe--essen      { background: #A5714B; }
.punkt-farbe--wahl       { background: #A45A73; }
.punkt-farbe--frei       { background: var(--rand-stark); }

@media (min-width: 30rem) {
  .punkt { grid-template-columns: 4.5rem 1fr; padding: var(--s-3) var(--s-5); }
}

/* ============================== Menue (ohne JS) ======================== */

.menu { position: relative; }
.menu__knopf {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 2.75rem; padding: var(--s-2) var(--s-4);
  border: 2px solid var(--rand-stark);
  border-radius: var(--r-pill);
  background: var(--flaeche);
  color: var(--akzent);
  font-weight: var(--fw-halb);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.menu__knopf::-webkit-details-marker { display: none; }
.menu__knopf:hover { background: var(--blau-50); border-color: var(--akzent); }
.menu[open] .menu__knopf { background: var(--akzent); color: var(--text-invers); border-color: var(--akzent); }
.menu__name { max-width: 8rem; overflow: hidden; text-overflow: ellipsis; }

.menu__liste {
  position: absolute; right: 0; top: calc(100% + var(--s-2));
  z-index: var(--z-overlay);
  min-width: 12rem;
  padding: var(--s-2);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-xl);
  box-shadow: var(--schatten-3);
  display: grid; gap: var(--s-1);
}
.menu__eintrag {
  display: block;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-lg);
  color: var(--text);
  text-decoration: none;
  font-weight: var(--fw-mittel);
}
.menu__eintrag:hover { background: var(--flaeche-leise); color: var(--akzent); }
.menu__eintrag--gefahr { color: var(--fehler); }
.menu__eintrag--gefahr:hover { background: var(--fehler-flaeche); color: var(--fehler); }

/* ============================== Editor ================================= */

.eingabe--code {
  font-family: var(--font-zahl);
  font-size: var(--fs-300);
  line-height: 1.7;
  min-height: 20rem;
  border-radius: var(--r-md);
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}
.fehlerliste { margin: var(--s-2) 0 0; padding: 0; list-style: none; font-size: var(--fs-300); }
.fehlerliste li + li { margin-top: var(--s-1); }
.beispiel {
  margin: var(--s-3) 0 0;
  padding: var(--s-4);
  background: var(--flaeche-leise);
  border-radius: var(--r-md);
  font-family: var(--font-zahl);
  font-size: var(--fs-300);
  line-height: 1.6;
  overflow-x: auto;
}
.kategorien { margin: var(--s-4) 0 0; padding: 0; list-style: none; font-size: var(--fs-300); }
.kategorien li + li { margin-top: var(--s-2); }

/* ============================== Rueckfrage ============================= */

.rueckfrage {
  padding: var(--s-4);
  background: var(--flaeche-leise);
  border-radius: var(--r-lg);
}
.rueckfrage--gefahr { background: var(--fehler-flaeche); }
.rueckfrage p { margin-bottom: var(--s-3); max-width: none; }
.rueckfrage .tabelle__aktionen { justify-content: flex-start; margin-top: var(--s-3); }

/* fieldset/legend ohne Browser-Chrom; legend ist absichtlich KEINE Ueberschrift,
   das haelt die h1 -> h2 -> h3-Kette sprungfrei */
.gruppe { border: 0; padding: 0; margin: 0; min-width: 0; }
.gruppe__titel {
  padding: 0; margin-bottom: var(--s-2);
  font-size: var(--fs-200); font-weight: var(--fw-halb);
  letter-spacing: var(--ls-weit); text-transform: uppercase;
  color: var(--text-leise);
}
.gruppe + .gruppe { margin-top: var(--s-6); }

/* ============================== Zugangs-Karte ========================== */

.zugang-karte {
  display: grid;
  gap: var(--s-4);
  justify-items: start;
  background: var(--flaeche);
  border-radius: var(--r-2xl);
  box-shadow: var(--schatten-3);
  padding: var(--s-5);
}
.zugang-karte h2 { font-size: var(--fs-600); }
.zugang-karte .btn { width: 100%; }

@media (min-width: 30rem) {
  .zugang-karte .btn { width: auto; }
}

/* ============================== Plan-Karte ============================= */

.plan-karte {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  background: var(--flaeche);
  border-radius: var(--r-2xl);
  box-shadow: var(--schatten-3);
  padding: var(--s-5);
}
/* Plan-Karte ausserhalb des Hero-Blocks: ohne dunkles Panel wirkt --schatten-3
   schmutzig, und ohne Rand schwimmt Weiss auf fast-Weiss (1.08:1). */
.plan-karte--frei {
  border: 1px solid var(--rand);
  box-shadow: var(--schatten-1);
}
.leer--frei {
  min-height: 15rem;
  box-shadow: none;
  border-color: var(--rand-stark);
}

.plan-karte__vorschau {
  position: relative;
  width: 100%;
  max-width: 13rem;
  aspect-ratio: 210 / 297;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--flaeche-leise);
  border: 1px solid var(--rand-stark);   /* interaktiv: braucht 3:1 */
  flex: none;
  display: grid; place-items: center;
  text-decoration: none;
  color: var(--akzent);
}
.plan-karte__vorschau img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.plan-karte__typ {
  font-size: var(--fs-500); font-weight: var(--fw-fett);
  letter-spacing: var(--ls-weit); color: var(--akzent);
}
.plan-karte__kopf { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
                    margin-bottom: var(--s-3); }
.plan-karte__aktionen { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.plan-karte__aktionen .btn { width: 100%; }
.plan-karte :is(h2, h3) { margin-top: var(--s-2); }

/* ============================== Formular =============================== */

.feld { display: flex; flex-direction: column; gap: var(--s-2); }
.feld + .feld { margin-top: var(--s-5); }

.feld__label { font-size: var(--fs-300); font-weight: var(--fw-halb); color: var(--text); }
.feld__hilfe { font-size: var(--fs-300); color: var(--text-leise); }
.feld__pflicht { color: var(--fehler); margin-left: 0.15em; }

.eingabe {
  width: 100%;
  min-height: 3rem;
  padding: var(--s-3) var(--s-4);
  background: var(--flaeche);
  color: var(--text);
  border: 2px solid var(--rand-stark);
  border-radius: var(--r-lg);
  font-size: var(--fs-400);
  transition: border-color var(--t-schnell) var(--ease),
              box-shadow  var(--t-schnell) var(--ease),
              background-color var(--t-schnell) var(--ease);
}
.eingabe::placeholder { color: var(--text-leise); opacity: 1; }
.eingabe:hover { border-color: var(--akzent); }
.eingabe:focus { outline: none; }
.eingabe:focus-visible {
  border-color: var(--akzent);
  box-shadow: 0 0 0 4px var(--akzent-ring);
  outline: var(--fokus-breite) solid var(--fokus-farbe);
  outline-offset: var(--fokus-abstand);
}
.eingabe:disabled {
  background: var(--flaeche-leise-2);
  border-color: var(--rand);
  color: var(--text-deaktiviert);
  cursor: not-allowed;
}
.eingabe[aria-invalid="true"] { border-color: var(--fehler); }
.eingabe[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 4px rgba(179, 35, 56, 0.18); }

textarea.eingabe { min-height: 7rem; border-radius: var(--r-md); resize: vertical; }

.feld__fehler {
  display: flex; align-items: flex-start; gap: var(--s-2);
  font-size: var(--fs-300); font-weight: var(--fw-mittel);
  color: var(--fehler);
}
.feld__fehler::before { content: "\2715"; font-weight: var(--fw-fett); line-height: 1.5; }

.check { display: flex; align-items: center; gap: var(--s-3); min-height: 2.75rem; cursor: pointer; }
.check input[type="checkbox"],
.check input[type="radio"] {
  width: 1.5rem; height: 1.5rem;
  accent-color: var(--akzent);
  flex: none; cursor: pointer;
}
.check input[type="checkbox"] { border-radius: var(--r-xs); }

.formular__aktionen { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ============================== Dropzone =============================== */

.dropzone {
  position: relative;
  display: grid;
  place-items: center;
  gap: var(--s-3);
  min-height: 12.5rem;
  padding: var(--s-6) var(--s-5);
  text-align: center;
  background: var(--flaeche-leise);
  border: 2px dashed var(--rand-stark);
  border-radius: var(--r-xl);   /* eine Stufe unter der Karte (--r-2xl), sonst matschig */
  color: var(--text-leise);
  cursor: pointer;
  transition: background-color var(--t-normal) var(--ease),
              border-color     var(--t-normal) var(--ease);
}
.dropzone:hover { background: var(--flaeche-leise-2); border-color: var(--akzent); }
.dropzone__eingabe { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dropzone:has(.dropzone__eingabe:focus-visible) {
  outline: var(--fokus-breite) solid var(--fokus-farbe);
  outline-offset: var(--fokus-abstand);
  border-color: var(--akzent);
}
/* Notausgang NUR fuer Browser ohne :has() – sonst klappt der native Datei-Button
   beim Tabben mitten in die Dropzone und schiebt das Layout auseinander. */
@supports not (selector(:has(*))) {
  .dropzone__eingabe:focus-visible { opacity: 1; width: auto; height: auto; position: static; }
}

.dropzone[data-ueber="true"] {
  background: var(--blau-200);
  border-color: var(--akzent);
  border-style: solid;
  color: var(--text);          /* --text-leise waere hier nur 4.25:1 */
}
.dropzone[data-gewaehlt="true"] {
  background: var(--erfolg-flaeche);
  border-color: var(--erfolg);
  border-style: solid;
  color: var(--erfolg);
}
.dropzone[data-gewaehlt="true"] .plaettchen { background: var(--erfolg-flaeche); color: var(--erfolg); }
.dropzone__titel  { font-size: var(--fs-500); font-weight: var(--fw-halb); color: var(--text); }
.dropzone__regeln { font-size: var(--fs-300); }
.dropzone__link   { color: var(--akzent); font-weight: var(--fw-halb); }
.dropzone__gewaehlt { min-height: 1.25rem; font-weight: var(--fw-halb); }

/* ============================== Badge ================================== */

.badge {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 0.25rem var(--s-3);
  border-radius: var(--r-pill);
  background: var(--flaeche-leise);
  color: var(--text);
  border: 1px solid transparent;
  font-size: var(--fs-200);
  font-weight: var(--fw-halb);
  letter-spacing: var(--ls-weit);
  text-transform: uppercase;
  white-space: nowrap;
}
.badge--aktuell { background: var(--erfolg); color: var(--text-invers); }
.badge--archiv  { background: var(--flaeche-leise); color: var(--text-leise); border-color: var(--rand); }
/* Der Text traegt die Bedeutung; Farbe und Glyphe verstaerken nur.
   content: "X" / "" gibt der Glyphe einen leeren Alternativtext.
   Dunkelblau statt Akzentblau: Akzentblau ist im System dem Klickbaren vorbehalten. */
.badge--admin { background: var(--flaeche-dunkel); color: var(--text-invers); }
.badge--admin::before { content: "\25C6" / ""; font-size: 0.75em; }
.badge--mitarbeiter { background: var(--flaeche-leise); color: var(--text); border-color: var(--rand); }
.badge--mitarbeiter::before { content: "\25C7" / ""; font-size: 0.75em; }
.badge--ich { background: var(--akzent-leise); color: var(--akzent);
              text-transform: none; letter-spacing: 0; }
.badge--zaehler { background: var(--akzent-leise); color: var(--akzent);
                  text-transform: none; letter-spacing: 0; }
.badge--aktuell::before { content: "\25CF"; font-size: 0.75em; }
.badge--archiv::before  { content: "\25CB"; font-size: 0.75em; }

/* ============================== Tabelle ================================ */

.tabelle-huelle {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-2xl);
  box-shadow: var(--schatten-1);
  overflow: hidden;
}
.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th {
  text-align: left;
  padding: var(--s-4) var(--s-5);
  background: var(--flaeche-leise);
  color: var(--text);
  font-size: var(--fs-300);
  font-weight: var(--fw-halb);
  letter-spacing: var(--ls-weit);
  text-transform: uppercase;
  white-space: nowrap;
}
.tabelle td { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--rand); vertical-align: middle; }
.tabelle tbody tr { transition: background-color var(--t-schnell) var(--ease); }
.tabelle tbody tr:hover { background: var(--blau-50); }
.tabelle tbody tr[data-aktuell="true"] { background: var(--erfolg-flaeche); }
.tabelle tbody tr[data-aktuell="true"]:hover { background: var(--erfolg-flaeche-2); }
.tabelle__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); justify-content: flex-end; }
.tabelle__primaer   { font-weight: var(--fw-halb); }
.tabelle__sekundaer { font-size: var(--fs-300); color: var(--text-leise); }

.tabelle-leer {
  display: grid; place-items: center; gap: var(--s-3);
  padding: var(--s-8) var(--s-5); text-align: center; color: var(--text-leise);
}

/* ============================== Alert ================================== */

.alert {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border: 1px solid;
  border-radius: var(--r-xl);
  font-size: var(--fs-400);
}
.alert__icon  { flex: none; width: 1.5rem; height: 1.5rem; margin-top: 0.1rem; }
.alert__titel { font-weight: var(--fw-halb); display: block; }
.alert p { margin: 0; max-width: none; }

.alert--erfolg  { background: var(--erfolg-flaeche);  border-color: var(--erfolg-rand);  color: var(--erfolg); }
.alert--fehler  { background: var(--fehler-flaeche);  border-color: var(--fehler-rand);  color: var(--fehler); }
.alert--hinweis { background: var(--hinweis-flaeche); border-color: var(--hinweis-rand); color: var(--hinweis); }
.alert--info    { background: var(--flaeche-leise);   border-color: var(--rand);         color: var(--text); }

/* ============================== Header ================================= */

.kopf {
  position: sticky;
  top: var(--s-3);
  z-index: var(--z-header);
  margin-block: var(--s-3) var(--s-6);
}
.kopf__leiste {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--header-hoehe);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  background: rgba(255,255,255,0.88);
  border: 1px solid var(--rand);
  border-radius: var(--r-pill);
  box-shadow: var(--schatten-2);
}
@supports (backdrop-filter: blur(12px)) {
  .kopf__leiste { backdrop-filter: blur(12px) saturate(140%); }
}
.marke {
  display: inline-flex; align-items: center; gap: var(--s-3);
  color: var(--text); text-decoration: none;
  font-weight: var(--fw-fett); letter-spacing: var(--ls-eng);
  border-radius: var(--r-pill);
  min-width: 0;
}
.marke__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marke__zeichen {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--r-pill);
  background: var(--akzent); color: var(--text-invers);
  font-size: var(--fs-300); font-weight: var(--fw-fett);
  flex: none;
}
.marke__zusatz { color: var(--text-leise); font-weight: var(--fw-mittel); margin-left: var(--s-2); }
.kopf__rechts { display: flex; align-items: center; gap: var(--s-3); }
.kopf__nutzer { font-size: var(--fs-300); color: var(--text-leise); white-space: nowrap; }

/* Login-Siegel */
.siegel {
  display: grid; place-items: center;
  width: 4.5rem; height: 4.5rem;
  margin: 0 auto var(--s-5);
  border-radius: var(--r-pill);
  background: linear-gradient(152deg, var(--flaeche-dunkel-2), var(--flaeche-dunkel));
  color: var(--text-invers);
  font-weight: var(--fw-fett); font-size: var(--fs-500);
  letter-spacing: var(--ls-eng);
  box-shadow: var(--schatten-2);
}

/* ============================== Footer ================================= */

.fuss {
  margin-top: var(--s-8);
  padding: var(--s-6);
  background: var(--flaeche-dunkel);
  border-radius: var(--r-3xl);
  color: var(--text-invers);
}
.fuss__inhalt { display: flex; flex-direction: column; gap: var(--s-4); justify-content: space-between; }
.fuss a { color: var(--text-invers); text-decoration: underline; text-underline-offset: 0.2em; border-radius: var(--r-xs); }
.fuss a:hover { color: var(--text-invers-leise); }
.block { margin-bottom: var(--s-7); }

/* ============================== Info-Karten ============================ */

.karten-raster { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
.info-karte { display: flex; flex-direction: column; gap: var(--s-3); }
.info-karte p { color: var(--text-leise); }

/* ============================== Leerzustand ============================ */

.leer {
  display: grid; place-items: center; gap: var(--s-4);
  min-height: 19rem;
  padding: var(--s-6) var(--s-5);
  text-align: center;
  background: var(--flaeche);
  border: 2px dashed var(--rand-stark);
  border-radius: var(--r-2xl);
  box-shadow: var(--schatten-3);
}
.leer__titel { font-size: var(--fs-600); font-weight: var(--fw-halb); color: var(--text); }
.leer__text  { color: var(--text-leise); max-width: 30rem; margin-inline: auto; }

/* ============================== Utilities ============================== */

.mitte-text { text-align: center; margin-inline: auto; }
.text-links { text-align: left; }
.plaettchen--zentriert { margin: 0 auto var(--s-5); }
.plaettchen--gefahr { background: var(--fehler-flaeche); color: var(--fehler); }
.abstand-oben { margin-top: var(--s-6); }
.klein { font-size: var(--fs-300); }
.inline-form { display: inline; }

/* ============================== Breakpoints ============================ */

@media (max-width: 29.999rem) {
  .marke__zusatz, .kopf__nutzer { display: none; }
  /* Sonst laeuft die Kopfleiste bei 360px ueber – die Wortmarke verlinkt bereits auf / */
  .btn--optional { display: none; }
  .kopf__leiste { padding-left: var(--s-3); }
}

@media (min-width: 30rem) {
  .plan-karte__aktionen .btn { width: auto; }
}

@media (min-width: 48rem) {
  :root { --rand-seite: var(--rand-seite-lg); }
  .karten-raster { grid-template-columns: repeat(2, 1fr); }
  .hero { padding: var(--s-8) var(--s-8) calc(var(--s-8) + 4rem); }
  .hero--allein { padding-bottom: var(--s-8); }
  .hero-block .plan-karte,
  .hero-block .zugang-karte,
  .hero-block .leer { margin-inline: var(--s-8); margin-top: -4rem; }
  .zugang-karte { grid-template-columns: auto 1fr auto; align-items: center;
                  gap: var(--s-5); padding: var(--s-6); }
  .plan-karte { grid-template-columns: auto 1fr; align-items: start; padding: var(--s-6); }
  .plan-karte--frei .plan-karte__vorschau { max-width: 15rem; }
  .fuss__inhalt { flex-direction: row; align-items: center; }
  .feld-reihe { display: grid; grid-template-columns: 1fr auto; gap: var(--s-5); align-items: end; }
  .feld-reihe .feld + .feld { margin-top: 0; }
}

@media (min-width: 64rem) {
  .karten-raster { grid-template-columns: repeat(3, 1fr); }
  .hero__inhalt { max-width: 34rem; }
}

@media (min-width: 80rem) {
  :root { --rand-seite: var(--s-8); }
}

/* Tabelle → Karten */
@media (max-width: 47.999rem) {
  .tabelle-huelle { border: 0; background: none; box-shadow: none; border-radius: 0; }
  .tabelle, .tabelle tbody, .tabelle tr, .tabelle td { display: block; width: 100%; }
  .tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabelle tr {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--r-xl);
    box-shadow: var(--schatten-1);
    padding: var(--s-4);
    margin-bottom: var(--s-4);
  }
  .tabelle td {
    border: 0; padding: var(--s-2) 0;
    display: grid; grid-template-columns: 8rem 1fr; gap: var(--s-3);
    align-items: baseline;
  }
  .tabelle td::before {
    content: attr(data-label);
    font-size: var(--fs-300); font-weight: var(--fw-halb); color: var(--text-leise);
  }
  /* display:none am ::before erzeugt keine Grid-Box – die Aktionen laegen sonst
     in der 8rem breiten Label-Spalte. Deshalb die ganze Zelle als Block. */
  .tabelle td[data-label=""] { display: block; }
  .tabelle__aktionen { justify-content: flex-start; margin-top: var(--s-2); }
}

/* ============================== Bewegung =============================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:active { transform: none; }
  .btn[data-laedt="true"]::after { animation: none; border-top-color: currentColor; }
}

/* ============================== System-Dark ============================ */

body { background: var(--bg); color: var(--text); }
input, select, textarea { background-color: var(--flaeche); color: var(--text); }

@media (prefers-color-scheme: dark) {
  :root { color-scheme: light; }
  input, textarea, select { background-color: var(--flaeche); color: var(--text); }
  ::placeholder { color: var(--text-deaktiviert); opacity: 1; }
}

@media (forced-colors: active) {
  .btn { border: 2px solid ButtonBorder; }
  .tabs { border: 1px solid CanvasText; }
  .tabs__link[aria-current="page"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  :focus-visible, .eingabe:focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
  .badge { border: 1px solid CanvasText; }
  .dropzone { border: 2px dashed CanvasText; }
  .karte, .tabelle-huelle { border: 1px solid CanvasText; }
}

/* ============================== Druck ================================== */

@media print {
  .kopf, .tabs, .skip-link, .fuss, .plan-karte__aktionen, .btn, .menu { display: none !important; }
  .tag { break-inside: avoid; }
  .tagesbalken { position: static; background: none; color: #000; border-bottom: 2px solid #000;
                 border-radius: 0; box-shadow: none; padding-inline: 0; }
  .punkte { border: 0; border-radius: 0; }
  .punkt { border-left: 0; padding-inline: 0; }
  .punkt + .punkt { border-top: 1px solid #ccc; }
  body { background: #FFFFFF; }
  .hero { background: none; color: #000; box-shadow: none; padding: 0; }
  .hero .lead, .hero .overline { color: #000; }
  .plan-karte, .karte { box-shadow: none; border: 1px solid #999; }
}