/* ═══════════════════════════════════════════════════════════════════════════
   HSS Portal — Struktur und Geometrie.

   Die WERTE (Farben, Schriften, Schriftgroeszen) kommen aus
   `Website Brand Theme` und werden von der Huelle NACH dieser Datei injiziert.
   Was hier steht, sind die Fallbacks (= v1s `_tokens.css`) und die GEOMETRIE:
   Nav-Hoehen, Knopfpolster, Abstandsrhythmus. Die ist v1s gemessene
   Spezifikation (`.claude/plans/hss-portal-app-2026-07-31.md`, Abschnitt 2)
   und bewusst KEINE Redaktions-Einstellung.

   Vier Regeln, die ueberall gelten:
     · EINE Linienstaerke: 2px, volldeckend. Ring per box-shadow, nie border.
     · Keine Transparenzen bei Text, Linien, Rahmen — und keine Schatten.
       (Die Glas-Nav ist die einzige bewusste Ausnahme.)
     · Zustaende sind ein FARBTAUSCH. Geometrie ist modusunabhaengig.
     · Aktionen sehen aus wie Knoepfe, Navigation nicht.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Schriften ───────────────────────────────────────────────────────────── */
/* Selbst gehostet unter /files/hss-fonts/ — dieselben Dateien, die auch das
   bisherige Portal-Theme laedt. `font-display: swap`, damit Text sofort
   lesbar ist und nicht erst nach dem Nachladen erscheint. */
@font-face { font-family: "Satoshi"; src: url("/files/hss-fonts/satoshi-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/files/hss-fonts/satoshi-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/files/hss-fonts/satoshi-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/files/hss-fonts/satoshi-900-normal.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/files/hss-fonts/inter-400-normal-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/files/hss-fonts/inter-500-normal-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/files/hss-fonts/inter-700-normal-latin.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* ── 0) Tokens ───────────────────────────────────────────────────────────── */
:root {
	/* Fallbacks — greifen nur, wenn ein Feld im Brand Theme leer ist. */
	--hss-green: #1C4231;
	--hss-cream: #FCF2E0;
	--hss-lime: #D9EA9A;

	--hss-font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
	--hss-font-display: 'Satoshi', ui-sans-serif, system-ui, sans-serif;
	--hss-font-menu: var(--hss-font-body);
	--hss-font-footer: var(--hss-font-body);
	--hss-weight-body: 500;
	--hss-weight-heading: 900;

	--hss-h1: clamp(2.5rem, 5.5vw, 4.5rem);
	--hss-h1-lh: 1.05;
	--hss-h1-tr: -0.02em;
	--hss-h2: clamp(2rem, 4vw, 3.5rem);
	--hss-h2-lh: 1.1;
	--hss-h2-tr: -0.02em;
	--hss-h3: clamp(1.3rem, 2.5vw, 2rem);
	--hss-h3-lh: 1.2;
	--hss-h3-tr: -0.01em;
	--hss-body: clamp(1rem, 0.9688rem + 0.1563vw, 1.125rem);
	--hss-body-lh: 1.65;
	--hss-small: clamp(0.75rem, 0.7266rem + 0.1172vw, 0.8438rem);
	--hss-menu: 1rem;
	--hss-eyebrow: 0.7rem;
	--hss-footer: var(--hss-body);

	/* Radien + φ-Abstaende (v1s _tokens.css) */
	/* v1 verwendet auf seinen gerenderten Seiten NUR ZWEI Radien: `pill` und
	   32px (rounded-lg). Gemessen 2026-08-07 auf /shop/, /about/, /downloads/,
	   /materials/ — 12px und 20px kamen dort auf keinem sichtbaren Element vor.
	   `md` (20px) bleibt hier nur fuer die zwei Flaechen, die v1 ebenfalls so
	   baut: das mobile Menuepanel (gemessen: 20px) und das Dropdown-Panel.
	   `sm` (12px) wird bewusst NICHT mehr benutzt. */
	--hss-radius-md: 20px;
	--hss-radius-lg: 32px;
	--hss-radius-pill: 50px;
	--hss-space-xs: 0.618rem;
	--hss-space-sm: 1rem;
	--hss-space-md: 1.618rem;
	--hss-space-lg: 2.618rem;
	--hss-space-xl: 4.236rem;
	--hss-space-2xl: 6.854rem;

	/* Knopfkatalog — v1s _reference/Button.astro. Die Zeilenboxen sind
	   gemessen, nicht geschaetzt: 12px→16, 14px→20, 16px→24. Zusammen mit dem
	   Polster ergeben sich exakt 32 / 48 / 60px Hoehe. */
	--hss-btn-sm-fs: 0.75rem;   --hss-btn-sm-lh: 16px; --hss-btn-sm-y: 8px;  --hss-btn-sm-x: 24px;
	--hss-btn-md-fs: 0.875rem;  --hss-btn-md-lh: 20px; --hss-btn-md-y: 14px; --hss-btn-md-x: 44px;
	--hss-btn-lg-fs: 1rem;      --hss-btn-lg-lh: 24px; --hss-btn-lg-y: 18px; --hss-btn-lg-x: 52px;
	--hss-icon: 48px;
	--hss-icon-sm: 32px;

	/* Layout — die EINZIGE Stelle mit Breitenvariation ist Abschnitt 9.
	   Werte hier = Desktop ab 1360px. */
	--hss-container-max: 1600px;
	--hss-pad-x: 64px;
	--hss-nav-x: 100px;
	--hss-nav-top: 16px;
	--hss-nav-py: 16px;
	--hss-nav-item-h: 48px;
	--hss-nav-gap: 8px;
	/* Nav-Hoehe wird ERZWUNGEN, nicht dem Inhalt ueberlassen: sonst haengt sie
	   davon ab, welche Knoepfe gerade in der Leiste stehen. Gemessen
	   2026-08-07: ohne diese Vorgabe war das Portal zwischen 769 und 1279 vier
	   Pixel niedriger als v1, weil dort v1s Warenkorb (32px) steht und im
	   Portal nur der Hamburger (28px) uebrig blieb.
	   48+32=80 · 32+32=64 · 32+24=56 — genau v1s drei Stufen. */
	--hss-nav-h: calc(var(--hss-nav-item-h) + 2 * var(--hss-nav-py));
	/* Titelhoehe: v1 haelt den Titel bei y=160 (ab 768) bzw. y=128 (darunter)
	   — es ist eine FESTE Hoehe, kein fester Abstand zur Nav. Der Abstand
	   darunter variiert deshalb mit der Nav-Hoehe (64 / 80 / 96), und genau
	   das sah bei frueheren Messungen wie „konstant 64" aus, weil nur ≥1280
	   und ≤767 gemessen wurden. */
	--hss-shell-top: 160px;
	--hss-toggle-right: 26px;
	--hss-toggle-top: 32px;

	/* ── Semantik, Normal-Modus ──
	   Markenpalette, linienfrei: Flaechen sind gefuellt, Ringe unsichtbar. */
	color-scheme: light;
	--hss-page: var(--hss-cream);
	--hss-ink: var(--hss-green);
	--hss-ring: transparent;
	/* Trennlinie IM gefuellten Kasten: hier gibt es keinen Ring, also traegt
	   Creme die Linie (dieselbe Entscheidung wie beim Accordion auf v1). */
	--hss-sep: var(--hss-cream);
	--hss-strong: var(--hss-green);
	--hss-on-strong: var(--hss-lime);
	--hss-accent: var(--hss-lime);
	--hss-on-accent: var(--hss-green);
	/* Achtungszustand (ueberfaellig/abgelaufen) OHNE eigene Akzentfarbe:
	   das Portal fuehrt nur Green/Cream/Lime (Johannes 2026-08-07).
	   Creme statt Lime, weil die Belegzeile selbst lime ist — eine lime
	   Pille darauf waere unsichtbar. Die Bedeutung traegt ohnehin das Wort;
	   die Flaeche macht sie auf Distanz erkennbar. */
	--hss-alert: var(--hss-cream);
	--hss-on-alert: var(--hss-green);
	--hss-nav-bg: color-mix(in oklab, var(--hss-lime) 50%, transparent);
}

/* Light — Seitenfarbe Creme, Schrift Schwarz, alle Akzente kollabieren.
   Der Kontrast kommt jetzt vom 2px-Ring statt von der Farbe. */
:root[data-theme="light"] {
	color-scheme: light;
	--hss-page: var(--hss-cream);
	--hss-ink: #000;
	--hss-ring: #000;
	--hss-sep: #000;
	--hss-strong: #000;
	--hss-on-strong: var(--hss-cream);
	--hss-accent: var(--hss-cream);
	--hss-on-accent: #000;
	--hss-alert: #000;
	--hss-on-alert: var(--hss-cream);
	--hss-nav-bg: var(--hss-cream);
}

/* Dark — spiegelbildlich. */
:root[data-theme="dark"] {
	color-scheme: dark;
	--hss-page: #000;
	--hss-ink: var(--hss-cream);
	--hss-ring: var(--hss-cream);
	--hss-sep: var(--hss-cream);
	--hss-strong: var(--hss-cream);
	--hss-on-strong: #000;
	--hss-accent: #000;
	--hss-on-accent: var(--hss-cream);
	--hss-alert: var(--hss-cream);
	--hss-on-alert: #000;
	--hss-nav-bg: #000;
}

/* ── 1) Grundlage ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Bildlaufleisten — wortgleich mit v1 (website-v1/src/styles/theme/_chrome.css).
   Bewusst NUR `scrollbar-color`, kein ::-webkit-scrollbar. Entscheidung
   Johannes, 2026-08-09: wer die Webkit-Pseudoelemente stylt, bekommt in
   Chromium zwingend eine KLASSISCHE Leiste — die liegt NEBEN dem Inhalt statt
   darueber, macht die Seite dauerhaft schmaler und laesst sie beim Scroll-Lock
   nach rechts springen. Eine feste Pixelbreite waere nur so zu haben und ist
   uns diese drei Nachteile nicht wert.
   Also: Systemleiste, nur eingefaerbt — ueber dem Inhalt, ohne Layout-Breite,
   blendet sich in Ruhe aus, Ziehen/Tastatur/Touch nativ. Preis, bekannt und
   akzeptiert: macOS macht sie beim Zeigen breiter (Systemverhalten).
   BREITE: `scrollbar-width` kennt nur auto|thin|none, keine Pixel. „thin" war
   zu schmal, also gilt der Vorgabewert `auto` — die volle Systemleiste, in
   Chrome rund 8px im Ruhezustand.
   `scrollbar-color` genuegt allein: es vererbt und faerbt jede innere Liste. */
html { scrollbar-color: var(--hss-ink) transparent; }

body {
	margin: 0;
	background-color: var(--hss-page);
	color: var(--hss-ink);
	font-family: var(--hss-font-body);
	font-size: var(--hss-body);
	font-weight: var(--hss-weight-body);
	line-height: var(--hss-body-lh);
	-webkit-font-smoothing: antialiased;
	text-align: left;
	text-wrap: pretty;
}

h1, h2, h3 {
	font-family: var(--hss-font-display);
	font-weight: var(--hss-weight-heading);
	margin: 0;
	text-align: start;
}
/* v1 setzt seinen Seitentitel als <h1> MIT der h2-Groesze (gemessen auf
   /shop/, /about/, /downloads/, /materials/: ueberall 56px/900/lh 61,6).
   `text-h1` (72px) kommt auf keiner gerenderten v1-Seite vor. */
h1 { font-size: var(--hss-h2); line-height: var(--hss-h2-lh); letter-spacing: var(--hss-h2-tr); }
h2 { font-size: var(--hss-h2); line-height: var(--hss-h2-lh); letter-spacing: var(--hss-h2-tr); }
h3 { font-size: var(--hss-h3); line-height: var(--hss-h3-lh); letter-spacing: var(--hss-h3-tr); }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

/* Wortmarke als Maske — folgt jedem Modus und jeder Brand-Theme-Aenderung
   automatisch, ohne zweite Bilddatei (identisch zu v1). */
.hss-logo {
	display: inline-block;
	height: 18px;
	aspect-ratio: 703 / 73;
	background-color: var(--hss-ink);
	-webkit-mask-image: url('/files/highsociety_logo_black.png');
	mask-image: url('/files/highsociety_logo_black.png');
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}
.hss-logo--footer { height: 20px; }

/* ── 2) DER Knopfkatalog ─────────────────────────────────────────────────── */
/* Alle Regeln hier haben Spezifitaet (0,1,0) bzw. (0,2,0) — dann entscheidet
   die Reihenfolge, so wie man es beim Lesen erwartet. Kein Element- plus
   Klassenselektor (`button.hss-btn` waere (0,1,1) und schluege die Varianten). */
.hss-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: var(--hss-radius-pill);
	font-family: inherit;
	font-weight: var(--hss-weight-body);   /* IMMER 500 — v1 kennt keinen 700er Knopf */
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .3s, color .3s, box-shadow .3s;
	box-shadow: 0 0 0 2px var(--hss-ring);
}
.hss-btn--sm { font-size: var(--hss-btn-sm-fs); line-height: var(--hss-btn-sm-lh); padding: var(--hss-btn-sm-y) var(--hss-btn-sm-x); }
.hss-btn--md { font-size: var(--hss-btn-md-fs); line-height: var(--hss-btn-md-lh); padding: var(--hss-btn-md-y) var(--hss-btn-md-x); }
.hss-btn--lg { font-size: var(--hss-btn-lg-fs); line-height: var(--hss-btn-lg-lh); padding: var(--hss-btn-lg-y) var(--hss-btn-lg-x); }
/* Symbolknoepfe tragen nur ein SVG — trotzdem wird die Schriftgroesze
   gesetzt: ohne sie erbt `<button>` Chromes UA-Vorgabe (13,333px), und im
   Knopfkatalog stuende dann ein Wert, den niemand entschieden hat. v1: icon
   20px (text-xl), icon-sm 16px (text-base). */
.hss-btn--icon,
.hss-btn--icon-sm { padding: 0; border-radius: 50%; line-height: 1; }
.hss-btn--icon { width: var(--hss-icon); height: var(--hss-icon); font-size: 1.25rem; }
.hss-btn--icon-sm { width: var(--hss-icon-sm); height: var(--hss-icon-sm); font-size: 1rem; }
.hss-btn--icon svg { width: 20px; height: 20px; }
.hss-btn--icon-sm svg { width: 16px; height: 16px; }

.hss-btn--primary { background-color: var(--hss-strong); color: var(--hss-on-strong); }
.hss-btn--primary:hover { background-color: var(--hss-accent); color: var(--hss-on-accent); }
.hss-btn--lime { background-color: var(--hss-accent); color: var(--hss-on-accent); }
.hss-btn--lime:hover { background-color: var(--hss-strong); color: var(--hss-on-strong); }
.hss-btn--outline { background-color: transparent; color: var(--hss-ink); box-shadow: 0 0 0 2px var(--hss-ink); }
.hss-btn--outline:hover { background-color: var(--hss-ink); color: var(--hss-page); }
.hss-btn--alert { background-color: var(--hss-alert); color: var(--hss-on-alert); }
.hss-btn--alert:hover { background-color: var(--hss-on-alert); color: var(--hss-alert); }

/* light/dark: jeder Knopf steht auf der Seitenfarbe mit 2px-Ring; der Zustand
   ist weiterhin ein Farbtausch (gefuellt bei hover), nur eben in der
   kollabierten Palette. v1 laesst hier die echte Akzentfarbe aufblitzen —
   das ist dort ein bekannter Rest, kein Vorbild. */
:root[data-theme="light"] .hss-btn,
:root[data-theme="dark"] .hss-btn {
	background-color: var(--hss-page);
	color: var(--hss-ink);
	box-shadow: 0 0 0 2px var(--hss-ring);
}
:root[data-theme="light"] .hss-btn:hover,
:root[data-theme="dark"] .hss-btn:hover {
	background-color: var(--hss-ink);
	color: var(--hss-page);
	box-shadow: 0 0 0 2px var(--hss-ink);
}

/* ── 3) Navigationsleiste ────────────────────────────────────────────────── */
.hss-nav {
	position: fixed;
	top: var(--hss-nav-top);
	left: var(--hss-nav-x);
	right: var(--hss-nav-x);
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding: var(--hss-nav-py) 24px;
	border-radius: var(--hss-radius-pill);
	/* Die einzige bewusste Transparenz im ganzen Portal: v1s Glas-Leiste. */
	background-color: var(--hss-nav-bg);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}
:root[data-theme="light"] .hss-nav,
:root[data-theme="dark"] .hss-nav { backdrop-filter: none; -webkit-backdrop-filter: none; }

.hss-nav--hidden { transform: translateY(calc(-100% - 20px)); }

.hss-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	/* Erzwingt die Leistenhoehe unabhaengig davon, welche Knoepfe gerade
	   drinstehen — siehe --hss-nav-item-h oben. */
	min-height: var(--hss-nav-item-h);
	gap: 1rem;
}
.hss-nav__brand { display: inline-flex; align-items: center; flex-shrink: 0; }

.hss-nav__links { display: flex; align-items: center; gap: var(--hss-nav-gap); }

/* Navigation ist KEIN Knopf: im Ruhezustand fuellungsfrei. Nur der aktive
   Eintrag ist gefuellt, und der Hover nimmt genau diesen Zustand vorweg. */
.hss-navlink,
.hss-dropdown__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--hss-nav-item-h);
	padding: 0 var(--hss-space-sm);
	border-radius: var(--hss-radius-pill);
	font-family: var(--hss-font-menu);
	font-size: var(--hss-menu);
	font-weight: var(--hss-weight-body);
	white-space: nowrap;
	transition: background-color .3s, color .3s, box-shadow .3s;
	box-shadow: 0 0 0 2px var(--hss-ring);
}
.hss-navlink { background-color: transparent; color: var(--hss-ink); }
.hss-navlink:hover,
.hss-navlink.is-active,
.hss-navgroup:hover > .hss-navlink { background-color: var(--hss-strong); color: var(--hss-on-strong); }

:root[data-theme="light"] .hss-navlink,
:root[data-theme="dark"] .hss-navlink { background-color: var(--hss-page); color: var(--hss-ink); }
:root[data-theme="light"] .hss-navlink:hover,
:root[data-theme="dark"] .hss-navlink:hover,
:root[data-theme="light"] .hss-navlink.is-active,
:root[data-theme="dark"] .hss-navlink.is-active,
:root[data-theme="light"] .hss-navgroup:hover > .hss-navlink,
:root[data-theme="dark"] .hss-navgroup:hover > .hss-navlink {
	background-color: var(--hss-ink);
	color: var(--hss-page);
	box-shadow: 0 0 0 2px var(--hss-ink);
}

/* ── Dropdown (v1: Navigation.astro:139-160) ── */
.hss-navgroup { position: relative; }
/* Unsichtbare Bruecke: ohne sie liegt zwischen Eintrag und Panel eine Totzone,
   in der das Menue wieder zuklappt. */
.hss-navgroup::before {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 10px;
	z-index: 49;
}
.hss-dropdown {
	position: absolute;
	top: 100%;
	margin-top: 8px;
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	padding: 8px;
	min-width: 200px;
	/* KEINE Flaeche, kein Radius, kein Ring, kein Blur — v1s Panel ist reine
	   Position (`Navigation.astro:139-143`: nur `absolute … p-2 min-w-[200px]`).
	   Sichtbar sind allein die Eintraege als Pillen. Die Glasflaeche, die hier
	   stand, war eine Erfindung von mir. */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .2s, transform .2s, visibility .2s;
	z-index: 50;
}
.hss-navgroup:hover .hss-dropdown,
.hss-navgroup:focus-within .hss-dropdown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}
.hss-dropdown__item {
	display: flex;
	width: 100%;
	margin-bottom: var(--hss-space-xs);
	background-color: var(--hss-accent);
	color: var(--hss-on-accent);
}
.hss-dropdown__item:last-child { margin-bottom: 0; }
.hss-dropdown__item:hover,
.hss-dropdown__item.is-active { background-color: var(--hss-strong); color: var(--hss-on-strong); }
:root[data-theme="light"] .hss-dropdown__item,
:root[data-theme="dark"] .hss-dropdown__item {
	background-color: var(--hss-page);
	color: var(--hss-ink);
	box-shadow: 0 0 0 2px var(--hss-ring);
}
:root[data-theme="light"] .hss-dropdown__item:hover,
:root[data-theme="dark"] .hss-dropdown__item:hover,
:root[data-theme="light"] .hss-dropdown__item.is-active,
:root[data-theme="dark"] .hss-dropdown__item.is-active {
	background-color: var(--hss-ink);
	color: var(--hss-page);
	box-shadow: 0 0 0 2px var(--hss-ink);
}

/* ── Rechte Aktionen ── */
.hss-nav__actions { display: flex; align-items: center; gap: var(--hss-nav-gap); flex-shrink: 0; }
/* Rueckwege („Website", „Desk"): Navigation, kein Knopf — deshalb dieselbe
   Pille wie die uebrigen Nav-Eintraege. BEWUSST OHNE Pfeil-Zeichen: v1 setzt
   nirgends ein Symbol an einen Nav-Eintrag, und eine Ausnahme dafuer zu
   erfinden waere genau die Sorte Sonderregel, die das Design aufweicht. */

.hss-nav__user {
	font-family: var(--hss-font-menu);
	font-size: var(--hss-menu);
	font-weight: var(--hss-weight-body);
	color: var(--hss-ink);
	white-space: nowrap;
	max-width: 18ch;
	overflow: hidden;
	text-overflow: ellipsis;
}
.hss-logout { margin: 0; display: inline-flex; }

/* ── Mobile Aktionen + Hamburger ── */
.hss-nav__mobile-actions { display: none; align-items: center; gap: 12px; flex-shrink: 0; }
.hss-hamburger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 28px;
	height: 28px;
	cursor: pointer;
	flex-shrink: 0;
	z-index: 200;
}
.hss-hamburger span {
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background-color: var(--hss-ink);
	transition: transform .3s, opacity .2s;
}
#hss-nav-toggle:checked ~ .hss-nav .hss-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#hss-nav-toggle:checked ~ .hss-nav .hss-hamburger span:nth-child(2) { transform: scaleX(0); opacity: 0; }
#hss-nav-toggle:checked ~ .hss-nav .hss-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Umschalter (v1s .theme-fab) ──
   Sitzt fest in der rechten Randspalte, NICHT relativ zur Pille, und faehrt
   beim Scrollen bewusst nicht mit weg. */
.hss-theme-fab {
	position: fixed;
	z-index: 100;
	top: var(--hss-toggle-top);
	right: var(--hss-toggle-right);
}
.hss-theme-toggle--inbar { display: none; }

/* ── Mobiles Menue ── */
.hss-nav-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 90;
	background-color: var(--hss-accent);
	opacity: 0;
	transition: opacity .3s;
	cursor: pointer;
}
.hss-nav-mobile {
	position: fixed;
	top: 88px;
	left: 24px;
	right: 24px;
	max-height: calc(100dvh - 104px);
	z-index: 150;
	border-radius: var(--hss-radius-md);
	background-color: var(--hss-page);
	color: var(--hss-ink);
	box-shadow: 0 0 0 2px var(--hss-ring);
	transform: translateY(-10px);
	opacity: 0;
	pointer-events: none;
	transition: transform .3s ease-in-out, opacity .3s ease-in-out;
	overflow-y: auto;
}
#hss-nav-toggle:checked ~ .hss-nav-overlay { display: block; opacity: 1; }
#hss-nav-toggle:checked ~ .hss-nav-mobile { transform: translateY(0); opacity: 1; pointer-events: auto; }

.hss-nav-mobile__list { display: flex; flex-direction: column; padding: var(--hss-space-sm); gap: 4px; }
.hss-nav-mobile__link {
	display: block;
	padding: var(--hss-space-sm);
	border-radius: var(--hss-radius-pill);
	font-family: var(--hss-font-menu);
	font-size: var(--hss-menu);
	font-weight: var(--hss-weight-body);
	color: var(--hss-ink);
	transition: background-color .3s, color .3s;
}
.hss-nav-mobile__link--sub { padding-left: var(--hss-space-lg); }
.hss-nav-mobile__link:hover,
.hss-nav-mobile__link.is-active { background-color: var(--hss-strong); color: var(--hss-on-strong); }
:root[data-theme="light"] .hss-nav-mobile__link:hover,
:root[data-theme="dark"] .hss-nav-mobile__link:hover,
:root[data-theme="light"] .hss-nav-mobile__link.is-active,
:root[data-theme="dark"] .hss-nav-mobile__link.is-active {
	background-color: var(--hss-ink);
	color: var(--hss-page);
}
.hss-nav-mobile__cta { display: flex; justify-content: center; padding: 0 28px 24px; }

/* Der Umschalter ist auf allen Breiten sichtbar; unter 1280 wandert er
   optisch enger an die Leiste, unter 768 IN die Leiste (Abschnitt 9). */

/* ── 4) Seitenkoerper ────────────────────────────────────────────────────── */
.hss-main {
	padding-top: var(--hss-shell-top);
	padding-bottom: var(--hss-space-2xl);
	min-height: 60vh;
}
.hss-container {
	max-width: var(--hss-container-max);
	margin: 0 auto;
	padding: 0 var(--hss-pad-x);
}

.hss-page-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--hss-space-sm); }
.hss-page-title { margin: 0; }
.hss-page-lead { margin-top: var(--hss-space-sm); max-width: 62ch; }

.hss-section { margin-top: var(--hss-space-xl); }
.hss-section__title { font-size: var(--hss-h3); margin-bottom: var(--hss-space-md); }

/* ── 5) Belegliste ───────────────────────────────────────────────────────── */
/* Spaltenbreiten wachsen mit den Daten: die Artikelspalte bekommt den freien
   Rest, Status und Betrag genau so viel, wie ihr Inhalt braucht. Im alten
   Portal gab Frappe der Artikelspalte 142px und der Statuspille 257px —
   dadurch war JEDER Artikelname abgeschnitten. */
.hss-doclist { display: flex; flex-direction: column; gap: var(--hss-space-sm); margin-top: var(--hss-space-lg); }
.hss-doclist__row {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--hss-space-md);
	padding: var(--hss-space-sm) var(--hss-space-md);
	border-radius: var(--hss-radius-lg);
	background-color: var(--hss-accent);
	color: var(--hss-on-accent);
	box-shadow: 0 0 0 2px var(--hss-ring);
	transition: background-color .3s, color .3s, box-shadow .3s;
}
.hss-doclist__row:hover { background-color: var(--hss-strong); color: var(--hss-on-strong); }
:root[data-theme="light"] .hss-doclist__row,
:root[data-theme="dark"] .hss-doclist__row { background-color: var(--hss-page); color: var(--hss-ink); }
:root[data-theme="light"] .hss-doclist__row:hover,
:root[data-theme="dark"] .hss-doclist__row:hover { background-color: var(--hss-ink); color: var(--hss-page); }

/* Die ganze Zeile ist klickbar (Stretched Link) — nicht nur die Belegnummer. */
.hss-doclist__link { position: absolute; inset: 0; border-radius: inherit; }
.hss-doclist__id { flex: 0 0 auto; min-width: 240px; font-weight: var(--hss-weight-body); }
.hss-doclist__date { display: block; font-size: var(--hss-small); }
.hss-doclist__items { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--hss-small); }
.hss-doclist__status { flex: 0 0 max-content; }
.hss-doclist__total { flex: 0 0 max-content; min-width: 140px; text-align: right; font-weight: var(--hss-weight-body); }
/* Provisionsspalte (nur Partnersicht). Sie steht VOR dem Belegbetrag, weil sie
   in einer anderen Waehrung rechnet: die Provision immer in Firmenwaehrung,
   der Beleg in seiner eigenen. Nebeneinander waere das eine Verwechslung. */
.hss-doclist__comm { flex: 0 0 max-content; min-width: 150px; text-align: right; font-weight: var(--hss-weight-body); }

/* ── 6) Statuspille ──────────────────────────────────────────────────────── */
.hss-pill {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 var(--hss-btn-sm-x);
	border-radius: var(--hss-radius-pill);
	font-size: var(--hss-btn-sm-fs);
	line-height: var(--hss-btn-sm-lh);
	font-weight: var(--hss-weight-body);
	white-space: nowrap;
	background-color: var(--hss-strong);
	color: var(--hss-on-strong);
	box-shadow: 0 0 0 2px var(--hss-ring);
}
/* Achtungszustand tauscht die FLAECHE, nicht einen Punkt. */
.hss-pill--alert { background-color: var(--hss-alert); color: var(--hss-on-alert); }
:root[data-theme="light"] .hss-pill,
:root[data-theme="dark"] .hss-pill {
	background-color: var(--hss-page);
	color: var(--hss-ink);
	box-shadow: 0 0 0 2px var(--hss-ring);
}
/* Auch in light/dark bleibt der Achtungszustand unterscheidbar: gefuellt
   statt fuellungsfrei — derselbe Farbtausch, nur in der kollabierten Palette. */
:root[data-theme="light"] .hss-pill--alert,
:root[data-theme="dark"] .hss-pill--alert { background-color: var(--hss-ink); color: var(--hss-page); }

/* ── 7) Kacheln, Tabellen, Leerzustand ───────────────────────────────────── */
.hss-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--hss-space-sm); margin-top: var(--hss-space-lg); }
.hss-tile {
	display: block;
	padding: var(--hss-space-md);
	border-radius: var(--hss-radius-lg);
	background-color: var(--hss-accent);
	color: var(--hss-on-accent);
	box-shadow: 0 0 0 2px var(--hss-ring);
	transition: background-color .3s, color .3s;
}
.hss-tile:hover { background-color: var(--hss-strong); color: var(--hss-on-strong); }
:root[data-theme="light"] .hss-tile,
:root[data-theme="dark"] .hss-tile { background-color: var(--hss-page); color: var(--hss-ink); }
:root[data-theme="light"] .hss-tile:hover,
:root[data-theme="dark"] .hss-tile:hover { background-color: var(--hss-ink); color: var(--hss-page); }
/* `display: block` ist hier keine Kosmetik: als Inline-Spans standen Zahl und
   Beschriftung direkt aneinander („13Quotations"). Die Zahlenpruefungen sehen
   so etwas nicht — deshalb gehoert der Blick auf die Seite zum Abnehmen dazu. */
.hss-tile__value { display: block; font-family: var(--hss-font-display); font-size: var(--hss-h3); font-weight: var(--hss-weight-heading); line-height: 1.2; }
.hss-tile__label { display: block; font-size: var(--hss-small); }
/* Kennzahlkachel ohne Ziel: gleiche Form, aber kein Farbwechsel beim
   Ueberfahren — sonst verspricht sie einen Klick, den es nicht gibt.
   Bewusst als spaetere Regel gleicher Spezifitaet statt als `a.hss-tile`:
   ein Element+Klasse-Selektor haette die Modusregeln unterlaufen. */
.hss-tile--static:hover { background-color: var(--hss-accent); color: var(--hss-on-accent); }
:root[data-theme="light"] .hss-tile--static:hover,
:root[data-theme="dark"] .hss-tile--static:hover { background-color: var(--hss-page); color: var(--hss-ink); }

/* Zweite Navigationsebene (Partnerbereich). Reine Pillenreihe aus dem
   Knopf-Makro — hier steht nur die Anordnung. */
.hss-subnav { display: flex; flex-wrap: wrap; gap: var(--hss-space-xs); margin-top: var(--hss-space-lg); }

/* Die Artikeltabelle darf auf schmalen Geraeten NICHT die Seite breiter
   machen — sie scrollt in ihrem eigenen Kasten. Gemessen 2026-08-07: auf
   390px schob sie das Dokument um 7px nach rechts, wodurch die ganze Seite
   waagerecht scrollte. Kuerzen war keine Option: Artikelnamen abzuschneiden
   war genau der Mangel, den diese App beheben sollte. */
.hss-tablewrap { overflow-x: auto; margin-top: var(--hss-space-md); }
.hss-table { width: 100%; min-width: 380px; border-collapse: collapse; }
.hss-table th,
.hss-table td { padding: var(--hss-space-xs) var(--hss-space-sm); text-align: left; vertical-align: top; }
.hss-table th { font-size: var(--hss-small); font-weight: var(--hss-weight-body); }
/* Zeilentrenner der EINFACHEN Tabellen. Ein versetzter Schatten statt eines
   `border-top`, damit die Zeile nicht um 2px waechst — das ist hier zulaessig,
   weil diese Zellen ECKIG sind: auf einer geraden Kante ist der sichtbare Rest
   der verschobenen Kopie genau 2px.
   ⛔ NIEMALS auf eine gerundete Ecke uebertragen. Dort schrumpft er mit dem
   Kosinus des Tangentenwinkels (bei 45° gemessene 1,38 statt 2,00 px) und der
   Bogen laeuft spitz zu — genau der Fehler, der am 2026-08-31 aus dem
   Accordion und aus der Positionstabelle entfernt wurde. Gerundet heisst
   `border` oder `box-shadow: 0 0 0 2px` (spread).
   ⚠️ Diese Regel wurde von der alten Schatten-Regel der Positionstabelle
   VERDRAENGT. Seit dort ein `border` steht, greift sie auch im `.hss-itemstack`
   und zieht einen zweiten Strich — deshalb steht sie dort ausdruecklich auf
   `box-shadow: none`. Beim Aendern beide Stellen zusammen denken.
   Herleitung: .claude/plans/accordion-rahmenstaerke-2026-08-28.md */
.hss-table tbody tr + tr td { box-shadow: inset 0 2px 0 0 var(--hss-ring); }
.hss-table__num { text-align: right; white-space: nowrap; }

/* ── Tabellen im Accordion-Look (wie v1 und wie die PDF-Belege) ──
   Verwendet von der Positionstabelle am Beleg und der Kundentabelle im
   Partnerbereich.
   EIN Kasten um alle Positionen; die Trennlinien laufen bis an den Rand und
   biegen an beiden Enden nach unten. Gebaut wie das Accordion auf v1
   (`_reference/Accordion.astro`): der Ring ist ein `box-shadow`, kein
   `border` — er braucht keinen Platz im Layout, also auch keine
   Negativraender, und er folgt automatisch dem `border-radius` der Zelle.
   Genau daraus entsteht der Bogen an den Enden.

   Modus-Logik wie ueberall im Portal: im Normal-Modus ist die Flaeche
   gefuellt (lime) und die Trennlinien sind cremefarben — der Ring ist dort
   absichtlich durchsichtig. In Hell/Dunkel traegt der 2px-Ring den Kontrast. */
.hss-itemstack {
	/* Der Kasten waechst auf die Breite der Tabelle; gescrollt wird AUSSEN
	   (`.hss-tablewrap`). Andersherum — Scrollkasten INNEN — schoben die
	   Zeilen samt ihren Rundungen unter dem Rahmen hindurch: auf dem Telefon
	   liesz sich der Inhalt ueber den Rahmen hinaus wischen (2026-08-20). */
	width: fit-content;
	min-width: 100%;
	border-radius: var(--hss-radius-lg);
	background-color: var(--hss-accent);
	color: var(--hss-on-accent);
	/* inset, damit `overflow: hidden` am selben Element den Rahmen nicht
	   abschneidet — sonst braeuchte es einen zweiten Wrapper wie auf v1.
	   `--hss-sep` und NICHT `--hss-ring`: die Zellen setzen ihre Seitenkanten
	   genau auf diesen Rahmen. Waere er im Normal-Modus durchsichtig (so stand
	   es bis 2026-08-31), staenden dort cremefarbene Stummel auf Lime statt
	   einer durchgehenden Kante. In Hell/Dunkel sind beide Werte ohnehin
	   gleich. */
	box-shadow: inset 0 0 0 2px var(--hss-sep);
	overflow: hidden;
}
:root[data-theme="light"] .hss-itemstack,
:root[data-theme="dark"] .hss-itemstack {
	background-color: var(--hss-page);
	color: var(--hss-ink);
}
.hss-tablewrap:has(> .hss-itemstack) { margin-top: var(--hss-space-md); }
/* Gerundete Ecken an Zellen brauchen `separate` — deshalb nur im Kasten und
   nicht global an `.hss-table`. */
.hss-itemstack .hss-table { border-collapse: separate; border-spacing: 0; }
.hss-itemstack .hss-table th,
.hss-itemstack .hss-table td { padding: var(--hss-space-sm); }
.hss-itemstack .hss-table thead th { padding-bottom: var(--hss-space-xs); }

/* Die Trennlinie ist die Oberkante der FOLGENDEN Zeile: oben durchgehend,
   an den Aussenzellen zusaetzlich seitlich und mit Rundung — dadurch der
   Bogen nach unten.

   ⚠️ ECHTER `border`, KEIN versetzter `box-shadow` (bis 2026-08-31 stand hier
   `0 -2px 0 0` / `-2px 0 0 0`). Ein versetzter Schatten ist kein Strich,
   sondern eine um 2px verschobene Kopie des Kastens: auf einer geraden Kante
   bleiben 2px sichtbar, auf einer Rundung schrumpft der Rest mit dem Kosinus
   des Tangentenwinkels und war bei 45° nur noch 1,38 statt 2,00 px (am
   gerenderten Bild gemessen, theoretisch 2·cos45° = 1,41) — der Bogen lief
   spitz zu. Ein `border` ist auf einer Rundung gleichmaessig; dasselbe Rezept
   wie in den Druckformaten und seit 2026-08-31 auch in v1s Accordion.
   Die Zellkante liegt auf dem Rahmen, weil dieser ein INSET-Schatten ist und
   damit keinen Platz einnimmt — die Tabelle beginnt bei x=0.
   Messreihen: .claude/plans/accordion-rahmenstaerke-2026-08-28.md */
.hss-itemstack .hss-table tbody tr td {
	border-top: 2px solid var(--hss-sep);
	/* ⚠️ Muss sein: die allgemeine Tabellenregel weiter oben
	   (`.hss-table tbody tr + tr td { box-shadow: inset 0 2px … }`) war bisher
	   vom Schatten DIESER Regel verdraengt. Seit hier ein `border` steht, gibt
	   es nichts mehr zu verdraengen — die Zeile bekaeme im Hell-Modus einen
	   zweiten 2px-Strich direkt unter den Rahmen, gemessen 4,12 statt 2,00 px. */
	box-shadow: none;
}
.hss-itemstack .hss-table tbody tr td:first-child {
	border-top-left-radius: var(--hss-radius-lg);
	border-left: 2px solid var(--hss-sep);
}
.hss-itemstack .hss-table tbody tr td:last-child {
	border-top-right-radius: var(--hss-radius-lg);
	border-right: 2px solid var(--hss-sep);
}
/* Letzte Zeile: die Seitenkanten muessen unten mitschwingen, sonst stellen sie
   sich als gerader Stummel quer vor den Bogen des Rahmens. */
.hss-itemstack .hss-table tbody tr:last-child td:first-child {
	border-bottom-left-radius: var(--hss-radius-lg);
}
.hss-itemstack .hss-table tbody tr:last-child td:last-child {
	border-bottom-right-radius: var(--hss-radius-lg);
}

.hss-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--hss-space-sm); margin-top: var(--hss-space-lg); }
.hss-fact {
	padding: var(--hss-space-md);
	border-radius: var(--hss-radius-lg);
	background-color: var(--hss-accent);
	color: var(--hss-on-accent);
	box-shadow: 0 0 0 2px var(--hss-ring);
}
:root[data-theme="light"] .hss-fact,
:root[data-theme="dark"] .hss-fact { background-color: var(--hss-page); color: var(--hss-ink); }
.hss-fact__label { display: block; font-size: var(--hss-small); }
.hss-fact__value { display: block; font-weight: var(--hss-weight-body); }

.hss-empty { margin-top: var(--hss-space-lg); padding: var(--hss-space-lg); border-radius: var(--hss-radius-lg); box-shadow: 0 0 0 2px var(--hss-ink); }
.hss-empty__headline { font-family: var(--hss-font-display); font-size: var(--hss-h3); font-weight: var(--hss-weight-heading); }
.hss-empty__hint { margin-top: var(--hss-space-xs); }

.hss-actions { display: flex; flex-wrap: wrap; gap: var(--hss-nav-gap); margin-top: var(--hss-space-lg); }
.hss-backlink { display: inline-flex; margin-bottom: var(--hss-space-md); }

/* ── 7b) Formulare (v1s _reference/Form.astro) ───────────────────────────── */
.hss-form { display: flex; flex-direction: column; gap: var(--hss-space-sm); max-width: 640px; margin-top: var(--hss-space-lg); }
.hss-form--wide { max-width: none; }
.hss-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hss-space-sm); }
.hss-field { display: flex; flex-direction: column; gap: .5rem; }
/* Beschriftung = v1s Eyebrow: klein, GROSZ, fett, weit. */
.hss-field__label {
	font-size: var(--hss-eyebrow);
	letter-spacing: .25em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--hss-ink);
}
.hss-field__input {
	width: 100%;
	padding: 14px 20px;
	border: none;
	border-radius: var(--hss-radius-pill);
	background-color: var(--hss-accent);
	color: var(--hss-on-accent);
	box-shadow: 0 0 0 2px var(--hss-ring);
	font-family: var(--hss-font-body);
	font-size: var(--hss-body);
	font-weight: var(--hss-weight-body);
	line-height: 1.4;
	outline: none;
}
/* Mehrzeilig: Radius 32 statt Pille — eine Pille um sechs Zeilen sieht falsch aus. */
.hss-field__input--area { border-radius: var(--hss-radius-lg); resize: vertical; }
/* Fokus = dickerer Ring in der Schriftfarbe, kein fremder Fokusrahmen. */
.hss-field__input:focus { box-shadow: 0 0 0 2px var(--hss-on-accent); }
:root[data-theme="light"] .hss-field__input,
:root[data-theme="dark"] .hss-field__input {
	background-color: var(--hss-page); color: var(--hss-ink); box-shadow: 0 0 0 2px var(--hss-ring);
}
.hss-field__help { font-size: var(--hss-small); color: var(--hss-ink); }
.hss-field__selectwrap { position: relative; }
.hss-field__input--select { appearance: none; padding-right: 44px; }
.hss-field__chevron {
	position: absolute; right: 20px; top: 50%; margin-top: -3px;
	width: 12px; height: 8px; pointer-events: none; color: var(--hss-on-accent);
}
:root[data-theme="light"] .hss-field__chevron,
:root[data-theme="dark"] .hss-field__chevron { color: var(--hss-ink); }

/* Meldung: gefuellt statt farbig — dieselbe Sprache wie die Statuspille. */
.hss-notice {
	padding: var(--hss-space-sm) var(--hss-space-md);
	border-radius: var(--hss-radius-lg);
	margin-top: var(--hss-space-md);
	background-color: var(--hss-strong);
	color: var(--hss-on-strong);
	box-shadow: 0 0 0 2px var(--hss-ring);
}
.hss-notice--error { background-color: var(--hss-alert); color: var(--hss-on-alert); box-shadow: 0 0 0 2px var(--hss-on-alert); }
:root[data-theme="light"] .hss-notice,
:root[data-theme="dark"] .hss-notice { background-color: var(--hss-page); color: var(--hss-ink); box-shadow: 0 0 0 2px var(--hss-ring); }

/* Anmeldeseite: eigenes Band ohne Nav/Fusz-Kontext. */
.hss-auth { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100dvh; padding: var(--hss-space-xl) var(--hss-pad-x); }
.hss-auth__logo { height: 28px; margin-bottom: var(--hss-space-lg); }
.hss-auth__card { width: 100%; max-width: 420px; }
.hss-auth__title { font-size: var(--hss-h3); margin-bottom: var(--hss-space-md); text-align: center; }
.hss-auth__lead { font-size: var(--hss-small); margin-bottom: var(--hss-space-md); }
.hss-auth__langs { margin: var(--hss-space-lg) 0 0; }
.hss-auth__actions { display: flex; flex-direction: column; gap: var(--hss-space-sm); margin-top: var(--hss-space-sm); }
.hss-auth__actions .hss-btn { width: 100%; }
.hss-auth__links { display: flex; justify-content: center; gap: var(--hss-space-md); margin-top: var(--hss-space-md); }
.hss-auth__link { font-size: var(--hss-small); }
.hss-auth__link:hover { text-decoration: underline; }

/* ── 7c) Anfragen-Verlauf ────────────────────────────────────────────────── */
/* Wer geschrieben hat, zeigt die FLAECHE, nicht ein Ausrichten nach links und
   rechts: eine Chat-Optik mit halbbreiten Blasen bricht auf schmalen Breiten
   und lebt von Graustufen, die es hier nicht gibt.
   Eigene Nachricht = Akzentflaeche (wie eine Belegzeile), Antwort des Teams =
   gefuellte Gegenfarbe. Beides ist ein Farbtausch und haelt in allen drei Modi. */
/* `list-style: none` ist Pflicht: die Grundregel oben setzt es nur fuer `ul`,
   der Verlauf ist aber ein `ol` (die Reihenfolge ist bedeutungstragend). Ohne
   diese Zeile stehen die Ziffern neben den Kacheln — und die zweite steht lime
   auf creme, also kaum lesbar. Kein Messwert haette das gezeigt, nur der Blick. */
.hss-thread { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--hss-space-sm); margin-top: var(--hss-space-lg); }
.hss-thread__item {
	padding: var(--hss-space-md);
	border-radius: var(--hss-radius-lg);
	background-color: var(--hss-strong);
	color: var(--hss-on-strong);
}
.hss-thread__item--mine {
	background-color: var(--hss-accent);
	color: var(--hss-on-accent);
	box-shadow: 0 0 0 2px var(--hss-ring);
}
.hss-thread__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--hss-space-sm);
	font-size: var(--hss-small);
	margin-bottom: var(--hss-space-xs);
}
.hss-thread__who { font-weight: var(--hss-weight-heading); }
/* Der Inhalt ist HTML aus dem Desk — Absaetze, Listen, Links. Er erbt die
   Textfarbe der Flaeche; eigene Farben waeren hier ein Modus-Bruch. */
.hss-thread__body p { margin: 0 0 var(--hss-space-xs); }
.hss-thread__body p:last-child { margin-bottom: 0; }
.hss-thread__body a { text-decoration: underline; }
.hss-thread__body img { max-width: 100%; height: auto; border-radius: var(--hss-radius-md); }
.hss-thread__closed { margin-top: var(--hss-space-lg); font-size: var(--hss-small); }
.hss-page-sub { font-size: var(--hss-small); margin-top: var(--hss-space-xs); }

/* ── 8) Fusz (v1s Footer.astro) ──────────────────────────────────────────── */
.hss-footer { padding: 0 var(--hss-pad-x) var(--hss-space-xl); }
.hss-footer__block { max-width: var(--hss-container-max); margin: 0 auto; border-radius: var(--hss-radius-lg); overflow: hidden; }
.hss-footer__top,
.hss-footer__bottom { background-color: var(--hss-accent); color: var(--hss-on-accent); }
/* Der Ring gehoert an den BLOCK, nicht an seine zwei Haelften: sonst zeichnen
   beide je einen Rahmen und an der Naht steht eine doppelte Linie quer durch
   den Fusz — er sah in light/dark aus wie zwei gestapelte Kaesten. Im
   Normal-Modus verdeckte die lime Flaeche das, deshalb faellt so etwas nur
   beim Ansehen ALLER Modi auf. */
:root[data-theme="light"] .hss-footer__top,
:root[data-theme="light"] .hss-footer__bottom,
:root[data-theme="dark"] .hss-footer__top,
:root[data-theme="dark"] .hss-footer__bottom { background-color: var(--hss-page); color: var(--hss-ink); }
/* AUSSENliegender Ring, nicht `inset`: der Block hat `overflow: hidden` und
   seine beiden Haelften tragen eine eigene Flaeche — die uebermalt einen
   Innenring restlos, sichtbar blieben nur die vier Rundungen. */
:root[data-theme="light"] .hss-footer__block,
:root[data-theme="dark"] .hss-footer__block { box-shadow: 0 0 0 2px var(--hss-ring); }
.hss-footer__top { padding: var(--hss-space-2xl) var(--hss-space-lg) 0; }
.hss-footer__bottom { padding: var(--hss-space-xl) var(--hss-space-lg) var(--hss-space-xl); }
/* VIER Spalten wie v1 — auch wenn das Portal nur drei davon fuellt.
   Das Raster bestimmt, wo die Spalten sitzen; mit dreien waeren sie
   breiter und stuenden an anderer Stelle als auf der Website. Die vierte
   bleibt bewusst leer. */
.hss-footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hss-space-lg); }
.hss-footer__logo-link { display: inline-block; margin-bottom: 1rem; }
.hss-footer__tagline,
.hss-footer__heading,
.hss-footer__link { font-family: var(--hss-font-footer); font-size: var(--hss-footer); }
.hss-footer__tagline { margin-top: .75rem; font-weight: var(--hss-weight-body); line-height: 1.625; }
.hss-footer__heading { font-weight: 700; }
/* v1s Muster: `<ul class="mt-3 space-y-2">` mit INLINE-Links. Als
   Flex-Spalte werden die Anker block-hoch und der gemessene Abstand
   wuchs von v1s 12px auf 19,7px. */
.hss-footer__links { margin-top: .75rem; }
/* Zeilenbox ABSOLUT 24px — v1s gemessener Wert. Ein Faktor (1,5) taugt
   hier nicht: er rechnet gegen die Schriftgroesze des `li`, und die ist
   die fluide Fliesztextgroesze (17,75px bei 1440), nicht die 16px des
   Links. Ohne diese Zeile waechst der Abstand zwischen zwei Links von
   v1s 12px auf 19,7px. */
/* Auch die Schriftgroesze gehoert an die Liste: die `li` erben sonst die
   fluide Fliesztextgroesze (17,75px), und deren Strut macht die Zeile
   einen Pixel hoeher als v1. */
.hss-footer__links { font-size: var(--hss-footer); line-height: 24px; }
.hss-footer__links li + li { margin-top: .5rem; }
.hss-footer__link { font-weight: var(--hss-weight-body); }
.hss-footer__link:hover { text-decoration: underline; }
.hss-footer__bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.hss-footer__copyright,
.hss-footer__legal,
.hss-langswitch__item { font-family: var(--hss-font-footer); font-size: var(--hss-small); font-weight: var(--hss-weight-body); }
.hss-footer__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; }
.hss-langswitch { display: inline-flex; align-items: baseline; gap: .5rem; margin-right: 1rem; }
.hss-langswitch__item { text-transform: uppercase; }
.hss-langswitch__item.is-current { font-weight: 700; }
.hss-footer__legal:hover,
.hss-langswitch__item:hover { text-decoration: underline; }

/* ── 9) Breakpoints ──────────────────────────────────────────────────────── */
/* Die EINZIGE Stelle mit Breitenvariation. Alles darueber ist modus- und
   breitenunabhaengig. Werte = v1s gemessene Stufen.
   ACHTUNG: Media Queries erhoehen die Spezifitaet NICHT — hier stehen
   deshalb nur Token-Zuweisungen und display-Umschaltungen, keine Regeln,
   die eine frueher definierte Farbe ueberschreiben muessten. */

/* Schmales Desktop-Band 1280–1359: engere Raender, damit die volle Leiste
   auch auf 13"-Geraeten passt. */
@media (min-width: 1280px) and (max-width: 1359.98px) {
	:root { --hss-nav-x: 64px; --hss-toggle-right: 8px; }
	.hss-nav__links { gap: 4px; }
}

/* Unter 1280 (v1s --breakpoint-nav): Hamburger statt Linkzeile. */
@media (max-width: 1279.98px) {
	:root {
		--hss-nav-item-h: 32px;
		--hss-toggle-top: 24px;
	}
	.hss-nav__links,
	.hss-nav__actions { display: none; }
	.hss-nav__mobile-actions { display: flex; }
}
@media (min-width: 1280px) {
	/* Gegenstueck: das mobile Panel darf ab hier NIE erscheinen. Der
	   Scroll-Sperre wegen fehlt bei offenem Menue der Scrollbalken, wodurch
	   genau auf 1280 (13"-MacBook) die Abfrage kippen kann. */
	.hss-nav-overlay,
	.hss-nav-mobile { display: none !important; }
}

/* Telefone: Leiste rueckt an den Rand, Umschalter wandert IN die Leiste.
   768 EINSCHLIESZLICH — v1 schaltet hier, und die Mobilleiste gewinnt. */
@media (max-width: 768px) {
	:root {
		--hss-nav-x: 8px;
		--hss-nav-top: 8px;
		--hss-nav-py: 12px;
		--hss-pad-x: 24px;
	}
	/* Achtung: die Titelhoehe wechselt NICHT hier, sondern erst bei 767.98 —
	   v1 schaltet sie ueber `md:` (min-width 768). Bei genau 768px hat v1 also
	   schon Mobilmasze in der Leiste, aber noch den Desktop-Titel auf y=160. */
	.hss-nav { padding: var(--hss-nav-py) 20px; gap: 1rem; }
	.hss-nav-mobile { top: 72px; left: 16px; right: 16px; max-height: calc(100dvh - 88px); }
	.hss-footer__grid { grid-template-columns: repeat(2, 1fr); }
	.hss-footer__brand { grid-column: span 2; }
	.hss-footer__top { padding: var(--hss-space-xl) var(--hss-space-sm); }
	.hss-footer__bottom { padding: var(--hss-space-xl) var(--hss-space-sm) var(--hss-space-md); }
	.hss-footer { padding: 0 var(--hss-pad-x) var(--hss-space-md); }
	.hss-footer__bar { flex-direction: column; align-items: flex-start; }

	/* Belegzeile bricht um, statt zu ueberlaufen. */
	.hss-doclist__row { flex-wrap: wrap; gap: var(--hss-space-xs); }
	.hss-doclist__id { flex: 1 1 100%; min-width: 0; }
	.hss-doclist__items { flex: 1 1 100%; }
	.hss-doclist__total { min-width: 0; margin-left: auto; }
	/* Die Provision bekommt auf schmalen Geraeten eine eigene Zeile: sonst
	   stuenden zwei Betraege in zwei Waehrungen nebeneinander im selben
	   Umbruch — die 150px Mindestbreite haetten die Zeile ueberlaufen lassen. */
	.hss-doclist__comm { flex: 1 1 100%; min-width: 0; text-align: left; }
}

/* Umschalter: eigene Grenze, NICHT 768.
   v1 schaltet ihn ueber Tailwinds `md:` (min-width 768) — bei GENAU 768px
   zeigt v1 also schon den freistehenden Knopf, waehrend die Leiste noch
   Mobilmasze hat. Faszte man beides in denselben Block, waere das Portal auf
   exakt dieser Breite um einen Knopf verschoben. Genau solche Ein-Pixel-
   Abweichungen hat der Mess-Sweep 2026-07-31 gefunden. */
@media (max-width: 767.98px) {
	:root { --hss-shell-top: 128px; }
	.hss-theme-fab { display: none; }
	.hss-theme-toggle--inbar { display: inline-flex; }
}