/* Werkstatt – Oberfläche: das Gesicht von kü:gerl

   Dieselbe Handschrift wie kuegerl.de und partner.kuegerl.de (assets/css/kuegerl.css, kundenbereich/netz-kuegerl/stil.css):
   Tinte auf Zeitungspapier, Orange als einziger Akzent, harte Tintenrahmen mit versetztem Schatten, Archivo Black in
   Großbuchstaben für Überschriften, Poppins für den Text. 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.

   Ruhig: nichts blinkt, nichts springt, kein Dunkelmodus, keine Übergänge, keine Animation. Am Handy einspaltig, Tippflächen
   mindestens 44 px, keine waagrechte Seiten-Scrollleiste.

   Farben – eine Bedeutung je Farbe:
     tinte       Schrift, Rahmen, Schatten, Kopfzeile            papier     Karten und Felder
     zeitung     Fläche der Seite                                zeitung-d  Linien und leise Flächen
     orange      der einzige Akzent: Hauptknopf, aktive Ansicht, Auswahl, Balken. Nie weiße Schrift darauf (nur 3,0:1), immer
                 Tinte (6,3:1); nie für „Warnung“
     orange-t    Orange als Schrift auf hellem Grund (Links)     grau       gedämpfte Schrift
     auf-dunkel  Schrift auf der schwarzen 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 Symbol (icon.svg, icon-180.png) ist das aufgeschnittene kü:gerl aus dem Partnerbereich.

   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 */
@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; }
/* Archivo Black: Überschriften, Wortmarke, große Zahlen (wie auf kuegerl.de) */
@font-face { font-family: "Archivo Black"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/schrift/archivo-black.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC; }
@font-face { font-family: "Archivo Black"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/schrift/archivo-black-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* Palette von kuegerl.css / partner.kuegerl.de */
  --tinte: #111111;
  --papier: #FFFFFF;
  --zeitung: #F4F0E8;
  --zeitung-d: #E8E1D5;
  --orange: #EE7203;
  --orange-h: #FF8C24;
  --orange-t: #A34F02;
  --rot: #E2300B;
  --gelb: #F9B806;
  --vanille: #F6E7C8;     /* Sortenfarben von kuegerl.de: noch ohne Verwendung, damit eine spätere Ansicht sie hat */
  --erdbeere: #F9D6D8;
  --grau: #5C5852;
  --auf-dunkel: #E7E3DC;
  --auf-dunkel-leise: #B7B1A7;
  /* 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: "Archivo Black", "Segoe UI Black", "Arial Black", Helvetica, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --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;
  --tipp: 44px;
  --rand: clamp(1rem, 4vw, 2.5rem);
  /* Seitenrand bis zur Inhaltsbreite von 62rem: die Kopfzeile reicht bis zum Rand, der Inhalt steht in der Mitte */
  --seite: max(var(--rand), calc((100% - 62rem) / 2));
  color-scheme: light;
}

*, *::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: 1rem;
  font-weight: 400;
  line-height: 1.55;
}
::selection { background: var(--orange); color: var(--tinte); }
[hidden] { display: none !important; }
h1, h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.08; }
h1 { margin: 1.5rem 0 .75rem; font-size: clamp(1.7rem, 1.1rem + 2.6vw, 2.6rem); }
h2 { margin: 0; font-size: clamp(1.25rem, 1rem + 1.1vw, 1.6rem); }
p { margin: 0 0 .75rem; }
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 (15:1), auf der schwarzen Kopfzeile Orange (6:1) – Orange auf Zeitung wären nur 2,6: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: .875rem; }
.zentriert { padding: 2rem var(--rand); text-align: center; }
.zahl { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── Knöpfe ──────────────────────────────────────────────────────────────── */
/* Hauptknopf: Orange mit Tintenschrift, 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: .5rem 1.25rem;
  border: var(--rahmen); border-radius: var(--r-pill);
  background: var(--orange); color: var(--tinte);
  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(--tinte); }
.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 */
.knopf.zweit { background: var(--papier); font-weight: 500; box-shadow: var(--schatten-xs); }
.knopf.zweit:hover { background: var(--zeitung-d); }
.knopf.zweit:active { box-shadow: 1px 1px 0 var(--tinte); }
.knopf.zweit[disabled], .knopf.zweit[disabled]:hover { background: var(--papier); box-shadow: var(--schatten-xs); }
.knopf.klein { padding: .25rem 1rem; font-size: .9rem; }

/* ── Meldungen ───────────────────────────────────────────────────────────── */
/* „hat nicht geklappt“: Tintenrahmen, Rot nur am linken Rand (wie die Antworten im Partnerbereich) */
.meldung {
  margin: 0 0 1rem; padding: .75rem 1rem;
  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: 1rem 0 0; padding: .6rem .9rem;
  border: 2px dashed var(--tinte); border-radius: var(--r-m); background: var(--papier); color: var(--tinte);
}

/* ── Anmeldeseite und Einladungsseite ────────────────────────────────────── */
/* Auf der Anmeldeseite steht die Karte auf dem Punktraster der kü:gerl-Seiten (Zeitung, Tintenpunkte). */
body:has(.karte-mitte) {
  background: radial-gradient(circle at 1px 1px, rgb(17 17 17 / .13) 1.1px, transparent 1.7px) 0 0 / 22px 22px, var(--zeitung);
}
.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: 5.5rem; margin: 0 auto 1rem; filter: drop-shadow(3px 3px 0 var(--tinte)); }
.karte-mitte h1 { margin-top: 0; font-size: clamp(1.5rem, 1.15rem + 1.5vw, 1.9rem); }
/* „kü:gerl Werkstatt“ ist die Wortmarke: klein geschrieben, nicht in Großbuchstaben */
.karte-mitte h1.wortmarke-gross { margin-bottom: .5rem; font-size: clamp(1.9rem, 1.3rem + 2.6vw, 2.4rem); letter-spacing: -.02em; line-height: 1.05; text-transform: none; }
.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: schwarze Kopfzeile, Inhalt in der Mitte ─────────────── */
.huelle { padding: 0 0 3rem; }
.huelle > :not(.kopf) { margin-left: var(--seite); margin-right: var(--seite); }

/* Die Kopfzeile ist ein Raster: Am Handy Wortmarke und „Abmelden“ oben, darunter Stand und Name, dann die Navigation. Die
   beiden inneren Behälter (kopf-zeile, kopf-person) lösen sich dafür auf (display: contents) – ihre Inhalte liegen dann im Raster. */
.kopf {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "marke abmelden" "stand wer" "nav nav";
  align-items: center; column-gap: .75rem;
  padding: .4rem var(--seite) .6rem;
  background: var(--tinte); color: var(--auf-dunkel);
}
.kopf-zeile, .kopf-person { display: contents; }
.marke {
  grid-area: marke; display: inline-flex; align-items: center; gap: .6rem; min-width: 0; min-height: var(--tipp);
  color: var(--papier); font-family: var(--display); font-size: 1.15rem; letter-spacing: -.01em; line-height: 1.05; text-decoration: none;
}
.marke:hover { color: var(--papier); }
.logo { display: block; flex: none; width: 2.5rem; height: 2.5rem; padding: .1rem; border-radius: 50%; background: var(--zeitung); }
.kopf-person .knopf {
  grid-area: abmelden; background: transparent; border-color: var(--auf-dunkel); color: var(--auf-dunkel); box-shadow: none;
  font: 600 .72rem/1.4 var(--mono); letter-spacing: .1em; 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 { grid-area: wer; justify-self: end; max-width: 12rem; overflow: hidden; color: var(--auf-dunkel); text-overflow: ellipsis; white-space: nowrap; }
.stand { grid-area: stand; color: var(--auf-dunkel-leise); }

/* Navigation: Pillen in Mono-Großbuchstaben; die aktive Ansicht ist die orange Pille (Tinte auf Orange) */
.nav { grid-area: nav; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; margin-top: .35rem; }
.nav-link {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--tipp); padding: .25rem .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(--tinte); }

main { display: block; }

/* ── Karten und Listen (Werkbank) ────────────────────────────────────────── */
.karten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 1rem 0 1.75rem; }
.karte { padding: 1rem 1.1rem; border: var(--rahmen); border-radius: var(--r-l); background: var(--papier); box-shadow: var(--schatten-s); }
/* Kartentitel und andere Kleinbeschriftungen: Mono in Großbuchstaben wie die Augenbrauen auf kuegerl.de */
.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(--display); font-size: 2rem; font-weight: 400; letter-spacing: -.01em; line-height: 1.1; }
.karte-zusatz { margin: 0; color: var(--grau); font-size: .85rem; }
.karte-liste { display: grid; grid-template-columns: auto 1fr; gap: .1rem .75rem; margin: .5rem 0 0; font-size: .85rem; }
.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 .75rem; }
.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: .8rem 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: var(--rahmen); 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: .85rem; 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: .85rem; 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 ─────────────────────────────────────────────────── */
@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; }
  .kopf { grid-template-columns: auto minmax(0, 1fr) auto auto auto; grid-template-areas: "marke . stand wer abmelden" "nav nav nav nav nav"; column-gap: 1rem; }
  .marke { font-size: 1.3rem; }
  .nav { grid-template-columns: repeat(4, max-content); justify-content: start; gap: .35rem; }
  .nav-link { padding: .25rem 1.1rem; font-size: .75rem; letter-spacing: .08em; }
  .karte-mitte { margin-top: 12vh; }
}