/* PLENUM — huelle.css (Track HUELLE, Bauplan Nacht 01./02.09.2026, Abschnitt 1.5)
   Eine Navigation fuer alles: Kopfzeile, Tab-Leiste, die beiden Sheets. Diese Datei liegt in
   seite/ und wird von PLENUM (index.html) und von den serverseitigen Bruecken-Seiten
   (bruecke/seite/huelle.mjs, huelleStil()) gemeinsam geladen, damit es genau eine Quelle fuer
   das Aussehen der Navigation gibt.

   Farben ausschliesslich aus tokens.css. Diese Datei setzt selbst keine Hexwerte ausser den
   drei Kennfarben-Token unten, und die sind auf allen vier Flaechen jeder Lesefarbe
   nachgerechnet (Rechenweg im Registereintrag-Entwurf). */

:root {
  /* Kennfarbe der Bruecken-Seiten (Begleiter, Leitstand, Einladung, Einstellungen).
     Dunkelmodus #FFAA5E: grund 9,89 bogen 9,19 einschub 8,17 hoch 7,24, also AAA.
     Lesefarben #5E3000: sepia 9,19/10,19/8,33/7,42, salbei 9,36/10,28/8,47/7,56,
     warmgrau 9,16/10,17/8,28/7,37, ebenfalls AAA auf allen vier Flaechen.
     --kenn-schrift ist die Schrift AUF der Kennfarbe als Flaeche: 9,89 bzw. 10,19. */
  --kenn: #FFAA5E;
  /* Schrift AUF der Kennfarbe: die Grundflaeche der jeweiligen Welt. Dunkel #081324 auf
     #FFAA5E ergibt 9,89, sepia #F4E9D4 auf #5E3000 ergibt 9,19, beides AAA. */
  --kenn-schrift: var(--grund);
  --huelle-tabs-hoehe: 58px;
  --huelle-tabs-raum: calc(var(--huelle-tabs-hoehe) + env(safe-area-inset-bottom));
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) { --kenn: #5E3000; }
}
:root:is([data-theme="sepia"], [data-theme="salbei"], [data-theme="warmgrau"]) { --kenn: #5E3000; }
:root[data-theme="dark"] { --kenn: #FFAA5E; }

/* Jede Seite darf ihre eigene Kennfarbe setzen, indem sie --kenn am body ueberschreibt
   (Leitstand und Einladung: Gruen, Begleiter: Orange). --kenn-schrift folgt automatisch. */

/* ---------- Kopfzeile ---------- */
/* Kopfzeilen-Nachtrag (PLENUM-Nachtbau 02.09.2026, Aufgabe 1): eine Kopfzeile fuer alles.
   PLENUM (seite/index.html) und jede Bruecken-Seite rendern jetzt dasselbe Muster: links
   Wappen + "PLENUM" + Ebene, rechts Sprachumschalter, Lesefarbe-Knopf, Konto. Das Markup kommt
   serverseitig aus huelleLeiste() (huelle.mjs) und clientseitig aus huelle.js, PLENUM bringt
   nur noch das statische Geruest fuer den Fall ohne JavaScript mit. */
.huelle-kopf {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  /* Integration (Befund Track MOBILE): Statusleiste der nativen Huelle, siehe seite/style.css. */
  min-height: calc(56px + env(safe-area-inset-top));
  padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
  background: var(--grund); color: var(--tinte);
  border-bottom: 1px solid var(--linie-hair);
}
/* Die Wortmarke gibt nicht nach (Kopfzeilen-Befund 02.09.2026, angemeldetes Konto bei 390 px):
   sie stand mit "flex: 1 1 auto" und "overflow: hidden" als erste zur Verfuegung, wenn der Platz
   knapp wurde, und wurde zu "PLEN" abgeschnitten. Sichtbar wird das, sobald die Wortmarke im
   Georgia-Fallback rendert statt in Source Serif 4: 78 statt 69 px, also genau in dem Moment,
   in dem eine Aufnahme vor dem Font-Load entsteht. Nachgeben soll stattdessen der Name-Chip. */
.huelle-marke { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; min-height: 44px; flex: 0 0 auto; min-width: 0; }
/* Volt-Wortmarke (Registereintrag-Entwurf volt-logo, PLENUM-Nachtbau 02.09.2026): reines
   Branding ohne eigenen Link, deshalb Teil desselben .huelle-marke-Links wie Wappen und Name.
   Farbe kommt aus --volt-violett-text (Volt-Lila #502379 auf hellem Grund, #CBB2F2 auf Navy,
   siehe tokens.css), dieselbe Kennfarbe wie der Sprachumschalter-Unterstrich weiter unten. */
.huelle-marke__volt { height: 20px; width: auto; display: block; flex: none; color: var(--volt-violett-text); }
.huelle-marke__trenner { width: 1px; height: 18px; background: var(--linie-tragend); flex: none; }
.huelle-marke__wappen { width: 34px; height: 21px; display: block; flex: none; }
.huelle-marke__name { font-family: var(--schrift-serif, Georgia, serif); font-weight: 600; font-size: 19px; letter-spacing: .01em; white-space: nowrap; flex: none; }
.huelle-marke__ebene { font-size: 13px; color: var(--tinte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.huelle-marke__ebene::before { content: "·"; margin-right: 6px; color: var(--linie-tragend); }

.huelle-kopf__ziele { display: flex; align-items: center; gap: 8px; flex: none; }

.huelle-konto { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto; }
.huelle-konto__link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; min-width: 0;
  border: 1px solid var(--linie-tragend); border-radius: var(--r-knopf, 3px);
  color: var(--tinte); text-decoration: none; font-size: 14px; background: transparent;
}
.huelle-konto__link:hover { background: var(--hoch); }
.huelle-konto__avatar { width: 28px; height: 28px; border-radius: 50%; display: block; flex: none; background: var(--einschub); }
/* Kopfzeilen-Nachtrag (PLENUM-Nachtbau 02.09.2026, Aufgabe 2): kein Feld schneidet mehr ab. Der
   Name steht ganz da, bei Bedarf zweizeilig im Chip (13 px, line-height knapp), und die Kopfzeile
   darf dafuer hoeher werden: sie ist ein Flex-Zeile ohne eigenes overflow, waechst also mit dem
   Chip mit. min-width: 0 laesst den Chip unter seine Inhaltsbreite schrumpfen, sonst wuerde der
   Flex-Platz dem Chip nicht zugestanden und die Wortmarke wieder verdraengt. */
.huelle-konto__name {
  max-width: 100%; min-width: 0; font-size: 13px; line-height: 1.25;
  white-space: normal; overflow-wrap: break-word; word-break: break-word;
}

/* Sprachumschalter, umgezogen aus seite/style.css: dieselben zwei Knoepfe (DE/EN) stehen jetzt
   in der Kopfzeile jeder Seite des Ursprungs, nicht nur im Mehr-Sheet. */
.sprachumschalter { display: flex; align-items: center; border: 1px solid var(--linie-hair); border-radius: var(--r-etikett); overflow: hidden; flex: none; }
.sprachumschalter__opt {
  min-width: 44px; min-height: 44px; padding: 0 12px; background: transparent; border: 0;
  border-left: 1px solid var(--linie-tragend);
  font-family: var(--schrift-ubuntu); font-size: calc(14px * var(--textgroesse-skala)); color: var(--tinte-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.sprachumschalter__opt:first-child { border-left: 0; }
.sprachumschalter__opt[aria-pressed="true"] {
  color: var(--tinte); font-weight: 500;
  box-shadow: inset 0 -2px 0 var(--volt-violett-text);
}

/* Lesefarbe-Knopf (Sonne), umgezogen aus seite/style.css: oeffnet auf PLENUM das bestehende
   Ansicht-Sheet, auf den Bruecken-Seiten das schlanke Lesefarbe-Sheet aus huelle.js. */
.ansicht-knopf {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--linie-hair); border-radius: var(--r-etikett);
  color: var(--tinte-2); cursor: pointer; flex: none;
}
.ansicht-knopf svg { width: 20px; height: 20px; }

/* Die Bruecken-Seiten faerben ihren Fliesstext-Link mit der Kennfarbe (.huelle-seite a weiter
   unten). Kopfzeile, Tab-Leiste und Sheets sind Bedienelemente, keine Verweise im Text, und
   behalten deshalb ihre eigene Farbe. Zwei Klassen im Selektor, damit sie gewinnen. */
.huelle-kopf .huelle-marke, .huelle-kopf .huelle-konto__link { color: var(--tinte); }
.huelle-tabs .huelle-tab { color: var(--tinte-2); }
.huelle-tabs .huelle-tab[aria-current] { color: var(--volt-violett-text); }
.huelle-sheet .huelle-sheet__eintrag { color: var(--tinte); }

/* Schmales Handy: Sprachumschalter, Lesefarbe-Knopf und Anmelden-Knopf schrumpfen, damit die
   Wortmarke im Kopf stehen bleibt. */
@media (max-width: 480px) {
  .huelle-konto__link { padding: 0 8px; font-size: 13px; }
  .huelle-konto__name { max-width: 8ch; }
  .huelle-kopf__ziele { gap: 4px; }
  /* Kein Rahmen mehr auf dem Sprachumschalter (Kopfzeilen-Befund 02.09.2026): border-box zaehlt
     den Rahmen sonst zur festen Breite und nimmt den Buchstaben den Platz weg. 40 px ist die
     Untergrenze fuer diese zwei Knoepfe (Breite darf 40 px sein, wenn die Hoehe 44 px bleibt),
     die aktive Sprache bleibt ueber die Unterstreichung (aria-pressed) erkennbar, nicht ueber
     den Rahmen. */
  .sprachumschalter { border: 0; }
  .sprachumschalter__opt { min-width: 40px; padding: 0 4px; border-left: 0; }
  .sprachumschalter__opt:not(:first-child) { box-shadow: inset 1px 0 0 var(--linie-hair); }
}
/* Kopfzeilen-Befund 02.09.2026: bei 390 px reichte der Platz fuer Wappen + "PLENUM" + Ebene +
   Sprache + Lesefarbe + Konto nebeneinander nicht, die Wortmarke brach als "PLENU" ab (gemessen
   mit getBoundingClientRect: unter der Rueckfallschrift Georgia, die vor dem Laden der echten
   Schrift kurz greift, blieben der Wortmarke nur noch gut 1 px Luft). Die Ebene faellt schon ab
   420 px weg, das reicht allein nicht: Wappen und Wortmarke schrumpfen zusaetzlich, der
   Anmelden-Knopf bekommt weniger Innenabstand. Das Wappen traegt das Bayern-Signal weiter,
   PLENUM bleibt immer vollstaendig lesbar, keine Zeile bricht um. */
@media (max-width: 420px) {
  .huelle-marke__ebene { display: none; }
  /* Kopfzeilen-Nachtrag (Registereintrag-Entwurf volt-logo, 02.09.2026): das Volt-Zeichen kam
     dazu und hat den Rand bei 390 px, EN, abgemeldet knapp aufgebraucht (0,8 px zu breit,
     gemessen mit getBoundingClientRect). Der Abstand in der Marke schrumpft hier zusaetzlich
     zu den bestehenden Stufen, damit wieder Luft bleibt. */
  .huelle-marke { gap: 4px; }
  .huelle-marke__volt { height: 17px; }
  .huelle-marke__wappen { width: 28px; height: 17px; }
  .huelle-marke__name { font-size: 16px; }
  .huelle-konto__link { padding: 0 6px; }
  /* 6ch: der Name-Chip ist der Teil, der nachgibt, damit die Wortmarke ganz bleibt. Die Ellipse
     steht in .huelle-konto__name oben, der volle Name steht im title-Attribut und in den
     Einstellungen. */
  .huelle-konto__name { max-width: 6ch; }
}
@media (min-width: 1024px) {
  .huelle-kopf { padding-inline: 48px; }
}

/* ---------- Farbwahl (Lesefarben) ----------
   Umgezogen aus seite/style.css: PLENUMs Ansicht-Sheet UND das Lesefarbe-Sheet der
   Bruecken-Seiten (huelle.js) zeigen dieselben fuenf Kacheln. Drei Spalten, weil bei 390 px
   fuenf Felder nebeneinander weder Namen noch 44-px-Ziele tragen. */
.farbwahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.farbwahl__feld {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  padding: 0; background: transparent; border: 0; cursor: pointer; min-height: 44px;
}
.farbwahl__probe {
  display: flex; align-items: center; justify-content: center; height: 52px;
  border-radius: var(--r-karte); border: 1px solid var(--linie-tragend);
  background: var(--probe-grund, var(--bogen)); color: var(--probe-tinte, var(--tinte));
  font-family: var(--schrift-serif); font-size: 19px; line-height: 1;
}
/* Systemfeld: beide Seiten zeigen, was die Vorgabe bedeutet. */
.farbwahl__feld[data-theme-wert="system"] .farbwahl__probe {
  background: linear-gradient(105deg, #081324 0 50%, #F4E9D4 50% 100%);
  color: transparent; position: relative;
}
.farbwahl__feld[data-theme-wert="system"] .farbwahl__probe::before {
  content: "Aa"; position: absolute; left: 12px; color: #EEF2F8;
}
.farbwahl__feld[data-theme-wert="system"] .farbwahl__probe::after {
  content: "Aa"; position: absolute; right: 12px; color: #2B1D12;
}
.farbwahl__name { font-size: calc(13px * var(--textgroesse-skala)); color: var(--tinte-2); text-align: center; }
.farbwahl__feld[aria-checked="true"] .farbwahl__probe {
  box-shadow: 0 0 0 2px var(--grund), 0 0 0 4px var(--volt-violett-text);
}
.farbwahl__feld[aria-checked="true"] .farbwahl__name { color: var(--tinte); font-weight: 500; }
.farbwahl__feld:focus-visible { outline: none; }
.farbwahl__feld:focus-visible .farbwahl__probe {
  box-shadow: 0 0 0 2px var(--fokus-innen), 0 0 0 5px var(--fokus-aussen);
}

/* ---------- Tab-Leiste ---------- */
.huelle-tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--bogen); border-top: 1px solid var(--linie-hair);
  padding-bottom: env(safe-area-inset-bottom);
}
.huelle-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: var(--huelle-tabs-hoehe); padding: 6px 2px;
  background: transparent; border: 0; margin: 0;
  color: var(--tinte-2); text-decoration: none;
  font-family: var(--schrift-ubuntu, system-ui, sans-serif); font-size: 11px; line-height: 1.2;
  cursor: pointer;
}
.huelle-tab svg { width: 22px; height: 22px; display: block; }
.huelle-tab[aria-current="page"] { color: var(--volt-violett-text); }
.huelle-tab[aria-current="page"] .huelle-tab__text { font-weight: 500; }
.huelle-tab:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--fokus-innen), inset 0 0 0 5px var(--fokus-aussen);
}
.huelle-tab--plus svg { width: 26px; height: 26px; color: var(--kenn); }

/* Raum unter dem Inhalt, damit die feste Leiste nichts verdeckt. */
body.huelle-hat-tabs { padding-bottom: var(--huelle-tabs-raum); }

@media (min-width: 768px) {
  .huelle-tabs {
    position: sticky; top: 0; bottom: auto;
    grid-template-columns: repeat(5, minmax(0, 160px));
    justify-content: start; gap: 4px;
    padding: 4px 12px; border-top: 0; border-bottom: 1px solid var(--linie-hair);
  }
  .huelle-tab { flex-direction: row; gap: 8px; min-height: 48px; font-size: 14px; }
  body.huelle-hat-tabs { padding-bottom: 0; }
}

/* ---------- Sheets (Plus und Mehr) ---------- */
.huelle-sheet {
  border: 0; padding: 0; margin: 0 0 0 auto; max-width: 520px; width: 100%;
  background: var(--bogen); color: var(--tinte);
  border-top: 3px solid var(--volt-violett-text);
  border-radius: var(--r-dialog, 4px) var(--r-dialog, 4px) 0 0;
  position: fixed; left: 0; right: 0; bottom: 0; top: auto;
  max-height: 85dvh; overflow-y: auto;
}
.huelle-sheet::backdrop { background: rgba(0, 0, 0, .55); }
.huelle-sheet__innen { padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); }
.huelle-sheet__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.huelle-sheet__titel { font-family: var(--schrift-ubuntu, system-ui, sans-serif); font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--tinte-2); margin: 0; }
.huelle-sheet__zu {
  min-width: 44px; min-height: 44px; background: transparent; border: 1px solid var(--linie-hair);
  border-radius: var(--r-knopf, 3px); color: var(--tinte); font-size: 16px; cursor: pointer;
}
.huelle-sheet__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.huelle-sheet__eintrag {
  display: flex; flex-direction: column; gap: 2px; justify-content: center;
  min-height: 56px; padding: 10px 12px;
  background: var(--einschub); border: 1px solid var(--linie-hair);
  border-left: 3px solid var(--kenn); border-radius: var(--r-karte, 4px);
  color: var(--tinte); text-decoration: none; font: inherit; text-align: left; cursor: pointer; width: 100%;
}
.huelle-sheet__eintrag:hover { background: var(--hoch); }
.huelle-sheet__name { font-size: 15px; font-weight: 500; }
.huelle-sheet__erklaerung { font-size: 13px; color: var(--tinte-2); }
.huelle-sheet__extern { font-size: 12px; color: var(--tinte-2); }
.huelle-sheet__sprache { display: flex; gap: 8px; margin-top: 14px; }
.huelle-sheet__sprache button {
  min-height: 44px; min-width: 64px; padding: 0 14px; cursor: pointer;
  background: transparent; color: var(--tinte); border: 1px solid var(--linie-tragend);
  border-radius: var(--r-knopf, 3px); font: inherit;
}
.huelle-sheet__sprache button[aria-pressed="true"] { background: var(--volt-violett-text); color: var(--grund); border-color: var(--volt-violett-text); font-weight: 500; }

/* ---------- Grundstil fuer die serverseitigen Bruecken-Seiten ----------
   PLENUM bringt style.css mit, die Bruecken-Seiten nicht. Alles unter .huelle-seite gilt
   deshalb nur dort und laesst PLENUM unberuehrt. */
.huelle-seite {
  margin: 0; background: var(--grund); color: var(--tinte);
  font-family: var(--schrift-ubuntu, "Ubuntu", system-ui, sans-serif);
  font-size: calc(16px * var(--textgroesse-skala, 1)); line-height: 1.55;
  min-height: 100dvh;
}
.huelle-seite * { box-sizing: border-box; }
.huelle-seite a { color: var(--kenn); }
.huelle-seite :focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--fokus-innen), 0 0 0 5px var(--fokus-aussen); border-radius: 2px;
}
.huelle-inhalt { max-width: 720px; margin: 0 auto; padding: 20px 16px 48px; }
.huelle-inhalt h1 { font-family: var(--schrift-serif, Georgia, serif); font-weight: 600; font-size: calc(28px * var(--textgroesse-skala, 1)); line-height: 1.2; margin: 0 0 6px; }
.huelle-inhalt h2 { font-family: var(--schrift-ubuntu, system-ui, sans-serif); font-weight: 500; font-size: calc(20px * var(--textgroesse-skala, 1)); line-height: 1.3; margin: 32px 0 8px; }
.huelle-inhalt h3 { font-size: calc(16px * var(--textgroesse-skala, 1)); margin: 20px 0 6px; }
.huelle-inhalt p { margin: 0 0 14px; max-width: 66ch; }
.huelle-inhalt ul { margin: 0 0 14px; padding-left: 20px; }
.huelle-inhalt li { margin-bottom: 6px; max-width: 66ch; }
.huelle-streifen {
  height: 3px; width: 100%; max-width: 320px; margin: 0 0 18px;
  background-image: repeating-linear-gradient(21deg, var(--volt-violett-flaeche) 0 8px, transparent 8px 16px);
  opacity: .8;
}
.huelle-karte {
  background: var(--bogen); border: 1px solid var(--linie-hair); border-left: 3px solid var(--kenn);
  border-radius: var(--r-karte, 4px); padding: 14px 16px; margin: 0 0 12px;
}
.huelle-karte h2 { margin-top: 0; }
.huelle-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px; cursor: pointer; font: inherit;
  background: var(--kenn); color: var(--kenn-schrift); border: 0;
  border-radius: var(--r-knopf, 3px); font-weight: 500; text-decoration: none;
}
.huelle-knopf--ruhig { background: transparent; color: var(--tinte); border: 1px solid var(--linie-tragend); }
/* Ein Knopf, der ein <a> ist (Anmelden in den Einstellungen, "Zur Startseite" auf der
   Einloese-Seite): ".huelle-seite a" oben ist spezifischer als ".huelle-knopf" und faerbte die
   Schrift sonst in die Kennfarbe, also in die Farbe der eigenen Flaeche. Gefunden 01.09.2026 im
   390-px-Screenshot der Einloese-Seite: der Knopf war ein leerer brauner Block. */
.huelle-seite a.huelle-knopf { color: var(--kenn-schrift); }
.huelle-seite a.huelle-knopf--ruhig { color: var(--tinte); }
.huelle-fuss {
  border-top: 1px solid var(--linie-hair); margin-top: 32px; padding: 16px;
  color: var(--tinte-2); font-size: 13px; text-align: center;
}
/* Zielgroesse WCAG 2.2, 2.5.8: die zwei Fusslinks waren 14 px hoch. Als Block mit Innenabstand
   tragen sie jetzt 44 px, ohne dass die Zeile optisch auseinanderfaellt. */
.huelle-fuss a {
  color: var(--tinte-2); display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 10px;
}
.huelle-fuss p { margin: 0; }
.huelle-nurleser {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.huelle-skip {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--volt-gelb-flaeche); color: var(--volt-gelb-schrift);
  padding: 10px 16px; border-radius: var(--r-etikett, 3px); font-weight: 500; text-decoration: none;
}
.huelle-skip:focus { top: 8px; }

/* Bewegungsregel (Registereintrag 41): die Huelle bewegt von sich aus nichts, hier steht die
   Regel trotzdem, weil die Bruecken-Seiten tokens.css laden und dessen Block nur greift, wenn
   diese Datei nichts Eigenes dagegensetzt. */
@media (prefers-reduced-motion: reduce) {
  .huelle-tabs, .huelle-sheet { transition: none !important; animation: none !important; }
}

/* ---------- Ansicht "Heute" (seite/heute.js) ----------
   Liegt hier statt in style.css, weil huelle.css die eine Datei ist, die Track HUELLE anfasst,
   und weil die Karten nur mit den Token aus tokens.css arbeiten. */
.heute-karte {
  background: var(--bogen); border: 1px solid var(--linie-hair);
  border-left: 3px solid var(--volt-violett-text);
  border-radius: var(--r-karte, 4px);
  padding: var(--karte-innen, 20px); margin-bottom: 16px;
}
.heute-karte--ruhig { border-left-color: var(--linie-tragend); }
.heute-karte__titel {
  font-family: var(--schrift-ubuntu); font-weight: 500;
  font-size: calc(var(--t-h3) * var(--textgroesse-skala)); line-height: var(--t-h3-lh);
  margin: 0 0 6px;
}
.heute-karte__hinweis {
  color: var(--tinte-2); margin: 0 0 12px;
  font-size: calc(var(--t-s) * var(--textgroesse-skala)); line-height: var(--t-s-lh); max-width: 60ch;
}
.heute-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.heute-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding: 10px 12px;
  background: var(--einschub); border: 1px solid var(--linie-hair); border-radius: var(--r-karte, 4px);
  color: var(--tinte); text-decoration: none;
}
.heute-zeile:hover { background: var(--hoch); }
.heute-zeile__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.heute-zeile__name { font-size: calc(var(--t-m) * var(--textgroesse-skala)); }
.heute-zeile__neben { font-size: calc(var(--t-xs) * var(--textgroesse-skala)); color: var(--tinte-2); }
.heute-zeile__knopf {
  flex: none; align-self: center; min-height: 36px; display: inline-flex; align-items: center;
  padding: 0 12px; border: 1px solid var(--volt-violett-text); border-radius: var(--r-knopf, 3px);
  color: var(--volt-violett-text); font-size: calc(var(--t-xs) * var(--textgroesse-skala));
}
.heute-leer { padding: 24px 0 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.heute-luecken { margin-top: 24px; color: var(--tinte-2); font-size: calc(var(--t-s) * var(--textgroesse-skala)); }
.heute-luecken summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.heute-luecken ul { margin: 0 0 0 20px; padding: 0; list-style: disc; }
.heute-luecken li { margin-bottom: 6px; max-width: 66ch; }

/* ---------- Hinweiskarte "Neu hier?" (Aufgabe 3, Kopfzeilen-Nachtrag 02.09.2026) ----------
   Ersetzt die automatisch startende Tour. Steht beim ersten Besuch oben auf Heute, schickt
   entweder zum Begleiter oder startet die Tour, und laesst sich per Tipp schliessen. */
.heute-hinweis { position: relative; padding-right: 44px; }
.heute-hinweis__zu {
  position: absolute; top: 8px; right: 8px; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: var(--r-etikett, 3px);
  color: var(--tinte-2); cursor: pointer; font-size: 15px; line-height: 1;
}
.heute-hinweis__zu::before { content: ""; position: absolute; inset: -4px; min-height: 44px; }
.heute-hinweis__zu:hover { background: var(--hoch); }
.heute-hinweis__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }