/* ============================================================
   SEOgrinder — Design System

   Warmes Papier statt Bildschirmweiss, ein freundliches Gruen als
   einzige Akzentfarbe, grosszuegige Radien. SEO-Befunde sind von
   Natur aus eine Mangelliste; die Oberflaeche soll nicht zusaetzlich
   streng wirken. Zugewandt, aber kein Spielzeug.
   ============================================================ */

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/nunito-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/nunito-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/nunito-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/nunito-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/nunito-latin.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;
}


:root {
  /* Marke — frisches Gruen. Zweite Farbe ist reines Weiss, kein
     getoentes Papier: das Gruen soll die einzige Farbe im Raum sein. */
  --brand:        #08863a;
  --brand-hover:  #077431;
  --brand-active: #066028;
  --brand-light:  #3fbd6d;
  --brand-soft:   #e6f6ec;
  --brand-softer: #f3fbf6;
  --brand-border: #b6e3c7;
  --brand-text:   #0b7038;

  /* Startseite: Midnight Black und Electric Blue (Auftrag vom 30.10.).
     Die Stufen sind aus den beiden Farben abgeleitet. Electric Blue traegt
     weisse Schrift nur 3,2 : 1, deshalb liegt der Knopf eine Stufe dunkler. */
  --night:    #02070a;
  --night-2:  #05172a;
  --night-3:  #0a3354;
  --blue:     #0297de;
  --blue-300: #5cc4f2;
  --blue-100: #cdeeff;
  --blue-600: #0279b8;  /* Knopfgrund, Weiss darauf 4,7 : 1 */
  --blue-700: #026aa2;

  /* Neutrale ohne Farbstich, nur ein Hauch Gruen in den hellsten
     Stufen, damit Weiss neben dem Gruen nicht blaeulich kippt. */
  --ink:      #14181a;
  --ink-2:    #3d4548;
  --muted:    #5f696c;
  --muted-2:  #97a1a3;
  --line:     #e3e8e6;
  --line-2:   #f0f4f2;
  --bg:       #ffffff;
  --surface:  #f5f8f6;
  --surface-2:#e9eeeb;

  /* Status */
  --good:        #08863a;
  --good-soft:   #e6f6ec;
  --average:     #8f5a0c;
  --average-soft:#fbf1de;
  --poor:        #b73c28;
  --poor-soft:   #fbeae7;
  --success:      #08863a;
  --success-soft: #e6f6ec;
  --info:        #5b4fb5;
  --info-soft:   #eeedf9;

  /* Form — weicher als zuvor, ohne ins Kindliche zu kippen */
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  /* Schatten warm eingefaerbt, mit Versatz und weichem Verlauf.
     Ein Schein ohne Versatz waere Dekoration, keine Tiefe. */
  --shadow-sm: 0 1px 2px rgba(16, 24, 20, .07);
  --shadow:    0 2px 5px rgba(16, 24, 20, .06), 0 10px 22px -10px rgba(16, 24, 20, .13);
  --shadow-lg: 0 3px 8px rgba(16, 24, 20, .07), 0 26px 52px -18px rgba(16, 24, 20, .20);
  --shadow-press: inset 0 1px 2px rgba(16, 24, 20, .15);

  /* Bewegung: schnell heraus, sanft aus. Die Feder bleibt den
     Momenten vorbehalten, in denen etwas erscheint. */
  --ease:        cubic-bezier(.22, .8, .28, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 130ms;
  --dur:      220ms;
  --dur-slow: 420ms;

  --header-h: 68px;
  --maxw: 1180px;

  /* Nunito deckt Latein, Kyrillisch und Vietnamesisch ab. Arabisch,
     Persisch, CJK, Thai und Devanagari faellt auf die Systemschrift
     zurueck — das ist richtig so, eine Latein-Schrift hat dort nichts
     zu suchen. */
  --font: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif,
          "Apple Color Emoji", "Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Arabisch / Farsi */
[dir="rtl"] body { font-family: var(--font); }
[dir="rtl"] .u-flip { transform: scaleX(-1); }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.024em;
  line-height: 1.14;
  color: var(--ink);
  text-wrap: balance;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }

/* ---------- Browseroberflaechen mitgestalten ----------
   Auswahl, Cursor, Bildlaufleiste und Fokusring kommen sonst
   ungestaltet aus dem Browser und gehoeren zu keinem Entwurf. */

::selection { background: var(--brand-soft); color: var(--brand-text); }
:root { accent-color: var(--brand); caret-color: var(--brand); }

* { scrollbar-width: thin; scrollbar-color: var(--surface-2) transparent; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--surface-2); border-radius: var(--r-full);
  border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--muted-2); background-clip: content-box; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Zahlen in Tabellen und Kennzahlen laufen sonst optisch auseinander */
table, .kpi__value, .ring__num, .metric__value, .dstat__value, .agent__tag { font-variant-numeric: tabular-nums; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.wrap-wide { max-width: 1320px; }

.hidden { display: none !important; }
.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;
}

/* ============================================================
   Header
   ============================================================ */

.header {
  position: sticky; top: 0; z-index: 60;
  height: var(--header-h);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(150%) blur(16px);
  border-bottom: 1px solid var(--line);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.header__inner {
  height: 100%; display: flex; align-items: center; gap: 28px;
}
.logo {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 21px; font-weight: 800; letter-spacing: -0.03em;
  color: var(--blue-600); flex-shrink: 0;
}
.logo__mark {
  width: 28px; height: 28px; flex-shrink: 0;
}
.logo__pf { color: var(--ink); letter-spacing: -.035em; }

.nav { display: flex; gap: 4px; margin-inline-start: 8px; }
.nav a {
  padding: 8px 14px; border-radius: var(--r-sm);
  font-size: 15px; font-weight: 500; color: var(--ink-2);
  transition: background .15s, color .15s;
}
.nav a:hover { background: var(--surface-2); color: var(--ink); }

.header__right { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }

/* Auf der Startseite liegt die Kopfleiste dunkel ueber dem Heldenbereich,
   damit oben kein heller Streifen ueber dem Nachtblau steht. Ist der Bereich
   unter ihr weggescrollt, wird sie wieder hell (app.js setzt data-hero). */
body[data-view="landing"][data-hero="in"] .header {
  background: var(--night); backdrop-filter: none;
  border-bottom-color: rgba(255, 255, 255, .08);
}
body[data-view="landing"][data-hero="in"] .header .logo { color: var(--blue); }
body[data-view="landing"][data-hero="in"] .header .logo__pf { color: #fff; }
body[data-view="landing"][data-hero="in"] .header .nav a,
body[data-view="landing"][data-hero="in"] .header .langpick__btn { color: rgba(255, 255, 255, .8); }
body[data-view="landing"][data-hero="in"] .header .nav a:hover,
body[data-view="landing"][data-hero="in"] .header .langpick__btn:hover { background: rgba(255, 255, 255, .08); color: #fff; }
body[data-view="landing"][data-hero="in"] .header .langpick__chev { color: rgba(255, 255, 255, .5); }
body[data-view="landing"][data-hero="in"] .header #headerCta {
  background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); color: #fff; box-shadow: none;
}
body[data-view="landing"][data-hero="in"] .header #headerCta:hover:not(:disabled) {
  background: rgba(2, 151, 222, .18); border-color: var(--blue); color: #fff;
}
body[data-view="landing"][data-hero="in"] .header :is(.logo, .nav a, .langpick__btn, #headerCta):focus-visible { outline-color: var(--blue-300); }

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--r);
  border: 1px solid transparent; background: none; cursor: pointer;
  font-size: 15px; font-weight: 700; letter-spacing: -.008em; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease);
}
/* Der Druck ist die halbe Miete: der Knopf sinkt ein und verliert
   gleichzeitig seinen Schatten, statt nur die Farbe zu wechseln. */
.btn:active:not(:disabled) { transform: translateY(1px) scale(.988); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

.btn--primary {
  background: var(--brand); color: #fff;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn--primary:hover:not(:disabled) {
  background: var(--brand-hover); transform: translateY(-1px);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn--primary:active:not(:disabled) {
  background: var(--brand-active);
  box-shadow: var(--shadow-press);
}

.btn--ghost {
  background: #fff; color: var(--ink);
  border-color: var(--line); box-shadow: var(--shadow-sm);
}
.btn--ghost:hover:not(:disabled) {
  border-color: var(--brand-border); background: var(--brand-softer);
  color: var(--brand-text); transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.btn--ghost:active:not(:disabled) { box-shadow: var(--shadow-press); }

.btn--quiet { background: transparent; color: var(--ink-2); }
.btn--quiet:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }

.btn--sm { padding: 8px 14px; font-size: 13.5px; border-radius: var(--r-sm); }
/* Nur ein Zeichen, kein Text (Teilen) */
.btn--icon { padding-inline: 9px; }
.btn--icon[aria-busy="true"] { opacity: .6; cursor: progress; }
.btn--lg { padding: 15px 30px; font-size: 16.5px; border-radius: var(--r-lg); }

.btn__arrow { font-size: 15px; line-height: 1; }

/* ============================================================
   Sprachauswahl
   ============================================================ */

.langpick { position: relative; }
.langpick__btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-radius: var(--r-sm);
  border: 1px solid transparent; background: none; cursor: pointer;
  font-size: 14.5px; font-weight: 600; color: var(--ink-2);
  transition: background .15s;
}
.langpick__btn:hover { background: var(--surface-2); }
.langpick__code { text-transform: uppercase; letter-spacing: .01em; }
.langpick__chev { transition: transform .2s; color: var(--muted-2); }
.langpick[data-open="true"] .langpick__chev { transform: rotate(180deg); }

.langpick__menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px);
  width: 310px; max-height: 430px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  display: none; flex-direction: column; overflow: hidden; z-index: 80;
}
.langpick[data-open="true"] .langpick__menu { display: flex; }

.langpick__search {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.langpick__search svg { color: var(--muted-2); flex-shrink: 0; }
.langpick__search input {
  flex: 1; border: 0; outline: 0; background: none;
  font: inherit; font-size: 15px; color: var(--ink);
}
.langpick__search input::placeholder { color: var(--muted); }

.langpick__list { overflow-y: auto; padding: 6px; flex: 1; }
.langpick__item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 12px; border: 0; background: none; cursor: pointer;
  border-radius: var(--r-sm); text-align: start;
  font-size: 15px; color: var(--ink-2); transition: background .12s;
}
.langpick__item:hover { background: var(--surface); }
.langpick__item[aria-selected="true"] { font-weight: 700; color: var(--ink); }
.langpick__flag { font-size: 19px; line-height: 1; flex-shrink: 0; }
.langpick__name { flex: 1; }
.langpick__check { color: var(--brand); opacity: 0; flex-shrink: 0; }
.langpick__item[aria-selected="true"] .langpick__check { opacity: 1; }
.langpick__foot {
  padding: 11px 16px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted-2); background: var(--surface);
}
.langpick__empty { padding: 24px 16px; text-align: center; color: var(--muted); font-size: 14px; }

/* ============================================================
   Hero
   ============================================================ */

/* Oben Nachtblau mit Sternen, darunter starkes Electric Blue in feinen
   senkrechten Rillen, wie hinter geriffeltem Glas; hinter den Rillen
   ziehen Lichtwellen langsam seitwaerts. Alles aus CSS, kein Bild. Am
   unteren Rand blendet der Bereich kurz in den hellen Rest aus. Das
   Licht ist in px vom unteren Rand bemessen (--light-h), damit Ueberschrift
   und Untertitel auf jeder Breite auf dem dunklen Teil stehen. */
.hero {
  --light-h: 375px;  /* unterer Abstand + Suchleiste + gut 60 px darueber */
  position: relative; overflow: hidden; isolation: isolate;
  padding: 76px 0 232px;
  text-align: center;
  /* Schwarz nur ganz oben unter der Kopfleiste, dann tiefes Nachtblau */
  background:
    radial-gradient(ellipse 80% 55% at 50% 38%, rgba(2, 151, 222, .13), transparent 70%),
    linear-gradient(to bottom, var(--night) 0%, var(--night-2) 22%, #072a48 48%, var(--night-3) 100%);
  color: #fff;
  caret-color: var(--blue);
}
.hero > .wrap { position: relative; z-index: 2; }
/* Gibt es Verlauf, rueckt die Liste unter der Leiste
   hoch: das Licht wird niedriger, damit beides im ersten Bildschirm steht. */
.hero:has(+ .recent #history:not(.hidden)) { padding-bottom: 116px; --light-h: 258px; }
.hero:has(+ .recent #history:not(.hidden))::after { height: 72px; }
.hero::after {
  content: ""; position: absolute; inset: auto 0 0; height: 96px; z-index: 1;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(240, 249, 255, .6) 55%, var(--bg));
  pointer-events: none;
}
.hero__sky { position: absolute; inset: 0; pointer-events: none; }

/* Sterne: einzelne Lichtpunkte in drei Rastern mit ungeraden Massen,
   damit sich kein Muster abzeichnet, dazu zwei kleine Haufen. Nur oben. */
.hero__sky {
  z-index: 0;
  background:
    radial-gradient(1.4px 1.4px at 16% 18%, #fff, transparent),
    radial-gradient(1px 1px at 17.4% 20.6%, #fff, transparent),
    radial-gradient(1px 1px at 15.2% 22.1%, rgba(255, 255, 255, .8), transparent),
    radial-gradient(1.2px 1.2px at 18.6% 16.4%, rgba(255, 255, 255, .9), transparent),
    radial-gradient(1px 1px at 14.1% 19.3%, rgba(255, 255, 255, .7), transparent),
    radial-gradient(1.4px 1.4px at 81% 26%, #fff, transparent),
    radial-gradient(1px 1px at 82.7% 24.2%, rgba(255, 255, 255, .85), transparent),
    radial-gradient(1px 1px at 79.6% 28.8%, rgba(255, 255, 255, .7), transparent),
    radial-gradient(1.2px 1.2px at 83.9% 29.4%, rgba(255, 255, 255, .9), transparent),
    radial-gradient(1px 1px at 37px 41px, rgba(255, 255, 255, .9), transparent),
    radial-gradient(1px 1px at 149px 113px, rgba(255, 255, 255, .6), transparent),
    radial-gradient(1.3px 1.3px at 211px 23px, #fff, transparent),
    radial-gradient(1px 1px at 83px 167px, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1px 1px at 61px 89px, rgba(255, 255, 255, .7), transparent),
    radial-gradient(1px 1px at 173px 61px, rgba(255, 255, 255, .45), transparent),
    radial-gradient(1.2px 1.2px at 293px 199px, rgba(255, 255, 255, .8), transparent),
    radial-gradient(1px 1px at 127px 251px, rgba(255, 255, 255, .55), transparent),
    radial-gradient(1px 1px at 19px 277px, rgba(255, 255, 255, .65), transparent);
  background-size:
    auto, auto, auto, auto, auto, auto, auto, auto, auto,
    229px 191px, 229px 191px, 229px 191px, 229px 191px,
    197px 241px, 197px 241px,
    331px 307px, 331px 307px, 331px 307px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 26%, transparent 52%);
  mask-image: linear-gradient(to bottom, #000 0, #000 26%, transparent 52%);
}
/* Einige Sterne funkeln langsam; bei reduzierter Bewegung stehen sie still */
.hero__sky::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(1.5px 1.5px at 101px 59px, #fff, transparent),
    radial-gradient(1.3px 1.3px at 263px 181px, var(--blue-100), transparent),
    radial-gradient(1.2px 1.2px at 47px 223px, #fff, transparent);
  background-size: 307px 263px;
  animation: hero-twinkle 7s ease-in-out infinite alternate;
}
@keyframes hero-twinkle { from { opacity: .2; } to { opacity: 1; } }

/* Licht: ueber die ganze Breite steigt Electric Blue auf, kraeftig ab
   Hoehe der Suchleiste, mit kleinem hellen Kern in der Mitte unten. Die
   Maske schneidet es in schmale Rillen; eine zweite, lange Welle laesst
   die Rillen unterschiedlich hell stehen. */
.hero__light {
  position: absolute; inset: auto 0 0; height: var(--light-h); z-index: 0;
  overflow: hidden; pointer-events: none;
  background:
    radial-gradient(ellipse 30% 34% at 50% 100%, rgba(205, 238, 255, .85) 0%, rgba(92, 196, 242, .45) 50%, rgba(92, 196, 242, 0) 100%),
    linear-gradient(to bottom, rgba(2, 151, 222, 0) 0, rgba(2, 151, 222, .5) 18%, rgba(2, 151, 222, .95) 40%, var(--blue) 72%, #22a6e8 100%);
  -webkit-mask-image:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .3) 0, #000 5px, rgba(0, 0, 0, .8) 8px, rgba(0, 0, 0, .3) 11px),
    repeating-linear-gradient(90deg, #000 0, rgba(0, 0, 0, .74) 53px, #000 97px, rgba(0, 0, 0, .85) 151px, #000 211px);
  mask-image:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .3) 0, #000 5px, rgba(0, 0, 0, .8) 8px, rgba(0, 0, 0, .3) 11px),
    repeating-linear-gradient(90deg, #000 0, rgba(0, 0, 0, .74) 53px, #000 97px, rgba(0, 0, 0, .85) 151px, #000 211px);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Lebendig: hinter den feststehenden Rillen ziehen zwei Lichtwellen in
   entgegengesetzter Richtung. Jede ist nahtlos — die Ebene ist doppelt so
   breit wie ihre Kachel und wandert genau eine Kachel weit —, und weil
   Kachellaenge und Dauer verschieden sind, wiederholt sich das Zusammenspiel
   praktisch nie. Nur transform: laeuft auf der Grafikkarte, ohne Neuzeichnen. */
.hero__flow {
  position: absolute; top: 0; bottom: 0; left: 0; width: 200%;
  background: linear-gradient(90deg,
      rgba(170, 226, 255, 0) 0%, rgba(170, 226, 255, .6) 6%, rgba(170, 226, 255, 0) 13%,
      rgba(170, 226, 255, .28) 22%, rgba(170, 226, 255, 0) 29%,
      rgba(170, 226, 255, .75) 39%, rgba(170, 226, 255, 0) 48%,
      rgba(170, 226, 255, .32) 57%, rgba(170, 226, 255, 0) 64%,
      rgba(170, 226, 255, .62) 76%, rgba(170, 226, 255, 0) 85%,
      rgba(170, 226, 255, .38) 92%, rgba(170, 226, 255, 0) 100%)
    0 0 / 50% 100% repeat-x;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 42%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 42%);
  animation: hero-flow 58s linear infinite;
}
/* Gegenwelle: dunklere Taeler, 130 % der Breite je Kachel, andere Dauer */
.hero__flow--back {
  width: 260%;
  background: linear-gradient(90deg,
      rgba(1, 44, 92, 0) 0%, rgba(1, 44, 92, .55) 9%, rgba(1, 44, 92, 0) 19%,
      rgba(1, 44, 92, .35) 33%, rgba(1, 44, 92, 0) 44%,
      rgba(1, 44, 92, .6) 58%, rgba(1, 44, 92, 0) 70%,
      rgba(1, 44, 92, .4) 84%, rgba(1, 44, 92, 0) 100%)
    0 0 / 50% 100% repeat-x;
  animation: hero-flow-back 43s linear infinite;
}
@keyframes hero-flow { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes hero-flow-back { from { transform: translateX(-50%); } to { transform: translateX(0); } }
/* Ist der Bereich weggescrollt, ruhen die Wellen; bei reduzierter Bewegung stehen sie */
body[data-hero="out"] .hero__flow,
body[data-hero="out"] .hero__sky::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hero__sky::after { animation: none; opacity: .7; }
  .hero__flow { animation: none; }
}

/* Schlichte Zeile, keine Pille mit Rahmen — Sprechblasen lassen die Seite nach KI-Baukasten aussehen (Wunsch des Nutzers) */
.hero__badge {
  display: block; margin-bottom: 26px;
  font-size: 14px; font-weight: 600; color: var(--blue-300);
}
.hero__title {
  font-size: clamp(40px, 7.2vw, 76px);
  line-height: 1.03; letter-spacing: -0.035em;
  max-width: 15ch; margin: 0 auto 22px;
  color: #fff;
}
.hero__title em { font-style: normal; color: var(--blue); }

.hero__sub {
  font-size: clamp(16.5px, 2.1vw, 19.5px);
  color: rgba(255, 255, 255, .78); max-width: 60ch; margin: 0 auto 38px; line-height: 1.6;
  text-shadow: 0 1px 14px rgba(2, 7, 10, .6);
}

/* ORANGE-VERSUCH Anfang — zum Entfernen diesen Block bis „ORANGE-VERSUCH Ende“
   loeschen, dazu in index.html die Zeile <div class="hero__orange"></div>,
   das Attribut data-orange="on" samt Kommentar darueber und in app.js die
   beiden Zeilen mit „ORANGE-VERSUCH“. Die Seite bleibt dann blau und vollstaendig. */
:root {
  --orange:        #fc734d;  /* Cantaloupe Orange: weisse Schrift nur gross, 2,7 : 1 */
  --orange-light:  #ffb497;
}
/* Orangene Akzente ueber die ganze Breite: einzelne gluehende Rillenbuendel,
   die langsam mitwandern (Kachel 120 % der Breite, eigene Dauer), dazu ein
   warmer Saum am unteren Rand von Kante zu Kante. Blau bleibt die Hauptfarbe. */
.hero__orange { display: none; position: absolute; top: 0; bottom: 0; left: 0; width: 240%; }
.hero[data-orange="on"] .hero__orange {
  display: block;
  background:
    linear-gradient(90deg,
      rgba(252, 115, 77, 0) 0%, rgba(252, 115, 77, 0) 7%, rgba(252, 115, 77, .95) 11.5%, rgba(255, 180, 151, 1) 13.5%, rgba(252, 115, 77, .9) 15%, rgba(252, 115, 77, 0) 19%,
      rgba(252, 115, 77, 0) 33%, rgba(252, 115, 77, .75) 38%, rgba(252, 115, 77, 0) 43%,
      rgba(252, 115, 77, 0) 54%, rgba(252, 115, 77, .95) 59.5%, rgba(255, 180, 151, 1) 61.5%, rgba(252, 115, 77, .9) 63%, rgba(252, 115, 77, 0) 68%,
      rgba(252, 115, 77, 0) 79%, rgba(252, 115, 77, .7) 84%, rgba(252, 115, 77, 0) 89%, rgba(252, 115, 77, 0) 100%)
      0 0 / 50% 100% repeat-x,
    linear-gradient(to top, color-mix(in srgb, var(--orange) 70%, transparent) 0, color-mix(in srgb, var(--orange) 28%, transparent) 24%, transparent 46%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .35) 30%, #000 62%);
  mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .35) 30%, #000 62%);
  animation: hero-flow 71s linear infinite reverse;
}
body[data-hero="out"] .hero[data-orange="on"] .hero__orange { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .hero[data-orange="on"] .hero__orange { animation: none; } }
/* ORANGE-VERSUCH Ende */

.searchbar {
  display: flex; gap: 10px; max-width: 620px; margin: 0 auto;
  background: #fff; padding: 8px; border-radius: var(--r-lg);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  transition: border-color .18s, box-shadow .18s;
}
.searchbar {
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.searchbar:focus-within {
  border-color: var(--brand-light); transform: translateY(-2px);
  box-shadow: 0 0 0 4px var(--brand-soft), var(--shadow-lg);
}
.searchbar__icon { display: flex; align-items: center; padding-inline-start: 12px; color: var(--muted-2); }
.searchbar input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  font: inherit; font-size: 16.5px; padding: 12px 6px; color: var(--ink);
}
.searchbar input::placeholder { color: var(--muted); }

/* Im Heldenbereich: weisse Leiste mit blauem Schein, Hauptknopf in Electric Blue */
.hero .searchbar {
  border-color: rgba(255, 255, 255, .2);
  box-shadow: 0 2px 6px rgba(2, 7, 10, .3), 0 24px 60px -18px rgba(2, 151, 222, .55);
}
.hero .searchbar:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(2, 151, 222, .38), 0 24px 60px -18px rgba(2, 151, 222, .6);
}
.hero .btn--primary {
  background: var(--blue-600);
  box-shadow: 0 1px 2px rgba(2, 7, 10, .25), 0 6px 18px -6px rgba(2, 151, 222, .7), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.hero .btn--primary:hover:not(:disabled) {
  background: var(--blue-700);
  box-shadow: 0 2px 4px rgba(2, 7, 10, .25), 0 10px 26px -6px rgba(2, 151, 222, .8), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.hero .btn--primary:active:not(:disabled) { background: var(--blue-700); box-shadow: var(--shadow-press); }
/* Beide Fokusziele liegen in der weissen Leiste: dunkles Blau, 5,9 : 1 auf Weiss */
.hero .searchbar :focus-visible { outline-color: var(--blue-700); }

.hero__error {
  max-width: 620px; margin: 14px auto 0; padding: 11px 16px;
  background: var(--poor-soft); border: 1px solid #f0cfc8; border-radius: var(--r);
  color: var(--poor); font-size: 14.5px; text-align: start;
}

/* Verlauf letzter Analysen */
.recent { position: relative; z-index: 1; }
.history { max-width: 620px; margin: 26px auto 0; text-align: start; }
.history__head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted-2); margin-bottom: 9px;
}
.history__clear { border: 0; background: none; cursor: pointer; color: var(--muted-2); font-size: 12.5px; font-weight: 600; }
.history__clear:hover { color: var(--poor); }
.history__list { display: flex; flex-wrap: wrap; gap: 8px; }
.history__item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: var(--r-full);
  background: #fff; border: 1px solid var(--line); cursor: pointer;
  font-size: 13.5px; color: var(--ink-2); transition: border-color .15s, background .15s;
}
.history__item:hover { border-color: var(--brand-border); background: var(--brand-softer); }
.history__score {
  min-width: 26px; height: 20px; padding: 0 6px; border-radius: var(--r-full);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 800;
}

/* ============================================================
   Sektionen (Landing)
   ============================================================ */

.section { padding: 82px 0; }

.section__head { text-align: center; max-width: 640px; margin: 0 auto 52px; }
.section__title { font-size: clamp(28px, 4vw, 42px); letter-spacing: -0.03em; margin-bottom: 14px; }
.section__sub { font-size: 17px; color: var(--muted); }

/* FAQ */
.faq { max-width: 780px; margin: 0 auto; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 4px; background: none; border: 0; cursor: pointer;
  font-size: 17.5px; font-weight: 700; text-align: start; color: var(--ink);
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ''; }
.faq__q:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 6px; }
.faq__q:hover { color: var(--brand-text); }
.faq__icon { flex-shrink: 0; color: var(--muted-2); transition: transform .22s; }
.faq__item[open] .faq__icon { transform: rotate(45deg); color: var(--brand); }
.faq__a { padding: 0 4px 24px; font-size: 15.5px; color: var(--muted); line-height: 1.7; max-width: 68ch; }

/* Footer */
.footer { background: var(--surface); border-top: 1px solid var(--line); padding: 56px 0 34px; }
.footer__grid { display: grid; grid-template-columns: 1.6fr repeat(2, 1fr); gap: 40px; margin-bottom: 40px; }
.footer__brand p { font-size: 14.5px; color: var(--muted); max-width: 34ch; margin-top: 14px; line-height: 1.6; }
.footer h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted-2); margin-bottom: 14px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer li a { font-size: 14.5px; color: var(--ink-2); }
.footer li a:hover { color: var(--brand-text); }
.footer__bottom {
  border-top: 1px solid var(--line); padding-top: 24px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--muted-2);
}

/* ============================================================
   Fortschritt
   ============================================================ */

.progress { padding: 90px 0 110px; }
.progress__inner { max-width: 620px; margin: 0 auto; }
.progress__title { font-size: clamp(26px, 4vw, 36px); margin-bottom: 10px; letter-spacing: -0.03em; }
.progress__sub { color: var(--muted); font-size: 16px; margin-bottom: 38px; }
/* Wartet der Scan in der Warteschlange: derselbe Platz, nur kräftiger — kein Kasten */
.progress__sub--queue { color: var(--ink); font-weight: 500; }

.progress__bar { height: 6px; background: var(--surface-2); border-radius: var(--r-full); overflow: hidden; margin-bottom: 34px; }
.progress__fill {
  height: 100%; width: 0; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--brand), var(--brand-light));
  transition: width .5s cubic-bezier(.4,0,.2,1);
}

.steplist { display: flex; flex-direction: column; gap: 2px; }
.steprow {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 14px; border-radius: var(--r);
  transition: background .2s;
}
.steprow[data-status="running"] { background: var(--brand-softer); }
.steprow__dot {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--muted-2);
  border: 2px solid transparent; transition: all .25s;
}
.steprow[data-status="running"] .steprow__dot {
  background: #fff; border-color: var(--brand); color: var(--brand);
  animation: pulse 1.5s ease-in-out infinite;
}
.steprow[data-status="done"] .steprow__dot {
  background: var(--brand); color: #fff;
  animation: step-pop var(--dur) var(--ease-out);
}
@keyframes step-pop {
  from { transform: scale(.55); }
  to   { transform: scale(1); }
}
.steprow[data-status="error"] .steprow__dot { background: var(--poor); color: #fff; }
.steprow[data-status="warn"] .steprow__dot { background: var(--average); color: #fff; }
.steprow[data-status="skipped"] .steprow__dot { background: var(--surface-2); color: var(--muted-2); }

@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(32,121,200,.32); }
  50%     { box-shadow: 0 0 0 7px rgba(32,121,200,0); }
}

.progress__actions { margin-top: 28px; }
.steprow__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.steprow__label { font-size: 15.5px; font-weight: 500; color: var(--muted); }
.steprow[data-status="running"] .steprow__label,
.steprow[data-status="done"] .steprow__label { color: var(--ink); font-weight: 600; }
.steprow__meta { min-height: 1.4em; font-size: 13px; color: var(--muted-2); font-variant-numeric: tabular-nums; }

.spinner {
  width: 12px; height: 12px; border: 2px solid currentColor;
  border-top-color: transparent; border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   Report — Kopf
   ============================================================ */

.report { display: none; padding-bottom: 80px; }
.report.is-active { display: block; }

.rhead { background: var(--surface); border-bottom: 1px solid var(--line); padding: 26px 0 0; }

.rhead__top { display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.rhead__title { font-size: clamp(26px, 3.6vw, 38px); letter-spacing: -0.03em; margin-bottom: 8px; }
.rhead__url {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14.5px; color: var(--muted); word-break: break-all;
}
.rhead__url a { color: var(--brand-text); font-weight: 600; }
.rhead__url a:hover { text-decoration: underline; }
.rhead__urlfull { display: none; }
.rhead__actions { margin-inline-start: auto; display: flex; gap: 9px; flex-wrap: wrap; }

.segmented {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--surface-2); border-radius: var(--r-sm);
}
.segmented button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 15px; border: 0; border-radius: 6px; background: none; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--muted); transition: all .15s;
}
.segmented button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }

.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs { padding: 4px 0 10px; }
.tab {
  position: relative;
  padding: 10px 16px; border: 0; background: none; cursor: pointer;
  border-radius: var(--r-full);
  font-size: 15px; font-weight: 700; color: var(--muted); white-space: nowrap;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.tab:hover { color: var(--ink); background: var(--surface); }
.tab[aria-selected="true"] { color: var(--brand-text); background: var(--brand-soft); }
.tab__badge {
  display: inline-block; margin-inline-start: 6px; padding: 1px 7px;
  border-radius: var(--r-full); background: var(--surface-2);
  font-size: 11.5px; font-weight: 800; color: var(--muted);
}
.tab[aria-selected="true"] .tab__badge { background: var(--brand-soft); color: var(--brand-text); }
.tab__badge--alert { background: var(--poor-soft); color: var(--poor); }

.panel { display: none; padding-top: 34px; }
.panel.is-active { display: block; }

/* ─── Der Bericht erscheint ───
   Ein einziger gestalteter Moment, nicht überall dasselbe Einblenden:
   nach dem letzten Haken der Fortschrittsliste steigen die Karten des
   sichtbaren Bereichs kurz nacheinander auf. Sie starten sichtbar, nur
   leicht versetzt — bleibt das Skript aus, steht trotzdem alles da. */

.panel.is-active > * > .card,
.panel.is-active > .card,
.panel.is-active > * > .kpi {
  animation: rise var(--dur-slow) var(--ease) backwards;
}
.panel.is-active > *:nth-child(1) > .card { animation-delay: 0ms; }
.panel.is-active > *:nth-child(2) > .card { animation-delay: 55ms; }
.panel.is-active > *:nth-child(3) > .card { animation-delay: 110ms; }
.panel.is-active > *:nth-child(4) > .card { animation-delay: 165ms; }
.panel.is-active > *:nth-child(n+5) > .card { animation-delay: 210ms; }

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   Karten & Raster
   ============================================================ */

.card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 24px;
  box-shadow: var(--shadow-sm);
}
.card--pad-lg { padding: 30px; }
.card--flat { background: var(--surface); border-color: transparent; }

.card__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.card__title { font-size: 17.5px; letter-spacing: -0.015em; }
.card__sub { font-size: 14px; color: var(--muted); margin-top: 5px; line-height: 1.55; }
.card__aside { margin-inline-start: auto; flex-shrink: 0; }

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); align-items: start; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--sidebar { grid-template-columns: minmax(0,1.9fr) minmax(0,1fr); align-items: start; }
.stack { display: flex; flex-direction: column; gap: 20px; }

/* KPI-Kacheln */
.kpi {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px 22px; box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.kpi__top { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.kpi__icon {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand-text);
}
.kpi__label { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.kpi__value { font-size: 33px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; }
.kpi__foot { margin-top: 9px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }

/* Score-Ring */
.ring { position: relative; display: inline-flex; }
.ring svg { transform: rotate(-90deg); }
.ring__track { stroke: var(--surface-2); }
.ring__bar { transition: stroke-dashoffset 1s cubic-bezier(.4,0,.2,1); stroke-linecap: round; }
.ring__center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.ring__num { font-size: 40px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.ring--sm .ring__num { font-size: 23px; }

.is-good  { color: var(--good); }
.is-average { color: var(--average); }
.is-poor  { color: var(--poor); }
.is-unknown { color: var(--muted-2); }

.scoreboard { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; }
.scoreboard__bars { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 13px; }
.sbar__row { display: flex; align-items: center; gap: 13px; font-size: 14px; }
.sbar__label { width: 122px; flex-shrink: 0; color: var(--ink-2); font-weight: 500; }
.sbar__track { flex: 1; height: 8px; background: var(--surface-2); border-radius: var(--r-full); overflow: hidden; }
.sbar__fill {
  display: block; height: 100%; border-radius: var(--r-full);
  background: currentColor; transition: width .9s var(--ease);
}
.sbar__val { width: 38px; text-align: end; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--r-full);
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.badge--good { background: var(--good-soft); color: var(--brand-text); }
.badge--average { background: var(--average-soft); color: var(--average); }
.badge--poor { background: var(--poor-soft); color: var(--poor); }
.badge--info { background: var(--info-soft); color: var(--info); }
.badge--neutral { background: var(--surface-2); color: var(--muted); }
.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* Metrik-Kacheln */
/* Jede Kachel teilt die Zeilen mit ihren Nachbarn (subgrid): Name, Zahl und Hinweis stehen in jeder Kachel auf einer Linie, auch wenn ein Name umbricht */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); column-gap: 16px; row-gap: 0; margin-block-end: -16px; }
.metric { display: grid; grid-template-rows: subgrid; grid-row: span 2; align-content: start; margin-block-end: 16px;
  border: 1px solid var(--line); border-radius: var(--r); padding: 18px; background: #fff; }
.metrics--3 .metric { grid-row: span 3; }
.metric__top { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.metric__dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.metric__name { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.metric__abbr { font-size: 11px; font-weight: 800; color: var(--muted-2); margin-inline-start: auto; letter-spacing: .04em; }
.metric__value { font-size: 27px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.metric__help { font-size: 12.5px; color: var(--muted); margin-top: 9px; line-height: 1.5; }
/* Herkunft eines Werts, der nicht aus dem Labor stammt (INP: echte Besucher) — steht auch bei gutem Wert */
.metric__source { font-size: 12px; color: var(--muted-2); margin-top: 9px; line-height: 1.5; }

/* Fragezeichen mit Sprechblase (Core Web Vitals: Ziele) */
.card__aside:has(.tip) { display: flex; align-items: center; gap: 10px; }
.tip { position: relative; display: inline-flex; }
.tip__mark { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--muted-2); color: var(--muted); font-size: 12.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; cursor: help; line-height: 1; }
.tip:hover .tip__mark, .tip:focus .tip__mark { border-color: var(--ink-2); color: var(--ink-2); }
.tip__box { position: absolute; top: 100%; inset-inline-end: 0; padding-top: 8px; z-index: 30; width: 260px; display: block;
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .12s, transform .12s, visibility .12s; }
.tip:hover .tip__box, .tip:focus .tip__box, .tip:focus-within .tip__box { opacity: 1; visibility: visible; transform: none; }
.tip__text { display: block; background: var(--ink); color: #e8edf3; border-radius: var(--r) var(--r) 0 0; padding: 12px 14px 6px; font-size: 12.5px; line-height: 1.5; }
.tip__list { margin: 0; list-style: none; background: var(--ink); color: #e8edf3; border-radius: 0 0 var(--r) var(--r); box-shadow: var(--shadow-lg);
  padding: 4px 14px 12px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tip__list li { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.tip__list li span { font-weight: 700; }

/* Echte Besucher je Gerät */
.field__head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 14px; color: var(--ink-2); }
.field__none { font-size: 13.5px; color: var(--muted); }
.field__source { font-size: 12px; color: var(--muted-2); }

/* Filmstreifen */
.filmstrip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; }
.filmstrip__item { flex-shrink: 0; text-align: center; }
.filmstrip__item img {
  width: 84px; border-radius: 7px; border: 1px solid var(--line);
  background: var(--surface);
}
.filmstrip__time { font-size: 11px; color: var(--muted-2); margin-top: 6px; font-variant-numeric: tabular-nums; }

/* SERP-Vorschau */
.serp {
  border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px;
  background: #fff; max-width: 620px;
}
.serp__crumb { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.serp__fav {
  width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; font-size: 11px;
  color: var(--muted); flex-shrink: 0; overflow: hidden;
}
.serp__site { font-size: 13px; color: var(--ink-2); line-height: 1.25; }
.serp__path { font-size: 12.5px; color: var(--muted); }
.serp__title { font-size: 20px; color: #1a0dab; line-height: 1.3; margin: 3px 0 4px; font-weight: 400; }
.serp__desc { font-size: 14px; color: #4d5156; line-height: 1.58; }
.serp__missing { color: var(--poor); font-style: italic; }

/* Aufklappbare Kennzahl — geschlossen wie eine Kachel, offen mit Liste */
.dstat {
  background: var(--surface); border-radius: var(--r);
  border: 1px solid transparent; transition: border-color .12s, background .12s;
}
.dstat:hover { border-color: var(--brand-border); background: var(--brand-softer); }
/* Offen die ganze Zeile: URLs brauchen Breite, in einem Drittel brechen sie unlesbar um */
.dstat[open] { grid-column: 1 / -1; background: var(--brand-softer); border-color: var(--brand-border); }

.dstat__head { padding: 14px 16px; cursor: pointer; list-style: none; }
.dstat__head::-webkit-details-marker { display: none; }
.dstat__label {
  display: flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--muted); margin-bottom: 5px;
}
.dstat__chev { transition: transform .15s; flex-shrink: 0; }
.dstat[open] .dstat__chev { transform: rotate(180deg); }
.dstat__value { font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--average); }

.dstat__list {
  margin: 0; padding: 0 16px 14px 34px;
  max-height: 260px; overflow-y: auto;
  font-size: 13px; line-height: 1.7; color: var(--ink-2);
  overflow-wrap: anywhere;
}
.dstat__list li { padding: 1px 0; }

/* Tabellen */
.tablewrap { overflow-x: auto; margin: 0 -24px; padding: 0 24px; }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th {
  text-align: start; padding: 9px 12px; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .055em; color: var(--muted-2);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.t td { padding: 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.t tbody tr:last-child td { border-bottom: 0; }
table.t tbody tr:hover { background: var(--surface); }
table.t .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.t__mono { font-family: var(--mono); font-size: 12.5px; }
.t__trunc { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Datenzeilen (Key/Value) */
.rows { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--line-2);
}
.row:last-child { border-bottom: 0; }
.row__label { font-size: 14px; color: var(--muted); flex-shrink: 0; min-width: 170px; }
.row__value { font-size: 14px; color: var(--ink); margin-inline-start: auto; text-align: end; word-break: break-word; }
.row__value--mono { font-family: var(--mono); font-size: 12.5px; }

/* Checkliste */
.checklist { display: flex; flex-direction: column; gap: 2px; }
.check { display: flex; align-items: flex-start; gap: 11px; padding: 10px 0; font-size: 14.5px; }
.check__icon {
  width: 19px; height: 19px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
}
.check--ok .check__icon { background: var(--good-soft); color: var(--good); }
.check--warn .check__icon { background: var(--average-soft); color: var(--average); }
.check--bad .check__icon { background: var(--poor-soft); color: var(--poor); }
.check--off .check__icon { background: var(--surface-2); color: var(--muted-2); }
.check__text { flex: 1; color: var(--ink-2); line-height: 1.5; }
.check__text small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }

/* Hinweisbox */
.notice {
  display: flex; gap: 13px; padding: 16px 18px;
  border-radius: var(--r); border: 1px solid var(--brand-border);
  background: var(--brand-soft); font-size: 14.5px; color: var(--ink-2); line-height: 1.6;
}
.notice__icon { flex-shrink: 0; color: var(--brand-text); margin-top: 1px; }
.notice--warn { background: var(--average-soft); border-color: #f0dcb4; }
.notice--warn .notice__icon { color: var(--average); }
.notice--info { background: var(--info-soft); border-color: #cfe0f8; }
.notice--info .notice__icon { color: var(--info); }
.notice strong { color: var(--ink); }
.notice a { color: var(--brand-text); font-weight: 600; text-decoration: underline; }

.empty { padding: 22px 20px; text-align: center; color: var(--muted); font-size: 15px; }
.empty__icon { color: var(--brand); margin-bottom: 8px; }

/* ============================================================
   Empfehlungen
   ============================================================ */

.recbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 18px 22px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); margin-bottom: 20px;
}
.recbar__progress { flex: 1; min-width: 200px; }
/* Aufgaben: Leiste ohne Kasten und mit kleineren Knöpfen — sie kostet sonst eine ganze Karte auf der ersten Bildschirmseite */
.recbar--flat { padding: 0; background: none; border: 0; border-radius: 0; margin-bottom: 14px; gap: 10px 14px; }
.recbar--flat .recbar__label { margin-bottom: 5px; font-size: 13px; }
.recbar--flat .recbar__track { height: 5px; }
.recbar--flat .chip { padding: 5px 11px; font-size: 13px; }

.recbar__label { font-size: 13.5px; color: var(--muted); margin-bottom: 7px; font-weight: 600; }
.recbar__track { height: 7px; background: var(--surface-2); border-radius: var(--r-full); overflow: hidden; }
.recbar__fill { height: 100%; background: var(--brand); border-radius: var(--r-full); transition: width .5s ease; }
.recbar__filters { display: flex; gap: 7px; flex-wrap: wrap; }

.chip {
  padding: 7px 14px; border-radius: var(--r-full);
  border: 1px solid var(--line); background: #fff; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--ink-2); transition: all .15s;
}
.chip:hover { border-color: var(--brand-border); background: var(--brand-softer); color: var(--brand-text); }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

.reclist { display: flex; flex-direction: column; gap: 12px; }

.rec {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; transition: border-color .18s, box-shadow .18s, opacity .25s;
}
.rec:hover { border-color: #d9dfe6; box-shadow: var(--shadow-sm); }
.rec[data-done="true"] { opacity: .5; }
.rec[data-done="true"] .rec__title { text-decoration: line-through; }

.rec__head {
  display: flex; align-items: flex-start; gap: 14px; width: 100%;
  padding: 18px 20px; background: none; border: 0; cursor: pointer; text-align: start;
  /* Den vorgegebenen Aufklapp-Pfeil ausblenden — wir zeichnen einen eigenen */
  list-style: none;
}
.rec__head::-webkit-details-marker { display: none; }
.rec__head::marker { content: ''; }
.rec__head:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: var(--r-lg); }
.rec__sev {
  width: 4px; align-self: stretch; border-radius: 2px; flex-shrink: 0; min-height: 38px;
}
.rec__sev--critical { background: var(--poor); }
.rec__sev--high     { background: var(--poor); }
/* Gelb nur als Streifen: die Schwere steht zusätzlich als Zwischentitel da (WCAG 1.4.1) */
.rec__sev--medium   { background: #d9a300; }
.rec__sev--low      { background: var(--muted); }
.rec__sev--note     { background: var(--line); }

/* Überblick: oben eine ruhige Karte (Ring · Urteil · wie die Note entsteht), darunter sechs Kacheln. Nichts klappt auf. */
.overview { display: flex; flex-direction: column; gap: 18px; }
.taskhead { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 28px; }
.taskhead__top { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(250px, 330px); align-items: center; gap: 30px; }
/* Die Note füllt den Ring: groß, mittig, ohne Buchstabennote */
.taskhead__ring .ring__num { font-size: 50px; letter-spacing: -0.045em; }
.taskhead__verdict { min-width: 0; }
.taskhead__sentence { font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.3; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
.taskhead__go { margin-top: 8px; margin-inline-start: -14px; }
.taskhead__lines { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.taskhead__lines:empty { display: none; }
.taskhead__parts { padding-inline-start: 28px; border-inline-start: 1px solid var(--line); }
.taskhead__partsTitle { font-size: 13px; font-weight: 700; color: var(--muted); margin: 0 0 10px; letter-spacing: 0; }
.taskhead__parts .scoreboard__bars { gap: 7px; min-width: 0; }
.taskhead__how { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.taskhead__howTitle { font-size: 12.5px; font-weight: 700; color: var(--muted); margin: 0 0 6px; letter-spacing: 0; }
.taskhead__howList { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 900px) {
  .taskhead__top { grid-template-columns: auto minmax(0, 1fr); gap: 22px; }
  .taskhead__parts { grid-column: 1 / -1; justify-self: stretch; padding: 18px 0 0; border-inline-start: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .taskhead { padding: 20px 18px; }
  .taskhead__top { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 16px; }
  .taskhead__sentence { font-size: 19px; }
}

/* Je Bereich eine Kachel: Kennzahl, Urteil, bis zu zwei gute und zwei schlechte Punkte. Der Name ist der Knopf und deckt die Kachel ab. */
.glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.glance__tile {
  position: relative; display: flex; flex-direction: column; gap: 2px;
  padding: 18px 20px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color .15s, box-shadow .15s;
}
.glance__tile:hover { border-color: var(--brand-border); box-shadow: var(--shadow-sm); }
.glance__title {
  align-self: flex-start; padding: 0; border: 0; background: none; cursor: pointer; text-align: start;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--ink-2);
}
.glance__title::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.glance__title:focus-visible { outline: none; }
.glance__title:focus-visible::after { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-lg); }
.glance__figure { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; margin-top: 6px; font-variant-numeric: tabular-nums; }
.glance__label { font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--muted-2); margin-inline-start: 8px; }
.glance__verdict { font-size: 13.5px; font-weight: 600; color: var(--good); margin: 2px 0 0; }
.glance__tile[data-tone="average"] .glance__verdict { color: var(--average); }
.glance__tile[data-tone="poor"] .glance__verdict { color: var(--poor); }
.glance__tile[data-tone="off"] .glance__verdict { color: var(--muted); }
.glance__points {
  list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line-2);
  display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; line-height: 1.4; color: var(--ink-2);
}
.glance__point { display: flex; align-items: flex-start; gap: 8px; }
.glance__point svg { flex-shrink: 0; margin-top: 3px; }
.glance__point--good svg { color: var(--good); }
.glance__point--bad svg { color: var(--poor); }
.glance__more { padding-inline-start: 20px; font-size: 13px; color: var(--muted); }
@media (max-width: 900px) { .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .glance { grid-template-columns: minmax(0, 1fr); } .glance__figure { font-size: 26px; } }

.rec__main { flex: 1; min-width: 0; }
.rec__title { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.4; margin-bottom: 8px; }
/* Aufgabenkarte: zwei Zeilen — Titel mit Marke, darunter der erste Satz der Lösung */
.reclist--tasks { gap: 10px; }
.reclist__group { margin: 10px 0 0; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--muted); }
.reclist__group:first-child { margin-top: 0; }
.rec--task > .rec__head { padding-block: 13px; }
.rec__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
.rec__top > .rec__title { flex: 1 1 260px; margin-bottom: 0; }
.rec__tags { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.rec__aside { display: flex; align-items: center; justify-content: flex-end; gap: 7px; min-width: 0; max-width: 100%; margin-top: 1px; }
.rec__tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-full);
  font-size: 11.5px; font-weight: 700; background: var(--surface-2); color: var(--muted);
}
.rec__tag--critical { background: var(--poor-soft); color: var(--poor); }
.rec__tag--high     { background: #fdf1e8; color: #c2691f; }
.rec__tag--medium   { background: var(--average-soft); color: var(--average); }
.rec__tag--low      { background: var(--surface-2); color: var(--muted); }
/* Verweis ohne Marke („Geprüft unter …“): schlichter Text, keine Kapsel */
.rec__ref { font-size: 12.5px; color: var(--muted); }

.rec__where {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  min-width: 0; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Erster Satz der Lösung — nur zugeklappt; offen steht die ganze Lösung darunter */
.rec__lead { display: block; margin-top: 4px; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.rec[open] .rec__lead { display: none; }
/* Nutzen der Aufgabe: leiser Text, keine Marke */
.rec__benefit { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }

.rec__chev { flex-shrink: 0; color: var(--muted-2); transition: transform .22s; margin-top: 3px; }
.rec[open] .rec__chev { transform: rotate(180deg); }

.rec__body { padding: 0 20px 20px 38px; }
[dir="rtl"] .rec__body { padding: 0 38px 20px 20px; }

.rec__block { margin-bottom: 18px; }
.rec__block:last-child { margin-bottom: 0; }
.rec__h {
  font-size: 11.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted-2); margin-bottom: 7px;
}
.rec__text { font-size: 14.5px; color: var(--ink-2); line-height: 1.68; white-space: pre-line; }
.rec__fix {
  background: var(--brand-softer); border: 1px solid var(--brand-border);
  border-radius: var(--r); padding: 15px 17px;
}
.rec__fix .rec__h { color: var(--brand-text); }
.rec__fix .rec__text { color: var(--ink); }

.rec__evidence-more { color: var(--ink-2); font-style: italic; }
.rec__evidence { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.rec__evidence li {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  background: var(--surface); border-radius: 6px; padding: 7px 10px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rec__foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line-2);
}
.rec__source { font-size: 12px; color: var(--muted-2); margin-inline-start: auto; }

.savings {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-full);
  background: var(--good-soft); color: var(--brand-text);
  font-size: 11.5px; font-weight: 700;
}

/* Keyword-Abdeckung */
.coverage { display: flex; flex-wrap: wrap; gap: 9px; }
.coverage__item {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--r-full);
  border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--muted);
}
.coverage__item[data-ok="true"] { border-color: var(--brand-border); background: var(--brand-soft); color: var(--brand-text); }

.focuskw {
  display: inline-flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 14px 20px; border-radius: var(--r);
  background: var(--brand-soft); border: 1px solid var(--brand-border);
}
.focuskw__term { font-size: 22px; font-weight: 800; color: var(--brand-text); letter-spacing: -0.02em; }
.focuskw__meta { font-size: 13.5px; color: var(--brand-text); opacity: .8; }

.densitybar { width: 60px; height: 5px; background: var(--surface-2); border-radius: var(--r-full); overflow: hidden; display: inline-block; vertical-align: middle; }
.densitybar span { display: block; height: 100%; background: var(--brand); border-radius: var(--r-full); }

/* Vergleich Mobil/Desktop */
.compare { display: flex; flex-direction: column; gap: 14px; }
.compare__row { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.compare__label { width: 130px; flex-shrink: 0; color: var(--ink-2); font-weight: 500; }
.compare__side { flex: 1; display: flex; align-items: center; gap: 9px; }
.compare__track { flex: 1; height: 7px; background: var(--surface-2); border-radius: var(--r-full); overflow: hidden; }
.compare__fill { display: block; height: 100%; border-radius: var(--r-full); background: currentColor; }
.compare__num { width: 32px; text-align: end; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Messwert ohne Leiste (LCP): Zahl mit Einheit, links neben dem Gerätezeichen */
.compare__num--wide { width: auto; text-align: start; }
.compare__print { display: none; }

/* ============================================================
   Responsive
   ============================================================ */

/* Schmale Handys: Sprache und Kopf-Knopf passen nicht neben das Logo; der
   Knopf springt nur zur Eingabe, die Startseite hat sie ohnehin oben */
@media (max-width: 520px) {
  #headerCta { display: none; }
}

@media (max-width: 1040px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--sidebar { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 34px; }
}

@media (max-width: 760px) {
  .wrap { padding: 0 18px; }
  .nav { display: none; }
  .hero { padding: 52px 0 168px; --light-h: 380px; }
  .hero::after { height: 76px; }
  .hero:has(+ .recent #history:not(.hidden)) { padding-bottom: 92px; --light-h: 302px; }
  .hero:has(+ .recent #history:not(.hidden))::after { height: 60px; }
  .hero__title { font-size: clamp(32px, 9vw, 46px); }
  .section { padding: 58px 0; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .searchbar { flex-direction: column; padding: 12px; }
  .searchbar__icon { display: none; }
  .searchbar input { padding: 10px 4px; text-align: center; }
  .searchbar .btn { width: 100%; }
  .rhead__actions { margin-inline-start: 0; width: 100%; }
  .scoreboard { flex-direction: column; align-items: stretch; gap: 26px; }
  .scoreboard > .ring { align-self: center; }
  .card { padding: 20px; }
  .tablewrap { margin: 0 -20px; padding: 0 20px; }
  .row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .row__label { min-width: 0; }
  .row__value { margin-inline-start: 0; text-align: start; }
  .rec__body { padding-inline-start: 20px; }
  [dir="rtl"] .rec__body { padding-inline-start: 20px; padding-inline-end: 20px; }
  .rec--task > .rec__head { padding: 14px; gap: 10px; }
  .rec__lead { font-size: 14px; }
  .langpick__menu { width: min(310px, calc(100vw - 36px)); }
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .sbar__label { width: 96px; font-size: 13px; }
  .compare__row { flex-wrap: wrap; gap: 8px 14px; }
  .compare__label { width: 100%; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Druck / PDF
   ============================================================ */

.recnote {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 0 0 14px; padding: 12px 15px;
  border: 1px solid var(--brand-border); border-radius: var(--r);
  background: var(--brand-softer);
  font-size: 13.5px; line-height: 1.55; color: var(--brand-text);
}
.recnote svg { flex: 0 0 auto; margin-top: 2px; }

/* ─────────────────── Agents & KI ───────────────────
   Sechs Punkte, dauerhaft offen. Keine Klapp-Mechanik: wer erst
   klicken muss, um zu sehen was zu tun ist, tut es nicht.        */

.agentlist { display: flex; flex-direction: column; gap: 14px; }

.agent { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.agent[data-ok="true"] { border-color: var(--brand-border); }

.agent__head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--line-2);
  background: var(--surface);
}

.agent__dot {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--muted-2); color: #fff;
}
.agent[data-ok="true"] .agent__dot { background: var(--success); }

.agent__title { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.agent__tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; padding: 3px 8px; border-radius: var(--r-full);
  background: var(--surface-2); color: var(--ink-2);
}

.agent__body { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.agent__line { display: grid; grid-template-columns: 170px 1fr; gap: 14px; align-items: start; }
.agent__lbl {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted); padding-top: 1px;
}
.agent__val { font-size: 14px; line-height: 1.6; color: var(--ink-2); }

/* Erfüllt: die Status-Zeile trägt die Farbe, nicht die ganze Karte */
.agent__line--todo .agent__lbl { color: var(--average); }
.agent__line--todo .agent__val { color: var(--ink); font-weight: 600; }

/* ── Details: sechs Abschnitte mit Urteilszeile (Z5) ── */
.rhead__nav { display: flex; align-items: center; gap: 12px; }
.rhead__nav .tabs { min-width: 0; flex: 1; }
.rhead__nav .segmented { margin-inline-start: auto; flex-shrink: 0; margin-bottom: 6px; }
.segmented[hidden] { display: none; }
.segmented--icons button { padding: 7px 11px; }
/* Am Handy passen drei Ansichten und der Schalter in eine Reihe, ohne dass „Google-Suche“ abgeschnitten wird */
@media (max-width: 560px) {
  .rhead__nav { gap: 6px; }
  .rhead__nav .tabs { gap: 0; }
  .rhead__nav .tab { padding: 9px 9px; font-size: 14px; }
  .segmented--icons button { padding: 6px 8px; }
}
@media (max-width: 380px) {
  .rhead__nav .tab { padding: 8px 7px; font-size: 13px; }
  .rhead__nav .tab__badge { margin-inline-start: 4px; }
  .segmented--icons button { padding: 6px 6px; }
}
.subtabs {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  margin: -14px 0 22px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.subtabs::-webkit-scrollbar { display: none; }
.subtab {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  padding: 9px 15px; border: 0; background: none; cursor: pointer; border-radius: var(--r-full);
  font-size: 14.5px; font-weight: 700; color: var(--muted); white-space: nowrap;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.subtab:hover { color: var(--ink); background: var(--surface); }
.subtab[aria-selected="true"] { color: var(--brand-text); background: var(--brand-soft); }
.subtab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.subtab__count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-full);
  display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800;
  background: var(--average-soft); color: var(--average);
}
.subtab[data-tone="poor"] .subtab__count { background: var(--poor-soft); color: var(--poor); }
.subtab__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); }
.subtab[data-tone="good"] .subtab__dot { background: var(--success); }
.subtab[data-tone="average"] .subtab__dot { background: var(--average); }
/* Geräteschalter auf dem anderen Gerät: wofür Liste und Bereiche gelten — eine leise Zeile, kein Kasten */
.dhint { margin: -12px 0 18px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
/* Den Namen des Abschnitts und sein Urteil trägt auf dem Bildschirm der Reiter; im Druck steht beides über dem Abschnitt */
.dsec__head { display: none; }
.dsec[hidden] { display: none; }
.dsec__title { font-size: 17px; letter-spacing: -0.015em; margin: 0; }
.dsec__verdict { font-size: 14px; color: var(--muted); }
/* Am Handy bricht die Leiste um: alle sechs Urteile bleiben ohne Wischen sichtbar, der gewählte Reiter nie außerhalb */
@media (max-width: 560px) {
  .subtabs { flex-wrap: wrap; overflow-x: visible; }
  .subtab { padding: 8px 11px; font-size: 14px; }
}

.agent--done { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--success-soft); }
.agent__done { font-size: 14px; line-height: 1.5; color: var(--ink-2); }

.agent__foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 18px; border-top: 1px solid var(--line-2);
}
/* Bezugspunkt ist der Knopf, nicht die Fußzeile — sonst erschiene die
   Vorschau auch beim Überfahren der Links daneben. */
.agent__copywrap { position: relative; display: inline-flex; }
.agent__link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; color: var(--brand-text); text-decoration: none;
}
.agent__link:hover { text-decoration: underline; }

/* Vorschau nur über dem Knopf. Die Polsterung unten überbrückt den Abstand,
   damit die Vorschau beim Hinüberfahren nicht verschwindet. */
.agent__preview {
  position: absolute; bottom: 100%; inset-inline-start: 0;
  padding-bottom: 8px; z-index: 30;
  width: min(620px, 78vw);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .12s, transform .12s, visibility .12s;
}
.agent__copywrap:hover .agent__preview,
.agent__copywrap:focus-within .agent__preview { opacity: 1; visibility: visible; transform: none; }

.agent__preview-box {
  display: block;
  background: var(--ink); color: #e8edf3;
  border-radius: var(--r); box-shadow: var(--shadow-lg);
  padding: 12px 14px;
}

.agent__preview-hint {
  display: block;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted-2); margin-bottom: 8px;
}
.agent__preview pre {
  margin: 0; max-height: 260px; overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
  direction: ltr; text-align: start;
}

@media (max-width: 700px) {
  .agent__line { grid-template-columns: 1fr; gap: 3px; }
  .agent__preview { width: min(620px, calc(100vw - 60px)); }
}

/* ─────────────────── KI-Briefing-Dialog ───────────────────
   Der fertige Arbeitsauftrag zum Lesen, Kopieren und Herunterladen.
   <dialog> bringt Fokusfalle, Escape und Overlay selbst mit.        */

.aidlg {
  width: min(920px, calc(100vw - 32px));
  max-height: min(86vh, 900px);
  padding: 26px 28px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.aidlg::backdrop { background: rgba(15, 26, 36, .45); }
.aidlg[open] { display: flex; flex-direction: column; }

.aidlg__close { position: absolute; top: 16px; inset-inline-end: 16px; margin: 0; }
.aidlg__close .btn { padding: 7px; }

.aidlg__title {
  font-size: 21px; font-weight: 800; letter-spacing: -.02em;
  margin: 0 0 6px; padding-inline-end: 40px;
}
.aidlg__sub { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0 0 18px; }

.aidlg__bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.aidlg__spacer { flex: 1 1 auto; }

.aidlg__text {
  flex: 1 1 auto; min-height: 260px;
  width: 100%; box-sizing: border-box; resize: none;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink-2);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.65;
  white-space: pre; overflow: auto;
  /* Der Auftrag ist immer in Code-Schreibrichtung gesetzt, auch auf
     arabischen und persischen Oberflaechen — sonst zerfaellt die Tabelle. */
  direction: ltr; text-align: start;
}
.aidlg__text:focus { outline: 2px solid var(--brand-light); outline-offset: 1px; }

.aidlg__hint { font-size: 13px; color: var(--muted); margin: 12px 0 0; }

@media (max-width: 560px) {
  .aidlg { padding: 20px 18px 18px; }
  .aidlg__bar .btn { flex: 1 1 auto; justify-content: center; }
}

/* ─────────────────── Anbindung / API ───────────────────
   Zwei gleichrangige Hälften in einer Karte, getrennt durch eine feine Linie:
   links die Google-Anbindung mit dem Feld der hinterlegten APIs, rechts
   „Daten hochladen“. Der Stand steht als Text mit einem Punkt davor — keine
   Kapsel um kurze Wörter. Unter 880px liegen die Hälften untereinander. */

.gscapi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.gscapi__half { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.gscapi__half--google { padding-inline-end: 28px; }
.gscapi__half--upload { padding-inline-start: 28px; border-inline-start: 1px solid var(--line); }
.gscapi__title { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.gscapi__loading { margin: 0; font-size: 14px; color: var(--muted); }

/* Das Feld: wirkt wie ein schreibgeschütztes Eingabefeld der Einstellungen */
.gscapi__field {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 4px 16px 12px;
}
.gscapi__label { margin: 10px 0 2px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.gscapi__keys { margin: 0; }
.gscapi__key {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.gscapi__key:last-child { border-bottom: 0; }
.gscapi__key dt { font-size: 14px; font-weight: 700; color: var(--ink); }
.gscapi__key dd { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.gscapi__dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); }
.gscapi__key dd[data-state="on"] .gscapi__dot { background: var(--good); }
.gscapi__key dd[data-state="ready"] .gscapi__dot { background: var(--average); }
.gscapi__key dd[data-state="off"] { color: var(--muted); }

/* „Daten hochladen“ steht mittig: Überschrift und Ablagefläche */
.gscapi__half--upload .gscapi__title { text-align: center; }

@media (max-width: 880px) {
  .gscapi { grid-template-columns: minmax(0, 1fr); }
  .gscapi__half--google { padding-inline-end: 0; }
  .gscapi__half--upload { padding-inline-start: 0; border-inline-start: 0; border-top: 1px solid var(--line); margin-top: 22px; padding-top: 22px; }
}

/* ─────────────────── Upload: Search-Console-Export ───────────────────
   Ablagefläche, Kennzahlen, dann je Ansicht die Einträge als Karten im
   Stil der Empfehlungen. Was keinen Auftrag hat, steht zugeklappt darunter. */

/* Die Fläche füllt die Höhe ihrer Hälfte (neben der Google-Anbindung), mindestens 270px — höher als die alte Fläche mit
   Anleitung und Knopf (214px breit, bis 260px auf dem Handy); darin mittig nur „Export hochladen“ und darunter die Formate */
.gscdrop {
  position: relative; cursor: pointer;
  flex: 1 1 auto; min-height: 270px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 36px 24px; text-align: center;
  border: 2px dashed var(--line); border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.gscdrop[data-over="true"] { border-color: var(--brand); background: var(--brand-softer); }
.gscdrop[data-busy="true"] { opacity: .6; pointer-events: none; }
.gscdrop__icon { color: var(--brand); margin-bottom: 8px; }
/* Japanisch und Chinesisch brechen sonst zwischen beliebigen Zeichen um, auch vor „ー“: strikt, nach Wortgrenzen, ausgeglichen */
.gscdrop__label { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); line-break: strict; word-break: auto-phrase; text-wrap: balance; }
/* Umbruch nur nach einem Komma (render.js bindet die übrigen Leerzeichen): „Google Sheets“ bleibt beisammen, auch in CJK */
.gscdrop__formats { font-size: 14px; color: var(--muted); word-break: keep-all; }
.gscgoogle { display: flex; flex-direction: column; gap: 12px; }
.gscgoogle__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
/* Verbunden: eine Zeile — Property, Trennen (der Zeitraum steht an der Karte „Search Console“) */
.gscgoogle__line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.gscgoogle__line select {
  min-width: 0; max-width: 100%; padding: 7px 10px; font: inherit; font-size: 14px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
.gscgoogle__line select:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.gscgoogle__off { margin-inline-start: auto; }
.gscgoogle__hint { margin: 0; flex: 1 1 260px; font-size: 14.5px; color: var(--muted); }
/* „Daten werden von Google geholt …“ steht unter der Property, linksbündig wie sie (stärker als .gscdrop__busy weiter unten) */
.gscgoogle .gscgoogle__busy { justify-content: flex-start; }
/* Steht der Hinweis allein in der Spalte (Anbindung hier nicht möglich), ist 260px keine Breite, sondern Höhe */
.gscgoogle > .gscgoogle__hint { flex: none; }
/* Fehlerdetails: Text mit Pfeil, kein Knopf */
.gscdetails > summary {
  display: inline-block; cursor: pointer; font-size: 14px; color: var(--brand);
  text-decoration: underline; text-underline-offset: 3px;
}
.gscdetails > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.gscdetails { margin-top: 4px; font-size: 14px; }
.gscdetails > p { margin: 6px 0 0; }

/* Liegen schon Daten vor: derselbe Text in einer Zeile, weiter mittig */
.gscdrop--compact {
  flex: none; min-height: 0;
  flex-direction: row; flex-wrap: wrap; column-gap: 10px; row-gap: 2px;
  padding: 14px 18px;
}
.gscdrop--compact .gscdrop__icon { margin-bottom: 0; }
.gscdrop--compact .gscdrop__label { font-size: 14.5px; }
.gscdrop--compact .gscdrop__formats { font-size: 13.5px; }
@media (max-width: 420px) { .gscdrop { padding-inline: 14px; } }

/* Das ganze Feld ist das Label des unsichtbaren Dateifelds: ein Klick irgendwo öffnet
   den Dateidialog, per Tab bleibt es erreichbar. */
.gscdrop:hover { border-color: var(--brand); }
.gscdrop:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.gscdrop__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.gscdrop__busy {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 14.5px; color: var(--muted);
}
.gscfiles { margin: 8px 0 0; padding-inline-start: 18px; font-size: 13.5px; }
.gscfiles li { margin-top: 3px; }

.gscnotes { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gscnotes li { display: flex; gap: 8px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.gscnotes svg { flex: 0 0 auto; margin-top: 3px; color: var(--info); }

/* Zeitraum 1 Tag … 1 Jahr rechts im Kopf der Karte „Search Console“ (derselbe Schalter wie Handy/Computer); passt er nicht neben den
   Titel, steht er darunter. Während eines Abrufs bleibt der gedrückte Zeitraum klar lesbar, die übrigen treten zurück. */
.card__head:has(.gscrange) { flex-wrap: wrap; align-items: center; row-gap: 12px; }
.card__aside:has(.gscrange) { flex-shrink: 1; min-width: 0; }
.gscrange { flex-wrap: wrap; }
.gscrange button { padding: 6px 12px; white-space: nowrap; }
.gscrange button:not(:disabled):not([aria-pressed="true"]):hover { color: var(--ink); }
.gscrange button:disabled { cursor: default; }
.gscrange button:disabled:not([aria-pressed="true"]) { opacity: .55; }
.gscsummary--empty .card__head { margin-bottom: 0; }
/* Am Handy drei mal zwei gleich breite Felder über die ganze Breite */
@media (max-width: 560px) {
  .card__aside:has(.gscrange) { flex-basis: 100%; }
  .gscrange { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gscrange button { justify-content: center; padding-inline: 6px; }
}

/* Vier kurze Zahlen: auf dem Handy zwei nebeneinander statt vier untereinander */
@media (max-width: 760px) {
  .gscstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.gscactions {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2);
}
/* Nur das Kreuz ist rot, der Text bleibt neutral */
.gscactions__remove svg { color: var(--poor); }
/* Der Hauptweg der Karte in Grün, ohne ein zweiter Hauptknopf zu sein (je Ansicht nur einer) */
.gscactions__copy { color: var(--brand-text); border-color: var(--brand-border); background: var(--brand-softer); }

.gschint { display: block; margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--muted); }
/* Aufgeklappt stehen die Befunde ausführlich darunter */
.rec[open] .gschint { display: none; }
.gscfinding {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  margin-bottom: 8px; font-size: 14.5px; color: var(--ink);
}
.gscfacts p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.gscplain { padding: 18px 20px; }

.gscrest { margin-top: 16px; }
.gscrest__head {
  display: flex; align-items: center; gap: 8px; padding: 10px 4px;
  list-style: none; cursor: pointer;
  font-size: 14px; font-weight: 700; color: var(--muted);
}
.gscrest__head::-webkit-details-marker { display: none; }
.gscrest__head::marker { content: ''; }
.gscrest__head:hover { color: var(--ink); }
.gscrest__head:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); }
.gscrest__chev { transition: transform .22s; }
.gscrest[open] .gscrest__chev { transform: rotate(180deg); }
/* Sortierbare Spaltenköpfe der Tabelle „ohne Handlungsbedarf“: an jeder Spalte ein leises Doppeldreieck, an der sortierten
   (th mit aria-sort) das Dreieck der Richtung kräftig, das andere fast weg. Schrift --muted (≈ 5,6 : 1): es sind Knöpfe,
   die übrigen Spaltenköpfe (--muted-2) sind nur Beschriftung */
.thsort {
  display: inline-flex; align-items: center; gap: 5px; padding: 0; font: inherit; color: var(--muted); text-transform: inherit;
  letter-spacing: inherit; background: none; border: 0; cursor: pointer;
}
.thsort:hover { color: var(--ink); }
.thsort:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
th[aria-sort] .thsort { color: var(--ink); }
.thsort__icon { flex: none; fill: currentColor; }
.thsort__icon path { opacity: .55; }
th[aria-sort] .thsort__icon path { opacity: .25; }
th[aria-sort="ascending"] .thsort__icon .thsort__up, th[aria-sort="descending"] .thsort__icon .thsort__down { opacity: 1; }
.gscrest__status { white-space: nowrap; }
/* Kleines Fragezeichen mit Erklärung beim Darüberfahren */
.qhint {
  display: inline-grid; place-items: center; width: 16px; height: 16px; margin-inline-start: 6px; vertical-align: middle;
  font-size: 11px; font-weight: 600; line-height: 1; color: var(--muted); border: 1px solid var(--line); border-radius: 50%; cursor: help;
}
.qhint:hover, .qhint:focus-visible { color: var(--ink); border-color: var(--muted); outline: none; }

@page { size: A4; margin: 14mm 12mm; }
.scrollbox { max-height: 340px; overflow-y: auto; }

@media print {
  /* Die Erklärung steht nur beim Darüberfahren — auf Papier erklärt ein „?“ nichts */
  .tip--term, .qhint { display: none !important; }
  /* Listen mit eigener Bildlaufleiste im Druck ganz zeigen, Überschriften nicht ans Seitenende stellen */
  .scrollbox, .dstat__list { max-height: none; overflow: visible; }
  .panel::before, h2, h3, h4, .rec__h { break-after: avoid; page-break-after: avoid; }
  /* Die Seite ist schmaler als die Umbruchpunkte für Handys — Raster bleiben im Druck mehrspaltig */
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .kpi { min-width: 0; }
  .kpi .badge { white-space: normal; max-width: 100%; }
  .footer, .rhead__actions, .tabs, .recbar__filters, #devSwitch, .subtabs,
  .hero, .recent, .section, .btn, .langpick, .aidlg { display: none !important; }
  /* Von der Kopfleiste bleibt nur das Logo: es trägt den Namen aufs geteilte PDF (die Brotkrümel sind weg, S5) */
  .header { position: static; height: auto; padding-top: 4px; background: none; backdrop-filter: none; border: 0; }
  .header .nav, .header__right { display: none !important; }
  .gscupload, .gscactions, .gscrange, #panel-upload.is-empty { display: none !important; }
  /* Tabellen im Druck: im PDF lässt sich nichts scrollen — der Rahmen schneidet nicht ab, Abzeichen und lange Pfade brechen um */
  .tablewrap { overflow: visible; margin: 0; padding: 0; }
  table.t th, table.t th.num { white-space: normal; }
  table.t th, table.t td { padding-inline: 8px; }
  .gscrest__status { white-space: normal; }
  .gscrest__status .badge { white-space: normal; border-radius: 12px; }
  .t__trunc { max-width: 220px; white-space: normal; overflow-wrap: break-word; overflow: visible; text-overflow: clip; }
  /* Auf Papier sortiert niemand: nur die Richtung der sortierten Spalte bleibt */
  th:not([aria-sort]) .thsort__icon { display: none; }
  body { background: #fff; font-size: 11pt; }
  .panel { display: block !important; padding-top: 18px; break-inside: auto; }
  .panel::before {
    content: attr(data-print-title);
    display: block; font-size: 15pt; font-weight: 800;
    margin: 22px 0 12px; padding-top: 14px; border-top: 2px solid #08863a;
  }
  .card, .kpi, .rec, .metric {
    border: 1px solid #dde3e0 !important; box-shadow: none !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  .rec__body { display: block !important; }
  .dsec[hidden] { display: block !important; }
  .compare__print { display: block; font-size: 10pt; color: #5f696c; }
  .dsec__head { display: flex; align-items: baseline; gap: 12px; margin: 22px 0 12px; }
  .rec__chev { display: none; }
  /* Im Druck sollen alle Karten offen sein */
  details.rec > .rec__body { display: block !important; }
  .report { display: block !important; }
  .rhead { background: none; border: 0; }
  .panel.is-active > * > .card, .panel.is-active > .card,
  .panel.is-active > * > .kpi { animation: none !important; opacity: 1 !important; transform: none !important; }
  /* Links mit anderem Text tragen ihre Adresse dahinter; steht sie schon als Text da (data-shows-url), nicht doppelt.
     Die Adresse im Berichtskopf steht auf Papier ganz da, nicht gekürzt */
  .rhead__urlshort { display: none; }
  .rhead__urlfull { display: inline; }
  a[href^="http"]:not([data-shows-url])::after { content: " (" attr(href) ")"; font-size: 8pt; color: #5f696c; }
}
.t__more { font-size: 12.5px; color: var(--muted); }
div.t__more { padding: 7px 0; }

/* Fragezeichen hinter einem Fachwort (R8): klein, neben der Beschriftung; die Sprechblase öffnet sich nach rechts */
.tip--term { margin-inline-start: 6px; vertical-align: middle; font-weight: 400; letter-spacing: 0; text-transform: none; z-index: 2; }
.tip--term .tip__mark { width: 16px; height: 16px; border-width: 1px; font-size: 11px; font-weight: 600; }
.tip--term .tip__box { inset-inline-start: 0; inset-inline-end: auto; width: min(260px, calc(100vw - 48px)); text-align: start; }
.tip--term .tip__text { border-radius: var(--r); padding: 10px 14px; box-shadow: var(--shadow-lg); font-size: 12.5px; font-weight: 400; }
.tip--term:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 50%; }
.langbadge { display: inline-flex; align-items: center; }

/* ============================================================
   Impressum und Datenschutz (src/lib/legal.js)
   Reiner Text auf der hellen Seite, dieselbe Kopf- und Fußleiste wie die App.
   ============================================================ */

.legalpage { max-width: 760px; padding-top: 56px; padding-bottom: 88px; overflow-wrap: break-word; hyphens: auto; }
.legalpage h1 { font-size: clamp(30px, 5vw, 42px); letter-spacing: -0.03em; margin-bottom: 8px; }
.legalpage__lead { color: var(--muted); font-size: 15px; margin-bottom: 36px; }
.legalpage section { padding-top: 28px; }
.legalpage section + section { margin-top: 28px; border-top: 1px solid var(--line); }
.legalpage h2 { font-size: 19px; letter-spacing: -0.01em; margin-bottom: 12px; }
.legalpage p { font-size: 15.5px; line-height: 1.7; color: var(--ink-2); margin: 0 0 12px; }
.legalpage a { color: var(--brand-text); text-decoration: underline; text-underline-offset: 2px; }
.legalpage code { font-size: .92em; background: var(--surface); padding: 1px 5px; border-radius: 6px; }
.legalpage__card { padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); margin-bottom: 12px; }
.legalpage__card p { margin: 8px 0 0; }
.legalpage__grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); margin-bottom: 12px; }
.legalpage__tile { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 15px; }
.legalpage__label { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
.legalpage__switch { font-size: 14.5px; font-weight: 600; color: var(--ink-2); padding: 8px 12px; border-radius: var(--r-sm); }
.legalpage__switch:hover { background: var(--surface-2); color: var(--ink); }
.footer__legal { display: inline-flex; gap: 20px; flex-wrap: wrap; }
.footer__legal a { color: var(--ink-2); }
.footer__legal a:hover, .footer__legal a[aria-current="page"] { color: var(--brand-text); }