/* Werkstatt – Oberfläche: der Rahmen der alveare food GmbH

   Die Werkstatt gehört der GmbH, nicht einer Marke (Auftrag B, 11.10.2026). Der Rahmen ist der von alveare-food.de: Creme als Seite, das
   Dunkelbraun der Wortmarke als Schrift, Linien und Kopfzeile, Poppins für alles, dazu das Zeichen der GmbH (die Wabe). Palette und Namen
   stehen in _Web-Assets/Markenfarben.md (Quelle: alveare.css der Webseite). Alles liegt unter /static (die CSP lässt style-src, font-src und
   img-src nur 'self' und data: zu) – nichts kommt von einem fremden Server.

   Der Akzent gehört zum Bereich, den man oben im Schalter wählt (Alles | Catering | kü:gerl): app.js setzt data-bereich am Wurzelelement
   (<html>), und die Blöcke :root[data-bereich="…"] unten legen --orange, --orange-h, --orange-t und --auf-orange fest. Ohne data-bereich (Anmeldeseite)
   und bei „Alles“ gilt der Akzent der alveare-Marke. Die Namen der Eigenschaften stammen aus der Zeit, als nur kü:gerl gemeint war
   („orange“) – gemeint ist heute: der Akzent des gewählten Bereichs. Ansichten benutzen nur diese Eigenschaften, nie eine eigene Farbe.

   Zwei Dichten wie bei SAP Fiori (Auftrag U, 11.10.2026): Die Werte stehen als Eigenschaften im :root.
     Voreinstellung = Touch (pointer: coarse, auch wenn der Browser es nicht sagt): großzügig, Tippflächen mindestens 44 px.
     @media (pointer: fine) = Maus und Trackpad: kompakt wie ein ERP-System – Tabellenzeilen 32 px, Text 13 bis 14 px, Abstände
     etwa halbiert. Alle Ansichten benutzen --zeile, --text-tabelle, --abstand … statt fester Maße.
   Harte Schatten gibt es nur für das gerade Gewählte (aktiver Reiter, gewählte Zelle, gewählter Knopf) und für Hauptknopf
   und Anmeldekarte; Listen sind Tabellen mit feinen Linien.

   Ruhig: nichts blinkt, nichts springt, kein Dunkelmodus, keine Übergänge, keine Animation, keine Wabenmuster als Hintergrund. Am Handy
   einspaltig, keine waagrechte Seiten-Scrollleiste (Tabellen dürfen in ihrem Rahmen scrollen).

   Farben – eine Bedeutung je Farbe:
     tinte       Schrift, Rahmen, Schatten, Kopfzeile (Dunkel)   papier     Karten und Felder
     zeitung     Fläche der Seite (Creme)                        zeitung-d  Linien und leise Flächen
     orange      der Akzent des Bereichs: Hauptknopf, aktive Ansicht, Auswahl, Balken. Die Schrift darauf ist --auf-orange (je Bereich so
                 gewählt, dass sie mindestens 4,5:1 hat; --tinte hat es auf jedem Akzent auch); nie weiße Schrift darauf; nie für „Warnung“
     orange-t    der Akzent als Schrift auf hellem Grund (Links)  grau       gedämpfte Schrift
     auf-dunkel  Schrift auf der dunklen Kopfzeile
   Die Ampel (grün, gelb, rot) ist davon getrennt und zeigt nie nur durch Farbe etwas an: immer das Wort, dazu eine Form
   (Kreis, Raute, Quadrat mit Tintenrand). Rot steht außerdem am Rand einer Meldung („hat nicht geklappt“).

   Das Zeichen (icon.svg, icon-180.png) ist die Wabe der alveare food GmbH von der Webseite.

   Keine Inline-Stile im HTML und im JS (die CSP lässt style-src nur 'self' zu): Alles, was gestaltet wird, ist hier. */

/* Poppins, selbst gehostet (static/schrift/), latin und latin-ext wie auf den Webseiten der GmbH */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/schrift/poppins-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/schrift/poppins-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/schrift/poppins-500-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/schrift/poppins-500-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/schrift/poppins-600-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/schrift/poppins-600-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Palette der alveare food GmbH (alveare.css / Markenfarben.md). Die Namen der Oberfläche darunter sind die, die die Ansichten benutzen. */
  --creme: #FFF8EF;
  --dunkel: #3A1A0B;
  --logo-braun: #7D391D;
  --orange-hell: #F39B4A;     /* „alveare“ in der Wortmarke der Kopfzeile */
  --ocker: #CC8527;
  --honig: #F6D3A6;
  /* Namen der Oberfläche – Werte der alveare-Palette. Bei „Alles“ (Vorgabe) ist der Akzent der Ocker der Wabe (der Honig) mit dunkler Schrift;
     das Orange von kü:gerl und das Mint von Catering unterscheiden sich davon deutlich (Blöcke :root[data-bereich] unten). */
  --tinte: #3A1A0B;
  --papier: #FFFFFF;
  --zeitung: #FFF8EF;
  --zeitung-d: #F0E2CE;
  --orange: #CC8527;
  --orange-h: #F39B4A;
  --orange-t: #A34F02;
  --auf-orange: #3A1A0B;
  --rot: #E2300B;
  --gelb: #F9B806;
  --vanille: #F6E7C8;     /* Sortenfarben von kuegerl.de: Füllung von Mandel-Vanille und Erdbeer-Minze in der Zeichnung (Ansicht Rezeptur) */
  --erdbeere: #F9D6D8;
  --mango: #FBE3A8;       /* Mango-Lemongrass, ebenfalls von kuegerl.de */
  --huelle: #D19A5B;      /* Zeichnung des aufgeschnittenen kü:gerl: Hülle, Füllung, Krümel (Ansicht Rezeptur) */
  --fuellung: #F8E7C6;
  --kruemel: #7A5634;
  --grau: #6B5444;
  --auf-dunkel: #FFF8EF;
  --auf-dunkel-leise: #D9C3AC;
  --linie-dunkel: #9A8472;     /* Rand eines Knopfs auf der dunklen Kopfzeile */
  /* Ampel – getrennt vom Akzent. Grün ist ein eigener, dunkler Ton (wie „bezahlt“ im Partnerbereich). */
  --ampel-gruen: #1D6B3A;
  --ampel-gelb: #F9B806;
  --ampel-rot: #E2300B;
  --schrift: "Poppins", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --display: "Poppins", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;   /* wie --schrift; Überschriften sind Poppins in Halbfett (font-weight: 600) */
  --mono: "Poppins", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;   /* der Name stammt aus der kü:gerl-Zeit; die Kleinbeschriftungen (Großbuchstaben mit Abstand) sind jetzt Poppins, es gibt keine Schreibmaschinenschrift mehr */
  --rahmen: 2px solid var(--tinte);
  --schatten-xs: 2px 2px 0 var(--tinte);
  --schatten-s: 3px 3px 0 var(--tinte);
  --schatten-m: 6px 6px 0 var(--tinte);
  --r-s: .5rem;
  --r-m: .85rem;
  --r-l: 1.15rem;
  --r-pill: 999px;
  /* Dichte, Voreinstellung = Touch (siehe oben; mit der Maus gilt der Block @media (pointer: fine) gleich darunter) */
  --tipp: 44px;            /* Tippfläche: Knöpfe, Reiter, Links */
  --zeile: 44px;           /* Tabellenzeile */
  --text: 1rem;            /* Fließtext */
  --text-tabelle: .95rem;  /* Text in Tabellen */
  --text-klein: .875rem;   /* kleiner Text, Zusätze */
  --abstand: 1rem;         /* Abstand zwischen Blöcken */
  --abstand-s: .5rem;
  --abstand-l: 1.75rem;
  --zelle-x: .6rem;        /* Polster einer Tabellenzelle */
  --zelle-y: .4rem;
  --h1: clamp(1.6rem, 1.1rem + 2.4vw, 2.3rem);
  --h2: clamp(1.1rem, 1rem + .7vw, 1.4rem);
  --h3: 1rem;
  --rand: clamp(1rem, 4vw, 2.5rem);
  --breite: 62rem;         /* größte Inhaltsbreite */
  /* Seitenrand bis zur Inhaltsbreite: die Kopfzeile reicht bis zum Rand, der Inhalt steht in der Mitte */
  --seite: max(var(--rand), calc((100% - var(--breite)) / 2));
  color-scheme: light;
}
/* Der Akzent der Bereiche (Auftrag B). „Alles“ steht oben im :root. Je Bereich: Fläche (--orange), Fläche beim Daraufzeigen (--orange-h),
   der Akzent als Schrift auf hellem Grund (--orange-t) und die Schrift auf der Fläche (--auf-orange). test/app_pruefen.js rechnet jede
   Paarung nach (mindestens 4,5:1; die Tabelle steht im Bericht von WS-B-bereiche). */
/* kü:gerl: das Orange von kuegerl.de mit Tinte (nicht mit Dunkelbraun) */
:root[data-bereich="kuegerl"] {
  --orange: #EE7203;
  --orange-h: #FF8C24;
  --orange-t: #A34F02;
  --auf-orange: #111111;
}
/* Catering: Mint von apeice.de. Petrol (#466C62) hat auf Mint nur 3,6:1 und trägt deshalb hier keine Schrift auf der Fläche, sondern steht als
   Schrift auf hellem Grund; auf Mint steht Espresso (11,1:1). */
:root[data-bereich="catering"] {
  --orange: #8BD8C4;
  --orange-h: #9FF2DD;
  --orange-t: #466C62;
  --auf-orange: #290C05;
}
/* Maus und Trackpad: kompakt wie ein ERP-System. Die Tippfläche schrumpft auf 30 px, die Zeile auf 32 px, der Text auf 13 bis 14 px,
   Abstände und Ränder etwa auf die Hälfte; die Inhaltsbreite wächst, damit Tabellen nicht scrollen müssen. */
@media (pointer: fine) {
  :root {
    --tipp: 30px;
    --zeile: 32px;
    --text: .875rem;
    --text-tabelle: .8125rem;
    --text-klein: .75rem;
    --abstand: .5rem;
    --abstand-s: .25rem;
    --abstand-l: .875rem;
    --zelle-x: .4rem;
    --zelle-y: .15rem;
    --h1: 1.3rem;
    --h2: .95rem;
    --h3: .8125rem;
    --rand: clamp(.5rem, 1vw, 1rem);
    --breite: 96rem;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--zeitung);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: var(--text);
  font-weight: 400;
  line-height: 1.5;
}
::selection { background: var(--orange); color: var(--auf-orange); }
[hidden] { display: none !important; }
h1, h2 { font-family: var(--schrift); font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
h1 { margin: var(--abstand-l) 0 var(--abstand); font-size: var(--h1); }
h2 { margin: 0; font-size: var(--h2); }
p { margin: 0 0 var(--abstand); }
a { color: var(--orange-t); text-decoration-thickness: 2px; text-underline-offset: .2em; }
a:hover { color: var(--tinte); }
button { font: inherit; }
/* Fokus: Tinte auf hellem Grund, auf der dunklen Kopfzeile der Akzent (auf Dunkelbraun mindestens 4,7:1) */
:focus-visible { outline: 3px solid var(--tinte); outline-offset: 2px; }
.kopf :focus-visible { outline-color: var(--orange); }

.leise { color: var(--grau); }
.klein { font-size: var(--text-klein); }
.zentriert { padding: 2rem var(--rand); text-align: center; }
.zahl { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── Knöpfe ──────────────────────────────────────────────────────────────── */
/* Hauptknopf: der Akzent des Bereichs mit der Schrift darauf, Tintenrand, harter Schatten. Gedrückt schrumpft der Schatten – der Knopf selbst
   bleibt stehen (kein Verschieben, kein Übergang), sonst verfehlt ein Klick am Rand ihn. */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tipp); padding: var(--abstand-s) calc(var(--abstand-l) * .7);
  border: var(--rahmen); border-radius: var(--r-pill);
  background: var(--orange); color: var(--auf-orange);
  font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
  box-shadow: var(--schatten-s);
}
.knopf:hover { background: var(--orange-h); color: var(--auf-orange); }
.knopf:active { box-shadow: 1px 1px 0 var(--tinte); }
.knopf[disabled], .knopf[disabled]:hover { background: var(--orange); opacity: .55; cursor: default; box-shadow: var(--schatten-s); }
.knopf.gross { width: 100%; min-height: 52px; font-size: 1.05rem; }
/* zweiter Knopf: Papier mit Tintenrand, ohne Akzentfarbe und ohne Schatten (der harte Schatten gehört dem Gewählten) */
.knopf.zweit { background: var(--papier); color: var(--tinte); font-weight: 500; box-shadow: none; }
.knopf.zweit:hover { background: var(--zeitung-d); color: var(--tinte); }
.knopf.zweit:active { box-shadow: none; }
.knopf.zweit[disabled], .knopf.zweit[disabled]:hover { background: var(--papier); box-shadow: none; }
.knopf.klein { padding: .25rem var(--abstand-l); font-size: var(--text-klein); }
@media (pointer: fine) {
  .knopf.gross { min-height: 40px; font-size: 1rem; }
}

/* ── Meldungen ───────────────────────────────────────────────────────────── */
/* „hat nicht geklappt“: Tintenrahmen, Rot nur am linken Rand (wie die Antworten im Partnerbereich) */
.meldung {
  margin: 0 0 var(--abstand); padding: var(--abstand-s) var(--abstand);
  border: var(--rahmen); border-left: 6px solid var(--rot); border-radius: 0 var(--r-m) var(--r-m) 0;
  background: var(--papier); color: var(--tinte); text-align: left;
}
/* leiser Hinweisstreifen: ein Zettel mit gestricheltem Rand, ohne Farbe */
.hinweis-band {
  margin: var(--abstand) 0 0; padding: var(--abstand-s) var(--abstand);
  border: 1px dashed var(--tinte); border-radius: var(--r-m); background: var(--papier); color: var(--tinte);
}

/* ── Anmeldeseite und Einladungsseite ────────────────────────────────────── */
/* Eine Karte auf Creme, mit Tintenrand und hartem Schatten – kein Muster im Hintergrund. Sie steht im Akzent von „Alles“ (app.js nimmt
   data-bereich weg, solange niemand angemeldet ist). */
.karte-mitte {
  max-width: min(26rem, calc(100% - 2 * var(--rand))); margin: 8vh auto 3rem; padding: 2rem 1.5rem 1.75rem;
  border: var(--rahmen); border-radius: var(--r-l); background: var(--papier); box-shadow: var(--schatten-m);
  text-align: center;
}
.logo-gross { display: block; width: 5.5rem; height: auto; margin: 0 auto 1rem; }
.karte-mitte h1 { margin-top: 0; font-size: clamp(1.4rem, 1.1rem + 1.5vw, 1.75rem); }
/* „alveare food · Werkstatt“ ist die Wortmarke: wie auf der Webseite alveare in Orange und food in Braun, dahinter der Name des Werkzeugs */
.karte-mitte h1.wortmarke-gross { margin-bottom: .5rem; font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.1rem); font-weight: 600; letter-spacing: .01em; line-height: 1.1; }
.wortmarke-gross .marke-alveare { color: var(--orange-t); }
.wortmarke-gross .marke-food { color: var(--logo-braun); }
.wortmarke-gross .marke-trenner { display: none; }   /* „Werkstatt“ steht darunter, der Punkt wäre allein am Zeilenende */
.wortmarke-gross .marke-teil { display: block; margin-top: .15rem; font-size: .6em; font-weight: 500; letter-spacing: .04em; color: var(--tinte); }
.karte-mitte .leise { margin-bottom: 1.5rem; }
.karte-mitte .meldung { background: var(--zeitung); }
.karte-mitte .knopf { margin-top: .25rem; }
.karte-mitte .link-unten { display: flex; align-items: center; justify-content: center; min-height: var(--tipp); margin-top: 1rem; }

/* ── Rahmen der App: dunkle Kopfzeile, Inhalt in der Mitte ───────────────── */
.huelle { padding: 0 0 var(--abstand-l); }
.huelle > :not(.kopf) { margin-left: var(--seite); margin-right: var(--seite); }

/* Die Kopfzeile ist ein Raster. Die inneren Behälter (kopf-zeile, kopf-person) lösen sich dafür auf (display: contents) – ihre Inhalte
   liegen dann im Raster. Der Bereich (Schalter) steht gleich neben der Wortmarke, denn er ist die oberste Ebene der Navigation; darunter
   die Reiter der Ansichten. Zwei Fassungen, beide von unten nach oben (mobile first):
   · schmal (unter 70rem): oben Zeichen (die Wortmarke erst ab 40rem) und Schalter, darunter die Reiter (je drei in einer Reihe, so viele
     Reihen wie nötig – nichts scrollt, nichts versteckt sich), zuletzt das Konto: Stand und Name links, „Einstellungen“ und „Abmelden“ rechts;
   · ab 70rem (Laptop): oben Wortmarke, Schalter, dann rechts Stand, Name, „Einstellungen“, „Abmelden“; darunter die Reiter in einer Reihe,
     die bei sehr vielen Reitern umbricht. */
.kopf {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "marke bereich bereich bereich" "nav nav nav nav" "status status einst abmelden";
  align-items: center; column-gap: .5rem; row-gap: 0;
  padding: .25rem var(--seite) .3rem;
  background: var(--tinte); color: var(--auf-dunkel);
  border-bottom: 3px solid var(--orange);
}
.kopf-zeile, .kopf-person { display: contents; }
.marke {
  grid-area: marke; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-width: var(--tipp); min-height: var(--tipp);
  color: var(--auf-dunkel); font: 600 1rem/1 var(--schrift); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
}
.marke:hover { color: var(--papier); }
.logo { display: block; flex: none; width: 2.1rem; height: auto; }
/* Am Handy trägt das Zeichen allein die Zeile; der Name der Wortmarke ist erst ab 40rem sichtbar (für Vorleser steht er im aria-label des Links) */
.marke-text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.marke-alveare { color: var(--orange-hell); }
.marke-food { color: var(--auf-dunkel); }
.marke-trenner, .marke-teil { color: var(--auf-dunkel-leise); }

/* Der Schalter „Alles | Catering | kü:gerl“: drei Knöpfe in einer Reihe, genau einer ist gedrückt (aria-pressed) und trägt den Akzent des
   Bereichs mit der Schrift darauf. Die Knöpfe überlappen sich um den Rand (margin-left), so entsteht ein durchgehender Rand mit runden Enden;
   jeder Knopf ist so hoch wie eine Tippfläche. */
.bereich-schalter { grid-area: bereich; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); min-width: 0; }
.bereich-knopf {
  min-height: var(--tipp); padding: 0 .5rem;
  border: 2px solid var(--linie-dunkel); background: transparent; color: var(--auf-dunkel);
  font: 600 .8125rem/1.2 var(--schrift); text-align: center; cursor: pointer;
}
.bereich-knopf + .bereich-knopf { margin-left: -2px; }
.bereich-knopf:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); }
.bereich-knopf:last-child { border-radius: 0 var(--r-pill) var(--r-pill) 0; }
.bereich-knopf:hover { position: relative; z-index: 1; border-color: var(--auf-dunkel); color: var(--papier); }
.bereich-knopf[aria-pressed="true"] { position: relative; z-index: 1; background: var(--orange); border-color: var(--orange); color: var(--auf-orange); }

/* Das Konto: Stand und Name übereinander (am Handy), daneben „Einstellungen“ und „Abmelden“ */
.kopf-status { grid-area: status; display: flex; flex-direction: column; min-width: 0; }
.kopf-person .knopf {
  grid-area: abmelden; background: transparent; border-color: var(--auf-dunkel); color: var(--auf-dunkel); box-shadow: none;
  padding: .15rem .8rem; font: 600 .68rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
.kopf-person .knopf:hover { background: transparent; border-color: var(--orange); color: var(--orange); }
.kopf-person .knopf:active { box-shadow: none; }
.wer, .stand { margin: 0; font: 600 .68rem/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.wer { min-width: 0; max-width: 12rem; overflow: hidden; color: var(--auf-dunkel); text-overflow: ellipsis; white-space: nowrap; }
.stand { color: var(--auf-dunkel-leise); }
/* „Einstellungen“: ein Link neben dem Namen, kein Reiter; die offene Seite trägt den Akzent wie ein Reiter */
.kopf-link {
  grid-area: einst; display: inline-flex; flex: none; align-items: center; min-height: var(--tipp); padding: .15rem .55rem;
  border: 2px solid transparent; border-radius: var(--r-pill);
  color: var(--auf-dunkel); font: 600 .68rem/1.2 var(--mono); letter-spacing: .06em; text-decoration: none; text-transform: uppercase; white-space: nowrap;
}
.kopf-link:hover { border-color: var(--auf-dunkel); color: var(--papier); }
.kopf-link[aria-current="page"] { background: var(--orange); border-color: var(--orange); color: var(--auf-orange); }

/* Navigation: Pillen in Mono-Großbuchstaben; die aktive Ansicht trägt den Akzent. Am Handy drei Spalten, so viele Reihen wie nötig (jeder
   Reiter bleibt mindestens so hoch wie eine Tippfläche, nichts scrollt – egal, wie viele Reiter es gibt); ab 45rem eine Reihe, die umbricht. */
.nav { grid-area: nav; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .2rem; margin-top: .15rem; }
.nav-link {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--tipp); padding: .15rem .15rem;
  border: 2px solid transparent; border-radius: var(--r-pill);
  color: var(--auf-dunkel); font: 600 .68rem/1.2 var(--mono); letter-spacing: .04em; text-align: center; text-decoration: none; text-transform: uppercase;
}
.nav-link:hover { border-color: var(--auf-dunkel); color: var(--papier); }
.nav-link[aria-current="page"] { background: var(--orange); border-color: var(--orange); color: var(--auf-orange); }

main { display: block; }

/* ── Bereiche im Inhalt ──────────────────────────────────────────────────── */
/* Der schmale Hinweis unter der Kopfzeile („Bisher nur kü:gerl“, bei Ansichten ohne Catering unter „Alles“): eine Zeile, ruhig */
.bereich-band {
  margin: var(--abstand-s) 0 0; padding: 0 0 0 .6rem; border-left: 3px solid var(--orange);
  color: var(--grau); font-size: var(--text-klein); font-weight: 500; line-height: 1.4;
}
/* Der einheitliche Satz für alles, was es in einem Bereich noch nicht gibt: ein Zettel mit gestricheltem Rand wie ein Hinweis */
.bereich-leer {
  max-width: 40rem; margin: var(--abstand) 0; padding: var(--abstand) calc(var(--abstand) * 1.2);
  border: 1px dashed var(--tinte); border-radius: var(--r-m); background: var(--papier);
}
.bereich-leer-satz { margin: 0 0 var(--abstand-s); }
.bereich-link { display: inline-flex; align-items: center; min-height: var(--tipp); font-size: var(--text-klein); font-weight: 600; }
.bereich-links { display: flex; flex-wrap: wrap; gap: 0 var(--abstand-l); margin: 0; }
/* „Was fehlt“ und „Für beide Bereiche“ (Werkbank bei Catering) */
.bereich-fehlt { max-width: 40rem; margin: var(--abstand-l) 0 0; }
.bereich-fehlt h2 { margin: 0 0 var(--abstand-s); }
.bereich-liste { margin: 0 0 var(--abstand-s); padding-left: 1.2rem; }

/* ── Abschnitte, Kennzahlen, Hinweise ────────────────────────────────────── */
/* Karte: nur noch für die Anmeldung (karte-mitte), die Einstellungen und den Platzhalter der Werkbank – flach, mit feiner Linie;
   Listen sind Tabellen (ansichten.css). */
.karten { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--abstand); margin: var(--abstand) 0 var(--abstand-l); }
.karte { padding: var(--abstand) calc(var(--abstand) * 1.1); border: 1px solid var(--tinte); border-radius: var(--r-m); background: var(--papier); }
/* Kartentitel und andere Kleinbeschriftungen: Mono in Großbuchstaben */
.karte-titel { margin: 0; color: var(--grau); font: 600 .72rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.karte-zahl { margin: .3rem 0 .25rem; font-family: var(--schrift); font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.1; }
.karte-zusatz { margin: 0; color: var(--grau); font-size: var(--text-klein); }
.karte-liste { display: grid; grid-template-columns: auto 1fr; gap: .1rem .75rem; margin: .5rem 0 0; font-size: var(--text-klein); }
.karte-liste dt { color: var(--grau); font-weight: 500; }
.karte-liste dd { margin: 0; overflow-wrap: anywhere; }

.abschnitt-kopf { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 var(--abstand-s); }
.abschnitt-kopf .zahl { color: var(--grau); font: 600 .75rem/1.4 var(--mono); }
.hinweise { margin: 0; padding: 0; list-style: none; }
/* Am Handy untereinander: Art, Text, Link. Ab 720 px nebeneinander. */
.hinweis { display: grid; grid-template-columns: minmax(0, 1fr); gap: .3rem .9rem; align-items: start; padding: var(--abstand) 0; border-top: 1px solid var(--zeitung-d); }
.hinweis:last-child { border-bottom: 1px solid var(--zeitung-d); }
.hinweis-art {
  justify-self: start; padding: .05rem .6rem; border: 1px solid var(--tinte); border-radius: var(--r-pill); background: var(--papier);
  font: 600 .7rem/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
.hinweis-text { min-width: 0; overflow-wrap: anywhere; }
.hinweis-link { display: inline-flex; align-items: center; justify-self: start; min-height: var(--tipp); font-size: var(--text-klein); font-weight: 600; }

/* Ampel: Form plus Wort, nie Farbe allein – Kreis (grün), Raute (gelb), Quadrat (rot), jeweils mit Tintenrand. Ohne Farbe
   (unbekannt) bleibt es ein leerer Kreis mit gestricheltem Rand. */
.ampel { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--text-klein); font-weight: 500; }
.ampel::before { content: ""; flex: none; width: .8rem; height: .8rem; border: 2px dashed var(--tinte); border-radius: 50%; background: var(--papier); }
.ampel.gruen::before { border-style: solid; background: var(--ampel-gruen); }
.ampel.gelb::before { width: .7rem; height: .7rem; margin: 0 .05rem; border-style: solid; border-radius: 0; background: var(--ampel-gelb); transform: rotate(45deg); }
.ampel.rot::before { border-style: solid; border-radius: .12rem; background: var(--ampel-rot); }

/* ── Größere Bildschirme ─────────────────────────────────────────────────── */
/* ab 40rem: der Name der Wortmarke ist da (vorher trägt das Zeichen allein die Zeile) */
@media (min-width: 40rem) {
  .marke-text { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; }
  .marke { font-size: 1.1rem; }
  .bereich-schalter { justify-self: start; grid-auto-columns: minmax(5.2rem, auto); }
  .bereich-knopf { padding: 0 1rem; }
}
@media (min-width: 720px) {
  .karten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hinweis { grid-template-columns: 8.5rem minmax(0, 1fr) auto; align-items: baseline; }
  .hinweis-link { min-height: 0; justify-self: end; }
  .nav { display: flex; flex-wrap: wrap; gap: .35rem; }
  .nav-link { flex: none; padding: .25rem 1.1rem; font-size: .75rem; letter-spacing: .08em; }
  .karte-mitte { margin-top: 12vh; }
}
@media (min-width: 70rem) {
  .kopf {
    grid-template-columns: auto auto minmax(0, 1fr) auto auto auto;
    grid-template-areas: "marke bereich . status einst abmelden" "nav nav nav nav nav nav";
    column-gap: .75rem; padding-top: .3rem; padding-bottom: .3rem;
  }
  .kopf-status { flex-direction: row; align-items: baseline; gap: .75rem; }
  .nav { margin-top: .1rem; gap: .2rem; }
  .nav-link { padding: .15rem .8rem; }
}
/* Mit der Maus ist die Kopfzeile flach: zwei Zeilen von je 30 bis 34 px */
@media (pointer: fine) {
  .logo { width: 1.75rem; }
  .marke { font-size: 1rem; }
  .bereich-knopf { font-size: .75rem; }
  .kopf-person .knopf { padding: .1rem .7rem; }
  .kopf-link, .nav-link { padding-top: .05rem; padding-bottom: .05rem; }
}
@media (min-width: 40rem) and (pointer: fine) {
  .marke { font-size: 1rem; }
}