/* ============================================================
   Baxxtar.pro — Design System
   Signalrot #D82818 · Anthrazit #181818 · Silber
   ============================================================ */

/* Schriften selbst gehostet (seit 29.09., Leitfaden Lars 12.6: keine Google-Server beim Seitenaufruf – LG München I,
   3 O 17493/20). Saira + Inter als variable Fonts von Google Fonts, Lizenz SIL OFL 1.1 (fonts/OFL-*.txt); „latin“ deckt
   Deutsch ab, „latin-ext“ lädt der Browser nur bei Bedarf (unicode-range). */
@font-face { font-family: "Saira"; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url(/fonts/saira-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; }
@font-face { font-family: "Saira"; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url(/fonts/saira-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: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(/fonts/inter-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; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(/fonts/inter-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; }
/* Ersatzschrift mit den Maßen von Saira bzw. Inter (seit 05.10., Performance): solange die Webschrift lädt, zeigt der
   Browser Arial – auf deren Laufweite und Ober-/Unterlänge angepasst, damit beim Schriftwechsel nichts umbricht oder
   verrutscht (vorher z. B. die Sprungmarken auf /energie/…/: Verrutschen 0,13). Werte im Browser gemessen (Canvas,
   100 px, Beispieltext mit Umlauten und Akku-Codes); nach dem Laden sieht man nur Saira/Inter. */
@font-face { font-family: "Saira Ersatz"; font-weight: 100 599; src: local("Arial"), local("ArialMT");
  size-adjust: 101.72%; ascent-override: 112.08%; descent-override: 43.26%; line-gap-override: 0%; }
@font-face { font-family: "Saira Ersatz"; font-weight: 600 900; src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 99.1%; ascent-override: 115.03%; descent-override: 44.4%; line-gap-override: 0%; }
@font-face { font-family: "Inter Ersatz"; font-weight: 100 549; src: local("Arial"), local("ArialMT");
  size-adjust: 103.96%; ascent-override: 93.31%; descent-override: 23.09%; line-gap-override: 0%; }
@font-face { font-family: "Inter Ersatz"; font-weight: 550 900; src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 101.17%; ascent-override: 95.88%; descent-override: 23.72%; line-gap-override: 0%; }

:root {
  /* Brand */
  --red:        #E11B15;
  --red-600:    #C1160f;
  --red-700:    #9e1009;
  --red-soft:   rgba(225, 27, 21, 0.14);
  --red-glow:   rgba(225, 27, 21, 0.40);

  /* Amazon-Farbwelt – NUR für alles, was zu Amazon führt (Header-Knopf, Store-Karte, „Zu Amazon“ der Produktkarten).
     Seit 25.09. IMMER dieses Gelb (Nico; Werte 1:1 von watertest.smardy-blue.com: --signal / -hover / -ink) */
  --amz-ink:        #232F3E;   /* Amazon „Squid Ink“ (Hintergrund der Store-Karte) */
  --amz-dark:       #131921;
  --amz-gelb:       #FFD814;
  --amz-gelb-hover: #F5C400;
  --amz-gelb-ink:   #15263A;   /* Schrift auf Gelb */

  /* Surfaces (anthracite) */
  --bg:         #0d0e10;
  --bg-1:       #141619;
  --bg-2:       #191c20;
  --bg-3:       #22262c;
  --line:       rgba(255,255,255,0.09);
  --line-2:     rgba(255,255,255,0.16);

  /* Text */
  --tx:         #f3f4f6;
  --tx-2:       #aab0b8;
  --tx-3:       #737a83;
  --silver:     #c9ced4;
  --tx-inv:     #111318;   /* Text auf einer --tx-farbenen Fläche (z. B. aktiver Tab) */

  /* Type */
  --f-head: "Saira", "Saira Ersatz", "Arial Narrow", system-ui, sans-serif;
  --f-body: "Inter", "Inter Ersatz", system-ui, -apple-system, sans-serif;

  /* Type-Skala (mobil = clamp-min, Desktop = clamp-max) — EIN System für die ganze Seite */
  --fs-hero: clamp(1.8rem, 6.4vw, 2.7rem);   /* Startseiten-Hero-Slider */
  --fs-h1:   clamp(1.65rem, 5.4vw, 2.35rem);  /* Seitentitel (Hub/Serie/Katalog) */
  --fs-h2:   clamp(1.4rem, 4.4vw, 1.95rem);   /* Sektions-Überschriften */
  --fs-h3:   clamp(1.12rem, 3vw, 1.4rem);     /* Karten / Unter-Überschriften */
  --fs-lead: clamp(1rem, 2.4vw, 1.1rem);      /* Lead-/Einleitungstext */

  /* Vertikale Abstände (EIN System) */
  --sec-y:        clamp(34px, 6vw, 62px);   /* Sektions-Padding oben/unten */
  --sec-head-gap: clamp(18px, 3.5vw, 30px); /* Abstand section-head → Inhalt */

  /* Hover-Dauer Produktkarten + Marken-/Serien-Kacheln (EIN Wert, Nico 25.09.: „leicht verlangsamen – stimmiger“) */
  --hover-t: .3s;

  --wrap: 1200px;
  --radius: 14px;
  --radius-s: 10px;
  --shadow: 0 18px 50px rgba(0,0,0,0.55);
}

* { box-sizing: border-box; }
/* Sprungziele (Nav „Marken“, „Ratgeber“ …) landen direkt UNTER der klebenden Kopfzeile (73 px) statt dahinter
   (Nico 25.09.: „landet man zu weit unten“ – Kicker/Überschrift lagen verdeckt). Gilt auch für scrollIntoView. */
html { scroll-behavior: smooth; scroll-padding-top: 73px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.eyebrow {
  font-family: var(--f-head);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--red);
  margin: 0 0 14px;
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::before { content:""; width: 26px; height: 2px; background: var(--red); display:inline-block; }

h1,h2,h3 { font-family: var(--f-head); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; margin: 0; }
.section { padding: var(--sec-y) 0; position: relative; }
.section-head { max-width: 720px; margin-bottom: var(--sec-head-gap); }
.section-head h2 { font-size: var(--fs-h2); text-transform: uppercase; }
.section-head h2 .r { color: var(--red); }
.section-head .eyebrow { color: var(--tx-2); }
.section-head p:not(.eyebrow) { color: var(--tx-2); font-size: var(--fs-lead); margin: 16px 0 0; }
.alt { background: var(--bg-1); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: var(--radius-s);
  font-family: var(--f-head); font-weight: 600; font-size: .98rem;
  text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid transparent; transition: .18s ease;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-red { background: var(--red); color: #fff; box-shadow: 0 8px 26px -8px var(--red-glow); }
.btn-red:hover { background: var(--red-600); box-shadow: 0 14px 34px -8px var(--red-glow); }
.btn-ghost { background: transparent; color: var(--tx); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--red); color: #fff; background: var(--red-soft); }
/* Amazon-Store-Button im Amazon-Farbschema (Orange, dunkle Schrift) – klar als Link zu Amazon erkennbar */
.btn-amazon { background: var(--amz-gelb); color: var(--amz-gelb-ink); border-color: var(--amz-gelb); box-shadow: 0 8px 24px -12px rgba(245,196,0,.7); }
.btn-amazon:hover { background: var(--amz-gelb-hover); color: var(--amz-gelb-ink); border-color: var(--amz-gelb-hover); }
.btn-amazon:active { background: var(--amz-gelb-hover); box-shadow: inset 0 2px 6px rgba(21,38,58,.25); transform: translateY(1px); }
.btn-amazon:focus-visible { outline: 3px solid rgba(245,196,0,.6); outline-offset: 2px; }
/* Store-Knopf in der Kopfzeile kleiner (Nico 16.10.: „etwas kleiner gestalten, sodass er besser in den Header passt“):
   38 statt 55 px hoch (eigene Zeilenhöhe statt der 1,6 des Fließtexts), Schrift fast so groß wie die Menüpunkte,
   schwächerer gelber Lichthof */
.nav-cta .btn-amazon { padding: 10px 18px; font-size: .88rem; line-height: 1.2; box-shadow: 0 6px 16px -10px rgba(245,196,0,.6); }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(13,14,16,0.78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 32px; height: 72px; }
/* Logo NIE verzerren (Nico 28.09.: „darf unter keinen Umständen verzerrt werden“): vorher schrumpfte es mit der engen
   Kopfzeile, und die globale img-Regel max-width: 100% stauchte es bei fester Höhe (iPad mini 768 px: 26 % zu schmal,
   721 px: 54 %). Jetzt schrumpft es nie mit; wird es irgendwo doch eng, verkleinert object-fit es statt zu stauchen. */
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; flex: none; }
.brand-logo { height: 34px; width: auto; display: block; max-width: none; object-fit: contain; }
.footer-brand .brand-logo { height: 58px; }
.bxr { color: var(--red); font-style: normal; }
.hub-hero .bxr, .slide .bxr, .btn .bxr { color: inherit; }
/* Abstand seit 29.09. 22 statt 28 px (sechster Menüpunkt „Kameras“, sonst passt die Zeile bei 1200 px nicht); nie
   umbrechen – ein zu voller Kopf soll auffallen (Messung), statt „Akku-Finder“ still zweizeilig zu machen */
.nav-links { display: flex; gap: 22px; }
.nav-links a {
  font-family: var(--f-head); font-weight: 500; font-size: .95rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--tx-2);
  padding: 6px 0; position: relative; transition: color .15s; white-space: nowrap;
}
.nav-links a:hover { color: var(--tx); }
.nav-links a::after { content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--red); transition:width .2s; }
.nav-links a:hover::after { width: 100%; }
/* „Produkte“ mit Aufklapp-Menü (Nico 01.10.: Kategorien des Katalogs + Video). Öffnet per Klick/Tipp/Enter – überall gleich
   (Nico: „Was wäre cleverer … Klick oder hovern?“ → Klick: kein ungewolltes Aufklappen auf dem Weg zum Amazon-Knopf),
   .is-offen per js/finder.js initNavMenue; ohne JavaScript führt „Produkte“ zum Katalog. Handy: eingerückt im Burger-Menü */
.nav-drop { position: relative; display: flex; align-items: center; }
.nav-links .nav-drop > a.nav-produkte { display: inline-flex; align-items: center; gap: 3px; }
.nav-pfeil { width: 12px; height: 12px; flex: none; transition: transform .2s; }
.nav-menue { position: absolute; top: 100%; left: -14px; z-index: 60; min-width: 200px; display: none; flex-direction: column; gap: 2px;
  margin-top: 10px; padding: 8px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-s);
  box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .4); }
.nav-drop.is-offen .nav-menue { display: flex; }
.nav-drop.is-offen .nav-pfeil { transform: rotate(180deg); }
.nav-links .nav-drop.is-offen > a.nav-produkte { color: var(--tx); }
.nav-links .nav-menue a { padding: 9px 12px; border-radius: 8px; font-size: .86rem; color: var(--tx-2); }
.nav-links .nav-menue a::after { display: none; }
.nav-links .nav-menue a:hover, .nav-links .nav-menue a:focus-visible { background: var(--bg-3); color: var(--tx); outline: none; }
.nav-cta { display: flex; gap: 12px; align-items: center; }
.burger { display: none; background: none; border: 0; color: var(--tx); width: 34px; height: 34px; }
.burger svg { width: 26px; height: 26px; }

/* ============================================================
   Hero
   ============================================================ */
.hero { position: relative; padding: 96px 0 84px; overflow: hidden; }
.hero::before {
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(720px 420px at 78% 8%, rgba(225,27,21,0.20), transparent 62%),
    radial-gradient(560px 400px at 10% 90%, rgba(225,27,21,0.07), transparent 60%),
    var(--bg);
}
.hero::after {
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(circle at 70% 20%, #000, transparent 72%);
          mask-image: radial-gradient(circle at 70% 20%, #000, transparent 72%);
}
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--bg-2); border: 1px solid var(--line);
  padding: 7px 15px; border-radius: 999px; font-size: .82rem; color: var(--tx-2);
  font-family: var(--f-head); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 26px;
}
.hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); }
.hero h1 { font-size: var(--fs-hero); text-transform: uppercase; }
.hero h1 .r { color: var(--red); }
.hero .lead { font-size: var(--fs-lead); color: var(--tx-2); max-width: 540px; margin: 24px 0 34px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 34px; margin-top: 48px; }
.hero-stats .s b { font-family: var(--f-head); font-size: 2.2rem; font-weight: 800; display: block; line-height: 1; }
.hero-stats .s span { font-size: .82rem; color: var(--tx-3); text-transform: uppercase; letter-spacing: .08em; }

/* Hero visual: logo medallion */
.hero-visual { position: relative; display: flex; justify-content: center; align-items: center; }
.medallion {
  width: 300px; height: 300px; border-radius: 34px;
  background: linear-gradient(160deg, #23262b, #0e0f11);
  border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
  position: relative;
}
.medallion img { width: 78%; height: 78%; border-radius: 20px; }
.medallion::after {
  content:""; position:absolute; inset:-2px; border-radius:36px; z-index:-1;
  background: conic-gradient(from 210deg, transparent, var(--red-glow), transparent 55%);
  filter: blur(14px); opacity:.8;
}
.hero-visual .ping {
  position:absolute; font-family: var(--f-head); font-weight:700; font-size:.74rem;
  text-transform: uppercase; letter-spacing:.05em; background: var(--bg-2);
  border:1px solid var(--line); padding:8px 13px; border-radius:10px; color: var(--silver);
  box-shadow: var(--shadow);
}
.hero-visual .ping b { color: var(--red); }
.ping-1 { top: 10%; left: -6%; }
.ping-2 { bottom: 14%; right: -4%; }
.ping-3 { bottom: -2%; left: 12%; }

/* ---------- Vorteile „Warum Baxxtar?“: Bild-Kacheln (s/w-Foto + ein Rot, Text auf dunklem Verlauf) ----------
   Desktop 3 × 2, Tablet 2 × 3, Handy wischbare Reihe. Auftritt beim Scrollen: js/app.js (.usp-anim/.is-in). */
.usp-stage { padding: var(--sec-y) 0; background: var(--bg-1); border-bottom: 1px solid var(--line); }
.usp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.usp-card { position: relative; isolation: isolate; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: #0d0e10; min-width: 0; margin: 0; }
.usp-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.usp-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(10,11,13,0) 34%, rgba(10,11,13,.70) 62%, rgba(10,11,13,.94) 100%); }
.usp-card:hover img { transform: scale(1.05); }
.usp-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 22px 22px; color: #fff; }
.usp-no { display: block; font-family: var(--f-head); font-weight: 800; font-size: 1.2rem; line-height: 1; letter-spacing: .06em; color: var(--red); margin-bottom: 10px;
          text-shadow: 0 0 10px rgba(0,0,0,.9), 0 0 3px rgba(0,0,0,.8); }   /* dunkler Schein: lesbar auch über rotem Akku */
.usp-card h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 800; text-transform: uppercase; color: #fff; line-height: 1; }
.usp-sub { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; font-family: var(--f-head); font-weight: 600; font-size: .84rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.92); }
.usp-sub::before { content: ""; width: 22px; height: 2px; background: var(--red); flex: none; transition: width .35s ease; }
.usp-card:hover .usp-sub::before { width: 40px; }
.usp-txt { margin: 11px 0 0; font-size: .9rem; line-height: 1.5; min-height: 4.5em; color: rgba(255,255,255,.76); overflow-wrap: break-word; }   /* 3 Zeilen reserviert → Titel einer Reihe stehen auf gleicher Höhe */
/* Auftritt beim Scrollen: gestaffelt einblenden, Bild zoomt leicht zurück (nur mit JS, nicht bei „Bewegung reduzieren“) */
.usp-cards.usp-anim .usp-card { opacity: 0; transform: translateY(28px); }   /* verstecken ohne Übergang (kein Ausblend-Flackern) */
.usp-cards.usp-anim .usp-card img { transform: scale(1.14); }
.usp-cards.usp-anim.is-in .usp-card { opacity: 1; transform: none; transition: opacity .7s ease, transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 90ms); }
.usp-cards.usp-anim.is-in .usp-card img { transform: scale(1); }
.usp-cards.usp-anim.is-in .usp-card:hover img { transform: scale(1.05); }
@media print { .usp-cards.usp-anim .usp-card { opacity: 1; transform: none; } .usp-cards.usp-anim .usp-card img { transform: none; } }
@media (max-width: 1023px) and (min-width: 721px) {
  .usp-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  /* Handy: wischbare Reihe, nächste Kachel lugt rechts hervor */
  .usp-cards { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 10px;
               margin: 0 -10px; padding: 0 10px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .usp-cards::-webkit-scrollbar { display: none; }
  .usp-card { flex: 0 0 82%; scroll-snap-align: start; scroll-snap-stop: always; }   /* je Wischen eine Karte (Nico 01.10.) */
  .usp-card h3 { font-size: 1.55rem; }
  .usp-copy { padding: 16px 16px 16px; }
  .usp-no { font-size: 1.05rem; margin-bottom: 8px; }
  .usp-txt { min-height: 0; font-size: .86rem; margin-top: 9px; }   /* mehr Bild frei auf kleinen Displays */
}
/* Mobil: einheitlich 10px Randabstand + Über-Baxxtar aufgeräumt */
@media (max-width: 720px) {
  .wrap { padding-left: 10px; padding-right: 10px; }
  #marke .story-copy, #marke .story-copy h2,
  #marke .story-copy p, #marke .value, #marke .value h4, #marke .value p { text-align: left; }
  #marke .values { gap: 12px; }
}
/* Handy: Werte-Kacheln einspaltig – in zwei schmalen Spalten brachen lange Titel mitten im Wort */
@media (max-width: 560px) {
  #marke .values { grid-template-columns: 1fr; gap: 10px; }
  #marke .value { padding: 16px 18px; }
}

/* ============================================================
   Finder
   ============================================================ */
.finder-box {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px; box-shadow: var(--shadow);
}
.finder-step-label { font-family: var(--f-head); text-transform: uppercase; letter-spacing:.08em; font-size:.8rem; color: var(--tx-3); margin: 0 0 16px; }
.brand-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.brand-btn {
  background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 20px 14px; text-align: center; transition: .16s; color: var(--tx);
}
.brand-btn:hover { border-color: var(--line-2); }
.brand-btn.active { border-color: var(--red); background: var(--red-soft); box-shadow: 0 0 0 1px var(--red) inset; }
.brand-btn .bn { font-family: var(--f-head); font-weight: 700; font-size: 1.15rem; text-transform: uppercase; }
.brand-btn .bc { font-size: .78rem; color: var(--tx-3); margin-top: 3px; }
.brand-btn.active .bc { color: var(--red); }

.series-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.chip {
  background: var(--bg-3); border: 1px solid var(--line); color: var(--tx-2);
  padding: 9px 16px; border-radius: 999px; font-size: .9rem; transition: .15s; font-weight: 500;
}
.chip:hover { border-color: var(--line-2); color: var(--tx); }
.chip.active { background: var(--red); border-color: var(--red); color: #fff; }
.finder-divider { height:1px; background: var(--line); margin: 28px 0; }
.finder-result-head { display:flex; align-items:baseline; justify-content:space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.finder-result-head h3 { font-size: 1.3rem; text-transform: uppercase; }
.finder-result-head span { color: var(--tx-3); font-size:.92rem; }
.finder-empty { color: var(--tx-3); padding: 30px 0; text-align:center; font-size:1.02rem; }
.finder-empty a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   Product grid / cards
   ============================================================ */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.card {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; transition: .18s ease; position: relative;
}
.card:hover { border-color: var(--line-2); }
/* Karten-Hover (Nico 25.09.): „nur ein visueller Hinweis, keine Kunst“ – Karte etwas größer + leichter Schatten,
   rein und raus gleich ruhig. Verworfen: Federn/Anheben und die Neigung zur Maus („wie Balatro“ – „zu viel“). */
/* „Super smooth“ (Nico 25.09.): Beim Zurückzoomen sprang es am Schluss (Bild für Bild gemessen):
   – Bilder (Finder-Karten, „Warum Baxxtar?“, „Die Marke“): nach der Animation schaltete der Browser von der eigenen
     Grafik-Ebene zurück aufs normale Zeichnen und rundete die Position → will-change hält die Ebene dauerhaft.
   – Produktkarten (Nico 28.09.: „ich möchte den vorherigen Effekt zurück, dass die Karten anheben“): die GANZE Karte
     samt Inhalt hebt sich 4 px an + Schatten. Dazwischen (25.09.–28.09.) wuchs nur eine Rahmen-Ebene (::before), der
     Inhalt blieb stehen – wirkte nicht wie Anheben. Bild für Bild gemessen (scratchpad cdp_hoverfilm.mjs, je 3 Läufe):
     Vergrößern (scale 1,03, Stand 25.09. 09:58) zeichnet die Karte am Ende sichtbar nach (2 von 3 Läufen), Anheben mit
     dauerhaft eigener Ebene (will-change: transform, translateY) läuft immer ruhig aus. Nur mit Maus. */
@media (hover: hover) and (pointer: fine) {
  .fd-bild img, .usp-card img, .story-bild img { will-change: transform; }
  .card { will-change: transform; transform: translateY(0);
    transition: transform var(--hover-t) ease, box-shadow var(--hover-t) ease, border-color var(--hover-t) ease; }
  .card:hover { z-index: 3; transform: translateY(-4px); border-color: var(--line-2); box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .32); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .card:hover { transform: none; }
}
.card-img {
  aspect-ratio: 1/1; background: #fff; overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.card-img img { width: 100%; height: 100%; object-fit: contain; padding: 8%; transition: transform .3s ease; mix-blend-mode: normal; }
.card-line {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-family: var(--f-head); font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; padding: 4px 9px; border-radius: 6px; color: #fff;
}
.line-pro  { background: var(--red); }
.line-max  { background: #0f7d55; }
.card-body { padding: 15px 16px 17px; display: flex; flex-direction: column; flex: 1; }
.card-meta { display: flex; gap: 8px; align-items: center; margin-bottom: 9px; }
.card-meta .brand-tag { font-family: var(--f-head); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing:.05em; color: var(--red); }
.card-meta .pack-tag { font-size: .74rem; color: var(--tx-3); }
.card h4 { font-family: var(--f-body); font-weight: 600; font-size: .95rem; line-height: 1.38; margin: 0 0 6px; color: var(--tx); }
.card .series-note { font-size: .8rem; color: var(--tx-3); margin: 0 0 15px; }
/* „Unsere Empfehlung“ (Seiten-Scan 13.10., G6): Zeile über Marke/Packung – nur auf Kameraseiten und im Akku-Finder, wenn
   kameras.json eine Empfehlung für die Kamera hat; als Text statt zweitem Bild-Abzeichen (am Handy stieß es ans Linien-Abzeichen) */
.card .card-emp { font-family: var(--f-head); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--red); margin: 0 0 6px; }
/* „Derzeit nicht verfügbar“ (Nico 13.10.: „einbauen und leicht ausblenden“, Stand assets/verfuegbarkeit.json): Zeile wie
   „Unsere Empfehlung“, aber neutral; Foto (ohne Farbe), Abzeichen und Text leicht ausgeblendet, die weiße Bildfläche bleibt
   (im dunklen Design wurde sie sonst grau). Nur die Inhalte: Rahmen und Hover der Karte bleiben, und die Deckkraft der
   Karte selbst gehört der Filter-Bewegung im Katalog (js/app.js). */
.card .card-weg { font-family: var(--f-head); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tx-2); margin: 0 0 6px; }
.card.is-weg .card-line, .card.is-weg .card-meta, .card.is-weg h4, .card.is-weg .series-note, .card.is-weg .card-cta { opacity: .55; }
.card.is-weg .card-img img { opacity: .45; filter: grayscale(1); }
.card.is-weg .card-line, .card.is-weg .card-meta { filter: grayscale(1); }   /* blasses Rot wäre Rosa – ein zweiter Rotton */
/* „Zu Amazon“ der Produktkarten (Nico 25.09.): 1:1 wie auf watertest.smardy-blue.com (.wcard-cta) – Amazon-Gelb,
   Einkaufswagen, normale Schreibweise, kompakt rechts unten. Gilt für alle Produktkarten: Katalog, Marken-/Serienseiten,
   Akku-Finder (Markup: build_pages.py, js/app.js, js/finder.js). */
.card-cta {
  margin-top: auto; align-self: flex-end; display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 12px; border-radius: 9px; background: var(--amz-gelb); color: var(--amz-gelb-ink);
  font-family: var(--f-body); font-weight: 400; font-size: 12.5px; line-height: 1.2; transition: background-color .15s;
}
.card-cta:hover { background: var(--amz-gelb-hover); }
.card-cta:focus-visible { outline: 3px solid rgba(245, 196, 0, .6); outline-offset: 2px; }
.card-cta svg { width: 13px; height: 13px; flex: none; }
/* Produktkarte → eigene Seite (Nico 09.10., wie bei PATONA: „Klick auf den Artikel“ soll auf die eigene Seite führen, nicht
   nur zu Amazon): Der Titel-Verweis spannt über die ganze Karte (::after), „Zu Amazon“ liegt darüber, das Linien-Abzeichen
   lässt Klicks durch. Ohne Verweis auf Serien- und Kameraseiten und wo die Karte schon auf ihrer Seite steht
   (build_pages.py product_card). */
.card-link { color: inherit; text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius); }
.card-link:focus-visible { outline: none; }
.card-link:focus-visible::after { outline: 2px solid var(--red); outline-offset: -2px; }
.card-cta { position: relative; z-index: 2; }
.card-line { pointer-events: none; }

/* ---------- Controls (toolbar) ---------- */
.toolbar { display: flex; gap: 16px; margin-bottom: 30px; flex-wrap: wrap; align-items: center; }
.search {
  flex: 1; min-width: 240px; position: relative;
}
.search input {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line); color: var(--tx);
  padding: 13px 16px 13px 44px; border-radius: var(--radius-s); font-size: .98rem; font-family: var(--f-body);
  transition: border-color .15s;
}
.search input:focus { outline: none; border-color: var(--red); }
/* Vorschlagsliste (.fs-list) über allem, was danach kommt (Finder: Familien- und Kamera-Chips lagen darüber, 16.10.) */
.search:focus-within { z-index: 40; }
.search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--tx-3); }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--tx-2);
  padding: 11px 18px; border-radius: var(--radius-s); font-family: var(--f-head);
  font-weight: 600; font-size: .9rem; text-transform: uppercase; letter-spacing: .03em; transition: .15s;
}
.tab:hover { color: var(--tx); border-color: var(--line-2); }
.tab.active { background: var(--tx); color: var(--tx-inv); border-color: var(--tx); }
.tab .n { opacity: .5; margin-left: 6px; font-size: .82em; }
.filter-note { color: var(--tx-3); font-size: .9rem; margin-bottom: 22px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.filter-note button { background:none; border:0; color: var(--red); font-size:.9rem; text-decoration: underline; }
/* Trennpunkt vor den Filter-Angaben (js/app.js renderNote/punktPruefen, Nico 15.10.: „Glätte die Trefferzeile“): steht
   absolut mittig in der Lücke hinter der Trefferzahl (left = halbe gap von .filter-note), ändert die Breite also nicht;
   rutschen die Angaben in eine eigene Zeile (am Handy immer), setzt app.js .fn-neu – sonst stünde er am Zeilenanfang */
.fn-bits { position: relative; }
.fn-punkt { position: absolute; left: -5px; transform: translateX(-50%); }
.fn-neu .fn-punkt { display: none; }
/* Kameras zu einer Teil-Eingabe im Katalog („XT“ → X-T1 …, Nico 13.10.): eigene Zeile unter der Trefferzeile, Knöpfe wie
   „Meinst du eines dieser Modelle?“ im Kamera-Check (.kc-vorschlag); ohne die Unterstreichung der Textknöpfe der Trefferzeile */
.kat-kams { flex-basis: 100%; align-items: center; }
.kat-kams > span { color: var(--tx-3); }
.filter-note .kat-kams button { text-decoration: none; }
/* Filterleiste Katalog (Nico 25.09.): Kategorie · Linie · Passend für – kombinierbar (js/app.js); die Zahl an einem
   Knopf = Treffer, wenn man ihn wählt; 0 Treffer → ausgegraut. Linien-Farben wie die Linien-Abzeichen. */
.filterbar { display: grid; gap: 12px; margin-bottom: 24px; }
.f-row { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.f-label { flex: none; width: 104px; padding-top: 13px; font-family: var(--f-head); font-weight: 700; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .12em; color: var(--tx-3); }
.filterbar .tab { padding: 10px 14px; font-size: .86rem; }   /* kompakter → Marken-Reihe passt am Desktop in eine Zeile */
.tab:disabled { opacity: .4; cursor: default; }
.tab:disabled:hover { color: var(--tx-2); border-color: var(--line); }
.tab.tab-pro::before, .tab.tab-max::before { content: ""; display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.tab.tab-pro::before { background: var(--red); }
.tab.tab-max::before { background: #0f7d55; }
.tab.tab-pro.active { background: var(--red); border-color: var(--red); color: #fff; }
.tab.tab-max.active { background: #0f7d55; border-color: #0f7d55; color: #fff; }
.tab.tab-pro.active::before, .tab.tab-max.active::before { background: #fff; }
@media (max-width: 720px) {
  /* Handy: Beschriftung über der Reihe, Reihe wischbar statt 3–4 Zeilen hoch */
  .f-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .f-label { width: auto; padding-top: 0; }
  .filterbar .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -10px; padding: 0 44px 2px 10px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  .filterbar .tabs::-webkit-scrollbar { display: none; }
  .filterbar .tab { flex: none; padding: 9px 14px; font-size: .82rem; }
}

/* ============================================================
   Story / values
   ============================================================ */
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: stretch; }
.story-side { display: flex; }
.story-side .medallion { height: 100%; }
/* Hochformat-Bild statt Logo (Nico 25.09.): ein statisches Motiv (Wechsel verworfen), füllt die Spalte */
.story-bild { position: relative; flex: 1; margin: 0; min-height: 460px; border-radius: 24px; overflow: hidden; background: #0d0e10; box-shadow: var(--shadow); }
.story-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.story-bild:hover img { transform: scale(1.05); }   /* gleicher Zoom wie die „Warum Baxxtar?“-Kacheln (Nico 25.09.) */
@media (max-width: 1024px) {
  /* Tablet/Handy: Bild als Band über dem Text, Akku bleibt im Ausschnitt (liegt bei 40–60 % der Bildhöhe) */
  #marke .story-side { order: -1; }
  .story-bild { flex: none; width: 100%; min-height: 0; aspect-ratio: 4 / 3; max-height: 520px; border-radius: 18px; }
}
.values { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; }
.value {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 22px;
}
/* Werte ohne Icons: kurze rote Linie als Akzent (Nico 25.09.) */
.value::before { content: ""; display: block; width: 28px; height: 2px; background: var(--red); margin-bottom: 14px; }
.value h4 { font-family: var(--f-head); text-transform: uppercase; font-size: 1.02rem; letter-spacing: .02em; margin: 0 0 6px; }
.value p { font-size: .9rem; color: var(--tx-2); margin: 0; line-height: 1.5; }
.story-copy .eyebrow { color: var(--tx-2); }
.story-copy h2 { font-size: var(--fs-h2); text-transform: uppercase; letter-spacing: -.01em; margin: 0 0 16px; }
.story-copy p { color: var(--tx-2); font-size: 1.05rem; }
.story-copy .big { color: var(--tx); font-size: 1.14rem; line-height: 1.55; font-weight: 500; margin-bottom: 18px; }
.story-copy p { font-size: 1rem; }

/* ============================================================
   Lines / guide cards
   ============================================================ */
.lines { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }   /* Pro + MaxProtect (seit 28.09. ohne Standard) */
.line-card {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 26px; position: relative; overflow: hidden;
}
/* Linienname groß in der Linienfarbe statt kleiner Pille (Nico 25.09.: „der Fokus liegt auf der Unterscheidung – das
   geht am besten mit dem Namen“, kohärent zur Treffer-Überschrift im Akku-Finder); darunter der Claim in normaler Schreibweise */
.line-card .line-name { font-family: var(--f-head); font-weight: 800; text-transform: uppercase; line-height: 1;
  font-size: clamp(2rem, 3.2vw, 2.6rem); letter-spacing: -.005em; margin: 0 0 8px; }
.line-card .line-name.l-pro { color: var(--red); }
.line-card .line-name.l-max { color: #0f7d55; }
.line-card .line-claim { font-family: var(--f-body); font-weight: 600; font-size: 1.08rem; color: var(--tx); margin: 0 0 10px; }
.line-card p { color: var(--tx-2); font-size: .96rem; margin: 0 0 18px; }
.line-card ul { list-style: none; padding: 0; margin: 0; }
.line-card li { display:flex; gap:10px; align-items:flex-start; color: var(--tx-2); font-size:.9rem; padding: 6px 0; }
.line-card li svg { width:17px; height:17px; color: var(--red); flex:none; margin-top:3px; }
.line-card .strip { position:absolute; top:0; left:0; width:4px; height:100%; }
/* Linien-Karten als Link in den Katalog, dort vorgefiltert (/produkte/?linie=…, Nico 25.09.) */
a.line-card { display: flex; flex-direction: column; color: inherit; text-decoration: none;
  transition: border-color .15s, box-shadow .2s, transform .2s; }
a.line-card:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-2px); }
.line-card .line-cta { margin-top: auto; padding-top: 22px; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-head); font-weight: 700; font-size: .84rem; text-transform: uppercase; letter-spacing: .05em; color: var(--red); }
.line-card .line-cta svg { width: 16px; height: 16px; transition: transform .2s; }
a.line-card:hover .line-cta svg { transform: translateX(3px); }
/* Rahmen + Streifen in der Linienfarbe, bei beiden gleich (Nico 25.09.: vorher war nur PRO rot umrandet);
   dunkles Design: hellere Töne wie beim Liniennamen (Block „DUNKLES DESIGN“) */
.line-card.lc-pro { --lc: var(--red); }
.line-card.lc-max { --lc: #0f7d55; }
.lc-pro, .lc-max, a.lc-pro:hover, a.lc-max:hover { border-color: var(--lc); }
.lc-pro .strip, .lc-max .strip { background: var(--lc); }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: var(--sec-head-gap); }
.feature { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 18px 15px; display: flex; gap: 13px; align-items: flex-start; }
.feature .fi { width: 38px; height: 38px; border-radius: 10px; background: var(--red-soft); display:flex; align-items:center; justify-content:center; flex: none; }
.feature .fi svg { width: 20px; height: 20px; color: var(--red); }
.feature .feat-txt { min-width: 0; }
.feature h4 { font-family: var(--f-head); text-transform: uppercase; font-size: .92rem; margin: 0 0 4px; letter-spacing: .01em; }
.feature p { font-size: .85rem; color: var(--tx-2); margin: 0; line-height: 1.5; }
@media (max-width: 720px) { .feature { flex-direction: column; gap: 10px; } }

/* ============================================================
   CTA band + footer
   ============================================================ */
.cta-band { position: relative; overflow: hidden; background: var(--bg-1); border-top:1px solid var(--line); }
.cta-band::before { content:""; position:absolute; inset:0; background: radial-gradient(680px 300px at 50% -30%, rgba(225,27,21,0.22), transparent 70%); }
.cta-inner { position: relative; text-align: left; padding-top: var(--sec-y); padding-bottom: var(--sec-y); }
.cta-inner h2 { font-size: var(--fs-h2); text-transform: uppercase; margin-bottom: 16px; }
.cta-inner .eyebrow { color: var(--tx-2); }
.cta-inner p:not(.eyebrow) { color: var(--tx-2); font-size: 1.1rem; max-width: 560px; margin: 0 0 32px; }

/* Service-Band „Kamera nicht gefunden?“ – Startseite vor dem Footer (Leitfaden Lars 5.1, Nico 01.10.) */
.service-band { padding: clamp(36px, 5vw, 56px) 0; }
.sb-inner { display: flex; align-items: center; gap: 18px 28px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 3vw, 30px) clamp(20px, 3.4vw, 36px); }
.sb-ic { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff; }
.sb-ic svg { width: 26px; height: 26px; }
.sb-text { flex: 1; min-width: 0; }
.sb-text h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); text-transform: uppercase; margin: 0 0 6px; }
.sb-text p { margin: 0; color: var(--tx-2); }
.sb-inner .btn { flex: none; }
@media (max-width: 720px) { .sb-inner { flex-direction: column; align-items: flex-start; } }

/* Katalog + Amazon-Store: zwei Karten nebeneinander (≤ 860px untereinander).
   .duo-amazon = Amazon-Farbschema; dieselbe Karte nutzt build_pages.py (cta_band) auf allen Unterseiten. */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.duo-card { --duo-pad: clamp(24px, 3.6vw, 44px); position: relative; isolation: isolate; overflow: hidden; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: var(--duo-pad); border-radius: var(--radius); }
.duo-card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.duo-card h2 { font-size: var(--fs-h2); text-transform: uppercase; margin: 0 0 14px; text-wrap: balance; }
.duo-card p:not(.eyebrow) { font-size: 1rem; line-height: 1.6; max-width: 480px; margin: 0 0 28px; overflow-wrap: break-word; }
.duo-card .btn { margin-top: auto; }
.duo-katalog { background: var(--bg-2); border: 1px solid var(--line); }
.duo-katalog .eyebrow { color: var(--tx-2); }
.duo-katalog p:not(.eyebrow) { color: var(--tx-2); }
/* Store-Karte seit 16.10. (Nico: „wäre eine Illustration bzw. ein Bild cool statt dem fehlgeleitetem blau welches nirgends
   sonst auf der Seite auftaucht“): dunkler Grund der Seite (#141619 = Hintergrund des dunklen Designs) statt Amazon-Blau,
   rechts eine stilisierte Illustration (img/store/energie.svg aus tools/store_illustration.py – Akku als Gitter mit roten
   Kanten und Energie-Ringen; das Produktfoto davor war Nico zu sehr „Werbung aus den 2000ern“); Kicker und Knopf bleiben Amazon-Gelb
   („im Bezug auf Amazon immer dieses Gelb“). Aufbau als Raster: Text links, die Illustration in einer eigenen rechten
   Spalte mittig und mit Luft (Nico 16.10.: „Sieht gut aus, ist aber echt mies platziert“ – vorher klebte sie über die volle
   Höhe am rechten Rand, dazwischen eine große Lücke); bis 600 px Bild über dem Text.
   Mitte (Nico 16.10.: „Mach doch den Akku auf Desktop in die Mitte zwischen rechter Kante des Textes und rechtem Ende des
   Balkens“): Spaltenabstand = Innenabstand der Karte (--duo-pad) – die Bildspalte beginnt so weit hinter dem Text, wie sie
   vor dem Kartenrand endet; ihre Mitte (= Mitte des Akkus, die Zeichnung ist waagrecht symmetrisch) liegt damit genau
   zwischen Textende und Kartenrand. */
.duo-amazon { background: #141619; color: #fff; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 36%);
              grid-template-rows: auto auto auto 1fr; column-gap: var(--duo-pad); align-items: start; }
.duo-amazon::before { background: radial-gradient(40% 70% at 78% 50%, rgba(255,255,255,.06), transparent 70%); }
.duo-amazon > :not(.duo-bild) { grid-column: 1; position: relative; z-index: 1; }
.duo-amazon picture { display: contents; }   /* <picture> (Handy-Fassung) ohne eigene Box – das <img> ist das Rasterelement */
.duo-amazon .btn { justify-self: start; }
.duo-bild { grid-column: 2; grid-row: 1 / -1; align-self: center; justify-self: center; width: 100%; max-width: 310px;
            height: auto; max-height: 270px; object-fit: contain; pointer-events: none; }
.duo-amazon .eyebrow { color: var(--amz-gelb); }
.duo-amazon .eyebrow::before { background: var(--amz-gelb); }
.duo-amazon h2 { color: #fff; }
.duo-amazon p:not(.eyebrow) { color: rgba(255,255,255,.76); }
/* Startseite (Karte neben dem Katalog, halbe Breite): Kicker, Überschrift und Knopf über die volle Breite, die Illustration
   neben dem Absatz – in der schmalen Textspalte bräche die Überschrift sonst dreizeilig um. 861–1023 px: Bild weg (zu klein) */
.duo .duo-amazon .eyebrow, .duo .duo-amazon h2, .duo .duo-amazon .btn { grid-column: 1 / -1; }
.duo .duo-bild { grid-row: 3; }
/* Startseite ab 1024 px (Karte neben dem Katalog) – Nico 16.10.: „auf der Startseite ist der Akku noch viel viel zu klein“
   (neben dem Absatz allein war nur ein flacher Streifen frei, Akku gut 70 px breit). Jetzt: Textspalte genau so breit wie
   die zweizeilige Überschrift (min-content; „Baxxtar-Energie“ trennt dank .nw nicht am Bindestrich), Kicker, Überschrift und
   Absatz darin, daneben eine hohe Bildspalte mit der schmalen Fassung img/store/energie-schmal.svg (nur der innere Ring,
   <picture> in index.html), der Knopf darunter über die volle Breite. Der Spaltenabstand (= Innenabstand) hält den Akku
   mittig zwischen Textende und Kartenrand; die 1fr-Zeile 4 nimmt die Resthöhe auf, damit sich die Textzeilen nicht
   auseinanderziehen. */
.duo-card h2 .nw { white-space: nowrap; }
@media (min-width: 1024px) {
  .duo .duo-amazon { grid-template-columns: min-content minmax(0, 1fr); grid-template-rows: auto auto auto 1fr auto; }
  .duo .duo-amazon .eyebrow, .duo .duo-amazon h2 { grid-column: 1; }
  .duo .duo-amazon .btn { grid-row: 5; }
  .duo .duo-bild { grid-row: 1 / 5; margin-bottom: 22px; }   /* Luft zum Knopf: die Akku-Ecke reicht fast bis an den Bildrand */
}
/* Unterseiten (Karte über die volle Breite): Textblock senkrecht mittig neben der Illustration, Knopf direkt unter dem Absatz.
   Die Textspalte ist nur so breit wie der Text selbst (max-content; wird es eng, bekommt die Bildspalte trotzdem 36 %) –
   sonst stünde zwischen Textende und Bild eine leere Fläche und der Akku säße zu weit rechts. */
.wrap:not(.duo) > .duo-amazon { grid-template-columns: minmax(0, max-content) minmax(36%, 1fr); grid-template-rows: 1fr auto auto auto auto 1fr; }
.wrap:not(.duo) > .duo-amazon .eyebrow { grid-row: 2; }
.wrap:not(.duo) > .duo-amazon h2 { grid-row: 3; }
.wrap:not(.duo) > .duo-amazon p:not(.eyebrow) { grid-row: 4; }
.wrap:not(.duo) > .duo-amazon .btn { grid-row: 5; margin-top: 0; }
@media (max-width: 1023px) and (min-width: 861px) {
  .duo .duo-amazon { grid-template-columns: minmax(0, 1fr); }
  .duo .duo-bild { display: none; }
}
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; gap: 12px; } }
/* Handy: Bild über dem Text, enger zugeschnittene Fassung img/store/energie-handy.svg (<picture>, ohne den äußersten Ring)
   und breiter – Nico 16.10.: „Bei Mobil den Akku größer“ (bei 375 px Akku vorher gut 100, jetzt gut 150 px breit) */
@media (max-width: 600px) {
  .duo-amazon { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .duo-bild, .duo .duo-bild { grid-column: 1; grid-row: auto; order: -1; width: min(100%, 300px); max-height: none; margin: -6px 0 10px; }
  .wrap:not(.duo) > .duo-amazon { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .wrap:not(.duo) > .duo-amazon > * { grid-row: auto; }
}
@media (max-width: 480px) {
  .duo-card { padding: 22px 18px; }
  .duo-card .btn { width: 100%; justify-content: center; padding: 14px 12px; letter-spacing: .02em; }   /* bleibt einzeilig */
}

footer { background: var(--bg); border-top: 1px solid var(--line); padding: 54px 0 40px; }
.footer-brand { margin-bottom: 38px; }
.footer-brand .brand { margin-bottom: 12px; }
.footer-claim { color: var(--tx-3); font-style: italic; font-size: .96rem; margin: 0; }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 24px; margin-bottom: 40px; }
.footer-col h5 { font-family: var(--f-head); text-transform: uppercase; letter-spacing: .05em; font-size: .84rem; color: var(--tx); margin: 0 0 15px; }
.footer-col a { display: block; color: var(--tx-3); font-size: .92rem; padding: 6px 0; transition: color .15s; }
.footer-col a:hover { color: var(--red); }
/* Hinweis/Marken-Disclaimer im Mittelsatz (Nico 28.09.): Text zentriert, Block mittig */
.footer-legal { border-top: 1px solid var(--line); padding-top: 28px; margin-bottom: 26px; text-align: center; }
.footer-legal p { color: #565c64; font-size: .8rem; line-height: 1.6; max-width: 860px; margin: 0 auto; }
.footer-legal b { color: var(--tx-2); font-weight: 600; }
.footer-copy { text-align: center; margin-bottom: 24px; }
.footer-copy p { color: var(--tx-3); font-size: .85rem; margin: 4px 0; }
.footer-copy a { color: var(--tx-2); }
.footer-copy a:hover { color: var(--red); }
.footer-social { display: flex; justify-content: center; gap: 13px; }
.footer-social a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; color: var(--tx-2); transition: .16s; }
.footer-social a:hover { border-color: var(--red); color: var(--red); background: var(--red-soft); }
.footer-social svg { width: 19px; height: 19px; }
@media (max-width: 720px) {
  .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .grid, .features { grid-template-columns: repeat(3, 1fr); }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { order: -1; }
  .medallion { width: 220px; height: 220px; }
  .story-grid { grid-template-columns: 1fr; gap: 34px; }
  .brand-grid { grid-template-columns: repeat(4, 1fr); }
}
/* Linien-Karten (Ratgeber): seit 28.09. zwei (Pro + MaxProtect) – nebeneinander bis zum Tablet, am Handy untereinander */
@media (max-width: 720px) {
  .lines { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .nav-links, .nav-cta .btn { display: none; }
  .burger { display: inline-flex; }
  .nav-open .nav-links {
    display: flex; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column;
    background: var(--bg-1); border-bottom: 1px solid var(--line); padding: 18px 24px; gap: 6px;
  }
  /* Handy: Unterpunkte von „Produkte“ immer sichtbar, eingerückt */
  .nav-drop { flex-direction: column; align-items: flex-start; }
  .nav-pfeil { display: none; }
  .nav-menue { position: static; display: flex; min-width: 0; margin: 2px 0 4px; padding: 0 0 0 16px;
    background: none; border: 0; box-shadow: none; }
  .nav-links .nav-menue a { padding: 5px 0; font-size: .86rem; }
  .nav-links .nav-menue a:hover { background: none; color: var(--tx); }
  .grid, .features, .brand-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-stats { gap: 22px; flex-wrap: wrap; }
  .finder-box { padding: 22px; }
  .foot-grid { grid-template-columns: 1fr; gap: 30px; }
  .toolbar { flex-direction: column; align-items: stretch; }
}
@media (max-width: 460px) {
  .grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .card h4 { font-size: .88rem; }
  .brand-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Overflow-Härtung — Grid/Flex-Items dürfen schrumpfen,
   verhindert horizontalen Seiten-Überlauf auf schmalen Screens
   ============================================================ */
.grid > *, .values > *, .brand-grid > *, .features > *, .lines > *,
.card, .card-body, .value, .feature, .line-card, .brand-btn,
.hero-copy, .story-copy, .finder-box, .trust-row .t { min-width: 0; }
.card h4, .card .series-note, .card-meta,
.value p, .feature p, .lead, .story-copy p, .line-card p { overflow-wrap: break-word; }
.card-meta { flex-wrap: wrap; }
@media (max-width: 720px) {
  .hero-visual .ping { display: none; }          /* schwebende Badges raus (Überlauf + Enge) */
  .medallion { width: 200px; height: 200px; }
}

/* ============================================================
   HERO-SLIDER + überlappende Wisch-Kacheln (Startseite)
   ============================================================ */
.hero-slider { position: relative; background: var(--bg-1); }
.hero-top { position: relative; }
.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.slides::-webkit-scrollbar { display: none; }
.slide {
  position: relative; flex: 0 0 100%; scroll-snap-align: center; min-height: 700px;
  scroll-snap-stop: always;   /* je Wischen genau ein Bild weiter (Nico 01.10.: „zu viel Spiel beim Scrollen“) */
  background: linear-gradient(145deg, var(--c1), var(--c2));
  display: flex; align-items: flex-end; padding: 40px 26px 286px; text-decoration: none; overflow: hidden; isolation: isolate;
}
.slide::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.35)); z-index:-1; }
.slide-motif { position: absolute; right: -70px; top: 44%; transform: translateY(-50%); opacity: .16; z-index: -1; }
.slide-motif svg { width: 360px; height: 360px; color: #fff; }
/* Foto-Slides (Bildkonzept: s/w Lifestyle + roter Bogen) */
.slide-photo { background: var(--bg); }
.slide-photo::before { content:""; position:absolute; inset:0; background: var(--img) var(--focus-x-d, 50%) center/cover; filter: contrast(1.03); z-index:-3; }
/* --focus-x-d = waagrechter Bildausschnitt ab 721px (Tablet/Desktop), --focus-x = Handy. Bei Markenbildern so wählen,
   dass der Akku rechts neben dem Text liegt und nicht unter dem Pfeil (Rechnung: tools/marken_bilder.py-Kommentar). */
.slide-photo::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(13,14,16,.82), rgba(13,14,16,.30) 44%, rgba(13,14,16,.66)); z-index:-1; }
.slide-arc { position:absolute; top:-34%; right:-30%; width:74%; aspect-ratio:1; border-radius:50%; border:34px solid var(--red); z-index:-2; opacity:.9; pointer-events:none; }
/* Foto-Slides: der rote Akku IST der Farbakzent → kein konkurrierender roter Bogen */
.slide-photo .slide-arc { display: none; }
.slide-copy { max-width: 88%; position: relative; z-index: 1; }
.slide-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--f-head); text-transform: uppercase; letter-spacing: .13em; font-size: .76rem; font-weight: 700; color: rgba(255,255,255,.9); margin-bottom: 15px; }
.slide-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.85); }
.slide h2 { font-family: var(--f-head); font-weight: 800; font-size: var(--fs-hero); text-transform: uppercase; color: #fff; line-height: 1.02; letter-spacing: -.01em; text-wrap: balance; margin: 0; }
.slide p { color: rgba(255,255,255,.92); font-size: 1.02rem; margin: 14px 0 0; max-width: 330px; line-height: 1.45; }
.slide .slide-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-family: var(--f-head); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: .84rem; color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); padding: 9px 16px; border-radius: 9px; }
.slide .slide-go svg { width: 15px; height: 15px; }

/* Suche auf dem Slider */
.slider-search { position: absolute; left: 16px; right: 16px; bottom: 157px; z-index: 20; }
.slider-search input { width: 100%; background: #fff; border: 0; border-radius: 14px; padding: 16px 18px 16px 50px; font-size: 1rem; color: #16181c; font-family: var(--f-body); }
.slider-search input::placeholder { color: #8a9098; }
.slider-search input:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.slider-search .si { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: #99a; pointer-events: none; }

/* Dots */
.dots { position: absolute; left: 10px; right: auto; bottom: 241px; display: flex; justify-content: flex-start; gap: 7px; z-index: 15; }
.dots button { width: 7px; height: 7px; border-radius: 50%; border: 0; background: rgba(255,255,255,.5); padding: 0; cursor: pointer; transition: .22s; }
.dots button.active { width: 22px; border-radius: 4px; background: #fff; }
/* Slider-Pfeile (von js/app.js gebaut: .slider-nav = „‹ Punkte ›“)
   Handy + Tablet: Steuerzeile auf der Linie der Punkte (Mitte = alte Punkt-Höhe). */
.slider-nav { position: absolute; left: 10px; bottom: 226px; display: flex; align-items: center; gap: 12px; z-index: 15; }
.slider-nav .dots { position: static; }
.slide-nav { width: 36px; height: 36px; flex: none; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
             background: rgba(255,255,255,.9); border: 1px solid var(--line-2); color: var(--tx); box-shadow: 0 4px 14px rgba(20,22,26,.10);
             transition: background .2s, color .2s, border-color .2s; }
.slide-nav:hover { border-color: var(--red); color: var(--red); }
.slide-nav:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.slide-nav svg { width: 18px; height: 18px; }
@media (min-width: 721px) { .slider-nav { left: max(24px, calc(50% - 576px)); } }
/* Großer Desktop: Zeile auflösen, Punkte zurück an ihren Platz. Pfeile als großes, schlankes, transparentes
   Overlay OHNE Kreis, senkrecht mittig im Hero-Bild. Waagrecht genau mittig zwischen Seitenrand und
   Inhaltskante (Nicos Wunsch); bei 1280px sitzen sie am Rand – darunter läge der linke Pfeil auf dem
   Slide-Text (deshalb erst ab 1280px). Links liegt der helle Schleier → dunkler Pfeil,
   rechts das Foto → heller Pfeil mit leichtem Schatten. */
@media (min-width: 1280px) {
  .slider-nav { display: contents; }
  .slider-nav .dots { position: absolute; }
  .slide-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 16; width: 52px; height: 88px;
               background: none; border: 0; border-radius: 0; box-shadow: none; transition: color .2s, opacity .2s; }
  .slide-nav svg { width: 60px; height: 60px; flex: none; }
  .slide-nav svg path { stroke-width: 1.4; }
  /* mittig zwischen Seitenrand und Inhaltskante: Kante = (Breite − 1152px) / 2 → Pfeilmitte bei der Hälfte (Knopf 52px breit) */
  .slide-nav-prev { left: max(4px, calc((100% - 1152px) / 4 - 26px)); color: rgba(23,24,27,.30); }
  .slide-nav-next { right: max(4px, calc((100% - 1152px) / 4 - 26px)); color: rgba(255,255,255,.55); filter: drop-shadow(0 1px 3px rgba(0,0,0,.35)); }
  .hero-top:hover .slide-nav-prev { color: rgba(23,24,27,.55); }
  .hero-top:hover .slide-nav-next { color: rgba(255,255,255,.85); }
  .hero-top .slide-nav:hover { color: var(--red); border-color: transparent; }
}

/* Überlappende Kacheln */
/* padding oben 8 / unten 20 = Luft für die vergrößerte Kachel + Schatten beim Hovern (die Reihe schneidet sonst ab),
   per margin −130/−12 ausgeglichen → Kacheln und Folgeinhalt liegen wie vorher (Überlappung 122 px) */
.qcards { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 16px; padding: 8px 16px 20px; margin-top: -130px; margin-bottom: -12px; position: relative; z-index: 10; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.qcards::-webkit-scrollbar { display: none; }
/* Kachelreihe am Touch-Gerät: je Wischen eine Kachel (Nico 01.10.: Scrollverhalten des Sliders „auf alles andere übertragen“);
   mit Maus rastet die Reihe weiterhin nicht ein (scroll-snap-type: none, s. u.) */
.qcards > .qc { scroll-snap-stop: always; }
.qc { flex: 0 0 auto; width: 210px; height: 245px; box-sizing: border-box; scroll-snap-align: start; background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 10px; text-decoration: none; display: flex; flex-direction: column; gap: 8px; transition: .16s; }
.qc:hover { border-color: var(--line-2); }
/* Kachel-Hover (Nico 25.09.): Karten-Effekt übertragen (etwas größer + Schatten) und dazu die Kachel rot, Schrift
   weiß – nur ein visueller Hinweis, rein/raus gleich ruhig. Ersetzt das Hineinzoomen ins Foto. Nur mit Maus. */
@media (hover: hover) and (pointer: fine) {
  /* Kein Einrasten mit Maus (Nico 25.09., Video): die Reihe rastet an der linken Kante der vordersten Kachel ein –
     wird die beim Hovern 3 % größer, rückt die Kante 3 px nach außen und der Browser zieht die ganze Reihe nach
     (sprang 3 px, „›“ blitzte auf). Die Pfeile springen ohnehin exakt kachelweise; Touch behält das Einrasten. */
  .qcards { scroll-snap-type: none; }
  /* wie die Produktkarten: die Rahmen-Ebene wächst (~3 %) und wird rot, der Inhalt bleibt scharf (kein Nachschärfen) */
  .qc { position: relative; isolation: isolate; background: transparent; border-color: transparent; transition: none; }
  .qc::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line);
    transition: inset var(--hover-t) ease, background-color var(--hover-t) ease, border-color var(--hover-t) ease, box-shadow var(--hover-t) ease; }
  .qc-t, .qc-count { transition: color var(--hover-t) ease; }
  .qc:hover { border-color: transparent; }
  .qc:hover::before { inset: -5px -4px; background: var(--red); border-color: var(--red); box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .35); }
  .qc:hover .qc-t, .qc:hover .qc-count { color: #fff; }
  /* Serien-Karten mit freigestelltem Akku (25.09.): roter Rahmen statt roter Fläche – auf Rot verschwände der rote Akku,
     eine helle Platte darunter wäre wieder ein „farbiger Hintergrund“ */
  .qc.qc-produkt:hover::before { background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--red), 0 8px 16px -8px rgba(0, 0, 0, .35); }
  .qc.qc-produkt:hover .qc-t { color: var(--red); }
  .qc.qc-produkt:hover .qc-count { color: var(--tx-3); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .qc:hover::before { inset: -1px; }
}
.qc-t { order: 0; font-family: var(--f-head); font-weight: 700; text-transform: uppercase; font-size: .92rem; line-height: 1.1; letter-spacing: .02em; color: var(--tx); text-align: left; }
.qc-count { order: 1; font-size: .78rem; line-height: 1.1; color: var(--tx-3); text-align: left; margin: 0; }
.qc-motif { order: 2; width: 100%; height: 175px; flex: none; border-radius: 11px; background: linear-gradient(145deg, var(--c1), var(--c2)); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.qc-motif::before { content: ""; position: absolute; inset: 0; background: radial-gradient(58% 52% at 50% 45%, rgba(255,255,255,.18), rgba(255,255,255,0) 70%); }
.qc-motif svg { position: relative; z-index: 1; width: 54px; height: 54px; color: rgba(255,255,255,.92); }
.qc-motif .qc-prod { position: relative; z-index: 1; width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 9px 13px rgba(0,0,0,.34)); }
.qc-badge { position: absolute; top: 9px; left: 9px; right: auto; font-family: var(--f-head); font-size: .62rem; font-weight: 800; letter-spacing: .06em; background: rgba(0,0,0,.42); color: #fff; padding: 4px 8px; border-radius: 5px; }

/* Kachel-Navigation (Pfeile zum Durchklicken) — von JS um .qcards gelegt */
.qcards-wrap { position: relative; margin-top: -130px; margin-bottom: -12px; }   /* −130/−12: siehe .qcards */
.qcards-wrap > .qcards { margin-top: 0; margin-bottom: 0; }
.qc-nav { display: none; position: absolute; top: 131px; transform: translateY(-50%); width: 42px; height: 42px; padding: 0; border-radius: 50%; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--tx); align-items: center; justify-content: center; cursor: pointer; z-index: 12; transition: border-color .15s, color .15s; }
.qc-nav:hover { border-color: var(--red); color: var(--red); }
.qc-nav svg { width: 22px; height: 22px; }
.qc-nav[hidden] { display: none; }
.qc-nav-prev { left: 4px; }
.qc-nav-next { right: 4px; }
@media (min-width: 721px) {
  /* je 6 px Luft links/rechts für die vergrößerte Kachel: Rahmen 6 px nach links, JS gibt ihm 12 px mehr Breite
     (js/app.js + Footer-Skript in build_pages.py) → sichtbare Kacheln und Pfeile liegen wie vorher */
  .qcards-wrap { margin-left: calc(max(24px, calc(50% - 576px)) - 6px); margin-right: auto; }
  .qcards-wrap > .qcards { max-width: none; margin: 0; padding-left: 6px; padding-right: 6px; scroll-padding-left: 6px; }
  .qc-nav { display: flex; }
  .qc-nav-prev { left: -6px; }
  .qc-nav-next { right: -6px; }
}

@media (min-width: 721px) {
  /* Hero-Kopie ins zentrierte .wrap-Raster (gleiche Linie wie Kacheln + Sektionen) */
  .slide { min-height: 700px; padding: 40px 0 286px; }
  .slide-copy { max-width: var(--wrap); width: 100%; margin: 0 auto; padding: 0 24px; }
  .slide h2 { max-width: 560px; }
  /* Kacheln zentriert im .wrap-Raster (Höhe/Überlappung aus der Basis) */
  .qcards { max-width: var(--wrap); margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; scroll-padding-left: 24px; }
  /* Suche + Slider-Punkte auf dieselbe linke Linie (137px @ .wrap-Raster) */
  .slider-search { left: max(24px, calc(50% - 576px)); right: auto; transform: none; width: min(680px, calc(100% - 48px)); }
  .dots { left: max(24px, calc(50% - 576px)); right: auto; }
}

/* Mobil: einheitlich 10px linker/rechter Rand — NACH den Basis-Regeln, damit es greift */
@media (max-width: 720px) {
  .slide { padding-left: 10px; padding-right: 10px; }
  .qcards { padding-left: 10px; padding-right: 10px; scroll-padding-left: 10px; }
  .slider-search { left: 10px; right: 10px; }
  /* Foto-Slides: mobiler Mittel-Ausschnitt auf den Motiv-Fokus schieben (--focus-x je Slide) */
  .slide-photo::before { background-position: var(--focus-x, 50%) center; }
}
/* Handy: Reihenfolge per order – seit 28.09. (Käufer-Check, Nico: „Okay“) Suche und Marken-Kacheln ganz oben, darunter
   „Warum Baxxtar?“, dann der Slider (25.09. standen die Vorteile oben). Desktop/Tablet unverändert. Technik:
   .start-kopf (index.html) = Flex-Spalte; die Slider-Sektion und .hero-top geben ihre Kinder per display: contents frei,
   order sortiert sie. Suche, Steuerzeile und Kacheln liegen dadurch nicht über dem Slider, sondern im normalen Fluss. */
@media (max-width: 720px) {
  .start-kopf { display: flex; flex-direction: column; background: var(--bg-1); }
  .start-kopf .hero-slider, .start-kopf .hero-top { display: contents; }
  .start-kopf .slider-search { order: 1; position: relative; left: auto; right: auto; bottom: auto; margin: 22px 10px 0; }
  .start-kopf .qcards-wrap, .start-kopf .hero-slider > .qcards { order: 2; margin-top: 6px; margin-bottom: 0; }
  .start-kopf #vorteile { order: 3; }
  .start-kopf .slides { order: 4; margin-top: 12px; }
  /* Am Handy steht der Slider unter „Warum Baxxtar?“ – sein erstes Foto lädt erst, wenn er in die Nähe kommt (js/app.js
     setzt .bilder-an; Performance 05.10.), damit es nicht mit den sichtbaren Bildern um die Leitung konkurriert */
  .start-kopf #slides:not(.bilder-an) > .slide-photo::before { background-image: none; }
  .start-kopf .slide { padding-bottom: 14px; }
  .start-kopf .slider-nav { order: 5; position: static; margin: 4px 10px 34px; }
}

/* ============================================================
   SUBPAGES — Hub (Ebene 2) & Serien-Landingpages (Ebene 3)
   ============================================================ */

/* Breadcrumb */
.breadcrumb { border-bottom: 1px solid var(--line); background: var(--bg-1); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 14px 0; font-size: .84rem; }
.breadcrumb li { display: flex; align-items: center; gap: 8px; color: var(--tx-3); }
.breadcrumb li:not(:last-child)::after { content: "/"; color: var(--tx-3); opacity: .5; }
.breadcrumb a { color: var(--tx-2); font-family: var(--f-head); text-transform: uppercase; letter-spacing: .03em; }
.breadcrumb a:hover { color: var(--red); }
.breadcrumb li[aria-current] { color: var(--tx); font-family: var(--f-head); text-transform: uppercase; letter-spacing: .03em; }

/* Sub-Hero = Seitenkopf von Katalog, Serien-, V-Mount-/Taschen-Seite und Akku-Finder – EINHEITLICH (Nico 25.09.:
   „Taschen recht klein, Katalog sehr groß – bitte angleichen“): natürliche Höhe, gleicher Innenabstand, Text bündig mit
   dem Logo. Vorher 700 px Mindesthöhe + Flex-Zentrierung → Katalogtext 256 px, Serientext ~40 px eingerückt. */
.subhero { position: relative; padding: clamp(40px, 6vw, 64px) 0 clamp(32px, 5vw, 52px); overflow: hidden; }
.subhero::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background: var(--bg);           /* ohne roten Schimmer oben rechts (Nico 01.10.: „der macht keinen Sinn“) */
}
.subhero .kicker { font-family: var(--f-head); text-transform: uppercase; letter-spacing: .16em; font-size: .8rem; font-weight: 700; color: var(--red); margin: 0 0 14px; }
.subhero h1 { font-size: var(--fs-h1); text-transform: uppercase; text-wrap: balance; }
.subhero h1 .r { color: var(--red); }
.subhero .lead { font-size: var(--fs-lead); color: var(--tx-2); max-width: 640px; margin: 18px 0 0; }
.subhero .tagline { font-family: var(--f-head); font-weight: 600; color: var(--silver); font-size: 1.05rem; margin: 6px 0 0; }
/* .subhero-lite (V-Mount, Taschen, Finder) war die kompakte Variante – seit 25.09. sind alle Seitenköpfe gleich,
   die Klasse bleibt nur als Kennzeichen im HTML */

/* Marken-Hub Hero mit Grafik (wie Ebene-1-Slide, statisch) + Wisch-Kacheln darunter */
.hub-hero { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(145deg, var(--c1), var(--c2)); padding: 42px 0 66px; min-height: 700px; display: flex; flex-direction: column; justify-content: center; }
.hub-hero::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 42%, rgba(0,0,0,.42)); z-index:-1; }
.hub-hero .slide-motif { position: absolute; right: -60px; top: 50%; transform: translateY(-50%); opacity: .14; z-index: -1; }
.hub-hero .slide-motif svg { width: 300px; height: 300px; color: #fff; }
.hub-hero h1 { font-family: var(--f-head); font-weight: 800; font-size: var(--fs-h1); text-transform: uppercase; color: #fff; line-height: 1.05; letter-spacing: -.01em; text-wrap: balance; margin: 0; }
.hub-hero h1 .r { color: #fff; }
.hub-hero .hub-lead { color: rgba(255,255,255,.92); font-size: var(--fs-lead); margin: 14px 0 0; max-width: 92%; line-height: 1.5; }

/* Kaufberatung: Serie → Kamera-Zuordnung */
.advice-list { display: flex; flex-direction: column; gap: 12px; }
.advice-row { display: flex; align-items: center; gap: 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 18px 16px; text-decoration: none; }
.advice-row .ar-main { min-width: 0; flex: 1; }
.advice-row .ar-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.advice-row h3 { font-family: var(--f-head); text-transform: uppercase; font-size: var(--fs-h3); color: var(--tx); margin: 0; }
.advice-row .ar-count { font-size: .72rem; font-weight: 700; color: var(--red); background: var(--red-soft); padding: 3px 8px; border-radius: 5px; font-family: var(--f-head); letter-spacing: .03em; }
.advice-row .ar-tag { color: var(--tx-2); font-size: .9rem; margin: 5px 0 0; }
.advice-row .ar-cams { color: var(--tx-3); font-size: .82rem; margin: 8px 0 0; line-height: 1.45; }
.advice-row .ar-cams .ar-label { color: var(--tx-2); font-weight: 600; }
.advice-row .ar-go { flex: none; color: var(--red); }
.advice-row .ar-go svg { width: 22px; height: 22px; }

/* Zubehör nach Kategorie — Kachel-Grid (Anker-Stil) */
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.cat-tile { display: flex; flex-direction: column; align-items: stretch; gap: 12px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 16px; padding: 16px 16px 18px; text-decoration: none; text-align: left; min-width: 0; transition: border-color .15s, box-shadow .15s, transform .15s; }
.cat-tile:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-2px); }
.cat-tile .cat-shots { display: flex; align-items: flex-end; justify-content: center; gap: 8px; width: 100%; height: 132px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 12px; }
.cat-tile .cat-shots img { max-height: 100%; max-width: 33%; object-fit: contain; }
.cat-tile .cat-ic { width: 72px; height: 72px; border-radius: 16px; background: var(--red-soft); display: flex; align-items: center; justify-content: center; color: var(--red); }
.cat-tile .cat-ic svg { width: 40px; height: 40px; }
.cat-tile .cat-t { font-family: var(--f-head); text-transform: uppercase; font-size: 1rem; color: var(--tx); letter-spacing: .01em; margin-top: 2px; }
.cat-tile .cat-n { font-size: .74rem; color: var(--tx-3); margin-top: -6px; }
@media (max-width: 520px) { .cat-grid { grid-template-columns: 1fr; } }


/* Kamera-Kompatibilitätsliste */
.compat { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.compat .cam {
  display: flex; align-items: center; gap: 10px; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-s); padding: 12px 14px; font-size: .92rem; color: var(--tx);
  white-space: nowrap; min-width: 0;   /* Chips immer einzeilig — Labels kurz halten */
}
.compat .cam span { overflow: hidden; text-overflow: ellipsis; }
.compat .cam svg { width: 16px; height: 16px; color: var(--red); flex: none; }

/* Produktgruppe (Akkus / Ladegeräte / Sets mit Überschrift) */
.prod-group { margin-top: 44px; }
.prod-group:first-child { margin-top: 0; }
.prod-group-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.prod-group-head h3 { font-family: var(--f-head); font-size: var(--fs-h3); text-transform: uppercase; letter-spacing: .01em; }
.prod-group-head .count { font-size: .9rem; color: var(--tx-3); }

/* Serien-Karten (im Hub) */
.series-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.series-card {
  display: flex; flex-direction: column; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px; transition: .18s; min-width: 0;
}
.series-card:hover { border-color: var(--red); }
.series-card .sc-name { font-family: var(--f-head); font-weight: 800; font-size: 1.5rem; text-transform: uppercase; margin: 0; }
.series-card .sc-tag { color: var(--tx-2); font-size: .92rem; margin: 8px 0 16px; line-height: 1.45; flex: 1; }
.series-card .sc-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.series-card .sc-count { font-family: var(--f-head); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--red); background: var(--red-soft); padding: 4px 9px; border-radius: 6px; }
.series-card .sc-go { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-head); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: .86rem; color: var(--tx); }
.series-card .sc-go svg { width: 16px; height: 16px; transition: transform .18s; }
.series-card:hover .sc-go { color: var(--red); }
.series-card .sc-go svg { transition: none; }

/* FAQ (native details/summary) */
.faq { display: flex; flex-direction: column; gap: 12px; max-width: 820px; }
.faq details { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden; }
.faq summary { cursor: pointer; padding: 18px 20px; font-family: var(--f-head); font-weight: 600; font-size: 1.02rem; color: var(--tx); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--red); flex: none; transition: transform .2s; line-height: 1; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details[open] summary { border-bottom: 1px solid var(--line); }
.faq .faq-body { padding: 16px 20px 20px; color: var(--tx-2); font-size: .96rem; line-height: 1.6; }

/* Crosslinks (andere Serien der Marke) */
.crosslinks { display: flex; flex-wrap: wrap; gap: 10px; }
.crosslinks a {
  display: inline-flex; align-items: center; gap: 8px; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 10px 18px; font-family: var(--f-head); font-weight: 600; font-size: .9rem;
  text-transform: uppercase; letter-spacing: .03em; color: var(--tx-2); transition: .15s;
}
.crosslinks a:hover { border-color: var(--red); color: #fff; background: var(--red); }
/* Pfeil fest klein (30.09., Nico: „die Buttons sind waaay zu groß“) – ohne Maß wurde das SVG 100 × 100 px und der Knopf
   122 px hoch (Serien-, Kamera- und Taschenseiten) */
.crosslinks a svg { width: 16px; height: 16px; flex: none; }

/* Prose (Kaufberatung-Fließtext) */
.prose { max-width: 760px; color: var(--tx-2); font-size: 1.05rem; line-height: 1.7; }
.prose p { margin: 0 0 16px; }

@media (max-width: 720px) {
  .prod-group { margin-top: 34px; }
  .compat { grid-template-columns: 1fr; }
  /* Text-Heroes (Ebene 2/3) mobil auf natürliche Höhe (700px + Zentrierung erzeugt sonst Leerraum) */
  .hub-hero, .subhero { min-height: 0; display: block; }
  /* Serien-Karten ragen 122px in den Hub-Hero (.qcards-wrap) → unten Platz dafür lassen, sonst verdecken sie den Einleitungstext */
  .hub-hero { padding-bottom: 150px; }
}

/* ============================================================
   HELLES DESIGN (Variante 4) — durchgängig Off-White, Rot als Signal.
   Die globale Palette am :root wird auf Hell gekippt → alle Komponenten,
   die über Tokens laufen (Sektionen, Karten, Footer, CTA-Band, Sub-Hero,
   Katalog …), ziehen automatisch mit. Danach nur die Bühnen, die Dunkel
   HART verdrahtet hatten (Header, Hero-Slider, Hub-Hero, Dots, Medaillon),
   aufs Helle nachgezogen. Logo: positive (dunkle) Variante.
   ============================================================ */
:root {
  --bg:       #f5f4f1;
  --bg-1:     #ecebe5;
  --bg-2:     #ffffff;
  --bg-3:     #eae8e1;
  --line:     rgba(24,22,20,0.12);
  --line-2:   rgba(24,22,20,0.22);
  --tx:       #17181b;
  --tx-2:     #55575c;
  --tx-3:     #83868c;
  --silver:   #2b2d31;
  --tx-inv:   #ffffff;
  --red-soft: rgba(225,27,21,0.10);
  --shadow:   0 16px 40px rgba(20,22,26,0.10);
}
.section.alt, .trust, .breadcrumb { background: var(--bg-1); }

/* Header hell + frosted */
.site-header { background: rgba(247,246,243,0.82); border-bottom: 1px solid var(--line); }
/* Ghost-Button hell: Hover-Schrift rot statt weiß (weiß auf Blassrosa war unlesbar) */
.btn-ghost:hover { color: var(--red); }

/* Hero-Slider: helle Bühnen, Rot als Signal */
.hero-slider { background: var(--bg-1); }
.slide { background: var(--bg-1); }
.slide::after { background: transparent; }
.slide-motif { opacity: .10; }
.slide-motif svg { color: var(--red); }
.slide-eyebrow { color: var(--red); }
.slide-eyebrow .dot { background: var(--red); box-shadow: 0 0 10px var(--red-glow); }
.slide h2 { color: var(--tx); }
.slide p { color: var(--tx-2); }
.slide .slide-go { color: #fff; background: var(--red); border-color: var(--red); }
/* Sony-Foto-Slide: s/w-Foto mit hellem Scrim (oben hell für dunklen Text) */
.slide-photo { background: var(--bg-1); }
/* Schleier laeuft voll von oben bis unten durch; NUR sehr sanfter horizontaler Verlauf links->rechts (keine harte Kante, kein Band). */
.slide-photo::after {
  background: linear-gradient(90deg, rgba(236,235,229,.90) 0%, rgba(236,235,229,.80) 30%, rgba(236,235,229,.56) 48%, rgba(236,235,229,.30) 64%, rgba(236,235,229,.10) 80%, rgba(236,235,229,0) 94%);
}
@media (max-width: 720px) {
  /* Handy: BILDBAND statt Foto hinter dem Text (Nico 25.09.) – vorher lag der rote Akku hinter Text/Knopf unter dem
     hellen Schleier. Jetzt: Foto oben klar ohne Schleier (max. 420 px hoch, Ausschnitt weiter über --focus-x), Text
     darunter auf hellem Grund. Hero wird dadurch ca. 115 px höher.
     Text füllt die Höhe zwischen Bild und Suche: Kicker/Überschrift oben, Knopf („Akkus für Canon“ …) in allen Slides
     an derselben Stelle unten (Nico 25.09.: „immer an der gleichen Stelle beim Scrollen“), mind. 18 px unter dem Text. */
  .slide-photo { min-height: 0; align-items: stretch; padding-top: calc(min(74vw, 420px) + 22px); }
  .slide-photo::before { bottom: auto; height: min(74vw, 420px); }
  .slide-photo::after { display: none; }
  .slide-photo .slide-copy { display: flex; flex-direction: column; align-items: flex-start; }
  .slide-photo .slide-copy p { margin-bottom: 18px; }
  .slide-photo .slide-go { margin-top: auto; }
}
/* Slider-Dots dunkel */
.dots button { background: rgba(20,22,26,.26); }
.dots button.active { background: var(--red); }

/* Hub-Hero (Ebene 2) hell */
.hub-hero { background: var(--bg-1); }
.hub-hero::after { background: transparent; }
.hub-hero .slide-motif svg { color: var(--red); }
.hub-hero h1 { color: var(--tx); }
.hub-hero h1 .r { color: var(--red); }
.hub-hero .hub-lead { color: var(--tx-2); }

/* Medaillon (Story, Desktop) hell */
.medallion { background: linear-gradient(160deg, #ffffff, #ecebe5); border-color: var(--line); }

/* Cursor-Gimmick (rotes X / Hand / I-Beam) auf Nicos Wunsch am 24.09.2026 entfernt – Standard-Cursor.
   Wiederherstellen: CSS-Block + <script src="/js/cursor.js"> aus _Sicherungen/2026-09-24_vor-Strukturumbau.zip;
   js/cursor.js und img/cursor-*.svg liegen unverändert im Projekt. */

/* ============================================================
   STRUKTUR-UMBAU (Konzept/Struktur-Konzept_v1.md, 24.09.2026)
   Akku-Finder · Schnellsuche · Markenbilder · Kamera-Check · Serien-Makros · Dark Mode
   ============================================================ */

/* Zusätzlicher Luftabstand über dem globalen scroll-padding-top (73 px, siehe html) – diese Ziele landen wie
   bisher 84 px unter der Fensterkante; die Marken-Kacheln (ohne eigene Überschrift) etwas unter der Kopfzeile */
#kameras, #kamera-check, #produkte, #finder { scroll-margin-top: 11px; }
#marken { scroll-margin-top: 6px; }   /* + 8 px Innenabstand der Reihe → Kacheln 14 px unter der Kopfzeile */

/* ---------- Kopfzeile: Akku-Finder-Link + Design-Umschalter + Logo hell/dunkel ---------- */
.nav-links a.nav-finder { display: inline-flex; align-items: center; gap: 7px; }
.nav-links a.nav-finder svg { width: 16px; height: 16px; flex: none; }
/* Aktuelle Oberkategorie rot (Nico 08.10.: „In der NAV bitte die aktuelle Oberkategorie rot färben, statt nur AKKU
   FINDER“): header(aktiv) in build_pages.py setzt .ist-aktiv + aria-current; vorher war „Akku-Finder“ immer rot.
   Startseite, Kamera-Anfrage und 404 ohne Markierung. Gilt auch im Handy-Menü. */
.nav-links a.ist-aktiv, .nav-links .nav-drop > a.nav-produkte.ist-aktiv { color: var(--red); }
.nav-links a.ist-aktiv:hover, .nav-links .nav-drop > a.nav-produkte.ist-aktiv:hover { color: var(--red-600); }
.theme-toggle { width: 38px; height: 38px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0;
                border-radius: 50%; background: transparent; border: 1px solid var(--line-2); color: var(--tx); transition: border-color .15s, color .15s; }
.theme-toggle:hover { border-color: var(--red); color: var(--red); }
.theme-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .ic-sonne { display: none; }
/* Desktop/Tablet: Schalter als schlichtes Symbol am Ende der Navigation; danach ein Trennstrich und deutlich Abstand
   zum großen Amazon-Knopf, damit man ihn nicht versehentlich trifft (Nico, 24.09.2026). Handy: runder Schalter neben
   dem Menü (dort ist kein Amazon-Knopf). */
@media (min-width: 721px) {
  .nav { gap: 28px; }                                   /* Desktop (Tablet: s. unten); Handy behält 32 px */
  .nav-links { align-items: center; }                   /* nur die Desktop-Zeile – das Handy-Menü bleibt linksbündig */
  .nav-cta::before { content: ""; align-self: center; width: 1px; height: 26px; background: var(--line-2); margin-right: 22px; }
}
.theme-toggle.tt-nav { width: 34px; height: 34px; margin: 0 -8px; border: 0; border-radius: 50%; color: var(--tx-2); background: transparent; }
.theme-toggle.tt-nav:hover { color: var(--red); background: var(--bg-3); }
.theme-toggle.tt-mobil { display: none; }
@media (max-width: 720px) {
  .theme-toggle.tt-nav { display: none; }
  .theme-toggle.tt-mobil { display: inline-flex; }
}
.brand-logo.logo-dunkel { display: none; }
/* Suche in der Kopfzeile jeder Seite (seit 29.09., Leitfaden Lars 4/6): die Lupe klappt unter der Zeile ein Suchfeld auf –
   dieselbe Schnellsuche wie auf der Startseite (js/finder.js). Desktop: schlichtes Symbol vor dem Design-Schalter
   (wie .tt-nav); Handy: runder Knopf neben Schalter und Menü (wie .tt-mobil). Die Lupe steht nicht mehr am Menüpunkt
   „Akku-Finder“ (sonst zwei Lupen in einer Zeile). */
.kopf-such { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
             border-radius: 50%; color: var(--tx-2); transition: color .15s, background .15s, border-color .15s; }
.kopf-such svg { width: 18px; height: 18px; }
.nav-links a.kopf-such { padding: 0; margin: 0 -8px; }
.nav-links a.kopf-such::after { display: none; }
.kopf-such:hover, .kopf-such.is-offen { color: var(--red); background: var(--bg-3); }
.kopf-such:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.kopf-such.ks-mobil { display: none; width: 38px; height: 38px; border: 1px solid var(--line-2); color: var(--tx); }
.kopf-such.ks-mobil:hover, .kopf-such.ks-mobil.is-offen { border-color: var(--red); background: transparent; }
@media (max-width: 720px) {
  .nav-links a.kopf-such.ks-nav { display: none; }
  .kopf-such.ks-mobil { display: inline-flex; }
}
/* Handy schmal (≤ 380 px): drei runde Knöpfe + Logo in einer Zeile – Abstände und Knöpfe etwas kleiner, das Logo
   bleibt voll groß (CI: nie verzerren/verkleinern) */
@media (max-width: 380px) {
  .nav { gap: 10px; }
  .nav-cta { gap: 6px; }
  .kopf-such.ks-mobil, .theme-toggle.tt-mobil { width: 34px; height: 34px; }
  .burger { width: 30px; }
}
/* 404-Seite (seit 29.09.): Suchfeld + Einstiege – die Vorschlagsliste darf über den Abschnitt hinausragen
   (.subhero schneidet sonst ab), unten Platz, damit die Seite nicht direkt im Footer endet */
.subhero.nf-kopf { overflow: visible; z-index: 2; padding-bottom: clamp(160px, 22vw, 240px); }
.nf-suche, .kams-suche { max-width: 560px; min-width: 0; margin: 22px 0 16px; }
.nf-links { color: var(--tx-3); }
.nf-links a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.kopf-suche { border-top: 1px solid var(--line); padding: 12px 0 14px; }
.kopf-suche[hidden] { display: none; }
.kopf-suche .search { max-width: 720px; min-width: 0; margin: 0 auto; }
/* Tablet: Menüpunkte + Lupe + Schalter + Store-Knopf werden eng → Abstände kleiner. Seit 08.10. fünf Punkte („Energie“
   ist raus, Nico: „zwei mal die gleiche Seite … Energie und Produkte“) – Reihenfolge beim Ausblenden, je schmaler: erst
   „Ratgeber“ (bleibt über Footer und Startseite erreichbar), dann „Kameras“ (Footer, Suche und Kamera-Listen der
   Markenseiten führen direkt zu den Kameraseiten). Ab 1200 px alle in voller Größe, 1120–1199 kompakt, bis 1039 ohne
   Ratgeber (vorher bis 1119 – den Platz hatte „Energie“; 1020–1029 px wäre der Store-Knopf näher als 24 px an den Rand
   gerückt, ab 1040 bleiben 17 px Luft), bis 929 ohne Kameras (= die frühere Tablet-Zeile Akku-Finder · Marken ·
   Produkte). Gemessen 721–1440 px mit tools/kopfzeile_messen.mjs (08.10.): kein Überlauf, Store-Knopf ≥ 24 px vom Rand,
   Logo unverzerrt. */
@media (max-width: 1199px) and (min-width: 721px) {
  .nav { gap: 20px; }
  .nav-links { gap: 18px; }
  .nav-links a { font-size: .88rem; white-space: nowrap; }
}
@media (max-width: 1039px) and (min-width: 721px) {
  .nav-links a.nav-ratgeber { display: none; }   /* seit 02.10. Klasse statt href$="#ratgeber" (Ziel jetzt /ratgeber/) */
}
@media (max-width: 929px) and (min-width: 721px) {
  .nav-links a.nav-kameras { display: none; }
}
/* „Über Baxxtar“ (seit 19.10., Nico: „fehlt noch eine entsprechende Verlinkung für Über BAXXTAR in der NAV“): letzter
   Menüpunkt, am Tablet und kleinen Desktop als Erster ausgeblendet – bleibt über den Footer und „Mehr über Baxxtar“ auf
   der Startseite erreichbar, im Handy-Menü immer da. Gemessen mit tools/kopfzeile_messen.mjs (19.10.): mit sechs Punkten
   rückt der Store-Knopf bis 1215 px näher als 24 px an den Rand (1200 px: 16 px) → bis 1229 px ohne „Über Baxxtar“
   (etwas Luft für andere Browser). */
@media (max-width: 1229px) and (min-width: 721px) {
  .nav-links a.nav-ueber { display: none; }
}
/* Kleines Tablet (iPad mini hochkant 744/768 px): das Logo bleibt voll groß (s. .brand-logo) → dafür Abstände,
   Menüschrift und Amazon-Knopf etwas kompakter, sonst ragt die Zeile bis 89 px über den Rand; unter 744 px zusätzlich
   ohne Lupe vor „Akku-Finder“ (das Wort bleibt rot). Seit 29.09. mit Lupe in der Navigation: kompakt bis 839 px (bei
   820 px ragte der Store-Knopf sonst 3 px in den Randabstand), bis 759 px noch etwas enger (744 px: 1 px) */
@media (max-width: 839px) and (min-width: 721px) {
  .nav { gap: 14px; }
  .nav-links { gap: 14px; }
  .nav-links a { font-size: .84rem; }
  .nav-cta::before { margin-right: 14px; }
  .nav-cta .btn-amazon { padding: 9px 14px; font-size: .84rem; }
}
@media (max-width: 759px) and (min-width: 744px) {
  .nav, .nav-links { gap: 12px; }
}
@media (max-width: 759px) and (min-width: 721px) {
  .nav-cta .btn-amazon { padding: 9px 11px; }           /* Platz für den Pfeil am Menü „Produkte“ (seit 01.10.) */
}
@media (max-width: 743px) and (min-width: 721px) {
  .nav-links a.nav-finder svg { display: none; }
  .nav, .nav-links { gap: 8px; }
  .nav-cta::before { margin-right: 8px; }
}

/* ---------- Schnellsuche im Hero (Startseite) ---------- */
.slider-search input { padding-right: 148px; }
.slider-search .ss-btn { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 7px;
                         background: var(--red); color: #fff; font-family: var(--f-head); font-weight: 600; text-transform: uppercase;
                         letter-spacing: .04em; font-size: .8rem; padding: 10px 13px; border-radius: 10px; transition: background .15s; }
.slider-search .ss-btn:hover { background: var(--red-600); }
.slider-search .ss-btn svg { width: 15px; height: 15px; }
@media (max-width: 420px) {
  .slider-search input { padding-right: 118px; font-size: .95rem; }
  .slider-search .ss-btn { padding: 9px 10px; font-size: .72rem; gap: 5px; }
}
.fs-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; padding: 6px; background: var(--bg-2);
           border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 18px 44px rgba(20,22,26,.18); max-height: min(380px, 55vh); overflow: auto; }
.fs-list[hidden] { display: none; }
.fs-item { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border-radius: 9px; color: var(--tx); }
.fs-item b { font-weight: 600; font-size: .95rem; }
.fs-item span { font-size: .8rem; color: var(--tx-3); }
.fs-item:hover, .fs-item.is-sel { background: var(--bg-3); }
.fs-item.fs-kat { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 9px 9px; }
.fs-item.fs-kat b { color: var(--red); }
/* Kein Treffer (Käufer-Check 28.09.): klare Aussage über den Links, nicht anklickbar */
.fs-info { margin: 0; padding: 9px 12px 7px; font-size: .86rem; line-height: 1.45; color: var(--tx-2); }
.fs-info b { color: var(--tx); }
.fs-hinweis { border-left: 3px solid var(--red); }     /* kein passender Baxxtar-Akku (Nico 01.10.) */

/* ---------- Kacheln mit Foto (Marken-Kacheln Startseite = Markenbild, Serien-Karten Hub = Etikett-Makro) ---------- */
.qc-motif.qc-foto { background: #0d0e10; }
.qc-motif.qc-foto::before { display: none; }
.qc-motif .qc-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qc-motif.qc-foto .qc-badge { z-index: 2; }
/* Serien-Karten Hub: Akku freigestellt (img/serien/<slug>-frei.webp, Nico 25.09.: „frei stehen“ statt auf farbigem
   Grund) – er steht direkt auf der Karte, Schatten per CSS (passt so im hellen wie im dunklen Design) */
.qc-motif.qc-frei { background: transparent; overflow: visible; }
.qc-motif.qc-frei::before { display: none; }
.qc-motif.qc-frei .qc-prod { width: 94%; height: 94%; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .22)); }

/* ---------- Marken-Übersicht /marken/ (Nico 28.09.): dieselben Kacheln wie auf der Startseite, als Raster –
   größer, 3 je Reihe (2 × 3 statt 6 nebeneinander); Bild im selben Seitenverhältnis wie auf der Startseite ---------- */
/* Taschen (Nico 28.09.: „kohärent zu den Akkus“): Familien-Kacheln wie /marken/, Produktfoto auf weißem Grund
   (Amazon-Bilder sind weiß freigestellt); Kopfbild der Familienseite ebenso; USP-Liste mit roten Haken */
.qc-motif.qc-weiss { background: #fff; }
.qc-motif.qc-weiss::before { display: none; }
.qc-motif.qc-weiss .qc-prod { width: 90%; height: 90%; filter: none; }
.sub-visual.sub-weiss { background: #fff; }
.sub-visual.sub-weiss img { object-fit: contain; padding: 6%; }
.usp-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: 28px; }
.usp-liste li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); color: var(--tx); font-size: .98rem; line-height: 1.45; }
.usp-liste li svg { width: 18px; height: 18px; color: var(--red); flex: none; margin-top: 2px; }
.tasche-einsatz { margin-bottom: 18px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tasche-einsatz .cam { white-space: normal; }            /* Einsatz-Texte dürfen umbrechen (sonst „Outdoor-Kom…“) */
.tasche-einsatz .cam span { overflow: visible; }
.kam-groups.eins { grid-template-columns: minmax(0, 1fr); }
/* Kompatibilität kurz (Nico 28.09.): „Passt allgemein – nach Innenmaß“ bzw. „Speziell für …“ (rot) unter dem Namen */
.spec-fuer { margin: 0 0 12px; font-size: .9rem; color: var(--tx-2); line-height: 1.4; }
.spec-fuer.spec-speziell, .weg-karte small.spec-speziell { color: var(--red); font-weight: 600; }
/* Wegweiser „Welche Tasche passt zu deiner Kamera?“ (statt Modellsuche): je Kameratyp eine Karte mit den Taschen */
.wegweiser { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.weg-karte { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px 8px; }
.weg-karte h3 { font-family: var(--f-head); font-weight: 800; text-transform: uppercase; font-size: 1.1rem; margin: 0 0 8px; }
.weg-karte ul { list-style: none; margin: 0; padding: 0; }
.weg-karte li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px; padding: 11px 0; border-top: 1px solid var(--line); }
.weg-karte li a { font-weight: 700; color: var(--tx); }
.weg-karte li a:hover { color: var(--red); }
.weg-karte li span { color: var(--tx-3); font-size: .86rem; }
.weg-karte li small { flex-basis: 100%; color: var(--tx-2); font-size: .84rem; }
@media (max-width: 720px) { .wegweiser { grid-template-columns: minmax(0, 1fr); } }
.kam-group span.kam { cursor: default; }
.kam-group span.kam:hover { border-color: var(--line); color: var(--tx); }
p.kam-head:hover .kam-head-t b { color: var(--tx); }
.marken-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.marken-grid .qc { width: auto; height: auto; padding: 14px; gap: 10px; }
.marken-grid .qc-motif { height: auto; aspect-ratio: 190 / 175; border-radius: 13px; }
.marken-grid .qc-t { font-size: clamp(1rem, 1.6vw, 1.2rem); }
.marken-grid .qc-count { font-size: .86rem; }
.marken-weitere { margin: clamp(40px, 6vw, 56px) 0 var(--sec-head-gap); }
/* Zwei Wege unter den Übersichts-Kacheln (/marken/): zwei getrennte Karten statt einer Linkkette (Nico 01.10.:
   „sieht eher so aus wie eine Aneinanderreihung, als zwei unterschiedliche Punkte“) */
.zwei-wege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 32px 0 0; }
.zw-karte { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 22px; transition: border-color var(--hover-t) ease; }
.zw-karte:hover { border-color: var(--red); }
.zw-frage { color: var(--tx-2); }
.zw-ziel { display: inline-flex; align-items: center; gap: 6px; color: var(--red); font-family: var(--f-head); font-weight: 700;
  font-size: .88rem; text-transform: uppercase; letter-spacing: .04em; }
.zw-ziel svg { width: 16px; height: 16px; }
@media (max-width: 720px) {
  .marken-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .marken-grid .qc { padding: 10px; gap: 8px; }
  .zwei-wege { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* ---------- Markenseite (Ebene 2): Markenbild als Banner, Text links auf hellem Schleier ---------- */
.hub-hero.hub-photo { background: var(--bg-1); }
.hub-hero.hub-photo::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--img) var(--focus-x-d, var(--focus-x, 50%)) center / cover; }   /* Ausschnitt zum Akku hin (Desktop: --focus-x-d) */
.hub-hero.hub-photo::after { z-index: -1; background: linear-gradient(90deg, rgba(236,235,229,.93) 0%, rgba(236,235,229,.85) 30%, rgba(236,235,229,.6) 48%,
                             rgba(236,235,229,.3) 64%, rgba(236,235,229,.08) 80%, rgba(236,235,229,0) 94%); }
.hub-photo h1, .hub-photo .hub-lead { max-width: 520px; }
.hub-hero > .wrap { width: 100%; }   /* Flex-Spalte + auto-Ränder ließen das Raster auf Textbreite schrumpfen → Text stand mittig im Motiv */
/* Fotoköpfe im Format der Startseite (seit 09.10. alle: Markenseiten, /video/, /ratgeber/ – Nico: „1. ja“ auf „Soll ich sie
   angleichen?“; vorher Marken/Video bis 1023 px Bildband 62vw/440 px): ab 721 px Vollbild 700 px wie der Slider, am Handy
   Bildband min(74vw, 420px) wie der Slider. Tablet: eigener Ausschnitt --focus-x-t (MARKENBILD 4. Wert bzw. inline), sonst
   der Desktop-Wert; Text schmaler, damit er nicht über dem Motiv liegt. */
@media (min-width: 721px) and (max-width: 1023px) {
  .hub-hero.hub-photo::before { background-position: var(--focus-x-t, var(--focus-x-d, var(--focus-x, 50%))) center; }
  .hub-photo h1, .hub-photo .hub-lead { max-width: 440px; }
}
@media (max-width: 720px) {
  /* Handy: Foto als Band oben (Ausschnitt auf den Akku, --focus-x), Brotkrumen und Text darunter auf ruhigem Grund – als
     Overlay läge der Text sonst direkt über dem Akku. Unten Platz für die überlappenden Serien-Karten (nicht beim Ratgeber). */
  .hub-hero.hub-photo { min-height: 0; display: block; padding-top: min(74vw, 420px); padding-bottom: 150px; }
  .hub-hero.hub-photo.hub-solo { min-height: 0; padding-bottom: 36px; }   /* schlägt .hub-solo { min-height: 700px } weiter unten */
  .hub-hero.hub-photo::before { bottom: auto; height: min(74vw, 420px); background-position: var(--focus-x, 60%) center; }
  .hub-hero.hub-photo::after { background: linear-gradient(180deg, rgba(236,235,229,0) calc(min(74vw, 420px) - 70px), var(--bg-1) min(74vw, 420px)); }
  /* dunkles Design: Regel im Block „DUNKLES DESIGN“ (muss nach dessen Desktop-Schleier stehen) */
  .hub-photo h1, .hub-photo .hub-lead { max-width: 720px; }
}
/* Kopf ohne Kachelreihe darunter (/ratgeber/, Nico 08.10.: „Hero Bild … so wie auf der Startseite, bestenfalls im gleichen
   Format“). 2. Runde (Nico: „Die Herobilder von Ratgeber und Startseite sind nicht gleich groß“ + „Liegt unter anderem an
   den Breadcrumbs“ – gemessen bei 1280 px: Startseite Foto ab 73 px, 700 hoch; Ratgeber ab 124 px, 570 hoch; Handy 289 statt
   242 px; Tablet 768 px Vollbild 700 statt Band 440): jetzt im Format der Startseite – Brotkrumen IM Kopfbild oben auf dem
   Schleier (render_ratgeber), Foto direkt unter der Kopfzeile, 700 px hoch wie der Slider, ab 721 px Vollbild (Ausschnitt
   Tablet --focus-x-t), am Handy Bildband min(74vw, 420px) mit den Brotkrumen darunter. Marken- und Videoköpfe unverändert
   (Kontinuität „gesamtheitlich später“). */
.hub-hero.hub-solo { min-height: 700px; }
/* Brotkrumen im Fotokopf (Ratgeber 08.10., Marken/Video 09.10. – Nico: „Liegt unter anderem an den Breadcrumbs“): ab 721 px
   oben auf dem Schleier, am Handy unter dem Bildband im normalen Fluss (auf dem Foto ohne Schleier wären sie nicht lesbar) */
.hub-hero > .breadcrumb { position: absolute; top: 0; left: 0; right: 0; z-index: 1; background: transparent; border-bottom: 0; }
@media (max-width: 720px) { .hub-hero > .breadcrumb { position: static; } }
/* Kopf mit freigestelltem Produkt statt Foto (Taschen, Nico 28.09.: „einheitlich mit den Markenseiten“) – gleiche Höhe
   und Kachelreihe wie .hub-photo; Desktop: Motiv rechts neben dem Text, Handy/Tablet: Motiv oben, Text darunter */
.hub-hero.hub-motiv { background: var(--bg-1); }
.hub-motiv-bild { position: absolute; top: 50%; right: max(24px, calc(50% - 560px)); transform: translateY(-58%); width: min(34vw, 380px); margin: 0; z-index: 0; }
.hub-motiv-bild img { display: block; width: 100%; height: auto; filter: drop-shadow(0 24px 26px rgba(0, 0, 0, .26)); }
.hub-motiv h1, .hub-motiv .hub-lead { max-width: 560px; }
@media (max-width: 1023px) {
  .hub-hero.hub-motiv { min-height: 0; display: block; padding-top: 24px; padding-bottom: 150px; }
  .hub-motiv-bild { position: relative; top: auto; right: auto; transform: none; width: min(58vw, 280px); margin: 0 auto 18px; }
  .hub-motiv h1, .hub-motiv .hub-lead { max-width: 720px; }
}

/* ---------- „Welche Kamera hast du?“ (Markenseite): Akku-Familien mit Kamera-Chips ---------- */
.kam-sec .kam-filter { max-width: 520px; margin-bottom: 22px; }
.kam-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 860px) { .kam-groups { grid-template-columns: minmax(0, 1fr); } }
.kam-group { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; min-width: 0; }
.kam-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.kam-head img { width: 58px; height: 58px; object-fit: contain; flex: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .2)); }   /* freigestellt (25.09.) */
.kam-head-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.kam-head-t b { font-family: var(--f-head); font-weight: 800; font-size: 1.25rem; text-transform: uppercase; color: var(--tx); line-height: 1.1; transition: color .15s; }
.kam-head-t small { font-size: .8rem; color: var(--tx-3); margin-top: 3px; }
.kam-head:hover .kam-head-t b { color: var(--red); }
.kam-go { color: var(--red); flex: none; display: flex; }
.kam-go svg { width: 20px; height: 20px; }
.kam-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.kam { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-1); border: 1px solid var(--line); color: var(--tx); border-radius: 999px;
       padding: 7px 13px; font-family: var(--f-body); font-size: .88rem; line-height: 1.2; transition: border-color .15s, color .15s, background .15s; }
.kam:hover { border-color: var(--red); color: var(--red); }
.kam small { color: var(--tx-3); font-size: .74rem; }
.kam[hidden], .kam-group[hidden], .kam-empty[hidden], .fd-kamgruppe[hidden] { display: none; }
/* Kamera-Listen als ordentliches Raster statt Fließtext (Nico 25.09.: „alles kreuz und quer verteilt“): gleiche Breite,
   bündige Spalten – Akku-Finder (Modell-Schritt) und Markenseiten („Welche Kamera hast du?“) */
.fd-kamgruppe .kam-chips, .kam-group .kam-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
.fd-kamgruppe .kam, .kam-group .kam { justify-content: center; text-align: center; border-radius: 10px; padding: 8px 10px; min-width: 0; }
@media (max-width: 560px) {   /* Handy: drei Spalten statt zwei – sonst wird z. B. NP-FW50 (34 Kameras) sehr lang */
  .fd-kamgruppe .kam-chips, .kam-group .kam-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .fd-kamgruppe .kam, .kam-group .kam { padding: 8px 4px; font-size: .84rem; }
}
.kam-empty, .kam-note { color: var(--tx-2); margin: 18px 0 0; font-size: .95rem; }
.kam-kein { margin: 18px 0 0; }
/* Kamera-Familien (PROBE, Leitfaden 5.2, Nico 01.10.) – Chips über der Kameraliste (Markenseite) bzw. Modellwahl (Akku-Finder) */
.kam-fam { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 22px; }
/* „Familie“ steht über den Chips (Nico 01.10.: bei zwei Zeilen ruhigeres Layout) */
.kam-fam-t, .fd-familien > span { flex: 0 0 100%; font-size: .88rem; color: var(--tx-2); margin: 0 0 -2px; }
.kam-fam .chip small, .fd-familien .chip small { opacity: .7; margin-left: 2px; font-size: .8em; }
.fd-familien { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 18px; }
@media (max-width: 720px) { .fd-familien { display: block; } .fd-familien > span { display: block; margin: 0 0 8px; } }
.kam-kein b { color: var(--tx); }
.kam-empty a, .kam-note a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Serienseite (Ebene 3): Etikett-Makro im Kopf + Kamera-Check ---------- */
.subhero-visual .wrap, .kam-check .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 380px); gap: 48px; align-items: center; }
.sub-copy { min-width: 0; }
.sub-visual { margin: 0; border-radius: var(--radius); overflow: hidden; background: #0d0e10; aspect-ratio: 1 / 1; box-shadow: var(--shadow); }
.sub-visual img { width: 100%; height: 100%; object-fit: cover; }
/* freigestellter Akku (25.09., Nico: „frei stehen“) – ohne Grund und Rahmen, Schatten am Akku selbst */
.sub-visual.sub-frei { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.sub-visual.sub-frei img { object-fit: contain; filter: drop-shadow(0 22px 24px rgba(0, 0, 0, .24)); }
@media (max-width: 860px) {
  .subhero-visual .wrap, .kam-check .wrap { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  /* Handy/Tablet: Bild oben, 4:3 – der ganze Akku bleibt drin (er steht mittig mit Rand) */
  .sub-visual { aspect-ratio: 4 / 3; order: -1; max-height: 340px; }
  .sub-visual img { object-position: 50% 48%; }
}
/* ---------- Technische Daten (Serienseite + V-Mount, Nico 28.09.): je Akku eine Karte, Daten aus assets/akku_daten.json ---------- */
/* steht direkt unter dem Seitenkopf (dessen Abstand reicht) und vor dem Kamera-Check/Einsatz (bringt eigenen Abstand mit) */
.tech-sec { padding-top: 0; padding-bottom: 0; }
.tech-sec.tech-abstand { padding-bottom: var(--sec-y); }      /* /video/: zwei Abschnitte „Technische Daten“ untereinander */
.section.alt + .tech-sec { padding-top: var(--sec-y); }       /* nach einem grauen Abschnitt (Laufzeit-Rechner) nicht an der Kante kleben */
/* Serienseite: „Gut zu wissen – laut Hersteller“ (Leitfaden 5.3, Nico 01.10.) – je Hinweis Art, Satz, Quelle */
.gzw-liste { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gzw-liste li { display: flex; flex-direction: column; gap: 6px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.gzw-art { font-family: var(--f-head); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--red); }
.gzw-liste p { margin: 0; color: var(--tx); }
.gzw-quelle { margin-top: auto; font-size: .82rem; color: var(--tx-3); }
.gzw-quelle a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.gzw-quelle a:hover { color: var(--red); }
@media (max-width: 720px) { .gzw-liste { grid-template-columns: minmax(0, 1fr); } }
/* /video/: Laufzeit-Rechner (Nico 01.10.) – Eingabe Watt + Anzahl, Tabelle je Baxxtar-Akku (js/finder.js initLaufzeit) */
.lz { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(18px, 3vw, 28px); }
.lz-eingabe { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 0 0 18px; }
.lz-feld { display: flex; flex-direction: column; gap: 6px; font-size: .88rem; color: var(--tx-2); }
.lz-wert { display: inline-flex; align-items: center; gap: 8px; }
.lz-wert input, .lz-wert select { width: 120px; padding: 10px 12px; border-radius: var(--radius-s); border: 1px solid var(--line-2); background: var(--bg-1);
  color: var(--tx); font: inherit; font-size: 1.05rem; font-weight: 600; }
.lz-wert select { width: 80px; }
.lz-wert b { font-family: var(--f-head); font-size: 1.05rem; color: var(--tx); }
.lz-tabelle { width: 100%; border-collapse: collapse; }
.lz-tabelle th, .lz-tabelle td { text-align: left; padding: 10px 8px; border-top: 1px solid var(--line); font-size: .95rem; }
.lz-tabelle thead th { border-top: 0; color: var(--tx-3); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.lz-tabelle tbody th { font-family: var(--f-head); font-weight: 700; text-transform: uppercase; }
.lz-tabelle tbody th small { color: var(--tx-3); font-family: var(--f-body, inherit); font-weight: 500; text-transform: none; margin-left: 4px; }
.lz-tabelle .lz-zeit { font-weight: 700; color: var(--tx); white-space: nowrap; }
.lz-hinweis { margin: 14px 0 0; font-size: .86rem; color: var(--tx-3); }
/* Akku-Auswahl (Nico 01.10.: „so wie bei den Kameras“) – nur mit JavaScript; ohne bleibt die Tabelle */
.lz-wahl, .lz-ergebnis { display: none; }
.lz-js .lz-wahl { display: block; margin: 0 0 18px; }
.lz-js .lz-ergebnis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 16px 18px; background: var(--bg-1);
  border: 1px solid var(--line-2); border-left: 4px solid var(--red); border-radius: var(--radius-s); }
.lz-js .lz-tabelle { display: none; }
.lz-frage { margin: 0 0 10px; font-size: .88rem; color: var(--tx-2); }
.lz-gruppe > span { flex: 0 0 6rem; margin-right: 0; font-family:   /* feste Breite: Kacheln beider Reihen starten bündig (Nico 01.10.) */ var(--f-head); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .8rem; color: var(--tx-3); }
.lz .kc-akku-karte { background: var(--bg-1); }
.lz-ergebnis-t { flex: 0 0 100%; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--tx-3); }
.lz-gross { font-family: var(--f-head); font-weight: 800; font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.1; color: var(--tx); }
.lz-rechnung { font-size: .92rem; color: var(--tx-2); }
@media (max-width: 560px) { .lz .kc-akku-karte { flex: 0 1 calc(50% - 4px); } }
/* /video/ (PROBE, Nico 01.10.): NP-F und V-Mount nebeneinander vergleichen (≤ 760 px untereinander) */
.vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vs-karte { display: flex; flex-direction: column; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 3vw, 30px); }
.vs-karte h3 { font-family: var(--f-head); font-weight: 800; font-size: clamp(1.4rem, 2.4vw, 1.8rem); text-transform: uppercase; margin: 0 0 6px; }
.vs-karte h3 small { font-size: .55em; color: var(--tx-3); font-weight: 700; }
.vs-unter { color: var(--tx-2); margin: 0 0 16px; }
.vs-karte dl { margin: 0 0 16px; }
.vs-karte dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 9px 0; border-top: 1px solid var(--line); }
.vs-karte dt { color: var(--tx-3); font-size: .88rem; flex: none; }
.vs-karte dd { margin: 0; font-weight: 600; font-size: .95rem; text-align: right; }
.vs-wofuer-kopf { margin: 0 0 8px; color: var(--tx-3); font-size: .88rem; }
.vs-wofuer { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.vs-wofuer span { background: var(--bg-3); border-radius: 6px; padding: 4px 9px; font-size: .84rem; font-weight: 600; }
.vs-link { margin-top: auto; color: var(--red); font-family: var(--f-head); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .88rem; }
.vs-link svg { width: 15px; height: 15px; vertical-align: -2px; }
@media (max-width: 760px) { .vs-grid { grid-template-columns: 1fr; } }
/* Reihenabstand als Rand der Karten statt row-gap: sonst entstünde beim Aufklappen eine neue Rasterreihe samt Abstand,
   die Seite ruckte am Anfang/Ende um --spec-gap */
.spec-grid { --spec-gap: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); column-gap: var(--spec-gap); row-gap: 0; }
.spec-grid > .spec-card { margin-bottom: var(--spec-gap); }
.spec-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px 10px; }
.spec-card h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; font-family: var(--f-head);
  font-weight: 800; font-size: 1.2rem; text-transform: uppercase; letter-spacing: .01em; }
.spec-badge { font-family: var(--f-head); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 4px 8px; border-radius: 6px; color: #fff; }
.spec-card dl { margin: 0; }
.spec-card dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 9px 0; border-top: 1px solid var(--line); }
.spec-card dt { color: var(--tx-3); font-size: .88rem; flex: none; }
.spec-card dd { margin: 0; font-weight: 600; font-size: .95rem; text-align: right; }
.spec-card dl > div.voll { flex-direction: column; align-items: flex-start; gap: 8px; }
.spec-card .voll dd { display: flex; flex-wrap: wrap; gap: 6px; text-align: left; }
.spec-card .voll dd span { background: var(--bg-3); border-radius: 6px; padding: 4px 9px; font-size: .84rem; font-weight: 600; }
/* Kapazität groß als Blickfang (statt Akkubild, das in jeder Karte gleich aussah) */
.spec-mah { margin: 2px 0 14px; font-family: var(--f-head); font-weight: 700; font-size: 1rem; color: var(--tx-3); line-height: 1; }
.spec-mah b { font-weight: 800; font-size: clamp(2.1rem, 3.2vw, 2.6rem); color: var(--tx); letter-spacing: -.01em; margin-right: 2px; }
.spec-card h3 { transition: color var(--hover-t) ease; }
/* Klick auf die Karte → Amazon-Angebote dieses Akkus klappen darunter auf (Nico 28.09., js/technik.js). Der Knopf unten in
   der Karte spannt seine Klickfläche über die ganze Karte (::after); die Tafel läuft über die volle Rasterbreite. */
.spec-grid { grid-auto-flow: dense; }
.spec-card { position: relative; display: flex; flex-direction: column; }
.spec-auf { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 12px 0 8px;
  text-align: left; white-space: nowrap;
  background: none; border: 0; cursor: pointer; font-family: var(--f-head); font-weight: 700; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--red); }
.spec-auf::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.spec-auf:focus-visible { outline: none; }
.spec-auf:focus-visible::after { outline: 2px solid var(--red); outline-offset: 2px; }
.spec-auf svg { width: 16px; height: 16px; transition: transform var(--hover-t) ease; }
.spec-auf[aria-expanded="true"] svg { transform: rotate(180deg); }
.spec-card.is-offen { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.spec-card.is-offen h3 { color: var(--red); }
.spec-panel { grid-column: 1 / -1; display: flow-root; }   /* flow-root: der Rand der Innenfläche zählt zur Höhe */
.spec-panel-innen { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px;
  margin-bottom: var(--spec-gap); }
.spec-panel[hidden] { display: none; }
/* weiches Auf-/Zuklappen (Nico 28.09.; js/technik.js setzt die Höhe). overflow nur während der Bewegung – sonst würde
   der Hover der Produktkarten abgeschnitten. */
.spec-panel.gleitet { overflow: hidden; transition: height .3s ease; }
.spec-panel-kopf { margin: 0 0 14px; color: var(--tx-2); font-size: .95rem; }
.spec-panel-kopf b { font-family: var(--f-head); font-weight: 800; text-transform: uppercase; color: var(--tx); letter-spacing: .01em; }
@media (max-width: 560px) {   /* Handy: zwei Karten nebeneinander (Vergleich auf einen Blick), eine einzelne Karte volle Breite */
  .spec-grid { --spec-gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .spec-grid.eins { grid-template-columns: minmax(0, 1fr); }   /* ein Akku: bleibt voll breit, auch wenn die Tafel aufklappt */
  .spec-grid:not(.eins) .spec-auf-lang { display: none; }       /* schmale Karten: „3 Angebote“ statt „… bei Amazon“ */
  .spec-card { padding: 14px 12px 6px; }
  .spec-card h3 { font-size: 1rem; }
  .spec-mah { font-size: .85rem; margin-bottom: 10px; }
  .spec-mah b { font-size: 1.75rem; }
  .spec-card dl > div { gap: 8px; }
  .spec-card dt { font-size: .8rem; }
  .spec-card dd { font-size: .86rem; }
}
/* Karten-Hover wie bei den Produktkarten (.card, Nico 28.09.): die ganze Karte hebt sich 4 px an + Schatten (eigene
   Ebene per will-change, damit nichts nachspringt), Modellname rot. Nur mit Maus. */
@media (hover: hover) and (pointer: fine) {
  .spec-card { will-change: transform; transform: translateY(0);
    transition: transform var(--hover-t) ease, box-shadow var(--hover-t) ease, border-color var(--hover-t) ease; }
  .spec-card:hover { z-index: 3; transform: translateY(-4px); border-color: var(--line-2); box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .32); }
  .spec-card:hover h3 { color: var(--red); }
  .spec-card.is-offen:hover { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red), 0 16px 30px -16px rgba(0, 0, 0, .32); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .spec-card:hover { transform: none; }
}
/* Verknüpfung mit dem Kamera-Check (Nico 28.09.: „die Buttons unten visuell besser mit dem Technische-Daten-Überblick
   verknüpfen“): der dort gewählte Akku trägt hier das Schild „Dein Akku“ (auf der oberen Kante, nimmt keinen Platz weg)
   und einen roten Namen – js/finder.js ↔ js/technik.js. scroll-margin: Sprung aus dem Kamera-Check landet mit Schild. */
.spec-card { scroll-margin-top: 22px; }
.spec-dein { position: absolute; top: -9px; left: 14px; z-index: 1; padding: 3px 8px; border-radius: 6px; background: var(--red); color: #fff;
  font-family: var(--f-head); font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; line-height: 1.2;
  white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity var(--hover-t) ease, transform var(--hover-t) ease, visibility var(--hover-t); }
.spec-card.is-gewaehlt .spec-dein { opacity: 1; visibility: visible; transform: none; }
.spec-card.is-gewaehlt h3 { color: var(--red); }
@media (max-width: 560px) { .spec-dein { top: -8px; left: 10px; padding: 2px 6px; font-size: .58rem; } }
.kc-box { max-width: 720px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 26px; }
.kc-box .search { min-width: 0; }
.kc-answer { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 14px 16px; border-radius: var(--radius-s); background: var(--bg-1); border: 1px solid var(--line); }
.kc-answer:empty { display: none; }
.kc-answer p { margin: 0; color: var(--tx); line-height: 1.5; }
/* inline-block statt Flex: bricht der Linktext um (Handy), bleibt der Pfeil direkt hinter dem letzten Wort */
.kc-answer > div > a { display: inline-block; margin-top: 8px; color: var(--red); font-family: var(--f-head); font-weight: 600;
                        text-transform: uppercase; letter-spacing: .03em; font-size: .84rem; }
.kc-answer > div > a svg { width: 15px; height: 15px; display: inline-block; vertical-align: -3px; margin-left: 6px; }
.kc-nw { white-space: nowrap; }   /* Akkuname nicht am Bindestrich trennen (LP-|E6NH), Pfeil bleibt am letzten Wort */
/* Antwort im Kamera-Check: zwei getrennte Knöpfe statt zweier Textlinks (Nico 01.10.), gleich aussehend (umrandet), klein,
   nebeneinander („Warum sehen die unterschiedlich aus?“, „viel zu groß … Passen die nebeneinander?“) */
.kc-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.kc-knopf { display: inline-block; padding: 5px 10px; border-radius: var(--radius-s); border: 1px solid var(--red); color: var(--red);
  font-family: var(--f-head); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; line-height: 1.3;
  max-width: 100%; transition: background var(--hover-t) ease, color var(--hover-t) ease; }
/* Handy (15.10.): „Angebote für den LP-E6NH ansehen“ ragte bei 375 px 25 px über den Rahmen der Antwort – der Knopf darf
   jetzt umbrechen (Akkuname und letztes Wort mit Pfeil bleiben über .kc-nw zusammen), die Spalte daneben darf schmaler werden */
.kc-answer > div { min-width: 0; }
.kc-knopf svg { width: 12px; height: 12px; display: inline-block; vertical-align: -2px; margin-left: 5px; }
.kc-knopf:hover { background: var(--red); color: #fff; }
.kc-ic { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; color: #fff; }
.kc-ic svg { width: 17px; height: 17px; }
.kc-ja { border-color: var(--red); }
.kc-ja .kc-ic { background: var(--red); }
.kc-nein .kc-ic, .kc-hinweis .kc-ic { background: var(--tx-2); color: var(--bg-2); }   /* „Nicht gelistet“ = Hinweis (i), kein ✕ */
.kc-answer.kc-wahl, .kc-answer.kc-unbekannt { display: block; }
.kc-wahl p { margin-bottom: 10px; }
.kc-vorschlag { display: flex; flex-wrap: wrap; gap: 7px; }
.kc-vorschlag button { background: var(--bg-2); border: 1px solid var(--line-2); color: var(--tx); border-radius: 999px; padding: 7px 13px; font-size: .88rem; }
.kc-vorschlag button:hover { border-color: var(--red); color: var(--red); }
/* Kamera ohne passenden Baxxtar-Akku / fremder Akku-Code (Nico 01.10.: „idiotensicher“) – Zusatz unter den Vorschlägen */
.kc-wahl .kc-zusatz { margin: 12px 0 0; font-size: .9rem; color: var(--tx-2); }
.kc-zusatz b { color: var(--tx); }
.kc-unbekannt a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.kc-sub { color: var(--tx-2); font-size: .92rem; margin: 0 0 12px; }
.kc-list .cam { transition: border-color .15s, color .15s, background .15s; }   /* ohne Klick, nur Markierung durch die Suche */
.kc-list .cam.is-hit { border-color: var(--red); background: var(--red-soft); box-shadow: 0 0 0 1px var(--red) inset; }
/* Serien mit mehreren Akkus (LP-E6/E6N/E6NH, Nico 28.09.): erst „Dein Akku“ wählen, dann die Kamera. Kameras, die zum
   gewählten Akku nicht gelistet sind, werden blass; „nur …“ nennt die passenden Akkus direkt am Chip. */
.kc-akku { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.kc-akku > span { font-size: .9rem; color: var(--tx-2); margin-right: 4px; }
/* Knöpfe „Dein Akku“ = kleine Ausgabe der Karten „Technische Daten“ darüber (Nico 28.09.: „visuell besser verknüpfen“):
   gleiche Schrift (Name groß, Kapazität klein), Kartenrahmen; gewählt = roter Rahmen + roter Name wie die geöffnete Karte */
.kc-akku-karte { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 104px; padding: 9px 14px 8px;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--radius-s); color: var(--tx); text-align: left; cursor: pointer;
  transition: border-color var(--hover-t) ease, box-shadow var(--hover-t) ease; }
.kc-akku-karte b { font-family: var(--f-head); font-weight: 800; font-size: .98rem; text-transform: uppercase; letter-spacing: .01em;
  line-height: 1.1; transition: color var(--hover-t) ease; }
.kc-akku-karte small { font-family: var(--f-head); font-weight: 700; font-size: .76rem; color: var(--tx-3); line-height: 1; }
.kc-akku-karte[aria-pressed="true"] { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.kc-akku-karte[aria-pressed="true"] b { color: var(--red); }
.kc-akku-karte:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .kc-akku-karte:hover { border-color: var(--tx-3); }
  .kc-akku-karte:hover b { color: var(--red); }
  .kc-akku-karte[aria-pressed="true"]:hover { border-color: var(--red); }
}
@media (max-width: 560px) {   /* Handy: „Dein Akku:“ in eigener Zeile, die Knöpfe teilen sich die Breite */
  .kc-akku > span { flex: 0 0 100%; }
  .kc-akku-karte { flex: 1 1 0; min-width: 88px; padding: 8px 10px 7px; }
}
/* Chip mit Hinweis: Symbol | Name, der Hinweis unter dem Namen (nicht unter dem Symbol) */
.kc-list .cam:has(.cam-nur) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 2px; }
.cam-nur { grid-column: 2; font-size: .74rem; color: var(--tx-3); overflow: hidden; text-overflow: ellipsis; }
.kc-list .cam.is-nicht { opacity: .4; }

/* ---------- Akku-Finder / Wegweiser (/akku-finder/) ---------- */
.fd-kopf { padding-bottom: 0; }
.fd-sec { padding-top: 22px; }
.fd-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; }
.fd-steps li { display: flex; }
.fd-steps li > span, .fd-steps li > button { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--tx-3); font-family: var(--f-head); font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; }
.fd-nr { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-3); color: var(--tx-2); font-size: .72rem; font-weight: 700; }
.fd-steps .is-cur > span { border-color: var(--red); color: var(--tx); }
.fd-steps .is-cur .fd-nr { background: var(--red); color: #fff; }
.fd-steps .is-done > button { color: var(--tx-2); }
.fd-steps .is-done .fd-nr { background: var(--tx); color: var(--tx-inv); }
.fd-steps .is-done > button:hover { border-color: var(--red); color: var(--red); }
@media (max-width: 560px) { .fd-steps .fd-lbl { display: none; } .fd-steps .is-cur .fd-lbl { display: inline; } .fd-steps li > span, .fd-steps li > button { padding-right: 5px; } .fd-steps .is-cur > span { padding-right: 12px; } }
.fd-panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(18px, 3vw, 32px); min-width: 0; }
.fd-q { font-size: var(--fs-h2); text-transform: uppercase; margin: 0 0 6px; outline: none; text-wrap: balance; }
.fd-q .r { color: var(--red); }
/* Treffer-Überschrift (Nico 25.09.: „Modellnummer besser hervorheben“): Vorsatz „Für deine D7500 passt der“ klein in
   normaler Schreibweise, darunter „BAXXTAR EN-EL15“ groß in eigener Zeile */
.fd-q-treffer .fd-vor { display: block; font-family: var(--f-body); font-weight: 600; font-size: clamp(1rem, 2.2vw, 1.2rem);
  text-transform: none; letter-spacing: 0; line-height: 1.35; color: var(--tx-2); margin-bottom: 6px; }
.fd-q-treffer .fd-name { display: block; font-size: clamp(2.1rem, 5.4vw, 3.2rem); line-height: 1.02; }
.fd-hint { color: var(--tx-2); margin: 0 0 18px; }
.fd-q + .fd-opts { margin-top: 18px; }
.fd-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.fd-opts-marken { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
.fd-opts-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }            /* „Was suchst du?“: 5 Wege → 3 + 2 */
@media (min-width: 900px) { .fd-opts-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }   /* eine Reihe */
.fd-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; text-align: left; background: var(--bg-1); border: 1px solid var(--line);
          border-radius: var(--radius); padding: 14px; color: var(--tx); transition: border-color .15s, transform .15s, box-shadow .15s; }
.fd-opt:hover { border-color: var(--red); transform: translateY(-2px); box-shadow: var(--shadow); }
.fd-opt:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.fd-opt.is-aktiv { border-color: var(--red); box-shadow: 0 0 0 1px var(--red) inset; }
.fd-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--red-soft); color: var(--red); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.fd-ic svg { width: 24px; height: 24px; }
.fd-bild { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: #0d0e10; margin-bottom: 4px; }
.fd-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.fd-opt:hover .fd-bild img { transform: scale(1.05); }
/* Freigestellte Produkte (Akku, Ladegerät, Set, V-Mount, Tasche – Nico 25.09.) stehen frei auf der Karte, ohne eigenen
   Grund (Nico 25.09.: „frei stehen“ – vorher heller Studio-Grund statt Schwarz, weil Ladegerät/V-Mount/Tasche selbst schwarz sind) */
.fd-bild.fd-produkt { background: transparent; }
.fd-bild.fd-produkt img { object-fit: contain; padding: 7%; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .18)); }
/* Schrittwechsel: neuer Inhalt blendet kurz ein (js/finder.js gleiten()) */
.fd-panel.fd-rein > * { animation: fd-rein .28s ease both; }
@keyframes fd-rein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fd-panel.fd-rein > * { animation: none; } }
.fd-t { font-family: var(--f-head); font-weight: 700; text-transform: uppercase; font-size: 1.02rem; letter-spacing: .02em; line-height: 1.15; }
.fd-d { font-size: .85rem; color: var(--tx-2); line-height: 1.45; }
.fd-search { max-width: 560px; margin-bottom: 16px; }
.fd-kams { display: grid; gap: 16px; }
.fd-kamkopf { font-family: var(--f-head); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; color: var(--tx-3); margin: 0 0 8px; }
/* Modell-Schritt: Gruppenkopf mit Akkubild, Name und Anzahl – wie „Welche Kamera hast du?“ auf der Markenseite */
.fd-kamgruppe .fd-kamkopf { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; letter-spacing: 0; }
.fd-kamgruppe .fd-kamkopf img { width: 40px; height: 40px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .2)); }
.fd-kamgruppe .fd-kamkopf b { font-weight: 800; font-size: 1.05rem; color: var(--tx); letter-spacing: .02em; }
.fd-kamgruppe .fd-kamkopf small { font-family: var(--f-body); font-weight: 400; text-transform: none; font-size: .8rem; color: var(--tx-3); }
.fd-kamgruppe + .fd-kamgruppe { padding-top: 16px; border-top: 1px solid var(--line); }
.fd-typen { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
button.kam { cursor: pointer; }
.kam.kam-typ { font-family: var(--f-head); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.fd-treffer .kam-chips { margin-bottom: 14px; }
.fd-nav { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.fd-zurueck, .fd-neu { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 8px 0; color: var(--tx-2);
                       font-family: var(--f-head); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: .84rem; }
.fd-zurueck svg { width: 16px; height: 16px; }
.fd-zurueck:hover, .fd-neu:hover { color: var(--red); }
.fd-neu { margin-left: auto; }
/* Ergebnis = „Treffer“ (Nico 25.09.: „soll belohnend nach der Suche aussehen“): der gefundene Akku groß und zentriert,
   darunter Kicker, Überschrift, Knopf und „Worauf legst du Wert?“ ebenfalls zentriert. Handy: siehe unten (≤ 560 px). */
.fd-antwort { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; margin-bottom: 24px; }
.fd-antwort-bild { width: 210px; height: auto; aspect-ratio: 1 / 1; object-fit: contain; flex: none;   /* freigestellt (25.09.) */
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .24)); }
.fd-antwort-txt { min-width: 0; max-width: 760px; }
.fd-antwort-txt p { color: var(--tx-2); margin: 8px 0 14px; }
.fd-antwort-txt p.fd-kicker { font-family: var(--f-head); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; color: var(--red); margin: 0 0 8px; }
.fd-antwort-txt p.fd-empf { color: var(--tx); margin-top: -6px; }   /* Empfehlung/Hinweis zur Kamera (EOS R5 → LP-E6NH, Blackmagic 6K) */
/* „Alles zur BLS-5 / BLS-50-Serie“ darf umbrechen (nur an Leerzeichen – die Bindestriche sind geschützt), sonst ragte
   der Knopf auf 375 px aus der Seite (Käufer-Check 28.09.) */
.fd-antwort-txt .btn.fd-serie { white-space: normal; max-width: 100%; }
.fd-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 20px; }
.fd-filter span { font-size: .88rem; color: var(--tx-2); margin-right: 4px; }
.fd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 720px) {
  /* Handy (Nico 25.09.): Frage als eigene Zeile, Chips einzeilig und bei Bedarf wischbar bis an den Kartenrand –
     vorher rutschte „Alle“ allein in die zweite Zeile */
  .fd-filter { display: block; }
  .fd-filter span { display: block; margin: 0 0 8px; }
  .fd-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;   /* bündig bis an den Kartenrand (= .fd-panel-Innenabstand) */
    margin: 0 calc(-1 * clamp(18px, 3vw, 32px)); padding: 0 clamp(18px, 3vw, 32px) 2px; }
  .fd-chips::-webkit-scrollbar { display: none; }
  .fd-chips .chip { flex: none; padding: 8px 13px; font-size: .86rem; }
}
.fd-notiz { color: var(--tx-2); background: var(--bg-1); border-left: 3px solid var(--red); padding: 10px 14px; border-radius: 0 var(--radius-s) var(--radius-s) 0; margin: 0 0 18px; font-size: .92rem; }
.fd-notiz a { color: var(--red); text-decoration: underline; }
.fd-h { font-family: var(--f-head); text-transform: uppercase; font-size: var(--fs-h3); margin: 34px 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.fd-mehr { margin: 24px 0 0; }
.fd-noscript { color: var(--tx-2); }
.fd-noscript a { color: var(--red); text-decoration: underline; }
.linklike { background: none; border: 0; padding: 0; color: var(--red); text-decoration: underline; font: inherit; cursor: pointer; }
@media (max-width: 560px) {
  .fd-antwort { flex-direction: column; align-items: stretch; gap: 14px; text-align: left; }
  /* Ergebnis-Akku klein und ganz, zentriert wie eine „Belohnung“ nach der Suche (Nico 25.09.) – vorher volle Breite
     im 16:10-Zuschnitt: zu groß, der quadratische Akku wurde oben/unten angeschnitten */
  .fd-antwort-bild { width: 150px; aspect-ratio: 1 / 1; object-position: 50% 50%; align-self: center;
    filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .24)); }
  .fd-opts { grid-template-columns: minmax(0, 1fr); }
  /* „Was suchst du?“ + Video-System auf dem Handy kompakt: Bild klein links, Text rechts (sonst hohe Karten untereinander) */
  .fd-opts-5 .fd-opt, .fd-video .fd-opt { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 14px;
    row-gap: 4px; align-items: center; padding: 10px; }
  .fd-opts-5 .fd-bild, .fd-video .fd-bild { grid-row: 1 / span 2; aspect-ratio: 1 / 1; margin: 0; }
  .fd-opts-5 .fd-t, .fd-video .fd-t { align-self: end; }
  .fd-opts-5 .fd-d, .fd-video .fd-d { align-self: start; }
  .fd-opts-marken { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fd-opts-marken .fd-d { display: none; }
}
.fd-kamkopf .fd-code { margin-left: 6px; color: var(--red); text-transform: none; letter-spacing: 0; font-family: var(--f-body);
  font-weight: 500; font-size: .86rem; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Hilfe „Wo steht mein Akku-Code?“ (Leitfaden 6, Nico 29.09.) – Akku-Finder + 404: Etikett-Bild links,
   Text rechts, auf dem Handy untereinander. Bild seit 08.10. die Zeichnung akku_code_zeichnung() (SVG in der Seite, auch
   im Ratgeber-Fenster); vorher Foto aus tools/hilfe_bild.py ---------- */
.code-hilfe-innen { display: grid; grid-template-columns: minmax(0, 540px) minmax(0, 1fr); gap: clamp(24px, 4vw, 52px); align-items: center; }
/* Ohne eigenen Hintergrund (Nico 08.10.: „warum hat die 'nen Hintergrund? Nimm den bitte raus.“) – die Zeichnung steht auf
   der Seite wie die Kamerazeichnungen */
.code-bild { margin: 0; }
.code-bild img, .code-bild svg { display: block; width: 100%; height: auto; }
/* Zeichnung „Wo steht der Akku-Typ?“ (akku_code_zeichnung() in build_pages.py, seit 08.10.): Akku und Etikett in festen
   Farben, Zoom-Kasten, seine Schrift und der Strich außerhalb des Etiketts in den Farben des Designs; Schrift im Kasten wie
   die Überschriften. Größen in Einheiten der Zeichnung (viewBox 900 × 620). */
.acz-kasten { fill: var(--bg-2); stroke: var(--tx); }
.acz-strich { stroke: var(--tx); }
.acz-tx { fill: var(--tx); }
.acz-kicker { fill: var(--tx-3); font-family: var(--f-head); font-weight: 600; font-size: 17px; letter-spacing: .14em; }
.acz-gross { font-family: var(--f-head); font-weight: 700; font-size: 60px; }
/* Kleiner Hover in der Hilfe (Akku-Finder, 404 – Nico 08.10.: „wenn der eben gezeichnete Akku einen kleinen Hovereffekt
   bekommt. sonst steht der da als einzelnes Element so traurig da … zumindest auf der Akkufinder Seite“): die Zeichnung hebt
   sich wie die Karten 4 px an (eigene Ebene per will-change, sonst springt es am Ende), weicher Schatten unter Akku und
   Kasten, der Rand des Zoom-Kastens wird rot. Nur mit Maus; mit „Bewegung reduzieren“ nur die Farbe. */
@media (hover: hover) and (pointer: fine) {
  .code-bild .acz { will-change: transform; transform: translateY(0); filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
    transition: transform var(--hover-t) ease, filter var(--hover-t) ease; }
  .code-bild:hover .acz { transform: translateY(-4px); filter: drop-shadow(0 16px 16px rgba(0, 0, 0, .22)); }
  .code-bild .acz-kasten { transition: stroke var(--hover-t) ease; }
  .code-bild:hover .acz-kasten { stroke: var(--red); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .code-bild:hover .acz { transform: none; }
}
.code-text h2 { font-size: var(--fs-h2); text-transform: uppercase; margin: 0 0 14px; }
.code-text p:not(.eyebrow) { color: var(--tx-2); margin: 0 0 12px; max-width: 62ch; }
@media (max-width: 720px) { .code-hilfe-innen { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Marken-Chips + Markenblöcke (/kameras/; stammen von den Energie-Seiten, die am 08.10. entfallen sind) ---------- */
.en-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(28px, 4vw, 44px); }
.en-marke { scroll-margin-top: 16px; }

/* ---------- Übersicht der Kameraseiten /kameras/ (Nico 29.09.: Weg zu den Kameraseiten über das Menü). Suchfeld im Kopf
   wie auf der 404-Seite: der Kopf darf überlaufen, sonst schneidet er die Vorschläge ab ---------- */
.subhero.kams-kopf { overflow: visible; z-index: 2; }
.kams-such-hinweis { margin: 0; color: var(--tx-3); font-size: .9rem; }
.section.kams-sec { padding-top: clamp(20px, 3vw, 36px); }
/* Seit 30.09. (Nico: Kamera als Überschrift, Akku als „Beiwerk“; zweite Runde: „zu klein und unscheinbar … wie 'ne
   Liste“): je Marke eine Reihe – vorn die Bildkachel der Marke wie auf der Startseite (eigenes s/w-Foto, führt zur
   Kamera-Liste der Markenseite), dahinter je Kamera eine Karte mit großem Namen, Modellcode/Typ und unten klein dem
   Akku (die Bildzahl je Akkuladung ist auf Nicos Wunsch wieder raus). Hover der Kamera-Karten schlicht: Rahmen und Name
   rot, keine Bewegung; die Bildkachel hovert wie auf der Startseite. */
/* Desktop/Tablet: Bildkachel links neben den ersten neun Karten (Reihe 1), darunter rechts der aufklappbare Bereich
   .kams-weitere und der Knopf – die Kachel wächst beim Aufklappen nicht mit (Nico: „das Ursprungsbild links in der Größe
   lassen“). Handy (≤ 700 px): ein Raster mit zwei Spalten, die Bildkachel ist die erste Zelle (.kams-grid löst sich per
   display: contents in die Reihe auf), Bereich und Knopf über die ganze Breite. */
.kams-marke { position: relative; display: grid; grid-template-columns: minmax(210px, 260px) minmax(0, 1fr); column-gap: 16px; row-gap: 0; }
.kams-marke > .kams-marke-kachel { grid-column: 1; grid-row: 1; }
.kams-marke > .kams-grid { grid-column: 2; grid-row: 1; }
.kams-weitere { grid-column: 2; }
.kams-weitere[hidden] { display: none; }
.kams-weitere > .kams-grid { padding-top: 16px; }
/* ohne align-content: start – bei nur einer Kartenreihe (OM System) wachsen die Karten auf die Höhe der Bildkachel
   (Nico 30.09.: „bei einzeiligem Abschnitt passt das Layout nicht ganz“) */
.kams-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.kams-marke .qc { width: auto; height: auto; padding: 14px; gap: 10px; }
.kams-marke .qc-t { font-size: clamp(1rem, 1.6vw, 1.2rem); }
.kams-marke .qc-count { display: flex; align-items: center; gap: 5px; font-size: .86rem; }
.kams-marke .qc-count svg { width: 14px; height: 14px; flex: none; }
.kams-marke .qc-motif { height: auto; min-height: 170px; flex: 1 1 auto; border-radius: 13px; }   /* Foto füllt die Höhe */
@media (max-width: 700px) {
  /* Reihenabstand als Rand unter Kachel und Karten statt row-gap – sonst brachte der Bereich schon bei Höhe 0 einen
     Abstand mit und das Aufklappen sprang am Anfang um 10 px */
  .kams-marke { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; row-gap: 0; }
  .kams-marke > .kams-marke-kachel, .kams-marke > .kams-grid { grid-column: auto; grid-row: auto; }
  .kams-marke > .kams-grid { display: contents; }
  .kams-marke > .kams-marke-kachel, .kams-marke > .kams-grid > .kams-karte { margin-bottom: 10px; }
  .kams-weitere { grid-column: 1 / -1; }
  .kams-weitere > .kams-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 0 10px; }
}
.kams-karte { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 18px 48px 16px 18px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; color: var(--tx); transition: border-color .15s; }
.kams-karte:hover { border-color: var(--red); }
/* Kameranamen in der Schreibweise des Herstellers („Z fc“, nicht „Z FC“) – deshalb hier ohne Großbuchstaben */
.kams-name { font-family: var(--f-head); font-weight: 800; font-size: clamp(1.35rem, 2.2vw, 1.7rem); line-height: 1.05; transition: color .15s; }
.kams-karte:hover .kams-name { color: var(--red); }
.kams-typ { margin: 7px 0 20px; font-size: .84rem; line-height: 1.4; color: var(--tx-3); }
.kams-akku { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: .86rem; color: var(--tx-2); }
.kams-akku b { color: var(--tx); font-weight: 600; white-space: nowrap; }
.kams-akku img { width: 40px; height: 40px; object-fit: contain; flex: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .22)); }
.kams-go { position: absolute; top: 20px; right: 16px; display: flex; color: var(--red); }
.kams-go svg { width: 22px; height: 22px; }
/* zwischen den Marken eine rote Trennlinie (Nico 30.09.: „dann ist es nicht so krass Liste“; 1 px war „viel zu dünn“ →
   3 px mit runden Enden; Deckkraft erst 40 %, dann auf Nicos Wunsch 100 %) */
/* seit 01.10. auch über der ersten Marke (Nico: „Dann ist es klar oben vom Filter getrennt“) – Abstand darüber wie zwischen
   den Marken */
.kams-gruppe { position: relative; padding-top: clamp(34px, 4.5vw, 52px); }
.kams-gruppe + .kams-gruppe, .kams-sec .en-chips + .kams-gruppe { margin-top: clamp(34px, 4.5vw, 52px); }
.kams-sec .en-chips { margin-bottom: 0; }
.kams-gruppe::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 3px;
  background: var(--red); }
/* Familien-Chips je Marke (ab zehn Kameraseiten, Nico 01.10.: „wenn es super viele Kameras werden“) */
.kams-fam { margin: 0 0 16px; }
.kams-karte[hidden] { display: none !important; }
.kams-karte.kams-platz { visibility: hidden; pointer-events: none; }   /* hält das Raster beim Filtern gleich groß */
/* Alle Karten einer Marke gleich hoch (= höchste Karte der Marke, misst das Skript in render_kameras) – beim Filtern ändert
   sich so keine Kartengröße (Nico 01.10.: „Ich möchte da keine Verschiebung auf der Seite“) */
.kams-gruppe[style*="--kams-h"] .kams-karte { height: var(--kams-h); }
.kams-mehr.kams-mehr-platz { visibility: hidden; }
/* Filter-Bewegung (Nico 01.10.): Karten gleiten hinter die Bildkachel – Kachel oben, links abgeschnitten */
.kams-anim .kams-marke { overflow: hidden; }
.kams-anim .kams-marke-kachel { position: relative; z-index: 2; }
.kams-anim .kams-karte { z-index: 1; will-change: transform; }
.kams-mehr { white-space: nowrap; }                                     /* immer einzeilig → gleiche Höhe */                      /* Knopf unsichtbar, behält aber seinen Platz */
@media (max-width: 560px) {
  .kams-marke .qc { padding: 10px; gap: 8px; }
  .kams-marke .qc-motif { min-height: 140px; }
  .kams-karte { padding: 14px 12px 12px; }
  .kams-name { font-size: 1.15rem; padding-right: 22px; }
  .kams-typ { margin-bottom: 16px; }
  .kams-akku img { width: 30px; height: 30px; }
  .kams-go { top: 15px; right: 10px; }
  .kams-go svg { width: 18px; height: 18px; }
  .kams-akku-t b { display: block; }                  /* Code in eigener Zeile unter „Akku-Serie“ */
}
.kams-sec .kam-note { margin-top: clamp(40px, 5vw, 56px); }
/* Hinweise am Seitenende mittig (Nico 02.10.: „richte bitte den Text mittig aus“); balance verteilt die Zeilen gleichmäßig */
.kams-sec .kam-note, .kams-sec .marken-hinweis { text-align: center; margin-inline: auto; text-wrap: balance; }
/* „Alle N Kameras für … zeigen“ (Nico 30.09.: „die ersten neun anzeigen und dann aufklappen“) – Knopf unter den Karten,
   im Stil der Knöpfe am Seitenende; ohne JavaScript bleibt er versteckt und alle Karten sichtbar */
.kams-mehr { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; cursor: pointer;
  font-family: var(--f-head); font-weight: 600; font-size: .9rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--tx-2); transition: .15s; }
.kams-mehr:hover { border-color: var(--red); color: #fff; background: var(--red); }
.kams-mehr:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.kams-mehr[hidden] { display: none; }
@media (max-width: 700px) { .kams-mehr { grid-column: 1 / -1; justify-self: center; margin-top: 0; } }   /* mittig (Nico 30.09.) */

/* ---------- „Kamera nicht gefunden?“ (/kamera-anfrage/, Leitfaden 6, Nico 29.09.): Formular → fertige E-Mail ---------- */
.anfrage { max-width: 640px; display: grid; gap: 18px; }
.anfrage .feld { display: grid; gap: 6px; }
.anfrage label { font-family: var(--f-head); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tx-2); }
.anfrage .pflicht { color: var(--red); }
.anfrage input, .anfrage select, .anfrage textarea {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line); color: var(--tx); border-radius: var(--radius-s);
  padding: 12px 14px; font-family: var(--f-body); font-size: 1rem; line-height: 1.4; transition: border-color .15s; }
.anfrage textarea { resize: vertical; min-height: 112px; }
.anfrage input:focus, .anfrage select:focus, .anfrage textarea:focus { outline: none; border-color: var(--red); }
.anfrage [aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 1px var(--red) inset; }
.anfrage small { font-size: .86rem; color: var(--tx-3); }
.anfrage small a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.anfrage-hinweis { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--tx-3); }
.anfrage .btn { justify-self: start; }
.anfrage-status { margin: 0; font-size: .95rem; line-height: 1.5; }
.anfrage-status:empty { display: none; }
.anfrage-status.is-fehler { color: var(--red); font-weight: 600; }
.anfrage-status.is-ok { color: var(--tx-2); background: var(--bg-1); border-left: 3px solid var(--red); padding: 10px 14px; border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.anfrage-status b { color: var(--tx); }

/* ---------- Kameraseite (Leitfaden 5.4; seit 29.09.) – seit 30.09. in Nicos Reihenfolge: Kopf = Energie-Steckbrief mit
   Herstellerangaben (Quelle + Prüfdatum, Hinweis zur Unabhängigkeit), Akku-Check mit Akku-Bild, Umstieg kompakt,
   Akku-Planer, Produkte ---------- */
.kam-code { margin: 12px 0 0; color: var(--tx-3); font-size: .92rem; }
/* Modellcode in der Überschrift der Kameraseite (Leitfaden 1/13), kleiner und zurückgenommen hinter dem Kameranamen */
/* nur für Screenreader und Suchmaschinen (Startseite: H1 ohne Eingriff ins Design, SEO-Prüfung 01.10.) */
.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; }
h1 .h1-code { font-size: .55em; font-weight: 600; color: var(--tx-3); letter-spacing: .02em; white-space: nowrap; }
.kam-kopf .steckbrief { margin-top: 28px; }
/* Röntgenblick (Stil C, Nico 30.09.): allgemeine Zeichnung der Kamera-Art rechts neben dem Titel, der rote Akku als eigenes
   Element – beim Hovern gleitet er ein Stück unten aus dem Griff („Auswerfen“), auf Touch-Geräten einmal beim
   Hineinscrollen bzw. beim Tippen (js/finder.js, Klasse .is-raus). Nur Bewegung, kein Verblassen: kein Rosa, kein zweiter
   Rotton. Die Linien sind eine Alpha-Maske und nehmen die Textfarbe an – hell und dunkel ohne zweites Bild. */
.kam-kopf-reihe { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.kam-kopf-text { flex: 1 1 auto; min-width: 0; }
.kam-zeichnung { flex: 0 0 auto; width: clamp(260px, 30vw, 380px); margin: 0; }
.kz-flaeche { position: relative; width: 100%; }
.kz-linien { position: absolute; inset: 0; background: var(--tx);
  -webkit-mask: var(--kz) center / 100% 100% no-repeat; mask: var(--kz) center / 100% 100% no-repeat; }
.kz-akku { position: absolute; background: var(--red); border-radius: 9% / 5%; transform: translateY(0); will-change: transform;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
/* Hover erst ab .kz-bereit (finder.js setzt es nach dem Laden): lag der Zeiger beim frischen Öffnen schon auf der Kamera,
   stand der Akku sonst ohne Bewegung gleich unten (Nico 30.09.: „nur wenn die Website frisch geöffnet ist und ich sofort
   auf die Kamera hover“) – so gleitet er auch dann weich heraus */
@media (hover: hover) {
  .kam-zeichnung.kz-bereit:not(.kz-hinten):hover .kz-akku { transform: translateY(42%); }
  .kam-zeichnung.kz-hinten.kz-bereit:hover .kz-akku { transform: scale(.8); }
}
.kam-zeichnung.is-raus:not(.kz-hinten) .kz-akku { transform: translateY(42%); }
/* .kz-hinten: Akku wird hinten entnommen (QX1: Akkudeckel = Rückwand) – er gleitet nicht nach unten heraus (Nico 05.10.:
   „Bei der Kamera darf der Akku dann aber nicht nach unten rausrutschen“), sondern zieht sich nach hinten zurück: er wird
   kleiner, wie von hinten herausgezogen (Nico: „was, was zum Prozess des Akku wechselns passt“). Nur Bewegung, kein
   Verblassen; build_pages.py roentgen(), kamera_modelle.json "auswerfen": "hinten" */
.kam-zeichnung.kz-hinten .kz-akku { transform: scale(1); }
.kam-zeichnung.kz-hinten.is-raus .kz-akku { transform: scale(.8); }
@media (max-width: 900px) {
  .kam-kopf-reihe { flex-direction: column; align-items: stretch; gap: 0; }
  .kam-zeichnung { width: min(100%, 260px); margin: 22px auto 0; }   /* am Handy kleiner: Steckbrief früher im Bild */
}
@media (prefers-reduced-motion: reduce) { .kz-akku { transition: none; } }
.kam-check .section-head { margin-bottom: 0; }
.kam-antwort { margin-top: 22px; max-width: 620px; }
.kam-antwort b.r, .kc-answer b.r { color: var(--red); }                  /* Akku-Codes in der Antwort (Nico 30.09.: „hier wäre rot auch gut“) */
/* Umstieg kompakt (Nico: „etwas kleiner“) und als reine Übersicht ohne Knöpfe (Nico: „Logikfehler … mehr eine
   Übersicht“): schlichte Liste mit rotem Haken, nichts zum Anklicken außer dem Kamera-Check der Serie im Text */
.section.kam-umstieg { padding: clamp(32px, 5vw, 52px) 0; }
.kam-umstieg .section-head { margin-bottom: 18px; }
.kam-umstieg .section-head h2 { font-size: var(--fs-h3); }
.kam-umstieg .section-head p:not(.eyebrow) { font-size: .95rem; margin-top: 8px; }
.kam-umstieg .section-head p a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.kam-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 28px; }
.kam-liste li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; font-size: .92rem; line-height: 1.4; color: var(--tx); }
.kam-liste li svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--red); }
.kam-liste li span { min-width: 0; }
.kam-liste small { display: block; margin-top: 2px; font-size: .78rem; line-height: 1.4; color: var(--tx-3); }
@media (max-width: 560px) { .kam-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; } }   /* Handy: zwei Spalten */
.kam-antwort .kam-akku { margin-top: 6px; color: var(--tx-2); font-size: .92rem; }
/* Empfehlungs-Block (Nico 15.10.: „Könnte man visueller noch besser machen. aktuell ist das nur ein Fließtext ohne Ausschmückung“) –
   Akku-Finder, Kamera-Check der Serienseite und Akku-Check der Kameraseite (empfehlung_block() in build_pages.py = empBlock() in
   js/finder.js): „Unsere Empfehlung“ mit rotem Streifen, Akku groß, Gründe als Haken. Canons Einschränkungen der älteren
   Akkutypen stehen bewusst nicht darin (Nico 15.10.: „ist das hier eine negative Aussage oder?“), nur im Steckbrief.
   Selektoren mit .emp-block davor – .kc-answer p und .fd-antwort-txt p setzen sonst Abstand/Farbe. */
.emp-block { margin: 14px 0 4px; padding: 16px 18px; border-radius: var(--radius-s); background: var(--bg-2); border: 1px solid var(--line); text-align: left; }
.fd-antwort .emp-block { background: var(--bg-1); max-width: 620px; margin: 6px auto 18px; }   /* Finder: die Tafel selbst ist bg-2 */
.emp-block .emp-wahl { border-left: 3px solid var(--red); padding-left: 14px; }
.emp-block p.emp-kicker { margin: 0; font-family: var(--f-head); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--red); }
.emp-block p.emp-akku { margin: 2px 0 8px; font-family: var(--f-head); font-size: 1.9rem; font-weight: 800; line-height: 1.1; color: var(--red); }
.emp-block .emp-punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.emp-block .emp-punkte li { display: flex; align-items: flex-start; gap: 9px; font-size: .95rem; line-height: 1.4; color: var(--tx); }
.emp-block .emp-punkte svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--red); }
/* Kauf-Knopf (Nico 15.10.: „Sollte da nicht direkt ein Kauflink rein … Für die ganz faulen Kunden“) – Amazon-Gelb wie .card-cta,
   etwas größer, weil er hier die Hauptaktion ist; daneben klein, welches Angebot es ist („Pro · einzeln · 2600 mAh“) */
.emp-block .emp-kauf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; }
.emp-block .emp-cta { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 9px; background: var(--amz-gelb);
  color: var(--amz-gelb-ink); font-family: var(--f-body); font-weight: 600; font-size: .92rem; line-height: 1.2; text-decoration: none;
  box-shadow: 0 8px 20px -12px rgba(245,196,0,.8); transition: background-color .15s; }
.emp-block .emp-cta:hover { background: var(--amz-gelb-hover); color: var(--amz-gelb-ink); }
.emp-block .emp-cta:focus-visible { outline: 3px solid rgba(245, 196, 0, .6); outline-offset: 2px; }
.emp-block .emp-cta svg { width: 16px; height: 16px; flex: none; }
.emp-block .emp-angebot { font-size: .84rem; color: var(--tx-2); }
/* Handy: in Kamera-Check/Akku-Check unter das Häkchen ziehen (30 px + 12 px Abstand) – mehr Breite */
@media (max-width: 480px) { .kc-answer .emp-block { margin-left: -42px; } }
/* Finder mit Empfehlung (Nico 15.10.: „Sollten wir dann im Gegenzug nicht die Stelle hier unauffälliger gestalten um den Fokus auf
   den eigentlichen Akku zu richten?“): die Serie nur als Satz statt der großen Zeile „BAXXTAR LP-E6“ – der Blickfang ist der
   empfohlene Akku im Block darunter. Ohne Empfehlung bleibt die große Zeile (dort ist sie die Antwort, Nico 25.09.). */
.fd-q-treffer.fd-q-emp { font-family: var(--f-body); font-weight: 600; font-size: clamp(1.05rem, 2.2vw, 1.25rem); line-height: 1.4;
  text-transform: none; letter-spacing: 0; color: var(--tx); }
.fd-q-emp .fd-vor, .fd-q-emp .fd-name { display: inline; font: inherit; color: inherit; margin: 0; }
.kam-andere { margin: 14px 0 0; font-size: .92rem; color: var(--tx-3); }
.kam-andere a, .kam-tasche a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.planer { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px 36px; align-items: center;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(18px, 3vw, 30px); }
.planer-modus { grid-column: 1 / -1; display: flex; gap: 8px; }
.planer-eingabe { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 18px; }
.planer-was { grid-column: 1 / -1; font-family: var(--f-head); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .82rem; color: var(--tx-2); }
.planer-eingabe input[type="range"] { width: 100%; accent-color: var(--red); cursor: pointer; }
.planer-zahl { font-family: var(--f-head); font-weight: 800; font-size: 1.6rem; font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; color: var(--tx); }
.planer-links { display: grid; gap: 16px; }
.planer-reserve { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--tx-2); cursor: pointer; }
.planer-reserve input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--red); flex: none; cursor: pointer; }
.planer-reserve b { color: var(--tx); font-weight: 600; }
.planer-reserve small { display: block; margin-top: 3px; font-size: .82rem; color: var(--tx-3); line-height: 1.45; }
.planer-label { margin: 0 0 4px; font-family: var(--f-head); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; color: var(--tx-3); }
.planer-ergebnis { border-left: 3px solid var(--red); padding-left: 18px; }
.planer-n { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.planer-n b { font-family: var(--f-head); font-weight: 800; font-size: clamp(2.6rem, 6vw, 3.4rem); line-height: 1; color: var(--red); font-variant-numeric: tabular-nums; }
.planer-n span { font-family: var(--f-head); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--tx); }
.planer-weg { margin: 8px 0 0; color: var(--tx-2); }
.planer-fuss, .steckbrief-fuss { margin: 14px 0 0; font-size: .86rem; color: var(--tx-3); max-width: 80ch; }
@media (max-width: 720px) { .planer { grid-template-columns: minmax(0, 1fr); } }
.steckbrief { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; }
.steckbrief > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 4px 16px; padding: 13px 0; border-top: 1px solid var(--line); }
.steckbrief dt { color: var(--tx-3); font-size: .9rem; }
.steckbrief dd { margin: 0; color: var(--tx); font-size: .95rem; line-height: 1.5; }
.steckbrief dd b.r { color: var(--red); font-weight: 600; }    /* Akku-Code (Nico 30.09.) */
@media (max-width: 860px) { .steckbrief { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .steckbrief > div { grid-template-columns: minmax(0, 1fr); } }
.quellen { margin-top: 12px; font-size: .88rem; color: var(--tx-2); }
.quellen summary { cursor: pointer; font-weight: 600; }
.quellen ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.quellen a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.marken-hinweis { margin: 14px 0 0; font-size: .84rem; color: var(--tx-3); max-width: 80ch; }
.kam-tasche { margin: 26px 0 0; color: var(--tx-2); }
.kam-links { margin-top: 28px; }
/* Planer-Vorschlag an den Produktkarten (js/finder.js initAkkuPlaner) */
.card.is-planer { border-color: var(--red); box-shadow: 0 0 0 1px var(--red) inset; }
.card.is-planer::after { content: "Planer-Vorschlag"; position: absolute; top: 10px; right: 10px; z-index: 2; background: var(--red); color: #fff;
  font-family: var(--f-head); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 4px 8px; border-radius: 6px; }
/* Link zur Kameraseite in Kamera-Check und Akku-Finder */
.kc-answer > div > a.kc-kamseite { display: block; margin-top: 6px; }
.fd-kamseite { display: inline-block; max-width: 100%; margin-top: 12px; color: var(--red); font-family: var(--f-head); font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em; font-size: .86rem; line-height: 1.4; text-wrap: balance; }
.fd-kamseite .nw { white-space: nowrap; }                     /* Kameraname + Pfeil nie trennen */
.fd-kamseite svg { width: 15px; height: 15px; vertical-align: -2px; }
/* Knopf „Alles zur …-Serie“ + Link zur Kameraseite: eine Zeile mit Luft dazwischen, wird es eng, untereinander (Nico 01.10.) */
.fd-aktionen { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 32px; margin-top: 18px; }
.fd-aktionen > .btn, .fd-aktionen > .fd-kamseite { margin: 0; }
/* „Wissenswertes zum Akku“ im Akku-Finder (Leitfaden 6, Nico 01.10.: nur zum Akku, nicht zur Kamera; „einheitlich“) –
   dieselben Karten wie „Technische Daten“ (.spec-card), nur ohne Aufklappen → kein Anheben beim Hovern (.spec-still) */
.spec-card.spec-still:hover { transform: none; border-color: var(--line); box-shadow: none; }
.spec-card.spec-still:hover h3 { color: inherit; }
.spec-card.spec-still { padding-bottom: 12px; }
.fd-w-mehr { display: inline-block; margin-top: 2px; color: var(--red); font-family: var(--f-head); font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em; font-size: .86rem; }
.fd-w-mehr .nw { white-space: nowrap; }
.fd-w-mehr svg { width: 15px; height: 15px; vertical-align: -2px; }

/* ---------- Ratgeber /ratgeber/ (seit 02.10., Nico – Themenplan von Lars). Seit 08.10. (2. Runde) beantwortet jede Karte
   ihre Frage selbst (Nico: „Wenn jemand eine Frage stellt, möchte ich auch eine Antwort darauf haben“): Frage, Kurzantwort,
   Erklärung, der Link erst am Ende. Spalten mind. 300 px (Lesetext; Desktop 3, Tablet 2, Handy 1 – min() verhindert
   Überlauf unter 348 px Breite). Pfeile fest klein (ohne Maß würden SVGs 100 px groß).
   3. Runde (Nico: „der erste Antwortabsatz geht mir ein bisschen zu sehr unter, weil die Überschrift zu ähnlich aussieht“ –
   Recherche NN/g, Harvard: Frage als Überschrift klar von der Antwort absetzen, Antwort gleich im ersten Satz): Frage =
   Überschrift (Saira, Großbuchstaben), Kurzantwort = Vorspann (größer, normale Stärke, volle Textfarbe, roter Strich davor),
   Erklärung = Fließtext (grau). Karten-Hover: die Frage färbt sich rot (Nico: „Kartenhover … wo die Überschrift bzw. Frage
   sich rot färbt“), dazu seit der 4. Runde das Anheben wie bei den Produktkarten (s. unten). ---------- */
.rg-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.rg-karte { display: flex; flex-direction: column; gap: 12px; min-width: 0; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px; }
.rg-karte h3 { font-family: var(--f-head); font-weight: 700; font-size: 1.05rem; line-height: 1.25; text-transform: uppercase;
  letter-spacing: .01em; margin: 0; color: var(--tx); transition: color var(--hover-t) ease; }
/* Karten-Hover wie Produktkarten und „Technische Daten“ (Nico 08.10.: „Kriegen wir den Standard-Karten-Hover-Effekt auch
   auf die Fragen-Karten ohne groß was zu zerschießen?“): ganze Karte 4 px anheben + Schatten (dauerhaft eigene Ebene per
   will-change, sonst springt die Schrift am Ende), Frage rot. Nur mit Maus. Verträgt sich mit dem Themen-Filter: der setzt
   beim Gleiten transform/transition inline und räumt danach auf (initRatgeberFilter → sauber()); Ruhezustand translateY(0)
   = Ziel des Gleitens. */
@media (hover: hover) and (pointer: fine) {
  .rg-karte { will-change: transform; transform: translateY(0);
    transition: transform var(--hover-t) ease, box-shadow var(--hover-t) ease, border-color var(--hover-t) ease; }
  .rg-karte:hover { z-index: 3; transform: translateY(-4px); border-color: var(--line-2); box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .32); }
  .rg-karte:hover h3 { color: var(--red); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .rg-karte:hover { transform: none; }
}
.rg-karte p { margin: 0; color: var(--tx-2); font-size: .94rem; line-height: 1.55; }
/* Kurzantwort als eigener Absatz (Nico: „hinter der fetten Schrift einen Absatz und Abstand“); Strich 3 px mit runden
   Enden (keine Haarlinien) */
.rg-karte .rg-kurz { position: relative; padding-left: 15px; color: var(--tx); font-size: 1.04rem; font-weight: 500; line-height: 1.45; }
.rg-karte .rg-kurz::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 3px; border-radius: 3px; background: var(--red); }
.rg-ziel { margin-top: auto; padding-top: 4px; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; color: var(--red);
  font-family: var(--f-head); font-weight: 700; font-size: .84rem; text-transform: uppercase; letter-spacing: .04em;
  text-decoration: underline transparent; text-underline-offset: 4px; text-decoration-thickness: 2px;
  transition: text-decoration-color var(--hover-t) ease; }
.rg-ziel:hover { text-decoration-color: currentColor; }
.rg-ziel svg { width: 15px; height: 15px; flex: none; }
/* Fragen nach Thema filtern (seit 08.10., Nico: „zwingend die Übersichtlichkeit der Ratgeberseite verbessern“ +
   „nach ungefährem Thema filtern … Dass die Seite nicht so bloated ist“): Chips wie /kameras/, ein Raster mit allen
   Fragen; verborgene Karten tragen [hidden] (sonst schlüge display:flex das hidden-Attribut). Wegfallende Karten blenden
   als Geister an ihrem alten Platz aus (js/finder.js initRatgeberFilter) → Raster ist Bezugsrahmen. */
.rg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.rg-chips .chip small { opacity: .7; margin-left: 2px; font-size: .8em; }
.rg-raster { position: relative; }
.rg-karte[hidden] { display: none; }
#fragen .marken-hinweis { margin-top: 28px; }
/* Bild im Fenster („Beispielbild ansehen“, Nico 08.10.: „kurz das Bild anzeigen das man dann wieder schließen kann. ganz
   klassisch“): natives <dialog> – abgedunkelter Hintergrund in beiden Designs, Bild mittig, runder Schließen-Knopf rechts
   darüber; Esc, Knopf und Klick daneben schließen (js/finder.js initBildDialog). Kurzes Einblenden, ohne Bewegungswunsch
   des Geräts sofort. */
/* Breite: höchstens 760 px und so, dass Zeichnung (900 × 620), Knopf darüber und Bildtext auch auf flachen Bildschirmen
   ganz ins Fenster passen */
.bild-dialog { width: min(760px, 92vw, calc((100vh - 190px) * 1.45)); max-width: none; max-height: none; padding: 0; border: 0;
  background: transparent; overflow: visible; color: #f5f4f1;
  /* Hintergrund ist immer dunkel → Zeichnung in beiden Designs mit den Werten des dunklen Designs */
  --bg-2: #24282f; --tx: #f3f4f6; --tx-3: #858c95; }
.bild-dialog:focus { outline: none; }
.bild-dialog::backdrop { background: rgba(9, 10, 12, .84); }
.bild-dialog[open], .bild-dialog[open]::backdrop { animation: bd-rein .2s ease-out; }
@keyframes bd-rein { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bild-dialog[open], .bild-dialog[open]::backdrop { animation: none; } }
.bild-dialog figure { margin: 0; }
.bild-dialog .acz { display: block; width: 100%; height: auto; }
.bild-dialog figcaption { margin-top: 12px; text-align: center; font-size: .92rem; line-height: 1.45; color: rgba(245, 244, 241, .86); }
.bd-zu { position: absolute; right: 0; bottom: calc(100% + 12px); width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(20, 22, 26, .9); color: #fff; cursor: pointer;
  transition: background-color var(--hover-t) ease, border-color var(--hover-t) ease; }
.bd-zu:hover { background: var(--red); border-color: var(--red); }
.bd-zu:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.bd-zu svg { width: 20px; height: 20px; }

/* Weicher Wechsel hell ↔ dunkel (Nico 08.10.: „smoother … mit etwas mehr moderner ‚Klasse‘“, js/theme.js wechseln()): Das
   neue Design wächst als Kreis vom Schalter aus (View Transitions); dafür hier die Standard-Überblendung aus. Während des
   Wechsels keine CSS-Übergänge, sonst färben sich Elemente im Kreis noch nach. Ohne Unterstützung: sofort wie bisher. */
html.theme-wechsel::view-transition-old(root), html.theme-wechsel::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.theme-wechsel *, html.theme-wechsel *::before, html.theme-wechsel *::after { transition: none !important; }

/* ============================================================
   ÜBER BAXXTAR (/ueber-baxxtar/, seit 14.10.2026) – Design 1:1 nach Lars' Entwurf vom 09.10. (Nico 14.10., 2. Runde: „Passe
   das Design komplett auf das von Lars an. Inhaltlich darfst du anpassen“): Klassen und Werte aus Lars' <style>, sein
   Grundstil und der Block „Kräftiger Stil (09.10.2026)“ hier zusammengefasst. Zeitleiste im Design „alt“ (Linie mit Punkten,
   Lars' Standardansicht), dunkler Fotokopf mit Brotkrumen darüber, Werte mit Icons, Produktreihe als ein Bild, CHIP-Karte
   rot umrandet, Anbieter-Karte mit Textlink. Abweichungen: Linie der Zeitleiste und Dank-Linie 3 bzw. 4 px rot mit runden
   Enden (keine Haarlinien, Nico 30.09. – Lars: 2 px grau, gerade Enden); Ausschnitt des Kopffotos je Breite über --fx-d /
   --fx-t / --fx am Bild (render_ueber), am Tablet Einleitung schmaler, damit sie nicht über dem Akku liegt.
   ============================================================ */
/* Kopf: Foto mit dunklem Verlauf von links, weiße Schrift; Handy: Bildband 280 px, Text darunter auf Dunkel */
.ab-hero { position: relative; min-height: clamp(440px, 48vw, 600px); display: flex; align-items: flex-end; overflow: hidden;
  background: #0d0e10; color: #fff; }
.ab-hero .ab-bg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--fx-d, 64%) center; }
.ab-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,11,13,.94) 0%,
  rgba(10,11,13,.78) 36%, rgba(10,11,13,.2) 68%, rgba(10,11,13,0) 100%); }
.ab-hero .wrap { position: relative; z-index: 1; width: 100%; padding-top: clamp(70px, 9vw, 120px); padding-bottom: clamp(40px, 6vw, 72px); }
.ab-hero .kicker { font-family: var(--f-head); text-transform: uppercase; letter-spacing: .16em; font-size: .8rem; font-weight: 700;
  color: var(--red); margin: 0 0 14px; }
.ab-hero h1 { font-size: clamp(2.2rem, 6.2vw, 3.9rem); font-weight: 800; text-transform: uppercase; line-height: 1.02; max-width: 13ch;
  color: #fff; text-wrap: balance; }
.ab-hero h1 .r { color: var(--red); }
.ab-hero .lead { max-width: 540px; color: rgba(255,255,255,.86); font-size: clamp(1.08rem, 1.9vw, 1.3rem); line-height: 1.55; margin: 18px 0 22px; }
.ab-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ab-chips span { font: 600 .76rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .06em; padding: 9px 13px; border-radius: 999px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24); color: #fff; }
@media (min-width: 721px) and (max-width: 1023px) {
  .ab-hero .ab-bg { object-position: var(--fx-t, var(--fx-d, 64%)) center; }
  .ab-hero .lead { max-width: 440px; }
}
@media (max-width: 720px) {
  .ab-hero { display: block; min-height: 0; }
  .ab-hero .ab-bg { position: relative; height: 280px; object-position: var(--fx, 74%) center; }
  .ab-hero::after { inset: 0 0 auto 0; height: 280px; background: linear-gradient(0deg, #0d0e10 0%, rgba(13,14,16,0) 42%); }
  .ab-hero .wrap { padding-top: 10px; }
}
.ab-sec .section-head { max-width: 920px; }
.ab-sec .section-head h2 { font-size: clamp(1.9rem, 4.8vw, 3.1rem); line-height: 1.02; }
.ab-intro { max-width: 800px; color: var(--tx); font-size: clamp(1.15rem, 2.2vw, 1.42rem); line-height: 1.5; font-weight: 500;
  margin: 0 0 clamp(28px, 5vw, 56px); }
/* Zeitleiste – Lars' Design „alt“: senkrechte Linie mit Punkten, Jahr links (Handy: Jahr über dem Text, Linie am Rand) */
.ab-time { list-style: none; margin: 0; padding: 0; }
.ab-time.v-alt { position: relative; }
.ab-time.v-alt::before { content: ""; position: absolute; left: 124.5px; top: 8px; bottom: 22px; width: 3px; border-radius: 3px; background: var(--red); }
.ab-time.v-alt li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 42px; padding: 0 0 30px; position: relative; }
.ab-time.v-alt li::before { content: ""; position: absolute; left: 119px; top: 6px; width: 14px; height: 14px; box-sizing: border-box;
  border-radius: 50%; background: var(--bg); border: 3px solid var(--red); }
.ab-time.v-alt .yr { font: 800 1.3rem/1.15 var(--f-head); color: var(--red); text-align: right; text-transform: uppercase; }
.ab-time.v-alt h3 { font-size: 1.12rem; text-transform: uppercase; margin: 0 0 6px; letter-spacing: .01em; }
.ab-time.v-alt p { margin: 0; color: var(--tx-2); max-width: 64ch; line-height: 1.6; }
@media (max-width: 640px) {
  .ab-time.v-alt::before { left: 5.5px; }
  .ab-time.v-alt li { grid-template-columns: minmax(0, 1fr); gap: 4px; padding-left: 28px; }
  .ab-time.v-alt li::before { left: 0; }
  .ab-time.v-alt .yr { text-align: left; }
}
/* Haltung: vier Werte mit Icon + Produktreihe (ein Bild, tools/ueber_produktfamilie.py) */
.ab-claims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.ab-claim, .ab-duo > div { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 3.2vw, 38px); }
.ab-claim svg { display: block; width: 34px; height: 34px; color: var(--red); margin-bottom: 16px; }
.ab-claim h3 { font: 800 clamp(1.7rem, 3.6vw, 2.5rem)/1.02 var(--f-head); text-transform: uppercase; letter-spacing: -.01em; margin: 0 0 12px; color: var(--tx); }
.ab-claim p, .ab-duo p { font-size: clamp(1.04rem, 1.6vw, 1.18rem); line-height: 1.62; color: var(--tx-2); margin: 0; }
.ab-family { margin: clamp(36px, 5vw, 60px) 0 0; }
.ab-family img { display: block; width: 100%; max-width: 1100px; height: auto; margin: 0 auto; }
.ab-family figcaption { text-align: center; font-size: .84rem; color: var(--tx-3); margin-top: 12px; }
/* Einsatz: Bildband + Foto/Film */
.ab-strip { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 3 / 1; background: #0d0e10; }
.ab-strip img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 68% center; }
.ab-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); margin-top: clamp(16px, 2.5vw, 26px); }
.ab-duo h3 { display: flex; align-items: center; gap: 14px; font: 800 clamp(2rem, 4.6vw, 3.1rem)/1 var(--f-head); text-transform: uppercase; margin: 0 0 14px; color: var(--tx); }
.ab-duo h3 svg { flex: none; width: clamp(28px, 3.2vw, 38px); height: clamp(28px, 3.2vw, 38px); color: var(--red); }
@media (max-width: 720px) {
  .ab-strip { aspect-ratio: 4 / 3; }
  .ab-claims, .ab-duo { grid-template-columns: minmax(0, 1fr); }
}
/* Zahlen */
.ab-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ab-stat { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 3vw, 34px) clamp(18px, 2.4vw, 26px); }
.ab-stat b { display: block; font: 800 clamp(2.8rem, 6.4vw, 4.6rem)/.95 var(--f-head); color: var(--tx); font-variant-numeric: tabular-nums; }
.ab-stat span { display: block; margin-top: 9px; font-size: clamp(.96rem, 1.4vw, 1.1rem); line-height: 1.4; color: var(--tx-2); }
@media (max-width: 820px) { .ab-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Tests: hervorgehobene Karte (.hl) mit rotem Rahmen und roter Überschrift */
.ab-tests { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.ab-test { display: flex; flex-direction: column; gap: 10px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 3vw, 32px); }
.ab-test .src { font: 700 .76rem/1.2 var(--f-head); letter-spacing: .07em; text-transform: uppercase; color: var(--red); }
.ab-test h3 { font-size: clamp(1.9rem, 4.4vw, 2.8rem); line-height: 1; text-transform: uppercase; margin: 0; }
.ab-test h3 .ab-einheit { text-transform: none; }
.ab-test.hl { border-color: var(--red); }
.ab-test.hl h3 { color: var(--red); }
.ab-test p { margin: 0; color: var(--tx-2); font-size: clamp(1rem, 1.5vw, 1.1rem); line-height: 1.55; }
.ab-test a { margin-top: auto; align-self: flex-start; font-size: .85rem; color: var(--tx-2); text-decoration: underline; text-underline-offset: 3px; transition: color var(--hover-t) ease; }
.ab-test a:hover { color: var(--red); }
.ab-note { font-size: .84rem; color: var(--tx-3); margin: 14px 0 0; }
/* Anbieter */
.ab-who { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 30px; align-items: start; }
.ab-who p { color: var(--tx-2); font-size: clamp(1.04rem, 1.6vw, 1.16rem); line-height: 1.65; margin: 0 0 14px; }
.ab-who .ab-lead { font: 600 clamp(1.15rem, 2vw, 1.42rem)/1.5 var(--f-body); color: var(--tx); }
.ab-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.ab-card dl { margin: 0; display: grid; gap: 14px; }
.ab-card dt { font: 700 .74rem/1 var(--f-head); letter-spacing: .09em; text-transform: uppercase; color: var(--tx-3); }
.ab-card dd { margin: 5px 0 0; color: var(--tx); font-size: 1.05rem; line-height: 1.5; }
.ab-card a { text-decoration: underline; text-underline-offset: 3px; transition: color var(--hover-t) ease; }
.ab-card a:hover { color: var(--red); }
@media (max-width: 820px) { .ab-who { grid-template-columns: minmax(0, 1fr); } }
/* Dank: rote Linie links (Lars 4 px – hier mit runden Enden) */
.ab-thanks { position: relative; max-width: 780px; padding: 4px 0 4px clamp(20px, 3vw, 34px); }
.ab-thanks::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 4px; background: var(--red); }
.ab-thanks p { margin: 0; color: var(--tx-2); font-size: clamp(1.06rem, 1.7vw, 1.24rem); line-height: 1.6; }
.ab-thanks .big { font: 700 clamp(2rem, 5.6vw, 3.6rem)/1.02 var(--f-head); text-transform: uppercase; color: var(--tx); margin: 0 0 10px; }
.ab-thanks .ab-claimline { font: 800 clamp(1.5rem, 3.6vw, 2.4rem)/1 var(--f-head); text-transform: uppercase; color: var(--red); margin-top: 22px; }
/* Link „Mehr über Baxxtar“ in „Die Marke“ (Startseite) – Stil wie die Links der Ratgeber-Karten (.rg-ziel) */
.mehr-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; color: var(--red); font-family: var(--f-head);
  font-weight: 700; font-size: .84rem; text-transform: uppercase; letter-spacing: .04em; text-decoration: underline transparent;
  text-underline-offset: 4px; text-decoration-thickness: 2px; transition: text-decoration-color var(--hover-t) ease; }
.mehr-link:hover { text-decoration-color: currentColor; }
.mehr-link svg { width: 15px; height: 15px; flex: none; }

/* ============================================================
   DUNKLES DESIGN (Konzept Schritt 4) — Schalter im Header setzt data-theme="dark" am <html> (js/theme.js).
   Palette = das Ursprungsdesign (erstes :root oben); danach nur die hart hell verdrahteten Stellen zurück auf Dunkel.
   Bildsprache s/w + ein Rot bleibt unverändert; Produktfotos (Amazon) behalten ihren weißen Grund.
   Seit 28.09. Karten heller + Rahmen deutlicher (Nico: „die Karten verschmelzen zu sehr mit dem Hintergrund“):
   --bg-2 #191c20 → #24282f (Karte hebt sich auf --bg-1 um ~18 statt 5 Stufen ab), --bg-3 mitgezogen (Chips in Karten),
   Linien .09/.17 → .13/.22. --tx-3 auf --bg-2 bleibt lesbar (Kontrast 4,7 : 1).
   ============================================================ */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:       #0d0e10;
  --bg-1:     #141619;
  --bg-2:     #24282f;
  --bg-3:     #2e333b;
  --line:     rgba(255,255,255,0.13);
  --line-2:   rgba(255,255,255,0.22);
  --tx:       #f3f4f6;
  --tx-2:     #aab0b8;
  --tx-3:     #858c95;
  --silver:   #c9ced4;
  --tx-inv:   #111318;
  --red-soft: rgba(225,27,21,0.16);
  --shadow:   0 18px 50px rgba(0,0,0,0.55);
}
:root[data-theme="dark"] .site-header { background: rgba(13,14,16,0.82); }
:root[data-theme="dark"] .theme-toggle .ic-mond { display: none; }
:root[data-theme="dark"] .theme-toggle .ic-sonne { display: block; }
:root[data-theme="dark"] .brand-logo.logo-hell { display: none; }
:root[data-theme="dark"] .brand-logo.logo-dunkel { display: block; }
/* Liniennamen im Dunkeln: gleicher Farbton, heller – #3a4048/#0f7d55 wären auf #191c20 kaum lesbar */
:root[data-theme="dark"] .hub-motiv-bild img { filter: drop-shadow(0 0 42px rgba(255, 255, 255, .10)) drop-shadow(0 24px 26px rgba(0, 0, 0, .5)); }   /* schwarze Tasche löst sich vom dunklen Grund */
:root[data-theme="dark"] .line-card .line-name.l-max { color: #23a877; }
:root[data-theme="dark"] .line-card.lc-max { --lc: #23a877; }   /* Rahmen/Streifen wie der Linienname */
:root[data-theme="dark"] .slide-photo::after {
  background: linear-gradient(90deg, rgba(13,14,16,.88) 0%, rgba(13,14,16,.78) 30%, rgba(13,14,16,.52) 48%, rgba(13,14,16,.26) 64%, rgba(13,14,16,.08) 80%, rgba(13,14,16,0) 94%);
}
:root[data-theme="dark"] .hub-hero.hub-photo::after {
  background: linear-gradient(90deg, rgba(20,22,25,.9) 0%, rgba(20,22,25,.8) 30%, rgba(20,22,25,.55) 48%, rgba(20,22,25,.28) 64%, rgba(20,22,25,.08) 80%, rgba(20,22,25,0) 94%);
}
/* (Handy-Schleier des Hero entfällt – dort Bildband ohne Schleier, siehe „Hero-Slider: helle Bühnen“). Muss NACH der
   Desktop-Regel oben stehen (gleiche Spezifität). Seit 09.10. Band wie der Slider: bis 720 px, min(74vw, 420px). */
@media (max-width: 720px) {
  :root[data-theme="dark"] .hub-hero.hub-photo::after { background: linear-gradient(180deg, rgba(20,22,25,0) calc(min(74vw, 420px) - 70px), var(--bg-1) min(74vw, 420px)); }
}
:root[data-theme="dark"] .dots button { background: rgba(255,255,255,.34); }
:root[data-theme="dark"] .dots button.active { background: var(--red); }
:root[data-theme="dark"] .slide-nav { background: rgba(25,28,32,.9); }
@media (min-width: 1280px) {
  :root[data-theme="dark"] .slide-nav { background: none; }
  :root[data-theme="dark"] .slide-nav-prev { color: rgba(255,255,255,.34); }
  :root[data-theme="dark"] .hero-top:hover .slide-nav-prev { color: rgba(255,255,255,.62); }
  :root[data-theme="dark"] .hero-top .slide-nav:hover { color: var(--red); }
}
:root[data-theme="dark"] .slider-search input { background: var(--bg-2); color: var(--tx); box-shadow: 0 0 0 1px var(--line-2) inset; }
:root[data-theme="dark"] .slider-search input::placeholder { color: var(--tx-3); }
:root[data-theme="dark"] .fs-list { box-shadow: 0 18px 44px rgba(0,0,0,.55); }
:root[data-theme="dark"] .medallion { background: linear-gradient(160deg, #23262b, #0e0f11); border-color: var(--line-2); }
:root[data-theme="dark"] .footer-legal p { color: #737a83; }
/* Store-Karte: im dunklen Design wäre #141619 gleich dem Seitengrund → Kartenfläche wie die übrigen Karten */
:root[data-theme="dark"] .duo-amazon { background: var(--bg-2); }