/*
Theme Name: automatenspiele.org
Theme URI: https://www.automatenspiele.org/
Author: iGaming
Description: „Labor" — Dashboard / Vergleichs-Matrix. Prüfstand + Spielhalle: gleicher Automat, andere Quote. Wir zeigen, wo.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
License: proprietary
Text Domain: automatenspiele
*/

/* ==========================================================================
   0 · Fonts (self-hosted, Fontsource — DSGVO: keine Google Fonts)
   Manrope (Headlines/UI) · Public Sans (Body) · IBM Plex Mono (ausschließlich Zahlenwerte)
   ========================================================================== */

/* Self-hosted Fontsource webfonts — latin subset only, woff2 */
/* Source: @fontsource/manrope, @fontsource/public-sans, @fontsource/ibm-plex-mono (v5.3.0) */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/manrope-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/manrope-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/manrope-latin-800-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/public-sans-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Public Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/public-sans-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/public-sans-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/public-sans-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ==========================================================================
   1 · Tokens
   ========================================================================== */

:root {
  /* Grund + Flächen: Off-White, Karten Weiß, 1-px-Linien */
  --bg:        #F4F3EE;
  --card:      #FFFFFF;
  --card-2:    #FAF9F6;
  --line:      #D9D7CF;
  --line-soft: #E9E7E0;

  /* Schrift: Marineblau */
  --ink:       #1C2B4A;
  --ink-mid:   #4B5872;
  --ink-dim:   #6F7A8F;

  /* Signal — EINE Farbe, nur für beste Quote und CTA */
  --signal:      #C8531C;
  --signal-deep: #A3420F;
  --signal-soft: rgba(200, 83, 28, .10);
  --signal-line: rgba(200, 83, 28, .35);

  /* Typo */
  --f-head: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'Public Sans', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Maß */
  --shell:  1240px;
  --prose:  68ch;
  --gap:    clamp(1rem, 2.5vw, 1.75rem);
  --pad-x:  clamp(1rem, 5vw, 2.5rem);
  --r:      4px;
  --r-lg:   6px;
  --shadow: 0 1px 2px rgba(28, 43, 74, .06), 0 1px 4px rgba(28, 43, 74, .05);
  --ease:   cubic-bezier(.2, .7, .3, 1);

  /* Akkordeon: Parameter */
  --acc-dauer: .42s;
  --acc-ease:  var(--ease);
  --acc-akzent: var(--ink);
}

/* ==========================================================================
   2 · Reset + Basis
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--ink); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; text-decoration-color: var(--signal-line); }
a:hover { text-decoration-color: var(--signal); color: var(--signal-deep); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
::selection { background: var(--ink); color: #fff; }

h1, h2, h3, h4 {
  font-family: var(--f-head);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); letter-spacing: -0.025em; line-height: 1.06; }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-top: 2.2em; }
h3 { font-size: clamp(1.1rem, 2.1vw, 1.3rem); font-weight: 700; }
h4 { font-size: 1.02rem; font-weight: 700; }
.as-prose h2:first-child { margin-top: 0; }

p, ul, ol, table, figure, blockquote, dl { margin-block: 0 1.1em; }
ul, ol { padding-left: 1.3rem; }
li + li { margin-top: .3em; }
strong { font-weight: 700; }
small { font-size: .85em; }
code, kbd, samp { font-family: var(--f-mono); font-size: .9em; background: var(--card-2); padding: .1em .35em; border-radius: 2px; border: 1px solid var(--line-soft); }
hr { border: 0; border-top: 1px solid var(--line); margin-block: 2rem; }
blockquote { border-left: 3px solid var(--line); padding: .2rem 0 .2rem 1.1rem; color: var(--ink-mid); }

/* Zahlen: IBM Plex Mono, tabular — die eine Regel, die den Zahlenwert markiert */
.as-num {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
}
.as-num--signal { color: var(--signal-deep); }
.as-num--gross { font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1; }
.as-leer { color: var(--ink-dim); font-style: italic; }
.as-dim { color: var(--ink-dim); }

.as-shell { width: min(100% - 2 * var(--pad-x), var(--shell)); margin-inline: auto; }
.as-prose > * { max-width: var(--prose); }
.as-prose > .as-full, .as-prose > table, .as-prose > .as-tablewrap, .as-prose > .as-matrix,
.as-prose > .as-cards, .as-prose > .as-grid, .as-prose > .as-scores, .as-prose > .as-acc,
.as-prose > .as-box, .as-prose > .as-db, .as-prose > .as-qz, .as-prose > .as-board,
.as-prose > .as-hero, .as-prose > .as-sec, .as-prose > .as-befund, .as-prose > .as-suche { max-width: none; }

.as-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: .7rem 1.1rem; font-weight: 700;
}
.as-skip:focus { left: .5rem; top: .5rem; }

.as-sr, .as-screenreader {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

/* Etiketten: kleine Mono-Versalien — das Label über jedem Wert */
.as-kicker, .as-score-k, .as-db dt, .as-gk-daten dt, .as-board-paar dt, .as-foot h2,
.as-card-kicker, .as-crumb, .as-meta, .as-quelle, .as-tablewrap thead th, .as-matrix thead th,
.as-mx-detail dt, .as-adv > summary, .as-box h3, .as-toc h2, .as-zeile {
  font-family: var(--f-mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ==========================================================================
   3 · Kopf + Fuß
   ========================================================================== */

.as-head {
  position: sticky; top: 0; z-index: 40;
  background: var(--card);   /* deckend: unter dem halbtransparenten Kopf schimmerten Matrix-Zeilen durch (Befund 2026-09-24) */
  border-bottom: 1px solid var(--line);
}
.as-head-in { display: flex; align-items: center; gap: var(--gap); min-height: 62px; padding-block: .5rem; }
.as-logo {
  display: inline-flex; align-items: center; gap: .6rem; margin-right: auto;
  text-decoration: none; color: var(--ink);
  font-family: var(--f-head); font-weight: 800; font-size: 1.08rem; letter-spacing: -0.02em;
}
.as-logo:hover { color: var(--ink); }
.as-logo b { color: var(--signal); font-weight: 800; }
/* Marke: drei Messbalken verschiedener Höhe, der höchste in Signalfarbe — die Spanne als Zeichen */
.as-logo-mark { display: flex; align-items: flex-end; gap: 3px; width: 24px; height: 22px; flex: none; }
.as-logo-mark i { display: block; width: 6px; background: var(--ink); border-radius: 1px; }
.as-logo-mark i:nth-child(1) { height: 55%; }
.as-logo-mark i:nth-child(2) { height: 80%; }
.as-logo-mark i:nth-child(3) { height: 100%; background: var(--signal); }

.as-nav ul { display: flex; align-items: center; gap: 1.3rem; list-style: none; margin: 0; padding: 0; }
.as-nav li, .as-foot li, .as-toc li { margin-top: 0; }   /* Befund 2026-09-24: globales li + li verschob den ersten Menüpunkt */
.as-nav a {
  font-family: var(--f-head); font-weight: 700; font-size: .84rem; letter-spacing: .01em;
  text-decoration: none; color: var(--ink-mid); padding-block: .35rem; display: inline-block;
  border-bottom: 2px solid transparent;
}
.as-nav a:hover, .as-nav .current-menu-item > a, .as-nav .current-menu-ancestor > a { color: var(--ink); border-bottom-color: var(--signal); }

.as-burger {
  display: none; background: var(--card); border: 1px solid var(--line); color: var(--ink);
  width: 42px; height: 38px; cursor: pointer; padding: 0; border-radius: var(--r);
}
.as-burger span { display: block; width: 18px; height: 2px; background: currentColor; margin: 4px auto; }

@media (max-width: 900px) {
  .as-burger { display: block; }
  .as-nav {
    position: absolute; inset: 100% 0 auto 0; background: var(--card);
    border-bottom: 1px solid var(--line); display: none; padding: .4rem var(--pad-x) 1rem;
    box-shadow: var(--shadow);
  }
  .as-nav.open { display: block; }
  .as-nav ul { flex-direction: column; gap: 0; }
  .as-nav li { border-bottom: 1px solid var(--line-soft); }
  .as-nav a { display: block; padding: .8rem 0; border-bottom: 0; }
}

/* Pflicht-Werbehinweis als schmale Leiste; Text bleibt im HTML */
.as-adv { border-bottom: 1px solid var(--line); background: var(--card-2); }
.as-adv > summary {
  width: min(100% - 2 * var(--pad-x), var(--shell)); margin-inline: auto;
  padding: .5rem 0; cursor: pointer; list-style: none; display: flex; align-items: center; gap: .5rem;
}
.as-adv > summary::-webkit-details-marker { display: none; }
.as-adv > summary::before { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .2s var(--ease); }
.as-adv[open] > summary::before { transform: rotate(45deg); }
.as-adv > summary:hover, .as-adv > summary:focus-visible { color: var(--ink); }
.as-adv-text { padding-bottom: 1rem; }
.as-adv-text p { font-size: .82rem; line-height: 1.6; color: var(--ink-mid); margin-bottom: 0; }

.as-foot {
  border-top: 1px solid var(--line); background: var(--card);
  margin-top: clamp(3rem, 8vw, 6rem); padding-block: clamp(2.5rem, 6vw, 4rem) 2rem;
  font-size: .94rem; color: var(--ink-mid);
}
.as-foot-cols { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.as-foot h2 { margin: 0 0 .7rem; }
.as-foot ul { list-style: none; padding: 0; }
.as-foot a { color: var(--ink-mid); text-decoration: none; }
.as-foot a:hover { color: var(--signal-deep); text-decoration: underline; }
.as-foot-aff { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.as-foot-aff h2 { margin-bottom: .5rem; }
.as-foot-aff p { font-size: .82rem; line-height: 1.6; max-width: 90ch; margin-bottom: .5rem; }
.as-foot-bar {
  margin-top: 1.8rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: .8rem 2rem; align-items: flex-start; justify-content: space-between;
  font-size: .84rem;
}
.as-foot-bar p { margin: 0; }
.as-foot-rg { font-weight: 600; color: var(--ink); max-width: 60ch; }
.as-foot-rg a { color: var(--ink); text-decoration: underline; }

/* ==========================================================================
   4 · Seitenkopf, Zeilen, Meta, Buttons
   ========================================================================== */

.as-main { padding-block: clamp(1.6rem, 4vw, 3rem) clamp(2rem, 5vw, 3.4rem); }
.as-layout { display: grid; gap: clamp(1.8rem, 4vw, 3rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1040px) { .as-layout--aside { grid-template-columns: minmax(0, 1fr) 260px; } }

.as-crumb { margin-bottom: 1rem; text-transform: none; letter-spacing: 0; font-size: .78rem; }
.as-crumb a { color: var(--ink-dim); text-decoration: none; }
.as-crumb a:hover { color: var(--signal-deep); }
.as-crumb [aria-current] { color: var(--ink-mid); }

.as-titel { margin-bottom: .6rem; }
.as-titel--bild {
  display: grid; grid-template-columns: minmax(96px, 128px) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 1.6rem); align-items: center;
}
.as-geraetefig {
  margin: 0; border: 1px solid var(--line); background: var(--card); border-radius: var(--r-lg);
  padding: .6rem; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow);
}
.as-geraetebild { width: 100%; height: auto; }

.as-zeile { margin: .35rem 0 0; text-transform: none; letter-spacing: 0; font-size: .8rem; }
.as-zeile a { color: var(--ink-mid); text-decoration: none; border-bottom: 1px solid var(--line); }
.as-zeile a:hover { color: var(--signal-deep); border-bottom-color: currentColor; }
.as-hersteller-link { color: var(--ink-mid); }

.as-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.1rem;
  text-transform: none; letter-spacing: 0; font-size: .78rem;
  margin-block: 1rem 1.6rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line);
}
.as-meta a { color: var(--ink-mid); text-decoration: none; border-bottom: 1px solid var(--line); }

.as-kicker { margin-bottom: .6rem; color: var(--signal-deep); }
.as-lead { font-size: clamp(1.05rem, 1.8vw, 1.2rem); color: var(--ink-mid); max-width: 60ch; }

.as-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.as-btn,
.as-box--cta a[rel~="sponsored"] {
  font-family: var(--f-head); font-weight: 700; font-size: .92rem; letter-spacing: .005em;
  text-decoration: none; padding: .72rem 1.25rem; border: 1.5px solid var(--signal); background: var(--signal);
  color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border-radius: var(--r); line-height: 1.2; cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.as-btn:hover, .as-box--cta a[rel~="sponsored"]:hover { background: var(--signal-deep); border-color: var(--signal-deep); color: #fff; }
.as-btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.as-btn--ghost:hover { background: var(--card-2); border-color: var(--ink); color: var(--ink); }
.as-btn--klein { padding: .45rem .8rem; font-size: .8rem; }

/* ==========================================================================
   5 · Datenblatt-ATF: Demo-Modul (schaltbar) + Quoten-Zeile
   ========================================================================== */

.as-atf { display: grid; gap: var(--gap); margin-bottom: clamp(1.6rem, 4vw, 2.4rem); }
@media (min-width: 900px) { .as-atf:has(.as-demo) { grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); align-items: start; } }

.as-demo-rahmen { aspect-ratio: 16 / 10; background: var(--ink); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.as-demo-rahmen iframe { width: 100%; height: 100%; border: 0; }
.as-demo-hinweis { font-size: .78rem; color: var(--ink-dim); margin: .5rem 0 0; }

.as-qz { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.as-qz-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; padding: .9rem 1.1rem .7rem; border-bottom: 1px solid var(--line-soft); }
.as-qz-titel { font-size: .98rem; margin: 0; }
.as-qz-bilanz { margin: 0; font-size: .8rem; color: var(--ink-mid); }
.as-qz-liste { list-style: none; margin: 0; padding: 0; }
.as-qz-zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .6rem 1rem;
  padding: .7rem 1.1rem; border-bottom: 1px solid var(--line-soft); margin: 0;
}
.as-qz-zeile:last-child { border-bottom: 0; }
.as-qz-zeile.is-beste { background: var(--signal-soft); box-shadow: inset 3px 0 0 var(--signal); }
.as-qz-anbieter { display: flex; flex-direction: column; min-width: 0; }
.as-qz-anbieter a { text-decoration: none; font-weight: 600; }
.as-qz-anbieter a:hover { text-decoration: underline; }
.as-qz-anbieter small { color: var(--ink-dim); font-size: .72rem; }
.as-qz-wert { display: flex; align-items: center; gap: .6rem; }
.as-qz-wert .as-num { font-size: 1.2rem; }
.is-beste .as-qz-wert .as-num { color: var(--signal-deep); }
.as-tag {
  font-family: var(--f-mono); font-size: .62rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: var(--signal); padding: .2rem .45rem; border-radius: 2px; white-space: nowrap;
}
.as-quelle {
  font-size: .76rem; color: var(--ink-dim); text-transform: none; letter-spacing: 0; font-weight: 400;
  margin: .6rem 0 0; line-height: 1.5;
}
.as-qz .as-quelle { padding: .6rem 1.1rem .8rem; margin: 0; border-top: 1px solid var(--line-soft); background: var(--card-2); }
.as-quelle a { color: var(--ink-mid); }

@media (max-width: 560px) {
  .as-qz-zeile { grid-template-columns: minmax(0, 1fr) auto; }
  .as-qz-cta { grid-column: 1 / -1; }
  .as-qz-cta .as-btn { width: 100%; }
  .as-qz-zeile:not(.is-beste) .as-qz-cta { display: none; }   /* mobil: CTA nur an der besten Zeile, die anderen bleiben Daten */
}

/* ==========================================================================
   6 · Datenblatt-Karte (Label-Wert) + Score-Flächen
   ========================================================================== */

.as-db { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); margin-block: 1.4rem; overflow: hidden; }
.as-db-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--line-soft); margin: 0; }
.as-db-feld { background: var(--card); padding: .8rem 1rem; display: flex; flex-direction: column; gap: .25rem; }
.as-db dd { margin: 0; font-size: 1.05rem; }
.as-db dd .as-num { font-size: 1.1rem; }
.as-db .as-quelle { margin: 0; padding: .55rem 1rem .7rem; border-top: 1px solid var(--line-soft); background: var(--card-2); }
.as-db--befund .as-db-liste { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.as-scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-block: 1.4rem; }
.as-score { background: var(--card); padding: 1rem 1.05rem; display: flex; flex-direction: column; gap: .3rem; }
.as-score--signal { box-shadow: inset 0 3px 0 var(--signal); }
.as-score-v { display: flex; align-items: baseline; gap: .25rem; }
.as-score-v .as-num { font-size: clamp(1.4rem, 3vw, 1.8rem); line-height: 1; }
.as-score--signal .as-score-v .as-num { color: var(--signal-deep); }
.as-score-e { font-family: var(--f-mono); font-size: .9rem; color: var(--ink-dim); }
.as-score-h { font-size: .8rem; color: var(--ink-mid); line-height: 1.45; }
.as-scores--paar { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.as-scores-text { background: var(--card); padding: 1rem 1.05rem; font-size: .95rem; color: var(--ink-mid); grid-column: span 2; }
.as-scores-text > :last-child { margin-bottom: 0; }
@media (max-width: 560px) { .as-scores-text { grid-column: 1 / -1; } }

/* ==========================================================================
   7 · Quoten-Matrix — Wide-Table-Muster 03 (Key-Columns + Row-Expander)
   ========================================================================== */

.as-matrix { margin-block: 1.6rem; container-type: inline-size; }
.as-matrix-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; margin-bottom: .8rem; }
.as-matrix-kopf h2 { margin: 0; }
.as-matrix-bilanz { margin: 0; font-size: .84rem; color: var(--ink-mid); }

.as-matrix-werkzeuge { display: flex; flex-wrap: wrap; align-items: end; gap: .8rem 1.4rem; margin-bottom: .8rem; }
.as-matrix-werkzeuge[hidden] { display: none; }
.as-feld { display: flex; flex-direction: column; gap: .3rem; flex: 1 1 260px; max-width: 420px; }
.as-feld span, .as-suche label { font-family: var(--f-mono); font-size: .7rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-dim); }
.as-feld input, .as-suche input {
  font: inherit; font-size: 1rem; padding: .6rem .8rem; height: 44px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); color: var(--ink); width: 100%; min-width: 0;
}
.as-feld input:focus, .as-suche input:focus { border-color: var(--ink); outline: 2px solid var(--signal-line); outline-offset: 0; }
.as-schalter { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--ink-mid); padding-bottom: .55rem; cursor: pointer; }
.as-schalter input { accent-color: var(--signal); width: 18px; height: 18px; }
.as-matrix-alle { font-size: .86rem; padding-bottom: .6rem; }
.is-js .as-matrix-alle { display: none; }   /* mit JS übernimmt der Schalter */

.as-matrix-scroll { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
/* Ohne JS: Karte scrollt horizontal, dann KEIN sticky — im Scroll-Container klebte der Kopf 62px tief ueber Zeile 1 (Befund 2026-09-25).
   Mit JS: kein Scroll-Container (sticky braucht das Viewport), die Tabelle passt durch die schmaleren Zellen. */
.as-matrix:not(.is-js) .as-matrix-scroll { overflow-x: auto; }
.as-matrix:not(.is-js) .as-matrix-tabelle thead th { position: static; }
.as-matrix-tabelle { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 0; }
.as-matrix-tabelle caption { caption-side: bottom; text-align: left; font-size: .76rem; color: var(--ink-dim); padding: .6rem .9rem .8rem; }
.as-matrix-tabelle th, .as-matrix-tabelle td { padding: .55rem .55rem; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.as-matrix-tabelle thead th { background: var(--card-2); border-bottom: 1px solid var(--line); position: sticky; top: var(--head-h, 62px); z-index: 2; padding: 0; }   /* --head-h setzt functions.js aus der echten Kopfhoehe */
.as-matrix-tabelle thead th button {
  all: unset; display: block; width: 100%; padding: .6rem .55rem; cursor: pointer; box-sizing: border-box;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; white-space: nowrap;
}
.as-matrix-tabelle thead th button:hover { color: var(--ink); }
.as-matrix-tabelle thead th button:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
.as-matrix-tabelle thead th[aria-sort="ascending"] button::after { content: ' ▲'; color: var(--signal); }
.as-matrix-tabelle thead th[aria-sort="descending"] button::after { content: ' ▼'; color: var(--signal); }
.as-matrix-tabelle tbody th { font-weight: 600; }
.as-matrix-tabelle tbody th a { text-decoration: none; }
.as-matrix-tabelle tbody th a:hover { text-decoration: underline; }
.as-mx-num, .as-matrix-tabelle th.as-mx-num { text-align: right; }
.as-mx-num .as-num { font-weight: 500; }
.as-mx-sec.is-beste { background: var(--signal-soft); }
.as-mx-sec.is-beste .as-num { color: var(--signal-deep); font-weight: 600; }
.as-mx-sec.is-leer { color: var(--ink-dim); }
.as-matrix-tabelle tbody tr:hover > * { background-color: var(--card-2); }
.as-matrix-tabelle tbody tr:hover > .is-beste { background-color: var(--signal-soft); }
.as-matrix-tabelle tbody tr:last-child > * { border-bottom: 0; }
.as-matrix-tabelle tr[hidden] { display: none !important; }

/* Muster 03: breit -> alle Spalten, kein Schalter; schmal -> Anbieterspalten weichen, Schalter erscheint */
.as-mx-det { display: none; width: 1%; }
.as-mx-detail { display: none; }
.as-mx-toggle {
  all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  font-family: var(--f-mono); font-size: .74rem; font-weight: 600; color: var(--ink-mid);
  border: 1px solid var(--line); border-radius: var(--r); padding: .3rem .55rem; background: var(--card); white-space: nowrap;
}
.as-mx-toggle::after { content: '▾'; color: var(--signal); }
.as-mx-toggle[aria-expanded="true"]::after { content: '▴'; }
.as-mx-toggle:hover { border-color: var(--ink); color: var(--ink); }
.as-mx-toggle:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
.as-mx-detail td { background: var(--card-2); padding: .3rem .75rem .7rem; }
.as-mx-detail dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .35rem .8rem; margin: 0; }
.as-mx-detail dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; padding: .3rem .5rem; border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--card); min-width: 0; }
.as-mx-detail dl > div.is-beste { background: var(--signal-soft); border-color: var(--signal-line); }
.as-mx-detail dt { margin: 0; }
.as-mx-detail dd { margin: 0; }
.as-mx-detail dd .as-num { font-weight: 600; }
.is-beste dd .as-num { color: var(--signal-deep); }

@container (max-width: 700px) {
  .as-matrix.is-js .as-mx-sec { display: none; }
  .as-matrix.is-js .as-mx-det { display: table-cell; text-align: right; }
  .as-matrix.is-js .as-mx-detail { display: table-row; }
  .as-matrix.is-js .as-mx-detail[hidden] { display: none; }
  .as-matrix-tabelle { table-layout: fixed; }
  .as-matrix-tabelle thead th { top: var(--head-h, 62px); position: sticky; }   /* mobil blieb der Kopf oben zurueck, Zeilen liefen ohne Beschriftung (Befund 2026-09-24) */
  .as-matrix-tabelle thead th button { white-space: normal; padding: .5rem .45rem; line-height: 1.3; }
  .as-matrix-tabelle th, .as-matrix-tabelle td { padding-inline: .4rem; overflow-wrap: anywhere; }
  .as-matrix-tabelle th.as-mx-name { width: 38%; }
  .as-matrix-tabelle th.as-mx-num { width: 22%; }
  .as-matrix-tabelle th.as-mx-det { width: 18%; }
  .as-matrix-tabelle thead th.as-mx-det { padding: .5rem .3rem; text-align: right; font-size: .62rem; white-space: nowrap; }   /* Kopf war 6px abgeschnitten (Befund 2026-09-25) */   /* Kopf der Schalter-Spalte war leer (Befund 2026-09-24) */
  .as-mx-toggle { padding: .3rem .4rem; }
  .as-mx-detail dl { grid-template-columns: 1fr 1fr; }
  .as-mx-detail dl > div { flex-direction: column; align-items: flex-start; gap: .1rem; }
  .as-mx-detail dt { white-space: normal; overflow-wrap: anywhere; }
}

/* ==========================================================================
   8 · Startseite: Suche + Board der größten Spannen
   ========================================================================== */

.as-start-kopf { display: grid; gap: 1.2rem; margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
@media (min-width: 900px) { .as-start-kopf { grid-template-columns: minmax(0, 1.2fr) minmax(320px, 1fr); align-items: end; } }
.as-suche { display: grid; gap: .4rem; margin-block: .6rem 0; }
.as-suche-zeile { display: flex; gap: .5rem; }
.as-suche-zeile .as-btn { flex: none; height: 44px; }
@media (max-width: 480px) { .as-suche-zeile { flex-direction: column; } .as-suche-zeile .as-btn { width: 100%; } }

.as-board { margin-block: 1.6rem; }
.as-board-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; margin-bottom: .9rem; }
.as-board-kopf h2 { margin: 0; }
.as-board-sub { margin: 0; font-size: .86rem; color: var(--ink-mid); }
.as-board-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.as-board-karte { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 1rem 1.05rem 1.05rem; display: flex; flex-direction: column; gap: .5rem; margin: 0; }
.as-board-karte h3 { font-size: 1.05rem; margin: 0; }
.as-board-karte h3 a { text-decoration: none; }
.as-board-karte h3 a:hover { text-decoration: underline; }
.as-board-spanne { display: flex; align-items: baseline; gap: .5rem; margin: 0; }
.as-board-einheit { font-size: .78rem; color: var(--ink-dim); }
.as-board-paar { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 0; }
.as-board-paar > div { border: 1px solid var(--line-soft); border-radius: var(--r); padding: .45rem .6rem; background: var(--card-2); }
.as-board-paar > div:first-child { border-color: var(--signal-line); background: var(--signal-soft); }
.as-board-paar dt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-board-paar dd { margin: 0; }
.as-board-n { margin: 0; font-size: .78rem; color: var(--ink-dim); }
.as-board-mehr { margin: 1rem 0 0; }

/* ==========================================================================
   9 · Geräte-Grid (Hubs), Karten, Boxen, Sektionen
   ========================================================================== */

.as-grid { list-style: none; padding: 0; margin-block: 1.4rem; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.as-gk { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: .95rem 1rem 1rem; margin: 0; display: flex; flex-direction: column; gap: .35rem; position: relative; transition: border-color .18s var(--ease); }
.as-gk:hover { border-color: var(--ink); }
.as-gk h3 { font-size: 1rem; margin: 0; }
.as-gk h3 a { text-decoration: none; }
.as-gk h3 a::after { content: ''; position: absolute; inset: 0; }
.as-gk-her { margin: 0; font-size: .78rem; color: var(--ink-dim); }
.as-gk-daten { margin: .35rem 0 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .4rem; padding-top: .6rem; border-top: 1px solid var(--line-soft); }
.as-gk-daten > div { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.as-gk-daten dd { margin: 0; font-size: .95rem; }

.as-cards { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-block: 1.4rem; }
.as-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 1.05rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; position: relative; transition: border-color .18s var(--ease); }
.as-card:hover { border-color: var(--ink); }
.as-card h3 { font-size: 1.08rem; }
.as-card h3 a { text-decoration: none; }
.as-card h3 a::after { content: ''; position: absolute; inset: 0; }
.as-card p { font-size: .94rem; color: var(--ink-mid); margin: 0; }
.as-card-facts { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--line-soft); font-size: .8rem; color: var(--ink-dim); }
.as-card-facts b { color: var(--ink); }

.as-box { border: 1px solid var(--line); border-left: 3px solid var(--ink); background: var(--card); padding: 1rem 1.2rem; border-radius: var(--r); margin-block: 1.5rem; box-shadow: var(--shadow); }
.as-box h3 { margin: 0 0 .5rem; }
.as-box > :last-child { margin-bottom: 0; }
.as-box--warn { border-left-color: var(--signal); }
.as-box--warn h3 { color: var(--signal-deep); }
.as-box--cta { border-left-color: var(--signal); background: var(--signal-soft); }
.as-box--cta a[rel~="sponsored"] { margin-bottom: .6rem; }
.as-box--cta p:last-child { font-size: .8rem; color: var(--ink-dim); margin-bottom: 0; }

.as-sec { padding-block: clamp(1.6rem, 4vw, 2.6rem); }
.as-sec + .as-sec { border-top: 1px solid var(--line); }
.as-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.2rem; margin-bottom: 1.2rem; }
.as-sec-head h2 { margin: 0; }
.as-sec-head p { color: var(--ink-mid); margin: 0; font-size: .95rem; }
.as-sec-more { margin-left: auto; font-size: .86rem; font-weight: 600; }
.as-hero { margin-block: 0 1.6rem; }
.as-hero-titel { margin-top: 0; }

/* Datenbefund (nur per Shortcode [as_atf], nie über dem Inhalt) */
.as-befund { margin: 1.6rem 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
.as-befund-kopf { margin: 0; padding: .5rem 1.1rem; background: var(--card-2); border-bottom: 1px solid var(--line-soft); font-family: var(--f-mono); font-size: .7rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-dim); display: flex; justify-content: space-between; gap: .8rem; }
.as-befund-body { display: flex; gap: 1.2rem; align-items: center; justify-content: space-between; padding: 1rem 1.1rem; }
.as-befund-marke { margin: 0 0 .15rem; font-family: var(--f-head); font-size: 1.3rem; font-weight: 800; }
.as-befund-kriterium { margin: 0 0 .3rem; font-size: .86rem; color: var(--ink-mid); }
.as-befund-wert { margin: 0; font-size: .98rem; }
.as-befund-cta { display: flex; flex-direction: column; gap: .4rem; align-items: stretch; flex: none; text-align: center; }
.as-befund-daten { font-size: .8rem; }
.as-befund-beleg { margin: 0; padding: .5rem 1.1rem .7rem; font-size: .74rem; color: var(--ink-dim); border-top: 1px solid var(--line-soft); }
@media (max-width: 640px) { .as-befund-body { flex-direction: column; align-items: stretch; } }

/* ==========================================================================
   10 · Tabellen — Muster 01 (Record-Blocks), Klasse kommt per Shortcode
   ========================================================================== */

.as-tablewrap { container-type: inline-size; margin-block: 1.5rem; }
.as-tablewrap table { width: 100%; border-collapse: collapse; font-size: .93rem; border: 1px solid var(--line); background: var(--card); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); margin: 0; }
.as-tablewrap caption { caption-side: bottom; text-align: left; font-size: .76rem; color: var(--ink-dim); padding-top: .55rem; }
.as-tablewrap th, .as-tablewrap td { padding: .65rem .85rem; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.as-tablewrap thead th { background: var(--card-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.as-tablewrap tbody th[scope="row"] { font-weight: 600; }
.as-tablewrap tbody th[scope="row"] a { text-decoration: none; }
.as-tablewrap tbody th[scope="row"] a:hover { text-decoration: underline; }
.as-tablewrap td { color: var(--ink-mid); }
.as-tablewrap td.as-num, .as-tablewrap td .as-num { color: var(--ink); }
.as-tablewrap tbody tr:last-child th, .as-tablewrap tbody tr:last-child td { border-bottom: 0; }
.as-tablewrap--kompakt table { font-size: .88rem; }
.as-tablewrap--kompakt th, .as-tablewrap--kompakt td { padding: .45rem .7rem; }

@container (max-width: 560px) {
  .as-tablewrap table, .as-tablewrap thead, .as-tablewrap tbody, .as-tablewrap tr, .as-tablewrap td, .as-tablewrap th { display: block; width: 100%; }
  .as-tablewrap table { display: flex; flex-direction: column; border: 0; background: none; box-shadow: none; }
  .as-tablewrap tbody { order: 1; }
  .as-tablewrap caption { order: 2; }
  .as-tablewrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .as-tablewrap tbody tr { border: 1px solid var(--line); background: var(--card); margin-bottom: .7rem; border-radius: var(--r-lg); box-shadow: var(--shadow); }
  .as-tablewrap tbody tr[hidden] { display: none !important; }
  .as-tablewrap tbody tr:last-child { margin-bottom: 0; }
  .as-tablewrap tbody th[scope="row"] { background: var(--card-2); border-bottom: 1px solid var(--line); font-size: 1rem; padding: .6rem .8rem; }
  .as-tablewrap td { display: flex; justify-content: space-between; align-items: baseline; gap: .9rem; padding: .5rem .8rem; border-bottom: 1px dotted var(--line-soft); }
  .as-tablewrap td::before { content: attr(data-label); flex: 0 0 auto; font-family: var(--f-mono); font-size: .66rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-dim); }
  .as-tablewrap td > span, .as-tablewrap td > a { text-align: right; }
  .as-tablewrap td:has(.as-btn) { display: block; }
  .as-tablewrap td:has(.as-btn)::before { display: block; margin-bottom: .4rem; }
  .as-tablewrap td .as-btn { display: flex; width: 100%; }
}

/* ==========================================================================
   11 · Akkordeon (ohne Library; Parameter s. Tokens)
   ========================================================================== */

.as-acc { margin-block: 1.6rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
.as-acc-item { border-bottom: 1px solid var(--line-soft); position: relative; }
.as-acc-item:last-child { border-bottom: 0; }
.as-acc-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--acc-akzent); transform: scaleY(0); transform-origin: top; transition: transform var(--acc-dauer) var(--acc-ease); }
.as-acc--signal { --acc-akzent: var(--signal); }
.as-acc-item.is-open::before { transform: scaleY(1); }
.as-acc-item h3 { margin: 0; font-size: inherit; }
.as-acc-btn { display: flex; align-items: center; gap: 1rem; width: 100%; text-align: left; background: none; border: 0; color: var(--ink); cursor: pointer; padding: .95rem 1.1rem; font-family: var(--f-head); font-weight: 700; font-size: .98rem; line-height: 1.35; }
.as-acc-btn:hover { color: var(--signal-deep); }
.as-acc-btn:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
.as-acc-btn > span:not(.as-acc-ico) { flex: 1; }
.as-acc-ico { flex: none; width: 18px; height: 18px; position: relative; }
.as-acc-ico::before, .as-acc-ico::after { content: ''; position: absolute; background: var(--acc-akzent); border-radius: 1px; transition: transform var(--acc-dauer) var(--acc-ease), opacity var(--acc-dauer) var(--acc-ease); }
.as-acc-ico::before { left: 0; right: 0; top: 8px; height: 2px; }
.as-acc-ico::after { top: 0; bottom: 0; left: 8px; width: 2px; }
.as-acc-item.is-open .as-acc-ico::after { transform: scaleY(0); opacity: 0; }
.as-acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--acc-dauer) var(--acc-ease); }
.as-acc-item.is-open .as-acc-panel { grid-template-rows: 1fr; }
.as-acc-panel > div { overflow: hidden; }
.as-acc-body { padding: 0 1.1rem 1.1rem; color: var(--ink-mid); font-size: .97rem; }
.as-acc-body > :last-child { margin-bottom: 0; }
.as-acc-body > * { opacity: 0; transform: translateY(6px); transition: opacity var(--acc-dauer) var(--acc-ease), transform var(--acc-dauer) var(--acc-ease); }
.as-acc-item.is-open .as-acc-body > * { opacity: 1; transform: none; }
.as-acc-item.is-open .as-acc-body > :nth-child(2) { transition-delay: .05s; }
.as-acc-item.is-open .as-acc-body > :nth-child(n + 3) { transition-delay: .1s; }

/* ==========================================================================
   12 · Autor, Inhaltsverzeichnis, Consent, KI-Bild
   ========================================================================== */

.as-author { display: flex; gap: 1rem; align-items: flex-start; margin-top: 2.4rem; padding: 1.1rem 1.2rem; border: 1px solid var(--line); background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.as-author img, .as-author .as-author-img { width: 52px; height: 52px; border-radius: 50%; flex: none; }
.as-author-initialen { display: grid; place-items: center; font-family: var(--f-head); font-size: 1.05rem; font-weight: 800; letter-spacing: .04em; color: #fff; background: var(--ink); }
.as-author h3 { font-size: 1rem; margin-bottom: .25rem; }
.as-author p { font-size: .9rem; color: var(--ink-mid); margin: 0; }

.as-aside { align-self: start; position: sticky; top: 80px; }
.as-toc { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1rem 1.1rem; box-shadow: var(--shadow); }
.as-toc h2 { margin: 0 0 .6rem; }
.as-toc ol { list-style: none; padding: 0; margin: 0; font-size: .9rem; counter-reset: toc; }
.as-toc li { padding: .3rem 0 .3rem .9rem; margin: 0; border-left: 2px solid var(--line); counter-increment: toc; }
.as-toc a { text-decoration: none; color: var(--ink-mid); }
.as-toc a:hover { color: var(--signal-deep); }

.as-consent { position: fixed; inset: auto 0 0 0; z-index: 90; background: var(--card); border-top: 3px solid var(--ink); padding: 1rem var(--pad-x) 1.1rem; font-size: .92rem; box-shadow: 0 -4px 20px rgba(28, 43, 74, .08); }
.as-consent[hidden] { display: none; }
.as-consent-in { width: min(100%, var(--shell)); margin-inline: auto; display: grid; gap: .9rem; }
.as-consent p { margin: 0; color: var(--ink-mid); }
.as-consent-btns { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.as-consent .as-btn { padding: .55rem 1rem; font-size: .84rem; }
.as-consent-mehr { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--f-body); font-size: .84rem; color: var(--ink-mid); text-decoration: underline; text-underline-offset: 3px; }
.as-consent-mehr:hover { color: var(--signal-deep); }
.as-consent-detail[hidden] { display: none; }
.as-consent-detail label { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem 0; border-top: 1px solid var(--line-soft); font-size: .9rem; }
.as-consent-detail input { margin-top: .35rem; accent-color: var(--signal); }
@media (min-width: 720px) { .as-consent-in { grid-template-columns: 1fr auto; align-items: center; } .as-consent-detail { grid-column: 1 / -1; } }

/* KI-Bild-Kennzeichnung, AI Act Art. 50 (Snippet inc/ki-bild.php) */
.ki-bild { position: relative; margin: 0; display: block; }
.ki-bild img { display: block; max-width: 100%; height: auto; }
.ki-bild__badge { position: absolute; right: .6rem; bottom: .6rem; padding: .25rem .55rem; font: 600 .75rem/1 var(--f-body); letter-spacing: .02em; color: #fff; background: rgba(0, 0, 0, .72); border-radius: .3rem; pointer-events: none; }
.ki-bild figcaption { font-size: .85rem; opacity: .8; margin-top: .35rem; }
.ki-bild--caption .ki-bild__badge { bottom: calc(.6rem + 1.8em); }

/* ==========================================================================
   13 · Schmale Viewports
   ========================================================================== */

@media (max-width: 560px) {
  .as-titel--bild { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .as-titel--bild .as-geraetefig { width: 72px; padding: .4rem; }
  h1 { font-size: clamp(1.55rem, 7vw, 2rem); }
  .as-meta { margin-block: .7rem 1rem; padding-bottom: .7rem; gap: .3rem .9rem; }
  .as-crumb { margin-bottom: .6rem; }
  .as-consent { padding: .7rem .9rem; }
  .as-consent p { font-size: .8rem; line-height: 1.45; }
  .as-consent-in { gap: .6rem; }
  .as-consent .as-btn { padding: .5rem .8rem; font-size: .78rem; }
  .as-gk-daten { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .as-acc-panel, .as-acc-body > *, .as-acc-item::before, .as-acc-ico::before, .as-acc-ico::after,
  .as-btn, .as-card, .as-gk, .as-adv > summary::before { transition: none; }
}

@media print {
  .as-head, .as-adv, .as-consent, .as-foot-cols, .as-mx-det { display: none; }
  .as-mx-sec { display: table-cell !important; }
}

/* ------------------------------------------------------------------
   Methodik-Box (Snippet inc/methodik-box.php)
   Recherche · Prüfung · Methode · zuletzt geprüft, unter dem Inhalt.
   ------------------------------------------------------------------ */
.ig-methodik {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .5rem;
  align-items: baseline;
  max-width: var(--prose);
  margin: 2.5rem 0 0;
  padding: .85rem 0 0;
  border-top: 1px solid var(--line);
  font-family: var(--f-body);
  font-size: .875rem;
  line-height: 1.5;
  color: var(--ink-mid);
}
.ig-methodik__item { white-space: nowrap; }
.ig-methodik__label {
  font-family: var(--f-head);
  font-weight: 600;
  color: var(--ink);
  margin-right: .25rem;
}
.ig-methodik__item a { color: var(--ink); text-decoration-color: var(--signal-line); }
.ig-methodik__item a:hover { color: var(--signal-deep); }
.ig-methodik time { font-family: var(--f-mono); font-size: .8125rem; color: var(--ink); }
.ig-methodik__sep { color: var(--ink-dim); }
@media (max-width: 640px) {
  .ig-methodik { flex-direction: column; gap: .35rem; }
  .ig-methodik__item { white-space: normal; }
  .ig-methodik__sep { display: none; }
}

/* Quotenzeile ohne Matrix-Treffer: Befund statt Leere (2026-09-17) */
.as-qz--leer .as-qz-befund { margin: 0.5rem 0 0; font-family: var(--f-body); color: var(--ink); max-width: var(--prose, 68ch); }
.as-qz--leer .as-qz-bilanz .as-num { color: var(--ink-mid); }

/* 18+-Siegel im Footer (GGL-Audit 2026-09-17: Logo-Pflicht, Inline-SVG statt externem Bild) */
.as-foot-siegel { display: inline-block; color: var(--ink-mid); flex: 0 0 auto; margin-right: .75rem; vertical-align: top; }
.as-foot-siegel svg { display: block; }

/* Kurzfassung auf Hersteller-Hubs (Ranking-Schutz 2026-09-17): wie eine Faktenbox, aber mit H2 */
.as-box--kurz { margin: 0 0 1.6rem; }
.as-box--kurz ul { margin: 0; padding-left: 1.1rem; }
.as-box--kurz li + li { margin-top: .35rem; }

/* WebP-Auslieferung (inc/webp-picture.php) legt ein <picture> um jedes <img>. Damit dieser
   Wrapper im Layout nichts veraendert, faellt er per `contents` aus dem Fluss: alle Regeln
   greifen weiter auf das <img> selbst, Abstaende und Raster bleiben wie vorher (2026-09-17). */
picture {
	display: contents;
}

/* CTA Anbieterseite (ATF + unter dem Quotenblock) und Go-Link in Matrix/Board — 2026-09-24 */
.as-anbieter-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 1rem 0 .25rem; }
.as-anbieter-cta--unten { margin-top: 1.25rem; }
.as-cta-hinweis { font-size: .8rem; color: var(--ink-mid); max-width: 46ch; line-height: 1.4; }
.as-mx-go { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--signal-deep); }
.as-mx-go:hover { border-bottom-style: solid; }
.as-board-cta { margin: .7rem 0 0; }

/* ==========================================================================
   14 · Startseite-Ausbau 2026-09-24: Kennzahlen, Gerät im Fokus, Anbieter-Leiste,
   Hersteller-Kacheln, Quoten-Balken (Freigabe Gregor „bau alle")
   ========================================================================== */

/* Quoten-Balken: Skala je Gerät, beste Zeile in Signalfarbe */
.as-balken { display: block; height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; min-width: 60px; }
.as-balken > span { display: block; height: 100%; background: var(--ink-dim); border-radius: 3px; }
.as-balken.is-beste > span { background: var(--signal); }
.as-board-paar dd { display: grid; gap: .3rem; }
.as-qz-wert { flex-direction: column; align-items: flex-end; gap: .25rem; }
.as-qz-wert .as-balken { width: 120px; }
@media (max-width: 560px) { .as-qz-wert .as-balken { width: 90px; } }

/* Kennzahlen-Leiste */
.as-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-block: 0 clamp(1.6rem, 4vw, 2.4rem); box-shadow: var(--shadow); }
.as-kpi-feld { background: var(--card); padding: 1rem 1.1rem 1.05rem; display: flex; flex-direction: column; gap: .15rem; }
.as-kpi-wert { font-size: clamp(1.8rem, 3.6vw, 2.4rem); line-height: 1; }
.as-kpi-feld:nth-child(3) .as-kpi-wert { color: var(--signal-deep); }
.as-kpi-label { font-family: var(--f-head); font-weight: 700; font-size: .92rem; margin-top: .3rem; }
.as-kpi-sub { font-size: .78rem; color: var(--ink-dim); line-height: 1.4; }
@media (max-width: 760px) { .as-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } .as-kpi-wert { font-size: 1.7rem; } }
.as-kpi-stand { grid-column: 1 / -1; margin: 0; padding: .5rem 1.1rem; background: var(--card-2); font-size: .76rem; color: var(--ink-dim); }

/* Gerät im Fokus */
.as-fokus { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); margin-block: 0 clamp(1.6rem, 4vw, 2.4rem); overflow: hidden; }
.as-fokus-kopf { padding: 1rem 1.2rem .8rem; border-bottom: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; }
.as-fokus-kopf .as-kicker { width: 100%; margin: 0; }
.as-fokus-kopf h2 { margin: 0; font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
.as-fokus-kopf h2 a { text-decoration: none; }
.as-fokus-kopf h2 a:hover { text-decoration: underline; }
.as-fokus-her { margin: 0; font-size: .82rem; color: var(--ink-dim); }
.as-fokus-body { display: grid; gap: var(--gap); padding: 1.1rem 1.2rem 1.2rem; }
@media (min-width: 760px) { .as-fokus-body { grid-template-columns: minmax(160px, 220px) minmax(0, 1fr); align-items: start; } }
.as-fokus-bild { margin: 0; border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--card-2); padding: .8rem; display: flex; align-items: center; justify-content: center; }
.as-fokus-bild img { width: 100%; height: auto; }
.as-fokus-spanne { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin: 0 0 .9rem; }
.as-balkenliste { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.as-balkenzeile { display: grid; grid-template-columns: minmax(110px, 150px) minmax(0, 1fr) 82px auto; align-items: center; gap: .7rem; margin: 0; padding: .35rem .5rem; border-radius: var(--r); }
.as-balkenzeile.is-beste { background: var(--signal-soft); }
.as-balken-marke { font-weight: 600; font-size: .92rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-balken-marke a { text-decoration: none; }
.as-balken-marke a:hover { text-decoration: underline; }
.as-balken-wert { text-align: right; }
.is-beste .as-balken-wert { color: var(--signal-deep); }
.as-balken-cta { min-width: 0; }
.as-fokus-mehr { margin: 1rem 0 0; font-size: .86rem; color: var(--ink-mid); }
@media (max-width: 560px) {
  .as-balkenzeile { grid-template-columns: minmax(0, 1fr) 76px; }
  .as-balkenzeile .as-balken { grid-column: 1 / -1; order: 3; }
  .as-balkenzeile .as-balken-cta { grid-column: 1 / -1; order: 4; }
  .as-balkenzeile .as-balken-cta .as-btn { width: 100%; }
  .as-balkenzeile:not(.is-beste) .as-balken-cta { display: none; }
}

/* Anbieter-Leiste */
.as-anb { margin-block: clamp(1.6rem, 4vw, 2.4rem) 0; }
.as-anb-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.as-anb-kachel { margin: 0; }
.as-anb-kachel a { display: flex; flex-direction: column; gap: .35rem; height: 100%; padding: .75rem .8rem .8rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); text-decoration: none; color: var(--ink); transition: border-color .18s var(--ease), transform .18s var(--ease); }
.as-anb-kachel a:hover { border-color: var(--ink); transform: translateY(-1px); }
.as-anb-kachel.has-quoten a { border-top: 3px solid var(--signal); }
.as-anb-logo { display: flex; align-items: center; justify-content: center; height: 46px; }
.as-anb-logo img { max-height: 40px; width: auto; max-width: 100%; object-fit: contain; }
.as-anb-logo b { font-family: var(--f-head); font-weight: 800; font-size: 1rem; }
.as-anb-name { font-family: var(--f-head); font-weight: 700; font-size: .86rem; }
.as-anb-befund { font-size: .72rem; color: var(--ink-dim); }
.as-anb-befund b { color: var(--signal-deep); }

/* Hersteller-Kacheln */
.as-her { margin-block: clamp(1.6rem, 4vw, 2.4rem) 0; }
.as-her-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.as-her-kachel { margin: 0; }
.as-her-kachel a { display: flex; flex-direction: column; gap: .25rem; height: 100%; padding: .9rem 1rem 1rem; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--ink); border-radius: var(--r-lg); text-decoration: none; color: var(--ink); transition: border-color .18s var(--ease); }
.as-her-kachel a:hover { border-color: var(--ink); }
.as-her-name { font-family: var(--f-head); font-weight: 800; font-size: 1.05rem; }
.as-her-zahl { font-size: .84rem; color: var(--ink-mid); }
.as-her-best { font-size: .8rem; color: var(--ink-dim); margin-top: .2rem; }