* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
/* Für Links MITTEN IM FLIESSTEXT (Quellenverweise, "mehr dazu",
   Cross-Links in Absätzen) — der globale a-Reset oben ist für
   UI-Elemente (Nav, Karten, Buttons) gedacht, wo ein Link wie ein
   Bedienelement aussehen soll. Im Fließtext braucht's dagegen die
   übliche Web-Konvention (Farbe + Unterstrich), sonst ist für
   Lesende nicht erkennbar, dass mitten im Satz ein Link steckt. */
.text-link { color: var(--patina); text-decoration: underline; }
.text-link:hover { color: var(--ember); }
h1, h2, h3 { font-family: var(--font-head); font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; }

/* Header — sticky, Pill-Form, Schatten statt Border */
header.site { position: sticky; top: 0; z-index: 30; padding: 18px 0; background: rgba(246,247,244,.85); backdrop-filter: blur(10px); }
.nav-mock { background: var(--card); border-radius: var(--radius-pill); padding: 10px 12px 10px 22px; display: flex; align-items: center; justify-content: space-between; position: relative; box-shadow: var(--shadow-sm); }
.wordmark { font-family: var(--font-head); font-weight: 600; font-size: 18px; display: inline-flex; align-items: center; }
/* Logo mit Schriftzug als Bild (01.10.2026). Die Datei ist so gesetzt, dass
   das Zeichen die volle Höhe hat und der Schriftzug nur ca. 60 % davon:
   die Höhe hier bestimmt also die Größe des Zeichens. */
.wordmark__img { display: block; height: 34px; width: auto; max-width: 62vw; object-fit: contain; object-position: left center; }
.wordmark:has(.wordmark__img) { flex-shrink: 0; margin-right: 16px; }
@media (max-width: 1180px) { .wordmark__img { height: 31px; } nav.main { gap: 18px; } nav.main a { white-space: nowrap; } }
@media (max-width: 1060px) { nav.main { gap: 14px; } }
@media (max-width: 640px) { .wordmark__img { height: 30px; } }
nav.main { display: flex; align-items: center; gap: 24px; font-size: 14px; color: var(--ink-soft); }
nav.main > a:hover { color: var(--ink); }
nav.main .cta, .nav-cta { background: var(--ember); color: #FBF3EE; padding: 10px 20px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 500; box-shadow: var(--shadow-sm); }
/* Finder-Knopf ganz rechts (03.10.2026): am Desktop außerhalb des Menüs, nach der Suche */
.nav-cta { text-decoration: none; white-space: nowrap; margin-left: 10px; }
.nav-cta:hover { filter: brightness(.94); color: #FBF3EE; }
nav.main .cta--im-menue { display: none; }
nav.main { margin: 0 auto 0 clamp(12px, 4vw, 80px); }
/* Marken als eigener Menüpunkt (09.10.2026): zwischen 861 und 1000 px etwas enger, sonst läuft der Kopf über */
@media (min-width: 861px) and (max-width: 1000px) { nav.main { gap: 10px; font-size: 13.5px; margin-left: 12px; } .nav-cta { padding: 9px 14px; margin-left: 6px; } .nav-kueche { margin-left: 6px; } }

/* Hamburger-Button: nur auf schmalen Screens sichtbar (siehe Media Query unten) */
.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 34px; height: 34px; background: none; border: none; cursor: pointer; padding: 0; }
.nav-toggle span { display: block; width: 100%; height: 2px; background: var(--ink); border-radius: 2px; }

/* Kopfzeilen-Suche — Icon plus Klapp-Suchfeld. Der Icon-Link zeigt auf
   /suche (funktioniert ohne JS als normale Navigation); JS verhindert
   das Standardverhalten und klappt stattdessen das Feld auf, ohne die
   Seite zu verlassen — echte Progressive Enhancement, kein Totalausfall
   ohne Skript. */
.search-wrap { position: relative; display: flex; align-items: center; }
.search-toggle { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; color: var(--ink-soft); text-decoration: none; }
.search-toggle:hover { background: var(--bg); color: var(--ink); }
.search-popover { display: none; position: absolute; top: calc(100% + 10px); right: 0; background: var(--card); border-radius: var(--radius-pill); box-shadow: var(--shadow-lg); padding: 4px; z-index: 20; }
.search-popover.is-open { display: block; }
.search-popover input { width: 280px; max-width: calc(100vw - 60px); padding: 10px 18px; border: none; border-radius: var(--radius-pill); font-size: 14px; background: transparent; }
.search-popover input:focus { outline: none; }

@media (max-width: 860px) {
  .search-popover { position: static; box-shadow: none; padding: 10px 0 0; }
  .search-popover input { width: 100%; max-width: none; background: var(--bg); }
}

.has-dropdown-wrap { position: relative; }
.has-dropdown { cursor: pointer; text-decoration: none; color: inherit; }
/* Unsichtbare Hover-Brücke: schließt die Lücke zwischen Trigger und
   Menü, damit :hover beim Runterbewegen der Maus nicht kurz abreißt
   (klassisches CSS-Dropdown-Problem bei margin-top-Abstand). Breite
   deckelt sich in der Media Query unten, sonst Overflow auf Mobile. */
.has-dropdown-wrap::after {
  content: '';
  position: absolute;
  top: 100%; left: -22px;
  width: 780px; height: 14px;
}
.has-dropdown-wrap--narrow::after { width: 220px; }
/* Brücke nur am gerade geöffneten Menü (01.10.2026): sonst lag die breite, unsichtbare
   Brücke des rechtsbündigen Ratgeber-Menüs über Materialien und Formen und fing die Maus ab. */
.has-dropdown-wrap:not(:hover)::after { display: none; }
.material-menu {
  display: none; position: absolute; top: 100%; left: -22px; margin-top: 14px;
  background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-lg);
  padding: 24px 28px; grid-template-columns: repeat(4, 1fr); gap: 24px; width: 780px; max-width: calc(100vw - 44px); z-index: 20;
}
.material-menu--narrow { width: 220px; padding: 14px; grid-template-columns: 1fr; }
.material-menu--narrow ul { list-style: none; margin: 0; padding: 0; font-size: 14px; display: flex; flex-direction: column; gap: 2px; }
.material-menu--narrow li a { display: block; padding: 9px 10px; border-radius: var(--radius-control); color: var(--ink); }
.material-menu--narrow li a:hover { background: var(--bg); }
.has-dropdown-wrap:hover .material-menu { display: grid; }
.material-menu .facet-label { font-size: 11px; color: var(--ink-soft); margin-bottom: 8px; }
.material-menu .facet-title { font-family: var(--font-head); font-weight: 600; font-size: 14px; margin-bottom: 10px; }

/* Mega-Menu Konzept A: Icon-Kachel pro Spalte + Material-Farbpunkte —
   rein visuelle Auffrischung, gleiche Struktur wie bisher. Icon-Kachel
   nutzt --patina-soft (dezenter Akzent, keine der beiden "starken"
   Signalfarben) statt --ember, das laut Token-Regel exklusiv der einen
   primären Aktion vorbehalten bleibt. */
.facet-icon { width: 28px; height: 28px; border-radius: 8px; background: var(--patina-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; color: var(--patina); }
.material-menu li { display: flex; align-items: center; gap: 8px; }
.material-swatch { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.material-menu ul { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.material-menu li { padding: 5px 0; }
.material-menu li a { color: var(--ink-soft); }
.material-menu li a:hover { color: var(--ink); }
.material-menu .direktsuche { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; display: flex; align-items: center; gap: 18px; font-size: 13px; flex-wrap: wrap; }
.material-menu .direktsuche .label { color: var(--ink-soft); font-size: 12px; }
.material-menu .direktsuche a { border-bottom: 1px dotted var(--line); }

.breadcrumb-mock { margin-top: 14px; padding: 0 4px; font-size: 12.5px; color: var(--ink-soft); display: flex; align-items: center; gap: 7px; }
.breadcrumb-mock .current { font-weight: 600; }
.bearing { color: var(--ember); font-family: monospace; font-size: 11px; }

/* Hero — bewusst OHNE eigene Karten-Box: Text und Bild sitzen direkt im
   normalen .wrap-Rand wie der Rest der Seite, kein separater Innenabstand
   mehr nötig/zu verwalten. */
.hero {
  padding: 24px 0 56px; margin-top: 8px;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center;
}
.hero h1 { font-size: 48px; line-height: 1.08; max-width: 14ch; }
/* Allgemeine Intro-Hervorhebung — wird in 11 Templates genutzt
   (Artikel, Kaufberatung, Rezepte, Pflege, Produkte, Listings etc.),
   war aber bisher NUR innerhalb von .hero wirksam (siehe .hero p.lede
   weiter unten) — überall sonst blieb der Text komplett unformatiert. */
.lede { font-size: 19px; font-weight: 500; color: var(--ink); line-height: 1.5; margin: 12px 0 20px; max-width: 65ch; }
.hero p.lede { font-size: 17px; color: var(--ink-soft); max-width: 40ch; margin: 18px 0 26px; }
.hero-image { width: 100%; height: 100%; min-height: 320px; min-width: 0; object-fit: cover; border-radius: 20px; box-shadow: var(--shadow-lg); display: block; }
.intro-text { font-size: 16px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 20px; }
.intro-text:last-child { margin-bottom: 0; }
.text-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch; }
.text-panel { background: var(--card); border-radius: var(--radius-card); padding: 32px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; justify-content: center; }
.btn-primary { display: inline-block; background: var(--ember); color: #FBF3EE; border: none; border-radius: var(--radius-pill); padding: 14px 26px; font-size: 14px; font-weight: 500; cursor: pointer; box-shadow: var(--shadow-md); transition: transform .15s ease, box-shadow .15s ease; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.btn-secondary { display: inline-block; background: var(--card); color: var(--ink); border: none; border-radius: var(--radius-pill); padding: 14px 26px; font-size: 14px; font-weight: 500; margin-left: 10px; cursor: pointer; box-shadow: var(--shadow-sm); }

/* Querschnitt-Komponente */
.cross-panel { background: var(--card); border-radius: var(--radius-card); padding: 24px; box-shadow: var(--shadow-sm); }
.cross-panel .cap { font-size: 12px; color: var(--ink-soft); margin-bottom: 16px; }
.cross-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cross-item { text-align: center; }
.cross-item .circle-frame { width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.cross-item .item-label { font-family: var(--font-head); font-weight: 600; font-size: 13px; margin-top: 12px; }
.cross-item .item-sub { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }
.legend { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; font-size: 12.5px; }
.legend .row { display: flex; align-items: center; gap: 8px; }
.legend .dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* Sections */
main .wrap section { padding: 44px 0; }
section.divider { border-top: 1px solid var(--line); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 24px; }
.section-head h2 { font-size: 24px; }
.section-head a { font-size: 13px; font-weight: 500; color: var(--ink-soft); }

/* Kompakte Zwischenüberschrift innerhalb einer Sektion mit mehreren
   Kartenreihen — z.B. "Kaufberatung"/"Pflege"/"Wissenswertes" unter
   "Mehr zu {Material}" im Pfannenfinder-Ergebnis. Bewusst dezenter als
   .section-head h2, damit klar bleibt, dass es sich nur um Unterpunkte
   derselben Sektion handelt. */
.teaser-subhead { font-size: 14px; font-weight: 600; color: var(--ink-soft); margin: 28px 0 14px; text-transform: uppercase; letter-spacing: .04em; }
.teaser-subhead:first-of-type { margin-top: 0; }

.module-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.module-card { background: var(--card); border-radius: var(--radius-card); padding: 24px; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; }
.module-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.module-card .tag { font-size: 12px; font-weight: 500; color: var(--patina); margin-bottom: 10px; }
.module-card h3 { font-size: 17px; margin-bottom: 8px; }
.module-card p { font-size: 14px; color: var(--ink-soft); margin: 0 0 14px; }
.module-card a.link { font-size: 13px; font-weight: 600; color: var(--ink); }
.module-card a.link:hover { color: var(--ember); }

/* Produktkarte (auch von ContentBlocks::renderProductBlock genutzt) */
.product-card { background: var(--card); border-radius: var(--radius-card); padding: 16px; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; }
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.product-card img { width: 100%; height: 140px; object-fit: cover; border-radius: var(--radius-control); margin-bottom: 12px; }
.product-card .product-card__meta { font-size: 13px; color: var(--ink-soft); margin: 0 0 8px; }
.product-card h3 { font-size: 15px; margin-bottom: 4px; }

/* Hub-Produktkarte: Bratoberfläche/Kern/Form als eigene, beschriftete
   Zeilen statt Fließtext (components/product-card-hub.php) — nur auf
   Hub-Seiten genutzt, die geteilte product-card.php bleibt kompakter. */
/* Orientierungsbox (Hub-Seiten) — der Möglichkeitsraum als Tags,
   gleichzeitig die einzigen Filter (Mehrfachauswahl, Toggle-Links,
   kein JS). Bewusst in var(--ember-soft) statt var(--ember) selbst —
   die Farbregel oben erlaubt --ember ausschließlich für die EINE
   primäre Aktion, nie dekorativ/flächig. --ember-soft ist genau für
   solche Fälle der separate, sanftere Ton. Aktive Tags sind deshalb
   auch NICHT ember-gefüllt (das wäre dieselbe Regelverletzung bei
   potenziell mehreren gleichzeitig aktiven Tags), sondern weiß mit
   Ember-Rand — bleibt eindeutig erkennbar, ohne die Regel zu brechen. */
/* Inhaltsverzeichnis neben dem Klärungssatz — nutzt den freien Raum
   rechts (Klärungssatz ist auf max-width:70ch begrenzt), statt eine
   zusätzliche Zeile/Box im einspaltigen Fluss zu belegen. */
.hub-toc-box { background: var(--card); border-radius: var(--radius-card); padding: 14px 18px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 4px; }
.hub-toc-box__title { font-family: var(--font-head); font-weight: 600; font-size: 12px; color: var(--ink-soft); margin-bottom: 4px; }
.hub-toc-box a { font-size: 13px; color: var(--ink); text-decoration: none; padding: 3px 0; }
.hub-toc-box a:hover { color: var(--patina); }

/* Aufbau-Artikel: "Formen/Kerne/Bratoberflächen von X" — bewusst
   zurückhaltender als die Hub-Seiten-Orientierungsbox (kein Filter,
   keine Produktkarten, nur Fakten-Übersicht neben dem Artikeltext). */
.fact-box { background: var(--patina-soft); border-radius: var(--radius-card); padding: 18px 20px; margin-top: 28px; max-width: 70ch; }
.fact-box__row { padding: 10px 0; border-top: 1px solid rgba(0,0,0,.06); }
.fact-box__row:first-child { border-top: none; padding-top: 0; }
.fact-box__label { font-size: 12px; font-weight: 600; color: var(--patina); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 8px; }
.fact-pill { display: inline-flex; align-items: center; gap: 4px; background: #fff; border-radius: var(--radius-pill); padding: 5px 12px; font-size: 13px; margin: 0 6px 6px 0; text-decoration: none; color: var(--ink); }
.fact-pill:hover { box-shadow: var(--shadow-sm); }
.fact-pill.is-disabled { background: transparent; border: 1.5px dashed var(--ink-soft); color: var(--ink-soft); cursor: default; }
.fact-pill .n { opacity: .55; font-size: 11px; }

/* Hub-Filter (v2) — aufgebaut auf .filter-pill (s.o.), kein eigenes
   Pillen-System. Sechs-Regeln-Redesign nach zweistufigem Design-Review:
   nur Dimensionen mit 2+ Werten werden Filterreihen, Label links/Chips
   rechts, Form vor Preisklasse vor Material, nominal vs. ordinal
   unterschiedlich behandelt, eine gemeinsame Ergebniszeile. */
.hub-filter { margin-top: 28px; }

/* Filter-in-linker-Spalte (Desktop) — Chips/Zeilen-Optik bleibt exakt
   wie bisher (Konsistenz mit Kaufberatung/Wissen/Rezepte, die dieselbe
   .filter-pill-Optik nutzen), wandert nur in eine schmalere Spalte
   neben statt über dem Produkt-Grid. Auf Mobile (Media Query unten)
   bleibt die bisherige horizontale Variante erhalten — kein neues
   Drawer/Overlay-Muster, das nirgends sonst auf der Seite existiert. */
.hub-filter-layout { display: grid; grid-template-columns: 240px 1fr; gap: 32px; align-items: start; }
.hub-filter-side { position: sticky; top: 150px; display: flex; flex-direction: column; gap: 4px; }
.hub-filter-side .hub-filter-row { grid-template-columns: 1fr; gap: 8px; padding: 14px 0; }
.hub-filter-side .hub-filter-row-label { padding-top: 0; }
.hub-filter-side .hub-filter-chips { flex-direction: column; align-items: flex-start; }

/* "Mehr zu {Material}"-Cluster-Karte oben in der Filter-Sidebar — zeigt
   ALLE vorhandenen Content-Cluster (Kaufberatung/Wissen/Rezepte/Pflege/
   Marken) statt nur eines Einzelartikels. Sitzt in .hub-filter-side,
   die bereits position:sticky ist (siehe oben) — bleibt also ohne
   Zusatzaufwand beim Scrollen sichtbar. Zwei Linkarten pro Zeile: der
   Kategorie-Kopf springt per Anker zur vollen Sektion weiter unten,
   der Top-Titel darunter verlinkt direkt auf genau diesen einen
   Treffer. Wird im Template nur gerendert, wenn insgesamt genug
   Cluster-Content vorhanden ist (Mindestschwelle), damit sie bei dünn
   befüllten Materialien nicht unausgewogen leer wirkt. */
.hub-cluster-card { background: var(--patina-soft); border-radius: var(--radius-card); padding: 18px; margin-bottom: 16px; }
.hub-cluster-card__eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--patina); margin-bottom: 8px; }
.hub-cluster-row { padding: 9px 0; border-top: 1px solid var(--line); }
.hub-cluster-row:first-of-type { border-top: none; padding-top: 0; }
.hub-cluster-row__head { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.hub-cluster-row__ic { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
.hub-cluster-row__lbl { flex: 1; font-size: 13.5px; font-weight: 600; }
.hub-cluster-row__cnt { font-size: 12px; color: var(--ink-soft); background: var(--card); border-radius: var(--radius-pill); padding: 1px 8px; }
.hub-cluster-row__arr { font-size: 13px; color: var(--patina); }
.hub-cluster-row__top { display: block; font-size: 12px; color: var(--ink-soft); text-decoration: none; margin: 3px 0 0 30px; }
.hub-cluster-row__top:hover { color: var(--patina); text-decoration: underline; }

/* Andere Bratoberflächen im Vergleich (Material-Hubs) + Material-Karten
   (Form-Hubs) — Cross-Nav zwischen Hub-Seiten, kein Filter/Steuerelement
   (deshalb bewusst optisch ruhiger als .filter-pill: keine aktive/inaktive
   Zustandslogik nötig, nur "hier bin ich" vs. "dahin kann ich"). */
.mat-chip-title { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin: 0 0 10px; }
.mat-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.mat-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border-radius: var(--radius-pill); padding: 7px 14px; font-size: 13px; font-weight: 600; box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; }
.mat-chip:hover { box-shadow: var(--shadow-md); }
.mat-chip--current { background: var(--ink); color: var(--bg); }
.mat-chip__role { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--ember); background: var(--ember-soft); border-radius: var(--radius-pill); padding: 2px 7px; }
/* Eigene Rollen-Farben für die Kern/Boden- (jetzt Wissensartikel-Links)
   und die neue Konstruktion-Chip-Reihe — bewusst andere Farbe als die
   ember-farbenen "Beschichtung"/"meist Kern"-Rollen oben, damit auf
   einen Blick klar ist: das hier führt auf eine andere Art Ziel
   (Wissensartikel bzw. Konstruktionstyp statt Hub-Seite). */
.mat-chip__role--wissen { color: var(--patina); background: var(--patina-soft); }
.mat-chip__role--konstruktion { color: var(--core-tone); background: #F1EEE6; }

.mat-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 14px; }
.mat-card { display: block; background: var(--card); border-radius: var(--radius-card); padding: 14px 16px; box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; transition: box-shadow .15s ease; }
.mat-card:hover { box-shadow: var(--shadow-md); }
.mat-card__head { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-head); font-weight: 600; font-size: 14.5px; }
.mat-card__cnt { font-size: 11px; font-weight: 600; color: var(--ink-soft); background: var(--bg); border-radius: var(--radius-pill); padding: 2px 9px; }
.mat-card__construction { font-size: 12.5px; color: var(--ink-soft); margin-top: 8px; }
/* Formen-/Material-Karten mit Bild statt Stückzahl (Rückmeldung: "wir
   wollen weg von Produkten" + "Bilder müssen austauschbar sein") — Bild
   ist redaktionell (product_categories.bild_url); ohne gesetztes Bild
   zeigt .mat-card__illu-placeholder eine generische, formunabhängige
   Linien-Illustration (KEIN Fallback auf eine geratene Form-Silhouette,
   dieselbe Konvention wie sonst bei fehlenden Bildern auf dieser Seite). */
.mat-card__illu { width: 100%; height: 72px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; border-radius: var(--radius-control); overflow: hidden; background: var(--bg); }
.mat-card__illu img { width: 100%; height: 100%; object-fit: cover; }
.mat-card__illu-placeholder { width: 46px; height: 46px; color: var(--ink-soft); opacity: .5; }
.mat-card__desc { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; line-height: 1.5; }

/* Eingebetteter Pfannenfinder-Fragen-Flow auf Hub-Seiten (ersetzt dort
   components/recommendation-block.php an der #s-produkte-Stelle) — reiner
   Layout-Rahmen, der eigentliche Frage-/Karten-/Fortschritts-Baustein
   bringt seine CSS-Klassen (.finder-progress/.finder-cards/...) schon
   von /pfannenfinder mit, siehe finder.js. */
.hub-finder-widget { margin-top: 4px; }

/* Auf-/zuklappbare Gruppe (aktuell nur "Marke", potenziell viele Werte)
   — reiner CSS-Checkbox-Hack statt <details>: dessen Auf/Zu-Status ist
   ein DOM-Attribut und lässt sich NICHT per Media Query erzwingen, der
   Checkbox-Hack dagegen schon (siehe Mobile-Override unten). Kein JS
   nötig, bleibt im Rahmen des restlichen Filtersystems (reine
   Toggle-Links, keine eigene Interaktions-Logik). */
.hub-filter-group { border-top: 1px solid var(--line); }
.hub-filter-group:first-of-type { border-top: none; }
.hub-filter-group-toggle { position: absolute; opacity: 0; pointer-events: none; }
.hub-filter-group-summary { display: block; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-soft); padding: 10px 0; user-select: none; }
.hub-filter-group-summary::after { content: '+'; float: right; }
.hub-filter-group-toggle:checked ~ .hub-filter-group-summary::after { content: '−'; }
.hub-filter-group-content { max-height: 0; overflow: hidden; }
.hub-filter-group-toggle:checked ~ .hub-filter-group-content { max-height: 1000px; padding-bottom: 10px; }
.hub-filter-group-toggle:focus-visible ~ .hub-filter-group-summary { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (max-width: 980px) {
  /* Mobile: zurück zur bisherigen, bereits bewährten horizontalen
     Variante — volle Breite über dem Produkt-Grid statt linker Spalte.
     Auf-/zuklappbare Gruppen werden erzwungen offen (die kompakte
     Spalten-Breite, die das Zuklappen nötig macht, gibt's hier eh
     nicht mehr) — unabhängig vom tatsächlichen Checkbox-Status, weil
     die Checkbox selbst hier gar nicht angezeigt wird. */
  .hub-filter-layout { grid-template-columns: 1fr; }
  .hub-filter-side { position: static; }
  .hub-filter-side .hub-filter-row { grid-template-columns: 130px 1fr; gap: 16px; }
  .hub-filter-side .hub-filter-chips { flex-direction: row; flex-wrap: wrap; }
  .hub-filter-group-summary { cursor: default; }
  .hub-filter-group-summary::after { display: none; }
  .hub-filter-group-content { max-height: none !important; overflow: visible; }
}
.hub-filter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.hub-filter-title { font-size: 20px; margin: 0; }
.hub-filter-context { display: flex; flex-wrap: wrap; gap: 8px; }
.hub-filter-context-tag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--card); box-shadow: var(--shadow-sm); font-size: 12.5px; color: var(--ink-soft); }
.hub-filter-context-tag b { color: var(--ink); font-weight: 600; }

.hub-filter-row { display: grid; grid-template-columns: 130px 1fr; gap: 16px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); }
.hub-filter-row:first-of-type { border-top: none; padding-top: 4px; }
.hub-filter-row-label { font-size: 13px; font-weight: 600; color: var(--ink-soft); padding-top: 10px; }
.hub-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hub-filter-help-link { display: inline-block; margin-top: 10px; font-size: 12.5px; color: var(--patina); text-decoration: none; font-weight: 500; }
.hub-filter-help-link:hover { text-decoration: underline; }

/* "Derzeit nicht im Sortiment" — EINMAL für den ganzen Filterblock am
   Ende (nicht pro Zeile), auch wenn mehrere nominale Dimensionen leere
   Werte haben. */
.hub-filter-unavailable { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-soft); }
.hub-filter-unavailable + .hub-filter-unavailable { border-top: none; padding-top: 0; margin-top: 2px; }

.hub-filter-result { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.hub-filter-result-count { font-size: 14.5px; font-weight: 600; }
/* Aktiver-Filter-Tag: bewusst wie ein Filter-Pill gebaut (gleiche
   Basis-Klasse), --ember-soft als wärmerer Akzent ist laut Token-Regel
   erlaubt (nur --ember selbst ist auf die eine primäre Aktion
   beschränkt). */
.hub-filter-active-tag { background: var(--ember-soft); box-shadow: none; padding: 6px 6px 6px 14px; display: inline-flex; align-items: center; gap: 8px; }
.hub-filter-active-tag button { border: none; background: rgba(0,0,0,.1); color: var(--ink); width: 24px; height: 24px; min-width: 24px; border-radius: 50%; cursor: pointer; font-size: 13px; line-height: 1; }
.hub-filter-reset-all { font-size: 12.5px; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; margin-left: auto; }

@media (max-width: 640px) {
  .hub-filter-row { grid-template-columns: 1fr; gap: 6px; }
  .hub-filter-row-label { padding-top: 0; }
  .hub-filter-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px; padding: 2px 20px 6px; scrollbar-width: none; }
  .hub-filter-chips::-webkit-scrollbar { display: none; }
}

/* "Marken" (früher "Tiefer einsteigen") — Karten statt Fließtext-Links */
.hub-deepdive-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.hub-deepdive-card { background: var(--card); border-radius: var(--radius-card); padding: 16px 18px; box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink); display: block; transition: transform .15s ease, box-shadow .15s ease; }
.hub-deepdive-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.hub-deepdive-card__tag { font-size: 11px; color: var(--patina); font-weight: 600; margin-bottom: 6px; }
.hub-deepdive-card__title { font-size: 14.5px; font-weight: 600; font-family: var(--font-head); }

/* "Alle anzeigen" bei Kaufberatung/Wissensartikel/Rezepte auf den
   Hub-Seiten — reiner CSS-Checkbox-Hack, gleiche Technik wie schon
   beim Filter-Akkordeon (.hub-filter-group-toggle) weiter oben, damit
   kein zusätzliches JS nötig ist. Checkbox liegt VOR dem .module-row,
   die "extra"-Karten liegen als eigener Wrapper INNERHALB des Grids
   (display:contents lässt seine Kinder trotzdem als normale Grid-Items
   erscheinen, statt eine eigene Zeile/Spalte zu belegen). Beide Labels
   zeigen auf dieselbe Checkbox-ID und blenden sich gegenseitig aus. */
.hub-showmore-toggle { position: absolute; opacity: 0; pointer-events: none; }
.hub-showmore-extra { display: none; }
.hub-showmore-toggle:checked ~ .module-row .hub-showmore-extra { display: contents; }
.hub-showmore-label { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--patina); cursor: pointer; }
.hub-showmore-label--less { display: none; }
.hub-showmore-toggle:checked ~ .hub-showmore-label--more { display: none; }
.hub-showmore-toggle:checked ~ .hub-showmore-label--less { display: inline-block; }

/* Hub-Produktkarte: Bratoberfläche/Kern/Form als eigene, beschriftete
   Zeilen statt Fließtext (components/product-card-hub.php). */
.hub-card-meta { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 12px; font-size: 13px; }
.hub-card-meta__row { display: flex; justify-content: space-between; gap: 8px; }
.hub-card-meta__row span:first-child { color: var(--ink-soft); }
.hub-card-meta__row span:last-child { font-weight: 500; text-align: right; }
.hub-card-badge { display: inline-block; background: var(--patina-soft); color: var(--patina); font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-pill); margin-left: 6px; white-space: nowrap; }

/* Footer */
footer.site { padding: 44px 0 36px; }
.footer-box { background: var(--flaeche-dunkel); color: #D8D6CE; border-radius: var(--radius-hero); padding: 40px 44px; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; }
.footer-top p { max-width: 30ch; font-size: 13px; color: #9C998F; margin-top: 10px; }
.cols { display: flex; gap: 44px; font-size: 13px; }
.cols .head-small { font-family: var(--font-head); font-weight: 600; color: #fff; margin-bottom: 10px; font-size: 13px; }
.cols div div { margin-bottom: 7px; }
.cols div div a { color: #B5B2A8; }
.cols div div a:hover { color: #fff; }
/* Direktsuche ist mit Material- + Form-Hubs zusammen (aktuell 18
   Links) deutlich länger als die anderen Footer-Spalten — bricht
   deshalb in mehrere kurze Spalten um, statt eine einzelne, sehr lange
   Liste zu bilden. */
.cols .direktsuche-multi { column-count: 2; column-gap: 24px; }
.cols .direktsuche-multi div { break-inside: avoid; }
@media (min-width: 1000px) {
  .cols .direktsuche-multi { column-count: 3; }
}
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 10px; font-size: 12.5px; }
.footer-legal-links a { color: #B5B2A8; text-decoration: none; }
.footer-legal-links a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 28px; padding-top: 16px; font-size: 12px; color: #837F73; }

.dev-note { background: var(--patina-soft); border-left: 3px solid var(--patina); border-radius: 0 var(--radius-control) var(--radius-control) 0; padding: 14px 18px; font-size: 14px; }

/* Kleiner, konsistenter Werbehinweis direkt bei Produkt-Abschnitten —
   nicht nur am einzelnen Link (Sternchen) und im Footer, sondern auch
   sichtbar an der Stelle, wo der Abschnitt selbst kommerziellen
   Charakter hat (z.B. "Unsere Empfehlungen", "Geprüfte Pfannen"). */
.ad-disclosure { font-size: 12px; color: var(--ink-soft); font-weight: 400; margin-left: 10px; }
/* Affiliate-CTA in der Seitenleiste + je Material in der Kaufberatungs-
   Vergleichstabelle (25.09.2026). Generische Suchlinks, keine Produkte. */
.sidebar-box.sidebar-box--affiliate { background: var(--ember-soft); }
.sidebar-box--affiliate .ad-disclosure { display: block; margin: 2px 0 0; font-size: 11px; text-transform: none; letter-spacing: 0; }
.sidebar-affiliate__text { font-size: 13.5px; line-height: 1.5; margin: 0 0 14px; color: var(--ink); }
.sidebar-affiliate__btn { display: block; text-align: center; padding: 11px 16px; font-size: 13.5px; }
.compare-cta { margin-left: 0; padding: 9px 14px; font-size: 12.5px; background: var(--ember-soft); white-space: nowrap; }
/* Pfannen-Varianten auf Rezeptseiten (25.09.2026, App\Support\PanVariants). */
.pan-variant-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 8px; }
.pan-variant { background: var(--card); border-radius: var(--radius-card); padding: 20px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.pan-variant__title { font-size: 17px; margin: 0 0 8px; }
.pan-variant__etikett { display: inline-block; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--patina); margin: 0 0 6px; }
.pan-variant__begruendung { font-size: 13.5px; line-height: 1.5; color: var(--ink); margin: 0 0 10px; font-weight: 500; }
.pan-variant__img { margin: -20px -20px 16px; aspect-ratio: 4 / 3; background: var(--line); border-radius: var(--radius-card) var(--radius-card) 0 0; overflow: hidden; }
.pan-variant__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pan-variant__kernsatz { font-size: 13.5px; line-height: 1.5; color: var(--ink); margin: 0 0 12px; }
.pan-variant__facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 12.5px; margin: 0 0 12px; }
.pan-variant__facts dt { color: var(--ink-soft); font-weight: 500; }
.pan-variant__facts dd { margin: 0; }
.pan-variant__aufbau { font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); margin: -4px 0 12px; }
.pan-variant__points { list-style: none; padding: 0; margin: 0 0 16px; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.pan-variant__points li { padding-left: 18px; position: relative; margin-bottom: 4px; }
.pan-variant__points li.is-plus::before { content: "✓"; position: absolute; left: 0; color: var(--patina); }
.pan-variant__points li.is-minus::before { content: "!"; position: absolute; left: 4px; color: var(--ember); font-weight: 700; }
.pan-variant__btn { margin-top: auto; margin-left: 0; text-align: center; padding: 11px 16px; font-size: 13.5px; }
.pan-variant__links { font-size: 12.5px; color: var(--ink-soft); margin-top: 12px; }

/* Seitenweiter Unabhängigkeits-Hinweis, zweite kleine Kopfzeile über
   dem Hauptmenü (siehe layout.php) — ersetzt die frühere, pro-Marke
   wiederholte .independence-box auf den Markenseiten. Bewusst dezent
   (schmal, kleine Schrift), kein eigener Farbakzent wie ember/patina —
   ist ein rechtlicher Hinweis, keine Werbefläche. */
.topbar-disclosure { background: var(--flaeche-dunkel); }
.topbar-disclosure .wrap { padding: 7px 20px; }
.topbar-disclosure span { font-size: 12px; color: #D9D3C8; }
.topbar-disclosure a { color: #D9D3C8; text-decoration: underline; text-underline-offset: 2px; }
.topbar-disclosure a:hover { color: #fff; }
@media (max-width: 640px) { .topbar-disclosure span { display: block; } }

/* Markenseite: Produktlinien-Karten — rein redaktionell, bewusst OHNE
   Bild/Preis/CTA (Abgrenzung zu .product-card, das eine Kaufeinheit ist). */
.lineup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.lineup-card { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 18px 18px 16px; }
.lineup-card h3 { font-size: 15px; margin-bottom: 6px; }
.lineup-card p { font-size: 13px; color: var(--ink-soft); margin: 0; }

/* Empfehlungs-Box (components/recommendation-block.php) — ersetzt die
   früheren Produktraster auf Pfannenfinder-Ergebnis, Hub-Seiten und
   /pfanne-kaufen: Empfehlungssatz + Spec-Stichpunkte + Amazon-Suchlink,
   optional ergänzt um 1-3 Featured-Produktkarten (siehe
   App\Support\ProductRecommendation). Aus dem mit dem Kunden
   abgestimmten Mockup übernommen, damit Mockup und Live-CSS deckungsgleich sind. */
.spec-box { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 22px 24px; margin-top: 20px; }
.spec-box h2 { font-size: 18px; margin-bottom: 14px; }

/* Spec-Tiles-Grid — Ablösung der früheren flachen .spec-list (Nutzer-
   Feedback: "es muss genannt werden, welche Randform ... welche
   Beschichtung ... außerdem hübscher visuell"). Jede Kachel: Label, Wert,
   optional eine erklärende Handhabungs-/Risiko-Notiz (App\Support\
   FormAdvisor / App\Support\MaterialAdvisor). Aus dem mit dem Kunden
   abgestimmten Mockup übernommen. */
.spec-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 18px; }
.spec-tile { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-control); padding: 14px 16px; }
.spec-tile-label { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); margin-bottom: 6px; }
.spec-tile-icon { font-size: 15px; line-height: 1; }
.spec-tile-value { font-size: 15.5px; font-weight: 600; font-family: var(--font-head); margin-bottom: 4px; }
.spec-tile-note { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
.spec-tile.coating-none { border-left: 3px solid var(--ink-soft); }
.spec-tile.coating-yes { border-left: 3px solid var(--patina); }
@media (max-width: 700px) { .spec-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .spec-tiles { grid-template-columns: 1fr; } }

/* Materialberatung im Empfehlungs-Baustein (Ablösung der früheren direkten
   Fragen "Welche Form/welches Material?" UND der reinen Antworten-
   Spiegelung — Nutzer-Feedback: "es muss ein Ergebnis rauskommen" mit
   Kernaussage, Begründung, Trade-offs und Pflegeaufwand statt eines
   generischen Fließtexts. Siehe App\Support\MaterialAdvisor,
   components/recommendation-block.php). */
.material-kernsatz { font-size: 16.5px; font-weight: 600; line-height: 1.4; margin: 0 0 10px; }
.material-tension { font-size: 13.5px; color: var(--ink-soft); font-style: italic; margin: 0 0 14px; }
.pflege-badge { display: inline-block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 4px 11px; border-radius: var(--radius-pill); margin-bottom: 18px; background: var(--patina-soft); color: var(--patina); }

.material-pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 4px 0 16px; }
.material-pros-cons-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 8px; }
.material-pros .material-pros-cons-label { color: var(--patina); }
.material-cons .material-pros-cons-label { color: var(--ember); }
.material-pros ul, .material-cons ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 13.5px; color: var(--ink-soft); }
.material-pros li, .material-cons li { padding-left: 20px; position: relative; }
.material-pros li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--patina); font-weight: 700; }
.material-cons li::before { content: "!"; position: absolute; left: 3px; top: 0; color: var(--ember); font-weight: 700; }
.material-gewicht-hinweis { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 18px; padding-top: 12px; border-top: 1px dashed var(--line); }
@media (max-width: 600px) { .material-pros-cons { grid-template-columns: 1fr; } }

.spec-related-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.spec-related-links a.link { font-size: 13px; font-weight: 600; }

/* Die frühere ".product-pick"-Karte (konkretes Einzelprodukt neben dem
   Amazon-CTA) ist mit dem Produkt-Cutover (Sept. 2026, "wirklich alles
   raus") ersatzlos gestrichen — Regeln entfernt, keine Stelle rendert
   die Klasse mehr (siehe recommendation-block.php). */

/* Pfannenfinder-Teaser (/pfanne-kaufen) — zeigt die echte erste Frage
   als Vorschau, verlinkt als Ganzes auf /pfannenfinder. Aus dem mit dem
   Kunden abgestimmten Mockup übernommen. Die Options-"Chips" sind hier
   rein dekorativ (kein eigener Klick-Handler) — der Link gilt für die
   ganze Box, siehe pfanne-kaufen.php. */
.finder-embed { background: var(--patina-soft); border-radius: var(--radius-card); padding: 26px 28px; }
.finder-embed__step { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--patina); margin-bottom: 8px; }
.finder-embed h3 { font-size: 18px; margin-bottom: 14px; }
.finder-embed__opts { display: flex; flex-wrap: wrap; gap: 10px; }
.finder-embed__opt { background: var(--card); border-radius: var(--radius-pill); padding: 10px 18px; font-size: 13.5px; font-weight: 500; box-shadow: var(--shadow-sm); }
.finder-embed__opt.is-picked { background: var(--ember); color: #fff; }
.finder-embed__progress { margin-top: 16px; font-size: 12px; color: var(--ink-soft); }
.lineup-card__badge { display: inline-block; margin-top: 10px; font-size: 11px; font-weight: 600; color: var(--patina); background: var(--patina-soft); border-radius: var(--radius-pill); padding: 3px 10px; }

/* Utility: zweispaltiges Layout, das auf Mobile automatisch untereinander
   fällt (genutzt für Pro/Contra, Autorenbox+Quellen — vorher als Inline-
   Style ohne Responsive-Handling in mehreren Templates dupliziert). */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 640px) {
  .two-col { grid-template-columns: 1fr; }
}

/* Zwei-Spalten-Layout für lange Inhaltsseiten (Artikel, Kaufberatung,
   Pflege) — löst das "sehr linkslastig"-Problem bei reinem Fließtext auf
   breitem Bildschirm, UND hält das empfohlene Produkt beim Scrollen
   sichtbar (Conversion-Vorteil gegenüber Produktbox nur am Artikelende).
   Jetzt DREI Kinder statt zwei (Hauptinhalt, TOC, Sidebar-Rest aus
   Quellen/Featured Product) über grid-template-areas platziert — auf
   Desktop stehen TOC und Sidebar-Rest weiterhin übereinander in
   derselben rechten Spalte wie bisher, auf Mobile können sie aber
   UNABHÄNGIG voneinander einsortiert werden (siehe Media Query unten):
   TOC früh, Sidebar-Rest bleibt nach dem Hauptinhalt. */
.content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-rows: auto 1fr;
  grid-template-areas: "main toc" "main sidebar";
  gap: 40px;
  align-items: start;
}
/* Absicherung gegen horizontales Ausbrechen NUR in der linken
   Content-Spalte (erstes Kind von .content-layout, überall im Projekt
   ein klassenloses div) — betrifft NICHT die Sidebar (Geschwister-
   Element, bleibt sticky) und NICHT body/html (der Header bleibt
   ebenfalls sticky). Der Slider selbst behält sein eigenes, gewolltes
   internes Scrollen unangetastet. */
.content-layout > div:first-child { grid-area: main; overflow-x: hidden; overflow-x: clip; min-width: 0; } /* clip (Punkt 124): schneidet ab wie hidden, macht aber keinen Scrollbereich, damit position: sticky darin wirkt */
.sidebar-toc { grid-area: toc; }
/* top 150px statt 96px: Sticky-Header ist inkl. Brotkrumen 131px hoch,
   bei 96px rutschte der obere Teil der Seitenleiste darunter (25.09.2026). */
.page-sidebar { grid-area: sidebar; position: sticky; top: 150px; display: flex; flex-direction: column; gap: 18px; }
.sidebar-box { background: var(--card); border-radius: var(--radius-card); padding: 18px; box-shadow: var(--shadow-sm); }
.sidebar-box__title { font-family: var(--font-head); font-weight: 600; font-size: 13px; margin-bottom: 12px; }
.toc { display: flex; flex-direction: column; gap: 2px; }
.toc__item { font-size: 13px; color: var(--ink-soft); padding: 6px 8px; border-radius: var(--radius-control); }
.toc__item:hover { background: var(--bg); color: var(--ink); }
.toc__item--h3 { padding-left: 20px; font-size: 12.5px; }
.sidebar-sources { list-style: none; margin: 0; padding: 0; font-size: 13px; display: flex; flex-direction: column; gap: 8px; }
.sidebar-sources a { color: var(--patina); }
.sidebar-sources a:hover { text-decoration: underline; }
.sidebar-box--ad { padding: 10px; }
.sidebar-box--ad .sidebar-box__title { padding: 8px 8px 0; font-size: 10px; color: var(--ink-soft); text-transform: none; }

/* Pfannenfinder-Startseite (Nutzer-Feedback: "die Startseite sieht
   einfach sehr leer aus") — schlankere Variante von .content-layout ohne
   TOC-Reihe (kein Inhaltsverzeichnis nötig, der Fragen-Flow hat keine
   Überschriften), sonst dieselben .sidebar-box-Bausteine. */
.finder-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.finder-sidebar { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 150px; }
.finder-howto { list-style: none; counter-reset: howto; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.finder-howto li { position: relative; padding-left: 30px; font-size: 13.5px; color: var(--ink-soft); counter-increment: howto; }
.finder-howto li::before { content: counter(howto); position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--patina-soft); color: var(--patina); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
@media (max-width: 980px) {
  .finder-layout { grid-template-columns: 1fr; }
  .finder-sidebar { position: static; flex-direction: row; flex-wrap: wrap; margin-top: 24px; }
  .finder-sidebar .sidebar-box { flex: 1 1 240px; }
}

@media (max-width: 980px) {
  /* TOC früh (direkt nach der Einleitung), Hauptinhalt danach, Sidebar-
     Rest (Quellen + Featured Product) bleibt am Ende — NUR das TOC soll
     nach oben wandern, nicht das Featured Product, das dort nichts
     verloren hat und den Blick auf den eigentlichen Inhalt verstellt
     hätte (vorheriger Zwischenstand zog beides gemeinsam nach oben). */
  .content-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: "toc" "main" "sidebar";
  }
  .sidebar-toc { margin-bottom: 24px; }
  .page-sidebar { position: static; flex-direction: row; flex-wrap: wrap; margin-top: 24px; }
  .sidebar-box { flex: 1 1 240px; }
  .sidebar-box--affiliate-dup { display: none; }
}

/* Damit Sprungmarken (Inhaltsverzeichnis-Klicks) nicht unter dem Sticky-
   Header verschwinden. */
/* 150px statt 100px: der Sticky-Header ist inkl. Brotkrumen-Leiste 131px
   (Desktop) bzw. 124px (mobil) hoch — mit 100px rutschte der obere Rand
   jeder angesprungenen Überschrift darunter (gemessen 25.09.2026). */
h2[id], h3[id] { scroll-margin-top: 150px; }
/* Handy (15.10.2026): Kopf mit Brotkrumen ist bis zu 166 px hoch und verdeckte Sprungziele */
@media (max-width: 760px) { h2[id], h3[id] { scroll-margin-top: 186px; } }

/* Filter-Pillen auf Übersichtsseiten (Kaufberatung, Wissen, Rezepte,
   Zubehör, ...) — EIGENE Klasse, bewusst getrennt von .finder-card
   (Pfannenfinder), das seit dem App-Redesign etwas anderes meint
   (große Auswahlkarten statt kleiner Pillen). Beide hatten vorher
   dieselbe Klasse (.finder-option) geteilt — dadurch hat das
   Pfannenfinder-Redesign versehentlich alle Filter-Pillen sitewide
   mitzerstört. */
.filter-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.5rem 0 2rem; }
.filter-pill { border: none; background: var(--card); border-radius: var(--radius-pill); padding: 10px 18px; font-size: 14px; cursor: pointer; box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink); display: inline-block; }
.filter-pill:hover { box-shadow: var(--shadow-md); }
.filter-pill.is-selected { background: var(--ink); color: var(--card); box-shadow: var(--shadow-md); }
/* Nicht-verfügbar-Zustand — bewusst OHNE opacity: gestrichelter Rand +
   --ink-soft-Text sind Signal genug, zusätzliche Transparenz macht Text
   und Zahlen nur unnötig blass (galt vorher auch für .fact-pill.is-
   disabled und .hub-tag.is-disabled, siehe dort — hier einmal
   grundsätzlich festgelegt, nicht länger drei leicht unterschiedliche
   Varianten derselben Idee). */
.filter-pill.is-disabled { background: transparent; box-shadow: none; border: 1.5px dashed var(--ink-soft); color: var(--ink-soft); cursor: default; }
.filter-pill .n { font-size: 12px; color: var(--ink-soft); margin-left: 4px; }
.filter-pill.is-selected .n { color: rgba(255,255,255,.75); }

/* Produkt-Slider — für Stellen mit potenziell vielen automatisch
   gefundenen Produkten (z.B. Kaufberatung nach Herdart, seit die
   Herdart-Tags bei fast allen Pfannen gesetzt sind). Bewusst reines
   CSS (horizontales Scrollen mit Snap), kein JS nötig — funktioniert
   nativ per Wischgeste auf Mobile und per Scrollen/Ziehen am Desktop. */
.product-slider { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 12px; margin: 0 -2px; scrollbar-width: thin; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.product-slider > * { scroll-snap-align: start; flex: 0 0 260px; min-width: 0; }

/* Slider-Pfeile — macht aus dem reinen "man kann hier zufällig scrollen"
   (Scrollbalken/Wisch-Geste, ohne sichtbaren Hinweis) einen echten,
   erkennbaren Slider mit Klick-Navigation. Wisch-Geste bleibt auf
   Touch-Geräten trotzdem erhalten (deshalb Pfeile auf Mobile
   ausgeblendet, siehe Media Query unten — dort stört ein Pfeil eher,
   als dass er hilft). Reines Vanilla-JS (slider.js), kein Framework. */
.slider-wrap { position: relative; }
.slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: var(--card); box-shadow: var(--shadow-md); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); z-index: 5; padding: 0;
  transition: opacity .15s ease, visibility .15s ease, box-shadow .15s ease;
}
.slider-arrow:hover { box-shadow: var(--shadow-lg); }
.slider-arrow--prev { left: -6px; }
.slider-arrow--next { right: -6px; }
.slider-arrow.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 640px) {
  .slider-arrow { display: none; }
}

/* Pfannenfinder — App-artiges Redesign (v2). Fortschrittsbalken statt
   Text, Karten statt Pillen, sanfte Übergänge, Zusammenfassungs-Screen. */
#finder-flow { max-width: 640px; transition: opacity 0.16s ease, transform 0.16s ease; scroll-margin-top: 150px; }
#finder-flow.is-leaving { opacity: 0; transform: translateY(6px); }

.finder-progress { width: 100%; height: 6px; background: var(--card); border-radius: var(--radius-pill); overflow: hidden; margin-bottom: 24px; box-shadow: var(--shadow-sm); }
.finder-progress-fill { height: 100%; background: var(--ember); border-radius: var(--radius-pill); transition: width 0.3s ease; }

.finder-step-label { font-family: var(--font-head); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.finder-heading { margin: 0 0 4px; }
.finder-hint { font-size: 13px; color: var(--ink-soft); margin: 0 0 20px; }

.finder-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 20px 0 28px; }
.finder-card {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 2px solid transparent; background: var(--card); border-radius: var(--radius-control);
  padding: 18px 20px; font-size: 15px; font-weight: 500; text-align: left; cursor: pointer;
  box-shadow: var(--shadow-sm); transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.finder-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.finder-card:active { transform: translateY(0); }
.finder-card-check { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--ink-soft); flex-shrink: 0; opacity: 0.35; transition: all 0.15s ease; }
.finder-card.is-selected { border-color: var(--ember); box-shadow: var(--shadow-md); }
.finder-card.is-selected .finder-card-check { background: var(--ember); border-color: var(--ember); opacity: 1; }
.finder-card.is-selected .finder-card-check::after { content: '✓'; display: block; color: #fff; font-size: 12px; line-height: 16px; text-align: center; }

/* Rang-Auswahl (Prioritäten-Frage, siehe finder.js RANK_ATTRIBUTES) —
   zeigt statt des Häkchens die aktuelle Rangnummer (1 = wichtigste). */
.finder-card.is-selected .finder-card-rank::after { content: attr(data-rank); font-size: 11px; font-weight: 700; }

.finder-nav { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.finder-back { border: none; background: none; color: var(--ink-soft); font-size: 14px; cursor: pointer; padding: 10px 4px; }
.finder-back:hover { color: var(--ink); }

.finder-summary { display: flex; flex-direction: column; gap: 8px; margin: 20px 0 28px; }
.finder-summary-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: none; background: var(--card); border-radius: var(--radius-control);
  padding: 14px 18px; text-align: left; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease;
}
.finder-summary-row:hover { box-shadow: var(--shadow-md); }
.finder-summary-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.finder-summary-question { font-size: 12.5px; color: var(--ink-soft); }
.finder-summary-answer { font-size: 14.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finder-summary-answer.is-empty { color: var(--ink-soft); font-weight: 400; font-style: italic; }
.finder-summary-edit { font-size: 13px; color: var(--ember); flex-shrink: 0; }

.finder-result-card { background: var(--card); border-radius: var(--radius-card); padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: var(--shadow-sm); }

@media (max-width: 480px) {
  .finder-cards { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .wrap { padding: 0 20px; }
  .hero { grid-template-columns: 1fr; padding: 16px 0 40px; }
  .hero h1 { font-size: 34px; }
  .hero-image { min-height: 0; height: 200px; margin-top: 28px; }
  .text-cards-grid { grid-template-columns: 1fr; }

  /* Mobile-Nav: Hamburger sichtbar, Menü klappt als Panel unter die Bar */
  .nav-toggle { display: flex; }
  nav.main {
    display: none; position: absolute; top: 100%; left: 0; right: 0; margin-top: 10px;
    background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-lg);
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px; z-index: 25;
    max-height: calc(100vh - 100px); overflow-y: auto;
  }
  nav.main.is-open { display: flex; }
  /* Nur direkte Kinder (Hauptpunkte) bekommen die Zeilen-Optik — sonst
     erben auch die 17 verschachtelten Untermenü-Links (Edelstahl, PTFE,
     Direktsuche …) dieselbe Optik und die Hierarchie geht verloren. */
  nav.main > a, nav.main > .has-dropdown-wrap > a.has-dropdown {
    display: block; padding: 12px 10px; border-bottom: 1px solid var(--line);
  }
  nav.main > a:last-child { border-bottom: none; }
  nav.main .cta { text-align: center; margin-top: 6px; border-bottom: none !important; }
  nav.main .cta--im-menue { display: block; }
  .nav-cta { display: none; }
  nav.main { margin: 10px 0 0; }
  .has-dropdown-wrap::after { display: none; } /* Hover-Brücke nur relevant für Desktop-Hover */
  .material-menu {
    position: static; display: none; width: auto; max-width: none; margin: 0; box-shadow: none;
    border-radius: 0; background: var(--bg); padding: 4px 10px 10px 20px;
  }
  .has-dropdown-wrap:hover .material-menu, .has-dropdown-wrap:focus-within .material-menu, .has-dropdown-wrap.is-open .material-menu { display: grid; grid-template-columns: 1fr; gap: 14px; }
  .material-menu a { display: block; padding: 4px 0; font-size: 13px; }
  .material-menu .direktsuche { flex-direction: column; align-items: flex-start; gap: 4px; }

  .module-row { grid-template-columns: 1fr; }
  .cols { flex-wrap: wrap; gap: 28px; }
  .footer-top { flex-direction: column; gap: 24px; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 28px; }
  .hero { padding: 8px 0 28px; }
  .hero p.lede { font-size: 15px; }
  .section-head h2 { font-size: 19px; }
  .footer-box { padding: 24px 20px; }
  .btn-primary, .btn-secondary { display: block; width: 100%; margin: 0 0 10px; text-align: center; }
}

/* ============================================================
   Empfehlungs-Karte (27.09.2026) — components/recommendation-block.php
   Bild + Kopf (Anlass, Titel, Kernsatz, Kernfakten), darunter Hinweis,
   Vor-/Nachteile, Details, Aktionen. Farbregeln: Ember nur für die
   primäre Aktion, Patina nur für Hinweis/Info.
   ============================================================ */
.rc { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-md); overflow: hidden; }
.rc__top { display: grid; grid-template-columns: 320px minmax(0, 1fr); align-items: stretch; }
.rc--noimg .rc__top { grid-template-columns: minmax(0, 1fr); }
.rc__img { margin: 0; background: var(--line); min-height: 240px; }
.rc__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc__head { padding: 26px 28px 22px; display: flex; flex-direction: column; }
.rc__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--ink-soft); margin-bottom: 6px; }
.rc__title { font-family: var(--font-head); font-size: 24px; line-height: 1.2; margin: 0 0 10px; }
.rc__lede { font-size: 15.5px; line-height: 1.55; margin: 0 0 18px; color: var(--ink); max-width: 60ch; }
.rc__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.rc__facts > div { min-width: 0; }
.rc__facts dt { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); margin-bottom: 3px; }
.rc__facts dd { margin: 0; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.rc__meter { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: 6px; }
.rc__meter i { width: 14px; height: 6px; border-radius: 3px; background: var(--line); display: inline-block; }
.rc__meter i.on { background: var(--ink); }
.rc__body { padding: 0 28px 26px; }
.rc--noimg .rc__body { padding-top: 0; }
.rc__note { display: flex; gap: 10px; background: var(--patina-soft); color: var(--ink); border-radius: var(--radius-control); padding: 12px 14px; font-size: 14px; line-height: 1.5; margin: 22px 0 0; }
.rc__note b { color: var(--patina); }
.rc__pc { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 22px; }
.rc__pc-label { font-size: 13px; font-weight: 600; margin: 0 0 8px; color: var(--ink); }
.rc__pc ul { list-style: none; padding: 0; margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.rc__pc li { position: relative; padding-left: 22px; margin-bottom: 6px; }
.rc__plus li::before { content: "✓"; position: absolute; left: 0; color: var(--patina); font-weight: 700; }
.rc__minus li::before { content: "–"; position: absolute; left: 3px; color: var(--ink-soft); font-weight: 700; }
.rc__more { margin-top: 18px; font-size: 14px; }
.rc__more summary { cursor: pointer; color: var(--ink-soft); font-weight: 500; }
.rc__more p { margin: 8px 0 0; color: var(--ink-soft); line-height: 1.55; max-width: 70ch; }
.rc__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.rc__actions .btn-primary, .rc__actions .btn-secondary { margin: 0; }
.rc__actions .text-link { font-size: 14px; font-weight: 500; }
.rc__disc { flex-basis: 100%; font-size: 11.5px; color: var(--ink-soft); }
@media (max-width: 760px) {
  .rc__top { grid-template-columns: minmax(0, 1fr); }
  .rc__img { min-height: 0; aspect-ratio: 16 / 10; }
  .rc__head, .rc__body { padding-left: 18px; padding-right: 18px; }
  .rc__title { font-size: 21px; }
  .rc__pc { grid-template-columns: 1fr; gap: 16px; }
  .rc__actions .btn-primary, .rc__actions .btn-secondary { width: 100%; text-align: center; }
}

/* KI-Hinweis im Bild (27.09.2026, App\Support\KiHinweis). Container mit
   position:relative, Hinweis unten links, klein und halbtransparent. */
.ki-img { position: relative; display: block; }
.ki-img > img { display: block; }
.ki-img--hero { min-width: 0; height: 100%; }
.ki-img--banner > img { margin-bottom: 0 !important; }
.ki-img--banner { margin-bottom: 20px; }
.ki-img__note { position: absolute; left: 8px; bottom: 8px; z-index: 1; font: 500 10.5px/1.3 var(--font-body); letter-spacing: .01em; color: #fff; background: rgba(20, 25, 23, .58); padding: 2px 7px; border-radius: var(--radius-pill); pointer-events: none; white-space: nowrap; }
.rc__img, .pan-variant__img, .mat-card__illu { position: relative; }
.mat-card__illu .ki-img__note { left: 4px; bottom: 4px; font-size: 9px; padding: 1px 5px; }

/* ---------------------------------------------------------------
   Hub-Karten "Welche Form passt?" / "Welches Material passt?"
   (27.09.2026: ausführlicher und mit Bild oben). Ersetzt dort
   .mat-card; Bild zeigt nur materialrichtige Motive (VariantImage).
   --------------------------------------------------------------- */
.hcard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 16px; }
.hcard { display: flex; flex-direction: column; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; overflow: hidden; transition: box-shadow .15s ease, transform .15s ease; }
.hcard:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.hcard:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.hcard__img { position: relative; aspect-ratio: 2 / 1; background: var(--bg); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.hcard__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hcard__img .mat-card__illu-placeholder { width: 72px; height: 72px; }
.hcard__img .ki-img__note { left: 8px; bottom: 8px; }
.hcard__body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1; }
.hcard__title { font-family: var(--font-head); font-weight: 600; font-size: 17px; line-height: 1.25; margin: 0; }
.hcard__chip { align-self: flex-start; font-size: 11.5px; font-weight: 600; color: var(--patina); background: var(--patina-soft); border-radius: var(--radius-pill); padding: 2px 10px; margin-top: -2px; }
.hcard__chip--blank { color: var(--ink-soft); background: var(--bg); }
.hcard__desc { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hcard__facts, .hcard__meters { margin: 2px 0 0; padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 6px; font-size: 13px; }
.hcard__facts > div { display: grid; grid-template-columns: 84px 1fr; gap: 8px; }
.hcard__meters > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hcard__facts dt, .hcard__meters dt { color: var(--ink-soft); font-size: 12px; }
.hcard__facts dd, .hcard__meters dd { margin: 0; color: var(--ink); }
.hcard__meter { display: inline-flex; gap: 3px; }
.hcard__meter i { width: 18px; height: 6px; border-radius: 3px; background: var(--line); display: inline-block; }
.hcard__meter i.on { background: var(--ink); }
.hcard__cta { margin-top: auto; padding-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.hcard:hover .hcard__cta { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 640px) {
  .hcard-grid { grid-template-columns: 1fr; gap: 12px; }
  .hcard { flex-direction: row; }
  .hcard__img { flex: 0 0 104px; aspect-ratio: auto; min-height: 100%; border-bottom: 0; border-right: 1px solid var(--line); }
  .hcard__img .mat-card__illu-placeholder { width: 48px; height: 48px; }
  .hcard__img .ki-img__note { left: 4px; bottom: 4px; font-size: 8.5px; padding: 1px 4px; }
  .hcard__body { padding: 12px 14px; gap: 6px; }
  .hcard__title { font-size: 15.5px; }
  .hcard__desc { font-size: 13px; -webkit-line-clamp: 2; }
  .hcard__facts, .hcard__meters { padding-top: 8px; }
  .hcard__facts > div { grid-template-columns: 74px 1fr; }
}

/* Eingebetteter Finder auf Hubs: sichtbare Auswahl + Sofort-Empfehlung
   (App\Support\HubFinderContext, 27.09.2026) */
.hfw-context { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.hfw-context__label { font-size: 13px; color: var(--ink-soft); margin-right: 2px; }
.hfw-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--card); box-shadow: var(--shadow-sm); border-radius: var(--radius-pill); padding: 5px 6px 5px 12px; font-size: 14px; font-weight: 600; color: var(--ink); }
.hfw-chip:not(:has(.hfw-chip__x)) { padding-right: 12px; }
.hfw-chip__kind { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.hfw-chip__x { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); color: var(--ink-soft); text-decoration: none; font-size: 15px; line-height: 1; }
.hfw-chip__x:hover { background: var(--line); color: var(--ink); }
.hfw-refine { margin: 28px 0 6px; padding-top: 22px; border-top: 1px solid var(--line); }
.hfw-refine__title { font-family: var(--font-head); font-size: 18px; font-weight: 600; margin: 0 0 4px; }
.hfw-refine__hint { font-size: 13.5px; color: var(--ink-soft); margin: 0; }
/* Sprung von den Hub-Karten (#s-produkte): Überschrift + Auswahl-Chips
   sollen unter dem Sticky-Header sichtbar bleiben. */
#s-produkte { scroll-margin-top: 120px; }
/* Mobil: Empfehlung/Finder vor der "Mehr zu …"-Linkkarte, sonst liegt
   das, was man gerade angeklickt hat, unter dem Falz. */
@media (max-width: 980px) {
  .hub-filter-layout > .hub-filter-side { order: 2; }
}

/* Markenseite: Sortiment (27.09.2026, App\Support\BrandSortiment) */
.brand-stats { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 28px; }
.brand-stats li { background: var(--card); box-shadow: var(--shadow-sm); border-radius: var(--radius-pill); padding: 6px 14px; font-size: 13.5px; color: var(--ink-soft); }
.brand-stats strong { color: var(--ink); font-weight: 700; }
.brand-stats li.brand-stats__label { background: none; box-shadow: none; padding: 6px 2px; font-weight: 600; }
.brand-intro { font-size: 13.5px; color: var(--ink-soft); max-width: 70ch; margin: 0 0 16px; }
.hcard-grid--brand { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.hcard--static:hover { transform: none; box-shadow: var(--shadow-sm); }
.hcard--noimg .hcard__body { padding-top: 16px; }
.hcard__eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.hcard__lines a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.hcard__lines a:hover { text-decoration-color: var(--ink); }
a.hcard__cta { text-decoration: none; }
a.hcard__cta:hover { text-decoration: underline; text-underline-offset: 3px; }
.brand-bauweise { margin: 18px 0 0; display: grid; gap: 0; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 4px 16px; }
.brand-bauweise > div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.brand-bauweise > div:last-child { border-bottom: 0; }
.brand-bauweise dt { font-weight: 600; }
.brand-bauweise dd { margin: 0; }
.lineup-card { scroll-margin-top: 150px; }
.lineup-card:target { box-shadow: 0 0 0 2px var(--ink), var(--shadow-sm); }
.lineup-card__meta { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 4px; font-size: 12.5px; }
.lineup-card__meta > div { display: grid; grid-template-columns: 76px 1fr; gap: 8px; }
.lineup-card__meta dt { color: var(--ink-soft); }
.lineup-card__meta dd { margin: 0; }
@media (max-width: 640px) {
  .brand-bauweise > div { grid-template-columns: 1fr; gap: 2px; }
}
/* Serien-Liste auf Gruppen-Hubs (27.09.2026) */
.serien-list { list-style: none; margin: 4px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: 13.5px; }
.serien-list a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.serien-list span { display: block; color: var(--ink-soft); font-size: 12.5px; }
/* Hinweis "Angaben ohne Gewähr" + Herstellerlinks (27.09.2026) */
.hersteller-hinweis { background: var(--patina-soft); border-left: 3px solid var(--patina); border-radius: var(--radius-control); padding: 12px 16px; margin: 0 0 24px; font-size: 13px; color: var(--ink); max-width: 80ch; }
.hersteller-hinweis p { margin: 0; line-height: 1.55; }
.hersteller-hinweis__link { display: inline-block; margin-top: 8px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.lineup-card__ext { display: block; margin-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.lineup-card__ext:hover { text-decoration-color: var(--ink); }
.serien-list a.serien-list__ext { font-weight: 400; font-size: 12px; color: var(--ink-soft); }

/* Bilder tragen jetzt width/height (App\Support\ImageOptimizer, gegen
   Layout-Springen). Ohne diese Regel würde das height-Attribut die Höhe
   fest vorgeben und Bilder mit width:100% verzerren. :where() hat keine
   Spezifität — jede Klassenregel mit eigener Höhe gewinnt weiterhin. */
:where(img[width][height]) { height: auto; max-width: 100%; }

/* =====================================================================
   Pfannenfinder Redesign (28.09.2026, Mockup "Pfannenfinder Redesign").
   Markup kommt aus finder.js (.pf-*). Auswahl = dunkle Umrandung (ink),
   Ember nur für den Hauptknopf, Patina nur für Hinweise.
   ===================================================================== */
#finder-flow { max-width: none; }
.pf { display: grid; gap: 28px; align-items: start; }
.pf-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.pf-progress { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.pf-progress__seg { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pf-progress__bar { height: 4px; border-radius: 2px; background: var(--line); }
.pf-progress__seg.is-done .pf-progress__bar { background: var(--ink); }
.pf-progress__name { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-progress__seg.is-current .pf-progress__name { color: var(--ink); font-weight: 600; }
.pf-steplabel { display: none; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); margin-top: -8px; }

.pf-screen { display: flex; flex-direction: column; gap: 14px; }
.pf-screen--combined { gap: 26px; }
.pf-q { display: flex; flex-direction: column; gap: 10px; }
.pf-q__head { display: flex; align-items: flex-start; gap: 8px; }
.pf-q__title { margin: 0; flex-grow: 1; font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1.35; }
.pf-q__title--main { font-family: var(--font-head); font-size: 28px; line-height: 1.2; }
.pf-screen-title { margin-bottom: -4px; }
.pf-info { flex-shrink: 0; width: 40px; height: 40px; margin: -6px -8px 0 0; border: 0; background: transparent; color: var(--patina); display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; }
.pf-info:hover, .pf-info[aria-expanded="true"] { background: var(--patina-soft); }
.pf-hint { padding: 10px 14px; background: var(--patina-soft); border-radius: var(--radius-control); font-size: 13.5px; line-height: 1.55; }
.pf-meta { margin: -4px 0 0; font-size: 13px; color: var(--ink-soft); }
.pf-meta strong { color: var(--ink); }
.pf-group { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin: 6px 0 -4px; }

.pf-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.pf-tiles--few { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.pf-tiles--rank { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pf-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 92px; padding: 12px 8px; background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; font: inherit; font-size: 13px; font-weight: 500; line-height: 1.25; color: var(--ink); text-align: center; cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease; }
.pf-tile:hover { border-color: #C9CDC8; }
.pf-tile:focus-visible, .pf-card:focus-visible, .pf-seg__opt:focus-visible, .pf-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pf-tile.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pf-tile--noicon { min-height: 60px; }
.pf-tile__icon svg { width: 30px; height: 30px; display: block; }
.pf-tile__sub { font-size: 11.5px; font-weight: 400; color: var(--ink-soft); }
.pf-check { position: absolute; top: 7px; right: 7px; width: 18px; height: 18px; border-radius: 5px; background: var(--ink); color: var(--card); display: flex; align-items: center; justify-content: center; }
.pf-rank { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--card); font-family: var(--font-head); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }

.pf-seg { display: grid; gap: 4px; padding: 4px; background: #E9EBE7; border-radius: 12px; }
.pf-seg__opt { min-height: 44px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 4px 6px; }
.pf-seg__opt small { font-size: 11px; font-weight: 400; color: var(--ink-soft); }
.pf-seg__opt.is-on { background: var(--card); box-shadow: 0 1px 3px rgba(20,30,25,.15); font-weight: 600; }

.pf-cards { display: flex; flex-direction: column; gap: 10px; }
.pf-card { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px; background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.pf-cards--compact .pf-card { padding: 11px 14px; gap: 10px; }
.pf-card.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pf-card__icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: var(--bg); display: flex; align-items: center; justify-content: center; }
.pf-card__icon svg { width: 26px; height: 26px; }
.pf-card__text { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; }
.pf-card__title { font-family: var(--font-head); font-weight: 600; font-size: 16px; }
.pf-cards--compact .pf-card__title { font-family: var(--font-body); font-size: 14px; font-weight: 500; }
.pf-card__sub { font-size: 13px; color: var(--ink-soft); line-height: 1.4; }
.pf-radio { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #C9CDC8; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.pf-card.is-on .pf-radio { border-color: var(--ink); }
.pf-card.is-on .pf-radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }

.pf-selrow { display: flex; flex-direction: column; gap: 6px; }
.pf-selrow__btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; background: var(--card); border: 0; border-radius: var(--radius-control); box-shadow: var(--shadow-sm); font: inherit; font-size: 13px; color: var(--ink); text-align: left; cursor: pointer; }
.pf-selrow__label { color: var(--ink-soft); flex-shrink: 0; }
.pf-selrow__text { flex-grow: 1; min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-selrow__edit { color: var(--ink-soft); font-size: 12px; flex-shrink: 0; }
.pf-direct { align-self: flex-start; border: 0; background: none; padding: 4px 0; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); cursor: pointer; }
.pf-direct:hover { text-decoration-color: var(--ink); }

.pf-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; margin-top: 4px; border-top: 1px solid var(--line); }
.pf-back { border: 0; background: none; padding: 12px 4px; font: inherit; font-size: 14px; color: var(--ink-soft); cursor: pointer; }
.pf-back:hover { color: var(--ink); }
.pf-next { border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.pf-next__count { font-weight: 500; opacity: .85; }

.pf-aside { display: none; }
.pf-aside__box { background: var(--card); border-radius: 22px; padding: 20px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 12px; }
.pf-aside__title { font-family: var(--font-head); font-weight: 600; font-size: 17px; }
.pf-aside__row { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.pf-aside__q { align-self: flex-start; border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; color: var(--ink-soft); text-align: left; cursor: pointer; }
.pf-aside__q:hover { color: var(--ink); text-decoration: underline; }
.pf-aside__empty { font-size: 13px; color: var(--ink-soft); }
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 11px; border: 0; border-radius: var(--radius-pill); background: var(--bg); font: inherit; font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer; }
.pf-chip span { color: var(--ink-soft); font-size: 15px; line-height: 1; }
.pf-aside__hint { margin-top: 14px; background: var(--patina-soft); border-radius: 18px; padding: 16px 18px; }
.pf-aside__hint-title { display: flex; align-items: center; gap: 8px; color: var(--patina); font-weight: 600; font-size: 14px; }
.pf-aside__hint p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; }

@media (min-width: 700px) {
  .pf-main { background: var(--card); border-radius: 22px; padding: 28px 30px; box-shadow: var(--shadow-sm); }
}
@media (min-width: 1100px) {
  .pf--wide { grid-template-columns: minmax(0, 1fr) 300px; }
  .pf--wide .pf-aside { display: block; position: sticky; top: 130px; }
}
@media (max-width: 699px) {
  .pf-progress__name { display: none; }
  .pf-steplabel { display: block; }
  .pf-q__title--main { font-size: 23px; }
  .pf-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pf-tiles--rank { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-tile { min-height: 84px; padding: 10px 6px; font-size: 12.5px; }
  .pf-tile__icon svg { width: 28px; height: 28px; }
  .pf-actions { position: sticky; bottom: 0; z-index: 5; margin: 4px -20px 0; padding: 12px 20px calc(14px + env(safe-area-inset-bottom)); background: var(--card); box-shadow: 0 -8px 24px -12px rgba(20,30,25,.18); }
  .pf-next { flex-grow: 1; justify-content: center; }
}
.pf-back { white-space: nowrap; }
.pf-aside__row.is-current .pf-aside__q { color: var(--ink); font-weight: 600; }
@media (min-width: 1100px) {
  .pf--wide .pf-selrow { display: none; }
}

/* Ergebniskarte: Aufbau mit Schichtbild, gesammelte Hinweise (28.09.2026) */
.rc__aufbau { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 18px; align-items: center; margin: 0 0 18px; padding: 14px 16px; background: var(--bg); border-radius: var(--radius-control); }
.rc__schicht { display: flex; flex-direction: column; gap: 2px; }
.rc__schicht::before { content: "Boden im Schnitt"; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); margin-bottom: 4px; }
.rc__lage { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 8px; }
.rc__band { display: block; width: 56px; min-height: 2px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(29, 35, 33, .12); }
.rc__lage-lab { font-size: 11px; line-height: 1.2; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc__aufbau-rows { margin: 0; display: grid; gap: 8px; }
.rc__aufbau-rows > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.rc__aufbau-rows dt { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.rc__aufbau-rows dd { margin: 0; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.ab-keramik { background: #E6DCC2; }
.ab-ptfe { background: #33383A; }
.ab-edelstahl { background: linear-gradient(180deg, #9EA7AC, #7E888E); }
.ab-alu { background: #C9D0D4; }
.ab-kupfer { background: linear-gradient(180deg, #D38D5F, #B26A3E); }
.ab-carbon { background: #52585C; }
.ab-guss { background: #2D3134; }
.ab-patina { background: #7A4B2A; }
.ab-emaille { background: #5E8274; }
.ab-zinn { background: #CFCFC7; }
.ab-wabe { background: repeating-linear-gradient(90deg, #AEB5B9 0 5px, #33383A 5px 8px); }
.ab-offen { background: repeating-linear-gradient(135deg, #E4E7E9 0 4px, #CDD2D5 4px 8px); }
.rc__note--list > div { min-width: 0; }
.rc__note--list b { display: block; margin-bottom: 4px; }
.rc__note--list ul { margin: 0; padding-left: 18px; }
.rc__note--list li { margin: 0 0 6px; }
.rc__note--list li:last-child { margin-bottom: 0; }
@media (max-width: 699px) {
  .rc__aufbau { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .rc__aufbau-rows > div { grid-template-columns: minmax(0, 1fr); gap: 1px; }
}

/* Hub-Zuordnungen (29.09.2026): Aufbau, Verwechslungen, Serien nach Basis */
.hub-aufbau { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; align-items: start; }
.hub-aufbau__rows { margin: 0; display: grid; gap: 12px; background: var(--card, #fff); border-radius: var(--radius-card); padding: 18px 20px; box-shadow: 0 1px 2px rgba(20, 30, 25, .05); }
.hub-aufbau__rows > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.hub-aufbau__rows dt { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.hub-aufbau__rows dd { margin: 0; font-size: 14.5px; line-height: 1.5; }
.hub-aufbau__rows ul { margin: 0; padding-left: 18px; }
.hub-aufbau__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mat-chip--static { cursor: default; }
.hub-verwechslung { background: #FFF6E5; border-radius: var(--radius-card); padding: 16px 18px; font-size: 14px; line-height: 1.5; }
.hub-verwechslung__title { margin: 0 0 6px; font-weight: 600; }
.hub-verwechslung ul { margin: 0; padding-left: 18px; }
.hub-verwechslung li { margin-bottom: 6px; }
.hcard__badge { display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--patina); background: var(--patina-soft); border-radius: 999px; padding: 2px 8px; margin: 8px 0 4px; }
.hcard__badge--inline { margin: 0 0 0 6px; vertical-align: middle; color: var(--ink-soft); background: var(--line); }
.serien-gruppe__titel { font-size: 16px; margin: 22px 0 10px; }
.serien-gruppe__titel span { font-size: 13px; font-weight: 400; color: var(--ink-soft); }
@media (max-width: 799px) {
  .hub-aufbau { grid-template-columns: minmax(0, 1fr); }
  .hub-aufbau__rows > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ============================================================
   VIDEOS / YOUTUBE-SHORTS (29.09.2026)
   Karten (Vorschaubild liegt bei uns), Abspielen im Hochkant-Player
   (public/assets/js/video.js). Farben nur aus tokens.css.
   ============================================================ */
.vk, .vk-mini, .vk-chip, .vk__bild--breit { font: inherit; color: inherit; border: 0; padding: 0; background: none; cursor: pointer; text-align: left; }
.vk { display: block; width: 100%; }
.vk__bild { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; max-width: 100%; border-radius: 14px; overflow: hidden; background: var(--ink); }
.vk--kurz .vk__bild { aspect-ratio: 4 / 5; }
.vk__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.vk__img--leer { background: radial-gradient(circle at 50% 42%, var(--patina) 0 24%, transparent 25%), linear-gradient(165deg, var(--patina), var(--ink)); }
.vk__schatten { position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,16,14,.85) 0%, rgba(12,16,14,.08) 55%, rgba(12,16,14,0) 100%); }
.vk__play { position: absolute; top: 50%; left: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(255,255,255,.94); display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.25); transition: transform .15s; }
.vk__play svg { width: 20px; height: 20px; margin-left: 3px; fill: var(--ember); }
.vk:hover .vk__play, .vk-mini:hover .vk__play, .vk__bild--breit:hover .vk__play { transform: scale(1.06); }
.vk__meta { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 4px; color: #fff; }
.vk__titel { font: 600 15px/1.25 var(--font-head); text-wrap: balance; }
.vk__zeit, .vk__dauer { font: 500 11.5px/1 var(--font-body); font-variant-numeric: tabular-nums; color: rgba(255,255,255,.8); }
.vk__dauer { position: absolute; right: 8px; bottom: 8px; background: rgba(12,16,14,.7); color: #fff; border-radius: var(--radius-pill); padding: 3px 7px; }
.vk:focus-visible, .vk-mini:focus-visible, .vk-chip:focus-visible, .vk__bild--breit:focus-visible { outline: 2px solid var(--patina); outline-offset: 3px; border-radius: 14px; }
.vk-hinweis { font-size: 12px; line-height: 1.45; color: var(--ink-soft); margin: 8px 0 0; }

/* Handy-Zeile */
.vk-mini { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; background: var(--card); border-radius: 14px; padding: 10px; box-shadow: var(--shadow-sm); }
.vk__bild--mini { border-radius: 10px; }
.vk__bild--mini .vk__play { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
.vk__bild--mini .vk__play svg { width: 11px; height: 11px; margin-left: 2px; }
.vk-mini__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vk-mini__txt strong { font: 600 14.5px/1.25 var(--font-head); }
.vk-mini__txt span { font-size: 12.5px; color: var(--ink-soft); }

/* Breite Einzelkarte */
.vk-breit { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 24px; align-items: center; background: var(--card); border-radius: var(--radius-card); padding: 18px; box-shadow: var(--shadow-sm); max-width: 760px; }
.vk__bild--breit { display: block; position: relative; }
.vk-breit__txt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vk-breit__txt h3 { margin: 0; font-size: 19px; }
.vk-breit__txt p { margin: 0; color: var(--ink-soft); max-width: 55ch; }
.vk-breit__btn { align-self: flex-start; }

/* Chip im Anleitungsschritt */
.vk-chip { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 13px; font-weight: 500; line-height: 1.2; color: var(--patina); background: var(--patina-soft); border-radius: var(--radius-pill); padding: 7px 12px; }
.vk-chip svg { width: 11px; height: 11px; fill: currentColor; flex: none; }

/* Abschnitt / Reihe */
.video-bereich { display: flex; flex-direction: column; gap: 4px; }
.video-bereich__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.video-reihe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.video-reihe--wischen { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.video-reihe--wischen > * { scroll-snap-align: start; }
.content-layout .video-reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.content-layout .video-reihe--wischen { grid-template-columns: none; grid-auto-columns: calc((100% - 32px) / 3); }
.video-im-text { margin: 22px 0; }

/* Seitenleiste (Desktop) und Zeile nach der Einleitung (Handy) */
.sidebar-box--video .vk-hinweis { margin-top: 2px; }
.video-mobil { display: none; margin: 4px 0 22px; }
@media (max-width: 980px) {
  .sidebar-box--video { display: none; }
  .video-mobil { display: block; }
}
@media (max-width: 720px) {
  .video-reihe, .content-layout .video-reihe { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 44%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .video-reihe > * { scroll-snap-align: start; }
  .vk-breit { grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding: 12px; }
  .vk-breit__txt h3 { font-size: 16px; }
  .vk-breit .vk-hinweis { display: none; }
}

/* Player */
.vp { position: fixed; inset: 0; z-index: 1000; background: rgba(12,16,14,.82); display: grid; place-items: center; padding: 20px; }
.vp[hidden] { display: none; }
.vp-offen, .vp-offen body { overflow: hidden; }
.vp__box { width: min(400px, 100%, calc((100vh - 150px) * 9 / 16)); display: flex; flex-direction: column; gap: 10px; }
.vp__kopf, .vp__fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #fff; }
.vp__zaehler { font-size: 12.5px; color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; }
.vp__zu { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--card); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.vp__buehne { position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: #000; }
.vp__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vp__titel { margin: 0; flex: 1; text-align: center; font: 600 14px/1.3 var(--font-head); }
.vp__nav { border: 0; background: rgba(255,255,255,.14); color: #fff; border-radius: var(--radius-pill); padding: 8px 12px; font: 500 13px/1 var(--font-body); cursor: pointer; white-space: nowrap; }
.vp__nav[hidden] { visibility: hidden; display: inline-block; }
.vp__hinweis { position: absolute; inset: 0; display: flex; align-items: center; }
.vp__hinweis-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.vp__hinweis-inhalt { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 22px; color: #fff; font-size: 14px; line-height: 1.5; }
.vp__hinweis-inhalt strong { font: 600 17px/1.25 var(--font-head); }
.vp__hinweis-inhalt p { margin: 0; color: rgba(255,255,255,.85); }
.vp__hinweis-inhalt a { color: #fff; }
.vp__abspielen { background: var(--ember); color: #fff; border: 0; border-radius: var(--radius-control); padding: 12px 14px; font: 600 14.5px/1.2 var(--font-body); cursor: pointer; }
.vp__immer { display: flex; gap: 8px; align-items: center; font-size: 13px; color: rgba(255,255,255,.8); cursor: pointer; }
.vp button:focus-visible, .vp a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 720px) {
  .vp { padding: 0; background: #000; }
  .vp__box { width: 100%; height: 100%; gap: 0; position: relative; }
  .vp__buehne { flex: 1; aspect-ratio: auto; border-radius: 0; }
  .vp__kopf { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 10px); left: 12px; right: 12px; z-index: 2; }
  .vp__fuss { padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 12px); background: #000; }
}
@media (prefers-reduced-motion: reduce) { .vk__play { transition: none; } }
/* Von YouTube geholte Shorts-Bilder sind 16:9 mit dem 9:16-Bild in der Mitte
   (Anteil 9/16 ÷ 16/9 = 31,64 % der Breite). Auf diesen Streifen zoomen. */
.vk__img--quer { inset: auto; left: 50%; top: 50%; width: 324%; height: auto; max-width: none; object-fit: fill; transform: translate(-50%, -50%); }
.vp__hinweis-bild--quer { inset: auto; left: 50%; top: 50%; width: 324%; height: auto; max-width: none; object-fit: fill; transform: translate(-50%, -50%); }
.vk-breit__btn { font: 500 14px/1.2 var(--font-body); color: var(--ink); cursor: pointer; }

/* Empfehlungskarte richtet sich nach IHRER Breite, nicht nach dem Fenster
   (29.09.2026): im Artikel neben der Seitenleiste ist sie schmaler als auf
   den Hubs. Vorher blieben für die Werte im Aufbau-Block ~36 px übrig
   („unbeschicht…“ abgeschnitten). */
.rc { container: rc / inline-size; }
.rc__head { container: rchead / inline-size; }
@container rc (max-width: 700px) {
  .rc__top { grid-template-columns: minmax(0, 1fr); }
  .rc__img { min-height: 0; aspect-ratio: 16 / 9; }
}
@container rchead (max-width: 600px) {
  .rc__aufbau { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@container rchead (max-width: 420px) {
  .rc__aufbau-rows > div { grid-template-columns: minmax(0, 1fr); gap: 1px; }
}
.rc__aufbau-rows dd, .rc__facts dd { overflow-wrap: break-word; hyphens: auto; }
.vk__titel { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ============================================================
   EINSTIEGSSEITEN: Startseite und /pfanne-kaufen (29.09.2026)
   Präfix ek-. Mockups „Startseite Pfannenkompass Entwurf“ und
   „Pfanne-kaufen-Seite Entwurf“.
   ============================================================ */
.ek-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 18px 40px; align-items: center; padding: 34px 0 20px; }
.ek-hero__text { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ek-hero__text h1 { margin: 0; text-wrap: balance; }
.ek-hero__text .lede { margin: 0; max-width: 52ch; }
.ek-hero__cta { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.ek-hero__cta span { font-size: 13.5px; color: var(--ink-soft); }
.ek-eyebrow { font: 600 12px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--patina); }
.ek-entries { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ek-entry { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 14px; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink); border: 1px solid transparent; transition: border-color .15s, transform .15s; }
.ek-entry:hover { border-color: var(--line); transform: translateX(2px); }
.ek-entry__icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--patina-soft); color: var(--patina); }
.ek-entry__icon svg { width: 18px; height: 18px; }
.ek-entry--main { background: var(--ember-soft); }
.ek-entry--main .ek-entry__icon { background: var(--ember); color: #fff; }
.ek-entry__txt { display: flex; flex-direction: column; min-width: 0; }
.ek-entry__txt strong { font: 600 15.5px/1.25 var(--font-head); }
.ek-entry__txt span { font-size: 13px; color: var(--ink-soft); line-height: 1.4; }
.ek-entry__pfeil { font-size: 18px; color: var(--ink-soft); }
.ek-entry--main .ek-entry__pfeil { color: var(--ember); }
.ek-jump, .ek-stats { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 20px; border-top: 1px solid var(--line); padding-top: 12px; font-size: 14px; color: var(--ink-soft); }
.ek-jump a { color: inherit; text-decoration: none; }
.ek-jump a:hover { color: var(--ink); }
.ek-stats b { font: 700 18px/1 var(--font-head); color: var(--ink); margin-right: 5px; font-variant-numeric: tabular-nums; }

.ek-section { display: flex; flex-direction: column; gap: 16px; }
.ek-section h2 { margin: 0; }
.ek-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; }
.ek-sub { margin: 4px 0 0; color: var(--ink-soft); max-width: 62ch; }
.ek-quick { display: grid; gap: 10px; }
.ek-quick__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ek-quick__label { font-weight: 600; font-size: 14px; min-width: 150px; }
.ek-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ek-chip { display: inline-flex; align-items: center; padding: 7px 13px; border-radius: var(--radius-pill); background: var(--card); box-shadow: var(--shadow-sm); font-size: 14px; color: var(--ink); text-decoration: none; }
.ek-chip:hover { background: var(--patina-soft); }
.ek-brand { padding: 11px 16px; border-radius: var(--radius-card); background: var(--card); box-shadow: var(--shadow-sm); font: 600 15px/1 var(--font-head); color: var(--ink); text-decoration: none; }
.ek-brand:hover { box-shadow: var(--shadow-md); }

/* Reiter: ohne JavaScript stehen alle Gruppen untereinander */
.ek-tabs__list { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); }
.ek-tab { border: 0; background: none; font: 500 15px/1 var(--font-body); color: var(--ink-soft); padding: 12px 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ek-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.ek-tab span { font-size: 12px; margin-left: 5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ek-panel { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; }
.ek-panel + .ek-panel { margin-top: 10px; }
.ek-tabs--aktiv .ek-panel + .ek-panel { margin-top: 0; }
.ek-tabs--aktiv .ek-panel__titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ek-panel__titel { margin: 0; font-size: 17px; }
.ek-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ek-guide { display: flex; flex-direction: column; gap: 5px; padding: 15px 17px; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; }
.ek-guide:hover { box-shadow: var(--shadow-md); }
.ek-guide strong { font: 600 16px/1.3 var(--font-head); }
.ek-guide span { font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; }
.ek-guide .ek-guide__star { align-self: flex-start; font: 600 11px/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--ember); background: var(--ember-soft); border-radius: var(--radius-pill); padding: 4px 8px; }
.ek-guide .ek-guide__tag { font: 600 12px/1.2 var(--font-body); color: var(--patina); }
.ek-panel__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 13.5px; color: var(--ink-soft); }
.ek-trio { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.ek-trio h3 { margin: 0; }
.ek-trio__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.ek-check { list-style: none; margin: 0; padding: 18px 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); }
.ek-check li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ek-check__box { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--patina); margin-top: 2px; }
.ek-check strong { display: block; font-weight: 600; }
.ek-check span { font-size: 13.5px; color: var(--ink-soft); }

.ek-table { overflow-x: auto; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); }
.ek-table table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 760px; }
.ek-table th, .ek-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ek-table thead th { font: 600 11.5px/1.2 var(--font-body); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.ek-table tbody th a { font-weight: 600; color: var(--ink); text-decoration: none; }
.ek-table tbody th a:hover { text-decoration: underline; }
.ek-table tbody tr:last-child > * { border-bottom: 0; }
.ek-dots { display: inline-flex; gap: 3px; vertical-align: middle; }
.ek-dots i { width: 10px; height: 6px; border-radius: 3px; background: var(--line); }
.ek-dots i.an { background: var(--ink); }
.ek-ja { color: var(--patina); font-weight: 600; }
.ek-nein { color: var(--ink-soft); }

.ek-browse { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; }
.ek-box { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); min-width: 0; }
.ek-box h3 { margin: 0; }
.ek-matlist { list-style: none; margin: 0; padding: 0; }
.ek-matlist a { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; padding: 6px 0; color: var(--ink); text-decoration: none; font-size: 14px; }
.ek-matlist a:hover strong { text-decoration: underline; }
.ek-matlist span { color: var(--ink-soft); }

.ek-faq { display: grid; gap: 10px; max-width: 820px; }
.ek-faq details { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 2px 20px; }
.ek-faq summary { cursor: pointer; font-weight: 600; padding: 13px 0; }
.ek-faq__a { padding: 0 0 14px; color: var(--ink-soft); max-width: 70ch; }

.ek-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.ek-more a { display: flex; flex-direction: column; gap: 4px; padding: 15px 17px; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; }
.ek-more strong { font: 600 16px/1.3 var(--font-head); }
.ek-more span { font-size: 13.5px; color: var(--ink-soft); }

.ek-tab:focus-visible, .ek-chip:focus-visible, .ek-entry:focus-visible, .ek-guide:focus-visible, .ek-brand:focus-visible, .ek-more a:focus-visible, .ek-faq summary:focus-visible { outline: 2px solid var(--patina); outline-offset: 2px; }

@media (max-width: 900px) {
  .ek-hero { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 22px 0 16px; }
  .ek-entry__txt span { display: none; }
  .ek-jump { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; }
  .ek-guides, .ek-trio__row, .ek-browse { grid-template-columns: minmax(0, 1fr); }
  .ek-check { grid-template-columns: minmax(0, 1fr); }
  .ek-quick__label { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .ek-entry { transition: none; } }
.ek-panel[hidden], .ek-tabs__list[hidden] { display: none; }
/* Startseite */
.ek-mats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.ek-mat { display: flex; flex-direction: column; gap: 5px; min-height: 116px; padding: 14px 16px; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; }
.ek-mat:hover { box-shadow: var(--shadow-md); }
.ek-mat strong { font: 600 16px/1.25 var(--font-head); }
.ek-mat__kurz { font-size: 13px; color: var(--ink-soft); line-height: 1.4; }
.ek-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.ek-tag { font: 600 10.5px/1 var(--font-body); padding: 4px 7px; border-radius: var(--radius-pill); background: var(--bg); color: var(--ink-soft); }
.ek-tag--ok { background: var(--patina-soft); color: var(--patina); }
.ek-mix { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ek-tile { display: flex; flex-direction: column; overflow: hidden; padding: 0; border: 0; text-align: left; font: inherit; cursor: pointer; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; }
.ek-tile:hover { box-shadow: var(--shadow-md); }
.ek-tile__img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--line); }
.ek-tile__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ek-tile__img--video { background: linear-gradient(165deg, var(--patina), var(--ink)); }
.ek-tile__img--video img.ek-tile__img-quer { position: absolute; left: 50%; top: 50%; width: 180%; height: auto; max-width: none; object-fit: fill; transform: translate(-50%, -50%); }
.ek-tile__body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 16px; }
.ek-tile__typ { font: 600 11px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--patina); }
.ek-tile strong { font: 600 15.5px/1.3 var(--font-head); }
.ek-tile:focus-visible, .ek-mat:focus-visible, .ek-myth:focus-visible { outline: 2px solid var(--patina); outline-offset: 2px; }
.ek-myths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ek-myth { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 16px 18px; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; }
.ek-myth:hover { box-shadow: var(--shadow-md); }
.ek-myth__q { width: 34px; height: 34px; border-radius: 50%; background: var(--ember-soft); color: var(--ember); display: grid; place-items: center; font: 700 16px/1 var(--font-head); }
.ek-myth strong { display: block; font: 600 16px/1.3 var(--font-head); }
.ek-myth__urteil { display: inline-block; margin: 5px 0 3px; font: 600 11.5px/1 var(--font-body); color: var(--patina); background: var(--patina-soft); border-radius: var(--radius-pill); padding: 4px 8px; }
.ek-myth__teaser { display: block; font-size: 13.5px; color: var(--ink-soft); }
.ek-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ek-two .ek-head h3 { margin: 0; }
.ek-list { list-style: none; margin: 0; padding: 0; }
.ek-list a { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 14.5px; }
.ek-list li:last-child a { border-bottom: 0; }
.ek-list a:hover span { text-decoration: underline; }
.ek-list small { color: var(--ink-soft); white-space: nowrap; }
.ek-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 22px 24px; background: var(--patina-soft); border-radius: var(--radius-card); }
.ek-trust strong { display: block; font: 600 15px/1.3 var(--font-head); margin-bottom: 3px; }
.ek-trust p { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
@media (max-width: 900px) {
  .ek-mats, .ek-mix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ek-myths, .ek-two, .ek-trust { grid-template-columns: minmax(0, 1fr); }
}

/* Einstiegsseiten, Feinschliff (29.09.2026): Titelbild zurück, bündige
   Oberkanten, ruhigere Unterzeile, Bildkarten statt reiner Textkästen. */
.ek-hero--bild { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); align-items: stretch; gap: 20px 44px; padding: 26px 0 8px; }
.ek-hero--bild .ek-hero__text { justify-content: center; gap: 16px; }
.ek-lede { margin: 0; font-size: 17px; line-height: 1.55; font-weight: 400; color: var(--ink-soft); max-width: 48ch; }
.ek-hero--bild .ek-entries { margin-top: 4px; max-width: 500px; }
.ek-hero__bild { position: relative; display: block; min-height: 400px; border-radius: var(--radius-hero); overflow: hidden; background: var(--line); }
.ek-hero__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ek-stats--unten { margin-top: 6px; }

.ek-schnell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 6px; }
.ek-schnell__label, .ek-zeile__label { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); margin-right: 6px; }
.ek-schnell__trenner { width: 1px; height: 20px; background: var(--line); margin: 0 6px; }
.ek-chip--klein { padding: 5px 11px; font-size: 13.5px; box-shadow: none; border: 1px solid var(--line); background: var(--card); }
.ek-chip--herd { border-color: var(--patina-soft); }
.ek-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ek-zeile .text-link { margin-left: 8px; font-size: 14px; }

.ek-guide--bild { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; }
.ek-guide__bild { width: 72px; height: 72px; border-radius: 12px; overflow: hidden; background: var(--line); }
.ek-guide__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ek-guide__txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ek-guide__txt strong { font: 600 16px/1.3 var(--font-head); }
.ek-guide__teaser { font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; }

/* Material- und Formkarten mit Bild */
.ek-mat { padding: 0; overflow: hidden; min-height: 0; gap: 0; }
.ek-mat__bild, .ek-form__bild { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--bg); color: var(--ink-soft); overflow: hidden; }
.ek-mat__bild img, .ek-form__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ek-mat__bild--leer svg, .ek-form__bild--leer svg { width: 64px; height: 46px; opacity: .45; }
.ek-mat__bild .ki-img__note, .ek-form__bild .ki-img__note { font-size: 9.5px; left: 6px; bottom: 6px; }
.ek-mat__txt { display: flex; flex-direction: column; gap: 4px; padding: 11px 13px 13px; flex: 1; }
.ek-mat__txt strong { font: 600 15.5px/1.25 var(--font-head); }
.ek-forms { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.ek-form { display: flex; flex-direction: column; overflow: hidden; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; }
.ek-form:hover { box-shadow: var(--shadow-md); }
.ek-form strong { padding: 10px 13px 12px; font: 600 15px/1.25 var(--font-head); }
.ek-form:focus-visible { outline: 2px solid var(--patina); outline-offset: 2px; }

/* Rezepte/Pflege ohne Kasten */
.ek-two { gap: 40px; }
.ek-spalte { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ek-spalte .ek-head { padding-bottom: 6px; border-bottom: 2px solid var(--ink); }

@media (max-width: 900px) {
  .ek-hero--bild { grid-template-columns: minmax(0, 1fr); padding-top: 18px; }
  .ek-hero__bild { display: none; }
  .ek-hero--bild .ek-entries { max-width: none; }
  .ek-forms { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .ek-forms > * { scroll-snap-align: start; }
  .ek-two { gap: 28px; }
}
.ek-guide__bild { position: relative; display: grid; place-items: center; color: var(--patina); }
.ek-guide__bild .ki-img__note { display: none; }
.ek-guide__bild--leer, .ek-mat__bild--leer, .ek-form__bild--leer { background: var(--patina-soft); color: var(--patina); }
.ek-guide__bild--leer svg { width: 38px; height: 28px; opacity: .5; }

/* =====================================================================
   ÜBERSICHTSSEITEN (29.09.2026): /rezepte, /marken, /wissen, /formen,
   /aufbau – Canvas „Übersichtsseiten Entwurf“. Präfix ue-.
   ===================================================================== */
.ue-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px 48px; padding: 30px 0 6px; }
.ue-kopf__text { display: flex; flex-direction: column; gap: 12px; max-width: 680px; min-width: 0; }
.ue-kopf h1 { margin: 0; text-wrap: balance; }
.ue-zahlen { display: flex; gap: 28px; }
.ue-zahl strong { display: block; font: 600 30px/1.1 var(--font-head); }
.ue-zahl span { font-size: 13px; color: var(--ink-soft); }
.ue-sprung { display: flex; flex-wrap: wrap; gap: 8px; }

/* Filterkasten */
.ue-filter { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; padding: 18px 22px; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); }
.ue-frow { display: flex; align-items: flex-start; gap: 8px 12px; min-width: 0; }
.ue-frow__label { flex-shrink: 0; width: 112px; font-size: 13px; color: var(--ink-soft); padding-top: 12px; }
.ue-frow__chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ue-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; box-sizing: border-box; padding: 6px 13px; border: 1px solid transparent; border-radius: var(--radius-pill); background: var(--bg); font-size: 14px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.ue-chip:hover { border-color: var(--line); }
.ue-chip small { font-size: 12px; color: var(--ink-soft); }
.ue-chip.is-on { background: var(--ink); color: var(--card); }
.ue-chip.is-on small { color: #cfd6d3; }
.ue-chip.is-off { opacity: .45; }
.ue-chip--mini { min-height: 32px; padding: 4px 11px; font-size: 13.5px; }
.ue-chip:focus-visible, .ue-karte:focus-visible, .ue-mehr summary:focus-visible { outline: 2px solid var(--patina); outline-offset: 2px; }
.ue-mehr { border-top: 1px solid var(--line); padding-top: 12px; }
.ue-mehr summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; box-sizing: border-box; padding: 8px 16px; border-radius: var(--radius-pill); background: var(--ink); color: var(--card); font-size: 14px; font-weight: 500; list-style: none; cursor: pointer; }
.ue-mehr summary::-webkit-details-marker { display: none; }
.ue-mehr[open] summary { background: var(--patina); }
.ue-mehr__was { font-weight: 400; opacity: .8; }
.ue-mehr__inhalt { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 22px 36px; padding-top: 16px; }
.ue-mehr__spalte { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ue-ftitel { margin: 0 0 6px; font: 600 13px/1.3 var(--font-body); color: var(--ink); }
.ue-gruppe { display: flex; align-items: baseline; gap: 6px 12px; }
.ue-gruppe__label { flex-shrink: 0; width: 150px; font-size: 13px; color: var(--ink-soft); }
.ue-ergebnis { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 28px 0 14px; }
.ue-ergebnis h2 { margin: 0 8px 0 0; font-size: 22px; }
.ue-aktiv { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 12px; border-radius: var(--radius-pill); background: var(--patina-soft); font-size: 13px; }
.ue-aktiv a { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,.08); color: var(--ink); text-decoration: none; }
.ue-reset { font-size: 13.5px; color: var(--patina); }
.ue-leer { max-width: 60ch; color: var(--ink-soft); }

/* Karten-Raster */
.ue-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ue-raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ue-karte { display: flex; flex-direction: column; overflow: hidden; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; }
.ue-karte:hover { box-shadow: var(--shadow-md); }
.ue-karte__kopf { position: relative; display: block; }
.ue-karte__bild { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--line); }
.ue-karte__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ue-karte__bild--leer { display: flex; align-items: center; justify-content: center; background: var(--patina-soft); color: var(--patina); }
.ue-karte__bild--leer svg { width: 64px; height: 46px; opacity: .45; }
.ue-pfanne { position: absolute; left: 10px; top: 10px; max-width: calc(100% - 20px); overflow: hidden; padding: 4px 11px; border-radius: var(--radius-pill); background: rgba(255,255,255,.94); font-size: 12.5px; font-weight: 500; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; box-shadow: var(--shadow-sm); }
.ue-karte__body { display: flex; flex-direction: column; gap: 5px; padding: 14px 18px 18px; }
.ue-karte__body strong { font: 600 17px/1.3 var(--font-head); }
.ue-meta { font-size: 13px; color: var(--ink-soft); }
.ue-teaser { font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.ue-tag { font: 600 11px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--patina); }
.ue-mat { display: inline-flex; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--patina-soft); font-size: 12px; color: var(--patina); }
.ue-mats { display: flex; flex-wrap: wrap; gap: 5px; }

@media (max-width: 1000px) {
  .ue-raster, .ue-raster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ue-mehr__inhalt { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ue-kopf { padding-top: 20px; }
  .ue-zahlen { display: none; }
  .ue-filter { padding: 14px 14px; }
  .ue-frow { flex-direction: column; align-items: stretch; gap: 6px; }
  .ue-frow__label { width: auto; padding-top: 0; }
  .ue-frow > .ue-frow__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px 2px; }
  .ue-frow > .ue-frow__chips::-webkit-scrollbar { display: none; }
  .ue-gruppe { flex-direction: column; gap: 6px; }
  .ue-gruppe__label { width: auto; }
  .ue-mehr__was { display: none; }
  .ue-raster, .ue-raster--4 { grid-template-columns: 1fr; }
}
.ue-sort { display: inline-flex; gap: 4px; margin-left: auto; padding: 4px; border-radius: var(--radius-pill); background: var(--card); box-shadow: var(--shadow-sm); }
.ue-sort a { padding: 6px 14px; border-radius: var(--radius-pill); font-size: 13px; color: var(--ink-soft); text-decoration: none; }
.ue-sort a.is-on { background: var(--ink); color: var(--card); }
.ue-az { display: flex; flex-wrap: wrap; gap: 2px; margin: -4px 0 14px; }
.ue-az a, .ue-az span { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; font-size: 14px; font-weight: 500; text-decoration: none; }
.ue-az a { color: var(--ink); }
.ue-az a:hover { background: var(--patina-soft); }
.ue-az span { color: #C4C9C6; }
.ue-marke { gap: 10px; padding: 20px 22px; scroll-margin-top: 90px; }
.ue-marke__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.ue-marke__kopf strong { font: 600 20px/1.25 var(--font-head); }
.ue-marke__fuss { display: flex; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-soft); }
.ue-marke__pfeil { color: var(--patina); }
.ue-hinweis { display: flex; gap: 12px 40px; align-items: center; margin: 48px 0 8px; padding: 26px 32px; border-radius: var(--radius-hero); background: var(--patina-soft); }
.ue-hinweis h2 { flex-shrink: 0; margin: 0; font-size: 19px; }
.ue-hinweis p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); }
@media (max-width: 640px) {
  .ue-sort { margin-left: 0; }
  .ue-hinweis { flex-direction: column; align-items: flex-start; padding: 22px; }
}
main .wrap section.ue-abschnitt { display: flex; flex-direction: column; gap: 16px; padding: 44px 0 0; }
.ue-abschnitt__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.ue-abschnitt__kopf h2 { margin: 0; font-size: 26px; }
.ue-abschnitt__kopf > span { font-size: 15px; color: var(--ink-soft); }
.ue-abschnitt__kopf--linie { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.ue-abschnitt__kopf--linie h2 { font-size: 23px; }
.ue-alle { margin-left: auto; font-size: 14px; color: var(--patina); }
.ue-text { gap: 8px; padding: 18px 20px 20px; }
.ue-text strong { font: 600 16px/1.35 var(--font-head); }
.ue-text__mat { align-self: flex-start; margin-top: auto; }
.ue-urteil { align-self: flex-start; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; background: var(--patina-soft); color: #2E4A4D; }
.ue-urteil--nein { background: var(--ember-soft, #F4E3D8); color: #8A2F08; }
.ue-urteil--ja { background: #E2EEDF; color: #2F5A27; }
.ue-wsuche { gap: 14px; }
.ue-wsuche__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ue-suche { display: flex; align-items: center; gap: 10px; flex: 1 1 280px; max-width: 420px; min-height: 42px; box-sizing: border-box; padding: 0 16px; border-radius: var(--radius-pill); background: var(--bg); color: var(--ink-soft); }
.ue-suche input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: inherit; font-size: 15px; color: var(--ink); }
.ue-suche:focus-within { outline: 2px solid var(--patina); outline-offset: 1px; }
.ue-select { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-soft); }
.ue-select select { min-height: 40px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--card); font: inherit; font-size: 14px; color: var(--ink); }
.ue-knopf { min-height: 42px; padding: 8px 20px; border: none; border-radius: var(--radius-pill); background: var(--ink); color: var(--card); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
@media (max-width: 640px) {
  .ue-suche { max-width: none; flex-basis: 100%; }
  .ue-alle { margin-left: 0; flex-basis: 100%; }
}
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ue-form__bild { aspect-ratio: 4 / 3; }
.ue-form .ue-karte__body { flex: 1; gap: 8px; }
.ue-form__titel { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ue-form__titel h3 { margin: 0; font-size: 19px; }
.ue-form__titel h3 a { color: var(--ink); text-decoration: none; }
.ue-form__titel h3 a:hover { color: var(--patina); }
.ue-form__zeile { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.ue-form__zeile span { color: var(--ink-soft); }
.ue-form__typisch { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.ue-form__links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: auto; padding-top: 6px; font-size: 14px; }
.ue-form__links a { color: var(--patina); }
.ue-profil { flex-shrink: 0; width: 44px; box-sizing: border-box; border: 2.5px solid var(--patina); border-top: none; }
.ue-profil--flach { height: 5px; border-radius: 0 0 3px 3px; }
.ue-profil--niedrig { height: 10px; border-radius: 0 0 5px 5px; }
.ue-profil--hoch { height: 18px; border-radius: 0 0 4px 4px; }
.ue-profil--bauchig { height: 16px; border-radius: 0 0 14px 14px; }
.ue-profil--wok { height: 18px; border-radius: 0 0 22px 22px; }
.ue-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 32px; margin: 56px 0 8px; padding: 32px 40px; border-radius: var(--radius-hero); background: var(--patina-soft); }
.ue-cta h2 { margin: 0 0 6px; font-size: 24px; }
.ue-cta p { margin: 0; font-size: 16px; color: var(--ink); max-width: 60ch; }
@media (max-width: 640px) { .ue-cta { padding: 24px; } }
.ue-form__bild--leer { display: flex; align-items: center; justify-content: center; background: var(--patina-soft); color: var(--patina); }
.ue-form__bild--leer svg { width: 64px; height: 46px; opacity: .45; }
/* /aufbau */
.ue-aufbau-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 56px; align-items: center; padding: 30px 0 8px; }
.ue-schnitt { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 30px 32px 24px; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); }
.ue-schnitt figcaption { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.ue-schnitt__inhalt { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; }
.ue-schnitt__bild { flex: 0 0 auto; width: 260px; height: 150px; }
.ue-schnitt__aussen { height: 100%; box-sizing: border-box; padding: 0 8px 8px; border-radius: 0 0 62px 62px; background: #B8C0BD; }
.ue-schnitt__kern { height: 100%; box-sizing: border-box; padding: 0 14px 14px; border-radius: 0 0 55px 55px; background: #D8C9A8; }
.ue-schnitt__flaeche { height: 100%; box-sizing: border-box; padding: 0 5px 5px; border-radius: 0 0 42px 42px; background: var(--patina); }
.ue-schnitt__luft { height: 100%; border-radius: 0 0 38px 38px; background: var(--card); }
.ue-schnitt__legende { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ue-schnitt__legende li { display: flex; align-items: center; gap: 10px; }
.ue-schnitt__legende strong { display: block; font-size: 15px; }
.ue-schnitt__legende li > span:last-child { font-size: 13px; color: var(--ink-soft); line-height: 1.35; }
.ue-schnitt__hinweis { margin: 0; font-size: 12.5px; color: var(--ink-soft); }
.ue-nr { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--card); font: 600 15px/1 var(--font-head); }
.ue-nr--1 { background: var(--patina); }
.ue-nr--2 { background: #8F8470; }
.ue-einfuehrung { max-width: 72ch; margin-top: 28px; font-size: 16px; line-height: 1.7; color: var(--ink); }
.ue-ebenen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
main .wrap section.ue-ebene { display: flex; flex-direction: column; gap: 14px; padding: 26px; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); scroll-margin-top: 90px; }
.ue-ebene__kopf { display: flex; align-items: center; gap: 12px; }
.ue-ebene__kopf h2 { margin: 0; font-size: 23px; }
.ue-ebene > p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); }
.ue-ebene__punkte { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--ink-soft); }
.ue-ebene__punkte strong { color: var(--ink); font-weight: 600; }
.ue-ebene .ue-alle { margin: auto 0 0; }
.ue-tabelle-wrap { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 6px 26px; }
.ue-tabelle { width: 100%; border-collapse: collapse; font-size: 15px; }
.ue-tabelle th, .ue-tabelle td { padding: 16px 12px 16px 0; text-align: left; border-bottom: 1px solid var(--line); }
.ue-tabelle thead th { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.ue-tabelle tbody tr:last-child th, .ue-tabelle tbody tr:last-child td { border-bottom: none; }
.ue-tabelle tbody th { font-weight: 600; }
@media (max-width: 1000px) {
  .ue-aufbau-kopf { grid-template-columns: 1fr; }
  .ue-ebenen { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ue-schnitt { padding: 22px 18px; }
  .ue-schnitt__bild { width: 220px; height: 128px; }
  .ue-tabelle-wrap { padding: 4px 18px; }
  .ue-tabelle thead { display: none; }
  .ue-tabelle tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .ue-tabelle tbody tr:last-child { border-bottom: none; }
  .ue-tabelle th, .ue-tabelle td { display: block; padding: 2px 0; border: none; }
  .ue-tabelle td::before { content: attr(data-l) ": "; color: var(--ink-soft); }
}

/* Seitenkopf der Übersichtsseiten (ue-kopf.php) */
.ue-seitenkopf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 48px; padding: 28px 0 6px; }
.ue-seitenkopf--bild { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: stretch; }
.ue-seitenkopf__text { display: flex; flex-direction: column; gap: 14px; max-width: 760px; min-width: 0; }
.ue-seitenkopf--bild .ue-seitenkopf__text { max-width: none; padding: 6px 0; }
.ue-seitenkopf h1 { margin: 0; text-wrap: balance; }
.ue-seitenkopf .ek-lede { max-width: 62ch; }
.ue-seitenkopf__bild { position: relative; display: block; min-height: 280px; overflow: hidden; border-radius: var(--radius-hero); background: var(--line); }
.ue-seitenkopf__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ue-weiter { max-width: 62ch; margin-top: -4px; }
.ue-weiter summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: 14.5px; font-weight: 500; color: var(--patina); cursor: pointer; list-style: none; }
.ue-weiter summary::-webkit-details-marker { display: none; }
.ue-weiter summary::after { content: "▾"; font-size: 12px; transition: transform .15s ease; }
.ue-weiter[open] summary::after { transform: rotate(180deg); }
.ue-weiter[open] summary { margin-bottom: 6px; }
.ue-weiter p { margin: 0 0 10px; font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
.ue-kennzahlen { display: flex; flex-wrap: wrap; gap: 6px 22px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-soft); }
.ue-kennzahlen strong { font: 600 18px/1 var(--font-head); color: var(--ink); }
@media (max-width: 900px) {
  .ue-seitenkopf--bild { grid-template-columns: minmax(0, 1fr); }
  .ue-seitenkopf__bild { order: -1; min-height: 0; aspect-ratio: 16 / 8; border-radius: var(--radius-card); }
}
/* /aufbau: Schnitt als Band über den drei Spalten */
.ue-band { margin-top: 40px; padding: 26px 26px 0; background: var(--card); border-radius: var(--radius-card) var(--radius-card) 0 0; box-shadow: var(--shadow-sm); }
.ue-band__schnitt { height: 118px; }
.ue-band .ue-schnitt__aussen { border-radius: 0 0 64px 64px; }
.ue-band .ue-schnitt__kern { border-radius: 0 0 57px 57px; }
.ue-band .ue-schnitt__flaeche { border-radius: 0 0 44px 44px; }
.ue-band .ue-schnitt__luft { display: flex; align-items: center; justify-content: center; border-radius: 0 0 40px 40px; }
.ue-band .ue-schnitt__luft span { font-size: 13px; color: var(--ink-soft); }
.ue-band__marken { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 0 0 18px; }
.ue-band__marke { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); }
.ue-band__marke i { display: block; width: 2px; height: 22px; background: var(--line); }
.ue-band__marke--1 i { background: var(--patina); }
.ue-band__marke--2 i { background: #D8C9A8; }
.ue-band + .ue-ebenen { margin-top: 0; }
.ue-band + .ue-ebenen .ue-ebene { border-top-left-radius: 0; border-top-right-radius: 0; }
@media (max-width: 1000px) {
  .ue-band { border-radius: var(--radius-card); margin-bottom: 20px; padding-bottom: 20px; }
  .ue-band__marken { display: none; }
  .ue-band + .ue-ebenen .ue-ebene { border-radius: var(--radius-card); }
}
@media (max-width: 640px) { .ue-band__schnitt { height: 84px; } }
/* Ebenen-Seiten /aufbau/{facet} */
.ue-abstand { margin-top: 36px; }
.ue-raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ue-ebenenleiste { display: flex; flex-wrap: wrap; gap: 8px; }
.ue-ebenenleiste a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 14px 4px 5px; border-radius: var(--radius-pill); background: var(--card); box-shadow: var(--shadow-sm); font-size: 14px; color: var(--ink); text-decoration: none; }
.ue-ebenenleiste a .ue-nr { width: 28px; height: 28px; font-size: 13px; }
.ue-ebenenleiste a.is-on { background: var(--ink); color: var(--card); }
.ue-ebenenleiste a:not(.is-on) .ue-nr { opacity: .75; }
.ue-weiterlink { margin-top: auto; padding-top: 6px; font-size: 14px; color: var(--patina); }
.ue-flaeche .ue-karte__body { flex: 1; gap: 8px; }
.ue-flaeche__titel { margin: 0; font-size: 19px; }
.ue-flaeche__titel a { color: var(--ink); text-decoration: none; }
.ue-flaeche__titel a:hover { color: var(--patina); }
.ue-flaeche .ue-teaser { margin: 0; }
.ue-werte { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
.ue-werte div { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ue-werte dt { font-size: 13px; color: var(--ink-soft); }
.ue-werte dd { margin: 0; }
.ue-konstr { gap: 10px; padding: 24px; }
.ue-konstr strong { font-size: 20px; }
.ue-konstr__profil { display: block; width: 72px; height: 30px; box-sizing: border-box; margin-bottom: 6px; border-radius: 0 0 10px 10px; }
.ue-konstr__profil--voll { border: 4px solid var(--patina); border-top: none; }
.ue-konstr__profil--kapsel { border: 3px solid var(--patina); border-top: none; border-bottom: 10px solid #D8C9A8; box-shadow: inset 0 -3px 0 var(--patina); }
.ue-konstr__profil--clad { border: 8px solid #D8C9A8; border-top: none; outline: 3px solid var(--patina); outline-offset: -3px; }
@media (max-width: 1000px) { .ue-raster--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ue-raster--3 { grid-template-columns: 1fr; } }
/* Zubehör, Pflege, Glossar, Kaufberatung (Übersichten) */
.ue-symbol { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 4px; border-radius: 14px; background: var(--patina-soft); color: var(--patina); }
.ue-symbol svg { width: 26px; height: 26px; }
.ue-zubehoer strong { font-size: 17px; }
.ue-bedingt { color: #8A5A08; }
.ue-tabelle td.ek-ja, .ue-tabelle td.ek-nein, .ue-tabelle td.ue-bedingt { font-weight: 500; }
.ue-fussnote { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); max-width: 80ch; }
.ue-pflege__kopf { display: flex; align-items: center; gap: 16px; }
.ue-pflege__kopf h2 { margin: 0; font-size: 24px; }
.ue-pflege__kopf span { font-size: 14px; color: var(--ink-soft); }
.ue-pflege__bild { position: relative; display: block; flex-shrink: 0; width: 88px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: var(--line); }
.ue-pflege__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ue-pflege__bild .ki-img__note { display: none; }
.ue-pflege__bild--leer { display: flex; align-items: center; justify-content: center; background: var(--patina-soft); color: var(--patina); }
.ue-pflege__bild--leer svg { width: 42px; height: 30px; opacity: .5; }
.ue-az--kasten { margin: 26px 0 0; padding: 10px 12px; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); position: sticky; top: 8px; z-index: 5; }
.ue-glossar { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
main .wrap section.ue-glossar__gruppe { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 80px; }
.ue-glossar__gruppe h2 { margin: 0; font-size: 32px; color: var(--patina); }
.ue-glossar__gruppe dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; margin: 0; }
.ue-glossar__gruppe dt a { font: 600 16.5px/1.35 var(--font-head); color: var(--ink); text-decoration: none; }
.ue-glossar__gruppe dt a:hover { color: var(--patina); }
.ue-glossar__gruppe dd { margin: 3px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.ue-guides { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .ue-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .ue-guides { grid-template-columns: 1fr; }
  main .wrap section.ue-glossar__gruppe { grid-template-columns: 1fr; gap: 4px; }
  .ue-glossar__gruppe dl { grid-template-columns: 1fr; }
  .ue-az--kasten { position: static; }
  .ue-tabelle--wender td::before { content: attr(data-l) ": "; color: var(--ink-soft); font-weight: 400; }
}
.ue-seitenkopf--bild .ue-seitenkopf__text { justify-content: center; }
/* Kaufberatung: Vergleichstabelle (29.09.2026) */
.kb-wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.kb-wahl__spalte { padding: 16px 18px; border-radius: var(--radius-card); background: var(--patina-soft); }
.kb-wahl__titel { margin: 0 0 8px; font: 600 16px/1.3 var(--font-head); }
.kb-wahl ul { margin: 0; padding-left: 18px; font-size: 14.5px; line-height: 1.55; }
.kb-wahl li + li { margin-top: 4px; }
.kb-vgl-wrap { overflow-x: auto; border-radius: var(--radius-card); background: var(--card); box-shadow: var(--shadow-sm); }
.kb-vgl { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.kb-vgl th, .kb-vgl td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.kb-vgl tbody th { width: 30%; font-size: 13.5px; font-weight: 500; color: var(--ink-soft); }
.kb-vgl thead th { vertical-align: bottom; }
.kb-vgl__bild { position: relative; display: block; width: 100%; max-width: 180px; aspect-ratio: 4 / 3; margin-bottom: 8px; overflow: hidden; border-radius: 12px; background: var(--line); }
.kb-vgl__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kb-vgl__bild .ki-img__note { font-size: 9px; left: 5px; bottom: 5px; padding: 1px 5px; }
.kb-vgl__bild--leer { display: flex; align-items: center; justify-content: center; background: var(--patina-soft); color: var(--patina); }
.kb-vgl__bild--leer svg { width: 48px; height: 34px; opacity: .45; }
.kb-vgl__name { font: 600 16px/1.3 var(--font-head); }
.kb-vgl__kern td { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.kb-vgl td.is-staerker { background: #F2F7F5; box-shadow: inset 3px 0 0 var(--patina); }
.kb-vgl__beide { color: var(--ink); }
.kb-vgl__cta th, .kb-vgl__cta td { border-bottom: none; }
.kb-vgl__quelle { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-soft); }
@media (max-width: 640px) {
  .kb-wahl { grid-template-columns: 1fr; }
  .kb-vgl th, .kb-vgl td { padding: 10px 10px; }
  .kb-vgl tbody th { width: 34%; }
}
@media (max-width: 640px) {
  .kb-vgl { table-layout: fixed; font-size: 13px; }
  .kb-vgl thead th:first-child, .kb-vgl tbody th { width: 28%; }
  .kb-vgl th, .kb-vgl td { padding: 9px 7px; overflow-wrap: anywhere; }
  .kb-vgl__bild { max-width: 100%; border-radius: 8px; }
  .kb-vgl__bild .ki-img__note { display: none; }
  .kb-vgl__name { font-size: 14px; }
  .kb-vgl__kern td { font-size: 12.5px; }
  .kb-vgl .ek-dots { gap: 2px; }
  .kb-vgl .ek-dots i { width: 7px; }
  .kb-vgl .compare-cta { display: inline-block; padding: 8px 10px; font-size: 12.5px; white-space: normal; text-align: center; }
}
@media (max-width: 640px) { .kb-vgl th { overflow-wrap: normal; hyphens: auto; } }
/* Freier Vergleich (01.10.2026, VergleichFrei): 2–4 Spalten, Wahlhilfe je Spalte */
.kb-wahl--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kb-wahl--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kb-vgl--frei thead th { width: auto; }
.kb-vgl--n3, .kb-vgl--n4 { table-layout: fixed; }
.kb-vgl--n3 thead th:first-child, .kb-vgl--n3 tbody th, .kb-vgl--n4 thead th:first-child, .kb-vgl--n4 tbody th { width: 20%; }
.kb-vgl--n3 th, .kb-vgl--n3 td, .kb-vgl--n4 th, .kb-vgl--n4 td { padding-left: 12px; padding-right: 12px; hyphens: auto; }
.kb-vgl--n3 td, .kb-vgl--n4 td { overflow-wrap: break-word; }
.kb-vgl--n3 tbody th, .kb-vgl--n4 tbody th { overflow-wrap: normal; }
.kb-vgl--n3 .compare-cta, .kb-vgl--n4 .compare-cta { white-space: normal; text-align: center; }
.kb-vgl__name--link { display: inline-block; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.kb-vgl__name--link:hover { color: var(--patina); text-decoration-color: currentColor; }
.kb-vgl__pfanne { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
.kb-vgl--frei td.ek-ja, .kb-vgl--frei td.ek-nein { font-weight: 500; }
@media (max-width: 900px) {
  .kb-wahl--3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .kb-wahl--4 { grid-template-columns: 1fr; }
  /* 3–4 Spalten passen nicht auf das Handy: Tabelle wischbar, Kriterium bleibt stehen */
  .kb-vgl--n3, .kb-vgl--n4 { table-layout: auto; }
  .kb-vgl--n3 { min-width: 520px; }
  .kb-vgl--n4 { min-width: 640px; }
  .kb-vgl--n3 thead th:first-child, .kb-vgl--n3 tbody th, .kb-vgl--n4 thead th:first-child, .kb-vgl--n4 tbody th { position: sticky; left: 0; z-index: 1; width: 110px; min-width: 110px; background: var(--card); }
  .kb-vgl--n3 td, .kb-vgl--n4 td, .kb-vgl--n3 thead th, .kb-vgl--n4 thead th { min-width: 120px; }
  .kb-vgl--n3 .kb-vgl__bild, .kb-vgl--n4 .kb-vgl__bild { max-width: 120px; }
}
/* Fakten-Kasten aus Regeln (30.09.2026, AufbauFakten): ohne Zählung, „seltener“ blasser */
.fact-pill.is-plain { cursor: default; }
.fact-pill.is-plain:hover { box-shadow: none; }
.fact-pill.is-selten { background: transparent; border: 1px dashed rgba(0,0,0,.22); color: var(--ink-soft); }
/* Wok: beschichtete Serien gezeigt, aber abgeraten (30.09.2026) */
.serien-gruppe__titel.is-abgeraten { color: var(--ink-soft); }
.serien-gruppe__titel.is-abgeraten span { color: #9a4a1c; }
.section-head h2 .ue-profil { display: inline-block; vertical-align: middle; margin-left: 10px; }

/* ============ Kombinationsseiten /{form}/{material} (30.09.2026) ============ */
.ks { display: flex; flex-direction: column; gap: 48px; padding-bottom: 24px; }
.ks h2 { font-size: 26px; }
.ks h3 { font-size: 17px; }
.ks-entwurf { background: var(--ember-soft); border-radius: var(--radius-control); padding: 10px 16px; margin: 0; font-size: 14px; }
.ks-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.ks-kopf__text { display: flex; flex-direction: column; gap: 16px; }
.ks-kopf h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.1; }
.ks-eyebrow { font-size: 12.5px; font-weight: 600; color: var(--patina); text-transform: uppercase; letter-spacing: .06em; }
.ks-intro p { margin: 0 0 10px; font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.ks-intro p:last-child { margin-bottom: 0; }
.ks-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ks-chip { background: var(--card); border-radius: var(--radius-pill); padding: 5px 12px; font-size: 13px; box-shadow: var(--shadow-sm); }
.ks-chip--info { background: var(--patina-soft); color: var(--patina); font-weight: 500; box-shadow: none; }
a.ks-chip--link { color: var(--ink); text-decoration: none; }
a.ks-chip--link:hover { color: var(--ember); }
.ks-shop { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ks-shop .btn-primary { margin: 0; }
.ks-btn-outline { display: inline-block; border: 1.5px solid var(--ink); color: var(--ink); background: var(--card); border-radius: var(--radius-pill); padding: 12px 22px; font-size: 14px; font-weight: 500; text-decoration: none; text-align: center; }
.ks-btn-outline:hover { border-color: var(--ember); color: var(--ember); }
.ks-klein { font-size: 12.5px; color: var(--ink-soft); margin: 0; }
.ks-kopf__bild { position: relative; aspect-ratio: 4 / 3; background: var(--card); border-radius: var(--radius-hero); box-shadow: var(--shadow-md); overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--core-tone); }
.ks-kopf__bild img { width: 100%; height: 100%; object-fit: cover; }
.ks-kopf__bild svg { width: 46%; }
.ks-abgeraten { background: var(--ember-soft); border-radius: var(--radius-control); padding: 12px 16px; font-size: 14px; line-height: 1.55; }
.ks-raster2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ks-raster2--oben { align-items: start; }
.ks-karte { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 24px 28px; }
.ks-karte h2 { font-size: 22px; margin-bottom: 14px; }
.ks-karte h3 { margin-bottom: 8px; }
.ks-karte p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.ks-karte p:last-child { margin-bottom: 0; }
.ks-karte--info { background: var(--patina-soft); box-shadow: none; }
.ks-karte--info h3 { color: var(--patina); }
.ks-karte--info p { color: var(--ink); }
.ks-karte--eng { padding: 16px 22px; }
.ks-steckbrief { display: grid; grid-template-columns: 140px 1fr; gap: 10px 16px; margin: 0; font-size: 14.5px; }
.ks-steckbrief dt { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; color: var(--ink-soft); text-transform: uppercase; padding-top: 3px; }
.ks-steckbrief dd { margin: 0; }
.ks-meters { border-top: none; padding-top: 0; gap: 10px; font-size: 14.5px; }
.ks-meters dt { font-size: 14.5px; color: var(--ink); }
.ks-meters .hcard__meter i { width: 28px; height: 7px; }
.ks-wissen { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px; }
.ks-wissen ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.ks-abschnitt { display: flex; flex-direction: column; gap: 18px; }
.ks-abschnitt > h2 { font-size: 30px; }
.ks-sub { margin: -8px 0 0; font-size: 14.5px; color: var(--ink-soft); }
.ks-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.ks-tabelle th { text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; color: var(--ink-soft); text-transform: uppercase; padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line); }
.ks-tabelle td { padding: 10px 8px 10px 0; border-bottom: 1px solid var(--line); }
.ks-tabelle tr:last-child td { border-bottom: none; }
.ks-tipps { display: flex; flex-direction: column; gap: 14px; }
.ks-marken { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ks-marke { display: flex; flex-direction: column; gap: 10px; padding: 20px; }
.ks-marke h3 { font-size: 19px; margin: 0; }
.ks-marke .ks-btn-outline { padding: 9px 14px; font-size: 13px; margin-top: auto; }
.ks .hersteller-hinweis { margin: 0; max-width: none; }
.ks-rezepte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ks-rezept { padding: 0; overflow: hidden; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; }
.ks-rezept__bild { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; background: var(--line); color: var(--ink-soft); position: relative; overflow: hidden; }
.ks-rezept__bild img { width: 100%; height: 100%; object-fit: cover; }
.ks-rezept__bild svg { width: 34%; }
.ks-rezept__text { padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.ks-rezept__text span { font-size: 13px; color: var(--ink-soft); }
.ks-rezept:hover strong { color: var(--ember); }
.ks-liste { margin: 0 0 12px; padding-left: 18px; font-size: 14.5px; line-height: 1.8; }
.ks-faq { display: flex; flex-direction: column; gap: 10px; }
.ks-faq summary { cursor: pointer; font-family: var(--font-head); font-weight: 600; font-size: 15.5px; }
.ks-faq details p { margin-top: 10px; }
.ks-finder { background: var(--card); border-radius: var(--radius-hero); box-shadow: var(--shadow-md); padding: 30px 40px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.ks-finder h2, .ks-shopband h2 { font-size: 24px; margin-bottom: 6px; }
.ks-finder p, .ks-shopband p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.ks-shopband { background: var(--ember-soft); border-radius: var(--radius-hero); padding: 30px 40px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.ks-fuss { margin-top: -36px; }
@media (max-width: 900px) {
  .ks { gap: 36px; }
  .ks-kopf { grid-template-columns: 1fr; gap: 20px; }
  .ks-kopf__bild { order: -1; border-radius: var(--radius-card); }
  .ks-raster2 { grid-template-columns: 1fr; }
  .ks-marken { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ks-rezepte { grid-template-columns: 1fr; }
  .ks-finder, .ks-shopband { flex-direction: column; align-items: stretch; padding: 24px; }
  .ks-steckbrief { grid-template-columns: 110px 1fr; }
  .ks-fuss { margin-top: -24px; }
  /* Knöpfe am Handy im Kopf, keine feste Leiste mehr (Punkt 121: Amazon nicht auf jedem Bildschirm) */
  .ks-kopf .ks-shop .btn-primary { width: auto; margin: 0; }
}
/* Verlinkung Kombinationsseiten (30.09.2026) */
.brand-kombis { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 20px; }
.brand-kombis__label { font-size: 13px; color: var(--ink-soft); margin-right: 4px; }
.ue-form__kombis { margin: 8px 0 0; font-size: 13px; line-height: 1.6; }
.ue-form__kombis span { color: var(--ink-soft); }
.ue-form__kombis a { color: var(--patina); }
/* Hub: Worauf beim Kauf achten (30.09.2026) */
.ks-tipps--raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ks-tipps--raster .ks-karte h3 { font-size: 16px; margin: 0 0 6px; }
@media (max-width: 700px) { .ks-tipps--raster { grid-template-columns: 1fr; } }
/* Gruppen-Hub: Formkarte mit getrennten Varianten (PTFE / Keramik), 30.09.2026 */
.hcard--varianten { cursor: default; }
.hcard--varianten:hover { transform: none; }
.hcard__varianten { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 10px; }
.hcard__varianten .hcard__cta { margin-top: 0; }
.hcard__varianten .hcard__cta:hover { color: var(--ember); }
.hcard--varianten:hover { box-shadow: var(--shadow-sm); } .hcard--varianten:hover .hcard__cta { text-decoration: none; } .hcard--varianten a.hcard__cta:hover { text-decoration: underline; }
/* Rezept: Hinweis und Grundwissen als Aufklapper (01.10.2026) */
.rz-auf { margin-top: 28px; border-radius: var(--radius-card); }
.rz-auf > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 16px 48px 16px 22px; position: relative; }
.rz-auf > summary::-webkit-details-marker { display: none; }
.rz-auf > summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); transform: translateY(-70%) rotate(45deg); transition: transform .15s ease; }
.rz-auf[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.rz-auf__titel { font-weight: 600; font-size: 15px; }
.rz-auf__sub { font-size: 13px; color: var(--ink-soft); }
.rz-auf--hinweis { background: var(--patina-soft); border-left: 4px solid var(--patina); border-radius: var(--radius-control); }
.rz-auf__text { font-size: 14px; color: var(--ink-soft); margin: 0; padding: 0 24px 20px; max-width: 65ch; }
.rz-auf--wissen { background: var(--card); border: 1px solid var(--line); margin-top: 0; }
.rz-auf--wissen > summary { padding: 18px 52px 18px 24px; }
.rz-auf__inhalt { padding: 4px 28px 28px; }
.rz-auf__inhalt > p:first-child { margin-top: 0 !important; }

/* Inhalts-Bausteine (01.10.2026, App\Support\ContentBlocks): Bild neben Text,
   Bildreihe, Pfannen-Karten */
.content-block--image img { width: 100%; height: auto; border-radius: var(--radius-card); }
.cb-bild--links, .cb-bild--rechts { width: 44%; max-width: 340px; margin-top: 4px; margin-bottom: 14px; }
.cb-bild--links { float: left; margin-right: 24px; margin-left: 0; }
.cb-bild--rechts { float: right; margin-left: 24px; margin-right: 0; }
.cb-clear { clear: both; }
.content-block--heading { clear: both; }
.cb-reihe { display: grid; gap: 14px; margin: 22px 0; clear: both; }
.cb-reihe--2 { grid-template-columns: repeat(2, 1fr); }
.cb-reihe--3 { grid-template-columns: repeat(3, 1fr); }
.cb-reihe__bild { margin: 0; }
.cb-reihe__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); }
.cb-reihe__bild figcaption { font-size: 13px; color: var(--ink-soft); margin-top: 6px; line-height: 1.4; }
.pk-karten { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 18px 0 28px; clear: both; }
.pk-karte { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); overflow: hidden; display: grid; grid-template-columns: 200px 1fr; }
.pk-karte__bild, .pk-karte__bild .ki-img { height: 100%; }
.pk-karte__bild img { width: 100%; height: 100%; min-height: 150px; object-fit: cover; display: block; }
.pk-karte__inhalt { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 5px; }
.pk-karte__titel { font-size: 16px; margin: 0; line-height: 1.3; }
.pk-karte__pfanne { font-size: 13px; font-weight: 600; color: var(--patina); margin: 0; }
.pk-karte__text { font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin: 0; }
.pk-karte__link { margin-top: auto; padding-top: 4px; font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 480px) {
  .pk-karte { grid-template-columns: 112px 1fr; }
  .pk-karte__bild img { min-height: 0; }
  .pk-karte__bild .ki-img__note { left: 4px; bottom: 4px; font-size: 8.5px; padding: 1px 4px; white-space: normal; max-width: calc(100% - 8px); }
  .pk-karte__inhalt { padding: 12px 14px; }
}
@media (max-width: 640px) {
  .cb-bild--links, .cb-bild--rechts { float: none; width: 100%; max-width: none; margin: 18px 0; }
  .cb-reihe--3 { grid-template-columns: 1fr 1fr; }
}

/* Tabelle (01.10.2026, ContentBlocks 'tabelle'): Karte wie die Vergleichstabelle,
   ohne Punkte und ohne Hervorhebung. Ab 3 Spalten auf dem Handy gestapelt
   (jede Zeile ein Kasten, Spaltenname aus data-label). */
.cb-tabelle { margin: 22px 0 28px; clear: both; }
.cb-tabelle__rahmen { overflow-x: auto; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); }
.cb-tabelle__rahmen:focus-visible { outline: 2px solid var(--patina); outline-offset: 2px; }
.cb-tabelle__tab { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.cb-tabelle__tab th, .cb-tabelle__tab td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cb-tabelle__tab thead th { background: var(--patina-soft); font: 600 13.5px/1.35 var(--font-body); color: var(--ink); vertical-align: bottom; }
.cb-tabelle__tab tbody tr:last-child > * { border-bottom: 0; }
.cb-tabelle__tab tbody th { font-weight: 600; color: var(--ink); }
.cb-tabelle--zeilenkopf .cb-tabelle__tab tbody th { width: 26%; }
.cb-tabelle--n2.cb-tabelle--zeilenkopf .cb-tabelle__tab tbody th { width: 34%; }
.cb-tabelle__tab td { color: var(--ink); }
.cb-tabelle__tab a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cb-tabelle__tab p { margin: 0; }
.cb-tabelle__hinweis { margin: 8px 4px 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
@media (max-width: 640px) {
  .cb-tabelle__tab { font-size: 14px; }
  .cb-tabelle__tab th, .cb-tabelle__tab td { padding: 10px 12px; }
  .cb-tabelle--n2 .cb-tabelle__tab { hyphens: auto; overflow-wrap: break-word; }
  .cb-tabelle--n2.cb-tabelle--zeilenkopf .cb-tabelle__tab tbody th { width: 40%; }
  /* 3–5 Spalten: jede Zeile als eigener Kasten */
  .cb-tabelle--n3 thead, .cb-tabelle--n4 thead, .cb-tabelle--n5 thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cb-tabelle--n3 .cb-tabelle__tab, .cb-tabelle--n4 .cb-tabelle__tab, .cb-tabelle--n5 .cb-tabelle__tab,
  .cb-tabelle--n3 tbody, .cb-tabelle--n4 tbody, .cb-tabelle--n5 tbody,
  .cb-tabelle--n3 tr, .cb-tabelle--n4 tr, .cb-tabelle--n5 tr { display: block; width: 100%; }
  .cb-tabelle--n3 tbody tr, .cb-tabelle--n4 tbody tr, .cb-tabelle--n5 tbody tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .cb-tabelle--n3 tbody tr:last-child, .cb-tabelle--n4 tbody tr:last-child, .cb-tabelle--n5 tbody tr:last-child { border-bottom: 0; }
  .cb-tabelle--n3 tbody th, .cb-tabelle--n4 tbody th, .cb-tabelle--n5 tbody th { display: block; width: auto !important; padding: 0 0 6px; border: 0; font-size: 15px; }
  /* Spaltenname links absolut, Inhalt rechts als normaler Fließtext (kein Grid: Text und Links
     in einer Zelle würden sonst zu einzelnen Rasterzellen) */
  .cb-tabelle--n3 td, .cb-tabelle--n4 td, .cb-tabelle--n5 td { display: block; position: relative; min-height: 1.5em; padding: 5px 0 5px calc(36% + 10px); border: 0; overflow-wrap: break-word; hyphens: auto; }
  .cb-tabelle--n3 td::before, .cb-tabelle--n4 td::before, .cb-tabelle--n5 td::before { content: attr(data-label); position: absolute; left: 0; top: 5px; width: 36%; font-size: 12.5px; font-weight: 600; line-height: 1.5; color: var(--ink-soft); hyphens: auto; overflow-wrap: break-word; }
  .cb-tabelle--n3 td.cb-tabelle__leer, .cb-tabelle--n4 td.cb-tabelle__leer, .cb-tabelle--n5 td.cb-tabelle__leer { display: none; }
}

/* Startseite als Wegweiser (01.10.2026): Grundlagen-Reihe der Kaufberatung,
   auch auf /pfannenfinder */
.ek-grund { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 4px 0 18px; }
.ek-grund .ek-guide strong { line-height: 1.3; }
@media (max-width: 980px) { .ek-grund { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ek-grund { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .ek-grund .ek-guide { padding: 12px 13px; } .ek-grund .ek-guide__teaser { display: none; } }
.pf-kopf { grid-template-columns: 1fr; padding-bottom: 8px; }
.pf-kopf.pf-kopf--bild { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 28px; }
@media (max-width: 820px) { .pf-kopf.pf-kopf--bild { grid-template-columns: minmax(0, 1fr); gap: 16px; } .pf-titelbild { order: -1; } }

/* Menü neu (01.10.2026): Materialien · Formen · Ratgeber · Rezepte */
.material-menu--drei { grid-template-columns: repeat(3, 1fr); width: 640px; }
.material-menu .facet-title--abstand { margin-top: 16px; }
@media (max-width: 980px) {
  .material-menu--drei { width: auto; }
  .material-menu .facet-title--abstand { margin-top: 8px; }
}
.footer-logo { display: block; height: 30px; width: auto; margin-bottom: 12px; }
.footer-logo--zeichen { height: 44px; width: 44px; } /* nur das Zeichen statt Wortmarke (09.10.2026) */
.has-dropdown-wrap--drei::after { width: 640px; }
@media (min-width: 981px) {
  /* Ratgeber steht weiter rechts: Menü rechtsbündig, damit nichts über den Rand ragt */
  .has-dropdown-wrap--drei:nth-of-type(3) .material-menu, .has-dropdown-wrap--drei:nth-of-type(3)::after { left: auto; right: -22px; }
}

/* Startseite: Titelbild als Band oben, Text links, Einstiege rechts (01.10.2026).
   Abstände auf einem 8er-Raster: Band → Inhalt 40, Spalten 64, Inhalt →
   Kennzahlen 32, innerhalb der Spalten 16 bzw. 12. */
.ek-hero--band { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: center; gap: 40px 64px; padding: 24px 0 8px; }
.ek-band { grid-column: 1 / -1; position: relative; display: block; height: clamp(180px, 25vw, 320px); border-radius: var(--radius-hero); overflow: hidden; background: var(--line); }
.ek-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.ek-hero--band .ek-hero__text { gap: 16px; }
.ek-hero--band .ek-hero__text h1 { font-size: clamp(30px, 3.2vw, 40px); line-height: 1.15; }
.ek-hero--band .ek-lede { max-width: 46ch; }
.ek-hero--band .ek-entries { margin: 0; gap: 12px; }
.ek-hero--band .ek-entry { padding: 14px 16px; }
.ek-hero--band .ek-stats { margin-top: 0; padding-top: 18px; padding-bottom: 2px; gap: 8px 28px; }
@media (max-width: 860px) {
  .ek-hero--band { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 16px; }
  .ek-band { height: 180px; }
  .ek-hero--band .ek-hero__text { gap: 12px; }
  .ek-hero--band .ek-hero__text h1 { font-size: 30px; }
}
.pk-karte--ohne-bild { grid-template-columns: 1fr; }
/* Einheitliche Empfehlungskarte (06.10.2026), App\Support\EmpfehlungsKarte */
.pe { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); overflow: hidden; }
.pe__kopf { padding: 18px 22px 14px; display: grid; gap: 12px; }
.pe__titel { margin: 0; font: 600 19px/1.25 var(--font-head); }
.pe__wie { margin: -6px 0 0; font-size: 14px; color: var(--ink-soft); }
.pe__filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.pe__frage { font: 500 14px/1.2 var(--font-body); color: var(--ink-soft); }
.pe__seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--radius-pill); background: var(--bg); }
.pe__seg button { border: 0; background: transparent; padding: 8px 14px; border-radius: var(--radius-pill); font: 600 13.5px/1.2 var(--font-body); color: var(--ink-soft); cursor: pointer; }
.pe__seg button:hover { color: var(--ink); }
.pe__seg button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
.pe__seg button:focus-visible { outline: 2px solid var(--patina); outline-offset: 2px; }
.pe__panel { display: grid; grid-template-columns: 216px 1fr; border-top: 1px solid var(--line); }
.pe__panel--ohne-bild { grid-template-columns: 1fr; }
html.pe-js:not(.pe-alle) .pe__panel:not(.ist-aktiv) { display: none; }
html.pe-js .pe--schalter .pe__panel { border-top: 0; }
.pe__aufbau { background: var(--patina-soft); padding: 18px 18px 16px; display: grid; gap: 12px; align-content: start; }
.pe__schnitt { background: var(--card); border-radius: 12px; height: 104px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pe__schnitt svg { width: 100%; height: 100%; display: block; }
.pe__aufbau dl { margin: 0; display: grid; gap: 7px; }
.pe__aufbau dl div { display: grid; grid-template-columns: 74px 1fr; gap: 8px; font-size: 13px; line-height: 1.35; }
.pe__aufbau dt { color: var(--patina); font-weight: 600; }
.pe__aufbau dd { margin: 0; color: var(--ink); }
.pe__text { padding: 18px 22px 20px; display: grid; gap: 10px; align-content: start; }
.pe__name { margin: 0; font: 600 21px/1.2 var(--font-head); letter-spacing: -.01em; }
.pe__warum, .pe__einl { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink); max-width: 56ch; }
.pe__warum b, .pe__einl b { font-weight: 600; }
.pe__einl { color: var(--ink-soft); }
.pe__einl b { color: var(--ink); }
.pe__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 4px; }
.pe__serien, .pw__serien { display: inline-flex; align-items: center; gap: 8px; padding: 11px 19px; border-radius: var(--radius-pill); background: var(--ink); color: var(--card); font: 600 14.5px/1.15 var(--font-body); text-decoration: none; }
.pe__serien:hover, .pw__serien:hover { background: var(--patina); color: #fff; }
.pe__amazon, .pw__amazon { padding: 9.5px 17px; border-radius: var(--radius-pill); border: 1.5px solid #D9DDD6; background: var(--card); color: var(--ink); font: 600 14px/1.15 var(--font-body); text-decoration: none; }
.pe__amazon:hover, .pw__amazon:hover { border-color: var(--ink); }
.pe__ueblich { border-top: 1px solid var(--line); padding: 0 22px; }
.pe__ueblich summary { list-style: none; cursor: pointer; padding: 13px 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 14.5px; }
.pe__ueblich summary::-webkit-details-marker { display: none; }
.pe__ueblich summary span { color: var(--ink-soft); }
.pe__ueblich summary strong { font-weight: 600; }
.pe__ueblich summary em { font-style: normal; margin-left: auto; color: var(--patina); font-weight: 600; font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; }
.pe__ueblich[open] summary em { display: none; }
.pe__ueblich p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); max-width: 70ch; }
.pe__ueblich p:last-child { margin-bottom: 16px; }
.pe__ueblich p b { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) {
  .pe__kopf { padding: 16px 16px 12px; } .pe__filter { display: grid; gap: 8px; }
  .pe__seg { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 14px; } .pe__seg button { padding: 9px 6px; border-radius: 11px; line-height: 1.25; }
  .pe__ueblich summary em { margin-left: 0; }
  .pe__panel { grid-template-columns: 1fr; }
  .pe__aufbau { grid-template-columns: 112px 1fr; align-items: center; padding: 14px 16px; }
  .pe__schnitt { height: 84px; } .pe__text { padding: 16px; } .pe__ueblich { padding: 0 16px; } .pe__name { font-size: 19px; }
}
.pe__lage { font: 600 12.5px/1.2 var(--font-body); color: var(--patina); }
.pe__plus { margin: 0; padding-left: 16px; position: relative; font-size: 14.5px; line-height: 1.5; color: var(--ink); max-width: 56ch; }
.pe__plus::before { content: "+"; position: absolute; left: 0; font-weight: 600; color: var(--patina); }
.pe--einzel .pe__kopf { padding-bottom: 14px; }
.pk-karten--einzeln .pe + script + .pe, .pk-karten--einzeln .pe + .pe { margin-top: 4px; }
html.pe-js:not(.pe-alle) .pe--schalter .pe__lage { display: none; }
.pe--kompakt .pe__kopf { padding-bottom: 12px; }
.pe--kompakt .pe__titel { font-size: 17px; }
.pe--kompakt .pe__name { font-size: 18px; }
.pe__fuss { border-top: 1px solid var(--line); padding: 12px 22px 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.pe__auch { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.pe__auch b { color: var(--ink); font-weight: 600; }
.pe__wege { margin: 14px 0 0; font: 400 13.5px/1.5 var(--font-body); color: var(--ink-soft); }
.pe__wege span { margin-right: 2px; }
.pe__wege a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pe__mehr { font: 600 13.5px/1.2 var(--font-body); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.pe-schalter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 18px 0 4px; padding: 10px 14px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow-sm); position: sticky; top: 8px; z-index: 5; }
.pe-schalter .ad-disclosure { margin-left: auto; }
.pk-karten--einzeln { margin-top: 0; max-width: 860px; }
/* Ergebniskarte des Pfannenfinders (06.10.2026): gleicher Aufbau wie die Empfehlungskarten */
.fe__antworten { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 4px 0 22px; font-size: 14px; color: var(--ink-soft); }
.fe__antworten b { font-weight: 600; color: var(--ink); background: var(--card); box-shadow: var(--shadow-sm); border-radius: var(--radius-pill); padding: 5px 11px; font-size: 13px; }
.fe__antworten a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; margin-left: 4px; }
.fe__schalter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 20px; margin-bottom: 14px; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); }
.fe__schalterhinweis { font-size: 13px; color: var(--ink-soft); }
html.fe-js .fe-lagen__panel:not(.ist-aktiv) { display: none; }
.fe-lagen__panel + .fe-lagen__panel { margin-top: 28px; }
html.fe-js .fe-lagen__panel + .fe-lagen__panel { margin-top: 0; }
.fe__kopf { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: stretch; }
.fe--ohne-bild .fe__kopf { grid-template-columns: minmax(0, 1fr); }
.fe__kopftext { padding: 24px 26px 20px; display: grid; gap: 10px; align-content: start; max-width: 84ch; }
.fe__bild { margin: 0; background: var(--line); min-height: 200px; position: relative; }
.fe__bild img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; }
.fe__titel { margin: 0; font: 600 27px/1.2 var(--font-head); letter-spacing: -.015em; }
.fe__warum { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--ink); }
.fe__meist { margin: 0; font-size: 14px; color: var(--ink-soft); }
.fe__meist span { font-weight: 600; }
.fe__mitte { display: grid; grid-template-columns: 250px 1fr; border-top: 1px solid var(--line); }
.fe__mitte--ohne { grid-template-columns: 1fr; }
.fe__hinweis { display: flex; gap: 10px; margin: 0 26px 18px; padding: 13px 16px; background: var(--patina-soft); border-radius: 12px; font-size: 14.5px; line-height: 1.5; }
.fe__hinweis ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
/* Abstand nach oben (15.10.2026): am Desktop lag der Hinweis ohne Abstand unter der Steckbrief-Spalte.
   Oben und unten je 18 px; die Kästen rechts verlieren dafür ihren Innenabstand unten, damit beide Spalten gleich weit entfernt sind. */
@media (min-width: 761px) {
  .fe__hinweis { margin-top: 18px; }
  .fe__mitte:has(+ .fe__hinweis) .fe__pc { padding-bottom: 0; }
}
.fe__auch { margin: 12px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.fe__auch a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.fe__details { padding: 0 0 18px; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.5; }
.fe__details p { margin: 0; }
.fe__vergleich--klein > summary { font: 600 14.5px/1.2 var(--font-body); }
.fe__aufbau { background: var(--patina-soft); padding: 20px 18px; display: grid; gap: 12px; align-content: start; }
.fe__schnitt { background: var(--card); border-radius: 12px; height: 118px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fe__schnitt svg { width: 100%; height: 100%; display: block; }
.fe__aufbau dl { margin: 0; display: grid; gap: 7px; }
.fe__aufbau dl div { display: grid; grid-template-columns: 80px 1fr; gap: 8px; font-size: 13px; line-height: 1.35; }
.fe__aufbau dt { color: var(--patina); font-weight: 600; }
.fe__aufbau dd { margin: 0; }
.fe__pc { padding: 20px 26px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 30px; align-content: start; }
.fe__label { margin: 0 0 8px; font: 600 14px/1.2 var(--font-body); }
.fe__pc ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.45; }
.fe__pc li { padding-left: 22px; position: relative; }
.fe__plus li::before { content: "✓"; position: absolute; left: 0; color: var(--patina); font-weight: 700; }
.fe__minus li { color: var(--ink-soft); }
.fe__minus li::before { content: "–"; position: absolute; left: 2px; }
.fe__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 18px 26px; border-top: 1px solid var(--line); }
.fe__link { font: 600 14px/1.2 var(--font-body); color: var(--ink); text-underline-offset: 3px; margin-left: 4px; }
.fe__weiter { padding: 16px 26px 22px; border-top: 1px solid var(--line); }
.fe__felder { grid-template-columns: repeat(3, 1fr) !important; }
.fe__vergleich { border-top: 1px solid var(--line); padding: 0 26px; }
/* Begründung aufklappbar (15.10.2026) */
.fe__erkl { border-top: 1px solid var(--line); }
.fe__erkl > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 26px; font: 600 15.5px/1.3 var(--font-head); color: var(--ink); }
.fe__erkl > summary::-webkit-details-marker { display: none; }
.fe__erkl > summary::after { content: "anzeigen ↓"; flex: none; font: 600 13.5px/1.2 var(--font-body); color: var(--ink-soft); }
.fe__erkl[open] > summary::after { content: "einklappen ↑"; }
.fe__erkl > summary:hover::after { color: var(--ink); }
.fe__hinweis--kompromiss { margin-top: 18px; }
.fe__vergleich > summary { cursor: pointer; padding: 16px 0; font: 600 16px/1.2 var(--font-head); list-style: none; display: flex; justify-content: space-between; }
.fe__vergleich > summary::after { content: "anzeigen ↓"; font: 600 13.5px/1.2 var(--font-body); color: var(--ink-soft); }
.fe__vergleich[open] > summary::after { content: "einklappen ↑"; }
.fe__vergleich .rv { margin: 0 0 22px; padding: 0; border: 0; }
.fe__vergleich .rv__titel { display: none; }
.fe__disc { padding: 0 26px 18px; font-size: 12.5px; color: var(--ink-soft); margin: 0; }
@media (max-width: 760px) {
  .fe__schalter { padding: 14px 16px; }
  .fe__schalterhinweis { display: none; }
  .fe__kopf { grid-template-columns: 1fr; }
  .fe__kopftext { padding: 18px 16px 16px; }
  .fe__bild { min-height: 0; aspect-ratio: 16 / 9; order: -1; }
  .fe__hinweis { margin: 0 16px 16px; }
  .fe__titel { font-size: 22px; }
  .fe__warum { font-size: 15.5px; }
  .fe__mitte { grid-template-columns: 1fr; }
  .fe__aufbau { grid-template-columns: 112px 1fr; align-items: center; padding: 14px 16px; }
  .fe__schnitt { height: 84px; }
  .fe__pc { grid-template-columns: 1fr; padding: 16px; gap: 18px; }
  .fe__aktion { padding: 16px; }
  .fe__aktion .pw__serien, .fe__aktion .pw__amazon, .fe__aktion .fe__amazon { width: 100%; justify-content: center; text-align: center; }
  .fe__link { margin: 4px auto 0; }
  .fe__weiter { padding: 14px 16px 16px; }
  .fe__felder { grid-template-columns: 1fr !important; }
  .fe__vergleich { padding: 0 16px; }
  .fe__erkl > summary { padding: 14px 16px; font-size: 15px; }
  .fe__hinweis--kompromiss { margin-top: 16px; }
  .fe__disc { padding: 0 16px 16px; }
  /* Serien: wischbare Reihe statt acht voller Karten */
  .rc-serien .sf__liste { display: flex !important; overflow-x: auto; gap: 10px; scroll-snap-type: x mandatory; padding-bottom: 8px; margin-right: -16px; padding-right: 16px; }
  .rc-serien .sf__karte { flex: 0 0 72%; scroll-snap-align: start; }
}

/* Hub-Abschnitt „Welche … passt zu dir?“ (06.10.2026, EmpfehlungsKarte::hubAbschnitt): Bedingung → Bauart → Wege weiter */
.pw__lead { max-width: 78ch; margin: -4px 0 18px; font-size: 16px; line-height: 1.55; color: var(--ink); }
.pw { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); overflow: hidden; }
.pw__tabs { padding: 18px 22px 18px; display: grid; gap: 10px; }
.pw__frage { font: 500 14px/1.2 var(--font-body); color: var(--ink-soft); }
.pw__tabreihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pw__tabreihe button { text-align: left; border: 1.5px solid var(--line); background: var(--bg); border-radius: 14px; padding: 12px 16px 13px; cursor: pointer; display: grid; gap: 4px; font-family: var(--font-body); color: var(--ink-soft); }
.pw__tabreihe button span { font-size: 13.5px; line-height: 1.3; }
.pw__tabreihe button strong { font: 600 16.5px/1.2 var(--font-head); color: var(--ink-soft); }
.pw__tabreihe button strong::before { content: "→ "; font-weight: 400; }
.pw__tabreihe button:hover { border-color: #cfd4cd; }
.pw__tabreihe button[aria-pressed="true"] { background: var(--card); border-color: var(--patina); color: var(--ink); box-shadow: 0 0 0 1px var(--patina); }
.pw__tabreihe button[aria-pressed="true"] strong { color: var(--ink); }
.pw__panel { display: none; grid-template-columns: 232px 1fr; border-top: 1px solid var(--line); }
.pw__panel.ist-aktiv, html:not(.pe-js) .pw__panel { display: grid; }
.pw--einzel .pw__panel { border-top: 0; }
.pw__aufbau { background: var(--patina-soft); padding: 20px 18px; display: grid; gap: 12px; align-content: start; }
.pw__schnitt { background: var(--card); border-radius: 12px; height: 112px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pw__schnitt svg { width: 100%; height: 100%; display: block; }
.pw__aufbau dl { margin: 0; display: grid; gap: 7px; }
.pw__aufbau dl div { display: grid; grid-template-columns: 78px 1fr; gap: 8px; font-size: 13px; line-height: 1.35; }
.pw__aufbau dt { color: var(--patina); font-weight: 600; }
.pw__aufbau dd { margin: 0; }
.pw__text { padding: 20px 24px 22px; display: grid; gap: 10px; align-content: start; max-width: 80ch; }
.pw__text p { margin: 0; font-size: 15.5px; line-height: 1.5; }
.pw__dann { font: 600 12.5px/1 var(--font-body) !important; letter-spacing: .06em; text-transform: uppercase; color: var(--patina); }
.pw__name { font: 600 23px/1.2 var(--font-head) !important; letter-spacing: -.01em; margin-top: -4px !important; }
.pw__plus { padding-left: 18px; position: relative; }
.pw__plus::before { content: "+"; position: absolute; left: 0; color: var(--patina); font-weight: 600; }
.pw__einl { color: var(--ink-soft); }
.pw__einl b { color: var(--ink); }
.pw__sonst { margin-top: 4px; padding: 12px 14px; background: var(--bg); border-radius: 12px; font-size: 14.5px; }
.pw__sonst ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.pw__sonst a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.pw__sonst span { color: var(--ink-soft); }
.pw__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.pw__weiter { grid-column: 1 / -1; border-top: 1px solid var(--line); padding: 16px 22px 20px; }
.pw__weiter-titel { margin: 0 0 10px; font: 600 12.5px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.pw__felder { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 10px; }
.pw__feld { background: var(--bg); border-radius: 12px; padding: 13px 15px 14px; display: grid; gap: 6px; align-content: start; text-decoration: none; color: var(--ink); }
.pw__feld--link:hover { background: var(--patina-soft); }
.pw__feldkopf { font: 600 12px/1 var(--font-body); color: var(--patina); }
.pw__feld strong { font: 600 15px/1.25 var(--font-head); }
.pw__feldsatz { font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); }
.pw__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.pw__chips a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: var(--radius-pill); background: var(--card); box-shadow: var(--shadow-sm); font: 600 13px/1.1 var(--font-body); color: var(--ink); text-decoration: none; }
.pw__chips a i { font-style: normal; font-weight: 500; color: var(--ink-soft); }
.pw__chips a.pw__chipmehr { background: transparent; box-shadow: none; color: var(--ink-soft); padding-left: 4px; }
.pw__fuss { margin: 0; padding: 13px 22px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-soft); }
.pw__fuss a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.pw__haltung { border-left: 4px solid var(--patina); background: var(--patina-soft); border-radius: 0 12px 12px 0; padding: 14px 18px; max-width: 86ch; display: grid; gap: 8px; margin: -4px 0 18px; }
.pw__haltung p { margin: 0; font-size: 15.5px; line-height: 1.5; }
.pw__haltung a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.pw__haltung span { color: var(--ink-soft); }
@media (max-width: 760px) {
  .pw__tabs { padding: 16px 16px 12px; }
  .pw__tabreihe { grid-template-columns: 1fr; gap: 6px; }
  .pw__tabreihe button { border-radius: 12px; padding: 10px 14px 11px; }
  .pw__tabreihe button strong { font-size: 15px; }
  .pw__panel.ist-aktiv { grid-template-columns: 1fr; }
  .pw__aufbau { grid-template-columns: 112px 1fr; align-items: center; padding: 14px 16px; }
  .pw__schnitt { height: 84px; }
  .pw__text { padding: 16px 16px 18px; }
  .pw__name { font-size: 20px !important; }
  .pw__serien { width: 100%; justify-content: center; text-align: center; }
  .pw__amazon { width: 100%; text-align: center; }
  .pw__weiter { padding: 14px 16px 16px; }
  .pw__felder { grid-template-columns: 1fr; gap: 8px; }
  .pw__feld--link { grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 10px; padding: 11px 14px; }
  .pw__feld--link .pw__feldsatz { display: none; }
  .pw__fuss { padding: 12px 16px; }
}

/* Hubs: Karte in voller Breite, der Abschnitt bringt den Abstand mit */
.pk-karten--hub { max-width: none; margin-bottom: 0; }
.pk-karten--hub .pe__text { max-width: 78ch; }
@media (max-width: 640px) {
  .pe-schalter { position: static; } .pe-schalter .pe__seg { grid-template-columns: repeat(2, 1fr); } .pe__fuss { padding: 12px 16px 14px; }
}
/* „Unsere Haltung“ (Entwurf 01.10.2026): langlebige Bratoberflächen als Grundton */
.haltung__eyebrow { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--patina); }
.haltung__titel { margin: 0 0 8px; font: 600 17px/1.3 var(--font-head); color: var(--ink); }
.haltung__klein { display: block; font-size: 12.5px; color: var(--ink-soft); font-weight: 400; }
.haltung__pfeil { margin-left: auto; color: var(--patina); }
.haltung a { color: var(--ink); text-decoration: none; }
.haltung__person { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; line-height: 1.35; }
.haltung__person:hover { box-shadow: inset 0 0 0 1px var(--patina); }
.haltung__avatar { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.haltung__avatar img { display: block; width: 100%; height: 100%; object-fit: contain; }
.haltung--band p.haltung__formen { margin: 12px 0 0; font-size: 14px; }
.sidebar-box.haltung--sidebar { background: var(--patina-soft); }
.haltung--sidebar .haltung__satz { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: var(--ink); }
.haltung__chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 12px; padding: 0; }
.haltung__chips a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--radius-pill); background: var(--card); font-size: 13px; }
.haltung__chips a:hover { box-shadow: inset 0 0 0 1px var(--patina); }
.haltung--band { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px 40px; align-items: center; margin: 32px 0 8px; padding: 28px 32px; border-radius: var(--radius-card); background: var(--patina-soft); }
.haltung--band .haltung__titel { font-size: 22px; }
.haltung--band p { margin: 0 0 16px; font-size: 15px; line-height: 1.6; max-width: 60ch; }
.haltung--band .haltung__person { display: inline-flex; min-width: 300px; }
.haltung__materialien { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.haltung__materialien a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--card); box-shadow: var(--shadow-sm); font-size: 15px; }
.haltung__materialien a:hover { box-shadow: inset 0 0 0 1px var(--patina); }
.haltung__materialien .material-swatch { width: 14px; height: 14px; }
@media (max-width: 760px) {
  .haltung--band { grid-template-columns: 1fr; padding: 20px; }
  .haltung--band .haltung__person { display: flex; min-width: 0; }
}
.haltung a.text-link { color: var(--patina); text-decoration: underline; text-underline-offset: 3px; }
/* „Weniger Formen reichen“ auf /formen (01.10.2026): kompakt, damit der Seitenkopf oben bleibt */
.formen-weniger { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 40px; align-items: center; margin: 32px 0 0; padding: 22px 28px; border-radius: var(--radius-card); background: var(--patina-soft); scroll-margin-top: 110px; }
.formen-weniger__titel { margin: 0 0 6px; font: 600 19px/1.3 var(--font-head); color: var(--ink); }
.formen-weniger__text p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.formen-weniger__text p.haltung__eyebrow { margin-bottom: 4px; font-size: 11px; color: var(--patina); }
.formen-weniger__redaktion { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--patina); text-decoration: none; }
.formen-weniger__redaktion img { width: 22px; height: 22px; border-radius: 50%; background: #fff; }
.formen-weniger__redaktion:hover { text-decoration: underline; text-underline-offset: 3px; }
.formen-weniger__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.formen-weniger__liste a { display: flex; flex-direction: column; gap: 1px; height: 100%; box-sizing: border-box; padding: 9px 14px; border-radius: 12px; background: var(--card); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; font-size: 14px; line-height: 1.3; }
.formen-weniger__liste a span { font-size: 12.5px; color: var(--ink-soft); }
.formen-weniger__liste a:hover { box-shadow: inset 0 0 0 1px var(--patina); }
@media (max-width: 860px) {
  .formen-weniger { grid-template-columns: 1fr; padding: 18px; gap: 14px; margin-top: 24px; }
}
@media (max-width: 340px) {
  .formen-weniger__liste { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .formen-weniger__liste a { padding: 8px 12px; }
}
.formen-weniger__liste li:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* „Aufbau auf einen Blick“ je Serie (02.10.2026): Schnittbild, Orte, Etiketten */
.aufbau { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.aufbau__titel { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--patina); margin-bottom: 8px; }
.aufbau__box { background: var(--bg); border-radius: var(--radius-control); padding: 12px 14px; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: center; }
.aufbau__bild svg { display: block; width: 100%; height: auto; font-family: var(--font-body); }
.aufbau__zeilen { margin: 0; display: grid; gap: 7px; }
.aufbau__zeilen > div { display: grid; gap: 0; }
.aufbau__zeilen dt { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.aufbau__zeilen dd { margin: 0; font-size: 13.5px; font-weight: 500; line-height: 1.35; overflow-wrap: break-word; }
.aufbau__zeilen dd.is-leer { color: var(--ink-soft); font-weight: 400; }
.aufbau__punkt { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; box-shadow: inset 0 0 0 1px rgba(29,35,33,.14); }
.aufbau__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.aufbau__chips-lab { font-size: 11.5px; color: var(--ink-soft); margin-right: 2px; }
.aufbau__chip { font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--patina-soft); color: var(--patina); text-decoration: none; }
a.aufbau__chip:hover { background: var(--patina); color: #fff; }
@media (max-width: 420px) {
  .aufbau__box { grid-template-columns: minmax(0, 1fr); }
  .aufbau__bild { max-width: 200px; }
}
.lineup-grid--aufbau { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.serien-list span.serien-list__aufbau { color: var(--ink); }

/* Bereich Aufbau nach dem Orte-Modell (02.10.2026) */
.ue-orte { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px 28px; align-items: center; margin-top: 40px; padding: 26px; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); }
.ue-orte__bild svg { display: block; width: 100%; height: auto; font-family: var(--font-body); }
.ue-orte__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ue-orte__liste li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; }
.ue-orte__liste strong { font-size: 15.5px; }
.ue-orte__liste em { font-style: normal; font-size: 11.5px; color: var(--patina); background: var(--patina-soft); border-radius: var(--radius-pill); padding: 2px 9px; margin-left: 4px; white-space: nowrap; }
.ue-orte__liste li div > span { display: block; font-size: 14px; color: var(--ink-soft); line-height: 1.45; }
.ue-orte__hinweis, .ue-hinweis { margin: 0; padding: 12px 16px; background: var(--patina-soft); border-radius: var(--radius-control); font-size: 14.5px; line-height: 1.5; }
.ue-orte__hinweis { grid-column: 1 / -1; }
.ue-hinweis { margin-top: 18px; }
.ue-hinweis a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ue-orte + .ue-ebenen { margin-top: 18px; }
.ue-lesen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ue-lesen__karte { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 20px 22px 18px; }
.ue-lesen__karte h3 { margin: 0 0 6px; font-size: 18px; }
.ue-lesen__karte > p { margin: 0; font-size: 15px; line-height: 1.55; }
.aufbau--frei { border-top: 0; padding-top: 0; margin-top: 14px; }
.ue-lesen__hinweis { margin: 14px 0 0; font-size: 14px; color: var(--ink-soft); }
.ue-lesen__hinweis a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ue-raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ue-konstr__schnitt { display: block; margin-bottom: 4px; padding: 14px 16px; background: var(--bg); border-radius: var(--radius-control); }
.ue-konstr__schnitt svg { display: block; width: 100%; max-width: 260px; height: auto; margin: 0 auto; }
.ue-konstr__typisch { font-size: 13.5px; color: var(--ink-soft); }
.ue-konstr__typisch b { color: var(--ink); font-weight: 600; }
div.ue-karte.ue-text a.ue-weiterlink { color: var(--ink); }
.artikel-schnitt { margin: 0 0 24px; padding: 16px 18px; max-width: 70ch; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); }
.artikel-schnitt .aufbau { margin-top: 0; padding-top: 0; border-top: 0; }
.artikel-schnitt figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-soft); }
@media (max-width: 860px) {
  .ue-orte { grid-template-columns: minmax(0, 1fr); padding: 20px 18px; }
  .ue-lesen, .ue-raster--2 { grid-template-columns: minmax(0, 1fr); }
}
p.ue-hinweis, p.ue-orte__hinweis { display: block; }
p.ue-hinweis strong { display: inline; }

/* Kauf-Links je Serie (02.10.2026): Partnerlinks, erkennbar am Sternchen */
.serie-kauf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.serie-kauf__lab { font-size: 12px; font-weight: 600; color: var(--ink); margin-right: 2px; }
.serie-kauf__link { font-size: 12.5px; font-weight: 500; padding: 3px 10px; border-radius: var(--radius-pill); color: var(--ember); box-shadow: inset 0 0 0 1px var(--ember); text-decoration: none; }
.serie-kauf__link:hover { background: var(--ember); color: #fff; }
.serien-list a.serien-list__kauf { color: var(--ember); margin-right: 10px; }

/* Serienliste mit Filtern (02.10.2026): Filter links wie im Shop */
.sf__layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 18px; }
.sf__layout--ohne { grid-template-columns: minmax(0, 1fr); }
.sf__seite { position: sticky; top: 96px; max-height: calc(100vh - 112px); overflow: auto; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); }
.sf__toggle { display: none; }
.sf__filter { padding: 16px 16px 12px; }
.sf__zu, .sf__fuss { display: none; }
@media (max-width: 820px) { .sf__zu { display: grid; } .sf__fuss { display: block; } }
.sf__filter-kopf { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-family: var(--font-head); font-size: 16px; }
.sf__gruppe { padding: 12px 0 10px; border-bottom: 1px solid var(--line); }
.sf__gruppe:last-child { border-bottom: 0; padding-bottom: 2px; }
.sf__lab { margin-bottom: 6px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.sf__lab::-webkit-details-marker { display: none; }
.sf__lab::after { content: '–'; font-size: 14px; font-weight: 400; }
details.sf__gruppe:not([open]) .sf__lab { margin-bottom: 0; }
details.sf__gruppe:not([open]) .sf__lab::after { content: '+'; }
.sf__mehr { margin: 18px 0 0; text-align: center; }
.sf__mehr-knopf { border: 0; font: 600 14.5px/1 var(--font-body); padding: 12px 22px; border-radius: var(--radius-pill); background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); cursor: pointer; }
.sf__mehr-knopf:hover { box-shadow: var(--shadow-md), inset 0 0 0 1px var(--ink); }
.sf__opt { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 9px; align-items: center; width: 100%; padding: 5px 4px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 14px; color: var(--ink); text-align: left; cursor: pointer; }
.sf__opt:hover { background: var(--bg); }
.sf__box { width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px #B9BFBA; background: #fff; }
.sf__opt.is-on .sf__box { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.5 9.3l3 3 6-6.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; box-shadow: none; }
.sf__opt.is-on .sf__optname { font-weight: 600; }
.sf__opt i { font-style: normal; font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.sf__opt[disabled] { opacity: .4; cursor: default; }
.sf__opt[disabled]:hover { background: none; }
.sf__opt:focus-visible, .sf__chip:focus-visible, .sf__toggle:focus-visible { outline: 2px solid var(--patina); outline-offset: 2px; }
.sf__reset, .sf__fehlt button { border: 0; background: none; padding: 0; font: 400 13px/1.2 var(--font-body); color: var(--ember); text-decoration: underline; cursor: pointer; }
.sf__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 34px; margin-bottom: 12px; }
.sf__zahl { font-weight: 600; font-size: 15px; }
.sf__aktiv { display: flex; flex-wrap: wrap; gap: 6px; }
.sf__chip { border: 0; font: inherit; font-size: 13px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--ink); color: var(--card); cursor: pointer; }
.sf__chip:hover { background: #3a4340; }
.sf__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sf__unterseite { margin: 0 0 12px; padding: 12px 14px; background: var(--ember-soft); border-radius: var(--radius-control); font-size: 14.5px; }
.sf__unterseite a { color: var(--ember); font-weight: 600; }
.sf__fehlt { margin: 0 2px 12px; font-size: 13.5px; color: var(--ink-soft); }
.sf__leer { margin: 16px 2px; color: var(--ink-soft); }
.sf__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sf__layout--ohne .sf__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf__karte { display: grid; gap: 6px; align-content: start; padding: 16px 18px; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); scroll-margin-top: 150px; transition: box-shadow .15s; }
.sf__karte:hover { box-shadow: var(--shadow-md); }
.sf__karte[hidden] { display: none; }
.sf__marke { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.sf__marke a { color: var(--ink-soft); text-decoration: none; }
.sf__marke a:hover { text-decoration: underline; }
.sf__name { margin: 0; font-size: 17px; }
.sf__name a { color: var(--ink); text-decoration: none; }
.sf__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sf__bild { padding: 8px 12px; background: var(--bg); border-radius: var(--radius-control); }
.sf__bild svg { display: block; width: 100%; max-width: 200px; height: auto; margin: 0 auto; }
.sf__kurz { margin: 0; font-size: 13.5px; line-height: 1.45; }
.sf__kurz--leer, .sf__zusatz { color: var(--ink-soft); }
.sf__zusatz { margin: 0; font-size: 12.5px; }
.sf__kauf { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.sf__kauf span { flex-basis: 100%; font-size: 11.5px; font-weight: 600; }
.sf__kauf a { font-size: 12.5px; padding: 2px 9px; border-radius: var(--radius-pill); color: var(--ember); box-shadow: inset 0 0 0 1px var(--ember); text-decoration: none; }
.sf__kauf a:hover, .sf__kauf a.is-treffer { background: var(--ember); color: #fff; }
.sf__hersteller { font-size: 12.5px; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1100px) { .sf__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sf__layout--ohne .sf__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .sf__layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .sf__seite { position: static; max-height: none; overflow: visible; }
  .sf__toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 13px 16px; border: 0; background: none; font: 600 15px/1 var(--font-head); color: var(--ink); cursor: pointer; }
  .sf__toggle::before { content: ''; width: 18px; height: 14px; background: linear-gradient(var(--ink), var(--ink)) 0 0 / 100% 2px no-repeat, linear-gradient(var(--ink), var(--ink)) 3px 6px / 12px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) 6px 12px / 6px 2px no-repeat; }
  .sf__toggle-zahl { margin-right: auto; font-weight: 400; color: var(--ink-soft); }
  .sf__toggle::after { content: '›'; font-size: 20px; line-height: 1; }
  /* Leiste von links (03.10.2026): liegt über der Seite, eigener Bildlauf, Knopf unten fest */
  .sf__filter { position: fixed; z-index: 3000; top: 0; bottom: 0; left: 0; width: min(88vw, 360px); display: flex; flex-direction: column; padding: 0 16px; background: var(--card); box-shadow: 0 0 40px rgba(20, 25, 23, .25); overflow-y: auto; overscroll-behavior: contain; transform: translateX(-105%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
  .sf__seite.is-offen .sf__filter { transform: none; visibility: visible; transition: transform .22s ease; }
  .sf__filter-kopf { position: sticky; top: 0; z-index: 1; align-items: center; gap: 12px; padding: 14px 0 12px; background: var(--card); font-size: 18px; }
  .sf__filter-kopf .sf__reset { margin-left: auto; }
  .sf__zu { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--bg); font-size: 22px; line-height: 1; color: var(--ink); cursor: pointer; }
  .sf__fuss { position: sticky; bottom: 0; margin-top: auto; padding: 12px 0 14px; background: linear-gradient(to bottom, rgba(255,255,255,0), var(--card) 14px); }
  .sf__fertig { width: 100%; padding: 14px 16px; border: 0; border-radius: var(--radius-pill); background: var(--ink); color: var(--card); font: 600 15px/1 var(--font-body); cursor: pointer; }
  .sf__dunkel { position: fixed; z-index: 2999; inset: 0; background: rgba(20, 25, 23, .45); }
  .sf__gruppe--lang[open] { max-height: none; overflow: visible; }
  html.sf-leiste-offen { overflow: hidden; }
  .sf__layout--ohne .sf__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .sf__liste, .sf__layout--ohne .sf__liste { grid-template-columns: minmax(0, 1fr); } }
/* Kompakte Form- und Material-Karten auf Hubs: steuern den Serienfilter */
.fk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fk { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); }
.fk__titel { margin: 0; font-size: 17px; }
.fk__text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.fk__typisch { margin: 0; font-size: 13px; color: var(--ink-soft); }
.fk__typisch b { color: var(--ink); font-weight: 600; }
.fk .hcard__chip { align-self: flex-start; }
.fk__links { display: grid; gap: 4px; margin-top: auto; padding-top: 8px; }
.fk__links a { font-size: 13.5px; font-weight: 600; text-decoration: none; }
.fk__zeigen { color: var(--patina); }
.fk__zeigen.is-on { text-decoration: underline; }
.fk__seite { color: var(--ember); }
.fk__mehr { color: var(--ink); }
.fk__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mat-chip.is-on { box-shadow: inset 0 0 0 2px var(--patina); }
@media (max-width: 900px) { .fk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fk-grid { grid-template-columns: minmax(0, 1fr); } }

/* Startseite: „Pfannen nach …“ als Reiter, Karten mit kleinem Bild rechts (02.10.2026) */
.pn__reiter { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; background: var(--card); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); width: fit-content; max-width: 100%; }
.pn__tab { border: 0; font: 600 14.5px/1 var(--font-body); padding: 10px 16px; border-radius: var(--radius-pill); background: none; color: var(--ink); cursor: pointer; }
.pn__tab:hover { background: var(--bg); }
.pn__tab.is-on { background: var(--ink); color: var(--card); }
.pn__tab:focus-visible { outline: 2px solid var(--patina); outline-offset: 2px; }
.pn__titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pn__sub { margin: 14px 2px 12px; font-size: 14.5px; color: var(--ink-soft); }
.pn__karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pk { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 12px; align-items: center; padding: 14px 14px 14px 16px; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); }
.pk__text { display: grid; gap: 3px; }
.pk__text strong { font: 600 16px/1.3 var(--font-head); }
.pk__text strong a { color: var(--ink); text-decoration: none; }
.pk__text strong a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pk__text > span { font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
.pk__links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; }
.pk__links a { font-size: 13px; font-weight: 600; text-decoration: none; }
.pk__zeigen { color: var(--patina); } .pk__mehr { color: var(--ink); }
.pk__links a:hover, .pk__zeigen.is-on { text-decoration: underline; text-underline-offset: 3px; }
.pk__bild { display: block; width: 76px; height: 76px; border-radius: 12px; overflow: hidden; background: var(--bg); }
.pk__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk__bild.ki-img .ki-img__note, .ue-form__bild.ki-img .ki-img__note { left: 3px; bottom: 3px; padding: 1px 5px; font-size: 0; }
.pk__bild.ki-img .ki-img__note::before, .ue-form__bild.ki-img .ki-img__note::before { content: "KI"; font-size: 9px; }
.pk--ohne { grid-template-columns: minmax(0, 1fr); }
.pk__bild--leer { display: grid; place-items: center; color: #B9BFBA; }
.pk__bild--leer svg { width: 60%; }
.pk__bild--svg { display: grid; place-items: center; padding: 6px; }
.pk__bild--svg svg { width: 100%; height: auto; }
@media (max-width: 1000px) { .pn__karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .pn__karten { grid-template-columns: minmax(0, 1fr); } .pn__reiter { border-radius: 18px; } }

/* Hubs (02.10.2026): Sprungknopf zu den Serien, Karten mit kleinem Bild, Weiterlesen-Reiter */
.hub-sprung { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 12px 0 22px; }
.hub-sprung__serien { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--radius-pill); background: var(--ink); color: var(--card); font: 600 14.5px/1 var(--font-body); text-decoration: none; }
.hub-sprung__serien:hover { background: var(--patina); color: #fff; }
.hub-sprung ul { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
.hub-sprung ul a { color: var(--ink-soft); text-decoration: none; }
.hub-sprung ul a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.fk--bild { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 14px; align-items: start; }
.fk__inhalt { display: flex; flex-direction: column; gap: 6px; min-width: 0; height: 100%; }
a.pk--link { text-decoration: none; color: inherit; transition: box-shadow .15s ease, transform .15s ease; }
a.pk--link:hover { box-shadow: var(--shadow-md, 0 6px 20px rgba(20,25,23,.10)); transform: translateY(-1px); }
a.pk--link strong { font: 600 15.5px/1.3 var(--font-head); color: var(--ink); }
.pn__zahl { font-weight: 500; opacity: .6; margin-left: 2px; }
.pn--js .pn__karten { margin-top: 14px; }
.pn--an .pn__titel--ohne-js { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pn--js:not(.pn--an) .pn__titel--ohne-js { position: static; width: auto; height: auto; clip: auto; margin: 18px 0 0; font-size: 16px; }
.pn__alle { margin: 14px 2px 0; font-size: 14px; }

/* Startseite: FAQ „Pfanne kaufen“ zweispaltig */
.ek-faq--zwei { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.ek-faq--zwei .ek-faq__a { max-width: none; }
.ek-faq--zwei .ek-faq__a p { margin: 0 0 8px; }
.ek-faq--zwei .ek-faq__a a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
@media (max-width: 800px) { .ek-faq--zwei { grid-template-columns: minmax(0, 1fr); } }

/* Serienliste: Suche, Sortierung, Ansicht nach Marke (02.10.2026) */
.sf__leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 12px; padding: 10px 12px; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); }
.sf__suche { flex: 1 1 220px; min-width: 0; }
.sf__suche input { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font: inherit; font-size: 14.5px; color: var(--ink); }
.sf__suche input:focus { outline: 2px solid var(--patina); outline-offset: 1px; background: #fff; }
.sf__sort { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-soft); }
.sf__sort select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font: inherit; font-size: 14px; color: var(--ink); max-width: 100%; }
.sf__ansicht { display: inline-flex; padding: 3px; background: var(--bg); border-radius: var(--radius-pill); }
.sf__ansicht button { border: 0; background: none; padding: 7px 14px; border-radius: var(--radius-pill); font: 600 13.5px/1 var(--font-body); color: var(--ink); cursor: pointer; }
.sf__ansicht button.is-on { background: var(--ink); color: var(--card); }
.sf__gruppe--lang[open] { max-height: 300px; overflow-y: auto; }
.sf__marken { display: grid; gap: 8px; }
.sf__mgruppe { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); }
.sf__mgruppe > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: baseline; padding: 13px 18px; cursor: pointer; list-style: none; }
.sf__mgruppe > summary::-webkit-details-marker { display: none; }
.sf__mgruppe > summary strong { font: 600 16px/1.3 var(--font-head); }
.sf__mgruppe > summary strong::before { content: '+'; display: inline-block; width: 18px; font-weight: 400; color: var(--ink-soft); }
.sf__mgruppe[open] > summary strong::before { content: '–'; }
.sf__mland { font-size: 13px; color: var(--ink-soft); }
.sf__mzahl { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sf__mgruppe > .sf__liste { padding: 4px 16px 4px; }
.sf__mgruppe .sf__karte { box-shadow: inset 0 0 0 1px var(--line); }
.sf__mfuss { margin: 0; padding: 12px 18px 14px; font-size: 13.5px; }
.sf__mfuss a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
@media (max-width: 700px) { .sf__sort span { display: none; } .sf__sort, .sf__sort select { flex: 1 1 auto; } .sf__mgruppe > summary { grid-template-columns: minmax(0, 1fr) auto; } .sf__mland { display: none; } }

/* Markenseite (Neuaufbau 02.10.2026): volle Breite, ohne Seitenleiste */
.mk-kopf { padding: 14px 0 6px; display: flex; flex-direction: column; gap: 12px; }
.mk-kopf h1 { margin: 0; }
.mk-kopf .lede { margin: 0; max-width: 70ch; }
.mk-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 4px; }
.mk-knopf { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: var(--radius-pill); background: var(--card); color: var(--ink); font: 600 14.5px/1 var(--font-body); text-decoration: none; box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); }
.mk-knopf:hover { box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--ink); }
.mk-stats__hinweis { font-size: 12.5px; color: var(--ink-soft); margin-left: auto; }
.mk-serien { padding-top: 34px; }
.sf--ausfuehrlich .sf__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf--ausfuehrlich .sf__karte { scroll-margin-top: 150px; }
.sf--ausfuehrlich .sf__karte:target { box-shadow: var(--shadow-sm), inset 0 0 0 2px var(--patina); }
.sf--ausfuehrlich .sf__name { font-size: 19px; }
.sf__badge { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--bg); font: 600 11px/1.5 var(--font-body); letter-spacing: .03em; color: var(--ink-soft); }
.sf__eck { margin: 0; font-size: 13px; color: var(--ink-soft); }
.sf__text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.mk-text { max-width: 75ch; margin: 0; }
.mk-hersteller { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: center; margin: 44px 0 0; padding: 24px 26px; border-radius: var(--radius-card); background: #E1E9E8; }
.mk-hersteller h2 { margin: 4px 0 8px; font-size: 21px; }
.mk-hersteller p { margin: 0 0 10px; max-width: 70ch; font-size: 14.5px; }
.mk-hersteller ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--ink-soft); display: grid; gap: 3px; }
.mk-hersteller__knopf { display: inline-block; padding: 12px 20px; border-radius: var(--radius-pill); background: var(--ink); color: var(--card); font: 600 14.5px/1 var(--font-body); text-decoration: none; white-space: nowrap; }
.mk-hersteller__knopf:hover { background: var(--patina); color: #fff; }
.mk-quellen { margin: 0; padding-left: 18px; font-size: 14px; display: grid; gap: 4px; }
@media (max-width: 900px) { .sf--ausfuehrlich .sf__liste { grid-template-columns: minmax(0, 1fr); } .mk-hersteller { grid-template-columns: minmax(0, 1fr); } .mk-stats__hinweis { margin-left: 0; flex-basis: 100%; } }
.sf__ansicht[hidden] { display: none; }

/* Übersichten /formen und /aufbau/…: kleines Bild rechts statt großem Bild oben (02.10.2026) */
.ue-karte.ue-form, .ue-karte.ue-flaeche { flex-direction: row-reverse; align-items: flex-start; }
.ue-karte.ue-form > .ue-karte__body, .ue-karte.ue-flaeche > .ue-karte__body { align-self: stretch; min-width: 0; }
.ue-karte.ue-form > .ue-form__bild, .ue-karte.ue-flaeche > .ue-flaeche__bildlink { flex: 0 0 76px; margin: 16px 16px 0 0; }
.ue-karte .ue-form__bild { width: 76px; height: 76px; aspect-ratio: auto; border-radius: 12px; }

/* Pfannenfinder-Ergebnis (03.10.2026): Vergleich aller Kombinationen, passende Serien */
.rv { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.rv__titel { margin: 0 0 6px; font: 600 19px/1.3 var(--font-head); }
.rv__intro { margin: 14px 0 8px; font-size: 14.5px; color: var(--ink-soft); max-width: 75ch; }
.rv__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rv__z { display: grid; grid-template-columns: 72px minmax(0, 270px) minmax(0, 1fr) 180px; gap: 6px 20px; align-items: center; padding: 11px 14px; border-radius: 12px; background: var(--bg); }
.rv__z--s0 { background: var(--patina-soft); box-shadow: inset 0 0 0 1.5px var(--patina); }
.rv__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.rv__kopf strong { font-size: 14.5px; }
.rv__stufe { font-size: 11.5px; font-weight: 600; letter-spacing: .02em; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--card); color: var(--ink-soft); white-space: nowrap; }
.rv__z--s0 .rv__stufe { background: var(--patina); color: #fff; }
.rv__z--s1 .rv__stufe { color: var(--patina); box-shadow: inset 0 0 0 1px var(--patina); }
.rv__diff { display: grid; gap: 2px; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }
.rv__plus::before { content: "+ "; font-weight: 700; color: var(--patina); }
.rv__minus::before { content: "− "; font-weight: 700; color: var(--ember); }
.rv__serien { font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; justify-self: end; }
a.rv__serien:hover { text-decoration: underline; text-underline-offset: 3px; }
.rv__serien--leer { font-weight: 400; color: var(--ink-soft); }
.rv__aus, .rv__fuss { margin: 12px 0 0; font-size: 13px; color: var(--ink-soft); max-width: 80ch; }
.rc-serien { margin-top: 34px; }
.rc-serien__alle { margin: 18px 0 0; }
@media (max-width: 800px) { .rv__z { grid-template-columns: 60px minmax(0, 1fr); } .rv__z > .rv__diff, .rv__z > .rv__serien { grid-column: 1 / -1; } .rv__serien { justify-self: start; } }
.rv__bild { display: grid; place-items: center; width: 72px; height: 48px; padding: 4px; border-radius: 8px; background: var(--card); }
.rv__bild svg { width: 100%; height: auto; display: block; }
.rv__mehr { margin-top: 8px; }
.rv__mehr > summary { cursor: pointer; padding: 8px 2px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.rv__mehr[open] > summary { margin-bottom: 4px; }
.rv__haltung { margin-top: 16px; padding: 13px 16px; border-radius: 12px; background: var(--card); box-shadow: inset 3px 0 0 var(--patina), inset 0 0 0 1px var(--line); font-size: 14px; line-height: 1.55; }
.rv__haltung b { color: var(--patina); }
.rv__haltung-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 6px; }
.rv__haltung-links a { font-weight: 600; color: var(--ink); text-underline-offset: 3px; }
@media (max-width: 800px) { .rv__bild { width: 60px; height: 42px; } }

/* Finder-Ergebnis: Überblick bei mehreren Pfannen, Schnellzugriff oben in der Karte (03.10.2026) */
.eg-ueber { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 6px 0 4px; }
.eg-ueber--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.eg-kachel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--radius-card); background: var(--card); box-shadow: var(--shadow-sm), inset 0 0 0 1.5px var(--patina); color: var(--ink); text-decoration: none; }
.eg-kachel:hover { box-shadow: var(--shadow-md), inset 0 0 0 1.5px var(--patina); }
.eg-kachel__nr { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--patina); color: #fff; font: 600 16px/1 var(--font-head); }
.eg-kachel__text { display: grid; gap: 3px; min-width: 0; }
.eg-kachel__fuer { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--patina); }
.eg-kachel__text strong { font: 600 17px/1.3 var(--font-head); }
.eg-kachel__mehr { font-size: 13px; color: var(--ink-soft); }
.eg-kachel__bild { display: grid; place-items: center; width: 84px; height: 56px; padding: 4px; border-radius: 10px; background: var(--bg); }
.eg-kachel__bild svg { width: 100%; height: auto; display: block; }
.rc { scroll-margin-top: 150px; }
.rv { scroll-margin-top: 150px; }
.rc__schnell { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 2px 0 16px; }
.rc__schnell a { display: inline-flex; align-items: center; padding: 7px 13px; border-radius: var(--radius-pill); background: var(--bg); color: var(--ink); font: 600 13px/1.2 var(--font-body); text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); }
.rc__schnell a:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.rc__schnell a.rc__schnell-haupt { background: var(--ember); color: #FBF3EE; box-shadow: none; }
.rc__schnell a.rc__schnell-haupt:hover { filter: brightness(.94); }
@media (max-width: 800px) { .eg-ueber, .eg-ueber--3 { grid-template-columns: minmax(0, 1fr); gap: 10px; } .eg-kachel { grid-template-columns: auto minmax(0, 1fr); padding: 12px 14px; gap: 12px; } .eg-kachel__bild { display: none; } .eg-kachel__text strong { font-size: 15.5px; } .eg-kachel__nr { width: 28px; height: 28px; font-size: 14px; } }

/* Stufenleiter der Bauarten (ENTWURF 03.10.2026): schmale Leiste, ganze Leiter im Fenster */
.sl__leiste { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 20px 28px; align-items: end; padding: 18px 22px; border-radius: var(--radius-card); background: var(--card); box-shadow: var(--shadow-sm); }
.sl__leiste-text h2 { margin: 0 0 4px; font-size: 20px; }
.sl__leiste-text p { margin: 0 0 8px; font-size: 14px; color: var(--ink-soft); }
.sl__treppe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; }
.sl__treppe li a { display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 10px 12px calc(8px + var(--h, 1) * 7px); border-radius: 12px; background: var(--bg); color: var(--ink); text-decoration: none; box-shadow: inset 0 calc(var(--h, 1) * -5px) 0 var(--patina-soft); transition: box-shadow .15s ease; }
.sl__treppe li a:hover { box-shadow: inset 0 calc(var(--h, 1) * -5px) 0 var(--patina-soft), inset 0 0 0 1.5px var(--ink); }
.sl__treppe li a { min-height: calc(74px + var(--h, 1) * 13px); }
.sl__treppe strong { font: 600 14px/1.25 var(--font-head); }
.sl__tpreis { font-size: 12px; color: var(--ink-soft); }
.sl__treppe .sl__nr { min-width: 24px; height: 24px; font-size: 12.5px; align-self: flex-start; }
.sl__trenner { margin-top: 0 !important; align-self: stretch; display: grid; place-items: center; border-left: 2px dashed var(--patina); padding-left: 2px; opacity: .8; }
.sl__trenner span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--patina); white-space: nowrap; }
.sl__nr { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 15px; background: var(--ink); color: var(--card); font: 600 14px/1 var(--font-head); }
.sl__fenster { width: min(1120px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 22px 26px 26px; border: 0; border-radius: 20px; background: var(--bg); color: var(--ink); box-shadow: 0 20px 60px rgba(20, 25, 23, .35); }
.sl__fenster::backdrop { background: rgba(20, 25, 23, .5); }
.sl__fenster[open] { display: grid; gap: 16px; }
.sl__fenster-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sl__fenster-kopf h2 { margin: 0; font-size: 22px; }
.sl__fenster .ek-sub { margin: -8px 0 0; }
.sl__fenster .sl__zu { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border: 0; border-radius: 50%; background: var(--card); font-size: 22px; line-height: 1; color: var(--ink); cursor: pointer; box-shadow: var(--shadow-sm); }
.sl__abschnitt { display: grid; gap: 10px; }
.sl__titel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.sl__titel strong { font: 600 17px/1.3 var(--font-head); }
.sl__titel span { font-size: 13.5px; color: var(--ink-soft); }
.sl__reihe { display: grid; gap: 12px; align-items: stretch; }
.sl__reihe--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sl__reihe--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sl__stufe { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; border-radius: var(--radius-card); background: var(--card); box-shadow: var(--shadow-sm); }
.sl__stufe.is-ziel { box-shadow: var(--shadow-sm), inset 0 0 0 2px var(--patina); }
.sl__kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sl__bild { display: grid; place-items: center; width: 76px; height: 50px; padding: 4px; border-radius: 10px; background: var(--bg); }
.sl__bild svg { width: 100%; height: auto; display: block; }
.sl__stufe h3 { margin: 4px 0 0; font: 600 15.5px/1.3 var(--font-head); }
.sl__stufe p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }
.sl__stufe p.sl__preis { font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--patina); }
.sl__wenn b, .sl__plus b { color: var(--ink); }
.sl__mehr::before { content: "+ "; font-weight: 700; color: var(--patina); }
.sl__haken::before { content: "− "; font-weight: 700; color: var(--ember); }
.sl__stufe p.sl__plus { margin-top: 4px; padding: 8px 10px; border-radius: 10px; background: var(--bg); font-size: 13px; }
.sl__plus a, .sl__hinweis a { font-weight: 600; color: var(--ink); text-underline-offset: 3px; white-space: nowrap; }
.sl__hinweis { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.sl__hinweis b { color: var(--ink); }
.sl__serien { margin-top: auto; padding-top: 8px; font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; }
a.sl__serien:hover { text-decoration: underline; text-underline-offset: 3px; }
.sl__serien--leer { font-weight: 400; color: var(--ink-soft); }
.sl__bruch { display: flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 600; color: var(--patina); }
.sl__bruch::before, .sl__bruch::after { content: ''; flex: 1; height: 0; border-top: 2px dashed var(--patina); opacity: .5; }
.sl__bruch span { max-width: 62ch; text-align: center; }
.sl__paar { grid-column: span 2; display: grid; grid-template-rows: auto 1fr; gap: 8px; padding: 10px; border-radius: calc(var(--radius-card) + 6px); background: var(--patina-soft); }
.sl__paar-kopf { font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--patina); padding: 2px 6px 0; }
.sl__paar-reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sl__seite { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 24px; align-items: center; padding: 14px 18px; border-radius: var(--radius-card); background: var(--card); box-shadow: inset 3px 0 0 var(--ink), var(--shadow-sm); font-size: 14px; line-height: 1.5; }
.sl__seite-links { display: grid; gap: 4px; }
.sl__seite-links a { font-weight: 600; color: var(--ink); text-underline-offset: 3px; white-space: nowrap; }
@media (max-width: 1000px) { .sl__reihe--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sl__leiste { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .sl__treppe { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .sl__treppe li a { min-height: 0; }
  .sl__treppe li a { flex-direction: row; align-items: center; gap: 10px; padding: 9px 12px; box-shadow: inset calc(var(--h, 1) * 5px) 0 0 var(--patina-soft); padding-left: calc(12px + var(--h, 1) * 5px); }
  .sl__treppe .sl__nr { align-self: center; }
  .sl__tpreis { margin-left: auto; white-space: nowrap; }
  .sl__trenner { border-left: 0; border-top: 2px dashed var(--patina); padding: 4px 0 0; }
  .sl__trenner span { writing-mode: horizontal-tb; transform: none; }
  .sl__reihe--4, .sl__reihe--2, .sl__paar-reihe, .sl__seite { grid-template-columns: minmax(0, 1fr); }
  .sl__paar { grid-column: auto; }
  .sl__fenster { padding: 16px 14px 20px; border-radius: 16px; }
}

/* Pannenhilfe (ENTWURF 03.10.2026) */
.ph__kopf { padding: 14px 0 20px; display: grid; gap: 10px; }
.ph__kopf h1 { margin: 0; }
.ph__kopf .lede { margin: 0; max-width: 62ch; }
.ph__symptome { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.ph__symptom { border-radius: var(--radius-card); background: var(--card); box-shadow: var(--shadow-sm); scroll-margin-top: 150px; }
.ph__symptom > summary { display: grid; gap: 4px; padding: 18px 20px; cursor: pointer; list-style: none; border-radius: var(--radius-card); }
.ph__symptom > summary::-webkit-details-marker, .ph__opt > summary::-webkit-details-marker { display: none; }
.ph__symptom > summary strong { font: 600 18px/1.3 var(--font-head); }
.ph__symptom > summary span { font-size: 14px; color: var(--ink-soft); }
.ph__symptom > summary:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.ph__symptom[open] { grid-column: 1 / -1; box-shadow: var(--shadow-md), inset 0 0 0 1.5px var(--patina); }
.ph__symptom[open] > summary { padding-bottom: 6px; }
.ph__symptom[open] > summary:hover { box-shadow: none; }
.ph__symptom[open] > summary strong::after { content: "  ändern"; font: 500 13px/1 var(--font-body); color: var(--patina); text-decoration: underline; text-underline-offset: 3px; }
.ph--js.hat-wahl > .ph__symptom:not([open]) { display: none; }
.ph__weg { padding: 6px 20px 22px; }
.ph__f { margin: 14px 0 10px; font: 600 16px/1.3 var(--font-head); }
.ph__optionen { display: flex; flex-wrap: wrap; gap: 8px; }
.ph__opt { flex: 0 1 auto; }
.ph__opt > summary { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: var(--radius-pill); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); font: 600 14.5px/1.2 var(--font-body); cursor: pointer; list-style: none; }
.ph__opt > summary:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.ph__opt[open] { flex: 1 1 100%; }
.ph__opt[open] > summary { background: var(--ink); color: var(--card); box-shadow: none; }
.ph__opt[open] > summary::after { content: "ändern"; margin-left: 10px; font-weight: 500; font-size: 12.5px; opacity: .75; text-decoration: underline; text-underline-offset: 3px; }
.ph--js .ph__optionen.hat-wahl > .ph__opt:not([open]) { display: none; }
.ph__ergebnis { margin-top: 16px; padding: 18px 20px; border-radius: 14px; background: var(--bg); display: grid; gap: 10px; }
.ph__art { justify-self: start; padding: 4px 10px; border-radius: var(--radius-pill); font: 600 12px/1.2 var(--font-body); letter-spacing: .03em; background: var(--patina); color: #fff; }
.ph__ergebnis--bauart .ph__art { background: var(--ember); }
.ph__ergebnis--normal .ph__art { background: var(--ink-soft); }
.ph__ergebnis--passung .ph__art { background: var(--ink); }
.ph__artzusatz { margin-top: -4px; font-size: 13px; color: var(--ink-soft); }
.ph__ursache { margin: 0; font-size: 15.5px; line-height: 1.55; max-width: 75ch; }
.ph__hilft { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14.5px; line-height: 1.5; max-width: 75ch; }
.ph__links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.ph__artikel { display: grid; gap: 2px; padding: 10px 14px; border-radius: 12px; background: var(--card); box-shadow: var(--shadow-sm); color: var(--ink); font: 600 14px/1.3 var(--font-body); text-decoration: none; }
.ph__artikel span { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--patina); }
.ph__artikel:hover { box-shadow: var(--shadow-sm), inset 0 0 0 1.5px var(--ink); }
.ph__fuss { margin: 34px 0 10px; padding: 16px 20px; border-radius: var(--radius-card); background: var(--patina-soft); font-size: 14.5px; }
.ph__fuss p { margin: 0; } .ph__fuss a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
@media (max-width: 900px) { .ph__symptome { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ph__symptome { grid-template-columns: minmax(0, 1fr); } .ph__weg { padding: 6px 16px 18px; } .ph__symptom > summary { padding: 15px 16px; } }
/* „Lieber selbst nachlesen?“ als Karten (08.10.2026) */
.ph-lesen__filter { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 16px; padding: 2px 0 4px; scrollbar-width: none; }
.ph-lesen__filter[hidden] { display: none; }
.ph-lesen__chip { flex: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: var(--radius-pill); padding: 8px 14px; font: 500 14px/1.2 var(--font-body); cursor: pointer; }
.ph-lesen__chip small { color: var(--ink-soft); font-size: 12px; }
.ph-lesen__chip[aria-pressed="true"] { background: var(--ink); color: var(--card); border-color: var(--ink); }
.ph-lesen__chip[aria-pressed="true"] small { color: inherit; opacity: .75; }
.ph-lesen__chip:focus-visible, .ph-lesen__mehr:focus-visible, .ph-karte:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.ph-lesen__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.ph-lesen__liste > li[hidden] { display: none; }
.ph-karte { display: flex; flex-direction: column; height: 100%; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); overflow: hidden; color: var(--ink); text-decoration: none; transition: box-shadow .15s, transform .15s; }
.ph-karte:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.ph-karte__bild { display: block; aspect-ratio: 16 / 9; background: var(--patina-soft); overflow: hidden; }
.ph-karte__bild > img { width: 100%; height: 100%; object-fit: cover; }
.ph-karte__bild--leer { background: var(--patina-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5.5h6a2 2 0 012 2V19a2 2 0 00-2-2H4zM20 5.5h-6a2 2 0 00-2 2V19a2 2 0 012-2h6z' fill='none' stroke='%233F6367' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center/32px no-repeat; }
.ph-karte__bild--leer .ki-img__note { display: none; }
.ph-karte__text { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.ph-karte__art { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--patina); font-weight: 600; }
.ph-karte__titel { font: 600 16px/1.35 var(--font-head); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ph-karte__bei { margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--ink-soft); }
.ph-lesen__mehr { display: block; margin: 18px auto 0; border: 1px solid var(--ink); background: transparent; color: var(--ink); border-radius: var(--radius-pill); padding: 11px 20px; font: 500 15px/1.2 var(--font-body); cursor: pointer; }
.ph-lesen__mehr[hidden] { display: none; }
@media (max-width: 640px) {
  .ph-lesen__liste { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ph-karte { flex-direction: row; align-items: center; gap: 12px; padding: 10px; }
  .ph-karte__bild { flex: none; width: 96px; height: 72px; aspect-ratio: auto; border-radius: 12px; }
  .ph-karte__bild.ki-img .ki-img__note { left: 3px; bottom: 3px; padding: 1px 5px; font-size: 0; }
  .ph-karte__bild.ki-img .ki-img__note::before { content: "KI"; font-size: 9px; }
  .ph-karte__text { padding: 0; min-width: 0; gap: 2px; }
  .ph-karte__titel { font-size: 15px; -webkit-line-clamp: 2; }
  .ph-karte__bei { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
}
/* Titelbild Problemlöser */
.ph__kopf--bild { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 28px; }
.ph__kopftext { display: grid; gap: 10px; }
.ph__titelbild { border-radius: var(--radius-hero); overflow: hidden; aspect-ratio: 16 / 10; background: var(--patina-soft); box-shadow: var(--shadow-md); }
.ph__titelbild[hidden] { display: none; }
.ph__titelbild > img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) {
  .ph__kopf--bild { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ph__titelbild { order: -1; aspect-ratio: 16 / 8; border-radius: var(--radius-card); }
}
@media (max-width: 900px) { .ph__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ph__liste { grid-template-columns: minmax(0, 1fr); } }
.ph__weiter { margin: 0; font-size: 14.5px; line-height: 1.5; max-width: 75ch; }
.ph__weiter b { color: var(--ember); }

/* Serienseite (06.10.2026): /marken/{marke}/{serie} */
.se-kopf { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px 40px; align-items: start; padding: 8px 0 8px; }
.se-kopf h1 { margin: 6px 0 10px; }
.se-label { max-width: 70ch; margin: 14px 0 16px; padding: 12px 16px; background: var(--patina-soft); border-left: 4px solid var(--patina); border-radius: 0 12px 12px 0; font-size: 14.5px; line-height: 1.5; }
.se-bild { margin: 0; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 18px 18px 12px; }
.se-bild svg { width: 100%; height: auto; display: block; }
.se-bild figcaption { margin-top: 8px; font-size: 12.5px; color: var(--ink-soft); text-align: center; }
.se-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.se-karte { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 20px 22px; }
.se-karte__frage { display: block; font: 700 12px/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--patina); margin-bottom: 10px; }
.se-karte__gross { margin: 0 0 10px; font: 600 22px/1.2 var(--font-head); }
.se-karte__gross--leise { color: var(--ink-soft); }
.se-karte__klein { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.se-karte__klein b { color: var(--ink); }
.se-karte__lage { margin: 0 0 8px; font-size: 14.5px; font-weight: 600; }
.se-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; align-items: center; }
.se-mehr { font-size: 13px; color: var(--ink-soft); }
.se-karte__wege { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13.5px; }
.se-karte__wege a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.se-dl { margin: 0; display: grid; gap: 0; }
.se-dl > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.se-dl dt { color: var(--ink-soft); } .se-dl dd { margin: 0; }
.se-karte--nicht { background: #fbf3ea; box-shadow: inset 0 0 0 1px #ecd9c2; }
.se-karte--nicht .se-karte__frage { color: var(--ember); }
.se-nicht { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.se-nicht li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.5; }
.se-nicht li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 10px; height: 2px; background: var(--ember); }
.se-angaben { margin: 0 0 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 8px 22px; }
.se-angaben > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.se-angaben dt { color: var(--ink-soft); } .se-angaben dd { margin: 0; font-weight: 600; }
.se-angaben .is-leer dd { font-weight: 400; color: var(--ink-soft); font-style: italic; }
.se-text { max-width: 78ch; font-size: 15.5px; line-height: 1.6; }
.se-chip--alle { background: var(--ink) !important; color: var(--card) !important; }
.se-als { margin: -20px -22px 16px; padding: 16px 22px 14px; background: var(--bg); border-radius: var(--radius-card) var(--radius-card) 0 0; border-bottom: 1px solid var(--line); }
.se-als .se-karte__frage { color: var(--ink-soft); margin-bottom: 4px; }
.se-als p { margin: 0; font: 600 22px/1.2 var(--font-head); }
.se-als small { font: 400 13px/1.2 var(--font-body); color: var(--ink-soft); margin-left: 8px; }
.se-karte--breit { grid-column: 1 / -1; }
.se-karte--breit .se-nicht { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 28px; }
.se-karte--breit .se-nicht:has(li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.se-karte--breit .se-nicht:has(li:only-child) { grid-template-columns: minmax(0, 78ch); }
@media (max-width: 800px) {
  .se-karte--breit .se-nicht { grid-template-columns: minmax(0, 1fr) !important; }
  .se-als { margin: -16px -16px 14px; padding: 14px 16px 12px; }
  .se-kopf, .se-raster, .se-angaben { grid-template-columns: minmax(0, 1fr); }
  .se-karte { padding: 16px; } .se-karte__gross { font-size: 19px; }
  .se-dl > div, .se-angaben > div { grid-template-columns: 104px minmax(0, 1fr); }
}
.se-quelle { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-soft); max-width: 78ch; }
.se-quelle a { color: var(--ink); }
.sf__seite-link { display: inline-block; margin-top: 8px; font: 600 13.5px/1.3 var(--font-body); color: var(--ink); text-underline-offset: 3px; }

/* Serienfilter in vier Ebenen (06.10.2026) */
.sf__ebene { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font: 700 11px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--patina); }
.sf__filter-kopf + .sf__ebene { border-top: 0; margin-top: 4px; }
.sf__ebene ~ .sf__gruppe { border-bottom: 0; padding: 10px 0 2px; }
.sf__ebene ~ .sf__gruppe .sf__lab { font-size: 14.5px; text-transform: none; letter-spacing: 0; color: var(--ink); justify-content: flex-start; gap: 8px; align-items: baseline; }
.sf__ebene ~ .sf__gruppe .sf__lab small { font-weight: 400; font-size: 12px; color: var(--ink-soft); }
.sf__ebene ~ .sf__gruppe .sf__lab::after { margin-left: auto; color: var(--ink-soft); }
.sf__opt--ober .sf__optname { font-weight: 500; }
.sf__opt--kind { width: calc(100% - 22px); margin-left: 22px; padding-left: 10px; border-left: 2px solid var(--line); border-radius: 0 6px 6px 0; font-size: 13.5px; }
/* Formen in drei Gruppen wie auf /formen, alle offen (09.10.2026) */
.sf__unter { display: block; margin: 10px 0 2px; font: 600 11px/1.3 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.sf__lab + .sf__unter { margin-top: 2px; }

/* ============================================================
   Kochmodus (Web-App Paket 1, 08.10.2026; kochmodus.js, components/kochmodus.php)
   Start-Knopf auf der Rezeptseite, Leiste unten (Handy), Vollbild-Ansicht .km
   ============================================================ */
.km-start { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.km-start[hidden] { display: none; }
.km-start__knopf { display: inline-flex; align-items: center; gap: 8px; background: var(--ember); color: #FBF3EE; border: none; border-radius: var(--radius-pill); padding: 12px 22px; font: 500 15px/1.2 var(--font-body); cursor: pointer; box-shadow: var(--shadow-md); }
.km-start__knopf:hover { filter: brightness(1.05); }
.km-start__knopf:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.km-start__info { font-size: 13px; color: var(--ink-soft); }
.km-start--leiste { display: none; }
@media (max-width: 820px) {
  .km-start--leiste:not([hidden]) { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40; margin: 0; padding: 8px 8px 8px 16px; background: var(--card); border-radius: var(--radius-pill); box-shadow: var(--shadow-lg); flex-wrap: nowrap; justify-content: space-between; transform: translateY(150%); transition: transform .2s ease; }
  .km-start--leiste .km-start__info { order: -1; font-size: 12.5px; line-height: 1.3; }
  .km-start--leiste .km-start__knopf { padding: 10px 16px; font-size: 14px; white-space: nowrap; box-shadow: none; }
  .km-start--leiste.km-leiste--an { transform: none; }
}
html.km-offen .km-start--leiste { transform: translateY(150%) !important; }

/* Zutaten abhaken (nur mit Skript) */
.km-hakliste { list-style: none; padding-left: 0 !important; }
.km-hak { position: relative; padding-left: 30px; cursor: pointer; border-radius: 6px; }
.km-hak::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border: 1.5px solid var(--ink-soft); border-radius: 5px; background: var(--card); }
.km-hak.km-hak--an::before { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; border-color: var(--ink); }
.km-hak.km-hak--an { color: var(--ink-soft); text-decoration: line-through; }
.km-hak:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Vollbild */
html.km-offen, html.km-offen body { overflow: hidden; }
.km { --km-bg: #F6F7F4; --km-ink: #1D2321; --km-soft: #5C6360; --km-flaeche: #FFFFFF; --km-linie: #DADDD7; --km-chip: #E9ECE7;
  position: fixed; inset: 0; z-index: 900; display: flex; flex-direction: column; background: var(--km-bg); color: var(--km-ink);
  font-family: var(--font-body); padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.km[hidden] { display: none; }
.km[data-thema="dunkel"] { --km-bg: #171C1A; --km-ink: #F1F3EF; --km-soft: #AEB5B1; --km-flaeche: #232A27; --km-linie: #39423E; --km-chip: #2C3431; }
.km button { font-family: inherit; }
.km__kopf { display: flex; align-items: center; gap: 8px; padding: 12px 16px 8px; }
.km__zu { flex: none; width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--km-chip); color: var(--km-ink); display: grid; place-items: center; cursor: pointer; }
.km__titel { flex: 1; min-width: 0; font-size: 14px; color: var(--km-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.km__knopf { flex: none; border: none; background: var(--km-chip); color: var(--km-ink); border-radius: var(--radius-pill); padding: 9px 14px; font-size: 14px; font-weight: 500; cursor: pointer; }
.km__knopf--an { background: var(--km-ink); color: var(--km-bg); }
.km__fortschritt { display: flex; gap: 5px; padding: 6px 16px 10px; }
.km__fortschritt span { flex: 1; height: 4px; border-radius: 2px; background: var(--km-linie); }
.km__fortschritt span.km--erledigt, .km__fortschritt span.km--jetzt { background: var(--km-ink); }
.km__fortschritt span.km--jetzt { opacity: .55; }
.km__leiste { display: flex; gap: 8px; padding: 0 16px 6px; overflow-x: auto; }
.km__leiste[hidden] { display: none; }
.km-chip { flex: none; display: inline-flex; gap: 8px; align-items: baseline; border: none; background: var(--km-chip); color: var(--km-ink); border-radius: var(--radius-pill); padding: 7px 12px; font-size: 13px; cursor: pointer; }
.km-chip__uhr { font-variant-numeric: tabular-nums; font-weight: 600; }
.km-chip--ende { background: var(--ember); color: #FBF3EE; }
.km__buehne { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px 20px 24px; }
.km__innen { max-width: 640px; margin: 0 auto; }
.km__nr { margin: 0 0 10px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--km-soft); }
.km__h { margin: 0 0 14px; font-family: var(--font-head); font-weight: 600; font-size: clamp(26px, 6.4vw, 40px); line-height: 1.18; color: var(--km-ink); outline: none; }
.km__text { margin: 0 0 18px; font-size: clamp(18px, 4.6vw, 22px); line-height: 1.5; color: var(--km-ink); opacity: .86; }
.km__bild { margin: 0 0 16px; }
.km__bild img { width: 100%; max-height: 34vh; object-fit: cover; border-radius: var(--radius-control); display: block; }
.km__bild figcaption { font-size: 12px; color: var(--km-soft); margin-top: 4px; }
.km__video { margin: 0 0 16px; }
.km-timer { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--km-flaeche); border: 1px solid var(--km-linie); border-radius: var(--radius-card); padding: 14px 14px 14px 18px; margin: 0 0 12px; }
.km-timer__unter { font-size: 13px; color: var(--km-soft); }
.km-timer__uhr { font-family: var(--font-head); font-weight: 600; font-size: 34px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.km-timer__knoepfe { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.km-timer__knopf { border: 1px solid var(--km-linie); background: transparent; color: var(--km-ink); border-radius: var(--radius-pill); padding: 10px 16px; font-size: 15px; font-weight: 500; cursor: pointer; }
.km-timer__knopf--haupt { background: var(--km-ink); color: var(--km-bg); border-color: var(--km-ink); }
.km-timer--ende { border-color: var(--ember); box-shadow: 0 0 0 2px var(--ember) inset; }
.km-timer--ende .km-timer__uhr { color: var(--ember); }
.km[data-thema="dunkel"] .km-timer--ende .km-timer__uhr { color: #F08A5D; }
.km__pflege { background: var(--km-flaeche); border: 1px solid var(--km-linie); border-radius: var(--radius-card); padding: 14px 18px; margin-top: 8px; }
.km__pflege-titel { margin: 0 0 4px; font-size: 13px; color: var(--km-soft); }
.km__pflege a { color: var(--km-ink); font-weight: 600; font-size: 17px; }
.km__fuss { display: flex; gap: 10px; padding: 10px 16px 14px; }
.km__zurueck { flex: 0 0 auto; min-width: 96px; border: none; border-radius: 14px; background: var(--km-chip); color: var(--km-ink); padding: 16px 18px; font-size: 17px; font-weight: 600; cursor: pointer; }
.km__zurueck:disabled { opacity: .4; cursor: default; }
.km__weiter { flex: 1; border: none; border-radius: 14px; background: var(--ember); color: #FBF3EE; padding: 16px 18px; font-size: 17px; font-weight: 600; cursor: pointer; }
.km__zurueck:focus-visible, .km__weiter:focus-visible, .km__knopf:focus-visible, .km__zu:focus-visible, .km-timer__knopf:focus-visible, .km-chip:focus-visible { outline: 3px solid var(--km-ink); outline-offset: 2px; }
.km__zutaten { position: absolute; inset: 0; background: var(--km-bg); display: flex; flex-direction: column; padding: calc(12px + env(safe-area-inset-top)) 16px 16px; overflow-y: auto; z-index: 2; }
.km__zutaten[hidden] { display: none; }
.km__zutaten-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.km__zutaten-kopf h2 { margin: 0; flex: 1; font-family: var(--font-head); font-size: 24px; color: var(--km-ink); }
.km__portionen { font-size: 14px; color: var(--km-soft); }
.km__zutatenliste { list-style: none; margin: 0 auto; padding: 0; width: 100%; max-width: 640px; }
.km__zutatenliste li { border-bottom: 1px solid var(--km-linie); }
.km__zutat { display: flex; gap: 14px; align-items: flex-start; width: 100%; text-align: left; border: none; background: none; color: var(--km-ink); padding: 14px 4px; font-size: 18px; line-height: 1.4; cursor: pointer; }
.km__kasten { flex: none; width: 22px; height: 22px; margin-top: 2px; border: 2px solid var(--km-soft); border-radius: 6px; }
.km__zutat.km-hak--an .km__kasten { background: var(--km-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; border-color: var(--km-ink); }
.km[data-thema="dunkel"] .km__zutat.km-hak--an .km__kasten { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23171C1A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.km__zutat.km-hak--an .km__zutat-text { text-decoration: line-through; color: var(--km-soft); }
.km__hinweis { max-width: 640px; margin: 14px auto 0; width: 100%; font-size: 13px; color: var(--km-soft); }
@media (min-width: 821px) {
  .km__buehne { padding-top: 6vh; }
  .km__fuss { max-width: 680px; width: 100%; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .km-start--leiste { transition: none; } }

/* ============================================================
   Meine Küche (Web-App Paket 2, 08.10.2026; meine-kueche.js, kueche.js)
   ============================================================ */
.nav-kueche { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 8px 14px; border: 1px solid var(--ink); border-radius: var(--radius-pill); color: var(--ink); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.nav-kueche:hover { background: var(--bg); color: var(--ink); }
.nav-kueche__zahl { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ink); color: var(--card); font-size: 11px; font-weight: 600; }
@media (max-width: 1100px) { .nav-kueche { padding: 8px 10px; } .nav-kueche__text { display: none; } }
@media (max-width: 860px) { .nav-kueche { margin-left: 4px; padding: 7px 9px; } }

.mk-merken { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 9px 16px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--card); color: var(--ink); font: 500 14px/1.2 var(--font-body); cursor: pointer; }
.mk-merken[hidden] { display: none; }
.mk-merken.mk-merken--an { border-color: var(--ink); }
.mk-merken.mk-merken--an svg path { fill: currentColor; }
.km-start + .mk-merken { margin-left: 0; }
.mk-einladung { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-control); background: var(--patina-soft); color: var(--ink); font-size: 14px; }
.mk-einladung[hidden] { display: none; }
.mk-einladung a { color: var(--patina); font-weight: 600; }
.mk-einladung--filter { margin: 4px 0 6px; padding: 6px 12px; font-size: 13px; background: transparent; }
.fe__habe[hidden] { display: none; }

.mk-wrap { max-width: 720px; }
.mk { padding-top: 8px; padding-bottom: 120px; }
.mk__h1 { font-family: var(--font-head); font-size: clamp(28px, 6vw, 38px); line-height: 1.15; margin: 8px 0 6px; outline: none; }
.mk__h2 { font-family: var(--font-head); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 32px 0 10px; }
.mk__unter { margin: 0 0 16px; color: var(--ink-soft); }
.mk__label { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; }
.mk__leise, .mk__klein { color: var(--ink-soft); font-size: 14px; }
.mk__klein { font-size: 13px; }
.mk__warnung, .mk__noscript { background: var(--ember-soft); border-radius: var(--radius-control); padding: 12px 14px; }
.mk__zurueck { display: inline-block; color: var(--ink-soft); text-decoration: none; font-size: 14px; padding: 6px 0; }
.mk__zurueck--knopf { border: none; background: none; cursor: pointer; font: inherit; font-size: 14px; }
.mk__bearbeiten { border: none; background: none; cursor: pointer; color: var(--ink); font: 500 14px var(--font-body); text-decoration: underline; }
.mk__herd { margin: 14px 0 6px; }
.mk__chips, .mk-links { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-chip { display: inline-flex; align-items: center; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: var(--radius-pill); padding: 8px 14px; font: 500 14px/1.2 var(--font-body); text-decoration: none; cursor: pointer; }
.mk-chip--an { background: var(--ink); color: var(--card); border-color: var(--ink); }
.mk-knopf { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ink); background: var(--card); color: var(--ink); border-radius: var(--radius-pill); padding: 12px 20px; font: 500 15px/1.2 var(--font-body); text-decoration: none; cursor: pointer; }
.mk-knopf--haupt { background: var(--ember); border-color: var(--ember); color: #FBF3EE; box-shadow: var(--shadow-md); }
.mk-knopf--leise { border-color: var(--line); color: var(--ink-soft); }
.mk-knopf:disabled { opacity: .45; cursor: default; box-shadow: none; }
.mk-knopf:focus-visible, .mk-chip:focus-visible, .mk-option:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.mk-aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 8px; }
.mk-leer { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 28px 22px; text-align: center; margin-top: 18px; }
.mk-leer__icon { width: 72px; height: 72px; margin: 0 auto 12px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; color: var(--ink); }
.mk-leer__h { font-family: var(--font-head); font-size: 22px; margin: 0 0 12px; }
.mk-leer__liste { text-align: left; max-width: 420px; margin: 0 auto 20px; padding-left: 20px; color: var(--ink); }
.mk-leer__liste li { margin-bottom: 6px; }
.mk-leer__klein { color: var(--ink-soft); font-size: 13px; margin: 14px 0 0; }
.mk-pfannen, .mk-rezepte { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mk-pfanne { display: flex; align-items: center; gap: 14px; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 12px 16px; color: var(--ink); text-decoration: none; }
.mk-pfanne__bild { flex: none; width: 76px; height: 48px; display: grid; place-items: center; background: var(--bg); border-radius: 12px; overflow: hidden; }
.mk-pfanne__bild svg { width: 70px; height: auto; }
.mk-pfanne__text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mk-pfanne__text span { font-size: 13.5px; color: var(--ink-soft); }
.mk-pfanne__pfeil { color: var(--ink-soft); font-size: 22px; }
.mk-plus { display: block; margin-top: 10px; padding: 14px; border: 1.5px dashed var(--line); border-radius: var(--radius-card); text-align: center; color: var(--ink); text-decoration: none; font-weight: 500; }
.mk-rezept { display: flex; align-items: center; gap: 8px; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 8px 8px 8px 8px; }
.mk-rezept a { flex: 1; display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; min-width: 0; }
.mk-rezept img, .mk-rezept__ohne { flex: none; width: 64px; height: 48px; border-radius: 10px; object-fit: cover; background: var(--bg); }
.mk-rezept__text { display: flex; flex-direction: column; min-width: 0; }
.mk-rezept__text span { font-size: 13px; color: var(--ink-soft); }
.mk-rezept__weg { flex: none; width: 36px; height: 36px; border: none; background: none; color: var(--ink-soft); font-size: 22px; cursor: pointer; border-radius: 50%; }
.mk-profil { display: flex; flex-wrap: wrap; gap: 10px; }
.mk-frage__oben { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.mk-frage__nr { font-size: 13px; color: var(--ink-soft); }
.mk-balken { display: flex; gap: 5px; margin: 8px 0 16px; }
.mk-balken span { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.mk-balken span.mk--an { background: var(--ink); }
.mk-frage__h { font-family: var(--font-head); font-size: clamp(24px, 5.5vw, 32px); line-height: 1.2; margin: 6px 0 12px; outline: none; }
.mk-hinweis { background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius-control); padding: 10px 14px; font-size: 14px; }
.mk-warum { background: var(--patina-soft); border-radius: var(--radius-control); padding: 12px 14px; margin-bottom: 14px; }
.mk-warum strong { display: block; color: var(--patina); font-size: 14px; margin-bottom: 2px; }
.mk-warum p { margin: 0; font-size: 14.5px; line-height: 1.5; }
.mk-warum a { color: var(--ink); }
.mk-frage__schnitt { display: grid; place-items: center; background: var(--card); border-radius: var(--radius-card); padding: 12px; margin-bottom: 14px; }
.mk-frage__schnitt[hidden] { display: none; }
.mk-frage__schnitt svg { width: 200px; height: auto; }
.mk-optionen { display: grid; gap: 10px; }
.mk-optionen--raster { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.mk-option { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius-card); padding: 12px 14px; color: var(--ink); font: inherit; cursor: pointer; }
.mk-option--an { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; }
.mk-option__bild { flex: none; width: 70px; height: 44px; display: grid; place-items: center; background: var(--bg); border-radius: 10px; overflow: hidden; }
.mk-option__bild svg { width: 64px; height: auto; }
.mk-option__text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.mk-option__text span { font-size: 13.5px; color: var(--ink-soft); line-height: 1.4; }
.mk-option__punkt { flex: none; width: 20px; height: 20px; border: 2px solid var(--line); border-radius: 50%; }
.mk-option--an .mk-option__punkt { border: 6px solid var(--ink); }
.mk-optionen--raster .mk-option__punkt { display: none; }
.mk-option--offen { border-style: dashed; }
.mk-hilfe { margin-top: 14px; }
.mk-hilfe__start { border: none; background: none; color: var(--ink); text-decoration: underline; font: 500 14px var(--font-body); cursor: pointer; padding: 6px 0; }
.mk-hilfe__frage { font-weight: 600; margin: 6px 0 10px; }
.mk-hilfe__knoepfe { display: flex; gap: 10px; }
.mk-hilfe__ergebnis { background: var(--card); border-radius: var(--radius-control); padding: 10px 14px; font-size: 14px; }
.mk-aktionen--fest { position: sticky; bottom: 0; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); margin: 18px 0 0; background: linear-gradient(to top, var(--bg) 70%, rgba(246,247,244,0)); }
.mk-aktionen--fest .mk-knopf { flex: 1; }
.mk-karte { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 16px 18px; }
.mk-karte p { margin: 0 0 10px; }
.mk-karte__schnitt { display: grid; place-items: center; background: var(--bg); border-radius: 14px; padding: 14px; margin-bottom: 10px; }
.mk-karte__schnitt svg { width: 240px; max-width: 100%; height: auto; }
.mk-karte__zeilen { margin: 0; }
.mk-karte__zeilen div { display: grid; grid-template-columns: 9.5em 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.mk-karte__zeilen dt { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); padding-top: 2px; }
.mk-karte__zeilen dd { margin: 0; }
.mk-links { margin-top: 6px; }
.mk-frei { margin-top: 22px; background: var(--card); border-radius: var(--radius-card); padding: 12px 18px; }
.mk-frei summary { cursor: pointer; font-weight: 500; padding: 4px 0; }
.mk-frei label { display: block; font-size: 13px; color: var(--ink-soft); margin: 12px 0 4px; }
.mk-frei input, .mk-serie__feld, .mk-link__feld { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--radius-control); padding: 11px 12px; font: 16px var(--font-body); background: var(--card); color: var(--ink); }
.mk-serie { background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius-card); padding: 14px 16px; margin: 12px 0; }
.mk-serie__label { display: block; margin-bottom: 8px; font-size: 14.5px; }
.mk-serie__treffer { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; max-height: 50vh; overflow-y: auto; }
.mk-serie__wahl { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--bg); border-radius: var(--radius-control); padding: 10px 12px; font: inherit; color: var(--ink); cursor: pointer; }
.mk-serie__wahl span { font-size: 13px; color: var(--ink-soft); }
.mk-serie__nichts { font-size: 14px; color: var(--ink-soft); }
.mk-qr { width: 240px; max-width: 70vw; margin: 16px 0; background: #fff; padding: 8px; border-radius: 12px; }
.mk-qr svg { display: block; width: 100%; height: auto; }
.mk-link { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.mk-link__feld { flex: 1 1 260px; font-size: 13px; }
@media (max-width: 860px) { .nav-kueche { margin-right: 10px; } }
.mk-frage__schnitt svg { width: auto; max-width: 160px; max-height: 110px; }
.mk-karte__schnitt svg { width: auto; max-width: 200px; max-height: 140px; }
.mk-profil { display: block; background: var(--card); border-radius: var(--radius-control); padding: 10px 14px; margin: 6px 0 4px; }
.mk-profil__text { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.mk-profil__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mk-profil .mk-chip { padding: 6px 12px; font-size: 13px; }
.mk-chip--leise { color: var(--ink-soft); }
.nav-toggle { flex: none; }
@media (max-width: 860px) {
  .nav-kueche { position: relative; flex: none; }
  .nav-kueche__zahl { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }
}
@media (max-width: 420px) {
  .nav-mock .wordmark { margin-right: 6px; flex: 0 1 auto; min-width: 0; }
  .nav-mock .wordmark img { max-width: 100%; height: auto; }
  .nav-kueche { margin: 0 8px 0 2px; }
}

/* ============================================================
   Installierte Web-App (Paket 4, 08.10.2026; app.js). Alles nur mit html.ist-app.
   ============================================================ */
.app-leiste[hidden] { display: none; }
.app-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--card); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px rgba(20,30,25,.06); }
.app-leiste a, .app-leiste button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; border: none; background: none; color: var(--ink-soft); font: 500 11.5px/1.2 var(--font-body); text-decoration: none; cursor: pointer; }
.app-leiste .app-leiste--an { color: var(--ink); font-weight: 600; }
.app-leiste span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 400px) { .app-leiste { padding-left: 0; padding-right: 0; } .app-leiste a, .app-leiste button { font-size: 10.5px; letter-spacing: -.02em; padding-left: 0; padding-right: 0; } }
@media (max-width: 370px) { .app-leiste a, .app-leiste button { font-size: 10px; } }
.app-leiste a:focus-visible, .app-leiste button:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 8px; }
html.ist-app body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
html.ist-app .km-start--leiste:not([hidden]) { bottom: calc(76px + env(safe-area-inset-bottom)); }
html.ist-app .mk-aktionen--fest { bottom: calc(64px + env(safe-area-inset-bottom)); }
html.ist-app .pf-actions { bottom: calc(56px + env(safe-area-inset-bottom)); }
html.ist-app .mk { padding-bottom: 40px; }
html.ist-app .site-header { padding-top: env(safe-area-inset-top); } /* früher auch „html.ist-app header“: nahm jedem Seitenkopf (header) in der App den Innenabstand oben (12.10.2026 korrigiert) */
.app-zurueck { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 6px 12px 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--card); color: var(--ink); font: 500 14px/1.2 var(--font-body); cursor: pointer; }
.app-zurueck span { font-size: 18px; line-height: 1; }
html.app-mehr-offen, html.app-mehr-offen body { overflow: hidden; }
.app-mehr { position: fixed; inset: 0; z-index: 800; background: var(--bg); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); }
.app-mehr[hidden] { display: none; }
.app-mehr__kopf { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 8px; }
.app-mehr__titel { font-family: var(--font-head); font-size: 30px; margin: 0; outline: none; }
.app-mehr__zu { border: 1px solid var(--line); background: var(--card); border-radius: var(--radius-pill); padding: 8px 14px; font: 500 14px var(--font-body); color: var(--ink); cursor: pointer; }
.app-mehr__inhalt { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 20px calc(96px + env(safe-area-inset-bottom)); }
html.app-mehr-offen .app-leiste { z-index: 801; }
.app-mehr__suche input { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 12px 18px; font: 16px var(--font-body); background: var(--card); margin-bottom: 8px; }
.app-mehr__abschnitt { margin-top: 14px; }
.app-mehr__h { font-family: var(--font-head); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 6px; }
.app-mehr__h:empty { display: none; }
.app-mehr__liste { list-style: none; margin: 0; padding: 0; background: var(--card); border-radius: var(--radius-control); }
.app-mehr__liste li + li { border-top: 1px solid var(--line); }
.app-mehr__liste a, .app-mehr__einzeln a, .app-mehr__ueber a { display: block; padding: 12px 14px; color: var(--ink); text-decoration: none; }
.app-mehr__gruppe { margin-top: 14px; background: var(--card); border-radius: var(--radius-control); padding: 0 12px; }
.app-mehr__gruppe > summary { padding: 13px 2px; font-weight: 600; cursor: pointer; }
.app-mehr__gruppe .app-mehr__liste { background: var(--bg); }
.app-mehr__gruppe .app-mehr__abschnitt { margin: 6px 0 10px; }
.app-mehr__einzeln { margin: 14px 0 0; background: var(--card); border-radius: var(--radius-control); font-weight: 600; }
.app-mehr__ueber { margin: 0 0 10px; }
.mk-link--einfuegen { margin-top: 12px; }
.app-test { position: fixed; right: 8px; top: calc(60px + env(safe-area-inset-top)); z-index: 61; background: var(--ink); color: var(--card); border-radius: var(--radius-pill); padding: 6px 12px; font: 500 12px/1.2 var(--font-body); text-decoration: none; white-space: nowrap; }
/* Einwilligungs-Knopf von CookieYes nicht über der Reiterleiste */
html.ist-app .cky-btn-revisit-wrapper, html.ist-app .cky-revisit-bottom-left, html.ist-app .cky-revisit-bottom-right { bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
.mk-install { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: var(--patina-soft); border-radius: var(--radius-control); padding: 10px 14px; margin: 8px 0 4px; }
.mk-install[hidden] { display: none; }
.mk-install__text { margin: 0; flex: 1 1 220px; font-size: 14px; }

/* Menüpunkt „Als App installieren“ (Punkt 90): nur im aufgeklappten Handy-Menü */
nav.main > a.nav-app-install[hidden] { display: none !important; }
@media (min-width: 861px) { nav.main > a.nav-app-install { display: none !important; } }

/* App-Kopf (Punkt 90, neu Paket 3): Leiste über die volle Breite mit Zurück bzw. Symbol,
   Seitentitel und Suche. Menü, Logo, Kopf-Knöpfe, Krümelpfad und der Streifen
   „Unabhängiger Ratgeber“ stecken in der App in der Reiterleiste bzw. in „Mehr“. */
html.ist-app .topbar-disclosure,
html.ist-app header.site .wordmark,
html.ist-app header.site #site-nav,
html.ist-app header.site .search-wrap,
html.ist-app header.site .nav-kueche,
html.ist-app header.site .nav-cta,
html.ist-app header.site .nav-toggle,
html.ist-app header.site .breadcrumb-mock { display: none !important; }
html.ist-app header.site { padding: env(safe-area-inset-top) 0 0; background: rgba(246,247,244,.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
html.ist-app header.site > .wrap { padding: 0 8px; }
html.ist-app .nav-mock { background: transparent; box-shadow: none; border-radius: 0; padding: 0; min-height: 52px; display: grid; grid-template-columns: 88px 1fr 88px; align-items: center; gap: 4px; }
html.ist-app .app-kopf-rechts { display: flex; justify-content: flex-end; }
html.ist-app .app-zurueck, html.ist-app .app-symbol, html.ist-app .app-suche, html.ist-app .app-mehr-knopf { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: none; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
html.ist-app .app-zurueck:active, html.ist-app .app-suche:active, html.ist-app .app-mehr-knopf:active, html.ist-app .app-mehr-knopf[aria-expanded="true"] { background: var(--line); }
html.ist-app .app-symbol img { width: 30px; height: 30px; border-radius: 8px; display: block; }
.app-titel { min-width: 0; text-align: center; font: 600 17px/1.2 var(--font-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:not(.ist-app) .app-titel, html:not(.ist-app) .app-symbol, html:not(.ist-app) .app-suche, html:not(.ist-app) .app-kopf-rechts { display: none; }
html.ist-app .mk-install { display: none !important; }

/* ---------------------------------------------------------------
   Passung zur eigenen Pfanne (Web-App Paket 3, 08.10.2026; kueche.js)
   passt = Patina, geht = Bernstein, nicht = grau. Nur mit Profil sichtbar.
   --------------------------------------------------------------- */
.mk-stufe { display: inline-block; padding: 2px 9px; border-radius: var(--radius-pill); font: 600 12.5px/1.5 var(--font-body); white-space: nowrap; }
.mk-stufe--passt { background: var(--patina-soft); color: var(--patina); }
.mk-stufe--geht { background: #FBF0D9; color: #7A5200; }
.mk-stufe--nicht { background: #ECEDEA; color: var(--ink-soft); }
.mk-stufe--klein { align-self: flex-start; font-size: 12px; padding: 1px 8px; }
.mk-punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.mk-punkt--passt { background: var(--patina); }
.mk-punkt--geht { background: #C9921C; }
.mk-punkt--nicht { background: #A9AFAB; }
.mk-marke { display: inline-flex; align-items: center; gap: 6px; margin: 12px 0 0 8px; padding: 8px 14px; border-radius: var(--radius-pill); font: 600 14px/1.2 var(--font-body); text-decoration: none; }
.mk-marke[hidden] { display: none; }
.mk-marke::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.mk-marke--passt { background: var(--patina-soft); color: var(--patina); }
.mk-marke--geht { background: #FBF0D9; color: #7A5200; }
.mk-marke--nicht { background: #ECEDEA; color: var(--ink-soft); }
.mk-mit { max-width: 60ch; margin: 0 0 22px; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--patina); border-radius: var(--radius-control); scroll-margin-top: 90px; }
.mk-mit[hidden] { display: none; }
.mk-mit__h { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 8px; }
.mk-mit__wahl { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.mk-mit__pfanne { border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: var(--radius-pill); padding: 6px 12px; font: 500 13.5px/1.2 var(--font-body); cursor: pointer; }
.mk-mit__pfanne--an { border-color: var(--ink); background: var(--card); font-weight: 600; }
.mk-mit__kopf { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.mk-mit__bauart { color: var(--ink-soft); font-size: 14px; }
.mk-mit__stufe { margin: 0 0 8px; font-size: 15px; }
.mk-mit__satz { margin-left: 8px; }
.mk-mit__text { margin: 0 0 8px; font-size: 15px; }
.mk-mit__links { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; }
.mk-mit__links a, .mk-mit__text a { color: var(--patina); text-decoration: underline; }
.mk-chip-meine { cursor: pointer; font: inherit; }
.ue-karte[hidden] { display: none; }
.km__mit { margin: 0 0 18px; padding: 12px 14px; border-radius: 12px; background: var(--km-flaeche); border: 1px solid var(--km-linie); border-left: 4px solid #3F6367; }
.km__mit-titel { margin: 0 0 6px; font-weight: 600; font-size: 15px; }
.km__mit-stufe { margin: 0 0 6px; font-size: 15px; }
.km__mit-text { margin: 0; font-size: 16px; line-height: 1.55; }
.km[data-thema="dunkel"] .mk-stufe--passt { background: #24403F; color: #CFE3E1; }
.km[data-thema="dunkel"] .mk-stufe--geht { background: #4A3A14; color: #F5DFA8; }
.km[data-thema="dunkel"] .mk-stufe--nicht { background: #39423E; color: #D6DBD8; }

/* Meine Küche, Startseite (Paket 3): Begrüßung, Pfannen als Kacheln, Passt zu deinen Pfannen */
.mk-gruss { margin: 4px 0 10px; }
.mk-gruss__h { margin-bottom: 2px; }
.mk-gruss__zeile { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--ink-soft); font-size: 15px; }
.mk-gruss__name { border: none; background: none; padding: 0; color: var(--patina); text-decoration: underline; font: inherit; cursor: pointer; }
.mk-gruss__feld { flex: 1 1 160px; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 9px 14px; font: 16px var(--font-body); background: var(--card); color: var(--ink); }
.mk-kacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.mk-kachel { display: flex; flex-direction: column; gap: 4px; height: 100%; box-sizing: border-box; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 12px 14px 14px; color: var(--ink); text-decoration: none; }
.mk-kachel__bild { display: flex; align-items: center; justify-content: center; height: 76px; margin-bottom: 4px; color: var(--ink-soft); }
.mk-kachel__bild svg { max-height: 76px; max-width: 100%; width: auto; height: auto; }
.mk-kachel__titel { font-size: 15px; line-height: 1.3; }
.mk-kachel__unter { font-size: 13px; color: var(--ink-soft); line-height: 1.35; }
.mk-kachel--plus { align-items: center; justify-content: center; text-align: center; background: transparent; box-shadow: none; border: 1.5px dashed var(--line); color: var(--patina); }
.mk-kachel__plus { font-size: 30px; line-height: 1; }
.mk-passt__reihe { list-style: none; margin: 0 -20px 0 0; padding: 2px 20px 10px 0; scroll-padding-left: 0; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.mk-passt__reihe li { flex: 0 0 168px; scroll-snap-align: start; }
.mk-passt__karte { display: flex; flex-direction: column; gap: 4px; height: 100%; box-sizing: border-box; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); overflow: hidden; color: var(--ink); text-decoration: none; padding-bottom: 12px; }
.mk-passt__karte img, .mk-passt__ohne { display: block; width: 100%; height: 104px; object-fit: cover; background: var(--patina-soft); }
.mk-passt__karte strong { padding: 6px 12px 0; font-size: 14.5px; line-height: 1.3; }
.mk-passt__meta { padding: 0 12px; font-size: 12.5px; color: var(--ink-soft); }
.mk-lesen__liste { list-style: none; margin: 0; padding: 0; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); overflow: hidden; }
.mk-lesen__liste li + li { border-top: 1px solid var(--line); }
.mk-lesen__liste li[hidden] { display: none; }
.mk-lesen__eintrag { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; color: var(--ink); text-decoration: none; }
.mk-lesen__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mk-lesen__bild { flex: none; width: 72px; height: 54px; border-radius: 10px; object-fit: cover; background: var(--patina-soft); }
.mk-lesen__bild--leer { display: block; background: var(--patina-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5.5h6a2 2 0 012 2V19a2 2 0 00-2-2H4zM20 5.5h-6a2 2 0 00-2 2V19a2 2 0 012-2h6z' fill='none' stroke='%233F6367' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center/24px no-repeat; }
.mk-lesen__art { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--patina); font-weight: 600; }
.mk-lesen__titel { font-size: 15px; line-height: 1.35; }
.mk-lesen__mehr { width: 100%; background: transparent; cursor: pointer; font: inherit; }

/* ---------------------------------------------------------------
   App-Seite /app (08.10.2026; app-seite.js)
   --------------------------------------------------------------- */
.app-seite { padding-bottom: 56px; }
.as-held { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center; padding: 28px 0 40px; }
.as-eyebrow { margin: 0 0 10px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--patina); font-weight: 600; }
.as-held h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.06; margin: 0 0 16px; }
.as-lead { font-size: 19px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 28px; max-width: 34em; }
.as-install { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 20px 22px; scroll-margin-top: 100px; }
.as-install__h { font-size: 18px; margin: 0 0 12px; }
.as-install__teil + .as-install__teil { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.as-install__teil[hidden], .as-install__fertig[hidden], .as-schritte[hidden], .as-knopf[hidden] { display: none; }
.as-install__titel { margin: 0 0 8px; font-weight: 600; }
.as-schritte { margin: 0; padding-left: 22px; line-height: 1.6; }
.as-knopf { display: inline-block; background: var(--ember); color: #FBF3EE; border: none; border-radius: var(--radius-pill); padding: 13px 24px; font: 600 16px/1.2 var(--font-body); cursor: pointer; text-decoration: none; }
.as-knopf--leise { background: var(--card); color: var(--ink); border: 1px solid var(--line); font-weight: 500; }
.as-qr-zeile { display: flex; gap: 18px; align-items: center; }
.as-qr-zeile p { margin: 0; }
.as-qr { flex: none; width: 132px; height: 132px; background: #fff; border-radius: 10px; border: 1px solid var(--line); }
.as-qr svg { width: 100%; height: 100%; display: block; }
.as-klein { font-size: 13.5px; color: var(--ink-soft); }
.as-install__fertig { margin: 0; }
.as-install__fertig a, .as-klein a, .as-faq a { color: var(--patina); text-decoration: underline; }

/* Handy-Skizze: gezeichnet mit CSS, kein Bildschirmfoto */
.as-handy { display: flex; justify-content: center; }
.as-handy__rahmen { width: 270px; height: 540px; border-radius: 40px; background: #1D2321; padding: 12px; box-shadow: 0 30px 60px rgba(20,30,25,.18); display: flex; flex-direction: column; overflow: hidden; position: relative; }
.as-handy__rahmen > * { background: #F6F7F4; }
.as-handy__kopf { border-radius: 28px 28px 0 0; padding: 22px 14px 10px; display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; font: 600 13px/1 var(--font-head); text-align: center; border-bottom: 1px solid #E2E5E0; }
.as-handy__symbol { width: 20px; height: 20px; border-radius: 6px; background: #1D2321; box-shadow: inset 0 0 0 5px #1D2321, inset 0 0 0 7px #F6F7F4; }
.as-handy__lupe { width: 12px; height: 12px; border: 2px solid #1D2321; border-radius: 50%; justify-self: end; }
.as-handy__inhalt { flex: 1; padding: 12px 14px; overflow: hidden; }
.as-handy__gruss { margin: 0; font: 600 21px/1.1 var(--font-head); }
.as-handy__zeile { margin: 2px 0 10px; font-size: 11px; color: var(--ink-soft); }
.as-handy__kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 12px; }
.as-handy__kachel { background: #fff; border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 1px 3px rgba(20,30,25,.08); }
.as-handy__kachel b { font-size: 10.5px; line-height: 1.2; }
.as-handy__kachel small { font-size: 9px; color: var(--ink-soft); line-height: 1.2; }
.as-handy__schnitt { height: 30px; margin: 2px 0 4px; background: linear-gradient(160deg, transparent 46%, #8A9196 47%, #8A9196 55%, transparent 56%) left/45% 100% no-repeat, linear-gradient(#8A9196, #8A9196) 45% 70%/50% 4px no-repeat, linear-gradient(#C7CCCF, #C7CCCF) 47% 86%/46% 7px no-repeat; }
.as-handy__schnitt--carbon { background: linear-gradient(160deg, transparent 44%, #4B5152 45%, #4B5152 56%, transparent 57%) left/45% 100% no-repeat, linear-gradient(#4B5152, #4B5152) 45% 74%/50% 6px no-repeat; }
.as-handy__h { margin: 0 0 6px; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.as-handy__rezept { display: flex; gap: 8px; align-items: center; background: #fff; border-radius: 10px; padding: 6px; margin-bottom: 6px; box-shadow: 0 1px 3px rgba(20,30,25,.08); }
.as-handy__rezept b { display: block; font-size: 10.5px; line-height: 1.2; margin-bottom: 3px; }
.as-handy__rezept .mk-stufe { font-size: 9px; padding: 0 6px; font-style: normal; }
.as-handy__bild { flex: none; width: 38px; height: 38px; border-radius: 8px; background: linear-gradient(135deg, #E8C79A, #B9824B); }
.as-handy__bild--2 { background: linear-gradient(135deg, #F2B39A, #D9784F); }
.as-handy__leiste { border-radius: 0 0 28px 28px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 10px 4px 16px; border-top: 1px solid #E2E5E0; font-size: 7.5px; letter-spacing: -.01em; text-align: center; color: var(--ink-soft); }
.as-handy__leiste .an { color: var(--ink); font-weight: 600; }

.as-abschnitt { padding: 36px 0 8px; border-top: 1px solid var(--line); margin-top: 8px; }
.as-abschnitt h2 { font-size: clamp(24px, 3vw, 32px); margin: 0 0 20px; }
.as-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.as-karte { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 20px; }
.as-karte__ico { display: inline-flex; width: 40px; height: 40px; border-radius: 12px; background: var(--patina-soft); color: var(--patina); align-items: center; justify-content: center; margin-bottom: 12px; }
.as-karte__ico svg { width: 22px; height: 22px; }
.as-karte h3 { font-size: 17px; margin: 0 0 6px; }
.as-karte p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.55; }
.as-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.as-zwei p { line-height: 1.65; }
.as-sicher { list-style: none; margin: 0 0 12px; padding: 0; }
.as-sicher li { position: relative; padding: 0 0 12px 30px; line-height: 1.55; }
.as-sicher li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--patina-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.6 3.6L17.5 8.7' fill='none' stroke='%233F6367' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.as-faq details { background: var(--card); border-radius: var(--radius-control); margin-bottom: 8px; padding: 14px 18px; box-shadow: var(--shadow-sm); }
.as-faq summary { cursor: pointer; font-weight: 600; }
.as-faq details p { margin: 10px 0 0; line-height: 1.6; color: var(--ink-soft); }
.as-weiter { margin: 18px 0 0; }
/* App-Seite, überarbeitet 08.10.2026: Vorteile, Ablauf in drei Schritten, Abschlussband */
.as-hell, .as-handy { --ink: #1D2321; --ink-soft: #5C6360; --card: #FFFFFF; --bg: #F6F7F4; --line: #E7E9E4; --patina: #3F6367; --patina-soft: #E3ECEC; color: var(--ink); }
.as-vorteile { list-style: none; margin: -12px 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.as-vorteile li { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 500; }
.as-vorteile li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--patina-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%233F6367' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
html[data-thema="dunkel"] .as-vorteile li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%238DBCBF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.as-ablauf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.as-schritt { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; }
.as-schritt__bild { background: #ECEFEB; padding: 22px 22px 18px; height: 216px; display: flex; flex-direction: column; justify-content: center; gap: 10px; border-bottom: 1px solid var(--line); }
.as-schritt__bild .as-handy__kacheln { margin: 0; }
.as-schritt__bild .as-handy__kachel b { font-size: 12.5px; }
.as-schritt__bild .as-handy__kachel small { font-size: 11px; }
.as-schritt__text { padding: 18px 20px 22px; }
.as-schritt__nr { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--ink); color: var(--card); font: 600 14px/1 var(--font-head); margin-bottom: 10px; }
.as-schritt h3 { font-size: 18px; margin: 0 0 6px; }
.as-schritt p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.55; }
.as-mini-zeile { display: flex; align-items: center; gap: 8px; background: var(--card); border-radius: 12px; padding: 9px 10px; font-size: 12.5px; font-weight: 600; box-shadow: 0 1px 3px rgba(20,30,25,.08); }
.as-mini-plus { width: 22px; height: 22px; border-radius: 7px; background: var(--bg); display: grid; place-items: center; font-size: 15px; line-height: 1; }
.as-mini-karte { background: var(--card); border-radius: 12px; padding: 11px 12px; box-shadow: 0 1px 3px rgba(20,30,25,.08); }
.as-mini-karte p { margin: 0; }
.as-mini-klein { font-size: 11px; color: var(--ink-soft); margin-bottom: 3px !important; }
.as-mini-titel { font: 600 13.5px/1.3 var(--font-head); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.as-mini-titel .mk-stufe { font-size: 10.5px; padding: 1px 7px; font-style: normal; }
.as-mini-text { font-size: 12px; line-height: 1.4; color: var(--ink-soft); margin-top: 4px !important; }
.as-mini-timer { display: flex; justify-content: space-between; align-items: center; background: var(--card); border-radius: 12px; padding: 8px 10px 8px 12px; box-shadow: 0 1px 3px rgba(20,30,25,.08); }
.as-mini-timer small { display: block; font-size: 10.5px; color: var(--ink-soft); }
.as-mini-timer b { font: 600 20px/1.1 var(--font-head); font-variant-numeric: tabular-nums; }
.as-mini-start { background: var(--ink); color: var(--card); border-radius: var(--radius-pill); padding: 6px 14px; font-size: 12px; font-weight: 600; }
.as-mini-erg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 4px; }
.as-mini-erg span { text-align: center; font-size: 11px; font-weight: 500; padding: 8px 2px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); }
.as-mini-erg span.an { background: var(--ink); color: var(--card); border-color: var(--ink); }
.as-mini-wochen { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; background: var(--card); border-radius: 12px; padding: 9px; box-shadow: 0 1px 3px rgba(20,30,25,.08); }
.as-mini-wochen i { aspect-ratio: 1; border-radius: 4px; background: var(--bg); border: 1px solid var(--line); }
.as-mini-wochen i.g { background: var(--ink); border-color: var(--ink); }
.as-mini-wochen i.h { outline: 2px solid var(--ink); outline-offset: 1px; }
.as-karte { display: block; }
main .wrap section.as-schluss, .as-schluss { margin: 40px 0 0; padding: 32px 36px; border-radius: var(--radius-hero); background: var(--flaeche-dunkel); color: #F1F3EF; display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; box-shadow: var(--shadow-lg); }
.as-schluss h2 { margin: 0 0 4px; font-size: clamp(22px, 2.6vw, 28px); color: #F1F3EF; }
.as-schluss p { margin: 0; color: #B9C0BC; }
.as-schluss .as-knopf { flex: none; }
@media (max-width: 1100px) {
  .as-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .as-ablauf { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .as-schritt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .as-schritt__bild { border-bottom: 0; border-right: 1px solid var(--line); height: auto; padding: 16px; }
}
@media (max-width: 560px) {
  .as-schritt { display: flex; }
  .as-schritt__bild { border-right: 0; border-bottom: 1px solid var(--line); padding: 18px 16px; height: auto; }
  .as-karte { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 16px; align-items: start; }
  .as-karte__ico { margin-bottom: 0; }
  .as-karte p { font-size: 14.5px; }
  main .wrap section.as-schluss, .as-schluss { padding: 24px 22px; border-radius: var(--radius-card); }
  .as-schluss .as-knopf { width: 100%; text-align: center; }
  .as-vorteile { margin-top: -8px; }
}
@media (max-width: 900px) {
  .as-held { grid-template-columns: 1fr; gap: 28px; padding-top: 8px; }
  .as-handy { order: -1; }
  .as-handy__rahmen { width: 220px; height: 440px; border-radius: 34px; }
  .as-zwei { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 560px) {
  .as-raster { grid-template-columns: 1fr; }
  .as-lead { font-size: 17px; }
  .as-handy { display: none; }
}

/* App-Fuß (08.10.2026): nur Rechtliches, Affiliate- und KI-Hinweis; Themen und Direktsuche stehen unter „Mehr“ */
html.ist-app footer.site .footer-top { display: none; }
html.ist-app footer.site .footer-box { padding: 18px 20px; border-radius: var(--radius-card); }
html.ist-app footer.site .footer-bottom { border-top: none; margin-top: 0; padding-top: 0; }
html.ist-app footer.site { margin-top: 32px; }
html.ist-app body:has(.km-start--leiste:not([hidden])) { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
.as-handy__rechts { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.as-handy__menue { width: 12px; height: 9px; border-top: 2px solid #1D2321; border-bottom: 2px solid #1D2321; position: relative; }
.as-handy__menue::after { content: ""; position: absolute; left: 0; right: 0; top: 2.5px; border-top: 2px solid #1D2321; }
.mk-passt__reihe { scrollbar-width: none; }
.mk-passt__reihe::-webkit-scrollbar { display: none; }

.mk-filter { margin: 26px 0 0; }
.mk-filter__chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-right: -20px; padding: 2px 20px 2px 0; }
.mk-filter__chips::-webkit-scrollbar { display: none; }
.mk-filter__chips .mk-chip { flex: none; white-space: nowrap; }
.mk-profil__text a { text-decoration: underline; }
.mk-passt__stufe { margin: 2px 12px 0; }
.as-install__schon p { margin: 0 0 6px; }
.as-install__schon[hidden], [data-as-neu][hidden], .as-install__titel[hidden], .as-klein[hidden] { display: none; }
.as-schwebe { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 50; }
.as-schwebe[hidden] { display: none; }
.as-schwebe .as-knopf { width: 100%; box-shadow: 0 8px 24px rgba(20,30,25,.25); }
/* Handy: Installieren zuerst, Text knapper; Desktop: QR-Code */
html.as-mobil .as-held { padding-top: 0; }
html.as-mobil .as-lead { margin-bottom: 18px; }
.as-link { border: none; background: none; padding: 0; color: var(--patina); text-decoration: underline; font: inherit; font-size: 14px; cursor: pointer; }

/* ---------------------------------------------------------------
   Hell und dunkel (08.10.2026; thema.js, Tokens in tokens.css)
   --------------------------------------------------------------- */
.thema-knopf { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: 4px; padding: 0; border: none; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; flex: none; }
.thema-knopf:hover { background: var(--bg); }
.thema-knopf__sonne { display: none; }
html[data-thema="dunkel"] .thema-knopf__sonne { display: block; }
html[data-thema="dunkel"] .thema-knopf__mond { display: none; }
html.ist-app header.site .thema-knopf { display: none; }
.wordmark__img--hell { display: none !important; }
html[data-thema="dunkel"] .wordmark__img:not(.wordmark__img--hell) { display: none !important; }
html[data-thema="dunkel"] .wordmark__img--hell { display: block !important; }
/* Inseln, die immer hell bleiben: Handy-Skizze auf /app */
.as-handy { --ink: #1D2321; --ink-soft: #5C6360; --patina: #3F6367; --patina-soft: #E3ECEC; --card: #FFFFFF; --line: #E7E9E4; }

/* Dunkel: feste helle Farben aus älteren Regeln */
html[data-thema="dunkel"] header.site,
html[data-thema="dunkel"].ist-app header.site { background: rgba(18,23,21,.88); }
html[data-thema="dunkel"] .breadcrumb-mock .current { color: var(--ink) !important; }
html[data-thema="dunkel"] .fact-pill { background: var(--card); }
html[data-thema="dunkel"] .mat-chip__role--konstruktion { background: #2C2A24; }
html[data-thema="dunkel"] .pf-seg { background: #252D2A; }
html[data-thema="dunkel"] .ab-keramik { background: #3A3428; }
html[data-thema="dunkel"] .hub-verwechslung { background: #2E2717; color: var(--ink); }
html[data-thema="dunkel"] .ue-urteil { color: #CFE3E1; }
html[data-thema="dunkel"] .ue-urteil--nein { color: #F2B79A; }
html[data-thema="dunkel"] .ue-urteil--ja { background: #22331F; color: #BFDDB6; }
html[data-thema="dunkel"] .ue-chip.is-on small { color: #4B5451; }
html[data-thema="dunkel"] .filter-pill.is-selected .n { color: rgba(0,0,0,.6); }
html[data-thema="dunkel"] .ue-pfanne { background: rgba(27,34,32,.92); }
html[data-thema="dunkel"] .kb-vgl td.is-staerker { background: #1F2B29; }
html[data-thema="dunkel"] .sf__box { background: var(--card); box-shadow: inset 0 0 0 1.5px #56605C; }
html[data-thema="dunkel"] .sf__opt.is-on .sf__box { background-color: var(--patina); }
html[data-thema="dunkel"] .sf__suche input:focus { background: var(--card); }
html[data-thema="dunkel"] .sf__fuss { background: linear-gradient(to bottom, rgba(27,34,32,0), var(--card) 14px); }
html[data-thema="dunkel"] .vk__bild { background: var(--flaeche-dunkel); }
html[data-thema="dunkel"] .vk__play { background: rgba(232,236,233,.94); }
html[data-thema="dunkel"] .ph__ergebnis--normal .ph__art { color: var(--card); }
html[data-thema="dunkel"] .ph__ergebnis--passung .ph__art { color: var(--card); }
html[data-thema="dunkel"] .ph__art { color: #0F1513; }
html[data-thema="dunkel"] .ph__ergebnis--bauart .ph__art { color: #fff; }
html[data-thema="dunkel"] .mk-stufe--geht, html[data-thema="dunkel"] .mk-marke--geht { background: #3A2F14; color: #F2D493; }
html[data-thema="dunkel"] .mk-stufe--nicht, html[data-thema="dunkel"] .mk-marke--nicht { background: #2C3431; color: #C6CDCA; }
html[data-thema="dunkel"] .mk-punkt--geht { background: #E0B04A; }
/* Kochmodus-Haken und Häkchen auf hellem Grund */
html[data-thema="dunkel"] .km-hak.km-hak--an::before { background-color: var(--patina); }
html[data-thema="dunkel"] .mk-hersteller { background: #1F2B29; }
html[data-thema="dunkel"] .material-swatch { box-shadow: 0 0 0 1px rgba(232,236,233,.35); }
.app-thema { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: var(--card); border-radius: var(--radius-control); }
.app-thema__knopf { border: none; background: transparent; color: var(--ink); padding: 10px 6px; border-radius: 8px; font: 500 14px/1.2 var(--font-body); cursor: pointer; }
.app-thema__knopf--an { background: var(--ink); color: var(--card); font-weight: 600; }
html[data-thema="dunkel"] .ue-bedingt { color: #E0B04A; }

/* Meine Küche: Titelbild und einzeiliger, aufklappbarer Profil-Hinweis (08.10.2026) */
.mk-titelbild { display: block; position: relative; margin: 4px 0 16px; border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 16 / 7; background: var(--patina-soft); }
.mk-titelbild[hidden] { display: none; }
.mk-titelbild--tagebuch { margin: 0 0 14px; }
.mk-titelbild img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 700px) { .mk-titelbild { aspect-ratio: 16 / 5; } }
details.mk-profil { padding: 0; }
.mk-profil__zeile { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 13.5px; color: var(--ink-soft); cursor: pointer; list-style: none; }
.mk-profil__zeile::-webkit-details-marker { display: none; }
.mk-profil__zeile::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
details.mk-profil[open] .mk-profil__zeile::after { transform: rotate(-135deg); }
.mk-profil__schloss { display: inline-flex; color: var(--patina); }
details.mk-profil .mk-profil__text { padding: 0 14px; }
details.mk-profil .mk-profil__knoepfe { padding: 0 14px 12px; }
details.mk-profil[open] .mk-profil__text { margin-bottom: 4px; }

/* Fotos in Meine Küche (08.10.2026): Profilbild, Pfannenfoto in Kachel und Steckbrief */
.mk-gruss__kopf { display: flex; align-items: center; gap: 12px; }
.mk-avatar { flex: none; width: 52px; height: 52px; padding: 0; border: 2px solid var(--card); border-radius: 50%; overflow: hidden; background: var(--patina-soft); color: var(--patina); box-shadow: var(--shadow-sm); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.mk-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-avatar__leer { display: inline-flex; font: 600 22px/1 var(--font-head); }
.mk-avatar__optionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 2px; }
.mk-avatar__optionen[hidden] { display: none; }
.mk-kachel__bild--foto { height: 96px; margin: -12px -14px 6px; overflow: hidden; border-radius: var(--radius-card) var(--radius-card) 0 0; }
.mk-kachel__bild--foto img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.mk-foto { margin: 4px 0 14px; }
.mk-foto__bild { display: block; width: 100%; max-height: 320px; object-fit: cover; border-radius: var(--radius-card); margin-bottom: 10px; }
.mk-foto__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mk-foto__knoepfe .mk__klein { flex-basis: 100%; }

/* Pfannen-Tagebuch (08.10.2026) */
/* Pfannen-Tagebuch (Punkt 97, Entwurf mockup-tagebuch.html) */
.mk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mk-knopf--klein { padding: 9px 14px; font-size: 14px; gap: 6px; }
.mk-tb-uebersicht { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 18px; margin: 4px 0 0; }
.mk-tb-uebersicht__zahl { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.mk-tb-uebersicht__zahl strong { font: 700 34px/1 var(--font-head); }
.mk-tb-uebersicht__zahl span { color: var(--ink-soft); font-size: 15px; }
.mk-tb-uebersicht__neben { margin: 4px 0 0; color: var(--ink-soft); font-size: 13.5px; }
.mk-tb-wochen { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 16px 0 4px; max-width: 360px; }
.mk-tb-wochen b { font: 500 10.5px/1 var(--font-body); color: var(--ink-soft); text-align: center; }
.mk-tb-wochen i { aspect-ratio: 1; border-radius: 6px; background: var(--bg); border: 1px solid var(--line); }
.mk-tb-wochen i.g { background: var(--ink); border-color: var(--ink); }
.mk-tb-wochen i.h { outline: 2px solid var(--ink); outline-offset: 1px; }
.mk-tb-wochen i.z { visibility: hidden; }
.mk-tb__neu { display: flex; width: 100%; gap: 8px; margin: 14px 0 0; border-radius: var(--radius-control); }
.mk-tb-abschnitt { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.mk-tb-abschnitt__neben { font-size: 13px; color: var(--ink-soft); }
.mk-tb-abschnitt__mehr { border: 0; background: none; color: var(--ink-soft); font: 500 13.5px/1 var(--font-body); text-decoration: underline; cursor: pointer; padding: 6px 0; }
.mk-tb-hinweise { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mk-tb-hinweis { display: flex; gap: 12px; align-items: flex-start; background: var(--patina-soft); border-radius: var(--radius-card); padding: 12px 14px; }
.mk-tb-hinweis[hidden] { display: none; }
.mk-tb-hinweis__ico { flex: none; width: 34px; height: 34px; border-radius: var(--radius-pill); background: var(--card); color: var(--patina); display: grid; place-items: center; }
.mk-tb-hinweis strong { display: block; font-size: 14.5px; line-height: 1.35; }
.mk-tb-hinweis p { margin: 2px 0 2px; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }
.mk-tb-link { display: inline-flex; align-items: center; gap: 4px; padding: 6px 0 2px; color: var(--ink); font: 600 13.5px/1.2 var(--font-body); text-decoration: none; border-bottom: 1.5px solid var(--ink); }
.mk-tb-pfannen { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mk-tb-pfanne { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: start; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 14px; color: var(--ink); text-decoration: none; transition: box-shadow .15s, transform .15s; }
.mk-tb-pfanne:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.mk-tb-bild { width: 52px; height: 52px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; color: var(--ink-soft); }
.mk-tb-bild svg { width: 40px; height: 40px; }
.mk-tb-bild--foto { border: 0; }
.mk-tb-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-tb-pfanne__text { display: grid; gap: 2px; min-width: 0; }
.mk-tb-pfanne__titel { font: 600 15.5px/1.3 var(--font-head); }
.mk-tb-pfanne__meta { font-size: 13px; color: var(--ink-soft); }
.mk-tb-balken { display: block; height: 6px; border-radius: var(--radius-pill); background: var(--bg); border: 1px solid var(--line); overflow: hidden; margin: 6px 0 8px; }
.mk-tb-balken span { display: block; height: 100%; background: var(--ink); border-radius: inherit; }
.mk-tb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-tb-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-pill); padding: 5px 11px; font: 500 13px/1.2 var(--font-body); background: var(--bg); border: 1px solid var(--line); }
.mk-tb-chip small { color: var(--ink-soft); font-size: 12px; }
.mk-tb-erg { margin: 8px 0 0; display: flex; gap: 12px; font-size: 12.5px; color: var(--ink-soft); }
.mk-tb-erg > span { display: inline-flex; align-items: center; gap: 4px; }
.mk-tb-erg svg { display: block; }
.mk-tb-verlauf { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 6px 14px 10px; }
main .wrap section.mk-tb-woche { padding: 0; }
main .wrap section.mk-tb-kurz { padding: 16px; }
.mk-tb-woche h3 { margin: 12px 0 2px; font: 600 12px/1 var(--font-body); color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }
.mk-tb-woche__liste { list-style: none; margin: 0; padding: 0; }
.mk-tb-woche__liste li + li { border-top: 1px solid var(--line); }
.mk-tb-eintrag { width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border: 0; background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.mk-tb-eintrag__tag { font: 600 13px/1.1 var(--font-head); text-align: center; }
.mk-tb-eintrag__tag small { display: block; font: 400 11px/1.3 var(--font-body); color: var(--ink-soft); }
.mk-tb-eintrag__was { display: flex; flex-direction: column; min-width: 0; }
.mk-tb-eintrag__was strong { font-weight: 500; font-size: 14.5px; }
.mk-tb-eintrag__was span { font-size: 12.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-tb-eintrag__erg { width: 32px; height: 32px; border-radius: var(--radius-pill); background: var(--bg); display: grid; place-items: center; }
.mk-tb-eintrag__erg--leer { background: none; }
.mk-tb-eintrag:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: var(--radius-control); }
.mk-tb-mehr { margin: 10px 0 4px; }
.mk-tb-kurz { margin: 0 0 14px; padding: 16px; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); }
.mk-tb-kurz__h { margin: 0 0 4px; font: 600 16px/1.3 var(--font-head); }
.mk-tb-kurz .mk__leise { margin: 4px 0 0; }
.mk-tb-kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 12px; }
.mk-tb-kacheln div { background: var(--bg); border-radius: var(--radius-control); padding: 10px 6px; text-align: center; min-width: 0; }
.mk-tb-kacheln b { display: block; font: 700 18px/1.15 var(--font-head); overflow-wrap: anywhere; }
.mk-tb-kacheln span { font-size: 11.5px; color: var(--ink-soft); }
.mk-tb-verteilung { display: flex; gap: 2px; height: 10px; border-radius: var(--radius-pill); overflow: hidden; }
.mk-tb-verteilung__1, .mk-tb-legende__1::before { background: var(--ink); }
.mk-tb-verteilung__2, .mk-tb-legende__2::before { background: var(--ink-soft); }
.mk-tb-verteilung__3, .mk-tb-legende__3::before { background: var(--line); box-shadow: inset 0 0 0 1px var(--ink-soft); }
.mk-tb-legende { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.mk-tb-legende span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }
.mk-tb-kurz__label { margin: 14px 0 8px; font-size: 13px; font-weight: 600; }
.mk-tb-kurz__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
/* Blatt von unten: Eintragen und Ändern */
html.mk-blatt-offen { overflow: hidden; }
.mk-blatt { position: fixed; inset: 0; z-index: 400; display: flex; align-items: flex-end; justify-content: center; }
.mk-blatt__dunkel { position: absolute; inset: 0; background: rgba(10,14,12,.45); }
.mk-blatt__inhalt { position: relative; width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; background: var(--card); color: var(--ink); border-radius: var(--radius-hero) var(--radius-hero) 0 0; box-shadow: var(--shadow-lg); padding: 10px 16px calc(18px + env(safe-area-inset-bottom)); display: grid; gap: 16px; animation: mk-blatt-rein .2s ease-out; }
@media (prefers-reduced-motion: reduce) { .mk-blatt__inhalt { animation: none; } }
@keyframes mk-blatt-rein { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.mk-blatt__griff { width: 40px; height: 4px; border-radius: 4px; background: var(--line); justify-self: center; }
.mk-blatt__h { margin: 0; font: 600 19px/1.3 var(--font-head); }
.mk-blatt__h:focus { outline: none; }
.mk-blatt__label { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.mk-blatt__pfannen { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.mk-blatt__pfannen .mk-chip { flex: none; white-space: nowrap; }
.mk-blatt__suchfeld { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; border: 1.5px solid var(--line); border-radius: var(--radius-control); padding: 0 12px; color: var(--ink-soft); }
.mk-blatt__suchfeld:focus-within { border-color: var(--ink); }
.mk-blatt__suche { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: 16px var(--font-body); padding: 10px 0; outline: none; }
.mk-blatt__treffer { margin: 8px 0 0; }
.mk-blatt__treffer:empty { display: none; }
.mk-blatt__erg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mk-blatt__erg .mk-chip { flex-direction: column; justify-content: center; gap: 6px; border-radius: var(--radius-control); padding: 12px 4px; font-size: 13.5px; text-align: center; }
.mk-blatt__segment { display: flex; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-control); padding: 3px; }
.mk-blatt__seg { flex: 1; border: 0; background: none; color: var(--ink-soft); font: 500 14px/1 var(--font-body); border-radius: 8px; padding: 10px 4px; cursor: pointer; }
.mk-blatt__seg.an { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-sm); }
.mk-blatt__datum { margin: 8px 0 0; border: 1.5px solid var(--line); border-radius: var(--radius-control); padding: 9px 12px; font: 16px var(--font-body); background: var(--card); color: var(--ink); }
.mk-blatt__datum[hidden] { display: none; }
.mk-blatt__aktionen { display: grid; gap: 4px; }
.mk-blatt__aktionen .mk-knopf--haupt { width: 100%; border-radius: var(--radius-control); }
.mk-blatt__loeschen, .mk-blatt__abbrechen { border: 0; background: none; color: var(--ink-soft); font: 500 14.5px/1 var(--font-body); padding: 12px 8px; cursor: pointer; }
.mk-blatt__loeschen { color: var(--ink); text-decoration: underline; }
.mk-blatt__seg:focus-visible, .mk-blatt__loeschen:focus-visible, .mk-blatt__abbrechen:focus-visible, .mk-tb-abschnitt__mehr:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.mk-tb-meldung { position: fixed; left: 16px; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 410; max-width: 480px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: var(--radius-control); background: var(--flaeche-dunkel); color: #fff; font-size: 14.5px; box-shadow: var(--shadow-md); }
html[data-thema="dunkel"] .mk-tb-meldung { background: var(--ink); color: var(--card); }
.mk-tb-meldung__rueck { border: 0; background: none; color: inherit; font: 600 14px/1 var(--font-body); text-decoration: underline; cursor: pointer; padding: 6px 0; }
.km__tb { margin: 16px 0 0; padding: 16px; border-radius: var(--radius-card); background: var(--km-flaeche); border: 1px solid var(--km-linie); display: grid; gap: 12px; }
.km__tb .km__mit-titel { margin: 0; }
.km__tb-pfanne { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.km__tb-pfanne strong { display: block; font-size: 16px; }
.km__tb-label { display: block; margin: 0; font-size: 13px; color: var(--km-soft); }
.km__tb-aendern { border: 0; background: none; color: var(--km-ink); font: 600 14px/1 var(--font-body); padding: 8px 0; border-bottom: 1.5px solid var(--km-ink); cursor: pointer; }
.km__tb-reihe { display: flex; flex-wrap: wrap; gap: 6px; }
.km__tb-reihe[hidden] { display: none; }
.km__tb-chip { border: 1px solid var(--km-linie); background: var(--km-bg); color: var(--km-ink); border-radius: var(--radius-pill); padding: 8px 14px; font: 500 15px/1.2 var(--font-body); cursor: pointer; }
.km__tb-erg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.km__tb-erg .km__tb-chip { border-radius: var(--radius-control); padding: 12px 4px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 14px; }
.km__tb-chip--an { background: var(--km-ink); color: var(--km-bg); border-color: var(--km-ink); }
.km__tb-knopf { width: 100%; border: none; border-radius: var(--radius-control); padding: 14px 20px; background: var(--km-ink); color: var(--km-bg); font: 600 16px/1 var(--font-body); cursor: pointer; }
.km__tb-chip:focus-visible, .km__tb-knopf:focus-visible, .km__tb-aendern:focus-visible, .km__tb-rueck:focus-visible { outline: 3px solid var(--km-ink); outline-offset: 2px; }
.km__tb-fertig { margin: 16px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: var(--radius-control); background: var(--km-ink); color: var(--km-bg); font-weight: 600; }
.km__tb-rueck { border: 0; background: none; color: inherit; font: 600 14px/1 var(--font-body); text-decoration: underline; cursor: pointer; padding: 6px 0; }
.mk-tb-zeile { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; padding: 12px 14px; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; transition: box-shadow .15s; }
.mk-tb-zeile:hover { box-shadow: var(--shadow-md); }
.mk-tb-zeile__ico { flex: none; width: 36px; height: 36px; border-radius: var(--radius-control); background: var(--bg); display: grid; place-items: center; }
.mk-tb-zeile__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-tb-zeile__text strong { font: 600 15px/1.3 var(--font-head); }
.mk-tb-zeile__text span { font-size: 13px; color: var(--ink-soft); }
.mk-tb-zeile__hw { flex: none; background: var(--patina-soft); color: var(--patina); border-radius: var(--radius-pill); padding: 3px 10px; font-size: 12.5px; font-weight: 600; }
.mk-tb-zeile__pfeil { flex: none; color: var(--ink-soft); display: grid; }
.mk-kachel__tb { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 12px; color: var(--ink-soft); }
.mk-kachel__tb svg { flex: none; }

/* /marken mit Filter links wie im Serienvergleich (09.10.2026) */
.mf-filter { margin-top: 6px; }
.mf-filter .sf__layout { margin-top: 8px; }
.mf-filter .ue-karte[hidden], .mf-az[hidden] { display: none; }
.mf-az { margin: 0 0 14px; }
.mf-filter .sf__leer button { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; cursor: pointer; }
.mf-az a, .mf-az span { width: 26px; height: 28px; }
.mf-az span { color: var(--ink); opacity: .28; }
@media (max-width: 700px) { .mf-az { display: none; } }
.mf-erklaer { margin: -4px 0 12px; font-size: 13.5px; color: var(--ink-soft); }
.mf-erklaer[hidden] { display: none; }
.ue-marke__pfeil { white-space: nowrap; }

/* Suchseite: Feld und Knopf (Punkt 121) */
.suche-form { margin: 20px 0; max-width: 480px; display: flex; gap: 8px; }
.suche-form__feld { flex: 1; min-width: 0; padding: 12px 18px; border-radius: var(--radius-pill); border: 1px solid var(--line); font-size: 16px; background: var(--card); color: var(--ink); }
.suche-form .suche-form__knopf { flex: none; width: auto; margin: 0; }

/* Fehlerseite 404 (Punkt 121) */
.fehlerseite { padding: 24px 0 72px; max-width: 640px; }
.fehlerseite__code { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 6px; }
.fehlerseite__text { color: var(--ink-soft); margin: 0; }
.fehlerseite__wege { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fehlerseite__wege a { display: block; height: 100%; padding: 16px 18px; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; }
.fehlerseite__wege b { display: block; font-family: var(--font-head); font-size: 17px; margin-bottom: 4px; }
.fehlerseite__wege span { font-size: 14px; color: var(--ink-soft); }
@media (max-width: 560px) { .fehlerseite__wege { grid-template-columns: 1fr; } }

/* Abgeratene Serien in Listen, z. B. beschichtete Woks (Punkt 121) */
.sf__abgeraten { margin: 0; padding: 6px 10px; border-radius: var(--radius-control); background: var(--ember-soft); color: var(--ink); font-size: 12.5px; line-height: 1.4; }

/* Seitenkopf von Artikel, Kaufberatung, Pflege (Punkt 122): Bild klein neben dem Titel */
.seitenkopf--bild { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: center; }
.seitenkopf__text > :last-child { margin-bottom: 0; }
.seitenkopf__bild { margin: 0; }
.seitenkopf__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); display: block; }
.seitenkopf__bild figcaption { font-size: 12px; color: var(--ink-soft); margin-top: 6px; }
@media (max-width: 820px) {
  /* 11.10.2026: am Handy (Browser und App) wieder mit Bild, aber als schmales Band über dem Titel,
     damit Titel und Kurzantwort weiter früh im Bildschirm stehen (vorher ganz ausgeblendet, Punkt 122) */
  .seitenkopf--bild { display: flex; flex-direction: column; gap: 0; }
  .seitenkopf__bild { order: -1; position: relative; margin: 0 0 14px; }
  .seitenkopf__bild img { aspect-ratio: 16 / 7; }
  .seitenkopf--bild .seitenkopf__text h1 { margin-top: 0; }
  .seitenkopf__bild figcaption { position: absolute; left: 8px; bottom: 8px; margin: 0; font: 500 10.5px/1.3 var(--font-body); color: #fff; background: rgba(20, 25, 23, .58); padding: 2px 7px; border-radius: var(--radius-pill); }
}
/* Seitenleiste: Unsere Wahl statt Amazon-Kasten (Punkt 122) */
.sidebar-box--wahl { background: var(--patina-soft); }
.sidebar-wahl__was { margin: 0 0 10px; font-family: var(--font-head); font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--ink); }
.sidebar-wahl__link { font-size: 13.5px; font-weight: 500; color: var(--patina); }
#unsere-wahl { scroll-margin-top: 150px; }
/* Kaufberatung: Kurzantwort und Unsere Wahl im ersten Bildschirm (Punkt 122) */
.kb-oben { display: grid; gap: 18px; align-items: start; }
.kb-oben--zwei { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
.kb-oben .dev-note { margin: 0; max-width: 70ch; }
.kb-kopfwahl { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-md); padding: 16px 18px; }
.kb-kopfwahl__lab { font: 600 12px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.kb-kopfwahl__was { margin: 8px 0 6px; font-family: var(--font-head); font-weight: 600; font-size: 17px; line-height: 1.3; color: var(--ink); }
.kb-kopfwahl__warum { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.kb-kopfwahl__ueblich { margin: 0 0 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-soft); }
.kb-kopfwahl__sprung { font-size: 14px; font-weight: 500; color: var(--patina); }
@media (max-width: 1180px) { .kb-oben--zwei { grid-template-columns: 1fr; } }
/* Inhaltsverzeichnis aufklappbar, am Handy zu (Punkt 122) */
.toc-auf > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 6px; }
.toc-auf > summary::-webkit-details-marker { display: none; }
.toc-auf__zahl { display: none; font-family: var(--font-body); font-weight: 400; color: var(--ink-soft); }
.toc-auf:not([open]) > summary { margin-bottom: 0; }
@media (max-width: 980px) {
  .toc-auf { padding: 14px 18px; }
  .toc-auf__zahl { display: inline; }
  .toc-auf > summary::after { content: "▾"; margin-left: auto; color: var(--ink-soft); }
  .toc-auf[open] > summary::after { content: "▴"; }
}
@media (max-width: 980px) { .sidebar-toc { margin-bottom: 0; } }
#s-weiter { scroll-margin-top: 150px; }

/* „Welche Pfanne wofür?“ als Zeilen (Punkt 124): Gericht | Unsere Wahl | Meist empfohlen, aufklappbar */
.pk-karten--zeilen { gap: 0; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); overflow: hidden; }
.pe-zeilen-kopf, .pe-zeile__kopf { display: grid; grid-template-columns: 170px minmax(0, 1fr) 200px 24px; gap: 16px; align-items: center; padding: 12px 18px; }
.pe-zeilen-kopf { font: 600 12px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.pe-zeile { border-bottom: 1px solid var(--line); }
.pe-zeile:last-child { border-bottom: 0; }
.pe-zeile__kopf { cursor: pointer; list-style: none; }
.pe-zeile__kopf::-webkit-details-marker { display: none; }
.pe-zeile__kopf:hover { background: var(--bg); }
.pe-zeile__g { font-weight: 600; }
.pe-zeile__w { font-weight: 500; line-height: 1.4; }
.pe-zeile__w [data-pe-zeile] { display: none; }
.pe-zeile__w [data-pe-zeile].ist-aktiv { display: block; }
html.pe-alle .pe-zeile__w [data-pe-zeile] { display: block; }
.pe-zeile__lage { display: none; color: var(--ink-soft); font-weight: 400; }
html.pe-alle .pe-zeile__lage { display: inline; }
.pe-zeile__u { font-size: 13.5px; color: var(--ink-soft); line-height: 1.4; }
.pe-zeile__ulab { display: none; }
.pe-zeile__pf::before { content: "▾"; color: var(--ink-soft); font-size: 16px; }
.pe-zeile[open] .pe-zeile__pf::before { content: "▴"; }
.pe-zeile[open] > .pe-zeile__kopf { background: var(--bg); }
.pe-zeile__karte { padding: 4px 12px 14px; background: var(--bg); }
.pe-zeile__karte .pe { margin: 0; }
@media (max-width: 820px) {
  .pe-zeilen-kopf { display: none; }
  .pe-zeile__kopf { grid-template-columns: minmax(0, 1fr) 20px; gap: 4px 10px; padding: 12px 14px; }
  .pe-zeile__g { grid-column: 1; grid-row: 1; }
  .pe-zeile__pf { grid-column: 2; grid-row: 1; }
  .pe-zeile__w, .pe-zeile__u { grid-column: 1 / 3; }
  .pe-zeile__u { font-size: 12.5px; }
  .pe-zeile__ulab { display: inline; }
  .pe-zeile__karte { padding: 4px 6px 10px; }
}

/* Umschalter der Wofür-Liste läuft mit, auch am Handy (Punkt 124), schlank (Punkt 125); top setzt das Skript unter den Kopf */
.pe-zeile__karte .pe__kopf:empty { display: none; }
.pe-schalter-hinweis { display: block; margin: 20px 0 6px; font-size: 11.5px; }
.pe-schalter[data-pe-global] { flex-wrap: nowrap; gap: 10px; margin: 0 0 14px; padding: 4px 4px 4px 14px; border-radius: var(--radius-pill); border: 1px solid var(--line); box-shadow: none;
  background: var(--card); width: fit-content; max-width: 100%; }
.pe-schalter[data-pe-global] .pe__frage { font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.pe-schalter[data-pe-global] .pe__seg { background: transparent; padding: 0; gap: 2px; flex-wrap: nowrap; }
.pe-schalter[data-pe-global] .pe__seg button { padding: 6px 12px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.pe-schalter[data-pe-global] .pe__seg button[aria-pressed="true"] { background: var(--ink); color: var(--card); box-shadow: none; }
.pe-schalter[data-pe-global] + .pk-karten { margin-top: 0; }
@media (max-width: 820px) {
  .pe-schalter[data-pe-global] { position: sticky; top: 8px; padding: 4px; border-radius: 14px; }
  .pe-schalter[data-pe-global] .pe__frage { display: none; }
  .pe-schalter[data-pe-global] .pe__seg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .pe-schalter[data-pe-global] .pe__seg button { padding: 5px 9px; font-size: 12.5px; }
}
/* Abstand nach der Kurzantwort kleiner (Punkt 125): der folgende Block bringt sonst 72 px mit */
.kb-oben .kb-oben__titel { display: block; margin-bottom: 6px; }
.content-layout > div:first-child > .kb-oben + .divider { margin-top: 32px !important; padding-top: 0 !important; }

/* „Was fehlt dir noch?“ in Meine Küche (Punkt 125) */
.mk-aus-einstieg { margin: 14px 0 6px; padding: 16px; background: var(--card); border-radius: var(--radius-card); border: 1.5px solid var(--patina); box-shadow: var(--shadow-sm); }
.mk-aus-einstieg__t { display: block; font: 600 17px/1.3 var(--font-head); }
.mk-aus-einstieg p { margin: 4px 0 12px; font-size: 14px; color: var(--ink-soft); line-height: 1.45; }
.mk-aus { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.mk-aus-frage { border: 0; margin: 0; padding: 14px 16px; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); }
.mk-aus-frage legend { float: left; width: 100%; padding: 0; margin-bottom: 10px; font: 600 16px/1.3 var(--font-head); }
.mk-aus-frage legend + * { clear: both; }
.mk-aus-frage__klein { clear: both; margin: -4px 0 10px; font-size: 12.5px; color: var(--ink-soft); }
.mk-aus-mehr > summary { cursor: pointer; font-size: 14px; font-weight: 500; color: var(--patina); padding: 4px 2px; }
.mk-aus-mehr[open] > summary { margin-bottom: 10px; }
.mk-aus-mehr .mk-aus-frage + .mk-aus-frage { margin-top: 10px; }
.mk-aus-antworten { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.mk-aus-antworten a { color: var(--patina); font-weight: 500; }
.mk-aus-urteil, .mk-aus-gut { padding: 16px; border-radius: var(--radius-card); background: var(--patina-soft); }
.mk-aus-gut { background: color-mix(in srgb, var(--patina-soft) 60%, #DDEFE2); }
.mk-aus-urteil strong, .mk-aus-gut strong { display: block; font: 600 17px/1.35 var(--font-head); }
.mk-aus-gut p { margin: 6px 0 0; font-size: 14px; }
.mk-aus-balken { display: flex; gap: 3px; margin: 12px 0 6px; }
.mk-aus-balken i { flex: 1; height: 8px; border-radius: 4px; background: var(--patina); }
.mk-aus-balken i.leer { background: color-mix(in srgb, var(--patina) 25%, transparent); }
.mk-aus-urteil small { font-size: 12.5px; color: var(--ink-soft); }
.mk-aus-hinweis { margin: 0; font-size: 11.5px; }
.mk-aus-vor { padding: 16px; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); }
.mk-aus-vor__nr { font: 600 11.5px/1 var(--font-body); letter-spacing: .07em; text-transform: uppercase; color: var(--patina); }
.mk-aus-vor__was { display: flex; gap: 12px; align-items: center; margin: 10px 0 8px; }
.mk-aus-vor__was strong { font: 600 16px/1.3 var(--font-head); }
.mk-aus-vor__svg { flex: none; width: 64px; }
.mk-aus-vor__svg svg { width: 100%; height: auto; display: block; }
.mk-aus-vor p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.mk-aus-vor__bezug { padding: 8px 10px; border-radius: var(--radius-control); background: var(--bg); font-size: 13px !important; color: var(--ink-soft); }
.mk-aus-vor__aktion { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mk-aus-ersatz { padding: 14px 16px; border-radius: var(--radius-card); border: 1.5px dashed var(--core-tone); background: var(--card); font-size: 14px; line-height: 1.5; }
.mk-aus-ersatz strong { display: block; font: 600 15px/1.3 var(--font-head); margin-bottom: 4px; }
.mk-aus-ersatz p { margin: 0; }
.mk-aus-ersatz a, .mk-aus-nicht a, .mk-aus-fuss a { color: var(--patina); font-weight: 500; }
.mk-aus-nicht { padding: 14px 16px; border-radius: var(--radius-card); background: var(--card); box-shadow: var(--shadow-sm); font-size: 14px; }
.mk-aus-nicht strong { display: block; font: 600 15px/1.3 var(--font-head); margin-bottom: 6px; }
.mk-aus-nicht ul { margin: 0; padding-left: 18px; color: var(--ink-soft); }
.mk-aus-nicht li { margin: 4px 0; }
.mk-aus-nicht li b { color: var(--ink); font-weight: 600; }
.mk-aus-fuss { margin: 4px 0 0; font-size: 13px; color: var(--ink-soft); text-align: center; }
.mk-knopf--dunkel { background: var(--ink); border-color: var(--ink); color: var(--card); }

/* Startseite: App-Hinweis (Punkt 125, Variante B) */
html.ist-app .ek-app { display: none; }
.ek-app__box { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 32px; align-items: center; padding: 28px 32px; border-radius: var(--radius-hero, 24px); background: var(--patina-soft); }
.ek-app__text h2 { margin-bottom: 6px; }
.ek-app__liste { list-style: none; margin: 14px 0 18px; padding: 0; font-size: 15px; }
.ek-app__liste li { position: relative; padding-left: 24px; margin: 7px 0; }
.ek-app__liste li::before { content: "✓"; position: absolute; left: 0; color: var(--patina); font-weight: 700; }
.ek-app__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ek-app__knopf { display: inline-flex; align-items: center; padding: 12px 22px; border-radius: var(--radius-pill); background: var(--ink); color: var(--card); font: 500 15px/1.2 var(--font-body); text-decoration: none; }
.ek-app__mehr { display: inline-flex; align-items: center; padding: 11px 20px; border-radius: var(--radius-pill); border: 1px solid var(--ink); color: var(--ink); font: 500 15px/1.2 var(--font-body); text-decoration: none; }
.ek-app__klein { margin: 12px 0 0; font-size: 13px; color: var(--ink-soft); }
.ek-app__handy { width: 150px; height: 250px; margin: 0 auto; padding: 12px 9px; border: 6px solid var(--ink); border-radius: 26px; background: var(--bg); display: flex; flex-direction: column; gap: 7px; }
.ek-app__handy i { display: block; height: 34px; border-radius: 8px; background: var(--card); }
.ek-app__handy i:first-child { height: 16px; background: none; border-bottom: 2px solid var(--line); border-radius: 0; }
@media (max-width: 760px) {
  .ek-app__box { grid-template-columns: 1fr; padding: 22px 20px; }
  .ek-app__handy { display: none; }
}

/* Punkt 126: App-Fehler-Paket */
html.ist-app .nur-web, html:not(.ist-app) .nur-app { display: none; }
.mk-aus-aendern { align-self: flex-start; }

/* Punkt 126: Kopf in Meine Küche wechselt zwischen Symbol und Zurück */
html.ist-app .app-zurueck[hidden], html.ist-app .app-symbol[hidden] { display: none; }
html.ist-app.mk-kopf-zurueck a.mk__zurueck { display: none; }

/* Punkt 127: Kerntemperatur im Kochmodus und auf der Rezeptseite, Timer erinnert früher */
.km-timer__richt { font-size: 13px; color: var(--km-soft); margin-top: 2px; }
.km-kern { background: var(--km-flaeche); border: 1px solid var(--km-linie); border-radius: var(--radius-card); padding: 14px 18px; margin: 0 0 12px; }
.km-kern__unter { font-size: 13px; color: var(--km-soft); }
.km-kern__wert { font-family: var(--font-head); font-weight: 600; font-size: 34px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.km-kern__text { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--km-ink); }
.km-kern__link { display: inline-block; margin-top: 10px; padding: 6px 0; font-size: 14px; color: var(--km-ink); text-decoration: underline; text-underline-offset: 3px; }
.rz-kern { max-width: 60ch; margin: 20px 0 0; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); scroll-margin-top: 90px; }
.rz-kern__kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rz-kern__titel { font-weight: 600; font-size: 15px; }
.rz-kern__wert { font-family: var(--font-head); font-weight: 600; font-size: 22px; }
.rz-kern p { margin: 6px 0 0; font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; }
.rz-kern__link { display: inline-block; margin-top: 8px; font-size: 14px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Punkt 128: Inhaltsblock „Ausstattung“ (Regal, Kopf je Pfanne, Wunschzettel, Brücke zur App) */
.aus-regal { background: var(--card); border-radius: 22px; box-shadow: var(--shadow-md); padding: 22px 22px 18px; margin: 26px 0 28px; }
.aus-regal__kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.aus-regal__titel { font: 600 22px/1.25 var(--font-head); margin: 0; }
.aus-regal__unter { margin: 2px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.aus-wer { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--ink-soft); }
.aus-wer__knopf { font: 500 13px/1 var(--font-body); border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: var(--radius-pill); padding: 9px 12px; min-height: 36px; cursor: pointer; }
.aus-wer__knopf--an { background: var(--ink); color: var(--card); border-color: var(--ink); }
.aus-fach { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; }
.aus-pf { display: flex; flex-direction: column; background: var(--bg); border: 1px solid transparent; border-radius: 16px; padding: 12px; color: inherit; text-decoration: none; position: relative; }
a.aus-pf:hover { border-color: var(--line); }
.aus-pf__nr { position: absolute; top: 10px; left: 12px; font: 700 12px/1 var(--font-head); color: var(--ink-soft); }
.aus-umriss { width: 100%; height: 64px; display: block; color: var(--ink); }
.aus-pf .aus-umriss { margin: 10px 0 6px; }
.aus-pf__name { font: 600 14.5px/1.25 var(--font-head); }
.aus-pf__mat { font-size: 12px; color: var(--ink-soft); margin-top: 2px; line-height: 1.35; }
.aus-pf__rolle { font-size: 12.5px; margin: 8px 0 10px; line-height: 1.35; }
.aus-pf__gr { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--ink-soft); }
.aus-pf__gr em { font: 600 15px/1.2 var(--font-head); font-style: normal; color: var(--ink); }
.aus-schrank { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 12px; }
.aus-schrank > div, .aus-schrank__wunsch { border: 1px dashed var(--line); border-radius: 14px; padding: 10px 12px; font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
.aus-schrank b { display: block; color: var(--ink); font-size: 13px; margin-bottom: 2px; }
.aus-schrank__wunsch { border: 1.5px dashed var(--core-tone); background: color-mix(in srgb, var(--core-tone) 10%, transparent); text-decoration: none; }
.aus-regal__fuss { font-size: 12.5px; color: var(--ink-soft); margin: 12px 0 0; }

.aus-kopf { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; margin: 48px 0 14px; clear: both; }
.aus-kopf__bild { background: var(--card); border-radius: 16px; box-shadow: var(--shadow-sm); height: 84px; display: flex; align-items: center; justify-content: center; }
.aus-kopf__bild .aus-umriss { width: 78px; height: 56px; }
.aus-kopf .content-block--heading { margin: 0 0 6px; scroll-margin-top: 90px; }
.aus-marken { display: flex; gap: 6px; flex-wrap: wrap; }
.aus-marke { font-size: 12.5px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 3px 10px; }
.aus-marke--rolle { background: var(--patina-soft); border-color: transparent; color: var(--patina); font-weight: 600; }
.aus-groesse { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); background: var(--card); border-radius: 14px; box-shadow: var(--shadow-sm); overflow: hidden; margin: 0 0 18px; font-size: 13px; }
.aus-groesse > div { padding: 10px 14px; border-right: 1px solid var(--line); }
.aus-groesse > div:last-child { border-right: none; }
.aus-groesse small { display: block; color: var(--ink-soft); font-size: 12px; }
.aus-groesse b { font: 600 17px/1.3 var(--font-head); }
.aus-groesse__du { display: none; }
.aus-groesse__h--du { background: var(--patina-soft); }
.aus-groesse__h--du .aus-groesse__du { display: inline; }

.aus-selten { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 6px 0 18px; }
.aus-selten__karte { background: var(--card); border-radius: 14px; box-shadow: var(--shadow-sm); padding: 12px; font-size: 13px; color: inherit; text-decoration: none; line-height: 1.45; }
.aus-selten__karte .aus-umriss { height: 44px; color: var(--ink-soft); opacity: .7; margin-bottom: 6px; }
.aus-selten__karte b { display: block; font-size: 13.5px; }
.aus-selten__text { display: block; }
.aus-selten__urteil { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); margin-top: 6px; }

.aus-offen { background: var(--card); border: 1.5px dashed var(--core-tone); border-radius: 18px; padding: 16px 18px; margin: 18px 0; clear: both; }
.aus-offen__kopf b { display: block; font: 600 17px/1.3 var(--font-head); }
.aus-offen__kopf span { font-size: 13.5px; color: var(--ink-soft); }
.aus-offen__varianten { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 12px 0 10px; }
.aus-offen__v svg { width: 100%; max-width: 240px; height: auto; max-height: 120px; display: block; margin-bottom: 8px; }
.aus-offen__v b { display: block; font-size: 14px; line-height: 1.35; }
.aus-offen__v small { display: block; font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; margin-top: 3px; }
.aus-offen__link { font-size: 14px; color: var(--ink); font-weight: 600; }
.aus-weiter { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--card); border-radius: 14px; box-shadow: var(--shadow-sm); padding: 12px 16px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14.5px; margin: 6px 0 0; clear: both; }
.aus-weiter small { display: block; font-weight: 400; color: var(--ink-soft); font-size: 12.5px; }

.aus-bruecke { background: var(--flaeche-dunkel); color: #F1F3EF; border-radius: 22px; padding: 24px; display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; max-width: 70ch; }
.aus-bruecke h3 { font: 600 21px/1.3 var(--font-head); margin: 0 0 6px; color: #F1F3EF; }
.aus-bruecke p { margin: 0; font-size: 14.5px; color: #C9CFCB; }
.aus-bruecke__knoepfe { display: flex; flex-direction: column; gap: 8px; }
.aus-bruecke__knoepfe a { display: inline-block; text-align: center; text-decoration: none; font-weight: 600; font-size: 14px; border-radius: var(--radius-pill); padding: 11px 18px; }
.aus-bruecke__eins { background: #F1F3EF; color: #1D2321; }
.aus-bruecke__zwei { border: 1px solid #5C6360; color: #F1F3EF; }

@media (max-width: 720px) {
  .aus-regal { padding: 16px 14px; }
  .aus-fach { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -14px; padding: 0 14px 4px; }
  .aus-pf { flex: none; width: 150px; scroll-snap-align: start; }
  .aus-kopf { grid-template-columns: 72px 1fr; gap: 12px; }
  .aus-kopf__bild { height: 64px; }
  .aus-kopf__bild .aus-umriss { width: 60px; height: 44px; }
  .aus-kopf .content-block--heading { font-size: 21px; line-height: 1.3; }
  .aus-groesse { grid-template-columns: 1fr 1fr; }
  .aus-groesse > div { border-bottom: 1px solid var(--line); }
  .aus-selten__karte { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; }
  .aus-selten__karte .aus-umriss { height: 36px; margin: 0; }
  .aus-bruecke { grid-template-columns: 1fr; padding: 20px; }
}

/* Punkt 129: PFAS „nur laut Hersteller“ in Vergleichstabellen */
.ek-teils { color: var(--ink); font-weight: 500; }
/* Punkt 129: Info-Kasten „Keramik ist nicht gleich Keramik“ */
.ki-box { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 16px 18px; margin: 18px 0; max-width: 70ch; }
.ki-box__titel { font: 600 17px/1.3 var(--font-head); margin: 0 0 6px; }
.ki-box__hier { margin: 0 0 8px; font-size: 14px; }
.ki-box__liste { list-style: none; margin: 0; padding: 0; }
.ki-box__zeile { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.ki-box__zeile--hier { background: var(--patina-soft); margin: 0 -10px; padding: 10px; border-radius: 10px; border-top-color: transparent; }
.ki-box__name { font-weight: 600; font-size: 14.5px; }
.ki-box__name em { font-style: normal; font-weight: 500; font-size: 12px; color: var(--patina); margin-left: 6px; }
.ki-box__satz { grid-column: 1; font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; }
.ki-box__stufe { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 12px; font-weight: 600; border-radius: var(--radius-pill); padding: 3px 10px; white-space: nowrap; border: 1px solid var(--line); }
.ki-box__stufe--nein { color: var(--ink-soft); }
.ki-box__stufe--teils { color: var(--ink); }
.ki-box__fuss { margin: 10px 0 0; font-size: 13.5px; }
.se-pfas-quelle { font-size: 13px; color: var(--ink-soft); }
@media (max-width: 520px) { .ki-box__zeile { grid-template-columns: 1fr; } .ki-box__stufe { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 4px; } }

/* ============================================================
   Benachrichtigungen in der App (Stufe 2, 09.10.2026): Seite /app/benachrichtigungen (Präfix bn-),
   Zeile im Menü „Mehr“ und Hinweiskarte in Meine Küche. Nur Tokens, damit hell und dunkel stimmen.
   Der Schalter ist eine Einstellung, keine Kauf-Aktion: an = Patina, nie Ember.
   ============================================================ */
.bn-wrap { max-width: 640px; }
.bn { padding: 20px 0 32px; }
.bn__h1 { font: 700 26px/1.2 var(--font-head); margin: 0 0 8px; }
.bn__lead { color: var(--ink-soft); margin: 0 0 18px; line-height: 1.5; }
.bn__gruppe { font: 600 12px/1.3 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin: 22px 4px 8px; }
.bn__fuss { color: var(--ink-soft); font-size: 13px; line-height: 1.5; margin: 14px 4px 0; }
.bn__fuss a { color: var(--ink); }
.bn-karte { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); }
.bn-zeile { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.bn-zeile + .bn-zeile { border-top: 1px solid var(--line); }
.bn-zeile__txt { flex: 1; min-width: 0; }
.bn-zeile__txt strong { display: block; font-weight: 600; }
.bn-zeile__txt small { display: block; color: var(--ink-soft); font-size: 13px; }
.bn-zeile--haupt .bn-zeile__txt strong { font: 600 17px/1.3 var(--font-head); }
.bn-schalter { flex: none; position: relative; width: 52px; height: 32px; padding: 0; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--line); cursor: pointer; transition: background .15s, border-color .15s; -webkit-tap-highlight-color: transparent; }
.bn-schalter::after { content: ""; position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow-sm); transition: transform .15s; }
.bn-schalter[aria-checked="true"] { background: var(--patina); border-color: var(--patina); }
.bn-schalter[aria-checked="true"]::after { transform: translateX(20px); }
.bn-schalter:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bn-schalter:disabled { cursor: default; }
.bn-aus .bn-schalter { opacity: .45; }
.bn-aus .bn-zeile__txt { opacity: .5; }
.bn-hinweis { background: var(--patina-soft); color: var(--ink); border-radius: var(--radius-card); padding: 13px 15px; font-size: 14px; line-height: 1.5; margin: 16px 0 0; }
.bn-hinweis[hidden], [data-bn-themen][hidden] { display: none; }
.bn-knopf { display: inline-block; font: 500 15px var(--font-body); color: var(--ink); border: 1.5px solid var(--ink); border-radius: var(--radius-control); padding: 10px 16px; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .bn-schalter, .bn-schalter::after { transition: none; } }
/* Zeile im Menü „Mehr“: Stand rechts neben dem Namen */
.app-mehr__liste a.app-mehr__mitstand { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.app-mehr__stand { color: var(--ink-soft); font-size: 13px; white-space: nowrap; }
/* Hinweiskarte in Meine Küche: einmalig, wegklickbar */
.mk-push { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 6px; padding: 14px 12px 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); }
.mk-push__txt { flex: 1; min-width: 0; }
.mk-push__t { display: block; font: 600 16px/1.3 var(--font-head); }
.mk-push__txt p { margin: 3px 0 11px; font-size: 14px; color: var(--ink-soft); line-height: 1.45; }
.mk-push__zu { flex: none; width: 36px; height: 36px; margin: -6px -4px 0 0; border: 0; background: transparent; color: var(--ink-soft); font-size: 22px; line-height: 1; cursor: pointer; border-radius: var(--radius-control); }
.app-mehr__h--frei { margin: 18px 0 8px; }

/* App-Seite /app (09.10.2026, Wunsch des Nutzers): echte Bildschirmfotos der App statt der gezeichneten Skizze.
   Zwei Handys im Kopf, dahinter der eine Verlauf der Seite (Glut trifft Stahl), Schritte mit Ausschnitten. */
.as-buehne { position: relative; display: flex; justify-content: center; align-items: center; min-height: 600px; isolation: isolate; }
.as-buehne::before { content: ""; position: absolute; inset: 4% -6% 2% -2%; z-index: -1; border-radius: 48% 52% 46% 54% / 50% 44% 56% 50%;
  background: radial-gradient(60% 55% at 28% 30%, var(--ember-soft), transparent 70%), radial-gradient(60% 60% at 74% 68%, var(--patina-soft), transparent 72%); }
.as-tel { width: 264px; flex: none; padding: 9px; border-radius: 40px; background: #1D2321; box-shadow: var(--shadow-lg); }
.as-tel img { display: block; width: 100%; height: auto; border-radius: 31px; background: #F6F7F4; }
.as-tel--vorn { position: relative; z-index: 1; margin-right: 96px; }
.as-tel--hinten { position: absolute; z-index: 0; right: 0; top: 50%; width: 226px; padding: 8px; border-radius: 35px; transform: translateY(-46%) rotate(5deg); box-shadow: var(--shadow-md); }
.as-tel--hinten img { border-radius: 27px; }
html[data-thema="dunkel"] .as-tel { box-shadow: 0 0 0 1px var(--line), var(--shadow-lg); }
.as-schritt__bild--foto { padding: 0; height: auto; display: block; background: #F6F7F4; }
.as-schritt__bild--foto img { display: block; width: 100%; height: auto; }
.as-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .as-tel--vorn { margin-right: 70px; } .as-tel--hinten { width: 200px; } }
@media (max-width: 900px) {
  .as-buehne { min-height: 0; padding: 12px 0 4px; }
  .as-tel--vorn { margin-right: 84px; width: 232px; }
  .as-tel--hinten { right: calc(50% - 190px); width: 190px; }
  .as-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .as-tel--vorn { margin-right: 64px; width: 212px; border-radius: 34px; padding: 8px; }
  .as-tel--vorn img { border-radius: 26px; }
  .as-tel--hinten { right: calc(50% - 160px); width: 168px; border-radius: 28px; padding: 6px; }
  .as-tel--hinten img { border-radius: 22px; }
  .as-raster { grid-template-columns: 1fr; }
}

/* „Nutze ich diese Pfanne richtig?“ (10.10.2026): Karte im Steckbrief und Ansicht #nutzung-<id> in Meine Küche */
.mk-nutz-einstieg { margin: 14px 0 6px; padding: 16px; background: var(--card); border-radius: var(--radius-card); border: 1.5px solid var(--patina); box-shadow: var(--shadow-sm); }
.mk-nutz-einstieg__t { display: block; font: 600 17px/1.3 var(--font-head); }
.mk-nutz-einstieg p { margin: 4px 0 12px; font-size: 14px; color: var(--ink-soft); line-height: 1.45; }
.mk-nutz__hinweis { margin: 0 0 10px; }
.mk-nutz__mehr { margin: 10px 0 0; padding: 6px 2px; border: 0; background: none; color: var(--ink); font: 500 14px/1.3 var(--font-body); text-decoration: underline; cursor: pointer; }
.mk-nutz__mehr[hidden] { display: none; }
.mk-nutz__ergebnis { margin-top: 20px; }
.mk-nutz__leer { padding: 16px; border: 1px dashed var(--line); border-radius: var(--radius-card); color: var(--ink-soft); font-size: 14.5px; margin: 0; }
.mk-nutz__fazit { font: 600 18px/1.35 var(--font-head); margin: 0 0 4px; }
.mk-nutz__h { margin-top: 22px; }
.mk-nutz__karte { margin-bottom: 10px; border-left: 4px solid var(--line); }
.mk-nutz__karte--passt { border-left-color: var(--patina); }
.mk-nutz__karte--geht { border-left-color: #C9952B; }
.mk-nutz__karte--nicht { border-left-color: var(--ink-soft); }
.mk-nutz__kopf { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 6px; }
.mk-nutz__gericht strong { font: 600 16px/1.3 var(--font-head); }
.mk-nutz__tb { display: block; font-size: 12.5px; color: var(--ink-soft); }
.mk-nutz__satz { margin: 0; font-size: 14.5px; line-height: 1.5; }
.mk-nutz__besser { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; }
.mk-nutz__besser a, .mk-nutz__rezepte { color: var(--ink); }
.mk-nutz__rezepte { display: inline-block; margin-top: 8px; font-size: 14px; }
/* „Nutze ich diese Pfanne richtig?“: Vorschläge und Größe (10.10.2026) */
.mk-nutz__sprung { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; text-align: left; }
.mk-nutz-vor { margin-top: 10px; scroll-margin-top: 76px; }
.mk-nutz-vor:focus { outline: none; }
.mk-nutz-vor:focus-visible { outline: 2px solid var(--patina); outline-offset: 2px; }
.mk-nutz-vor--eigen .mk-aus-vor__nr { color: var(--ink-soft); }
.mk-nutz-vor__fuer { font-weight: 600; }
.mk-nutz-gr { margin-top: 14px; }
.mk-nutz-gr__t { display: block; font: 600 16px/1.3 var(--font-head); margin-bottom: 2px; }
.mk-nutz-gr p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; }
.mk-nutz-gr .mk__chips { margin-top: 6px; }
.mk-nutz-gr__gut { color: var(--ink-soft); }
.mk-nutz-gr .mk-aus-vor__aktion { margin-top: 12px; }
/* „Nutze ich diese Pfanne richtig?“: Auswahl als Zeile, „Passt“ zum Aufklappen, Nachlesen (10.10.2026) */
.mk-nutz__kurz { margin: 14px 0 0; padding: 14px 16px; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); }
.mk-nutz__kurz[hidden], .mk-nutz__auswahl[hidden] { display: none; }
.mk-nutz__kurz p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.5; }
.mk-nutz__auf > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.mk-nutz__auf > summary::-webkit-details-marker { display: none; }
.mk-nutz__auf > summary .mk-nutz__kopf { margin-bottom: 0; }
.mk-nutz__aufwort { flex: none; font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.mk-nutz__aufwort::after { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 2px 2px 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
.mk-nutz__auf[open] .mk-nutz__aufwort::after { transform: rotate(-135deg); margin-bottom: -2px; }
.mk-nutz__auf[open] > summary { margin-bottom: 8px; }
.mk-nutz__auf > summary:focus-visible { outline: 2px solid var(--patina); outline-offset: 4px; border-radius: 4px; }
.mk-nutz__rezeptzeile { margin: 8px 0 0; font-size: 14px; color: var(--ink-soft); }
.mk-nutz__rezeptzeile .mk-nutz__rezepte { display: inline; margin: 0; }
.mk-nutz__lesen { margin: 12px 0 0 !important; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13.5px !important; color: var(--ink-soft); line-height: 1.6 !important; }
.mk-nutz__lesen a { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .mk-nutz__aufwort::after { transition: none; } }
/* Pfanne anlegen und bearbeiten: feste Leiste, ruhigere Schritte (10.10.2026) */
.mk-aktionen--fest { position: sticky; z-index: 5; margin: 20px 0 0; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); background: var(--bg); box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(-1px -100vmax -40px -100vmax); border-top: 0; }
.mk-aktionen--fest::before { content: ""; position: absolute; left: -100vmax; right: -100vmax; top: 0; height: 1px; background: var(--line); }
html.ist-app .mk-aktionen--fest { padding-bottom: 10px; }
.mk-aktionen--fest .mk-knopf { flex: 1; min-height: 50px; font-size: 16px; font-weight: 600; }
.mk-aktionen--fest .mk-knopf--haupt:disabled { background: var(--line); border-color: var(--line); color: var(--ink-soft); opacity: 1; }
.mk-frage__h { margin: 4px 0 10px; }
details.mk-warum { background: none; padding: 0; margin: 0 0 14px; border-radius: 0; }
details.mk-warum > summary { display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--patina-soft); color: var(--patina); font: 600 13.5px/1.3 var(--font-body); }
details.mk-warum > summary::-webkit-details-marker { display: none; }
details.mk-warum > summary::after { content: ""; width: 6px; height: 6px; margin-bottom: 3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
details.mk-warum[open] > summary::after { transform: rotate(-135deg); margin-bottom: -3px; }
details.mk-warum > summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
details.mk-warum > p { margin-top: 8px; padding: 12px 14px; background: var(--patina-soft); border-radius: var(--radius-control); }
details.mk-warum a { text-decoration: underline; text-underline-offset: 2px; }
.mk-frage__schnitt { display: flex; align-items: center; justify-content: flex-start; gap: 14px; padding: 10px 14px; margin-bottom: 12px; }
.mk-frage__schnittbild { flex: none; width: 84px; height: 56px; display: grid; place-items: center; background: var(--bg); border-radius: 10px; }
.mk-frage__schnitt .mk-frage__schnittbild svg { width: auto; max-width: 72px; max-height: 46px; height: auto; }
.mk-frage__schnitttext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mk-frage__schnitttext small { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.mk-frage__schnitttext strong { font: 600 15px/1.3 var(--font-head); }
.mk-option { min-height: 56px; }
.mk-optionen--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mk-optionen--drei .mk-option { justify-content: center; text-align: center; padding: 10px 6px; min-height: 52px; }
.mk-optionen--drei .mk-option__text { align-items: center; }
.mk-optionen--drei .mk-option--offen { grid-column: 1 / -1; }
.mk-frei__aktion { margin: 16px 0 6px; }
.mk-frei__aktion .mk-knopf { width: 100%; }
.mk-frei summary { padding: 6px 0; }
/* Menü „Mehr“: App weiterempfehlen (10.10.2026) */
.app-empf { margin-top: 18px; padding: 16px; background: var(--card); border-radius: var(--radius-card); border: 1.5px solid var(--patina); }
.app-empf__t { display: block; font: 600 17px/1.3 var(--font-head); }
.app-empf__p { margin: 4px 0 12px; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.app-empf__knopf { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; border: 1px solid var(--ink); border-radius: var(--radius-pill); background: var(--ink); color: var(--card); font: 600 15.5px/1.2 var(--font-body); cursor: pointer; }
.app-empf__knopf:focus-visible { outline: 3px solid var(--patina); outline-offset: 2px; }
.app-empf__info { display: block; margin-top: 8px; font-size: 13.5px; color: var(--ink-soft); word-break: break-word; }
.app-empf__info:empty { display: none; }
/* App-Seite: Satz unter der Überschrift, was die App ist (10.10.2026) */
.as-was { margin: 4px 0 14px; font: 600 16px/1.45 var(--font-body); color: var(--ink); max-width: 34em; }
/* Serienseite: Kauf-Links je Form unter den Knöpfen (10.10.2026) */
.se-kauf { margin-top: 14px; border-top: 0; padding-top: 0; gap: 6px; }
.se-kauf span { font-size: 12.5px; color: var(--ink-soft); font-weight: 500; }
.se-kauf a { font-size: 13.5px; padding: 5px 12px; }

/* ============================================================
   Startseite, Optik (10.10.2026): farbige Bänder statt durchgehend Weiß-auf-Grau,
   „Unsere Wahl“ sichtbar, Urteile farbig, FAQ als ein Kasten.
   Bänder: warm = --ember-soft, kühl = --patina-soft; Karten darauf bleiben weiß.
   ============================================================ */
main .wrap section.ek-flaeche { padding: 34px 36px 36px; margin: 28px 0; border-radius: var(--radius-hero); border-top: 0; }
main .wrap section.ek-flaeche + section.divider { border-top: 0; }
.ek-flaeche--warm { background: var(--ember-soft); }
.ek-flaeche--kuehl { background: var(--patina-soft); }
.ek-flaeche .ek-tabs__list { border-bottom-color: color-mix(in srgb, var(--ink) 14%, transparent); }
.ek-flaeche .ek-chip:hover { background: var(--bg); }
@media (max-width: 720px) {
  main .wrap section.ek-flaeche { padding: 26px 16px 28px; margin: 20px 0; border-radius: 22px; }
}

/* „Unsere Wahl“: Etikett und Kante, Patina = Vertrauen/Info (keine Kaufaktion) */
.ek-wahl { display: inline-flex; align-self: flex-start; width: max-content; margin-bottom: 2px; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--patina); color: var(--card); font: 600 11px/1.2 var(--font-body); letter-spacing: .03em; text-transform: uppercase; }
.pk__text > .ek-wahl { font-size: 11px; line-height: 1.2; color: var(--card); }
html[data-thema="dunkel"] .pk__text > .ek-wahl { color: var(--bg); }
.pk--wahl { box-shadow: inset 0 0 0 2px var(--patina), var(--shadow-sm); }
.sl__leiste { background: var(--ember-soft); box-shadow: none; }
.sl__treppe li a { background: var(--card); }
.sl__treppe li.sl__wahl a { box-shadow: inset 0 calc(var(--h, 1) * -5px) 0 var(--patina-soft), inset 0 0 0 2px var(--patina); }
.sl__treppe li.sl__wahl .ek-wahl { font-size: 10px; padding: 2px 7px; margin: 2px 0 0; }
html[data-thema="dunkel"] .ek-wahl { color: var(--bg); }

/* Mythen: Urteil in drei Farben */
.ek-myth__urteil--gut { color: var(--gut); background: var(--gut-soft); }
.ek-myth__urteil--mittel { color: var(--mittel); background: var(--mittel-soft); }
.ek-myth__urteil--rot { color: var(--rot); background: var(--rot-soft); }

/* FAQ der Startseite: ein Kasten mit Trennlinien statt einzelner Kärtchen */
.ek-section--faq .ek-faq--zwei { gap: 0 44px; padding: 6px 28px; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); }
.ek-section--faq .ek-faq details { background: none; box-shadow: none; border-radius: 0; padding: 2px 0; border-bottom: 1px solid var(--line); }
.ek-section--faq .ek-faq summary { list-style: none; display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.ek-section--faq .ek-faq summary::-webkit-details-marker { display: none; }
.ek-section--faq .ek-faq summary::after { content: "+"; flex: none; font: 500 20px/1 var(--font-head); color: var(--patina); }
.ek-section--faq .ek-faq details[open] summary::after { content: "–"; }
@media (min-width: 801px) { .ek-section--faq .ek-faq--zwei details:nth-last-child(-n+2) { border-bottom: 0; } }
@media (max-width: 800px) { .ek-section--faq .ek-faq--zwei { padding: 4px 18px; } .ek-section--faq .ek-faq--zwei details:last-child { border-bottom: 0; } }
@media (max-width: 700px) {
  .sl__treppe li.sl__wahl a { flex-wrap: wrap; box-shadow: inset calc(var(--h, 1) * 5px) 0 0 var(--patina-soft), inset 0 0 0 2px var(--patina); }
  .sl__treppe li.sl__wahl .ek-wahl { order: 5; margin: 0 0 0 auto; }
  .sl__treppe li.sl__wahl .sl__tpreis { flex-basis: 100%; margin-left: 34px; white-space: normal; }
}

/* Grundlagen der Kaufberatung (Startseite, 10.10.2026): Symbol, „Lesen →“ unten */
.ek-guide--grund { gap: 6px; padding: 18px 18px 16px; transition: box-shadow .15s ease, transform .15s ease; }
.ek-guide--grund:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.ek-guide__icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 6px; border-radius: 12px; background: var(--patina-soft); color: var(--patina); }
.ek-guide__icon svg { width: 22px; height: 22px; }
.ek-guide__los { margin-top: auto; padding-top: 6px; font-size: 13px; font-weight: 600; color: var(--patina); }
@media (max-width: 560px) { .ek-guide__icon { width: 34px; height: 34px; margin-bottom: 2px; } .ek-guide__icon svg { width: 19px; height: 19px; } .ek-guide__los { display: none; } }

/* Kauf-Chips der Serienkarten ruhiger (10.10.2026): neutral mit dunklem Rand, Ember erst beim Überfahren
   und bei der Form, die im Filter gewählt ist (eine Hauptaktion je Ansicht, Regel aus tokens.css) */
.sf__kauf a { color: var(--ink); background: var(--card); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 28%, transparent); }
.sf__kauf a:hover, .sf__kauf a.is-treffer { background: var(--ember); color: #fff; box-shadow: none; }

/* ===== Pfannen als Produkte und Produktvergleich (11.10.2026, Punkt 153) ===== */
.pf .ek-eyebrow a { color: inherit; }
.pf-vgl-knopf { border: 0; cursor: pointer; }
.pf-vgl-knopf.is-drin { background: var(--patina); }
.pf-kacheln { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.pf-kachel { background: var(--card); border-radius: var(--radius-control); padding: 12px 14px; box-shadow: var(--shadow-sm); }
.pf-kachel dt { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 4px; }
.pf-kachel dd { margin: 0; font: 600 18px/1.25 var(--font-head); color: var(--ink); }
.pf-kachel dd small { display: block; font: 400 12px/1.3 var(--font-body); color: var(--ink-soft); margin-top: 3px; }
.pf-kachel--wichtig { box-shadow: var(--shadow-sm), inset 3px 0 0 var(--ember); }
.pf-kachel.is-leer dd { font: italic 400 14.5px/1.3 var(--font-body); color: var(--ink-soft); }
.pf-masse .se-quelle { margin-top: 14px; }
.pf-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pf-liste li { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: var(--radius-control); box-shadow: var(--shadow-sm); padding: 0 16px 0 0; }
.pf-liste__haupt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 12px 0 12px 16px; text-decoration: none; color: var(--ink); }
.pf-liste__haupt span { font-size: 13.5px; color: var(--ink-soft); }
.pf-liste__pfeil { font-size: 13.5px; font-weight: 600; color: var(--patina); white-space: nowrap; }
.pf-liste li:hover { box-shadow: var(--shadow-md); }
.pf-tab { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 4px 18px; }
.pf-tab__kopf, .pf-tab__zeile { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; }
.pf-tab--ohne-boden .pf-tab__kopf, .pf-tab--ohne-boden .pf-tab__zeile { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pf-tab__kopf { font-size: 12.5px; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.pf-tab__zeile + .pf-tab__zeile { border-top: 1px solid var(--line); }
.pf-tab__zeile { font-size: 14.5px; }
.pf-tab__name a { font-weight: 600; color: var(--ink); }
.pf-tab .is-leer { color: var(--ink-soft); font-style: italic; font-size: 13.5px; }
.pf-tab__vgl { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: var(--radius-pill); padding: 6px 12px; font: 600 13px/1 var(--font-body); cursor: pointer; white-space: nowrap; }
.pf-tab__vor { display: none; }
.pf-tab__aktion { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.pf-tab__kauf { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.pf-tab__vgl.is-drin { background: var(--patina-soft); border-color: var(--patina); }
@media (max-width: 560px) {
  .pf-tab { padding: 2px 14px; }
  .pf-tab__kopf { display: none; }
  .pf-tab__vor { display: inline; }
  .pf-tab__zeile, .pf-tab--ohne-boden .pf-tab__zeile { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n v" "w w"; row-gap: 2px; }
  .pf-tab__zeile > span:first-child { grid-area: n; }
  .pf-tab__zeile > span:last-child { grid-area: v; grid-row: 1 / span 2; }
  .pf-tab__zeile > span:not(:first-child):not(:last-child) { font-size: 13.5px; color: var(--ink-soft); grid-column: 1; }
  .pf-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-kachel dd { font-size: 16px; }
}

/* Vergleichsleiste unten */
.vgl-leiste { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 70; display: flex; align-items: center; gap: 12px; width: min(720px, calc(100% - 24px)); box-sizing: border-box; background: var(--ink); color: var(--card); border-radius: var(--radius-pill); padding: 8px 8px 8px 18px; box-shadow: var(--shadow-lg); }
.vgl-leiste[hidden] { display: none; }
.vgl-leiste__text { flex: 1; min-width: 0; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vgl-leiste__los { flex: none; background: var(--ember); color: #fff; border-radius: var(--radius-pill); padding: 9px 16px; font: 600 14px/1 var(--font-body); text-decoration: none; }
.vgl-leiste__weg { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: var(--card); font-size: 20px; line-height: 1; cursor: pointer; }
html.hat-vgl-leiste body { padding-bottom: 76px; }
html.ist-app .vgl-leiste { bottom: calc(76px + env(safe-area-inset-bottom)); }
html.ist-app.hat-vgl-leiste body { padding-bottom: calc(140px + env(safe-area-inset-bottom)); }

/* Vergleichsseite */
.pv-kopf { padding: 8px 0 4px; }
.pv-kopf h1 { margin: 6px 0 10px; }
.pv-einordnung h2 { margin: 0 0 8px; font-size: 18px; }
.pv-einordnung ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.pv-tafel { padding-top: 8px; }
.pv-zeile { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); align-items: start; }
.pv-zellen { display: grid; grid-template-columns: repeat(var(--pv-n), minmax(0, 1fr)); gap: 12px; }
.pv-label { font-size: 13.5px; color: var(--ink-soft); padding-top: 2px; }
.pv-zelle { font-size: 14.5px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.pv-zelle small { display: block; font: 400 12px/1.3 var(--font-body); color: var(--ink-soft); }
.pv-zelle.is-leer, .pv-zelle .is-leer { font-weight: 400; font-style: italic; color: var(--ink-soft); }
.pv-zeile.is-diff .pv-zelle:not(.is-leer) { background: var(--ember-soft); border-radius: 8px; padding: 2px 8px; margin: -2px -8px; }
.pv-zeile--kopf { position: sticky; top: 0; z-index: 5; background: var(--bg); border-top: 0; padding-top: 4px; }
.pv-zelle--kopf { position: relative; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 12px 34px 12px 14px; font-weight: 400; }
.pv-marke { display: block; font-size: 12.5px; color: var(--ink-soft); }
.pv-name { display: block; font: 600 16px/1.25 var(--font-head); color: var(--ink); text-decoration: none; }
.pv-groesse { display: block; font-size: 13.5px; color: var(--ink-soft); margin-top: 2px; }
.pv-bild { margin-top: 8px; } .pv-bild svg { width: 100%; height: auto; max-height: 90px; }
.pv-weg { position: absolute; top: 6px; right: 8px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-soft); text-decoration: none; font-size: 18px; }
.pv-weg:hover { background: var(--bg); color: var(--ink); }
.pv-schalter { display: inline-block; font-weight: 600; color: var(--patina); }
.pv-gruppe { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 22px 0 4px; }
.pv-tafel.is-nur-diff .pv-zeile.is-gleich { display: none; }
.pv-zeile--kauf .mk-knopf { padding: 8px 12px; font-size: 13.5px; white-space: normal; text-align: center; }
.pv-wahl { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.pv-wahl label { font-size: 13.5px; color: var(--ink-soft); }
.pv-wahl__reihe { display: flex; gap: 8px; flex-wrap: wrap; }
.pv-wahl select { flex: 1 1 240px; min-width: 0; max-width: 100%; border: 1px solid var(--line); border-radius: var(--radius-control); padding: 10px 12px; font: 15px var(--font-body); background: var(--card); color: var(--ink); }
.pv-leer p { margin: 0 0 10px; }
@media (max-width: 720px) {
  .pv-zeile { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pv-zeile--kopf .pv-label { order: 2; }
  .pv-zellen { gap: 8px; }
  .pv-zelle { font-size: 14px; }
  .pv-zelle--kopf { padding: 10px 26px 10px 10px; }
  .pv-name { font-size: 14.5px; }
  .pv-bild { display: none; }
}

/* „Jetzt vergleichen mit …“ (Punkt 153) */
.vs__titel { margin: 0 0 6px; }
h2.vs__titel { font-size: 22px; }
.vs__text { margin: 0 0 14px; color: var(--ink-soft); }
.vs__feld { position: relative; max-width: 640px; }
.vs__input { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 14px 20px; font: 16px var(--font-body); background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
.vs__input:focus { outline: 2px solid var(--patina); outline-offset: 1px; }
.vs__treffer { list-style: none; margin: 6px 0 0; padding: 6px; position: absolute; left: 0; right: 0; z-index: 30; background: var(--card); border-radius: var(--radius-control); box-shadow: var(--shadow-lg); max-height: 360px; overflow-y: auto; }
.vs__treffer a { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.vs__treffer a b { font-weight: 600; font-size: 15px; }
.vs__treffer a span { font-size: 13px; color: var(--ink-soft); }
.vs__treffer li.is-aktiv a, .vs__treffer a:hover { background: var(--patina-soft); }
.vs__leer { margin: 8px 0 0; font-size: 14px; color: var(--ink-soft); }
.vs__ohne { margin: 10px 0 0; font-size: 14px; }
.vs__ohne a { color: var(--patina); font-weight: 600; }
.vs__ohne--klein { font-size: 13px; }
.vs__unter { margin: 18px 0 8px; font-size: 13.5px; color: var(--ink-soft); }
.vs .pf-liste li { background: var(--card); }
.sf__vgl { margin-top: 10px; align-self: flex-start; justify-self: start; width: auto; display: inline-block; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: var(--radius-pill); padding: 6px 12px; font: 600 13px/1 var(--font-body); cursor: pointer; }
.sf__vgl.is-drin { background: var(--patina-soft); border-color: var(--patina); }
.pf-vgl-knopf--leise { cursor: pointer; font: 600 14.5px/1 var(--font-body); }
.pf-vgl-knopf--leise.is-drin { background: var(--patina-soft); color: var(--ink); }
.pv-eyebrow a, .pv-kopf .ek-eyebrow a { color: inherit; }
.pv-wie__liste { margin: 0 0 14px; padding-left: 18px; display: grid; gap: 8px; }

.ek-head__links { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; }

/* ===== Optik-Reihe: Serien- und Markenseite, Vergleich prominenter (11.10.2026, Punkt 156) ===== */
/* Kurzfakten als Etiketten */
.fk-chips { list-style: none; margin: 10px 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--radius-pill); font: 600 13px/1.2 var(--font-body); background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.fk-chip span { font-size: 11px; font-weight: 700; }
.fk-chip--ja { background: var(--gut-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gut) 35%, transparent); }
.fk-chip--ja span { color: var(--gut); }
.fk-chip--nein { background: var(--rot-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rot) 35%, transparent); }
.fk-chip--nein span { color: var(--rot); }
.fk-chip--mittel { background: var(--mittel-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mittel) 35%, transparent); }
.fk-chip--mittel span { color: var(--mittel); }
.fk-chip--offen { color: var(--ink-soft); font-weight: 500; }
.fk-chips--klein { margin: 4px 0 2px; gap: 4px; }
.fk-chips--klein .fk-chip { padding: 3px 9px; font-size: 12px; }

/* Serienseite: Kopf auf warmer Fläche */
.se-kopf--flaeche { background: var(--ember-soft); border-radius: var(--radius-hero); padding: 30px 34px; margin-top: 8px; }
.se-kopf--flaeche .se-bild { background: transparent; box-shadow: none; padding: 6px 0 0; }
.se-kopf--flaeche .se-label { background: color-mix(in srgb, var(--card) 70%, transparent); }
.se-kopf__links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 0; font-size: 14px; }
.se-kopf__links a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.se-karte--kuehl { background: var(--patina-soft); box-shadow: none; }
.se-karte--kuehl .ek-chip { background: var(--card); }
.se-angaben-karte { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 16px; display: grid; gap: 12px; }
.se-angaben-karte .pf-kachel { box-shadow: none; background: var(--bg); }
.se-angaben-karte .pf-kachel dd { font-size: 15.5px; }
.se-angaben-karte .se-text, .se-angaben-karte .se-pfas-quelle, .se-angaben-karte .se-quelle { margin: 0; }
.pf-kachel--breit { grid-column: span 2; }
.vs__vorher { margin: 4px 0 22px; }
.vs__suchtitel { font-size: 18px; margin: 0 0 6px; }
.vs__vorher .pf-tab { box-shadow: none; }

/* Markenseite */
.mk-kopf--flaeche { background: var(--ember-soft); border-radius: var(--radius-hero); padding: 30px 34px; margin-top: 8px; }
.mk-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 10px; }
.mk-kacheln > span { display: flex; flex-direction: column; gap: 4px; background: var(--card); border-radius: var(--radius-control); padding: 12px 14px; font-size: 13px; color: var(--ink-soft); }
.mk-kacheln > span b { font-size: 24px; margin: 0; }
.mk-kacheln > .mk-stats__hinweis { background: transparent; padding: 0; justify-content: flex-end; font-size: 12px; grid-column: 1 / -1; }
#s-sortiment .pk { background: var(--card); }

/* Serienkarten */
.sf__vgl-hinweis { margin: -4px 0 14px; font-size: 14px; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.sf__vgl-hinweis a { color: var(--patina); font-weight: 600; }
.sf__lang summary { list-style: none; cursor: pointer; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.sf__lang summary::-webkit-details-marker { display: none; }
.sf__mehrlesen { margin-left: 6px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.sf__lang[open] summary { display: none; }
.sf__aktionen { display: grid; gap: 8px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.sf__aktionen .sf__kauf { margin: 0; padding: 0; border: 0; }
.sf__aktionen-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.sf__aktionen-zeile .sf__vgl { margin: 0; }
.sf__karte .sf__seite-link { font-weight: 600; }

/* Gewähr-Hinweis schmal */
details.hersteller-hinweis { padding: 9px 14px; }
details.hersteller-hinweis summary { cursor: pointer; list-style: none; font-size: 13px; line-height: 1.5; }
details.hersteller-hinweis summary::-webkit-details-marker { display: none; }
.hersteller-hinweis__mehr { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
details.hersteller-hinweis[open] .hersteller-hinweis__mehr { display: none; }
details.hersteller-hinweis p { margin-top: 8px; }

/* Startseite: Vergleich kompakt */
.vs--kompakt { padding: 24px 30px !important; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 6px 28px; align-items: center; }
.vs--kompakt .vs__titel { font-size: 20px; margin: 0; }
.vs--kompakt .vs__text { margin: 0; grid-column: 1; font-size: 14.5px; }
.vs--kompakt .vs__feld { grid-column: 2; grid-row: 1 / span 2; max-width: none; }
.vs--kompakt .vs__ohne { grid-column: 2; margin: 0; }
.vs--kompakt .vs__ohne--klein { display: none; }
.rc-serien__vgl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px 0 0; font-size: 13.5px; color: var(--ink-soft); }

@media (max-width: 720px) {
  .se-kopf--flaeche, .mk-kopf--flaeche { padding: 20px 18px; border-radius: var(--radius-card); }
  .vs--kompakt { grid-template-columns: minmax(0, 1fr); padding: 20px 18px !important; }
  .vs--kompakt .vs__feld, .vs--kompakt .vs__ohne, .vs--kompakt .vs__text { grid-column: 1; grid-row: auto; }
  .pf-kachel--breit { grid-column: 1 / -1; }
  .mk-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Menü mit „Vergleichen“: Punkte nicht umbrechen, Abstand an die Breite anpassen */
nav.main > a, nav.main .has-dropdown { white-space: nowrap; }
@media (min-width: 821px) { nav.main { gap: clamp(12px, 1.6vw, 24px); } }
@media (min-width: 821px) and (max-width: 1099px) { nav.main > a[href="/vergleich"] { display: none; } }
/* „Womit du nicht rechnen solltest“: Farben aus den Tokens, damit es auch im Dunkelmodus lesbar ist */
.se-karte--nicht { background: color-mix(in srgb, var(--ember-soft) 70%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ember) 30%, transparent); }

/* ===== Optik-Reihe: Pfannenfinder (12.10.2026, Punkt 157) ===== */
/* Start */
.pf-kopf--flaeche { background: var(--ember-soft); border-radius: var(--radius-hero); padding: 28px 32px; margin-top: 8px; }
.pf-kopf--flaeche .ek-lede { color: var(--ink); }
.pf-tile.is-on { background: var(--ember-soft); border-color: var(--ember); box-shadow: inset 0 0 0 1px var(--ember); }
.pf-tile.is-on .pf-tile__icon { color: var(--ember); }
.pf-check, .pf-rank { background: var(--ember) !important; color: #fff !important; }
.pf-card.is-on, .pf-seg__opt.is-on { border-color: var(--ember) !important; box-shadow: inset 0 0 0 1px var(--ember) !important; background: var(--ember-soft) !important; }
.pf-progress__seg.is-done .pf-progress__bar { background: var(--patina); }
.pf-progress__seg.is-current .pf-progress__bar { background: var(--ember); }
.pf-progress__seg.is-done:not(.is-current) .pf-progress__name { color: var(--patina); }
.pf-aside__box { background: var(--patina-soft); box-shadow: none; }
.pf-aside__box .pf-chip { background: var(--card); }
.ek-table__wahl > * { background: color-mix(in srgb, var(--ember-soft) 55%, var(--card)); }
.ek-table__wahl th .ek-wahl { margin-left: 6px; vertical-align: 1px; }
.ek-table tbody th { position: sticky; left: 0; z-index: 1; background: var(--card); }
.ek-table tbody tr.ek-table__wahl th { background: color-mix(in srgb, var(--ember-soft) 55%, var(--card)); }
.ek-table thead th:first-child { position: sticky; left: 0; z-index: 2; background: var(--card); }
@media (max-width: 720px) {
  .pf-kopf--flaeche { padding: 20px 18px; border-radius: var(--radius-card); }
  .pf-kopf--flaeche .pf-titelbild { display: none; }
  .pf-kopf.pf-kopf--bild.pf-kopf--flaeche { grid-template-columns: minmax(0, 1fr); }
  .ek-table tbody th { box-shadow: 6px 0 8px -6px rgba(0,0,0,.18); }
}

/* Ergebnis */
.fe-h1 { margin-bottom: 4px; }
.fe-hinweis-affiliate { margin: 0 0 14px; }
.fe .fe__kopf { background: var(--ember-soft); }
.fe .fe__kopftext .rc__eyebrow { color: var(--ember); }
.fe__plus { background: var(--gut-soft); border-radius: 14px; padding: 14px 16px; }
.fe__plus li::before { color: var(--gut); }
.fe__minus { background: var(--mittel-soft); border-radius: 14px; padding: 14px 16px; }
.fe__minus li { color: var(--ink); }
.fe__minus li::before { content: "!"; color: var(--mittel); font-weight: 700; left: 4px; }
.pw__vgl { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: var(--radius-pill); background: var(--card); color: var(--ink); font: 600 14.5px/1 var(--font-body); text-decoration: none; box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); }
.pw__vgl::before { content: ""; width: 14px; height: 12px; border: 2px solid currentColor; border-radius: 3px; box-shadow: 6px 0 0 -2px var(--card), 6px 0 0 0 currentColor; margin-right: 6px; }
.fe__link--amazon { font-weight: 500; color: var(--ink-soft); }
.fe__amazon { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: var(--radius-pill); border: 1.5px solid var(--ink); color: var(--ink); font: 600 14.5px/1.15 var(--font-body); text-decoration: none; }
.fe__amazon:hover { background: var(--ink); color: var(--card); }
/* Umschalter „Ich will“ */
.fe__schalter { background: var(--patina-soft); box-shadow: none; }
.fe__schalter .pe__frage { color: var(--ink); font-weight: 600; }
.fe__schalter .pe__seg { background: var(--card); }
.fe__schalter .pe__seg button[aria-pressed="true"] { background: var(--ember); color: #fff; box-shadow: none; }
/* Weiter eingrenzen als ruhige Liste */
.fe__felder { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
.fe__felder .pw__feld { background: transparent; border-radius: 0; border-top: 1px solid var(--line); padding: 11px 0; grid-template-columns: 150px minmax(0, 1fr); grid-template-areas: "kopf titel" "kopf satz"; column-gap: 14px; row-gap: 2px; }
.fe__felder .pw__feld:first-child { border-top: 0; }
.fe__felder .pw__feldkopf { grid-area: kopf; align-self: center; }
.fe__felder .pw__feld strong { grid-area: titel; }
.fe__felder .pw__feldsatz { grid-area: satz; }
.fe__felder .pw__feld:hover strong { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) {
  .fe__plus, .fe__minus { padding: 12px 14px; }
  .fe__felder .pw__feld { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "titel" "satz"; }
}
@media (max-width: 720px) { .ek-table__wahl th .ek-wahl { display: none; } }
/* Abstände und Bündigkeit (12.10.2026): Flächen-Köpfe wie die übrigen Flächen, Hinweise bündig */
.se-kopf--flaeche, .mk-kopf--flaeche, .pf-kopf--flaeche { padding: 34px 36px 36px; }
main .wrap section.vs--kompakt { padding: 26px 36px !important; }
.fe-hinweis-affiliate .ad-disclosure { margin-left: 0; }
.fe-oben { padding-bottom: 6px !important; }
.fe-oben .fe__antworten { margin-bottom: 14px; }
.fe__felder .pw__feldkopf { align-self: start; padding-top: 3px; }
.se-angaben-karte .se-quelle { font-size: 13px; color: var(--ink-soft); }
@media (max-width: 720px) {
  .se-kopf--flaeche, .mk-kopf--flaeche, .pf-kopf--flaeche { padding: 26px 16px 28px; border-radius: 22px; }
  main .wrap section.vs--kompakt { padding: 22px 16px !important; }
}
.fe__schalter { padding: 14px 26px; }
@media (max-width: 720px) { .fe__schalter { padding: 14px 18px; } }
/* Sprungziele Vergleich nicht unter dem Kopf verstecken (12.10.2026) */
#s-dazu, #s-groessen { scroll-margin-top: 120px; }

/* Vergleichsseiten /vergleich/{thema} (12.10.2026, Punkt 158) */
.vsx-kopf { background: var(--ember-soft); border-radius: var(--radius-hero); padding: 34px 36px 36px; margin-top: 8px; }
.vsx-kopf h1 { margin: 6px 0 12px; }
.vsx-kopf .lede, .vsx-intro p { max-width: 68ch; color: var(--ink); }
.vsx-intro p { margin: 0 0 10px; font-size: 17px; line-height: 1.55; }
.vsx-kopf .se-label { background: color-mix(in srgb, var(--card) 70%, transparent); margin: 14px 0 0; }
.vsx-zahlen { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; }
.vsx-zahlen li { background: var(--card); border-radius: var(--radius-pill); padding: 6px 14px; font-size: 14px; color: var(--ink-soft); }
.vsx-zahlen b { color: var(--ink); font-size: 15px; }
.vsx-werkzeug { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 0 0 14px; }
.vsx-werkzeug[hidden] { display: none; }
.vsx-groessen { display: flex; flex-wrap: wrap; gap: 6px; }
.vsx-chip { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: var(--radius-pill); padding: 7px 13px; font: 600 13.5px/1 var(--font-body); cursor: pointer; }
.vsx-chip.is-on { background: var(--ember); border-color: var(--ember); color: #fff; }
.vsx-sort { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-soft); }
.vsx-sort select { border: 1px solid var(--line); border-radius: var(--radius-control); padding: 7px 10px; font: 14px var(--font-body); background: var(--card); color: var(--ink); }
.vsx-anzahl { margin: 0 0 0 auto; font-size: 13.5px; color: var(--ink-soft); }
.vsx-tab { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 4px 18px; }
.vsx-zeile { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, .7fr) minmax(0, .8fr) minmax(0, .6fr) minmax(0, .8fr) 104px; gap: 12px; align-items: center; padding: 11px 0; font-size: 14.5px; }
.vsx-tab--ohne-boden .vsx-zeile { grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, .6fr) minmax(0, .8fr) 104px; }
.vsx-zeile[hidden] { display: none; }
.vsx-zeile--kopf { font-size: 12.5px; color: var(--ink-soft); border-bottom: 1px solid var(--line); padding: 10px 0; }
.vsx-zeile + .vsx-zeile:not(.vsx-zeile--kopf) { border-top: 1px solid var(--line); }
.vsx-zeile--kopf + .vsx-zeile { border-top: 0; }
.vsx-name a { font-weight: 600; color: var(--ink); }
.vsx-marke { display: block; font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.vsx-zeile small { display: block; font-size: 12px; color: var(--ink-soft); }
.vsx-zeile .is-leer { color: var(--ink-soft); font-style: italic; font-size: 13.5px; }
.vsx-vor { display: none; }
.vsx-trenn { color: var(--ink-soft); }
.vsx-aktion { justify-self: end; }
.vsx-ohne details > summary { cursor: pointer; list-style: none; }
.vsx-ohne details > summary::-webkit-details-marker { display: none; }
.vsx-ohne summary h2 { display: inline; font-size: 20px; }
.vsx-ohne summary::after { content: " ▾"; color: var(--ink-soft); }
.vsx-ohne details[open] summary::after { content: " ▴"; }
.vsx-ohne__liste { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 18px; }
.vsx-ohne__liste li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.vsx-text h2 { margin: 26px 0 8px; }
.vsx-text p, .vsx-text li { max-width: 72ch; }
.vsx-hinweis { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; background: var(--patina-soft); border-radius: var(--radius-card); padding: 14px 18px; margin: 0 0 16px; }
.vsx-hinweis p { margin: 0; }
.pv-themen { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pv-themen a { display: inline-block; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 8px 14px; font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none; }
.pv-themen a:hover { border-color: var(--ember); }
@media (max-width: 820px) {
  .vsx-kopf { padding: 26px 16px 28px; border-radius: 22px; }
  .vsx-tab { padding: 2px 14px; }
  .vsx-zeile--kopf { display: none !important; }
  .vsx-zeile, .vsx-tab--ohne-boden .vsx-zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; padding: 12px 0; position: relative; }
  .vsx-name, .vsx-bauart { grid-column: 1 / -1; }
  .vsx-name { margin-bottom: 2px; padding-right: 108px; }
  .vsx-vor { display: inline; color: var(--ink-soft); font-size: 12.5px; }
  .vsx-aktion { position: absolute; top: 12px; right: 0; }
  .vsx-zeile small { display: inline; margin-left: 4px; }
  .vsx-anzahl { margin-left: 0; flex-basis: 100%; }
}
.vsx-name .vsx-bodend { display: block; margin: 2px 0 0; }
main .wrap section.vsx-text { display: block; }
.vsx-text h2 { margin: 30px 0 10px; }
.vsx-text h2:first-child { margin-top: 0; }
.vsx-text p { margin: 0 0 12px; }
.vsx-text ul { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; }
.vsx-intro a, .vsx-text a { color: var(--ember); text-decoration: underline; text-underline-offset: 2px; }

/* ===== Vergleichsseiten und Vergleich-Start, Optik (12.10.2026) =====
   Kopf mit Titelbild, „Auf einen Blick“ (Bauarten, Gewicht als Punktreihe, Bodenstärke),
   Tabelle mit Schnittbild und Gewichtsbalken, Wege als Karten. Farben der Bauarten nur hier. */
.vsx { --vsx-k1: var(--ember); --vsx-k2: var(--patina); --vsx-k3: color-mix(in srgb, var(--ember) 40%, var(--patina)); --vsx-k4: var(--ink-soft); }
.vsx-f-k1 { background: var(--vsx-k1); } .vsx-f-k2 { background: var(--vsx-k2); } .vsx-f-k3 { background: var(--vsx-k3); } .vsx-f-k4 { background: var(--vsx-k4); }
.vsx-f-k0 { background: var(--card); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 35%, transparent); }
.vsx-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* Kopf */
.vsx .vsx-kopf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; background: var(--ember-soft); border-radius: var(--radius-hero); padding: 34px 36px 36px; margin-top: 8px; }
.vsx .vsx-kopf--bild { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.vsx-kopf__text { min-width: 0; }
.vsx .vsx-kopf h1 { margin: 10px 0 14px; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.12; text-wrap: balance; }
.vsx .vsx-intro p { font-size: 16.5px; }
.vsx-titelbild { border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4 / 3.4; background: var(--patina-soft); box-shadow: var(--shadow-md); align-self: stretch; }
.vsx-titelbild[hidden] { display: none; }
.vsx-titelbild > img { width: 100%; height: 100%; object-fit: cover; }
.vsx .vsx-zahlen { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; }
.vsx .vsx-zahlen li { display: flex; flex-direction: column; gap: 2px; min-width: 96px; background: var(--card); border-radius: 16px; padding: 10px 16px 11px; box-shadow: var(--shadow-sm); }
.vsx .vsx-zahlen b { font: 600 26px/1.05 var(--font-head); color: var(--ink); }
.vsx .vsx-zahlen span { font-size: 13px; color: var(--ink-soft); }
.vsx-kopf__knopf.mk-knopf { margin-top: 18px; background: var(--ink); color: var(--card); border-color: var(--ink); }
.vsx-kopf__knopf.mk-knopf:hover { opacity: .9; }
.vsx-herkunft { display: flex; gap: 10px; align-items: flex-start; margin: 14px 4px 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }
.vsx-herkunft svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--patina); }
.vsx-herkunft b { color: var(--ink); font-weight: 600; }

/* Auf einen Blick */
.vsx-blick__raster { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, .8fr); gap: 14px; margin-top: 4px; }
.vsx-blick__raster--zwei { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.vsx-karte { background: var(--card); border-radius: var(--radius-card); padding: 20px 22px 18px; box-shadow: var(--shadow-sm); min-width: 0; display: flex; flex-direction: column; }
.vsx-karte h3 { margin: 0 0 12px; font-size: 16px; line-height: 1.3; }
.vsx-karte__zahl { margin: -4px 0 14px; font-size: 14px; color: var(--ink-soft); }
.vsx-karte__zahl b { font: 600 22px/1.1 var(--font-head); color: var(--ink); }
.vsx-karte__satz { margin: auto 0 0; padding-top: 12px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.vsx-karte__satz a { color: var(--ink); font-weight: 600; white-space: nowrap; }
.vsx-stapel { display: flex; gap: 3px; height: 14px; border-radius: 99px; overflow: hidden; margin: 0 0 14px; }
.vsx-stapel span { flex-basis: 0; min-width: 6px; }
.vsx-legende { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.vsx-legende li { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; padding: 3px 0; }
.vsx-legende li + li { border-top: 1px solid var(--line); padding-top: 6px; }
.vsx-legende__bild svg { display: block; width: 58px; height: auto; }
.vsx-legende__name { display: flex; align-items: center; gap: 8px; min-width: 0; line-height: 1.3; }
.vsx-legende b { font: 600 16px/1 var(--font-head); }
.vsx-reihe { position: relative; height: 54px; margin: 6px 6px 0; }
.vsx-reihe__achse { position: absolute; left: 0; right: 0; top: 26px; height: 2px; border-radius: 2px; background: var(--line); }
.vsx-reihe__punkt { position: absolute; top: 19px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; opacity: .85; outline: 2px solid var(--card); transition: transform .12s; }
.vsx-reihe__punkt:nth-child(odd) { top: 8px; }
.vsx-reihe__punkt:nth-child(3n) { top: 30px; }
.vsx-reihe__punkt:hover, .vsx-reihe__punkt:focus-visible { transform: scale(1.35); opacity: 1; z-index: 2; }
.vsx-reihe__skala { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-soft); margin: 4px 0 0; }
.vsx-ring { --anteil: 0; width: 118px; aspect-ratio: 1; border-radius: 50%; margin: 2px auto 0; display: grid; place-items: center;
  background: conic-gradient(var(--patina) calc(var(--anteil) * 1%), color-mix(in srgb, var(--patina) 16%, transparent) 0); }
.vsx-ring span { width: 84px; aspect-ratio: 1; border-radius: 50%; background: var(--card); display: grid; place-content: center; text-align: center; font-size: 12.5px; color: var(--ink-soft); line-height: 1.2; }
.vsx-ring b { font: 600 26px/1 var(--font-head); color: var(--ink); }

/* Tabelle */
.vsx .vsx-werkzeug { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 12px 14px; position: sticky; top: 8px; z-index: 5; }
.vsx .vsx-chip { background: var(--bg); border-color: transparent; }
.vsx .vsx-chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--card); }
.vsx .vsx-zeile { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1.5fr) minmax(0, .75fr) minmax(0, .85fr) minmax(0, .55fr) minmax(0, .8fr) 104px; }
.vsx .vsx-tab--ohne-boden .vsx-zeile { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1.5fr) minmax(0, .85fr) minmax(0, .55fr) minmax(0, .8fr) 104px; }
.vsx .vsx-zeile:not(.vsx-zeile--kopf):hover { background: color-mix(in srgb, var(--patina-soft) 55%, transparent); }
.vsx .vsx-tab { padding: 4px 12px; }
.vsx .vsx-zeile { padding: 10px 6px; border-radius: 10px; }
.vsx-bauart { display: flex; align-items: center; gap: 10px; }
.vsx-mini { flex: none; width: 54px; }
.vsx-mini svg { display: block; width: 54px; height: auto; }
.vsx-bauart__text { display: flex; align-items: baseline; gap: 7px; line-height: 1.3; }
.vsx-bauart__text .vsx-punkt { width: 8px; height: 8px; transform: translateY(-1px); }
.vsx-balken { display: block; height: 4px; margin-top: 6px; max-width: 110px; border-radius: 4px; background: var(--line); }
.vsx-balken i { display: block; height: 100%; border-radius: 4px; background: color-mix(in srgb, var(--ink) 55%, transparent); }

/* Serien ohne Größen */
.vsx .vsx-ohne details { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 16px 20px; }
.vsx .vsx-ohne summary { display: flex; align-items: center; gap: 14px; }
.vsx .vsx-ohne summary::after { margin-left: auto; }
.vsx-ohne__zahl { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--patina-soft); font: 600 18px/1 var(--font-head); color: var(--ink); }
.vsx .vsx-ohne summary b { display: block; font-size: 16.5px; }
.vsx .vsx-ohne summary small { display: block; font-size: 13.5px; color: var(--ink-soft); margin-top: 2px; }

/* Text, FAQ, Wege */
.vsx .vsx-text { max-width: 760px; }
.vsx .vsx-faq h2 { margin-top: 0; }
.vsx .vsx-faq .ks-karte { background: var(--card); }
.vsx-weiter h2 { margin: 0 0 14px; }
.vsx-wege { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.vsx-wege a { display: flex; flex-direction: column; gap: 4px; height: 100%; box-sizing: border-box; padding: 16px 18px; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; transition: box-shadow .15s; }
.vsx-wege a:hover { box-shadow: var(--shadow-md); }
.vsx-wege b { font-size: 15.5px; line-height: 1.3; }
.vsx-wege a > span:last-child { font-size: 13.5px; color: var(--ink-soft); line-height: 1.4; }
.vsx-wege__bild { display: flex; align-items: flex-end; height: 52px; margin-bottom: 8px; color: var(--patina); }
.vsx-wege__bild svg { width: 92px; height: auto; max-height: 52px; }

@media (max-width: 1000px) {
  .vsx-blick__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vsx-karte--boden { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; align-items: center; }
  .vsx-karte--boden h3 { grid-column: 1 / -1; }
  .vsx-karte--boden .vsx-ring { margin: 0; }
  .vsx-karte--boden .vsx-karte__satz { padding-top: 0; margin: 0; }
}
@media (max-width: 820px) {
  .vsx .vsx-kopf, .vsx .vsx-kopf--bild { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 0 26px; border-radius: 22px; overflow: hidden; }
  .vsx-kopf__text { padding: 20px 16px 0; }
  .vsx-titelbild { order: -1; aspect-ratio: 16 / 7; border-radius: 0; box-shadow: none; }
  .vsx .vsx-kopf h1 { font-size: 30px; margin: 8px 0 12px; }
  .vsx .vsx-zahlen { gap: 8px; }
  .vsx .vsx-zahlen li { min-width: 0; flex: 1 1 0; padding: 9px 12px 10px; }
  .vsx .vsx-zahlen b { font-size: 22px; }
  .vsx-kopf__knopf.mk-knopf { width: 100%; box-sizing: border-box; }
  .vsx-herkunft { margin: 12px 2px 0; }
  .vsx-blick__raster, .vsx-blick__raster--zwei { grid-template-columns: minmax(0, 1fr); }
  .vsx-karte { padding: 16px 16px 14px; }
  .vsx .vsx-werkzeug { top: 0; border-radius: 0 0 var(--radius-card) var(--radius-card); margin: 0 -4px 14px; }
  .vsx-sort > span { display: none; }
  .vsx .vsx-zeile, .vsx .vsx-tab--ohne-boden .vsx-zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 12px 4px; }
  .vsx .vsx-bauart { gap: 8px; }
  .vsx-mini, .vsx-mini svg { width: 44px; }
  .vsx-gewicht .vsx-balken { max-width: 90px; }
  .vsx .vsx-ohne details { padding: 14px 14px; }
  .vsx-wege { grid-template-columns: minmax(0, 1fr); }
  .vsx-wege a { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 14px; padding: 14px 16px; }
  .vsx-wege__bild { height: auto; margin: 0; width: 64px; flex: none; }
  .vsx-wege__bild svg { width: 64px; }
  .vsx-wege a > b { flex: 1 1 0; min-width: 0; }
  .vsx-wege a > span:last-child { flex-basis: 100%; padding-left: 78px; margin-top: -4px; }
}
/* Punktreihe als Schwarm (Ebene --y je Punkt, berechnet im Template) */
.vsx .vsx-reihe { --tiefe: 1; height: calc(20px + (2 * var(--tiefe) + 1) * 15px); }
.vsx .vsx-reihe__achse { top: 50%; margin-top: -1px; }
.vsx .vsx-reihe__punkt, .vsx .vsx-reihe__punkt:nth-child(odd), .vsx .vsx-reihe__punkt:nth-child(3n) { top: calc(50% - 7px + var(--y, 0) * 15px); width: 14px; height: 14px; margin-left: -7px; }
.vsx .vsx-karte__satz { margin-top: 14px; padding-top: 0; }
.vsx .vsx-karte--boden .vsx-karte__satz, .vsx .vsx-karte--gewicht .vsx-karte__satz { margin-top: auto; padding-top: 14px; }
.vsx .vsx-zeile { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.75fr) minmax(0, .75fr) minmax(0, .85fr) minmax(0, .55fr) minmax(0, .8fr) 100px; }
.vsx .vsx-tab--ohne-boden .vsx-zeile { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.75fr) minmax(0, .85fr) minmax(0, .55fr) minmax(0, .8fr) 100px; }
@media (max-width: 820px) {
  .vsx .vsx-werkzeug { position: static; margin: 0 0 14px; border-radius: var(--radius-card); padding: 10px 0 10px 12px; gap: 8px 12px; }
  .vsx .vsx-groessen { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; flex-basis: 100%; padding-right: 12px; }
  .vsx .vsx-groessen::-webkit-scrollbar { display: none; }
  .vsx .vsx-chip { flex: none; }
  .vsx .vsx-anzahl { flex-basis: auto; margin-left: auto; padding-right: 14px; }
}
/* Vergleich-Startseite (12.10.2026) */
.vsx-kopf--start h1 { max-width: 18ch; }
.vsx-kopf--start .lede { margin: 0 0 18px; font-size: 17px; line-height: 1.55; max-width: 52ch; color: var(--ink); }
.vs--nackt .vs__feld { max-width: 560px; }
.vs--nackt .vs__input { padding: 16px 22px; font-size: 16.5px; box-shadow: var(--shadow-md); border-color: transparent; }
.vs--nackt .vs__ohne { margin: 10px 0 0 6px; }
.vsx-schritte { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: none; }
main .wrap .vsx-schritte.ek-section { margin: 26px 0 0; padding: 0; border-top: 0; }
.vsx-schritte li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 3px; align-content: start; background: var(--card); border-radius: var(--radius-card); padding: 18px 20px; box-shadow: var(--shadow-sm); }
.vsx-schritte__nr { grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ember-soft); color: var(--ember); font: 600 18px/1 var(--font-head); }
.vsx-schritte b { font-size: 16px; line-height: 1.3; padding-top: 2px; }
.vsx-schritte li > span:last-child { font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.vsx-paar__reihe { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: center; }
.vsx-paar__gegen { font: 600 15px/1 var(--font-head); color: var(--ink-soft); background: var(--card); border-radius: 50%; width: 52px; height: 52px; display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.vsx-paar__karte { display: flex; flex-direction: column; gap: 3px; background: var(--card); border-radius: var(--radius-card); padding: 20px 22px; box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; height: 100%; box-sizing: border-box; transition: box-shadow .15s; }
.vsx-paar__karte:hover { box-shadow: var(--shadow-md); }
.vsx-paar__bild { display: block; margin: 0 0 12px; padding: 14px 10px 6px; border-radius: 14px; background: var(--bg); }
.vsx-paar__bild svg { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; }
.vsx-paar__karte > b { font-size: 17px; line-height: 1.3; }
.vsx-paar__bauart { font-size: 14px; color: var(--patina); font-weight: 600; }
.vsx-paar__karte dl { display: flex; gap: 24px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.vsx-paar__karte dt { font-size: 12.5px; color: var(--ink-soft); }
.vsx-paar__karte dd { margin: 2px 0 0; font: 600 20px/1.15 var(--font-head); }
.vsx-paar__karte dd i { font: italic 400 13.5px/1.3 var(--font-body); color: var(--ink-soft); }
.vsx-paar__los { margin: 18px 0 0; text-align: center; }
.vsx-gruppen__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.vsx-gruppen__liste a { display: flex; flex-direction: column; height: 100%; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); overflow: hidden; color: var(--ink); text-decoration: none; transition: box-shadow .15s, transform .15s; }
.vsx-gruppen__liste a:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.vsx-gruppen__bild { display: grid; place-items: center; aspect-ratio: 16 / 8; padding: 14px 18px; }
.vsx-gruppen__bild--warm { background: var(--ember-soft); } .vsx-gruppen__bild--kuehl { background: var(--patina-soft); }
.vsx-gruppen__bild svg { width: 100%; max-width: 220px; height: auto; }
.vsx-gruppen__text { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; flex: 1; }
.vsx-gruppen__text b { font-size: 16.5px; line-height: 1.3; }
.vsx-gruppen__zahlen { font-size: 13.5px; color: var(--ink-soft); }
.vsx-gruppen__spanne { font-size: 13.5px; color: var(--ink); }
.vsx-gruppen__los { margin-top: auto; padding-top: 10px; font-weight: 600; font-size: 14px; color: var(--ember); }
.vsx-liste h2 { margin: 0 0 4px; }
.vsx-liste .pv-wahl { margin: 0; }
.vsx-liste .pv-wahl select { background: var(--card); }
.vsx-liste .vsx-kopf__knopf { margin-top: 0; }
.vsx-fuss { margin-top: 8px; }
@media (max-width: 820px) {
  .vsx-kopf--start .vs--nackt { margin-top: 4px; }
  .vsx-schritte { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  main .wrap .vsx-schritte.ek-section { margin-top: 20px; }
  .vsx-schritte li { padding: 14px 16px; }
  .vsx-paar__reihe { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .vsx-paar__gegen { justify-self: center; width: 44px; height: 44px; margin: -2px 0; }
  .vsx-paar__karte { padding: 16px; }
  .vsx-paar__los .mk-knopf { width: 100%; box-sizing: border-box; }
  .vsx-gruppen__liste { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .vsx-gruppen__liste a { flex-direction: row; }
  .vsx-gruppen__bild { aspect-ratio: auto; width: 34%; flex: none; padding: 10px; }
  .vsx-gruppen__text { padding: 14px 14px 14px 12px; }
}
.vsx .vsx-titelbild { align-self: center; width: 100%; min-width: 0; height: auto; aspect-ratio: 4 / 3.2; }
.vsx-kopf--start h1 { max-width: 16ch; }
.vsx-liste h2 label { font: inherit; color: inherit; }
.vsx-liste .ek-sub { margin: 0 0 14px; }
@media (max-width: 820px) { .vsx .vsx-titelbild { aspect-ratio: 16 / 7; } }
@media (max-width: 820px) { .vsx-paar__bild svg { max-width: 210px; } .vsx-paar__bild { padding: 10px 8px 4px; } }

/* Kopfleiste (12.10.2026): Menü mittig zwischen Logo und Werkzeugen, Abstände nicht mehr nach Fensterbreite.
   Vorher wuchsen Abstand (1,6vw) und linker Rand (4vw) mit dem Fenster, die Leiste aber nicht:
   ab ca. 1320 px ragte der Pfannenfinder-Knopf aus der weißen Leiste. */
@media (min-width: 1001px) {
  nav.main { margin: 0 auto; gap: clamp(14px, 1.4vw, 20px); padding: 0 12px; }
}
@media (min-width: 861px) and (max-width: 960px) { .wordmark__img { height: 26px; } nav.main { gap: 9px; font-size: 13px; } .nav-mock { padding-left: 16px; } }

/* Startseite (12.10.2026): einheitlicher Rhythmus, Kennzahlen in der Textspalte, Vergleich-Teaser.
   Abstand zwischen Abschnitten überall 64 px (Handy 40 px); Linien zwischen Abschnitten entfallen,
   die Flächen gliedern die Seite. */
main .wrap.ek-start > section:not(.ek-flaeche), main .wrap.ek-start > div.ek-section { padding: 0; border-top: 0; margin: 0; }
main .wrap.ek-start > section.ek-flaeche { margin: 0; }
main .wrap.ek-start > * + * { margin-top: 64px !important; }
main .wrap.ek-start > div.ek-section > section.sf { padding-top: 0; }
.ek-start .ek-hero--band { align-items: center; padding-bottom: 0; }
.ek-start .ek-hero--band .ek-hero__text { gap: 14px; }
.ek-start .ek-hero__text .ek-stats { grid-column: auto; display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); gap: 12px 28px; border-top: 1px solid var(--line); margin-top: 10px; padding-top: 18px; }
.ek-start .ek-hero__text .ek-stats span { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.ek-start .ek-hero__text .ek-stats b { font-size: 24px; margin: 0; }

.vt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px 40px; align-items: center; }
.vt__text h2 { margin: 8px 0 8px; font-size: clamp(26px, 2.6vw, 32px); }
.vt__text .ek-sub { margin: 0 0 18px; max-width: 48ch; }
.vt .vs--nackt .vs__input { border-color: transparent; }
.vt__unter { margin: 18px 0 8px; font-size: 13.5px; color: var(--ink-soft); }
.vt__themen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.vt__themen a { display: inline-flex; gap: 6px; align-items: center; padding: 7px 12px; border-radius: var(--radius-pill); background: var(--card); color: var(--ink); font: 600 13.5px/1.2 var(--font-body); text-decoration: none; box-shadow: var(--shadow-sm); }
.vt__themen a span { font-weight: 500; color: var(--ink-soft); }
.vt__themen a:hover { box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--ink); }
.vt__paar { background: var(--card); border-radius: var(--radius-card); padding: 18px 18px 16px; box-shadow: var(--shadow-sm); }
.vt__paar-kopf { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; }
.vt__paar-reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vt__karte { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 14px; background: var(--bg); color: var(--ink); text-decoration: none; }
.vt__karte:hover { box-shadow: inset 0 0 0 1px var(--line); }
.vt__bild svg { display: block; width: 100%; height: auto; margin: 0 0 8px; }
.vt__karte b { font-size: 15px; line-height: 1.25; }
.vt__bauart { font-size: 13px; color: var(--patina); font-weight: 600; }
.vt__werte { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font: 600 15px/1.2 var(--font-head); }
.vt__los { display: inline-block; margin-top: 12px; font-weight: 600; font-size: 14.5px; color: var(--ember); text-decoration: none; }
.vt__los:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .vt { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  main .wrap.ek-start > * + * { margin-top: 40px !important; }
  .ek-start .ek-hero__text .ek-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; }
  .ek-start .ek-hero__text .ek-stats b { font-size: 21px; }
  .vt__paar { padding: 14px 12px 12px; }
  .vt__karte { padding: 10px; }
  .vt__karte b { font-size: 14px; }
}
.ek-start .sf > .section-head { margin-bottom: 8px; }
.ek-start .sf > .section-head h2 { margin: 0; }
.ek-start .sf > .brand-intro { margin-top: 0; font-size: 16px; color: var(--ink-soft); max-width: 62ch; }
.ek-start .sl__leiste { padding: 30px 36px; border-radius: var(--radius-hero); }
.ek-start .ek-app__box { padding: 34px 36px 36px; }
.vt__bild { display: flex; align-items: flex-end; height: 92px; margin: 0 0 8px; }
.vt__bild svg { margin: 0; max-height: 92px; }
@media (max-width: 820px) {
  .ek-start .sl__leiste { padding: 26px 16px 28px; border-radius: 22px; }
  .ek-start .ek-app__box { padding: 26px 16px 28px; border-radius: 22px; }
  .vt__bild { height: 64px; } .vt__bild svg { max-height: 64px; }
}

/* Direkter Vergleich /vergleich?v=… (12.10.2026): Gegenüberstellung im Kopf, Balken, Tafel mit Farbe je Spalte */
.vsx-f-k1, .pv-karte--k1 { --pv-farbe: var(--vsx-k1); } .pv-karte--k2 { --pv-farbe: var(--vsx-k2); } .pv-karte--k3 { --pv-farbe: var(--vsx-k3); }
.vsx .pv-duell { display: block; }
.vsx .pv-duell h1 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; max-width: 40ch; margin: 10px 0 22px; }
.pv-duell__reihe { display: grid; grid-template-columns: repeat(var(--pv-n), minmax(0, 1fr)); gap: 14px; align-items: stretch; position: relative; }
.pv-duell__oder { display: none; }
.pv-duell__reihe[style*="--pv-n: 2"] { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.pv-duell__reihe[style*="--pv-n: 2"] .pv-duell__oder { display: grid; align-self: center; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow-sm); font: 600 14px/1 var(--font-head); color: var(--ink-soft); }
.pv-karte { position: relative; display: flex; flex-direction: column; gap: 2px; background: var(--card); border-radius: var(--radius-card); padding: 16px 18px 16px; box-shadow: var(--shadow-sm); border-top: 4px solid var(--pv-farbe, var(--line)); min-width: 0; }
.pv-karte__bild { display: flex; align-items: flex-end; justify-content: center; height: 110px; margin: 0 0 12px; padding: 10px; border-radius: 14px; background: var(--bg); }
.pv-karte__bild svg { width: 100%; max-width: 260px; height: auto; max-height: 100px; }
.pv-karte__ohne { align-self: center; font-size: 13px; color: var(--ink-soft); font-style: italic; }
.pv-karte__marke { display: flex; align-items: center; gap: 7px; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.pv-karte__name { font: 600 18px/1.25 var(--font-head); color: var(--ink); text-decoration: none; }
.pv-karte__name:hover { text-decoration: underline; }
.pv-karte__groesse { font-size: 14px; color: var(--ink-soft); }
.pv-karte__bauart { margin-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--patina); }
.pv-karte__werte { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--line); margin-top: 12px; }
.pv-karte__werte dt { font-size: 12px; color: var(--ink-soft); }
.pv-karte__werte dd { margin: 2px 0 0; font: 600 18px/1.2 var(--font-head); }
.pv-karte__werte dd.is-leer { font: italic 400 13px/1.3 var(--font-body); color: var(--ink-soft); }
.pv-karte .pv-weg { top: 8px; right: 8px; background: var(--card); z-index: 1; }
.pv-karte--frei { align-items: center; justify-content: center; text-align: center; border: 2px dashed color-mix(in srgb, var(--ink) 22%, transparent); border-top-width: 2px; background: color-mix(in srgb, var(--card) 55%, transparent); box-shadow: none; color: var(--ink); text-decoration: none; min-height: 220px; gap: 6px; }
.pv-karte--frei:hover { background: var(--card); }
.pv-karte__plus { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ember); color: #fff; font: 600 24px/1 var(--font-body); margin-bottom: 4px; }
.pv-karte--frei span:last-child { font-size: 13.5px; color: var(--ink-soft); }

.vsx .pv-einordnung { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px 36px; align-items: start; }
.vsx .pv-einordnung--ohne { grid-template-columns: minmax(0, 1fr); }
.vsx .pv-einordnung h2 { margin: 0 0 12px; font-size: 22px; }
.vsx .pv-einordnung ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.vsx .pv-einordnung li { position: relative; padding: 12px 14px 12px 38px; background: var(--card); border-radius: 14px; font-size: 14.5px; line-height: 1.5; }
.vsx .pv-einordnung li::before { content: ""; position: absolute; left: 15px; top: 19px; width: 9px; height: 9px; border-radius: 50%; background: var(--patina); }
.vsx .pv-einordnung li a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.pv-balken { background: var(--card); border-radius: var(--radius-card); padding: 18px 20px 14px; box-shadow: var(--shadow-sm); display: grid; gap: 16px; }
.pv-balken h3 { margin: 0 0 8px; font-size: 14.5px; }
.pv-balken__zeile { display: grid; grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; padding: 3px 0; }
.pv-balken__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }
.pv-balken__spur { height: 10px; border-radius: 10px; background: var(--bg); overflow: hidden; }
.pv-balken__spur i { display: block; height: 100%; border-radius: 10px; }
.pv-balken__wert { font-weight: 600; white-space: nowrap; min-width: 4.5em; text-align: right; }
.pv-balken__wert.is-leer { font-weight: 400; font-style: italic; color: var(--ink-soft); font-size: 12px; }
.pv-balken__hinweis { margin: 0; font-size: 12px; color: var(--ink-soft); }

.vsx .pv-tafel .ek-head { align-items: center; }
.pv-schalter { display: inline-flex !important; align-items: center; gap: 10px; font: 600 14px/1 var(--font-body); color: var(--ink) !important; text-decoration: none; white-space: nowrap; }
.pv-schalter__knopf { position: relative; width: 38px; height: 22px; border-radius: 22px; background: color-mix(in srgb, var(--ink) 18%, transparent); transition: background .15s; }
.pv-schalter__knopf::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow-sm); transition: left .15s; }
.pv-schalter.is-an .pv-schalter__knopf { background: var(--patina); }
.pv-schalter.is-an .pv-schalter__knopf::after { left: 19px; }
.pv-tafel__karte { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 0 20px 8px; }
.vsx .pv-zeile { grid-template-columns: 200px minmax(0, 1fr); padding: 11px 8px; border-top: 1px solid var(--line); align-items: center; }
.vsx .pv-zeile--kopf { position: sticky; top: 0; z-index: 5; background: var(--card); border-top: 0; padding: 14px 8px 10px; border-bottom: 2px solid var(--line); border-radius: var(--radius-card) var(--radius-card) 0 0; }
.vsx .pv-zelle--kopf { display: flex; gap: 8px; align-items: flex-start; background: none; box-shadow: none; padding: 0; border-radius: 0; }
.vsx .pv-zelle--kopf .vsx-punkt { margin-top: 4px; }
.vsx .pv-zelle--kopf > span { min-width: 0; }
.vsx .pv-zelle--kopf .pv-marke { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
.vsx .pv-zelle--kopf .pv-name { font-size: 14.5px; }
.vsx .pv-zelle--kopf .pv-groesse { font-size: 12.5px; }
.vsx .pv-gruppe { margin: 0; padding: 18px 8px 6px; font-size: 12px; }
.vsx .pv-gruppe + .pv-zeile { border-top: 0; }
.vsx .pv-zeile.is-diff .pv-zelle:not(.is-leer) { background: none; padding: 0; margin: 0; }
.vsx .pv-zeile.is-diff { background: color-mix(in srgb, var(--ember-soft) 60%, transparent); border-radius: 10px; }
.vsx .pv-zeile.is-diff .pv-label { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; }
.vsx .pv-zeile.is-diff .pv-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ember); flex: none; }
.vsx .pv-zeile--kauf { border-top: 1px solid var(--line); padding-top: 14px; }

@media (max-width: 820px) {
  .vsx .pv-duell { padding: 22px 16px 24px; }
  .vsx .pv-duell h1 { font-size: 22px; margin-bottom: 16px; }
  .pv-duell__reihe, .pv-duell__reihe[style*="--pv-n: 2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pv-duell__reihe[style*="--pv-n: 2"] .pv-duell__oder { display: none; }
  .pv-duell__reihe[style*="--pv-n: 3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .pv-karte { padding: 12px 10px; }
  .pv-karte__bild { height: 64px; padding: 6px; margin-bottom: 8px; }
  .pv-karte__name { font-size: 15px; }
  .pv-karte__groesse, .pv-karte__bauart { font-size: 12.5px; }
  .pv-karte__werte { gap: 4px 12px; }
  .pv-karte__werte dd { font-size: 15px; }
  .pv-karte--frei { min-height: 0; padding: 18px 10px; }
  .vsx .pv-einordnung { grid-template-columns: minmax(0, 1fr); }
  .pv-balken { padding: 14px 14px 12px; }
  .pv-balken__zeile { grid-template-columns: minmax(0, 6em) minmax(0, 1fr) auto; }
  .vsx .pv-tafel .ek-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pv-tafel__karte { padding: 0 10px 6px; margin: 0 -4px; }
  .vsx .pv-zeile { grid-template-columns: minmax(0, 1fr); padding: 10px 6px; }
  .vsx .pv-zeile--kopf .pv-label { display: none; }
  .vsx .pv-zelle--kopf .pv-name { font-size: 13px; }
}
/* Vergleichsseiten: Bauart aus der Legende als Filter, „nur mit Bodenstärke“ (12.10.2026) */
.vsx-legende li { display: block; padding: 0; }
.vsx-legende li + li { padding-top: 0; }
.vsx-legende__zeile { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 5px 6px; margin: 0 -6px; box-sizing: content-box; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 14px; color: var(--ink); text-align: left; }
button.vsx-legende__zeile { cursor: pointer; }
button.vsx-legende__zeile:hover { background: var(--bg); }
button.vsx-legende__zeile.is-on { background: var(--patina-soft); box-shadow: inset 0 0 0 1.5px var(--ink); }
.vsx-nurboden { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink); cursor: pointer; white-space: nowrap; }
.vsx-nurboden input { width: 16px; height: 16px; accent-color: var(--patina); margin: 0; }
.vsx-aktiv { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px 6px 12px; border: 0; border-radius: var(--radius-pill); background: var(--patina-soft); color: var(--ink); font: 600 13px/1.2 var(--font-body); cursor: pointer; }
.vsx-aktiv[hidden] { display: none; }
.vsx-aktiv b { font-size: 15px; color: var(--ink-soft); }
@media (max-width: 820px) { .vsx-legende__zeile { grid-template-columns: 50px minmax(0, 1fr) auto; } .vsx-legende__bild svg { width: 50px; } }

/* Kaufbox (12.10.2026) wie im Shop: Form → Größe → Ausführung, ein Knopf. Links Größe → Form → Suche, Sternchen am Knopf */
.kb { display: grid; gap: 8px; min-width: 0; }
.kb-wahl { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px; }
.kb-feld { display: grid; gap: 3px; min-width: 0; align-content: start; }
.kb-feld[hidden] { display: none; }
.kb-feld--breit { grid-column: 1 / -1; }
.kb-label { font-size: 11px; font-weight: 600; color: var(--ink-soft); }
.kb-select { position: relative; display: block; min-width: 0; }
.kb-select select { -webkit-appearance: none; appearance: none; width: 100%; min-width: 0; font: 500 13.5px/1.2 var(--font-body); color: var(--ink); background: var(--card); border: 1px solid color-mix(in srgb, var(--ink) 24%, transparent); border-radius: 10px; padding: 8px 28px 8px 10px; cursor: pointer; text-overflow: ellipsis; }
.kb-select select:hover { border-color: color-mix(in srgb, var(--ink) 45%, transparent); }
.kb-select select:focus-visible, .kb-opts button:focus-visible, .kb-knopf:focus-visible { outline: 2px solid var(--patina); outline-offset: 2px; }
.kb-select::after { content: ""; position: absolute; right: 10px; top: 50%; width: 10px; height: 10px; margin-top: -5px; pointer-events: none; background: var(--ink-soft);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.kb-fest { font: 600 13.5px/1.2 var(--font-body); padding: 9px 0 8px; }
.kb-info { margin: 0; font: 600 13.5px/1.4 var(--font-head); }
/* Karte (15.10.2026): Angaben der gewählten Pfanne nah an der Auswahl, mit Luft zum Knopf (.kb-wahl erbt 16 px Rand von der Kaufberatungs-Tabelle) */
.kb--klein .kb-info { margin: -12px 0 8px; }
.kk-hinweis.sf__hinweis-einmal { margin: 14px 0 0; }
@media (max-width: 760px) { .kk-hinweis.sf__hinweis-einmal { margin-top: 6px; } }
.kb-info a.kb-detail { font: 600 12.5px var(--font-body); color: var(--patina); text-decoration: none; white-space: nowrap; }
.kb-info a.kb-detail:hover { color: var(--ink); text-decoration: underline; }
.kb-knopf { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 14px; border-radius: var(--radius-pill); font: 600 13.5px/1.1 var(--font-body); text-decoration: none; color: var(--ink); background: var(--card); box-shadow: inset 0 0 0 1.5px var(--ink); text-align: center; }
.kb-knopf:hover { background: var(--ink); color: var(--card); }
.kb-knopf--suche::before { content: ""; width: 12px; height: 12px; flex: none; opacity: .8; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.6' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M10.4 10.4l3.3 3.3' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.6' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M10.4 10.4l3.3 3.3' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.kk-hinweis { margin: 8px 0 0; font-size: 11px; line-height: 1.35; color: var(--ink-soft); }
/* Serienseite: Kaufbox rechts im Kopf wie die Kaufspalte im Shop */
.se-kopf__rechts { display: grid; gap: 18px; align-content: start; min-width: 0; }
.kb--gross { background: var(--card); border-radius: 18px; padding: 20px 20px 16px; gap: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 28px -16px rgba(0, 0, 0, .22); }
.kb-titel { margin: 0; font: 600 17px/1.2 var(--font-head); }
.kb--gross .kb-wahl { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.kb--gross .kb-label { font-size: 12px; }
.kb-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.kb-opts button { min-width: 54px; padding: 9px 13px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); background: var(--card); color: var(--ink); font: 600 13.5px/1 var(--font-body); cursor: pointer; }
.kb-opts button:hover { border-color: var(--ink); }
.kb-opts button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: color-mix(in srgb, var(--ink) 7%, var(--card)); }
.kb--gross .kb-info { font: 500 13px/1.4 var(--font-body); color: var(--ink-soft); padding: 10px 12px; border-radius: 10px; background: var(--bg); }
.kb--gross.kb--pfanne .kb-info { font: 600 14.5px/1.4 var(--font-head); color: var(--ink); }
.kb--gross .kb-knopf { padding: 14px 18px; font-size: 15px; background: var(--ink); color: var(--card); box-shadow: none; }
.kb--gross .kb-knopf:hover { background: var(--ember); }
.kb-unten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.kb-unten .kb-vgl { padding: 9px 14px; font-size: 13.5px; }
.kb-mehr { font: 600 13.5px var(--font-body); color: var(--patina); text-decoration: none; }
.kb-mehr:hover { color: var(--ink); text-decoration: underline; }
.kb--gross .kk-hinweis { margin: 0; }
.se-kopf--flaeche .se-bild--links { margin: 22px 0 0; max-width: 420px; padding: 0; }
@media (max-width: 900px) { .se-bild--links { max-width: 360px; } }
.sf__opt--groesse { }

/* Pfannen-Quiz (12.10.2026): Kopf auf warmer Fläche, Fragekarte, Antworten als große Knöpfe, Ergebnis mit Label */
.qz-seite { padding-bottom: 24px; }
.qz-kopf { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px 40px; align-items: center; background: var(--ember-soft); border-radius: var(--radius-hero); padding: 34px 36px 36px; margin-top: 8px; }
.qz-kopf h1 { margin: 6px 0 12px; }
.qz-kopf .lede { margin: 0 0 16px; }
.qz-geteilt { margin: 0 0 12px; display: inline-block; padding: 8px 14px; border-radius: var(--radius-control); background: var(--card); font-size: 15px; }
.qz-fakten { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.qz-fakten li { padding: 5px 12px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--card) 75%, transparent); font-size: 13.5px; font-weight: 600; }
.qz-start { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.qz-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border: 0; border-radius: var(--radius-pill); background: var(--ember); color: #fff; font: 600 15.5px/1 var(--font-body); text-decoration: none; cursor: pointer; }
.qz-knopf:hover { background: var(--ink); color: var(--card); }
.qz-knopf--leise { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.qz-knopf--leise:hover { background: var(--ink); color: var(--card); }
.qz-knopf:focus-visible, .qz-antwort:focus-visible { outline: 2px solid var(--patina); outline-offset: 2px; }
.qz-bestes { margin: 0; font-size: 14px; color: var(--ink-soft); }
.qz-bestes b { color: var(--ink); }
.qz-bald { margin: 0; padding: 12px 16px; border-radius: var(--radius-control); background: var(--card); }
.qz-kopf__bild { display: flex; justify-content: center; }
.qz-zeichen { width: 100%; max-width: 260px; height: auto; }
.qz-zeichen__schatten { fill: color-mix(in srgb, var(--ink) 10%, transparent); }
.qz-zeichen__pfanne { fill: var(--ink); }
.qz-zeichen__griff { fill: color-mix(in srgb, var(--ink) 80%, var(--ember)); }
.qz-zeichen__rand { stroke: color-mix(in srgb, var(--card) 40%, var(--ink)); stroke-width: 3; stroke-linecap: round; }
.qz-zeichen__q { font: 700 76px/1 var(--font-head); fill: var(--ember); }
.qz-zeichen__punkt { fill: var(--ember); opacity: .45; }
/* Fragekarte */
.qz { max-width: 760px; margin: 28px auto 0; background: var(--card); border-radius: var(--radius-card); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 14px 34px -18px rgba(0, 0, 0, .25); padding: 26px 28px 28px; scroll-margin-top: 90px; }
.qz-oben { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.qz-stufe { padding: 3px 10px; border-radius: var(--radius-pill); background: var(--patina-soft); color: var(--patina); }
.qz-stufe--3 { background: var(--ember-soft); color: var(--ember); }
.qz-balken { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin-bottom: 20px; }
.qz-balken i { height: 6px; border-radius: 3px; background: var(--line); }
.qz-balken i.is-ok { background: var(--gut); }
.qz-balken i.is-falsch { background: var(--rot); }
.qz-balken i.is-jetzt { background: var(--ink); }
.qz-frage { margin: 0 0 18px; font: 600 clamp(20px, 2.4vw, 25px)/1.3 var(--font-head); }
.qz-antworten { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.qz-antwort { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font: 500 16px/1.35 var(--font-body); cursor: pointer; transition: border-color .12s, background .12s; }
.qz-antwort:hover:not(:disabled) { border-color: var(--ink); }
.qz-antwort__b { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); font: 700 13px/1 var(--font-head); }
.qz-antwort:disabled { cursor: default; }
.qz-antwort.is-richtig { border-color: var(--gut); background: var(--gut-soft); }
.qz-antwort.is-richtig .qz-antwort__b { background: var(--gut); color: #fff; }
.qz-antwort.is-falsch { border-color: var(--rot); background: var(--rot-soft); }
.qz-antwort.is-falsch .qz-antwort__b { background: var(--rot); color: #fff; }
.qz-antwort.is-blass { opacity: .55; }
.qz-erkl { margin-top: 18px; padding: 16px 18px; border-radius: 14px; background: var(--bg); }
.qz-erkl__urteil { margin: 0 0 6px; font: 700 16px/1.2 var(--font-head); }
.qz-erkl__urteil.is-ok { color: var(--gut); }
.qz-erkl__urteil.is-falsch { color: var(--rot); }
.qz-erkl p { margin: 0; }
.qz-erkl a { display: inline-block; margin-top: 8px; color: var(--patina); font-weight: 600; text-decoration: none; }
.qz-erkl a:hover { text-decoration: underline; }
.qz-weiter { margin-top: 18px; display: flex; justify-content: flex-end; }
/* Ergebnis */
.qz-ende { text-align: center; }
.qz-ende__zahl { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }
.qz-ende__label { margin: 8px 0 6px; font: 700 clamp(30px, 4.4vw, 44px)/1.1 var(--font-head); color: var(--ember); }
.qz-ende__satz { margin: 0 auto 18px; max-width: 46ch; }
.qz-ende__leiter { display: flex; justify-content: center; gap: 4px; margin: 0 0 22px; }
.qz-ende__leiter i { width: 34px; height: 8px; border-radius: 4px; background: var(--line); }
.qz-ende__leiter i.is-an { background: var(--ember); }
.qz-ende__knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.qz-ende__meldung { margin: 10px 0 0; font-size: 13.5px; color: var(--patina); min-height: 1.2em; }
.qz-nachlesen { margin: 26px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); text-align: left; }
.qz-nachlesen h3 { margin: 0 0 10px; font-size: 16px; }
.qz-nachlesen ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.qz-nachlesen li { display: grid; gap: 2px; }
.qz-nachlesen li span { font-size: 14px; color: var(--ink-soft); }
.qz-nachlesen a { color: var(--patina); font-weight: 600; text-decoration: none; font-size: 14px; }
.qz-werbung { margin: 22px 0 0; padding: 20px; border-radius: 14px; background: var(--ember-soft); text-align: left; display: grid; gap: 12px; }
.qz-werbung h3 { margin: 0; font-size: 19px; }
.qz-werbung p { margin: 0; }
.qz-werbung .qz-knopf { justify-self: start; }
/* Label-Leiter und App-Hinweis */
.qz-leiter { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.qz-leiter__stufe { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 16px; display: grid; gap: 4px; align-content: start; border-top: 4px solid color-mix(in srgb, var(--ember) 25%, var(--line)); }
.qz-leiter__stufe--2 { border-top-color: color-mix(in srgb, var(--ember) 45%, var(--line)); }
.qz-leiter__stufe--3 { border-top-color: color-mix(in srgb, var(--ember) 65%, var(--line)); }
.qz-leiter__stufe--4 { border-top-color: color-mix(in srgb, var(--ember) 85%, var(--line)); }
.qz-leiter__stufe--5 { border-top-color: var(--ember); }
.qz-leiter__punkte { font-size: 12px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; }
.qz-leiter__stufe b { font: 700 17px/1.2 var(--font-head); }
.qz-leiter__stufe span:last-child { font-size: 13.5px; color: var(--ink-soft); }
.qz-app__karte { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 24px 28px; }
.qz-app__karte > div { flex: 1 1 360px; }
.qz-app__karte h2 { margin: 0 0 6px; font-size: 21px; }
.qz-app__karte p { margin: 0; color: var(--ink-soft); }
@media (max-width: 900px) { .qz-leiter { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qz-leiter__stufe--5 { grid-column: 1 / -1; } }
@media (max-width: 720px) {
  .qz-kopf { grid-template-columns: minmax(0, 1fr); padding: 26px 18px 28px; border-radius: 22px; }
  .qz-kopf__bild { display: none; }
  .qz { padding: 20px 16px 22px; margin-top: 18px; }
  .qz-antwort { padding: 13px 12px; font-size: 15.5px; }
  .qz-knopf { width: 100%; }
  .qz-ende__knoepfe .qz-knopf { width: auto; flex: 1 1 140px; }
}

/* Hauptmenü mit zwei Ebenen (12.10.2026): Pfannen · Wissen & Hilfe · Rezepte. Die Menüs öffnen unter der ganzen Kopfleiste. */
.nv-neu { display: inline-block; vertical-align: 1px; margin-left: 4px; padding: 2px 6px; border-radius: var(--radius-pill); background: var(--ember); color: #fff; font: 700 9.5px/1.2 var(--font-body); letter-spacing: .04em; }
.nv-mehr { color: var(--patina) !important; font-weight: 600; }
.nv-karte { display: grid; gap: 8px; align-content: start; padding: 18px; border-radius: 16px; background: var(--ember-soft); }
.nv-karte b { font: 600 17px/1.25 var(--font-head); color: var(--ink); }
.nv-karte p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }
.nv-karte__knopf { justify-self: start; margin-top: 4px; padding: 9px 16px; border-radius: var(--radius-pill); background: var(--ember); color: #fff !important; font-weight: 600; font-size: 13.5px; text-decoration: none; }
.nv-karte__knopf:hover { background: var(--ink); }
.nv-karte--patina { background: var(--patina-soft); }
.nv-karte--patina .nv-karte__knopf { background: var(--ink); color: var(--card) !important; }
.nv-karte--patina .nv-karte__knopf:hover { background: var(--ember); color: #fff !important; }
.nv-mega .facet-label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.nv-zwei { columns: 2; column-gap: 22px; }
.nv-drei { columns: 3; column-gap: 22px; }
.nv-zwei li, .nv-drei li { break-inside: avoid; }
.nv-fuss { margin: 12px 0 0; font-size: 13.5px; }
.nv-nur-handy { display: none; }
nav.main .nv-mega a { white-space: normal; }
.nv-mega .facet, .nv-panel { min-width: 0; }
@media (min-width: 861px) {
  nav.main .nv-wrap { position: static; }
  nav.main .nv-wrap::after { display: none; }
  .nv-trigger { padding: 8px 13px; border-radius: var(--radius-pill); }
  .nv-wrap:hover > .nv-trigger, .nv-wrap:focus-within > .nv-trigger { background: var(--bg); color: var(--ink); }
  .nv-pfeil { font-size: 10px; }
  .material-menu.nv-mega { left: 0; right: 0; width: auto; max-width: none; margin-top: 10px; padding: 0; border-radius: 22px; overflow: visible; }
  .nv-mega::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
  .nv-wrap:focus-within .nv-mega, .nv-wrap.is-hover .nv-mega { display: grid; }
  .nv-wrap.is-hover > .nv-trigger { background: var(--bg); color: var(--ink); }
  .nv-mega--zwei { grid-template-columns: 240px minmax(0, 1fr) 250px; }
  .nv-tabs { background: var(--bg); border-radius: 22px 0 0 22px; padding: 14px 10px; display: grid; gap: 2px; align-content: start; }
  .nv-tab { display: grid; gap: 1px; padding: 10px 14px; border-radius: 12px; color: var(--ink); text-decoration: none; }
  .nv-tab b { font: 600 15px/1.25 var(--font-head); }
  .nv-tab span { font-size: 12.5px; color: var(--ink-soft); }
  .nv-tab:hover { background: color-mix(in srgb, var(--card) 60%, transparent); }
  .nv-tab.is-an { background: var(--card); box-shadow: var(--shadow-sm); }
  .nv-panels { padding: 22px 24px; min-width: 0; }
  .nv-panel { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .nv-panel.is-an { display: grid; }
  .nv-panel__kopf { display: none; }
  .nv-sp--breit { grid-column: span 2; }
  .nv-mega--zwei .nv-karte { margin: 18px 18px 18px 0; }
  .material-menu.nv-mega--spalten { grid-template-columns: repeat(3, minmax(0, 1fr)) 260px; padding: 24px 26px; gap: 22px; }
  .nv-mega .material-menu li, .nv-mega li { padding: 4px 0; }
  .nv-mega li a { color: var(--ink); font-size: 14px; }
  .nv-mega li a:hover { color: var(--ember); }
}
@media (max-width: 860px) {
  .nv-pfeil { display: none; }
  nav.main > .nv-wrap > a.has-dropdown::after { content: '+'; float: right; font-weight: 600; }
  nav.main > .nv-wrap.is-open > a.has-dropdown::after { content: '–'; }
  .nv-tabs, .nv-karte { display: none !important; }
  .nv-panel { display: block; border-bottom: 1px solid var(--line); }
  .nv-panel:last-child { border-bottom: 0; }
  .nv-panel__kopf { display: block; padding: 10px 0; font: 600 15px var(--font-head); color: var(--ink); }
  .nv-panel__kopf::after { content: '+'; float: right; }
  .nv-panel.is-auf .nv-panel__kopf::after { content: '–'; }
  .nv-panel > .facet { display: none; padding-bottom: 10px; }
  .nv-panel.is-auf > .facet { display: block; }
  .nv-zwei, .nv-drei { columns: 2; }
  .nv-mega .facet-label { margin: 6px 0 4px; }
  nav.main > a.nv-nur-handy { display: block; }
}

/* Quiz-Teaser Startseite (12.10.2026): dunkle Fläche, rechts eine echte Frage */
.qt__box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px 44px; align-items: center; background: var(--flaeche-dunkel); color: #F3F4F1; border-radius: var(--radius-hero); padding: 40px 44px; }
html[data-thema="dunkel"] .qt__box { background: color-mix(in srgb, var(--card) 70%, #000); box-shadow: inset 0 0 0 1px var(--line); }
.qt__eyebrow { font: 600 12px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: #F1B596; }
.qt__text h2 { margin: 8px 0 10px; font: 700 clamp(27px, 3vw, 36px)/1.12 var(--font-head); color: #F3F4F1; }
.qt__text p { margin: 0 0 18px; color: rgba(243, 244, 241, .75); font-size: 16px; line-height: 1.55; }
.qt__labels { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.qt__labels span { font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: var(--radius-pill); background: rgba(243, 244, 241, .12); }
.qt__labels span:last-child { background: var(--ember); color: #fff; }
.qt__los { display: inline-flex; background: var(--ember); color: #fff; border-radius: var(--radius-pill); padding: 13px 24px; font-weight: 600; text-decoration: none; }
.qt__los:hover { background: #F3F4F1; color: #1D2321; }
.qt__frage { background: var(--card); color: var(--ink); border-radius: 20px; padding: 22px 22px 18px; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .5); }
.qt__oben { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 10px; }
.qt__frage h3 { margin: 0 0 12px; font: 600 19px/1.3 var(--font-head); }
.qt__antworten { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.qt__a { display: flex; gap: 10px; align-items: center; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 12px; font-size: 15px; color: var(--ink); text-decoration: none; transition: border-color .12s; }
.qt__a:hover, .qt__a:focus-visible { border-color: var(--ink); }
.qt__a i { width: 24px; height: 24px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font: 700 12px var(--font-head); font-style: normal; flex: none; }
@media (max-width: 760px) {
  .qt__box { grid-template-columns: minmax(0, 1fr); padding: 28px 20px; border-radius: 22px; }
  .qt__tipp { display: none; }
}
.mk-tb-zeile__text strong .nv-neu { color: #fff; font: 700 9.5px/1.2 var(--font-body); display: inline-block; margin-left: 6px; vertical-align: 3px; }
.qz-schon { margin: 0 0 16px; padding: 12px 16px; border-radius: var(--radius-control); background: var(--card); font-size: 15px; line-height: 1.5; }
.qz-schon[hidden], .qz-app[hidden] { display: none; }

/* Abstände und Überschriften (12.10.2026, Rückmeldung aus der App):
   Überschriften erbten die Zeilenhöhe des Fließtexts (1.6), zweizeilige Titel liefen weit auseinander. */
h1 { line-height: 1.15; }
h2 { line-height: 1.25; }
h3 { line-height: 1.3; }
@media (max-width: 600px) { .lede { font-size: 17px; line-height: 1.5; } }
/* In der App: unter der Kopfleiste immer derselbe Abstand bis zum ersten Kasten oder Bild */
html.ist-app main { padding-top: 14px; }
html.ist-app main > .wrap:first-child > :first-child { margin-top: 0 !important; }
html.ist-app main > .wrap:first-child > section:first-child { padding-top: 0; }
/* Quiz: Überschrift und Text der Abschnitte enger beisammen */
.qz-labels > .section-head { margin-bottom: 0; }
.qz-labels > .brand-intro { margin-bottom: 4px; }
html.ist-app main > .wrap.mk:first-child { padding-top: 0; }
html.ist-app main > .wrap:first-child > section:first-child { padding-top: 0 !important; }
html.ist-app main > .mk-wrap:first-child > .mk { padding-top: 0; }
html.ist-app main > .mk-wrap:first-child > .mk > .mk-titelbild:first-child { margin-top: 0; }

/* Zubehör-Seiten (13.10.2026): Kopf auf warmer Fläche, je Typ eine Karte mit „Passt zu“ und Produkten */
.zb-kopf { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px 40px; align-items: center; background: var(--ember-soft); border-radius: var(--radius-hero); padding: 34px 36px; margin-top: 8px; }
.zb-kopf h1 { margin: 6px 0 12px; }
.zb-kopf .lede { margin: 0 0 16px; }
.zb-achten__titel { margin: 0 0 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.zb-achten { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.zb-achten li { padding: 6px 12px; border-radius: 12px; background: var(--card); font-size: 13.5px; font-weight: 600; }
.zb-kopf__bild { display: grid; place-items: center; }
.zb-kopf__bild .zb-symbol { width: min(180px, 70%); height: auto; color: var(--ember); stroke-width: 1.2; }
.zb-sprung { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
.zb-sprung a { padding: 8px 14px; border-radius: var(--radius-pill); background: var(--card); box-shadow: var(--shadow-sm); font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none; }
.zb-sprung a:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.zb-typen { gap: 0; }
.zb-typen > .section-head { margin-bottom: 4px; }
.zt { background: var(--card); border-radius: 22px; box-shadow: var(--shadow-sm); padding: 24px; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; margin: 0 0 16px; scroll-margin-top: 110px; }
.zt__bild { background: var(--bg); border-radius: 16px; display: grid; place-items: center; padding: 16px; align-self: start; aspect-ratio: 1; }
.zt__bild img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.zt__bild .zb-symbol { width: 70%; height: auto; color: var(--patina); stroke-width: 1.3; }
.zt h3 { margin: 0 0 6px; font-size: 22px; }
.zt__text { margin: 0 0 12px; color: var(--ink-soft); line-height: 1.55; }
.zt__passt { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.zt-chip { display: inline-flex; gap: 4px; align-items: center; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 600; }
.zt-chip--ja { background: var(--gut-soft); color: var(--gut); }
.zt-chip--bedingt { background: var(--mittel-soft); color: var(--mittel); }
.zt-chip--nein { background: var(--rot-soft); color: var(--rot); }
.zt__hinweis { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-soft); }
.zt__app { margin: 0 0 14px; padding: 9px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.zt__app[hidden] { display: none; }
.zt__app--ja { background: var(--gut-soft); color: var(--gut); }
.zt__app--bedingt { background: var(--mittel-soft); color: var(--mittel); }
.zt__app--nein { background: var(--rot-soft); color: var(--rot); }
.zt__produkte { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 6px; }
.zp { border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.zp__marke { font: 600 11.5px var(--font-body); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.zp__name { font: 600 15.5px/1.3 var(--font-head); }
.zp__angaben { margin: 2px 0 6px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; font-size: 13px; }
.zp__angaben dt { color: var(--ink-soft); }
.zp__angaben dd { margin: 0; font-weight: 500; }
.zp__angaben .zp__zeile { grid-column: 1 / -1; }
.zp__knopf { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 12px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1.5px var(--ink); font-weight: 600; font-size: 13.5px; color: var(--ink); text-decoration: none; }
.zp__knopf:hover { background: var(--ink); color: var(--card); }
.zb-mehr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.zb-mehr a { display: flex; gap: 10px; align-items: center; background: var(--card); border-radius: 14px; padding: 14px; box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; font-weight: 600; }
.zb-mehr__ico { width: 26px; height: 26px; flex: none; color: var(--patina); }
@media (max-width: 760px) {
  .zb-kopf { grid-template-columns: minmax(0, 1fr); padding: 24px 18px 26px; border-radius: 22px; }
  .zb-kopf__bild { display: none; }
  .zt { grid-template-columns: minmax(0, 1fr); padding: 18px; gap: 14px; }
  .zt__bild { aspect-ratio: auto; height: 110px; }
  .zt__bild .zb-symbol { width: auto; height: 80px; }
  .zt__produkte { grid-template-columns: minmax(0, 1fr); }
  .zb-mehr { grid-template-columns: 1fr 1fr; }
}

/* Pfanne verkaufen in Meine Küche (13.10.2026) */
.mk-verkaufen p { margin: 8px 0 12px; line-height: 1.5; }
.mk-verkaufen__liste { margin: 12px 0 14px; padding-left: 18px; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.45; }
.mk-verkaufen__knopf { display: flex; justify-content: center; text-decoration: none; }
.kb-gebraucht { justify-self: start; font: 600 13.5px var(--font-body); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.kb-gebraucht:hover { color: var(--ember); }

/* eBay gebraucht (14.10.2026): Produktseite und Hubs unbeschichteter Materialien */
.pf-gebraucht { display: inline-block; margin-top: 12px; }
.hub-gebraucht { display: grid; grid-template-columns: 1fr auto; gap: 6px 24px; align-items: center; margin: 32px 0; padding: 18px 22px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--patina); border-radius: 12px; }
.hub-gebraucht h2 { margin: 0 0 4px; font-size: 20px; }
.hub-gebraucht p { margin: 0; }
.hub-gebraucht__link { justify-self: end; padding: 10px 16px; border: 1.5px solid var(--ink); border-radius: 999px; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; }
.hub-gebraucht__link:hover { border-color: var(--ember); color: var(--ember); }
.hub-gebraucht__hinweis { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted, #5c6360); }
@media (max-width: 640px) {
  .hub-gebraucht { grid-template-columns: 1fr; padding: 16px; }
  .hub-gebraucht__link { justify-self: start; }
}

/* Content-Paket 6 (13.10.2026): Kästen im Fließtext (ContentBlocks „kasten“), Kurzantwort im Text, Pflege mit Text */
.pf-text { max-width: 70ch; }
.cb-kurz { background: var(--patina-soft); border-left: 4px solid var(--patina); border-radius: 0 12px 12px 0; padding: 14px 18px; }
.cb-kurz strong:first-child { display: block; font-family: var(--font-head); margin-bottom: 2px; }
.cb-kasten { max-width: 70ch; margin: 18px 0 22px; padding: 18px 20px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); }
.cb-kasten__titel { margin: 0 0 12px; font: 600 12.5px/1.3 var(--font-body); letter-spacing: .07em; text-transform: uppercase; color: var(--patina); }
.cb-kasten ul, .cb-kasten ol { list-style: none; margin: 0; padding: 0; }
.cb-kasten li { position: relative; padding: 0 0 0 34px; margin: 0 0 12px; line-height: 1.55; }
.cb-kasten li:last-child { margin-bottom: 0; }
/* Kreis (::before) und Zeichen (::after, Maske in der Textfarbe des Stils) */
.cb-kasten li::before { content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--patina-soft); }
.cb-kasten li::after { content: ""; position: absolute; left: 4px; top: 5px; width: 14px; height: 14px; background: var(--patina); -webkit-mask: var(--cb-zeichen) center / contain no-repeat; mask: var(--cb-zeichen) center / contain no-repeat; }
.cb-kasten--pruefen li::before { background: var(--gut-soft); }
.cb-kasten--pruefen li::after { background: var(--gut); --cb-zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.cb-kasten--lassen li::before { background: var(--rot-soft); }
.cb-kasten--lassen li::after { background: var(--rot); --cb-zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"); }
.cb-kasten--fotos li::after { --cb-zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E"); }
.cb-kasten--material li::before { width: 8px; height: 8px; top: 9px; left: 7px; background: var(--patina); }
.cb-kasten--material li::after, .cb-kasten--schritte li::after { content: none; }
.cb-kasten--schritte ol { counter-reset: cbs; }
.cb-kasten--schritte li { counter-increment: cbs; padding-left: 40px; margin-bottom: 14px; }
.cb-kasten--schritte li::before { content: counter(cbs); width: 26px; height: 26px; top: -1px; background: var(--patina); color: var(--card); font: 700 13px/26px var(--font-head); text-align: center; }
.cb-kasten--vorlage { background: var(--patina-soft); border-style: dashed; border-color: color-mix(in srgb, var(--patina) 45%, transparent); box-shadow: none; }
.cb-kasten__vorlage p { margin: 0; font-size: 15px; line-height: 1.6; }
.cb-kopieren { margin-top: 12px; padding: 7px 14px; border: 1.5px solid var(--patina); border-radius: var(--radius-pill); background: var(--card); color: var(--patina); font: 600 13.5px var(--font-body); cursor: pointer; }
.cb-kopieren.is-ok { background: var(--gut-soft); border-color: var(--gut); color: var(--gut); }
.cb-werbung { max-width: 70ch; margin-top: 18px; }
@media (max-width: 600px) {
  .cb-kasten { padding: 16px 16px 14px; border-radius: 14px; }
}
.pf-gebraucht__tipp { margin-left: 10px; font-size: 13.5px; color: var(--ink-soft); }
.hub-gebraucht p a { color: var(--patina); font-weight: 600; }
/* Hub-Kopf (13.10.2026): Bild rechts oben bündig, weil Sprungmarken und Klärungssatz den Text länger machen */
.hub-kopf.seitenkopf--bild { align-items: start; }
.hub-kopf .seitenkopf__bild { margin-top: 10px; }
@media (max-width: 820px) { .hub-kopf .seitenkopf__bild { margin-top: 0; } }
/* Sprungmarken im Hub-Kopf als Chips (13.10.2026) */
.hub-sprung { gap: 12px 14px; }
.hub-sprung ul { gap: 8px; font-size: 13.5px; }
.hub-sprung ul a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--card); color: var(--ink); font-weight: 500; line-height: 1.2; white-space: nowrap; box-shadow: var(--shadow-sm); transition: border-color .15s, color .15s, background .15s; }
.hub-sprung ul a::after { content: "↓"; font-size: 12px; color: var(--patina); opacity: .7; }
.hub-sprung ul a:hover { text-decoration: none; border-color: var(--patina); background: var(--patina-soft); color: var(--ink); }
.hub-sprung ul a:focus-visible { outline: 2px solid var(--patina); outline-offset: 2px; }
@media (max-width: 820px) {
  /* Am Handy eine wischbare Reihe statt drei Zeilen */
  .hub-kopf .seitenkopf__text { min-width: 0; max-width: 100%; }
  .hub-sprung ul { flex: 1 1 100%; min-width: 0; flex-wrap: nowrap; overflow-x: auto; width: 100%; padding: 2px 24px 6px 1px; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
  .hub-sprung ul::-webkit-scrollbar { display: none; }
}
/* Pfannen-Quiz als Hauptpunkt (13.10.2026): alle vier Punkte gleich breit eingefasst, damit die Abstände gleich wirken */
@media (min-width: 861px) {
  nav.main { gap: 4px; }
  nav.main > a[href="/rezepte"], nav.main > a.nv-quiz { padding: 8px 13px; border-radius: var(--radius-pill); }
  nav.main > a[href="/rezepte"]:hover, nav.main > a.nv-quiz:hover { background: var(--bg); color: var(--ink); }
}
@media (min-width: 861px) and (max-width: 1040px) {
  nav.main { gap: 0; }
  nav.main .nv-trigger, nav.main > a[href="/rezepte"], nav.main > a.nv-quiz { padding: 8px 9px; }
  nav.main > a.nv-quiz .nv-neu { display: none; }
}
/* Vergleichstabellen der Kaufberatung (13.10.2026): Serien-Knopf wie auf den Empfehlungskarten, Amazon darunter */
.kb-vgl__cta td { vertical-align: top; }
.kb-vgl__serien { display: flex; width: fit-content; align-items: center; justify-content: center; margin: 0 0 8px; padding: 9px 14px; border-radius: var(--radius-pill); background: var(--ink); color: var(--card); font: 600 12.5px/1.2 var(--font-body); text-decoration: none; text-align: center; }
.kb-vgl__serien:hover { background: var(--patina); color: #fff; }
.kb-vgl__cta .compare-cta { display: inline-block; padding: 8px 14px; }

/* ===== Nutzungs-Hub (15.10.2026, Entwurf): Hitze-Skala als Prinzip, Themen als ruhige Listen, „Teil von“ ===== */
.nh-bereich { padding: 26px 0 8px; }
.nh-prinzip__titel, .nh-cluster__titel { font: 600 22px/1.25 var(--font-head); margin: 0 0 18px; }
/* Skala: Striche steigen wie die Markierung am Herdregler; darunter zwei Bereiche, die sich in der Mitte überlappen */
.nh-skala, .nh-baender { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 6px; }
.nh-skala { align-items: end; height: 30px; }
.nh-skala__strich { display: block; height: var(--h); border-radius: 3px; background: color-mix(in srgb, var(--ink) 22%, transparent); }
.nh-skala__enden { display: flex; justify-content: space-between; margin-top: 7px; font-size: 13px; color: var(--ink-soft); }
.nh-baender { margin-top: 12px; row-gap: 8px; }
.nh-band { grid-row: auto; display: block; padding: 9px 14px; border-radius: var(--radius-control); font-size: 14px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nh-band strong { font: 700 16px/1.2 var(--font-head); }
.nh-band--sanft { background: var(--patina-soft); color: var(--patina); }
.nh-band--kraeftig { background: var(--ink); color: var(--card); }
.nh-prinzip__wege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin-top: 22px; }
.nh-weg__fett { display: block; font: 700 22px/1.2 var(--font-head); color: var(--ink); }
.nh-weg__fett span { font-weight: 500; color: var(--ink-soft); }
.nh-weg--sanft .nh-weg__fett { color: var(--patina); }
.nh-weg__text { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-soft); max-width: 52ch; }
.nh-weg__hinweis { display: inline-block; margin-top: 8px; font-size: 13.5px; color: var(--patina); text-decoration: underline; text-underline-offset: 3px; }
/* Themen: vier Spalten mit Linie oben, Einträge ohne eigene Karte */
.nh-cluster { margin-top: 44px; }
.nh-cluster__gruppen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.nh-gruppe { border-top: 2px solid var(--ink); padding-top: 12px; }
.nh-gruppe__name { font: 600 15px/1.3 var(--font-head); margin: 0 0 6px; }
.nh-gruppe__liste { list-style: none; margin: 0; padding: 0; }
.nh-gruppe__liste li + li { border-top: 1px solid var(--line); }
.nh-eintrag { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 0; color: var(--ink); text-decoration: none; }
.nh-eintrag__titel { font: 600 14.5px/1.35 var(--font-head); }
.nh-eintrag:hover .nh-eintrag__titel, .nh-eintrag:focus-visible .nh-eintrag__titel { text-decoration: underline; text-underline-offset: 3px; }
.nh-eintrag__weg { align-self: start; font-size: 12px; line-height: 1; padding: 4px 7px; border-radius: var(--radius-pill); white-space: nowrap; }
.nh-eintrag__weg--butter { background: var(--patina-soft); color: var(--patina); }
.nh-eintrag__weg--oel { background: var(--ink); color: var(--card); }
.nh-eintrag__weg--beides { border: 1px solid var(--line); color: var(--ink-soft); }
.nh-eintrag__text { grid-column: 1 / -1; font-size: 13px; line-height: 1.45; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nh-kauf { margin: 26px 0 0; font-size: 14.5px; color: var(--ink-soft); }
.nh-ratgeber-titel { font: 600 22px/1.25 var(--font-head); margin: 0 0 14px; }
.nh-teilvon { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0 0 16px; padding: 8px 14px; border-radius: var(--radius-control); background: var(--patina-soft); color: var(--ink); text-decoration: none; font-size: 13.5px; }
.nh-teilvon span { color: var(--ink-soft); }
.nh-teilvon strong { font-weight: 600; }
.nh-teilvon em { font-style: normal; color: var(--patina); }
.nh-teilvon:hover em { text-decoration: underline; }
.nh-teaser-bereich { padding-top: 28px; }
.nh-prinzip--teaser { background: var(--card); box-shadow: var(--shadow-sm); border-radius: var(--radius-hero); padding: 26px 28px 28px; }
.nh-prinzip__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 22px; }
.nh-prinzip__mehr { font-size: 13.5px; color: var(--ink-soft); }
@media (max-width: 1040px) { .nh-cluster__gruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .nh-skala, .nh-baender { gap: 3px; }
  .nh-skala { height: 24px; }
  .nh-baender { row-gap: 6px; }
  .nh-band { padding: 8px 10px; font-size: 13px; }
  .nh-band strong { font-size: 14px; }
  .nh-prinzip__wege { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .nh-weg--kraeftig { border-top: 1px solid var(--line); padding-top: 16px; }
  .nh-cluster__gruppen { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .nh-eintrag__text { display: none; }
  .nh-prinzip--teaser { padding: 20px 16px 22px; border-radius: 22px; }
}
.nh-prinzip--teaser .btn-secondary, .nh-prinzip--hub .btn-secondary { border: 1.5px solid var(--ink); background: transparent; box-shadow: none; }
.nh-prinzip--hub .btn-secondary { margin-left: 0; }
.nh-prinzip--teaser .btn-secondary { margin-left: 0; }

/* ===== Vorlesen (15.10.2026, Entwurf): Leiste unter der Zeile mit Autor und Lesezeit ===== */
.vl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 2px 0 20px; }
.vl[hidden] { display: none; }
.vl__start { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--card); color: var(--ink); font: 500 13px/1 var(--font-body); cursor: pointer; }
.vl__start:hover { border-color: var(--ink-soft); }
.vl__start:focus-visible, .vl__stopp:focus-visible, .vl__tempo select:focus-visible { outline: 2px solid var(--patina); outline-offset: 2px; }
.vl__icon { width: 13px; height: 13px; fill: currentColor; }
.vl__icon--pause, .vl--spricht .vl__icon--play { display: none; }
.vl--spricht .vl__icon--pause { display: block; }
.vl--spricht .vl__start { background: var(--ink); border-color: var(--ink); color: var(--card); }
.vl__dauer { font-size: 12.5px; color: var(--ink-soft); }
.vl__steuer { display: inline-flex; align-items: center; gap: 12px; }
.vl__steuer[hidden] { display: none; }
.vl__stopp { border: 0; background: none; padding: 4px 2px; color: var(--ink-soft); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.vl__tempo { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); }
.vl__tempo select { font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-control); padding: 2px 4px; }
.vl-aktiv { background: var(--patina-soft); box-shadow: 0 0 0 6px var(--patina-soft); border-radius: 4px; transition: background .2s ease; }
@media (prefers-reduced-motion: reduce) { .vl-aktiv { transition: none; } }