/* Erzeugt aus shop/templates/about_css.html durch parser.php -- NICHT von Hand aendern. */
/* ══════════════════════════════════════════════════════════════════════════
     ABOUT-BEREICH
     Begruendungen und Fallen: siehe DESIGNSYSTEM.md im Wurzelverzeichnis.
     Farben, Radien und Schrift kommen aus page_css.html -- hier steht kein
     einziger eigener Farb- oder Radienwert.
     ══════════════════════════════════════════════════════════════════════════ */

  /* ── Bereichsnavigation ───────────────────────────────────────────────────
     Die Bereichsnavigation bleibt beim Scrollen unter der Kopfzeile stehen. Die
     Trennlinie darunter ist der einzige Rahmen, den sie braucht. */
  /* Bleibt beim Scrollen unter der Kopfzeile stehen -- und tat das bis jetzt NICHT.
     Zwei Fehler lagen uebereinander:
       1. "position: sticky" war wirkungslos, weil overflow-x: hidden am
          html-Element stand. Fuer den Browser ist die Seite dann nicht mehr der
          Bereich, an dem sich ein klebendes Element ausrichtet. Gemessen: bei
          2500px Scrollposition stand die Leiste auf -2446, also laengst weg.
          Behoben in page_css.html, overflow-x steht jetzt nur noch am body.
       2. top: 54px war geraten. Die Kopfzeile ist auf dem Handy 64px hoch. Die
          Leiste lag damit 10px hinter der Kopfzeile.
     08.10.2026 (Jakob: "wieder dieser Strich"): Inzwischen schrumpft die Kopfzeile auch
     hier beim Scrollen (.intransparent, Handy 64 -> 54, Desktop 78 -> 60). Die Leiste
     stand weiter an --kopf-hoehe, also bei 58px unter einer 54px hohen Kopfzeile: 4px
     Spalt, durch den Tabellenraender und Karten liefen. Jetzt --kopf-hoehe-jetzt wie die
     Kategorie-Chips (filter_category.html), und "top" gleitet mit der Kopfzeile mit. */
  .about-nav-huelle {
    position: sticky;
    /* 6px hinter die Kopfzeile statt buendig an ihre Unterkante. Die Ueberlappung
       schadet nicht und kostet nichts -- sie loest den iPhone-Spalt aber NICHT.
       Das ist belegt: erst 1px, dann 6px, beide Male blitzte weiter Inhalt durch.
       Gegen den Spalt steht ".about-nav-huelle::before" unten, siehe die
       Begruendung dort. */
    top: calc(var(--kopf-hoehe-jetzt, var(--kopf-hoehe)) - 6px);
    transition: top var(--dauer) ease;
    z-index: 40;
    /* DER eigentliche Grund fuer den "Schlitz" auf dem iPhone: diese Leiste hatte
       ueberhaupt keinen Hintergrund. Sie stand auf rgba(0,0,0,0), ihre nav und alle
       Links ebenfalls -- 74px durchsichtige Flaeche, die klebt. Der Seitentext lief
       beim Scrollen dahinter durch und war zwischen den Links zu lesen.
       Auf dem Screenshot von staging stand "Traditional e-commerce feels" quer
       ueber "Users Creators Brands Management".
       Es war also nie eine Luecke NEBEN der Leiste, sondern die Leiste selbst.
       Deshalb hat keiner der drei Versuche davor gewirkt (1px Ueberlappung, dann
       6px, dann das Entfernen eines wirkungslosen backdrop-filter): sie haben alle
       den Abstand zur Kopfzeile verstellt, waehrend das Problem die Flaeche war. */
    background: var(--bg);
    /* Das obere Polster gleicht die 6px Ueberlappung wieder aus, damit die Links
       dort stehen, wo sie ohne sie stuenden: 12 + 6 = 18. Auf schmalen Geraeten
       weiter unten kleiner. */
    padding: 18px 0 12px;
  }
  /* Deckende Flaeche NACH OBEN, hinter die Kopfzeile.
   *
   * Damit sie niemand ein viertes Mal durchlaeuft: zwischen Kopfzeile und dieser
   * Leiste blitzt auf dem iPhone Inhalt durch. Gescheitert sind 1px Ueberlappung,
   * dann 6px, dann das Entfernen eines wirkungslosen backdrop-filter. Der Grund,
   * warum keiner davon greift: im Browser gibt es die Luecke gar nicht. Nachgemessen
   * an 14 Breiten, acht Scrollpositionen, beiden Kopfzeilenzustaenden und bei 375px
   * mobil: die Leiste ueberlappt ueberall um genau 6px, nirgends steht eine Luecke.
   * Der Spalt entsteht erst auf dem Geraet, weil iOS "fixed" (Kopfzeile) und
   * "sticky" (diese Leiste) im Compositor getrennt bewegt und sie beim
   * Momentum-Scrollen kurz auseinanderlaufen. Geometrie erreicht das nicht -- egal
   * wie gross man die Ueberlappung macht, gemessen wird immer der Ruhezustand.
   *
   * Deshalb keine groessere Ueberlappung, sondern Flaeche, die mitwandert: 20px in
   * Hintergrundfarbe oberhalb der Leiste. Sie gehoert zur Leiste, bewegt sich also
   * immer mit ihr, und schliesst den Spalt aus beiden Driftrichtungen.
   *
   * Unsichtbar ist sie, weil sie in jedem Zustand hinter der Kopfzeile liegt: die
   * Leiste steht auf z-index 40, die Kopfzeile auf 100. Und sie verdeckt keinen
   * Inhalt: die Leiste klebt ab Scrollposition 0 (ihr Vorgaenger im Dokument ist ein
   * script-Element ohne Hoehe), ueber ihr steht damit immer die Kopfzeile und nie
   * Seiteninhalt -- an fuenf Punkten quer nachgemessen.
   * pointer-events: none, damit die Leiste darunter klickbar bleibt.
   *
   * Gleiche Fehlerklasse und gleiche Loesungsart wie der Schatten an .site-footer
   * in page_css.html: eine Flaeche ausserhalb des Layouts gegen ein Loch, das im
   * Dokument nicht existiert. */
  .about-nav-huelle::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 20px;
    background: var(--bg);
    pointer-events: none;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }

  /* Vier gleich breite Felder, aber ohne Kasten drumherum.
     Vorher stand hier eine gerahmte, grau gefuellte Pille um alle vier Links --
     Jakobs Urteil dazu war eindeutig: "sieht soooooo beschissen und billig aus,
     weg damit". Er hat recht. Der Kasten hat nichts erklaert, was die Leiste nicht
     schon sagt, und stand als zweiter Rahmen neben der Trennlinie darunter.

     Was bleibt, traegt sich ueber die Schrift: die aktive Seite steht in voller
     Textfarbe mit einem Strich darunter, die anderen in --text-muted. Das ist
     dieselbe Logik wie im Hauptmenue der Kopfzeile, nur eine Ebene tiefer.
     Die gleichen Spaltenbreiten bleiben -- "Users" war halb so breit wie
     "Management", und das war in der Leiste als Unruhe sichtbar. */
  .about-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
  }
  /* min-height 44px, weil es eine Hauptnavigation ist und keine Beilaeufigkeit.
     Mit reinem Polster oben und unten waere die Trefferflaeche bei 28px geblieben
     (im Browser bei 375px nachgemessen). Der Strich haengt deshalb nicht an der
     Unterkante des Kastens -- sonst waende er bei 44px Hoehe weit unter der
     Schrift --, sondern 9px darunter. */
  .about-nav a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 4px 8px;
    text-align: center;
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
    color: var(--text-muted);
    transition: color var(--dauer) ease;
  }
  /* Der Strich liegt auf einem Pseudoelement statt auf border-bottom: so nimmt er
     keinen Platz ein und die vier Felder stehen mit und ohne Marke gleich hoch. */
  .about-nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 9px;
    width: 0;
    height: 2px;
    background: var(--accent);
    /* --r-pill statt 1px: auf einem 2px hohen Balken sieht beides gleich aus, aber
       der Wert bleibt im Formensatz. Es war der letzte rohe Radius im
       oeffentlichen CSS. */
    border-radius: var(--r-pill);
    transform: translateX(-50%);
    transition: width var(--dauer) ease;
  }
  @media (hover: hover) {
    .about-nav a:hover { color: var(--text); }
    .about-nav a:hover::after { width: 60%; }
  }
  .about-nav a[aria-current="page"] {
    color: var(--text);
    font-weight: 600;
  }
  .about-nav a[aria-current="page"]::after { width: 100%; }
  @media (prefers-reduced-motion: reduce) {
    .about-nav a::after { transition: none; }
  }

  /* Handy: dieselben vier gleich breiten Felder ueber die volle Breite. Kein
     Scrollen -- wer "Management" nur nach einer Wischgeste findet, findet es
     nicht. Die Schrift schrumpft dafuer leicht mit der Fensterbreite; bei 320px
     (iPhone SE) bleiben je Feld 72px, und "Management" braucht bei 11px genau
     diese 72px. Es passt also, aber ohne Reserve: wer die Schrift hier
     vergroessert oder ein laengeres Wort in die Navigation nimmt, bricht es. */
  @media (max-width: 640px) {
    .about-nav {
      max-width: none;
      margin: 0 16px;
      width: auto;
    }
    .about-nav a {
      padding: 4px 2px;
      font-size: clamp(11px, 3.2vw, 14px);
      letter-spacing: -0.01em;
    }
  }

  /* ── Sektionsrhythmus ─────────────────────────────────────────────────────*/
  /* Bewusst NICHT ".about": diese Klasse steht ueber pageType auch am <body>
     (<body class="about">). Eine Regel auf .about traf damit das Body-Element und
     sperrte die GANZE Seite samt Kopf- und Fusszeile auf 1120px ein und rueckte
     sie ein -- im Browser gemessen: Fusszeile 1072px breit bei 1200px Fenster,
     64px vom linken Rand. Genau daher kam der Eindruck, About sei eine fremde
     Seite. */
  .about-seite {
    --abschnitt: 56px;
    max-width: 1120px;
    /* Bewusst nicht die Kurzform "margin: 0 auto": die setzt auch margin-top und
       hat frueher den Abstand unter der Kopfzeile ueberschrieben. Der kommt
       inzwischen als padding-top aus page_css und kaeme hier nicht mehr in die
       Quere -- die Langform bleibt trotzdem, weil sie sagt, was gemeint ist. */
    margin-left: auto;
    margin-right: auto;
    padding: 0 16px;
  }
  @media (min-width: 768px) { .about-seite { --abschnitt: 96px; padding: 0 24px; } }
  /* Auf dem Handy nahm der Kopf der About-Seiten zu viel Platz weg: zwischen der
     Unterkante der Leiste und der ersten Ueberschrift standen 86px leer, bei 812px
     Schirmhoehe ueber ein Zehntel der Seite -- und das ueber der Leiste liegende
     Drittel war schon fuer Kopfzeile und Navigation weg.
     Zwei Stellschrauben, beide nur unterhalb 768px:
     --abschnitt ist das Polster jeder .about-section (56px). Auf 32 gesenkt ruecken
     alle Abschnitte der Seite naeher zusammen, nicht nur der erste.
     Das Polster der Leiste faellt von 18/12 auf 14/10, sie wird damit 68 statt 74px
     hoch. Die 14 oben gleichen weiter die 6px Ueberlappung aus (8 + 6).
     Diese Regel MUSS hinter der Zeile darueber stehen: --abschnitt wird dort und
     in ".about-seite" mit derselben Spezifitaet gesetzt, es entscheidet also die
     Reihenfolge. Weiter oben im Stylesheet (bei .about-nav-huelle) blieb sie
     wirkungslos -- das Leisten-Polster griff, --abschnitt nicht.
     Zusammen: Ueberschrift von 218 auf 188, Luecke von 86 auf 62 -- auf staging bei
     375px nachgemessen. Ab 768px bleibt alles wie es war, dort ist der Platz da. */
  @media (max-width: 767px) {
    .about-seite { --abschnitt: 32px; }
    .about-nav-huelle { padding: 14px 0 10px; }
  }


  /* Schutzregel. Ohne sie gewinnt bei einem Bild ohne eigene Breitenangabe das
     width-Attribut aus dem Markup -- auf der Management-Seite waren das 462px je
     Bild, vier nebeneinander, und die Seite war bei 375px Fenster 972px breit.
     Genau diese Fehlerklasse ist beim Umbau der Telefon-Rahmen entstanden: das
     gemeinsame CSS wurde umgestellt, aber nicht alle Seiten, die es benutzen.
     Diese eine Zeile macht sie unmoeglich. */
  .about-seite img { max-width: 100%; height: auto; }

  .about-section { padding: var(--abschnitt) 0; }
  .about-section + .about-section { padding-top: 0; }
  .about-section.getrennt { border-top: 1px solid var(--border); padding-top: var(--abschnitt); }

  /* ── Typografie ───────────────────────────────────────────────────────────*/
  .about-eyebrow {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    padding: 6px 15px;
    margin-bottom: 20px;
  }
  .about-h {
    margin: 0;
    font-size: clamp(27px, 4.6vw, 46px);
    line-height: 1.08;
  }
  /* Die Ueberschriften stehen komplett in voller Textfarbe -- Entscheidung Jakob:
     "schwarz schon ueberall".

     Damit faellt die Zweitonigkeit ersatzlos weg, die es vorher gab: <em> war 400
     gegen 700 im Rest. In der Serifenschrift ginge das ohnehin nicht mehr, sie hat
     nur einen Schnitt. Ein Versuch, das ueber die Farbe nachzubilden (Rest
     gedaempft, <em> schwarz), war eine Zeile lang drin und ist wieder raus.
     <em> bleibt deshalb nur semantisch; kursiv kommt nicht in Frage, es gibt
     keinen kursiven Schnitt. */
  .about-h em { font-style: normal; font-weight: inherit; }
  .about-h1 { font-size: clamp(31px, 6vw, 58px); }

  .about-lead {
    margin: 20px 0 0;
    font-size: 17px;
    line-height: 1.65;
    color: var(--text-muted);
    max-width: 62ch;
  }
  .about-mitte { text-align: center; }
  .about-mitte .about-lead { margin-left: auto; margin-right: auto; }
  /* Zehn zentrierte Zeilen auf einem Handy sind schwer zu lesen: der Zeilenanfang
     springt bei jedem Umbruch. Ueberschriften bleiben zentriert. */
  @media (max-width: 640px) {
    .about-mitte .about-lead { text-align: left; }
  }

  /* Feiner Trennstrich wie im Original */
  .about-strich {
    width: 64px; height: 1px;
    background: var(--border-strong);
    margin: 44px auto 0;
  }

  /* ── Telefon-Rahmen ───────────────────────────────────────────────────────
     Die App-Bildschirmfotos sind Telefonaufnahmen und sollen auch so aussehen:
     kraeftige Rundung, weicher Schatten, kein Rahmenstrich. Ein 1px-Kasten
     drumherum laesst sie wie Screenshots in einem Dokument wirken. */
  /* KEIN Rahmen, keine Rundung, kein Schatten, kein Hintergrund.
     Die Bildschirmfotos sind bereits vollstaendige Telefon-Attrappen mit eigenem
     schwarzen Rand -- ein Kasten mit border-radius und overflow:hidden schneidet
     deren Silhouette an den Ecken und Seiten ab (im Browser gesehen: die
     Metallkante des Telefons war flach abgesaebelt) und legt einen zweiten Rahmen
     um einen vorhandenen. Bleibt nur das leichte Anheben beim Ueberfahren, das
     nichts beschneidet. */
  .about-telefon {
    transition: transform var(--dauer-lang) cubic-bezier(0.22, 1, 0.36, 1);
  }
  .about-telefon img { display: block; width: 100%; height: auto; }
  @media (hover: hover) {
    .about-telefon:hover { transform: translateY(-6px) scale(1.015); }
  }
  @media (prefers-reduced-motion: reduce) {
    .about-telefon { transition: none; }
    .about-telefon:hover { transform: none; }
  }

  /* Ein einzelnes Telefon, das fuer sich steht (Creator-Seite).
     Vorher als Inline-Stil mit max-width 320px. Auf einem 375px breiten Geraet sind
     das 320x658 Pixel -- 81 % der Bildschirmhoehe fuer ein einziges Bild, und der
     Text davor und danach ist gleichzeitig nie zu sehen. Im Browser nachgemessen.
     210px sind dort 432px hoch und lassen den Abschnitt als Ganzes lesbar.
     Der Rahmen entfaellt: das Bild ist bereits ein Geraetemodell, ein zweiter
     Rahmen darum ist genau das, was an den Telefonen vorher stoerte. */
  /* Der Aufbau ".about-seite ..." ist hier Pflicht: die Schutzregel weiter unten
     (".about-seite img { max-width: 100% }") hat mit Klasse plus Element die
     hoehere Spezifitaet und gewinnt gegen eine Klasse allein. Mit
     ".about-telefon-solo" allein blieb max-width auf 100 %, das Telefon wurde
     343x705 -- also groesser als vorher. Im Browser nachgemessen. */
  .about-seite .about-telefon-solo {
    display: block;
    width: 100%;
    max-width: 210px;
    height: auto;
    margin: 40px auto 0;
  }
  @media (min-width: 768px) {
    .about-seite .about-telefon-solo { max-width: 300px; margin-top: 48px; }
  }

  .about-screens {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 40px;
  }
  @media (min-width: 640px) { .about-screens { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
  .about-screen { display: flex; flex-direction: column; align-items: center; gap: 12px; }
  /* Ohne diese Zeile werden die vier Telefone NICHT ANGEZEIGT -- nicht klein, nicht
     schief, sondern gar nicht. "align-items: center" nimmt den Kindern die volle
     Breite und laesst sie auf ihren Inhalt schrumpfen; der Inhalt ist ein Bild mit
     "width: 100%", also 100 % von einer Breite, die erst aus dem Bild entstehen
     soll. Der Browser loest diesen Zirkelbezug mit 0 auf. Dann ist die Huelle 0x0,
     und weil die Bilder loading="lazy" tragen, betritt ein 0x0-Element nie den
     sichtbaren Bereich -- sie werden also auch nie geladen. Im Browser gemessen:
     naturalWidth 0, complete false, selbst nachdem der Abschnitt mittig im Fenster
     stand. Die Datei selbst kam mit 200 und 53.972 Byte sauber vom Server.
     align-self: stretch gibt der Huelle die Spaltenbreite zurueck; die
     Beschriftung darunter bleibt mittig, weil sie ein eigenes Flex-Kind ist. */
  .about-screen .about-telefon { align-self: stretch; }
  .about-screen span { font-size: var(--fs-sm); color: var(--text-muted); letter-spacing: .02em; }

  /* ── Raster und Karten ────────────────────────────────────────────────────*/
  /* minmax(0, 1fr) und nicht 1fr: "1fr" heisst in Wirklichkeit minmax(auto, 1fr),
     und "auto" als Minimum ist die Inhaltsbreite der Spalte. Ein Kaesten-Inhalt, der
     sich nicht weiter umbrechen laesst, macht seine Spalte dann breiter als ihren
     Anteil -- das Raster wird breiter als sein Kasten. Auf der Creator-Seite bei
     360px im Browser nachgemessen: die beiden Spalten wurden 144,9 und 176,2 statt
     je 156, zusammen mit dem Zwischenraum 337 statt 328. Mit 0 als Minimum darf die
     Spalte schrumpfen und der Text bricht um. */
  .about-grid { display: grid; gap: 16px; margin-top: 40px; }
  .about-grid.zwei { grid-template-columns: minmax(0, 1fr); }
  .about-grid.drei { grid-template-columns: minmax(0, 1fr); }
  .about-grid.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Textkarten (.karten, /about/creators) unter 480 px einspaltig (Messung U1, 08.10.2026): zu
     zweit blieben 106 bis 133 px Textbreite, "Keine Rech-|nungen schreiben", "Mit Manage-|ment".
     Nicht fuer alle .vier: die Markenseite setzt dort Portraets, die zu zweit gut stehen. */
  @media (max-width: 479px) {
    .about-grid.vier.karten { grid-template-columns: minmax(0, 1fr); }
  }
  @media (min-width: 768px) {
    .about-grid.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
    .about-grid.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
    .about-grid.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  }

  .about-karte {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 24px;
    transition: border-color var(--dauer) ease, transform var(--dauer) cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* Nur bei echtem Zeiger: auf dem Handy loest :hover beim Tippen aus und bleibt
     danach haengen -- die Karte staende dauerhaft angehoben. */
  @media (hover: hover) {
    .about-karte:hover { border-color: var(--border-strong); transform: translateY(-2px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .about-karte { transition: border-color var(--dauer) ease; }
    .about-karte:hover { transform: none; }
  }
  /* Zwei Spalten auf einem 320px-Geraet lassen der Karte 86px Textbreite -- weniger
     als ein einzelnes englisches Wort. Im Browser nachgemessen: "Management" 126px,
     "Real-time Dashboard" 104px, jeweils bei 86px Platz; der Text stand ueber den
     Kartenrand hinaus. Die Sprache ist hier englisch (lang="en" am Abschnitt), also
     trennt hyphens: auto richtig; overflow-wrap faengt ab, was sich nicht trennen
     laesst. Das Raster bleibt dafuer unveraendert -- bei 375px passte es, und die
     Aufteilung ist so schon abgenommen.
     Seit 08.10.2026 (Messung U1) hyphens: manual statt auto: die automatische Trennung zerlegte
     auch Ueberschriften, die mit einer Zeile mehr ganz gepasst haetten ("Mit Manage-|ment").
     overflow-wrap bleibt als Notbremse fuer Woerter, die gar nicht passen. */
  .about-karte h2,
  .about-karte h3 {
    margin: 0 0 8px; font-size: var(--fs-h3); font-weight: 600;
    overflow-wrap: break-word; hyphens: manual;
  }
  .about-karte p { margin: 0; color: var(--text-muted); line-height: 1.6; overflow-wrap: break-word; }

  /* ── Logo-Band ────────────────────────────────────────────────────────────*/
  .about-band { overflow: hidden; margin-top: 40px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .about-band-lauf { display: flex; width: max-content; animation: about-band-schieben 46s linear infinite; }
  .about-band-lauf:hover { animation-play-state: paused; }
  .about-band img {
    height: 32px; width: auto; margin: 0 26px;
    object-fit: contain; opacity: .55; filter: grayscale(1);
    transition: opacity var(--dauer) ease, filter var(--dauer) ease;
  }
  .about-band img:hover { opacity: 1; filter: grayscale(0); }
  @keyframes about-band-schieben { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) {
    .about-band { overflow-x: auto; }
    .about-band-lauf { animation: none; }
  }

  /* ── Laufschrift "Mindless Scrolling" ─────────────────────────────────────
     Bewusst sehr blass und aria-hidden: Dekoration unter der Ueberschrift
     "Intentional Discovery" -- das, wogegen sich wyrld stellt, als Geisterstreifen.
     Traegt keine Information, muss die Kontrastschwelle also nicht erfuellen. */
  .about-ticker { overflow: hidden; margin: 30px 0 0; border-block: 1px solid var(--border); padding: 14px 0; }
  .about-ticker-lauf {
    display: flex; width: max-content;
    animation: about-band-schieben 24s linear infinite;
    font-weight: var(--display-weight);
    letter-spacing: var(--display-track);
    font-size: var(--fs-h3);
    color: var(--border-strong);
    white-space: nowrap;
  }
  .about-ticker-lauf span { padding: 0 18px; }
  @media (prefers-reduced-motion: reduce) { .about-ticker-lauf { animation: none; } }

  /* ── Schwebende Kommentare um ein Bild ────────────────────────────────────
     Das Herzstueck der Sektion: die Kommentarausschnitte umgeben das Telefonbild,
     wie echte Reaktionen darum herum. Jede Kachel schwebt sanft, versetzt
     gestartet, damit es nicht im Gleichschritt wippt.

     Ab 900px absolut platziert, darunter als geordnetes Raster UNTER dem Bild.
     Das Original blendet sie auf dem Handy komplett aus -- damit ist der halbe
     Inhalt der Sektion weg. Ein Raster zeigt dasselbe, nur lesbar. */
  .about-schweber { position: relative; margin-top: 44px; }
  /* Ab 900px stehen links und rechts Kommentarkacheln. Die Bildmitte wird dort
     schmaler, damit sie nicht dahinter verschwindet. */
  .about-schweber-mitte { max-width: 760px; margin: 0 auto; }
  @media (min-width: 900px)  { .about-schweber-mitte { max-width: 460px; } }
  @media (min-width: 1080px) { .about-schweber-mitte { max-width: 560px; } }
  .about-schweber-mitte img {
    display: block; width: 100%; height: auto;
    border-radius: var(--r-md);
  }
  .about-zettel {
    /* margin: 0 ist hier Pflicht, nicht Kosmetik. .about-zettel ist ein <figure>,
       und Browser geben figure von sich aus "margin: 1em 40px". Auf dem Handy war
       die Karte dadurch 263px breit statt 343 wie alles andere in der Spalte --
       ein ausgefranster Rand mitten in einer sonst buendigen Kolonne, dazu 1em
       Zusatzabstand oben und unten neben dem gap des Rasters. Im Browser bei
       375px nachgemessen. */
    margin: 0;
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 14px 30px -18px rgba(0,0,0,.4);
  }
  .about-zettel img { display: block; width: 100%; height: auto; }

  /* Handy: dieselbe Idee wie auf dem Desktop, nur enger ───────────────────
     Drei Anlaeufe davor, damit sie niemand wiederholt:
       1. Alle zehn in voller Breite untereinander -- 996px Hoehe bei 375px
          Fenster. Eine Liste, keine Wand, und lauter als das Bild dazu.
       2. Zwei Reihen zum Wischen -- die Karten wurden am rechten Rand
          mittendrin durchgeschnitten, das liest sich als kaputt. Und eine Geste
          zu verlangen ist falsch: die Zettel sind Beleg, kein Bedienelement.
       3. Kleiner und versetzt untereinander -- immer noch 753px Spalte.

     Der Fehler in allen dreien war, die Zettel unter das Bild zu stellen. Auf
     dem Desktop stehen sie NEBEN und UM die Telefone, und genau das geht auf dem
     Handy auch: die Bildmitte wird schmaler, die Zettel legen sich links und
     rechts daneben. Der ganze Block ist dann so hoch wie das Bild -- rund 430
     statt 753px -- und sieht aus wie oben, nur enger.
     Sechs statt zehn: mehr passt nebeneinander nicht, ohne dass sie sich
     gegenseitig verdecken. */
  .about-zettel-feld { display: grid; gap: 8px; margin-top: 24px; }

  @media (max-width: 899px) {
    /* Der Block braucht Hoehe, sonst liegen die sechs Zettel uebereinander auf den
       Telefonen: ohne min-height ist er nur so hoch wie das Bild (bei 66 % Breite
       gemessen 133px), und darin ist fuer sechs Zettel kein Platz. 420px geben
       jedem seinen Streifen -- und sind immer noch rund 330px weniger als die
       Spalte, die vorher hier stand. Das Bild sitzt mittig darin. */
    .about-schweber {
      min-height: 420px;
      display: flex;
      align-items: center;
    }
    /* Das Telefonbild ist die Hauptsache und liegt VORNE. Es stand hier auf 52 %
       Breite, damit die Zettel links und rechts danebenpassen -- bei 390px waren
       das gemessen 186x105px, also briefmarkengross in einem 420px hohen Block,
       und die Kommentare schwebten verloren drumherum. Jetzt 88 %: 315x178px.
       Die Zettel liegen ueber z-index dahinter und duerfen sich mit dem Bild
       ueberschneiden -- genau das ist auf dem Desktop auch die Wirkung. */
    .about-schweber-mitte {
      /* 88 % der Breite, aber nie mehr als 420px: auf einem 768px-Tablet waere das
         Bild sonst 634x357 und fuellte den 420px-Block bis auf 31px oben und unten,
         so dass alle sechs Zettel darauf lagen. Mit dem Deckel bleiben dort 92px
         Luft. */
      max-width: min(88%, 420px);
      width: 88%;
      position: relative;
      z-index: 2;
    }
    .about-zettel-feld {
      display: block;
      margin: 0;
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
    }
    .about-zettel {
      position: absolute;
      width: 40%;
      animation: about-schweben 4s ease-in-out infinite;
    }
    /* Drei Zettel oben, drei unten. Seitlich ist bei einem 88 % breiten Bild kein
       Platz mehr -- ein Zettel dort waere zu 85 % verdeckt. Oben und unten bleiben
       dagegen je rund 120px frei (Block 420, Bild 177). Die inneren beiden schneiden
       das Bild leicht an; weil sie dahinterliegen, entsteht genau dabei die Tiefe.
       KEINE negativen Werte hier: mit left/right auf -6% ragten zwei Zettel aus dem
       Kasten und machten das Dokument 395px breit in einem 390px-Fenster. */
    .about-zettel:nth-child(1) { left: 0;   top: 0%;  animation-delay: 0s; }
    .about-zettel:nth-child(2) { right: 0;  top: 9%;  animation-delay: .6s; }
    .about-zettel:nth-child(3) { left: 0;   top: 18%; animation-delay: 1.2s; }
    .about-zettel:nth-child(4) { right: 0;  top: 73%; animation-delay: 1.8s; }
    .about-zettel:nth-child(5) { left: 0;   top: 82%; animation-delay: 2.4s; }
    .about-zettel:nth-child(6) { right: 0;  top: 91%; animation-delay: 3s; }
    .about-zettel:nth-child(n+7) { display: none; }
  }

  /* Ab hier schweben sie */
  @media (min-width: 900px) {
    .about-zettel-feld {
      display: block; margin: 0;
      position: absolute; inset: 0;
      pointer-events: none;
    }
    .about-zettel {
      position: absolute;
      width: 232px;
      animation: about-schweben 4s ease-in-out infinite;
    }
    /* Die Streuung laeuft von 0 bis 3 % nach innen, nicht von -1 bis 2 %. Der
       Unterschied ist optisch keiner -- der Abstand zwischen dem am weitesten
       innen und dem am weitesten aussen liegenden Zettel bleibt derselbe 3 %.
       Aber mit -1 % stand der dritte und der achte Zettel je 11px ueber dem
       Kasten, und das meldete jeder QA-Lauf ab 900px Breite als Ueberlauf. Kein
       Schaden (die Seite scrollte nie waagerecht), aber Rauschen, das echte
       Befunde verdeckt.

       Das gilt nur WAAGERECHT. Senkrecht haengen der fuenfte und der zehnte
       Zettel weiterhin unter dem Kasten -- bei 1200px gemessen 38 bzw. 54px,
       weil ihr top-Wert prozentual zum Kasten steht und ihre eigene Hoehe
       dazukommt. Das ist gewollt und stoert nichts: bis zum naechsten Abschnitt
       sind es dort noch 42px Luft, und elementsFromPoint unter dem Zettel findet
       nur den Abschnitt selbst, keinen Inhalt. Wer senkrecht auf Ueberlauf
       prueft, bekommt hier also zwei Treffer, und die sind kein Befund. */
    .about-zettel:nth-child(1)  { left: 1%;   top: 2%;   animation-delay: 0s; }
    .about-zettel:nth-child(2)  { left: 2%;   top: 25%;  animation-delay: .8s; }
    .about-zettel:nth-child(3)  { left: 0;    top: 48%;  animation-delay: 1.6s; }
    .about-zettel:nth-child(4)  { left: 3%;   top: 70%;  animation-delay: 2.4s; }
    .about-zettel:nth-child(5)  { left: 1%;   top: 90%;  animation-delay: 3.2s; }
    .about-zettel:nth-child(6)  { right: 1%;  top: 0;    animation-delay: .4s; }
    .about-zettel:nth-child(7)  { right: 2%;  top: 22%;  animation-delay: 1.2s; }
    .about-zettel:nth-child(8)  { right: 0;   top: 45%;  animation-delay: 2s; }
    .about-zettel:nth-child(9)  { right: 3%;  top: 67%;  animation-delay: 2.8s; }
    .about-zettel:nth-child(10) { right: 1%;  top: 88%;  animation-delay: 3.6s; }
  }
  @media (min-width: 1080px) { .about-zettel { width: 252px; } }
  @keyframes about-schweben {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
  }
  @media (prefers-reduced-motion: reduce) { .about-zettel { animation: none; } }

  /* ── Textkommentare um die Behind-the-scenes-Telefone ─────────────────────*/
  .about-bts { position: relative; margin-top: 34px; }
  .about-bts-telefone {
    display: flex; gap: 16px; justify-content: center; align-items: center;
    position: relative; z-index: 1;
  }
  .about-bts-telefone .about-telefon { width: 46%; max-width: 208px; }
  @media (min-width: 640px) { .about-bts-telefone { gap: 24px; } }

  /* ── Zahlen ───────────────────────────────────────────────────────────────*/
  .about-zahlen {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 40px; text-align: center;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  }
  .about-zahl { padding: 26px 12px; border-right: 1px solid var(--border); }
  .about-zahl:nth-child(2n) { border-right: 0; }
  /* Trennlinie nach unten nur, wenn darunter noch eine Reihe kommt. Vorher stand
     hier :nth-child(-n+2), also "die ersten beiden immer" -- bei einer Seite mit nur
     zwei Zahlen lag die Linie dann direkt auf der Aussenkante des Kastens. */
  .about-zahl:not(:nth-last-child(-n+2)) { border-bottom: 1px solid var(--border); }
  @media (min-width: 768px) {
    /* Eine Reihe, so viele gleich breite Spalten wie es Zahlen gibt.

       Vorher stand hier repeat(4, 1fr) -- fest vier. Die Management-Seite hat auch
       vier, die Creators-Seite aber nur zwei; die sassen dann links in Spalte 1 und
       2, waehrend 3 und 4 leer blieben. Es sah aus, als waere die Reihe verrutscht.
       grid-auto-flow mit grid-auto-columns zaehlt stattdessen selbst. */
    .about-zahlen { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
    .about-zahl { padding: 34px 16px; border-right: 1px solid var(--border); border-bottom: 0; }
    .about-zahl:nth-child(2n) { border-right: 1px solid var(--border); }
    .about-zahl:last-child { border-right: 0; }
  }
  .about-zahl b {
    display: block;
    font-size: clamp(29px, 4.4vw, 44px);
    font-weight: var(--display-weight);
    letter-spacing: var(--display-track);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .about-zahl span { display: block; margin-top: 8px; font-size: var(--fs-sm); color: var(--text-muted); }

  /* ── Merkmalsleiste ───────────────────────────────────────────────────────*/
  .about-marken { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
  .about-mitte .about-marken { justify-content: center; }
  .about-marke {
    padding: 9px 17px; border: 1px solid var(--border);
    border-radius: var(--r-pill); font-size: var(--fs-sm); color: var(--text-muted);
  }

  /* ── Portraits ────────────────────────────────────────────────────────────*/
  .about-portrait { text-align: center; }
  .about-portrait img {
    width: 88px; height: 88px; border-radius: var(--r-round);
    object-fit: cover; background: var(--surface-sunk);
  }
  /* h3, nicht h4: die Portraets stehen unter der Abschnitts-Ueberschrift (h2),
     eine h4 haette eine Stufe uebersprungen. Die Groesse bleibt unveraendert --
     das ist ein Name unter einem Bild, keine Zwischenueberschrift. */
  .about-portrait h3,
  .about-portrait h4 { margin: 12px 0 2px; font-size: var(--fs-body); font-weight: 600; }
  .about-portrait p { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }

  /* ── Abschluss ────────────────────────────────────────────────────────────*/
  .about-schluss { text-align: center; padding: var(--abschnitt) 0; border-top: 1px solid var(--border); }
  .about-schluss .about-h { margin-bottom: 24px; }
  /* Knoepfe nebeneinander muessen gleich breit sein. "Register now" und "Log in"
     standen hier vorher in ihrer jeweiligen Textbreite nebeneinander -- derselbe
     unruhige Eindruck, den Jakob schon an der Bereichsnavigation angemerkt hat.
     min-width gibt beiden dieselbe Grundbreite; auf schmalen Geraeten teilen sie
     sich die Zeile stattdessen zu gleichen Teilen, statt untereinander zu rutschen. */
  .about-knopfreihe { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 28px; }
  .about-knopfreihe > .btn-base { min-width: 170px; }
  /* Messung U2 (08.10.2026): mit flex: 1 1 0 und min-width: 0 brach ein Knopf zweizeilig um
     ("Creator | entdecken"), der Nachbar blieb einzeilig, beide 60 statt 43 px hoch. Jetzt
     stehen zwei Knoepfe gleich breit nebeneinander, solange beide Texte einzeilig passen;
     sonst rutschen beide untereinander auf volle Breite. Gleich breit bleibt es in beiden Faellen. */
  @media (max-width: 640px) {
    .about-knopfreihe > .btn-base { flex: 1 1 calc(50% - 5px); min-width: max-content; }
  }

  /* ── Tabellenartige Aufstellungen ─────────────────────────────────────────*/
  .about-panel {
    background: var(--surface-sunk); border: 1px solid var(--border);
    border-radius: var(--r-md); padding: 20px; margin-top: 40px; overflow-x: auto;
  }
  .about-panel h3 { margin: 0 0 16px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }
  .about-kacheln { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  @media (min-width: 768px) { .about-kacheln { grid-template-columns: repeat(4, 1fr); } }
  .about-kachel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 14px 16px; }
  .about-kachel span { display: block; font-size: var(--fs-xs); color: var(--text-muted); }
  .about-kachel b { display: block; margin-top: 4px; font-size: var(--fs-h3); font-variant-numeric: tabular-nums; }

  .about-liste { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 460px; }
  .about-liste th, .about-liste td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); }
  .about-liste th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); font-weight: 500; }
  .about-liste td.zahl { text-align: right; font-variant-numeric: tabular-nums; }
  .about-liste tr:last-child td { border-bottom: 0; }
  /* Messung U3 (08.10.2026): mit min-width 460 px lagen Betraege und Spalten auf dem Handy rechts
     ausserhalb und waren nur durch seitliches Wischen im Kasten zu sehen. Die Dashboard-Regeln
     weiter unten sind spezifischer und bleiben. */
  @media (max-width: 640px) {
    .about-liste { min-width: 0; font-size: var(--fs-xs); }
    .about-liste th, .about-liste td { padding: 8px 6px; }
    .about-liste th { text-transform: none; letter-spacing: 0; }
    .about-liste th:first-child, .about-liste td:first-child { padding-left: 0; }
    .about-liste th:last-child, .about-liste td:last-child { padding-right: 0; }
    /* Live-Sichtpruefung 10.10.2026: im Beispiel mit 100 Euro war "Auszahlung" bei 390px rechts
       abgeschnitten, weil "umsatzsteuerpflichtig" und "Umsatzsteuer" keine Umbruchstelle haben.
       Mit Silbentrennung (lang="de") passt die Tabelle in den Kasten. */
    .about-steuerbeispiel th, .about-steuerbeispiel td:first-child { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
  }

  /* ── Die Dashboard-Abbildung auf der Management-Seite ────────────────────
     Vorher waren das vier gleich schwere graue Kaesten untereinander. Inhaltlich
     richtig, aber es las sich als "vier Boxen" und nicht als eine Oberflaeche --
     genau Jakobs Einwand ("sieht nach random Zeugs aus, nicht nach Dashboard").

     Was ein Bild zu einem Dashboard macht, ist nicht mehr Inhalt, sondern ein
     Rahmen: EIN Fenster statt vier Karten, eine Kopfleiste, die sagt "das ist eine
     Anwendung", und eine Rangfolge im Inneren -- Kennzahlen oben, die Haupttabelle
     darunter, Nebensaechliches zuletzt. Die Panels darin verlieren deshalb ihren
     eigenen Rahmen und ihre Fuellung; getrennt wird nur noch mit Haarlinien. */
  .about-dashboard {
    margin-top: 40px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 18px 40px -28px rgba(0,0,0,.35);
  }
  /* Kopfleiste. Bewusst ohne echte Bedienelemente -- es ist eine Abbildung, kein
     Bauteil. Die drei Punkte links zitieren ein Fenster, ohne ein Betriebssystem
     nachzuahmen. */
  .about-dashboard-leiste {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 16px;
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--border);
  }
  .about-dashboard-punkte { display: flex; gap: 6px; flex: none; }
  .about-dashboard-punkte i {
    width: 9px; height: 9px; border-radius: var(--r-round);
    background: var(--border-strong); display: block;
  }
  /* flex-wrap mit fester Zeilenhoehe (Messung U12, 08.10.2026): ein Reiter, der nicht mehr passt,
     rutscht in die unsichtbare zweite Zeile, statt am Rand angeschnitten zu werden ("Eins"). */
  .about-dashboard-reiter {
    display: flex; flex-wrap: wrap; gap: 0 18px; font-size: var(--fs-xs); color: var(--text-muted);
    overflow: hidden; white-space: nowrap; height: 1.25em; line-height: 1.25em;
  }
  .about-dashboard-reiter b { color: var(--text); font-weight: 600; }
  .about-dashboard-nutzer {
    margin-left: auto; flex: none;
    width: 22px; height: 22px; border-radius: var(--r-round);
    background: var(--accent-soft);
  }
  .about-dashboard-koerper { padding: 20px 16px 4px; }
  @media (min-width: 768px) { .about-dashboard-koerper { padding: 24px 22px 6px; } }

  /* Innerhalb des Fensters sind die Abschnitte keine Karten mehr. */
  .about-dashboard .about-panel {
    background: transparent; border: 0; border-radius: 0;
    padding: 0 0 22px; margin-top: 22px;
    border-bottom: 1px solid var(--border);
  }
  .about-dashboard .about-panel:first-child { margin-top: 0; }
  .about-dashboard .about-grid { margin-top: 0; gap: 0; }
  .about-dashboard .about-grid .about-panel { border-bottom: 0; }
  @media (min-width: 768px) {
    .about-dashboard .about-grid.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
    /* Trennlinie zwischen den beiden unteren Feldern statt eines Rahmens um jedes */
    .about-dashboard .about-grid .about-panel + .about-panel {
      border-left: 1px solid var(--border); padding-left: 28px; margin-left: -1px;
    }
  }
  /* Die Kennzahlen tragen die Rangfolge: sie stehen ganz oben und sind das
     Einzige, was noch eine eigene Flaeche bekommt. */
  .about-dashboard .about-kachel { background: var(--surface-sunk); border-color: transparent; }
  .about-dashboard .about-kachel b { font-variant-numeric: tabular-nums; }

  /* Kennungen und Bezeichner brechen nicht um. Eine Rechnungsnummer, die ueber zwei
     Zeilen laeuft ("INV-2025-\n001"), gibt es in keiner echten Oberflaeche -- und
     genau solche Kleinigkeiten entscheiden, ob eine Abbildung glaubwuerdig wirkt.
     Nur die erste Spalte; die Beschreibungsspalte daneben darf umbrechen. */
  .about-dashboard .about-liste td:first-child { white-space: nowrap; }
  .about-dashboard .about-liste th, .about-dashboard .about-liste td { padding: 9px 10px; }
  .about-dashboard .about-liste td:first-child { padding-left: 0; }
  .about-dashboard .about-liste td:last-child, .about-dashboard .about-liste th:last-child { padding-right: 0; }

  /* Auf schmalen Geraeten soll die Abbildung passen und nicht seitlich wegscrollen --
     seitliches Wischen war schon einmal ein berechtigter Einwand. Statt zu scrollen
     faellt eine Spalte weg (Product views, die am ehesten verzichtbare) und die
     Schrift wird eine Stufe kleiner. Damit steht die Tabelle bei 375px vollstaendig. */
  @media (max-width: 640px) {
    .about-dashboard .about-liste { min-width: 0; font-size: var(--fs-xs); }
    /* Das nowrap aus der Desktop-Regel oben haelt "@laura-wilhelm-77" auf einer
       Zeile und zwingt die Tabelle damit auf 365px in ein 343px breites Feld.
       Auf dem Handy darf die erste Spalte umbrechen -- nur die Kennungen der
       Rechnungen nicht, die sind kurz genug. */
    .about-dashboard .about-liste td:first-child { white-space: normal; }
    .about-dashboard .about-grid .about-liste td:first-child { white-space: nowrap; }
    /* 6px seitlich liessen die Tabelle noch 22px ueber das Feld ragen (331 in 309
       gemessen). Mit 3px passt sie -- aber erst ab 375px Fensterbreite, und das
       war zu wenig. Mit "table-layout: auto" bestimmt der Inhalt die Spalten, und
       deren Summe blieb bei 310px stehen, egal wie schmal das Feld wurde: bei
       375px 310 in 309, bei 360px 310 in 294, bei 320px 310 in 254 -- also 56px
       abgeschnitten. Nicht sichtbar als Scrollleiste, weil der body waagerecht
       klippt; sichtbar nur daran, dass die letzte Spalte fehlt. Genau die Sorte
       Fehler, die der Umbau hier verhindern sollte.

       "table-layout: fixed" mit width: 100% dreht das um: die Spalten bekommen die
       Breite des Feldes zugeteilt statt umgekehrt. Die Handles in der ersten Spalte
       ("@laura-wilhelm-77", 94px am Stueck) brauchen dafuer overflow-wrap, sonst
       ragen sie einzeln aus ihrer Zelle. */
    .about-dashboard .about-liste { table-layout: fixed; width: 100%; }
    .about-dashboard .about-liste th:first-child,
    .about-dashboard .about-liste td:first-child { overflow-wrap: anywhere; }
    /* Die Spaltenkoepfe sind einzelne Woerter in schmalen Spalten. Bis 08.10.2026 standen sie in
       Grossschrift mit Sperrung und wurden getrennt; die Messung U4 fand in 74 bis 87 px
       "PROFI-|LAUFRU-|FE" und "PURCHAS|ES". Jetzt ohne Grossschrift, Sperrung und Trennung:
       so passen die Woerter ganz, notfalls bricht eine Zeile an der Wortgrenze ("Profile | views"). */
    .about-dashboard .about-liste th { text-transform: none; letter-spacing: 0; hyphens: manual; overflow-wrap: normal; }
    .about-dashboard .about-liste th, .about-dashboard .about-liste td { padding: 8px 3px; }
    .about-dashboard .about-liste th:nth-child(3),
    .about-dashboard .about-liste td:nth-child(3) { display: none; }
    /* Die beiden unteren Felder haben nur zwei bzw. drei Spalten -- dort waere das
       Ausblenden falsch, deshalb nur in der Creator-Tabelle. */
    .about-dashboard .about-grid .about-liste th:nth-child(3),
    .about-dashboard .about-grid .about-liste td:nth-child(3) { display: table-cell; }
  }

  /* Die Schritt-Bausteine (.about-schritte/.about-schritt) standen hier fuer den
     Creator-Guide. Der ist seit dem Umbau auf Telefon-Ansichten zweispaltig und
     bringt sein eigenes CSS mit (guide_css.html) -- die Werte fuer Ziffer,
     Fliesstext und Listen sind dort uebernommen. Ohne Nutzer im Markup waeren die
     Regeln hier nur noch Ballast gewesen. */


  /* ── Deutsche Kurzfassung, Ablauf, Fragen (01.10.2026) ────────────────────
     Drei Bausteine, die jede About-Seite voller und belastbarer machen: was
     wyrld ist (about_kurz), wie es funktioniert (about_ablauf), was Leute
     fragen (about_faq). Gestaltet mit denselben Karten und Tokens wie der Rest,
     damit sie nicht als nachgeschobener Textblock wirken. */
  .about-h-klein { font-size: clamp(24px, 3.4vw, 34px); }
  .about-kurz { display: grid; gap: 20px 56px; }
  @media (min-width: 900px) {
    .about-kurz { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
    .about-kurz .about-fakten { grid-column: 1 / -1; }
  }
  .about-kurz-kopf { text-align: left; }
  .about-kurz-kopf .about-eyebrow { margin-bottom: 16px; }
  .about-kurz-kopf .about-h { text-align: left; }
  .about-kurz-text p { margin: 0 0 14px; font-size: 18px; line-height: 1.65; color: var(--text); max-width: 64ch; }
  .about-kurz-text p + p { color: var(--text-muted); font-size: 17px; }
  /* Faktenleiste: Trennlinien ueber gap auf farbigem Grund statt Rahmen je Feld --
     so stimmt jede Zeile, egal ob vier oder fuenf Felder (Creator-Seite: fuenf). */
  .about-fakten {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
    margin: 12px 0 0; border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--border); overflow: hidden;
  }
  .about-fakten div { padding: 18px 20px; background: var(--surface-sunk); }
  .about-fakten div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  @media (min-width: 768px) {
    .about-fakten { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
    .about-fakten div:last-child:nth-child(odd) { grid-column: auto; }
  }
  .about-fakten dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
  .about-fakten dd { margin: 6px 0 0; font-size: var(--fs-h3); font-weight: var(--display-weight); line-height: 1.2; }

  /* Ablauf: nummerierte Karten. Die Ziffer kommt aus einem CSS-Zaehler, damit
     die Liste ein echtes <ol> bleibt -- Vorleseprogramme sagen "Schritt 3 von 6". */
  .about-ablauf {
    list-style: none; margin: 40px 0 0; padding: 0; counter-reset: schritt;
    display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr);
  }
  @media (min-width: 640px) { .about-ablauf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 960px) { .about-ablauf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
  .about-ablauf li { counter-increment: schritt; position: relative; padding-top: 58px; }
  .about-ablauf li::before {
    content: counter(schritt, decimal-leading-zero);
    position: absolute; top: 20px; left: 22px;
    font-size: var(--fs-sm); font-weight: 600; letter-spacing: .06em; color: var(--text-muted);
  }
  .about-ablauf h3, .about-gewinner h3 { margin: 0 0 8px; font-size: var(--fs-h3); }
  .about-gewinner { margin-top: 16px; }
  .about-gewinner .about-karte { background: var(--surface-sunk); }

  /* Fragen: aufklappbar ohne Skript. */
  .about-faq { max-width: 820px; margin: 40px auto 0; border-top: 1px solid var(--border); }
  .about-faq details { border-bottom: 1px solid var(--border); }
  .about-faq summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 20px 0;
  }
  .about-faq summary::-webkit-details-marker { display: none; }
  .about-faq summary h3 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.4; }
  .about-faq summary::after {
    content: "+"; flex: none; width: 28px; height: 28px; border: 1px solid var(--border);
    border-radius: var(--r-round); display: grid; place-items: center;
    font-size: 18px; line-height: 1; color: var(--text-muted);
  }
  .about-faq details[open] summary::after { content: "×"; } /* kein Gedankenstrich (Jakob), 08.10.2026 */
  .about-faq details p { margin: 0 0 22px; color: var(--text-muted); line-height: 1.7; max-width: 70ch; }
  .about-faq details p a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
  .about-faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-sm); }

  /* Beispieldaten: die Dashboard-Abbildungen zeigen erfundene Zahlen. Das
     Schild sagt es dem Menschen, data-nosnippet sagt es Google, und der
     Begleitsatz in der Abbildung sagt es jedem Sprachmodell, das den Text liest. */
  .about-beispiel {
    display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px;
    padding: 4px 11px; border: 1px dashed var(--border-strong); border-radius: var(--r-pill);
    font-size: var(--fs-xs); color: var(--text-muted); letter-spacing: .02em;
  }
  .about-mitte .about-beispiel { margin: 18px 0 0; }

  /* Vergleichstabelle (/creator-shop-vergleich) */
  .about-vergleich { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); min-width: 1040px; table-layout: fixed; }
  .about-vergleich thead th:first-child { width: 150px; }
  /* Live-Sichtpruefung 10.10.2026 (1280px): bei gleich breiten Spalten war wyrld mit den laengsten
     Texten die schmalste Spalte, die Zeile "Zugang" wurde rund 450px hoch. wyrld bekommt mehr Platz,
     die anderen fuenf teilen sich den Rest (table-layout: fixed nimmt die Breiten aus dem Kopf). */
  .about-vergleich thead th.wyrld { width: 24%; }
  @media (max-width: 640px) {
    .about-vergleich { min-width: 900px; font-size: var(--fs-xs); }
    .about-vergleich thead th:first-child { width: 112px; }
    .about-vergleich th, .about-vergleich td { padding: 12px 10px; }
  }
  /* Sechs Spalten passen auf dem Handy nicht nebeneinander. Die Tabelle wischt im
     Kasten, die Zeilenkoepfe bleiben links stehen, damit man weiss, welche Zeile man liest. */
  .about-vergleich-huelle { padding: 0; }
  .about-vergleich tbody th, .about-vergleich thead th:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--surface-sunk);
    box-shadow: 1px 0 0 var(--border);
  }
  .about-quellen ul { margin: 0; padding-left: 18px; color: var(--text-muted); line-height: 1.8; font-size: var(--fs-sm); }
  .about-quellen a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
  .about-vergleich th, .about-vergleich td { padding: 14px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); line-height: 1.5; }
  /* Live-Sichtpruefung nach #248 (10.10.2026, 1280px): seit die wyrld-Spalte 24 % hat, sind die
     Anbieterspalten schmaler, und lange Woerter liefen in die Nachbarspalte ("Nutzungsbedingungen",
     "umsatzsteuerpflichtige", "Partnerprogramm" am Tabellenrand). Silbentrennung nach der Sprache
     der Seite, break-word nur als Notbremse fuer Woerter ohne Trennstelle. */
  .about-vergleich th, .about-vergleich td { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
  .about-vergleich thead th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); font-weight: 500; }
  .about-vergleich tbody th { font-weight: 600; }
  .about-vergleich td.wyrld, .about-vergleich th.wyrld { background: var(--surface); }
  /* Kopf der wyrld-Spalte mit der Wortmarke statt des Worts (10.10.2026). Der Kopf ist klein und in
     Versalien gesetzt; die Marke bekommt eine eigene Hoehe, sonst stuende sie 10px klein da. */
  .about-vergleich thead th.wyrld { color: var(--text); }
  .about-vergleich thead th.wyrld .wortmarke { height: 20px; vertical-align: -5px; margin: 0; }
  /* 500 statt 600: ganze Absaetze in Fett lasen sich schwer (Sichtpruefung 10.10.2026); die Spalte
     hebt sich weiter ueber den hellen Grund und den Kopf ab. */
  .about-vergleich td.wyrld { font-weight: 500; }
  /* Vergleich auf dem Handy als Karten (08.10.2026, Jakob: "auf dem Handy sehe ich nur wyrld und
     LTK"). Die Tabelle wischte im Kasten, ohne dass etwas darauf hinwies; bei 375 px waren nur
     Zeilenkopf, wyrld und ein Stueck LTK zu sehen. Unter 700 px wird jede Zeile (ein Kriterium)
     eine Karte, darin alle Anbieter untereinander, jeder mit seinem Namen aus data-label, wyrld
     zuerst und hervorgehoben. Nur fuer .anbieter: die Steuertabelle der Abrechnungsseite hat drei
     Spalten und wischt weiter. Der Tabellenkopf ist nur versteckt, nicht entfernt, und die
     role-Attribute im HTML halten die Tabellensemantik, auch wenn display:block sie sonst nimmt.
     content mit "/ ''": der Name ist fuer Vorleseprogramme schon der Spaltenkopf, sie sollen
     ihn nicht zweimal hoeren (Browser ohne diese Schreibweise nehmen die Zeile davor). */
  @media (max-width: 699px) {
    .anbieter-huelle { background: none; border: 0; border-radius: 0; padding: 0; overflow: visible; }
    .about-vergleich.anbieter,
    .about-vergleich.anbieter tbody,
    .about-vergleich.anbieter tr,
    .about-vergleich.anbieter th,
    .about-vergleich.anbieter td { display: block; }
    .about-vergleich.anbieter { min-width: 0; width: 100%; table-layout: auto; font-size: var(--fs-sm); }
    .about-vergleich.anbieter thead {
      position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
      overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
    .about-vergleich.anbieter tbody tr {
      background: var(--surface-sunk); border: 1px solid var(--border);
      border-radius: var(--r-md); overflow: hidden;
    }
    .about-vergleich.anbieter tbody tr + tr { margin-top: 12px; }
    .about-vergleich.anbieter tbody th {
      position: static; background: none; box-shadow: none;
      padding: 16px 16px 12px; font-size: var(--fs-body, 16px); line-height: 1.35;
    }
    .about-vergleich.anbieter td { padding: 12px 16px; line-height: 1.55; }
    .about-vergleich.anbieter td:last-child { border-bottom: 0; }
    .about-vergleich.anbieter td::before {
      content: attr(data-label);
      content: attr(data-label) / "";
      display: block; margin-bottom: 3px;
      font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
      color: var(--text-muted);
    }
    .about-vergleich.anbieter td.wyrld { background: var(--surface); box-shadow: inset 3px 0 0 var(--text); }
    .about-vergleich.anbieter td.wyrld::before { color: var(--text); }
  }
  /* "Warum wyrld" auf der Vergleichsseite (08.10.2026): ein Kasten direkt unter der Einleitung.
     Rahmen in Textfarbe wie die hervorgehobene wyrld-Spalte, Haken wie bei .about-gegenueber .mit.
     Einspaltig bis 767 px, zwei Spalten ab 768, drei ab 1024 px; jeder Punkt hat oben eine feine
     Linie, so stehen die Zeilen auch in zwei oder drei Spalten auf einer Hoehe. minmax(0, 1fr) und
     overflow-wrap, damit nichts aus dem Kasten laeuft (360 bis 414 px). */
  .about-warum {
    border: 1px solid var(--text); border-radius: var(--r-md); background: var(--surface-sunk);
    padding: 24px 20px 20px;
  }
  @media (min-width: 768px) { .about-warum { padding: 36px 36px 28px; } }
  .about-warum-kopf { max-width: 62ch; }
  /* page_css zentriert "section h2"; im Kasten steht die Ueberschrift links ueber den Punkten. */
  .about-warum-kopf .about-h { text-align: left; }
  .about-warum-kopf p { margin: 10px 0 0; color: var(--text-muted); line-height: 1.6; }
  .about-warum-liste {
    list-style: none; margin: 22px 0 0; padding: 0;
    display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 32px;
  }
  @media (min-width: 768px) { .about-warum-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1024px) { .about-warum-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .about-warum-liste li { position: relative; padding: 16px 0 18px 28px; border-top: 1px solid var(--border); }
  .about-warum-liste li::before {
    content: "✓"; position: absolute; left: 0; top: 16px; font-weight: 700; line-height: 1.35; color: var(--text);
  }
  .about-warum-liste b { display: block; font-size: var(--fs-body, 16px); font-weight: 600; line-height: 1.35; overflow-wrap: break-word; }
  .about-warum-liste li > span { display: block; margin-top: 6px; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; overflow-wrap: break-word; }
  .about-warum-fuss {
    margin: 0; padding-top: 16px; border-top: 1px solid var(--border);
    font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.6;
  }
  .about-warum-fuss a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
  /* Sprungziele (#quellen, #abo, #boost, ...): Kopfzeile und Bereichsleiste kleben oben, ohne
     Abstand stuende die Ueberschrift dahinter. */
  .about-seite #quellen,
  .about-seite .about-section[id] { scroll-margin-top: calc(var(--kopf-hoehe, 78px) + 72px); }
  .about-stand { margin-top: 18px; font-size: var(--fs-xs); color: var(--text-muted); }
  .about-prosa { max-width: 760px; margin: 40px auto 0; }
  .about-prosa h3 { margin: 32px 0 8px; font-size: var(--fs-h3); }
  .about-prosa p { margin: 0 0 14px; color: var(--text-muted); line-height: 1.7; }


  /* ── Grafiken der Business-Seiten (01.10.2026, Runde 3) ───────────────────
     Gezeichnet aus HTML statt als Bild: der Text darin bleibt Text (lesbar fuer
     Suchmaschinen und Vorleseprogramme), skaliert mit der Schrift und braucht
     keine eigene Datei. Alle Farben aus den Tokens. Beispielwerte tragen immer
     das Schild .about-beispiel. */
  .about-bild {
    margin-top: 40px; padding: 28px 20px; border: 1px solid var(--border);
    border-radius: var(--r-md); background: var(--surface-sunk);
  }
  @media (min-width: 768px) { .about-bild { padding: 40px 36px; } }
  .about-bild-unter { margin: 18px 0 0; text-align: center; font-size: var(--fs-sm); color: var(--text-muted); }

  /* Fluss: Knoten mit Pfeilen, nebeneinander ab 900px, darunter untereinander. */
  .about-fluss { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 900px) {
    .about-fluss { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 34px; align-items: stretch; }
  }
  .about-fluss li {
    position: relative; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-md); padding: 18px 18px 16px; text-align: left;
  }
  .about-fluss li b { display: block; font-size: var(--fs-body); margin-bottom: 4px; }
  .about-fluss li span { display: block; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; }
  .about-fluss li small {
    display: inline-block; margin-bottom: 10px; font-size: var(--fs-xs); letter-spacing: .08em;
    text-transform: uppercase; color: var(--text-muted);
  }
  .about-fluss li.betont { border-color: var(--text); box-shadow: 0 10px 28px -20px rgba(0,0,0,.5); }
  .about-fluss li + li::before {
    content: "↓"; position: absolute; left: 50%; top: -14px; transform: translate(-50%, -50%);
    font-size: 16px; color: var(--text-muted); line-height: 1;
  }
  @media (min-width: 900px) {
    .about-fluss li + li::before { content: "→"; left: -17px; top: 50%; }
  }

  /* Preisvergleich: links das eingefuegte Produkt, rechts die gefundenen Angebote. */
  .about-preisbild { display: grid; gap: 22px; align-items: center; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 900px) { .about-preisbild { grid-template-columns: minmax(0, 4fr) auto minmax(0, 6fr); gap: 28px; } }
  .about-preis-quelle {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 20px;
  }
  .about-preis-quelle .link {
    display: block; font-size: var(--fs-xs); color: var(--text-muted); border: 1px dashed var(--border-strong);
    border-radius: var(--r-sm); padding: 8px 10px; margin: 10px 0 14px; overflow-wrap: anywhere;
  }
  .about-preis-quelle small { display: block; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
  .about-preis-quelle b { display: block; font-size: var(--fs-h3); line-height: 1.25; }
  .about-preis-quelle span { display: block; margin-top: 4px; font-size: var(--fs-sm); color: var(--text-muted); }
  .about-preis-pfeil { text-align: center; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.4; }
  .about-preis-pfeil i { display: block; font-style: normal; font-size: 26px; color: var(--text); }
  @media (max-width: 899px) { .about-preis-pfeil i { transform: rotate(90deg); } }
  .about-angebote { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .about-angebote li {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 14px;
    font-size: var(--fs-sm);
  }
  .about-angebote li b { font-variant-numeric: tabular-nums; }
  /* Grundpreis neben jedem Beispielpreis, gleich gross, nicht fett (20.10.2026). */
  .about-angebote li b .about-grundpreis { font-weight: 400; }
  .about-angebote li em {
    font-style: normal; font-size: var(--fs-xs); color: var(--text-muted);
    border: 1px solid var(--border); border-radius: var(--r-pill); padding: 2px 9px; white-space: nowrap;
  }
  .about-angebote li.guenstig { border-color: var(--text); }

  /* Geldfluss (Management): ein Betrag, der sich in zwei Gutschriften teilt. */
  .about-teilung { display: grid; gap: 14px; }
  .about-teilung-balken {
    display: grid; grid-template-columns: 7fr 3fr; border-radius: var(--r-sm); overflow: hidden;
    border: 1px solid var(--text); font-size: var(--fs-sm); font-weight: 600;
  }
  .about-teilung-balken span { padding: 14px 16px; }
  .about-teilung-balken span:first-child { background: var(--text); color: var(--surface); }
  .about-teilung-balken span:last-child { background: var(--surface); }
  .about-teilung-ziele { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 640px) { .about-teilung-ziele { grid-template-columns: 7fr 3fr; } }
  .about-teilung-ziele div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 14px 16px; }
  .about-teilung-ziele b { display: block; font-size: var(--fs-body); }
  .about-teilung-ziele span { display: block; margin-top: 4px; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; }

  /* Ohne / mit wyrld */
  .about-gegenueber { display: grid; gap: 16px; margin-top: 40px; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 768px) { .about-gegenueber { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
  .about-gegenueber > div { border: 1px solid var(--border); border-radius: var(--r-md); padding: 24px; background: var(--surface); }
  .about-gegenueber > div.mit { border-color: var(--text); background: var(--surface-sunk); }
  .about-gegenueber h3 { margin: 0 0 14px; font-size: var(--fs-h3); }
  .about-gegenueber ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .about-gegenueber li { position: relative; padding-left: 26px; color: var(--text-muted); line-height: 1.55; }
  .about-gegenueber li::before { position: absolute; left: 0; top: 0; font-weight: 700; color: var(--text); }
  .about-gegenueber .ohne li::before { content: "×"; }
  .about-gegenueber .mit li::before { content: "✓"; }
  .about-gegenueber .mit li { color: var(--text); }

  /* Zeitleiste (Abrechnung) */
  .about-zeit { list-style: none; margin: 40px auto 0; padding: 0; max-width: 820px; display: grid; gap: 0; }
  .about-zeit li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding-bottom: 26px; position: relative; }
  .about-zeit li::after {
    content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 1px; background: var(--border-strong);
  }
  .about-zeit li:last-child::after { display: none; }
  .about-zeit li > i {
    width: 44px; height: 44px; border-radius: var(--r-round); border: 1px solid var(--border-strong);
    background: var(--surface); display: grid; place-items: center; font-style: normal;
    font-size: var(--fs-sm); font-weight: 600;
  }
  .about-zeit li:last-child > i { background: var(--text); color: var(--surface); border-color: var(--text); }
  .about-zeit h3 { margin: 10px 0 4px; font-size: var(--fs-body); }
  .about-zeit p { margin: 0; color: var(--text-muted); line-height: 1.6; }

  /* Funktionsraster mit kleiner Kennzeile */
  .about-funktionen .about-karte small {
    display: block; margin-bottom: 8px; font-size: var(--fs-xs); letter-spacing: .08em;
    text-transform: uppercase; color: var(--text-muted);
  }
  .about-funktionen .about-karte h3 { margin: 0 0 8px; font-size: var(--fs-h3); }


  /* Sprachumschalter unter der Bereichsleiste */
  /* Steht in main.about-seite, das schon das seitliche Polster traegt. */
  .about-sprache-zeile { display: flex; justify-content: flex-end; padding-top: 4px; margin-bottom: -20px; position: relative; z-index: 1; }
  @media (max-width: 767px) { .about-sprache-zeile { margin-bottom: -8px; } }
  .about-sprache {
    display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px;
    border: 1px solid var(--border); border-radius: var(--r-pill);
    font-size: var(--fs-sm); color: var(--text-muted); text-decoration: none;
    transition: border-color var(--dauer) ease, color var(--dauer) ease;
  }
  .about-sprache span { font-weight: 700; font-size: var(--fs-xs); letter-spacing: .08em; color: var(--text); }
  @media (hover: hover) { .about-sprache:hover { border-color: var(--border-strong); color: var(--text); } }

  /* Marktzahlen mit Quelle */
  .about-markt { display: grid; gap: 14px; margin-top: 40px; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 640px) { .about-markt { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 960px) { .about-markt { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
  .about-markt figure { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 22px; display: flex; flex-direction: column; }
  .about-markt b { font-size: clamp(34px, 4.6vw, 46px); font-weight: var(--display-weight); letter-spacing: var(--display-track); line-height: 1; font-variant-numeric: tabular-nums; }
  .about-markt p { margin: 12px 0 16px; line-height: 1.55; }
  .about-markt figcaption { margin-top: auto; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; }
  .about-markt figcaption a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
  .about-markt-logik { max-width: 820px; margin: 36px auto 0; padding: 24px; border-left: 3px solid var(--text); background: var(--surface-sunk); border-radius: 0 var(--r-md) var(--r-md) 0; }
  .about-markt-logik h3 { margin: 0 0 8px; font-size: var(--fs-h3); }
  .about-markt-logik p { margin: 0; color: var(--text-muted); line-height: 1.7; }

  /* ── Marken-Produkte: Abo und Boost (17.10.2026, /about/brands) ──────────
     Bildsprache aus den Versand-Decks (Kampagnenpool-Karte, Shop-Auswahl, Dashboard mit
     Provision, Kreislauf), gebaut aus den Tokens dieser Seite. Kartentitel bleiben in der
     Grundschrift: Riccione Serial hat nur den Light-Schnitt und steht nie unter 40px. */
  .about-produkte { display: grid; gap: 16px; margin-top: 40px; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 768px) { .about-produkte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
  .about-produkt {
    display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 20px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
    color: var(--text); text-decoration: none;
    transition: border-color var(--dauer) ease, transform var(--dauer) cubic-bezier(0.22, 1, 0.36, 1);
  }
  @media (hover: hover) { .about-produkt:hover { border-color: var(--border-strong); transform: translateY(-2px); } }
  @media (prefers-reduced-motion: reduce) { .about-produkt, .about-produkt:hover { transition: none; transform: none; } }
  .about-produkt:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .about-produkt small { font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
  .about-produkt h3 { margin: 0; font-size: clamp(22px, 2.6vw, 28px); font-weight: 600; line-height: 1.15; }
  .about-produkt p { margin: 0; color: var(--text-muted); line-height: 1.6; }
  .about-produkt-fuss {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: auto;
    padding-top: 16px; border-top: 1px solid var(--border); font-size: var(--fs-sm);
  }
  .about-produkt-fuss b { font-weight: 600; }
  .about-produkt-fuss span { color: var(--text-muted); }
  .about-produkt-fuss i { font-style: normal; }
  /* Boost dunkel wie im Deck. Gedaempfte Schrift 72 % Weiss auf --text: rund 8:1. */
  .about-produkt.dunkel { background: var(--text); border-color: var(--text); color: var(--surface); }
  .about-produkt.dunkel small, .about-produkt.dunkel p, .about-produkt.dunkel .about-produkt-fuss span { color: rgba(255, 255, 255, .72); }
  .about-produkt.dunkel .about-produkt-fuss { border-top-color: rgba(255, 255, 255, .18); }
  .about-produkt.dunkel:focus-visible { outline-color: var(--text); }
  .about-kernsatz {
    max-width: 820px; margin: 28px auto 0; padding: 20px 24px; text-align: center;
    background: var(--surface-sunk); border-radius: var(--r-md);
    font-size: 18px; font-weight: 600; line-height: 1.5;
  }
  @media (max-width: 640px) { .about-kernsatz { font-size: 17px; text-align: left; } }

  /* Abo: Punkte links, Dashboard rechts. Erst ab 1024px nebeneinander, darunter haette die
     Tabelle mit fuenf Spalten in einer halben Breite keinen Platz. */
  .about-abo { display: grid; gap: 28px; margin-top: 40px; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 1024px) { .about-abo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: start; } }
  .about-punkte { list-style: none; margin: 0; padding: 0; counter-reset: punkt; }
  .about-punkte li { counter-increment: punkt; position: relative; padding: 16px 0 16px 40px; border-top: 1px solid var(--border); }
  .about-punkte li:first-child { border-top: 2px solid var(--text); }
  .about-punkte li::before {
    content: counter(punkt); position: absolute; left: 0; top: 16px;
    font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; color: var(--text-muted);
  }
  .about-punkte h3 { margin: 0 0 4px; font-size: var(--fs-h3); line-height: 1.3; }
  .about-punkte p { margin: 0; color: var(--text-muted); line-height: 1.55; }
  .about-seite .about-abo-dashboard { margin: 0; }
  .about-rate {
    display: inline-block; padding: 2px 9px; border: 1px solid transparent; border-radius: var(--r-pill);
    font-weight: 600; white-space: nowrap; color: var(--text-muted);
  }
  .about-rate.hoch { background: var(--text); border-color: var(--text); color: var(--surface); }
  .about-rate.runter { border-color: var(--border-strong); }
  /* Handy: die Dashboard-Regeln oben setzen table-layout: fixed und lassen die erste Spalte
     ueberall umbrechen ("@sophie.wea|rs" bei 375px). Hier sind es nach dem Ausblenden der
     Klicks nur vier kurze Spalten, die passen mit auto und ungebrochenen Namen. */
  @media (max-width: 640px) {
    .about-abo-dashboard .about-liste { table-layout: auto; }
    .about-abo-dashboard .about-liste td:first-child { white-space: nowrap; overflow-wrap: normal; }
  }

  /* Priority: Text links, eine kleine Preisliste rechts. Der Priority-Shop ist bewusst nicht
     der guenstigste: der Platz kauft die Stelle, nicht das Etikett "Bester Preis". */
  .about-priority {
    display: grid; gap: 20px; margin-top: 32px; padding: 24px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  }
  @media (min-width: 768px) { .about-priority { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; } }
  .about-priority small { display: block; margin-bottom: 8px; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
  .about-priority h3 { margin: 0 0 8px; font-size: var(--fs-h3); }
  .about-priority p { margin: 0; color: var(--text-muted); line-height: 1.6; }
  .about-priority .about-angebote li.prio { border-color: var(--text); }
  .about-priority .about-angebote li.prio em { background: var(--text); border-color: var(--text); color: var(--surface); }
  .about-preiszeile { margin: 12px 0 0; text-align: center; font-size: var(--fs-sm); color: var(--text-muted); }

  /* Boost: vier Schritte mit je einer kleinen Abbildung, Ziffer aus dem Zaehler. */
  .about-boost {
    list-style: none; margin: 40px 0 0; padding: 0; counter-reset: boost;
    display: grid; gap: 28px 20px; grid-template-columns: minmax(0, 1fr);
  }
  @media (min-width: 640px) { .about-boost { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1024px) { .about-boost { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .about-boost li { counter-increment: boost; display: flex; flex-direction: column; gap: 8px; }
  .about-boost h3 { margin: 10px 0 0; font-size: var(--fs-h3); line-height: 1.25; }
  .about-boost h3::before { content: counter(boost) "\00a0\00a0"; color: var(--text-muted); }
  .about-boost p { margin: 0; color: var(--text-muted); line-height: 1.55; }
  .about-boost-bild {
    position: relative; min-height: 196px; padding: 20px; display: flex; flex-direction: column;
    justify-content: space-between; gap: 12px;
    background: var(--surface-sunk); border: 1px solid var(--border); border-radius: var(--r-md);
  }
  .about-boost-bild small { font-size: var(--fs-xs); color: var(--text-muted); }
  .about-boost-beispiel {
    position: absolute; top: 14px; right: 14px; padding: 1px 8px; font-style: normal; font-size: 11px;
    color: var(--text-muted); border: 1px dashed var(--border-strong); border-radius: var(--r-pill);
  }
  .about-pool { background: var(--text); border-color: var(--text); color: var(--surface); }
  .about-pool small { letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
  .about-pool b { font-size: clamp(34px, 3.6vw, 42px); font-weight: 600; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
  .about-pool .about-boost-beispiel { color: rgba(255, 255, 255, .72); border-color: rgba(255, 255, 255, .4); }
  .about-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .about-chips i { font-style: normal; font-size: var(--fs-xs); padding: 3px 10px; border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--r-pill); }
  .about-avatare { align-items: center; justify-content: center; }
  .about-avatar-reihe { display: grid; grid-template-columns: repeat(6, 32px); gap: 10px 8px; }
  .about-avatar-reihe i { display: block; width: 32px; height: 32px; border-radius: var(--r-round); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--surface-sunk); }
  .about-avatar-reihe i:nth-child(3n+2) { background: color-mix(in srgb, var(--accent-soft) 55%, var(--text)); }
  .about-avatar-reihe i:nth-child(4n+3) { background: var(--text); }
  .about-avatar-reihe i:nth-child(5n+4) { background: var(--border-strong); }
  .about-avatar-reihe i:nth-child(7n) { background: var(--text-muted); }
  .about-shopwahl { justify-content: flex-start; gap: 8px; }
  .about-shopwahl span {
    display: flex; justify-content: space-between; gap: 12px; padding: 7px 12px; font-size: var(--fs-sm);
    color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  }
  .about-shopwahl span.an { background: var(--text); border-color: var(--text); color: var(--surface); }
  .about-shopwahl b { font-weight: 600; white-space: nowrap; }
  /* Oben Platz fuer das Schild "Beispiel": bei 1024px stiess es an die erste Zeile (6.000 Std.). */
  .about-ergebnis { background: var(--surface); justify-content: center; gap: 10px; padding-top: 44px; box-shadow: 0 18px 40px -30px rgba(0, 0, 0, .45); }
  .about-ergebnis span { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
  .about-ergebnis span small { font-size: var(--fs-sm); }
  .about-ergebnis b { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
  #boost .about-funktionen { margin-top: 32px; }

  /* Ein System: die dritte Station dunkel wie im Deck, darunter der Rueckweg. */
  .about-kreis .about-fluss li.dunkel { background: var(--text); border-color: var(--text); color: var(--surface); }
  .about-kreis .about-fluss li.dunkel small, .about-kreis .about-fluss li.dunkel span { color: rgba(255, 255, 255, .72); }
  .about-kreis-zurueck { margin: 18px 0 0; text-align: center; font-size: var(--fs-sm); color: var(--text-muted); }
  .about-kreis-zurueck span { display: inline-block; padding: 4px 14px; border: 1px dashed var(--border-strong); border-radius: var(--r-pill); }
  .about-kreis-zurueck span::before { content: "↺\00a0"; }
  /* Ab 900px stehen die Stationen nebeneinander (.about-fluss). Der Rueckweg laeuft dann als
     gestrichelte Linie von der Mitte der vierten zur Mitte der ersten Karte: vier Spalten mit
     34px Abstand, die Mitte der aeusseren liegt 12,5 % minus 12,75px vom Rand. */
  @media (min-width: 900px) {
    .about-kreis-zurueck {
      position: relative; height: 34px; margin: 4px calc(12.5% - 12.75px) 12px;
      border: 2px dashed var(--border-strong); border-top: 0; border-radius: 0 0 16px 16px;
    }
    .about-kreis-zurueck::before {
      content: ""; position: absolute; left: -7px; top: -8px;
      border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 9px solid var(--border-strong);
    }
    .about-kreis-zurueck span {
      position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%);
      padding: 0 14px; border: 0; border-radius: 0; background: var(--surface-sunk); white-space: nowrap;
    }
    .about-kreis-zurueck span::before { content: none; }
  }

  /* ── Animationen der Markenseite (17.10.2026, about_marken_spiel.html) ───
     Alles unter .bereit setzt erst das Skript, und nur ohne prefers-reduced-motion. Ohne
     Skript gelten nur die Regeln darueber, also der fertige Endzustand. .still schaltet die
     Uebergaenge fuer den Moment ab, in dem der Startzustand gesetzt wird. */
  .bereit.still, .bereit.still * { transition: none !important; }
  @keyframes marken-rein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes marken-pop { 0% { opacity: 0; transform: scale(.4); } 70% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
  @keyframes marken-puls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

  /* Abo-Dashboard: Zeilen nacheinander, danach springen die Provisions-Pillen auf. */
  .about-abo-dashboard.bereit tbody tr { opacity: 0; }
  .about-abo-dashboard.bereit.spielt tbody tr { animation: marken-rein .45s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i, 0) * 90ms); }
  .about-abo-dashboard.bereit.spielt .about-rate.hoch,
  .about-abo-dashboard.bereit.spielt .about-rate.runter { animation: marken-pop .5s ease-out both; animation-delay: calc(550ms + var(--i, 0) * 90ms); }

  /* Priority: im Startzustand tauschen die ersten beiden Zeilen den Platz (Abstand vom Skript). */
  .about-priority .about-angebote li { transition: transform .7s cubic-bezier(0.22, 1, 0.36, 1); }
  .about-priority .about-angebote li.prio { position: relative; z-index: 1; }
  .about-priority .about-angebote li.prio em { transition: opacity .35s ease .55s, transform .35s ease .55s; }
  .about-priority .about-angebote.bereit li.prio { transform: translateY(var(--tausch, 0px)); }
  .about-priority .about-angebote.bereit li:nth-child(2) { transform: translateY(calc(-1 * var(--tausch, 0px))); }
  .about-priority .about-angebote.bereit li.prio em { opacity: 0; transform: scale(.5); }

  /* Boost: der laufende Schritt ist voll da, die anderen warten gedimmt. */
  .about-boost.bereit > li { opacity: .35; transition: opacity .45s ease; }
  .about-boost.bereit > li.an { opacity: 1; }
  .about-boost.bereit > li .about-chips i,
  .about-boost.bereit > li .about-ergebnis span { opacity: 0; }
  .about-boost.bereit > li.an .about-chips i { animation: marken-rein .4s ease-out both; animation-delay: calc(450ms + var(--i, 0) * 160ms); }
  .about-boost.bereit > li.an .about-ergebnis span { animation: marken-rein .4s ease-out both; animation-delay: calc(100ms + var(--i, 0) * 140ms); }
  .about-boost.bereit > li .about-avatar-reihe i { opacity: 0; transform: scale(.3); }
  .about-boost.bereit > li.an .about-avatar-reihe i { animation: marken-pop .4s ease-out both; animation-delay: calc(var(--i, 0) * 55ms); }
  .about-boost.bereit > li .about-avatare small { opacity: 0; transition: opacity .4s ease .75s; }
  .about-boost.bereit > li.an .about-avatare small { opacity: 1; }
  .about-boost.bereit > li .about-shopwahl span.an {
    background: var(--surface); border-color: var(--border); color: var(--text-muted);
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
    transition-delay: calc(350ms + var(--i, 0) * 420ms);
  }
  .about-boost.bereit > li .about-shopwahl span.an b { opacity: 0; transition: opacity .3s ease; transition-delay: calc(350ms + var(--i, 0) * 420ms); }
  .about-boost.bereit > li.an .about-shopwahl span.an { background: var(--text); border-color: var(--text); color: var(--surface); }
  .about-boost.bereit > li.an .about-shopwahl span.an b { opacity: 1; }
  .about-nochmal-zeile { margin: 20px 0 0; text-align: center; }
  .about-nochmal-zeile:has(.about-nochmal[hidden]) { display: none; }
  .about-nochmal {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; cursor: pointer;
    font: inherit; font-size: var(--fs-sm); color: var(--text-muted);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill);
  }
  @media (hover: hover) { .about-nochmal:hover { border-color: var(--border-strong); color: var(--text); } }
  .about-nochmal:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .about-nochmal[hidden] { display: none; }

  /* Kreislauf: die laufende Station hebt sich, ihr Pfeil wird dunkel; danach der Rueckweg. */
  .about-kreis.bereit .about-fluss li { transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .35s ease, border-color .35s ease; }
  .about-kreis.bereit .about-fluss li.an { border-color: var(--text); transform: translateY(-4px); box-shadow: 0 16px 32px -22px rgba(0, 0, 0, .5); }
  .about-kreis.bereit .about-fluss li.dunkel.an { box-shadow: 0 0 0 3px var(--accent-soft), 0 16px 32px -22px rgba(0, 0, 0, .5); }
  .about-kreis.bereit .about-fluss li.an::before { color: var(--text); }
  .about-kreis-punkt { display: none; }
  @media (min-width: 900px) {
    .about-kreis.bereit .about-kreis-zurueck.unterwegs .about-kreis-punkt {
      display: block; position: absolute; left: 0; top: 0; width: 10px; height: 10px;
      border-radius: var(--r-round); background: var(--text); box-shadow: 0 0 0 4px var(--surface-sunk);
    }
  }
  @media (max-width: 899px) {
    .about-kreis.bereit .about-kreis-zurueck.unterwegs span { animation: marken-puls 1.3s ease-in-out; border-color: var(--text); color: var(--text); }
  }
  /* Ratgeber-Links auf Vergleich und About-Seiten (21.10.2026), Form wie die verwandten Fragen im Ratgeber. */
  .ratgeber-links { max-width: 760px; margin: 24px auto 0; padding: 0; list-style: none; display: grid; gap: 10px; }
  .ratgeber-links a { display: block; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text); text-decoration: none; background: var(--surface); text-align: left; }
  .ratgeber-links a:hover { border-color: var(--border-strong); }
  @media (max-width: 640px) { .ratgeber-links { margin: 20px 16px 0; } }