/* ═══════════════════════════════════════════════════════════════════
   Bausteine, die Hauptseite und Shop teilen

   Kopfleiste, Knöpfe, Suchfeld, Filter, Gruppenköpfe, Fuß. Was nur die
   Hauptseite braucht, steht in startseite.css, was nur der Shop braucht,
   in shop.css. Der Shop liefert diese Datei aus site/css/ aus — es gibt
   sie nur einmal.

   Die Formensprache, in einem Satz: Flächen sind flach, eine Linie von
   1px trennt statt eines Schattens, Ecken sind 4, 8 oder 12px rund und
   nie Pillen. Farbe trägt Bedeutung (die Kategorie), nicht Schmuck.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Knöpfe ──────────────────────────────────────────────────────── */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.6rem 1rem;border-radius:var(--r);border:1px solid transparent;
  font:600 var(--t-sm)/1.2 var(--sans);white-space:nowrap;cursor:pointer;
  transition:background-color .14s, border-color .14s, color .14s;
}
.knopf:hover{text-decoration:none}
.knopf-gross{padding:.8rem 1.3rem;font-size:.9375rem}
.knopf-klein{padding:.45rem .8rem;font-size:var(--t-xs)}

.knopf-primaer{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.knopf-primaer:hover{background:var(--accent-ink);border-color:var(--accent-ink)}

.knopf-still{background:transparent;color:var(--ink);border-color:var(--line-ui)}
.knopf-still:hover{border-color:var(--ink-2);background:var(--surface)}

/* Weder Werbung noch Nebensache: nur Text, bei Berührung unterstrichen.
   Er soll die gerahmten Knöpfe daneben nicht schwächen. */
.knopf-schlicht{background:transparent;color:var(--ink-2);padding-inline:.6rem}
.knopf-schlicht:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ── Überschrift und Einleitung eines Abschnitts ─────────────────── */
.abschnitt-h{font-size:var(--t-h2);margin-bottom:var(--s-3)}
.abschnitt-p{max-width:60ch;color:var(--ink-2);font-size:var(--t-body);line-height:1.65}
/* Links im Fließtext: die Farbe allein trägt sie nicht — zum Text darum
   herum liegt sie bei 1,3:1, gefordert sind 3:1 (WCAG 1.4.1). Also
   unterstrichen, dünn und abgesetzt, damit der Absatz ruhig bleibt. */
.abschnitt-p a,.beleg-text a,.voraus-fuss a,.foot-unten a{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:color-mix(in oklab, currentColor 50%, transparent);
}
.abschnitt-p a:hover,.beleg-text a:hover,.voraus-fuss a:hover,.foot-unten a:hover{
  text-decoration-color:currentColor;
}
/* Kopf eines Abschnitts mit einem Verweis rechts: links Überschrift und
   Untertitel, rechts der Weg weiter. */
.abschnitt-kopf{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--s-4) var(--s-6);margin-bottom:var(--s-6);
}
.abschnitt-kopf .abschnitt-p{margin-top:0}
.abschnitt-link{
  display:inline-flex;align-items:center;gap:.4rem;
  font:600 var(--t-sm)/1.2 var(--sans);color:var(--accent-ink);
}

/* Code im Fließtext. :where() hält die Wertigkeit bei null, damit jeder
   Baustein sie ohne Gegenwehr überschreiben kann. */
:where(p,li,dd,td,h2,h3,figcaption) code{
  background:var(--surface-2);padding:.1em .35em;border-radius:var(--r-sm);color:var(--ink);
}
:where(pre) code{background:none;padding:0;border-radius:0}

.klein{font-size:var(--t-xs);color:var(--ink-3);line-height:1.55}
.dim{color:var(--ink-3)}

/* Ein Schlagwort: ein Name, den man nachschlägt (Abhängigkeit, Befehl,
   Sprache). Mono, 1px Linie, Ecke 4 — nie gefüllt. */
.tag,.eintrag-fakten code{
  display:inline-block;padding:.05rem .4rem;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:transparent;color:var(--ink-2);font:400 var(--t-micro)/1.55 var(--mono);
}

/* Ein gerahmter Kasten mit Kopfzeile. Der Kopf nennt in Mono, was darin
   steht — meist einen Dateinamen. */
.panel{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;
}
.panel-kopf{
  display:flex;align-items:center;gap:.6rem;padding:.55rem .9rem;
  border-bottom:1px solid var(--line);
  font:500 var(--t-micro)/1.3 var(--mono);color:var(--ink-3);
}

/* ── Kopfleiste ──────────────────────────────────────────────────── */
.site-head{
  position:sticky;top:0;z-index:50;
  background:var(--bg);border-bottom:1px solid var(--line);
}
.head-in{display:flex;align-items:center;gap:var(--s-5);min-height:var(--kopf-h)}

.marke{color:var(--ink);flex:none;display:flex;align-items:center}
.marke:hover{text-decoration:none}

/* Das Logo hängt als Hintergrundbild, nicht als <img>: den Namen der
   Marke trägt im Kopf das aria-label des Links, im Fuß role="img", und
   so bleibt das Markup frei von einem Bild ohne Aussage. Die Datei ist
   für dunklen Grund gezeichnet — weiße Buchstaben mit violettem Schein.
   Datei und Seitenverhältnis kommen aus build/logos.py. */
.marke-logo{
  display:block;height:40px;aspect-ratio:509/160;
  background:url(/assets/logo.webp) left center/contain no-repeat;
}

.haupt-nav{display:flex;gap:var(--s-5);margin-right:auto;margin-left:var(--s-3)}
.haupt-nav a{
  font:500 var(--t-sm)/1 var(--sans);color:var(--ink-2);padding:.5rem 0;
}
.haupt-nav a:hover{color:var(--ink);text-decoration:none}

.head-tools{display:flex;align-items:center;gap:var(--s-3)}

/* Die Suche in der Kopfleiste ist ein Verweis auf die Sammlung; main.js
   springt dort in das Suchfeld (auch mit Strg K). Ohne JavaScript ist es
   ein Anker. */
.kopf-suche{
  display:flex;align-items:center;gap:.55rem;min-width:11.5rem;
  padding:.45rem .65rem;border:1px solid var(--line-ui);border-radius:var(--r);
  background:var(--surface);color:var(--ink-3);font:400 var(--t-xs)/1 var(--sans);
}
.kopf-suche:hover{border-color:var(--ink-3);color:var(--ink-2);text-decoration:none}
.kopf-suche kbd{
  margin-left:auto;padding:.2rem .35rem;border:1px solid var(--line-2);border-radius:var(--r-sm);
  font:500 .6875rem/1 var(--mono);color:var(--ink-3);
}

.sprache{display:flex;gap:.1rem}
.sprache a{
  display:grid;place-items:center;min-width:2rem;min-height:2rem;border-radius:var(--r-sm);
  font:500 var(--t-micro)/1 var(--mono);color:var(--ink-3);
}
.sprache a:hover{color:var(--ink);text-decoration:none;background:var(--surface)}
.sprache a.is-on{color:var(--ink);background:var(--surface-2)}

.burger{
  display:none;place-items:center;width:38px;height:38px;padding:0;margin-left:auto;
  background:transparent;border:1px solid var(--line-ui);border-radius:var(--r);
  color:var(--ink);cursor:pointer;
}
.mobil-nav{
  display:flex;flex-direction:column;gap:var(--s-1);
  padding:var(--s-3) var(--pad) var(--s-5);border-top:1px solid var(--line);
}
.mobil-nav a{padding:.7rem .2rem;font:500 var(--t-body)/1 var(--sans);color:var(--ink-2)}
.mobil-nav .knopf{margin-top:var(--s-3);justify-content:center}

/* ── Suchfeld und Filter ─────────────────────────────────────────── */
.suche input{
  width:min(22rem,100%);padding:.6rem .85rem;
  border:1px solid var(--line-ui);border-radius:var(--r);
  background:var(--surface);color:var(--ink);font:400 var(--t-sm) var(--sans);
}
.suche input::placeholder{color:var(--ink-3)}
.suche input:focus{outline:none;border-color:var(--accent)}
.suche input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* Bleibt beim Blättern durch die Kategorien stehen — sonst muss man zum
   Filtern jedes Mal nach oben. --kopf-h ist die Höhe der Kopfleiste. Die
   Fläche ist deckend: darunter läuft Text durch. */
.filter{
  display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-6);
  position:sticky;top:var(--kopf-h);z-index:20;
  padding:var(--s-3) 0;
  background:var(--bg);border-bottom:1px solid var(--line);
}
.chip{
  display:inline-flex;align-items:center;gap:.5rem;
  /* 34px hoch — über dem Mindestmaß von 24x24 für Zielflächen. */
  padding:.5rem .8rem;border-radius:var(--r);cursor:pointer;
  background:transparent;border:1px solid var(--line-ui);color:var(--ink-2);
  font:500 var(--t-xs)/1.2 var(--sans);
  transition:border-color .14s,color .14s,background-color .14s;
}
.chip:hover{border-color:var(--gc-ink,var(--ink-2));color:var(--ink)}
.chip.is-on{
  border-color:var(--gc-ink,var(--accent-ink));color:var(--ink);background:var(--surface);
}
.chip-n{font:500 var(--t-micro)/1 var(--mono);color:var(--ink-3)}

/* ── Gruppen: Kopf mit Marke, Zähler und Beschreibung ────────────── */
.groups{display:flex;flex-direction:column;gap:clamp(2rem,4vw,3rem)}
.grp[hidden]{display:none}
.grp-name{
  display:flex;align-items:center;gap:.65rem;
  font-size:1.375rem;line-height:1.15;font-stretch:92%;
}
/* Die Marke der Kategorie: ein Quadrat von 9px in ihrer Farbe. Es steht
   vor dem Namen und ist die einzige Stelle, an der die Farbe schmückt —
   überall sonst sagt sie, wohin etwas gehört. */
.grp-name::before{
  content:"";flex:none;width:.5625rem;height:.5625rem;border-radius:2px;background:var(--gc);
}
.grp-count{font:500 var(--t-xs)/1 var(--mono);color:var(--ink-3);letter-spacing:0}
.grp-desc{margin-top:.35rem;font-size:var(--t-sm);color:var(--ink-3);max-width:62ch}

.filter-leer{
  padding:var(--s-7) 0;text-align:center;color:var(--ink-2);font-size:var(--t-sm);
}
.filter-leer b{display:block;margin-bottom:.35rem;color:var(--ink);font-weight:600}

/* ── Fuß ─────────────────────────────────────────────────────────── */
.site-foot{border-top:1px solid var(--line);padding-top:clamp(2.5rem,5vw,3.5rem)}
.foot-in{
  display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
  gap:var(--s-6) var(--s-5);padding-bottom:var(--s-7);
}
/* Im Fuß drängt nichts daneben, da trägt das Logo mehr Höhe. */
.marke-logo-fuss{height:48px}
.foot-marke p{margin-top:.6rem;font-size:var(--t-sm);color:var(--ink-3);max-width:30ch}
.site-foot nav{display:flex;flex-direction:column;align-items:flex-start}
.site-foot h2{
  margin-bottom:.45rem;font:600 var(--t-sm)/1.2 var(--sans);font-stretch:100%;
  letter-spacing:0;color:var(--ink);
}
/* Zielfläche 24px hoch statt der 20px, die die Zeile allein ergibt. */
.site-foot nav a{font-size:var(--t-sm);color:var(--ink-2);padding:.28rem 0;display:block}
.site-foot nav a:hover{color:var(--ink)}
.foot-unten{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s-3);padding-bottom:var(--s-5);
  font-size:var(--t-xs);color:var(--ink-3);
}
/* Die Linie über der Fußzeile nur so breit wie der Inhalt: der Behälter
   hat seitliches Polster, ein Rand läge darüber hinaus. */
.foot-unten::before{content:"";flex:0 0 100%;border-top:1px solid var(--line);margin-bottom:var(--s-2)}
.foot-lang a{color:var(--ink-2);padding:.28rem 0;display:inline-block}

/* ── Umbrüche ────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .foot-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kopf-suche{min-width:0}
  .kopf-suche span{display:none}
}
@media (max-width:860px){
  .haupt-nav,.head-tools{display:none}
  .burger{display:grid}
  /* Neben dem Logo steht hier nur noch der Burger. */
  :root{--kopf-h:58px}
  .marke-logo{height:36px}
  .suche input{width:100%}
}
@media (max-width:560px){
  .foot-in{grid-template-columns:minmax(0,1fr);gap:var(--s-5)}
}

/* Die mobile Navigation gehört ausschließlich unter 860px. Ohne diese
   Regel bliebe sie nach einem Wechsel von schmal zu breit offen stehen. */
@media (min-width:861px){ .mobil-nav{display:none!important} }