/* ============================================================================
   rosaLinde – style.css
   Eine Datei, sortiert per @layer. Reihenfolge = Prioritaet (spaeter gewinnt).
   Tokens und Regeln nach SPEC Abschnitt 6 und 11.
   ========================================================================= */

@layer schriften, basis, marken, layout, komponenten, hilfen;

/* ---------------------------------------------------------------- SCHRIFTEN
   Selbst gehostet, keine externen Ressourcen (SPEC Abschnitt 10).
   Beide sind Variable Fonts: eine Datei deckt alle Schnitte ab.
   Lizenz: SIL Open Font License 1.1, siehe fonts/LIZENZ.txt
   -------------------------------------------------------------------------- */
@layer schriften {
  @font-face {
    font-family: 'Bodoni Moda';
    src: url('../fonts/bodoni-moda-latin.woff2') format('woff2');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
    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: 'Bodoni Moda';
    src: url('../fonts/bodoni-moda-latin-ext.woff2') format('woff2');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
    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: 'Karla';
    src: url('../fonts/karla-latin.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    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: 'Karla';
    src: url('../fonts/karla-latin-ext.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    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;
  }
}

/* ------------------------------------------------------------------- MARKEN
   Farben, Typo-Skala, Raumskala. Einzige Quelle der Wahrheit.
   -------------------------------------------------------------------------- */
@layer marken {
  :root {
    /* Farben (SPEC 6.1). Kein Weiss, hellster Ton ist --creme. */
    --creme:      #F7EFE9;
    --papier:     #EDE0D4;
    --rosa:       #C08A85;
    --rosa-tief:  #9B655F;
    --rosa-hauch: #E8CFC8;
    --grau:       #33302D;
    /* SPEC 6.1 nennt #6E6862. Der Ton schafft aber nur 4,84:1 auf --creme,
       4,25:1 auf --papier und 3,72:1 auf --rosa-hauch und verfehlt damit die
       in SPEC Abschnitt 11 geforderten 4,5:1 auf zwei von drei Flaechen.
       #605A55 ist derselbe Farbton, 13 % dunkler, und schafft 5,98 / 5,25 /
       4,59. Abweichung wie --rosa-dunkel dokumentiert und abzunicken. */
    --grau-weich: #605A55;
    --punkt:      #14120F;

    /* Abgeleitet, nicht aus SPEC 6.1: --rosa-tief erreicht als Text nur
       4,2:1 auf --creme und 3,7:1 auf --papier und verfehlt damit die in
       SPEC Abschnitt 11 geforderten 4,5:1. Dieser Ton ist dieselbe Farbe,
       nur dunkler, und wird ausschliesslich fuer Text benutzt
       (Fehlermeldungen, Pflichtfeld-Stern, Link im Hover):
       6,4:1 auf --creme, 5,6:1 auf --papier.
       Flaechen, Raender und der Fokusring bleiben bei --rosa-tief. */
    --rosa-dunkel: #7A4A44;

    /* Typo-Skala (SPEC 6.2) */
    --t-xs:   .6875rem;
    --t-s:    .8125rem;
    --t-base: 1.0625rem;
    --t-m:    1.375rem;
    --t-l:    2rem;
    --t-xl:   2.75rem;
    --t-2xl:  3.75rem;

    /* Navigation (SPEC 6.2, geaendert am 27.07.2026). Stand ausserhalb der
       Skala, weil die Reiter in --t-s (13px) neben einem 132px-Logo wie
       Kleingedrucktes wirkten. Verdoppelt auf 26px – bewusst kein Skalenwert,
       die naechste Stufe --t-m waere mit 22px zu wenig, --t-l mit 32px zu viel. */
    --t-nav:  1.625rem;

    --schrift-display: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
    --schrift-text:    'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Raum (SPEC 6.3) – bewusst eng, der Laden ist voll. */
    --raum-1: 6px;
    --raum-2: 12px;
    --raum-3: 18px;
    --raum-4: 28px;
    --raum-5: 40px;
    --raum-6: 56px;
    --breite: 1080px;

    --kante: 2px;                       /* fast eckig, nicht ganz */
    --linie: 1px solid var(--rosa-hauch);

    /* Bewegungsbudget (SPEC Abschnitt 11, neu gefasst am 26.07.2026).
       --tempo         Hover, Fokus, Zustandswechsel
       --tempo-auftritt Einblenden beim Scrollen
       --staffel       Versatz zwischen benachbarten Kacheln */
    --tempo: 120ms;
    --tempo-auftritt: 520ms;
    --staffel: 60ms;
    /* Weich raus, kein Ueberschwingen: der Auftritt soll sich setzen, nicht wippen. */
    --kurve-auftritt: cubic-bezier(.22, .68, .36, 1);

    /* Puenktchen-Textur als Data-URI (SPEC 6.4).
       Die Punkte sind hier voll deckend; die Opazitaet steuert das
       Pseudo-Element, sonst wuerden sich die Werte multiplizieren. */
    --punkte-kachel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 260' width='260' height='260'%3E%3Cg fill='%2314120F'%3E%3Ccircle cx='37' cy='52' r='1.6'/%3E%3Ccircle cx='88' cy='24' r='1.1'/%3E%3Ccircle cx='142' cy='61' r='2'/%3E%3Ccircle cx='196' cy='38' r='1.3'/%3E%3Ccircle cx='231' cy='79' r='1.7'/%3E%3Ccircle cx='63' cy='96' r='.9'/%3E%3Ccircle cx='114' cy='118' r='1.9'/%3E%3Ccircle cx='171' cy='104' r='1.2'/%3E%3Ccircle cx='28' cy='141' r='2.1'/%3E%3Ccircle cx='83' cy='163' r='1.4'/%3E%3Ccircle cx='135' cy='149' r='.8'/%3E%3Ccircle cx='189' cy='178' r='1.8'/%3E%3Ccircle cx='238' cy='143' r='1'/%3E%3Ccircle cx='48' cy='199' r='1.5'/%3E%3Ccircle cx='101' cy='226' r='1.2'/%3E%3Ccircle cx='155' cy='205' r='2.2'/%3E%3Ccircle cx='207' cy='241' r='1.4'/%3E%3Ccircle cx='246' cy='199' r='.9'/%3E%3Ccircle cx='122' cy='82' r='1.05'/%3E%3Ccircle cx='176' cy='137' r='1.35'/%3E%3Ccircle cx='66' cy='128' r='1.15'/%3E%3Ccircle cx='215' cy='108' r='1.5'/%3E%3Ccircle cx='2' cy='74' r='1.3'/%3E%3Ccircle cx='262' cy='74' r='1.3'/%3E%3Ccircle cx='258' cy='172' r='1.1'/%3E%3Ccircle cx='-2' cy='172' r='1.1'/%3E%3Ccircle cx='119' cy='1.5' r='1.45'/%3E%3Ccircle cx='119' cy='261.5' r='1.45'/%3E%3Ccircle cx='44' cy='259' r='1'/%3E%3Ccircle cx='44' cy='-1' r='1'/%3E%3C/g%3E%3C/svg%3E");
  }
}

/* -------------------------------------------------------------------- BASIS
   Reset und Grundtypografie.
   -------------------------------------------------------------------------- */
@layer basis {
  *, *::before, *::after { box-sizing: border-box; }

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

  body {
    margin: 0;
    background: var(--creme);
    color: var(--grau);
    font-family: var(--schrift-text);
    font-size: var(--t-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3 {
    font-family: var(--schrift-display);
    font-optical-sizing: auto;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.015em;
    margin: 0 0 var(--raum-2);
    text-wrap: balance;
    /* Deutsche Komposita sind laenger als ein Handydisplay: "Datenschutz-
       erklaerung" misst in Display-Groesse 442px und sprengte bei 320px die
       Seite. hyphens setzt die Trennstriche (lang="de" steht im <html>),
       overflow-wrap ist das Netz fuer Browser ohne Trennmuster. */
    hyphens: auto;
    overflow-wrap: break-word;
  }
  /* Bodoni bricht unter 18px weg – Display faengt erst bei 24px an (SPEC 6.2). */
  h1 { font-size: var(--t-xl); }
  h2 { font-size: var(--t-l); }
  h3 { font-size: var(--t-m); }

  p  { margin: 0 0 var(--raum-3); max-width: 68ch; }
  ul, ol { margin: 0 0 var(--raum-3); padding-left: 1.2em; }
  li { margin-bottom: var(--raum-1); }

  a { color: var(--grau); text-decoration-color: var(--rosa); text-underline-offset: .18em; }
  a:hover { color: var(--rosa-dunkel); text-decoration-color: var(--rosa-dunkel); }

  img, svg { max-width: 100%; }
  img { height: auto; }

  /* Sichtbarer Fokusring, 2px in --rosa-tief (SPEC Abschnitt 11). */
  :focus-visible {
    outline: 2px solid var(--rosa-tief);
    outline-offset: 2px;
    border-radius: var(--kante);
  }

  ::selection { background: var(--rosa-hauch); color: var(--grau); }

  @media (min-width: 640px) {
    h1 { font-size: var(--t-2xl); }
  }
}

/* ------------------------------------------------------------------- LAYOUT
   Bahn, Sektionen, Kopf, Insta-Leiste, Fuss.
   -------------------------------------------------------------------------- */
@layer layout {
  .bahn {
    width: 100%;
    max-width: var(--breite);
    margin-inline: auto;
    padding-inline: var(--raum-3);
  }

  /* Sektionsabstand: --raum-5, nie mehr als --raum-6 (SPEC 6.3). */
  .sektion { padding-block: var(--raum-5); }

  /* Sprungziele der Landingpage: Abstand nach oben, damit der Kopf die
     Ueberschrift nicht verdeckt. Weiches Scrollen nur, wenn der Besucher
     keine reduzierte Bewegung angefordert hat. */
  .sektion[id] { scroll-margin-top: var(--raum-4); }
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }
  .sektion--knapp { padding-block: var(--raum-4); }
  .sektion--papier { background: var(--papier); }

  /* --- Auftakt (SPEC Abschnitt 5) ---------------------------------------
     Mittig, Display-Groesse, zwei Sprungknoepfe. Bewusst kurz: darunter soll
     auf dem Handy die erste Kachelreihe angeschnitten stehen bleiben, sonst
     fehlt der Anreiz weiterzuscrollen. Deshalb oben --raum-6, unten --raum-5
     und keine Mindesthoehe. */
  .auftakt { padding-block: var(--raum-6) var(--raum-5); }
  .auftakt__innen {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .auftakt__eyebrow { margin: 0 0 var(--raum-2); }
  /* Geaendert am 27.07.2026: der Titel lief in --t-xl/--t-2xl (44/60px) ueber
     drei Zeilen und hat den ganzen Auftakt erschlagen. Jetzt eine Stufe leiser,
     32px bzw. 44px – immer noch Display-Groesse nach 6.2 und mittig nach 6.4,
     nur nicht mehr als Plakat. 20ch statt 16ch ergibt zwei Zeilen statt drei.
     Die Regel liegt in `layout` und schlaegt damit h1 aus `basis`; auf den
     Unterseiten bleibt h1 unveraendert gross. */
  .auftakt__titel {
    font-size: var(--t-l);
    max-width: 20ch;
    margin-bottom: var(--raum-3);
  }
  /* Mit dem kleineren Titel kippte das Verhaeltnis Titel zu Satz: --t-base
     wirkte darunter wie eine Fussnote. --t-m haelt den Block zusammen. */
  .auftakt__satz {
    font-size: var(--t-m);
    line-height: 1.4;
    max-width: 46ch;
    margin-bottom: var(--raum-4);
    color: var(--grau-weich);
  }
  .auftakt__knoepfe {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--raum-2);
    max-width: none;                     /* haengt sonst an p { max-width: 68ch } */
    margin: 0;
  }
  @media (min-width: 640px) {
    .auftakt__titel { font-size: var(--t-xl); }
  }

  /* --- Laufband (SPEC Abschnitt 5) --------------------------------------
     Zwei identische Listen nebeneinander, die Spur wandert um genau eine
     Listenbreite (-50 %) und springt dann zurueck – die Kopie steht in dem
     Moment exakt dort, wo das Original stand, deshalb sieht man den Sprung
     nicht. Kein gap auf der Spur, das wuerde die 50 % verfaelschen.

     Das Band ist Dekoration und verhaelt sich seit dem 27.07.2026 auch so:
     pointer-events aus, keine Auswahl. Frueher hielt es bei Mouseover an
     ("wer liest, will lesen") – in der Ansicht wirkte das wie ein Ruckler,
     nicht wie ein Angebot. Es laeuft jetzt durch und ist nicht beeinflussbar.
     Einzige Ausnahme bleibt prefers-reduced-motion (SPEC 11, Grenze 2). */
  .laufband {
    overflow: hidden;
    background: var(--rosa-hauch);
    border-block: 1px solid var(--rosa);
    padding-block: var(--raum-2);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
  }
  .laufband__spur {
    display: flex;
    width: max-content;
    animation: laufen 46s linear infinite;
  }
  .laufband__liste {
    display: flex;
    align-items: center;
    gap: var(--raum-4);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .laufband__wort {
    margin: 0;
    font-family: var(--schrift-display);
    font-size: var(--t-m);
    line-height: 1.1;
    white-space: nowrap;
    color: var(--grau);
  }
  .laufband__wort::after {
    content: "·";
    margin-left: var(--raum-4);
    color: var(--rosa-tief);
  }
  @keyframes laufen {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  /* --- Insta-Leiste (SPEC 6.6) ------------------------------------------
     Zwei Spalten ueber die volle Breite. Bleibt auch auf dem Handy
     zweispaltig, nur kleinerer Text. Stapelt nicht.
     Ist der zweite Account nicht gepflegt, wird sie einspaltig. */
  .insta-leiste {
    background: var(--rosa-hauch);
    border-bottom: 1px solid var(--rosa);
  }
  .insta-leiste__raster {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  /* Rasterzellen haben von Haus aus min-width:auto und koennen deshalb nicht
     unter ihren Inhalt schrumpfen. Mit zwei gepflegten Konten sprengte die
     Leiste damit alles unter 500px. min-width:0 erlaubt das Schrumpfen,
     overflow-wrap bricht die langen Handles um. Zwei Spalten bleiben es,
     wie SPEC 6.6 verlangt. */
  .insta-leiste__raster > * { min-width: 0; }
  .insta-leiste__raster--einzeln {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .insta-feld {
    display: flex;
    flex-wrap: wrap;                     /* auf schmalen Displays umbrechen */
    align-items: center;
    justify-content: center;
    gap: var(--raum-1);
    padding: var(--raum-2) var(--raum-2);
    color: var(--grau);
    text-decoration: none;
    font-size: var(--t-xs);
    min-height: 44px;                    /* Tap-Ziel */
    min-width: 0;
  }
  .insta-leiste__raster > .insta-feld + .insta-feld {
    border-left: 1px solid var(--rosa);
  }
  .insta-feld:hover { background: var(--rosa); color: var(--grau); }
  .insta-feld__glyph { flex: none; width: 15px; height: 15px; }
  .insta-feld__label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
  }
  /* --grau-weich waere hier zu schwach: auf --rosa-hauch nur 3,7:1, und der
     Handle steht in 11px. SPEC Abschnitt 11 verlangt 4,5:1. --grau schafft
     8,9:1. Die Abstufung zum Label macht die Versalschrift, nicht die Farbe. */
  .insta-feld__handle {
    color: var(--grau);
    min-width: 0;
    overflow-wrap: anywhere;             /* @handle ist ein langes Wort ohne Trennstelle */
  }

  @media (min-width: 640px) {
    .insta-feld { font-size: var(--t-s); gap: var(--raum-2); }
  }

  /* --- Kopf --------------------------------------------------------------- */
  .kopf {
    position: relative;
    border-bottom: var(--linie);
    padding-block: var(--raum-3);
  }
  .kopf__innen {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--raum-2);
    text-align: center;
  }
  .kopf__marke {
    display: inline-flex;
    align-items: center;
    gap: var(--raum-2);
    color: var(--grau);
    text-decoration: none;
  }
  /* logo.png ist das Ladenlogo, freigestellt aus logo.jpg. Das Papierweiss
     ist echte Transparenz, keine Mischung per mix-blend-mode: die haengt am
     Stapelkontext und bricht, sobald ein Vorfahr isoliert (.punkte-flaeche). */
  .kopf__logo {
    display: block;
    width: 116px;
    height: auto;
  }

  .kopf__nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--raum-1) var(--raum-4);
  }
  /* Geaendert am 27.07.2026. Der Unterstrich ist der eigentliche Hebel: er lag
     auf transparent und tauchte erst bei Hover auf, damit sahen die vier Reiter
     aus wie Fliesstextlinks. Er steht jetzt dauerhaft. */
  .kopf__nav a {
    font-size: var(--t-nav);
    font-weight: 600;
    white-space: nowrap;                 /* "Der Laden" bricht nicht in der Mitte */
    text-decoration: none;
    padding: var(--raum-1) 0;
    border-bottom: 2px solid var(--rosa-hauch);
    transition: border-color var(--tempo) ease, color var(--tempo) ease;
  }
  .kopf__nav a:hover {
    border-bottom-color: var(--rosa-tief);
    color: var(--rosa-dunkel);
  }
  /* Der aktive Reiter kann sich nicht mehr ueber font-weight abheben, alle
     stehen jetzt auf 600. Also ueber Farbe – und das ist ohnehin die
     kraeftigere Markierung. app.js setzt aria-current="true" auf den Abschnitt,
     der gerade im Blick steht; ohne JS bleibt das Menue schlicht unmarkiert. */
  .kopf__nav a[aria-current] {
    border-bottom-color: var(--rosa-tief);
    color: var(--rosa-dunkel);
  }

  /* Geaendert am 27.07.2026 von 900px auf 1080px. Mit --t-nav (26px) belegen
     Logo, vier Reiter und Status-Badge zusammen rund 940px. Das passt in die
     volle Bahn (1044px innen), aber nicht in einen 900px-Bildschirm – dort waere
     das Menue zweizeilig umgebrochen. Unterhalb bleibt der Kopf gestapelt und
     das Menue bekommt die ganze Breite fuer sich. */
  @media (min-width: 1080px) {
    .kopf {
      /* Flacher, damit die Kopfzeile nicht zu viel vom Bildschirm frisst. */
      padding-block: var(--raum-2);
    }
    .kopf__innen {
      flex-direction: row;
      justify-content: space-between;
      text-align: left;
      gap: var(--raum-4);
    }
    .kopf__logo { width: 132px; }
  }

  /* --- Fuss --------------------------------------------------------------- */
  .fuss {
    position: relative;
    overflow: hidden;
    background: var(--papier);
    border-top: var(--linie);
    padding-block: var(--raum-5);
    font-size: var(--t-s);
  }
  /* Logo sehr gross und blass als Wasserzeichen (SPEC 6.5). */
  .fuss__wasserzeichen {
    position: absolute;
    right: -70px;
    bottom: -110px;
    width: 340px;
    height: auto;
    opacity: .12;
    pointer-events: none;
  }
  .fuss__innen {
    position: relative;
    display: grid;
    gap: var(--raum-4);
  }
  .fuss h2 {
    font-size: var(--t-m);
    margin-bottom: var(--raum-2);
  }
  .fuss ul { list-style: none; margin: 0; padding: 0; }
  .fuss li { margin-bottom: var(--raum-1); }
  .fuss a { text-decoration: none; }
  .fuss a:hover { text-decoration: underline; }

  @media (min-width: 640px) {
    .fuss__innen { grid-template-columns: repeat(3, 1fr); }
  }
}

/* --------------------------------------------------------------- KOMPONENTEN
   -------------------------------------------------------------------------- */
@layer komponenten {

  /* --- Label / Eyebrow (SPEC 6.2) ---------------------------------------- */
  .label {
    font-family: var(--schrift-text);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--grau-weich);
  }

  /* --- Sektionskopf -------------------------------------------------------
     Eyebrow, Ueberschrift, ein Satz – mittig ueber jedem Abschnitt. Gibt der
     Seite einen wiederkehrenden Rhythmus, statt dass jede H2 einzeln links
     im Nichts steht. */
  .sektionskopf {
    text-align: center;
    margin-bottom: var(--raum-4);
  }
  .sektionskopf .label {
    display: block;
    margin: 0 0 var(--raum-1);
  }
  .sektionskopf h2 { margin-bottom: var(--raum-2); }
  .sektionskopf__satz {
    max-width: 52ch;
    margin: 0 auto;
    color: var(--grau-weich);
  }
  .sektionskopf > :last-child { margin-bottom: 0; }

  /* Mittig gesetzter Fliesstext. 58ch statt der ueblichen 68ch: zentrierte
     Absaetze haben keine gemeinsame Anfangskante, an der das Auge zurueck-
     springt, und werden mit jeder Zeile mehr Zeichen schwerer lesbar. */
  .fliesstext {
    max-width: 58ch;
    margin-inline: auto;
    text-align: center;
  }
  .fliesstext > :last-child { margin-bottom: 0; }

  /* --- Status-Badge (SPEC Abschnitt 7) -----------------------------------
     Punkt in --rosa bei offen, in --grau-weich bei geschlossen.
     Kein Gruen, kein Rot. Die Logik dahinter kommt in E3. */
  .status {
    display: inline-flex;
    align-items: center;
    /* Ohne Umbruch sprengt ein langer Zusatz plus Hinweis die Breite
       auf dem Handy und die ganze Seite scrollt horizontal. */
    flex-wrap: wrap;
    /* Linksbuendig, damit die Hinweiszeile unter dem Titel beginnt.
       Zentriert wird der Badge als Ganzes vom Kopfbereich. */
    justify-content: flex-start;
    gap: var(--raum-1);
    max-width: 100%;
    font-size: var(--t-s);
    color: var(--grau);
    text-decoration: none;
  }
  .status__punkt {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--grau-weich);
  }
  .status--offen .status__punkt { background: var(--rosa); }
  .status__titel {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 11px;
  }
  .status__zusatz { color: var(--grau-weich); }
  .status__hinweis {
    flex-basis: 100%;                    /* immer eigene Zeile */
    color: var(--grau-weich);
    font-size: var(--t-xs);
  }
  .status:hover .status__titel { text-decoration: underline; }

  /* --- Knoepfe -----------------------------------------------------------
     Kontrast geprueft (SPEC Abschnitt 11, min. 4.5:1):
       .knopf         --grau auf --rosa-hauch  = 8.9:1
       .knopf:hover   --grau auf --rosa        = 4.5:1
       .knopf--stark  --creme auf --grau       = 11.6:1  */
  .knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--raum-1);
    padding: var(--raum-2) var(--raum-4);
    min-height: 44px;
    border: 1px solid var(--rosa);
    border-radius: var(--kante);
    background: var(--rosa-hauch);
    color: var(--grau);
    font-family: var(--schrift-text);
    font-size: var(--t-s);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--tempo) ease, transform var(--tempo) ease;
  }
  .knopf:hover { background: var(--rosa); color: var(--grau); }
  .knopf:active { transform: translateY(1px); }

  .knopf--stark {
    background: var(--grau);
    border-color: var(--grau);
    color: var(--creme);
  }
  /* Hover bleibt dunkel: --creme auf --rosa-tief erreicht nur 4.2:1. */
  .knopf--stark:hover {
    background: var(--grau);
    color: var(--creme);
    box-shadow: inset 0 0 0 2px var(--rosa);
  }

  .knopf--leise {
    background: transparent;
    border-color: var(--rosa-tief);
  }
  .knopf--leise:hover { background: var(--rosa-hauch); }

  .knopf[disabled], .knopf[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* --- Bilderraster (SPEC 6.3, Abschnitt 8) ------------------------------
     Feste Spaltenzahl statt auto-fill: auf dem Handy zwei, ab 640px drei.
     Mit auto-fill stand mobil nur eine Spalte, und die Kacheln wurden im
     Hochformat so hoch, dass man an sechs Bildern minutenlang vorbeiscrollt.
     Nach oben ist bei drei Schluss – vier Spalten machen die Fotos klein
     und lassen bei sechs Bildern eine halbe Zeile leer stehen. */
  .raster {
    display: grid;
    gap: var(--raum-3);
    grid-template-columns: repeat(2, 1fr);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  @media (min-width: 640px) {
    .raster { grid-template-columns: repeat(3, 1fr); }
  }

  .galerie__feld {
    position: relative;
    overflow: hidden;
    border: var(--linie);
    border-radius: var(--kante);
    background: var(--papier);
    aspect-ratio: 4 / 5;                 /* Hochformat (SPEC Abschnitt 8) */
    transition: transform var(--tempo) ease, border-color var(--tempo) ease;
  }
  /* Nur bei echtem Zeiger: auf Touch loest :hover erst beim Tippen aus und
     bliebe danach haengen. transform statt Schatten – SPEC 6.3 verbietet die. */
  @media (hover: hover) {
    .galerie__feld:hover {
      transform: translateY(-4px);
      border-color: var(--rosa-tief);
    }
  }
  .galerie__bild {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .galerie__hinweis {
    max-width: 52ch;
    margin: var(--raum-3) auto 0;
    text-align: center;
    font-size: var(--t-s);
    color: var(--grau-weich);
  }

  /* Das Bild zu "Der Laden" (SPEC Abschnitt 5). Breit statt hochkant, damit es
     sich vom Galerieraster darueber unterscheidet. Erbt Flaeche und Punkte von
     .galerie__feld--platzhalter, solange kein echtes Foto geliefert ist. */
  .laden__bild {
    position: relative;
    overflow: hidden;
    max-width: 720px;
    margin: var(--raum-4) auto 0;
    aspect-ratio: 16 / 9;
    border: var(--linie);
    border-radius: var(--kante);
  }

  /* Platzhalterkachel, solange keine echten Fotos hochgeladen sind.
     Kein Bild, keine Datei – nur Farbe plus die Puenktchen-Textur.
     Die Kacheln verschwinden, sobald die Tabelle `galerie` gefuellt ist. */
  .galerie__feld--platzhalter {
    display: grid;
    place-items: center;
    background: linear-gradient(160deg, var(--rosa-hauch), var(--papier));
  }
  /* Drei Verlaufsrichtungen im Wechsel. Sechs identische Kacheln lesen sich als
     Fehler ("hat das Bild nicht geladen?"), sechs leicht verschiedene als
     Absicht. Ausschliesslich Toene aus SPEC 6.1, nichts Neues. */
  .galerie__feld--platzhalter:nth-child(3n + 2) {
    background: linear-gradient(205deg, var(--papier), var(--rosa-hauch));
  }
  .galerie__feld--platzhalter:nth-child(3n + 3) {
    background: linear-gradient(115deg, var(--rosa-hauch), var(--creme));
  }
  .galerie__feld--platzhalter::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--punkte-kachel);
    opacity: .18;
  }
  .galerie__platzhaltertext {
    position: relative;
    color: var(--grau-weich);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
  }

  /* --- Formulare (SPEC 4.6 der Design-Regeln: Label ueber Feld) ----------- */
  .feld { margin-bottom: var(--raum-3); }
  .feld__label {
    display: block;
    margin-bottom: var(--raum-1);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--grau);
  }
  .feld__pflicht { color: var(--rosa-dunkel); }

  .feld__eingabe {
    display: block;
    width: 100%;
    padding: var(--raum-2);
    min-height: 44px;
    border: 1px solid var(--rosa);
    border-radius: var(--kante);
    background: var(--creme);
    color: var(--grau);
    font-family: var(--schrift-text);
    font-size: var(--t-base);
    transition: border-color var(--tempo) ease;
  }
  textarea.feld__eingabe { min-height: 120px; resize: vertical; }
  .feld__eingabe::placeholder { color: var(--grau-weich); opacity: 1; }
  .feld__eingabe:hover { border-color: var(--rosa-tief); }

  .feld__hilfe {
    display: block;
    margin-top: var(--raum-1);
    font-size: var(--t-xs);
    color: var(--grau-weich);
  }
  .feld__fehler {
    display: block;
    margin-top: var(--raum-1);
    font-size: var(--t-s);
    font-weight: 600;
    color: var(--rosa-dunkel);
  }
  .feld--fehlerhaft .feld__eingabe {
    border-color: var(--rosa-tief);
    border-width: 2px;
  }

  .feld--kontrolle {
    display: flex;
    align-items: flex-start;
    gap: var(--raum-2);
  }
  .feld--kontrolle input { margin-top: .3em; width: 18px; height: 18px; accent-color: var(--rosa-tief); }
  .feld--kontrolle label { font-size: var(--t-s); }

  /* Honeypot: unsichtbar, aber im DOM (SPEC Abschnitt 8). */
  .honigtopf {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  /* --- Meldungen ---------------------------------------------------------- */
  .meldung {
    padding: var(--raum-2) var(--raum-3);
    border: var(--linie);
    border-left: 3px solid var(--rosa-tief);
    border-radius: var(--kante);
    background: var(--papier);
    margin-bottom: var(--raum-3);
    font-size: var(--t-s);
  }
  .meldung__titel { font-weight: 700; display: block; margin-bottom: 2px; }

  /* --- Leerzustand -------------------------------------------------------- */
  .leer {
    padding: var(--raum-5) var(--raum-3);
    border: 1px dashed var(--rosa);
    border-radius: var(--kante);
    text-align: center;
    color: var(--grau-weich);
  }

  /* --- Baeumchen als Trenner zwischen Sektionen (SPEC 6.5) ---------------- */
  .trenner {
    display: flex;
    align-items: center;
    gap: var(--raum-3);
    margin-block: var(--raum-4);
    color: var(--rosa);
  }
  .trenner::before, .trenner::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--rosa-hauch);
  }
  .trenner__logo {
    flex: none;
    width: 44px;
    height: auto;
  }

  /* --- Instagram-Kacheln im Abschnitt #instagram (SPEC 6.6) ---------------
     Dieselbe Quelle wie die schmale Leiste oben, nur gross ausgespielt. */
  .insta-kacheln {
    display: grid;
    gap: var(--raum-3);
    grid-template-columns: 1fr;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  /* Nur ein Konto gepflegt: die Kachel nicht ueber die volle Breite ziehen,
     sonst steht dort ein sehr breiter, sehr leerer Balken. */
  .insta-kacheln:not(.insta-kacheln--zwei) {
    max-width: 26rem;
    margin-inline: auto;
  }
  @media (min-width: 640px) {
    .insta-kacheln--zwei { grid-template-columns: 1fr 1fr; }
  }
  .insta-kachel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--raum-1);
    padding: var(--raum-4) var(--raum-3);
    border: var(--linie);
    border-radius: var(--kante);
    background: var(--rosa-hauch);
    color: var(--grau);
    text-align: center;
    text-decoration: none;
    transition: background-color var(--tempo) ease, border-color var(--tempo) ease,
                transform var(--tempo) ease;
  }
  @media (hover: hover) {
    .insta-kachel:hover {
      background: var(--creme);
      border-color: var(--rosa-tief);
      transform: translateY(-4px);
    }
  }
  .insta-kachel__glyph { width: 34px; height: 34px; }
  .insta-kachel__handle {
    font-family: var(--schrift-display);
    font-size: var(--t-m);
    line-height: 1.1;
    overflow-wrap: anywhere;
  }

  /* --- Abschnitt #besuch --------------------------------------------------- */
  .besuch {
    display: grid;
    gap: var(--raum-4);
    grid-template-columns: 1fr;
    margin-top: var(--raum-3);
  }
  @media (min-width: 900px) {
    .besuch { grid-template-columns: 1fr 1fr; }
  }
  /* Die erste Zwischenueberschrift jeder Spalte sitzt direkt unter der
     Sektionsueberschrift und braucht keinen zusaetzlichen Abstand. */
  .besuch > div > h3:first-child { margin-top: 0; }

  .zeiten {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--raum-2) var(--raum-3);
  }
  .zeiten th,
  .zeiten td {
    padding: var(--raum-1) 0;
    border-bottom: 1px solid var(--rosa-hauch);
    text-align: left;
    font-weight: 400;
  }
  .zeiten th { color: var(--grau-weich); width: 8.5em; }
  .zeiten tr:last-child th,
  .zeiten tr:last-child td { border-bottom: 0; }
  .zeiten__heute th,
  .zeiten__heute td { font-weight: 600; color: var(--grau); }

  /* --- Karte (SPEC Abschnitt 5, gefasst am 27.07.2026) ---------------------
     Ersetzt die tote Regel `.karte-bild`, die seit dem Wegfall von /demo
     nirgends mehr benutzt wurde.

     aspect-ratio statt Hoehe in Pixeln: der Platz steht, bevor Google
     antwortet, damit springt beim Nachladen nichts (SPEC 11, Grenze 4).
     Das Seitenverhaeltnis wird mit der Breite flacher – hochkant auf dem Handy,
     Streifen auf dem Desktop, sonst frisst die Karte den halben Bildschirm.

     Platzhalter und iframe teilen sich diese Masse. Das ist der Grund fuer die
     gemeinsame Selektorenliste: app.js tauscht das eine gegen das andere, und
     dabei darf die Seite keinen Millimeter springen. */
  .karte { margin-top: var(--raum-5); }
  .karte__rahmen,
  .karte__platzhalter {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border: var(--linie);
    border-radius: var(--kante);
    background: var(--papier);      /* steht da, solange das iframe laedt */
  }
  .karte__fuss {
    margin: var(--raum-2) 0 0;
    font-size: var(--t-s);
    color: var(--grau-weich);
  }
  @media (min-width: 640px) {
    .karte__rahmen,
    .karte__platzhalter { aspect-ratio: 16 / 9; }
  }
  @media (min-width: 900px) {
    .karte__rahmen,
    .karte__platzhalter { aspect-ratio: 21 / 9; }
  }

  /* Die Flaeche vor der Einwilligung (Zwei-Klick-Loesung, SPEC Abschnitt 5).
     Bewusst ohne Kartenbild im Hintergrund: ein Vorschaubild von Google waere
     genau die Uebertragung, die wir hier verhindern wollen, und ein selbst
     gebautes Fantasie-Kaertchen waere gelogen. Also die Puenktchen-Textur der
     Seite, wie ueberall sonst auch. */
  .karte__platzhalter {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--raum-2);
    padding: var(--raum-3);
    text-align: center;
  }
  .karte__einleitung {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--grau-weich);
  }
  /* max-width in ch statt Prozent: die Zeile soll lesbar kurz bleiben, egal wie
     breit die Karte gerade ist. Auf dem Desktop ist sie 21/9 flach und der Satz
     liefe sonst quer ueber den ganzen Bildschirm. */
  .karte__hinweis {
    margin: 0;
    max-width: 44ch;
    font-size: var(--t-s);
    line-height: 1.5;
    color: var(--grau-weich);
  }

  /* --- Verwaltungsbereich -------------------------------------------------
     Bewusst nuechtern: kein Baeumchen, keine Puenktchen, keine Wortmarke.
     Wer hier arbeitet, will Felder ausfuellen und wieder raus. */
  .admin { background: var(--creme); }

  .admin__kopf {
    background: var(--papier);
    border-bottom: 1px solid var(--rosa);
    margin-bottom: var(--raum-4);
  }
  .admin__kopfinnen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--raum-2) var(--raum-3);
    padding-block: var(--raum-2);
  }
  .admin__marke {
    font-family: var(--schrift-display);
    font-size: var(--t-m);
    line-height: 1;
  }
  .admin__zusatz {
    display: block;
    font-family: var(--schrift-text);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--grau-weich);
  }
  .admin__nav { margin-inline-end: auto; }
  .admin__nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--raum-3);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .admin__nav a { color: var(--grau); }
  .admin__nav a[aria-current="page"] { text-decoration-thickness: 2px; }
  .admin__abmelden { margin: 0; }

  .admin__inhalt { padding-bottom: var(--raum-5); }
  .admin__inhalt h2 { margin-top: var(--raum-4); }
  .admin__inhalt h3 { margin-top: var(--raum-3); }
  .admin__inhalt form + h2 { margin-top: var(--raum-5); }
  .admin__schmal { max-width: 24rem; }

  .admin__fuss {
    padding-block: var(--raum-3);
    border-top: 1px solid var(--rosa-hauch);
    font-size: var(--t-s);
  }

  /* Zeilen aus Feldern, die nebeneinander passen. Bricht auf dem Handy um. */
  .admin__reihe {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--raum-2) var(--raum-3);
  }
  .admin__reihe > .feld { flex: 1 1 12rem; }
  .admin__reihe > form { margin: 0; }

  /* Die Zeitentabelle ist mit sieben Zeilen und sechs Spalten breiter als ein
     Handydisplay. Sie darf innerhalb ihres Kastens scrollen, die Seite nicht. */
  .admin__tabelle {
    display: block;
    overflow-x: auto;
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--raum-2) var(--raum-3);
  }
  .admin__tabelle th,
  .admin__tabelle td {
    padding: var(--raum-1);
    border-bottom: 1px solid var(--rosa-hauch);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
  }
  .admin__tabelle thead th {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--grau-weich);
  }
  .admin__tabelle td form { margin: 0; }
  .admin__tabelle .feld__eingabe { margin: 0; }

  .feld__eingabe--schmal { width: auto; min-width: 7.5rem; }

  .admin__zeile--fehler > * { background: var(--rosa-hauch); }
  .admin__zeile--fehler th { color: var(--rosa-dunkel); }

  .admin__liste { list-style: none; margin: 0; padding: 0; }
  .admin__eintrag {
    padding: var(--raum-3);
    border: var(--linie);
    border-radius: var(--kante);
    margin-bottom: var(--raum-2);
    background: var(--creme);
  }
  .admin__eintrag--neu { border-color: var(--rosa-tief); background: var(--rosa-hauch); }
  .admin__eintragkopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--raum-2);
  }
  .admin__nachricht { white-space: pre-line; }

  /* --- Rechtstexte (Impressum, Datenschutz) ------------------------------- */
  .rechtstext { max-width: 68ch; }
  .rechtstext h2 { margin-top: var(--raum-4); }
  .rechtstext h3 { margin-top: var(--raum-3); }
  .rechtstext dl { margin: 0 0 var(--raum-3); }
  .rechtstext dt {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--grau-weich);
    margin-top: var(--raum-2);
  }
  .rechtstext dd { margin: 0; }
  /* Der Cookie-Name in der Datenschutzerklaerung. Browser setzen fuer <code>
     eine Monospace-Schrift in Standardgroesse, die neben dem Fliesstext
     deutlich kleiner wirkt – deshalb 1em und ein ruhiger Traeger. */
  .rechtstext code {
    font-size: 1em;
    padding: .1em .4em;
    border-radius: 3px;
    background: var(--creme);
    word-break: break-word;
  }
}

/* -------------------------------------------------------------------- HILFEN
   Utilities, u. a. die drei Dichtestufen der Puenktchen-Textur (SPEC 6.4).
   Regel: nie zwei direkt aufeinanderfolgende Sektionen mit derselben Stufe.
   -------------------------------------------------------------------------- */
@layer hilfen {
  .punkte-flaeche { position: relative; isolation: isolate; }
  .punkte-flaeche > * { position: relative; z-index: 1; }
  .punkte-flaeche::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--punkte-kachel);
    background-repeat: repeat;
    opacity: .22;                        /* Grundopazitaet */
    pointer-events: none;
  }
  .punkte-ruhig::before  { opacity: .12; }
  .punkte-dicht::before  { opacity: .28; }
  /* nur ein 80px-Streifen oben und unten */
  .punkte-kante::before {
    mask-image: linear-gradient(to bottom,
                #000 0, #000 80px, transparent 80px,
                transparent calc(100% - 80px), #000 calc(100% - 80px), #000 100%);
  }

  /* Die Textur wandert extrem langsam um genau eine Kachel (260px) und setzt
     dann nahtlos neu an. 140s heisst: man sieht es nicht hinsehen, man merkt
     es nur, wenn man laenger draufschaut. Bewusst nur im Auftakt – auf allen
     Flaechen gleichzeitig waere es Zappeln statt Atmen. */
  .punkte-treibend::before {
    animation: punkte-treiben 140s linear infinite;
  }
  @keyframes punkte-treiben {
    from { background-position: 0 0; }
    to   { background-position: 260px -260px; }
  }

  /* --- Einblenden beim Scrollen (SPEC Abschnitt 11) ----------------------
     `bewegung` setzt app.js selbst auf <html>, und zwar nur, wenn der Besucher
     keine reduzierte Bewegung angefordert hat. Ohne JS greift keine dieser
     Regeln – dann ist alles von Anfang an sichtbar (Grenze 3).

     `backwards` statt `both` ist Absicht: nach dem Lauf faellt das Element auf
     seine normalen Stile zurueck. Mit `both` bliebe `transform: none` kleben
     und der Hover-Lift der Kacheln waere tot. */
  html.bewegung .enthuellen:not(.ist-da) { opacity: 0; }
  html.bewegung .enthuellen.ist-da {
    animation: auftauchen var(--tempo-auftritt) var(--kurve-auftritt) backwards;
  }
  @keyframes auftauchen {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
  }

  /* Staffelung im Bilderraster. Ohne Inline-Style geht das nur ueber nth-child;
     ab der neunten Kachel bleibt es bei 8 Schritten, sonst wartet man bei einer
     grossen Galerie sekundenlang auf die letzte Reihe. */
  html.bewegung .raster--gestaffelt > .ist-da:nth-child(2) { animation-delay: calc(1 * var(--staffel)); }
  html.bewegung .raster--gestaffelt > .ist-da:nth-child(3) { animation-delay: calc(2 * var(--staffel)); }
  html.bewegung .raster--gestaffelt > .ist-da:nth-child(4) { animation-delay: calc(3 * var(--staffel)); }
  html.bewegung .raster--gestaffelt > .ist-da:nth-child(5) { animation-delay: calc(4 * var(--staffel)); }
  html.bewegung .raster--gestaffelt > .ist-da:nth-child(6) { animation-delay: calc(5 * var(--staffel)); }
  html.bewegung .raster--gestaffelt > .ist-da:nth-child(7) { animation-delay: calc(6 * var(--staffel)); }
  html.bewegung .raster--gestaffelt > .ist-da:nth-child(n + 8) { animation-delay: calc(7 * var(--staffel)); }

  /* Der Auftakt blendet beim Laden ein, nicht beim Scrollen – er steht ja schon
     im Bild. Vier Stufen von oben nach unten, damit der Blick mitgefuehrt wird. */
  html.bewegung .auftakt__eyebrow,
  html.bewegung .auftakt__titel,
  html.bewegung .auftakt__satz,
  html.bewegung .auftakt__knoepfe {
    animation: auftauchen var(--tempo-auftritt) var(--kurve-auftritt) backwards;
  }
  html.bewegung .auftakt__titel   { animation-delay: calc(1 * var(--staffel)); }
  html.bewegung .auftakt__satz    { animation-delay: calc(2 * var(--staffel)); }
  html.bewegung .auftakt__knoepfe { animation-delay: calc(3 * var(--staffel)); }

  .nur-fuer-screenreader {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .springlink {
    position: absolute;
    left: var(--raum-2);
    top: -60px;
    z-index: 10;
    padding: var(--raum-2) var(--raum-3);
    background: var(--grau);
    color: var(--creme);
    border-radius: var(--kante);
    transition: top var(--tempo) ease;
  }
  .springlink:focus { top: var(--raum-2); }

  .mittig { text-align: center; }
  .kein-rand { margin: 0; }

  /* Trefferflaechen auf Touchgeraeten (SPEC Abschnitt 11: mindestens 44px).
     Nur bei grobem Zeiger, damit die Maus-Ansicht ihre Abstaende behaelt.
     Fliesstextlinks sind ausgenommen, die sind laut WCAG 2.5.8 erlaubt. */
  @media (pointer: coarse) {
    .kopf__nav a,
    .fuss nav a,
    .status {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
    }
    .fuss nav li { margin-block: 0; }
  }

}

/* ------------------------------------------------------- REDUZIERTE BEWEGUNG
   SPEC Abschnitt 11, Grenze 2: hier laeuft nichts mehr. Steht bewusst ausserhalb
   jedes @layer – ungeschichtete Regeln schlagen jede Schicht, damit ist dieser
   Block die letzte Instanz, egal was oben noch dazukommt.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  /* Die Endlosschleifen kaeme der Sammelblock oben zwar auch bei, aber sie
     blieben auf ihrem Endbild stehen: das Laufband um eine Listenbreite
     verschoben, die Textur um eine Kachel versetzt. Sichtbar ist das nicht,
     sauber ist es trotzdem nicht. Deshalb hier ausdruecklich abgeschaltet. */
  .laufband__spur {
    animation: none !important;
    transform: none !important;
  }
  .punkte-treibend::before { animation: none !important; }

  /* Sicherheitsnetz: sollte app.js `bewegung` doch setzen (etwa weil der
     Besucher die Einstellung erst nach dem Laden aendert), darf trotzdem
     nichts unsichtbar bleiben. */
  html.bewegung .enthuellen:not(.ist-da) { opacity: 1 !important; }
}