/* ==========================================================================
   Strongback Mobility — strongbackmobility.de
   Cloud Design System — tokens per Brand Style Guide v1.0 (June 2026)
   ========================================================================== */

@font-face {
  font-family: "Raleway";
  src: url("assets/fonts/Raleway-VariableFont_wght.ttf") format("truetype-variations"),
       url("assets/fonts/Raleway-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  /* Selbst gehostet statt Google Fonts (Datenschutz, siehe Datenschutzerklaerung Ziffer 4).
     Schriftdatei liegt in assets/fonts/, hochgeladen und geprueft am 19.08.2026.
     Lizenz: SIL Open Font License, OFL.txt bitte im Fonts-Ordner belassen.
     Sollte die Datei einmal fehlen, greift automatisch Raleway als Ersatz. */
  font-family: "Work Sans";
  src: url("assets/fonts/WorkSans-VariableFont_wght.ttf") format("truetype-variations"),
       url("assets/fonts/WorkSans-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("assets/fonts/Raleway-Italic-VariableFont_wght.ttf") format("truetype-variations"),
       url("assets/fonts/Raleway-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Brand colors — Style Guide p.4 */
  --cyan-50:  #eef9fd;
  --cyan-100: #d7f1fb;
  --cyan-200: #b3e6f7;
  --cyan-300: #85d9f2;
  --cyan-400: #56cdee;
  --cyan-500: #30bcec; /* primary — Strongback Cyan, Pantone 298 C */
  --cyan-600: #229fcb;
  --cyan-700: #1c80a4;
  --cyan-800: #17627c;

  --slate-50:  #eef1f2;
  --slate-100: #dadfe2;
  --slate-200: #b7c0c6;
  --slate-300: #93a1a9;
  --slate-400: #67787f;
  --slate-500: #46595f;
  --slate-600: #324349;
  --slate-700: #182e3b; /* secondary — Dark Slate, Pantone 432 C */
  --slate-800: #0e1c25;

  --bone: #f1f7f8;      /* Light blue / page surface */
  --grey-cool: #a5aaab; /* secondary text */
  --paper: #ffffff;

  --header-gradient: linear-gradient(120deg, var(--slate-700), var(--cyan-500));

  /* Type */
  --font-display: "Work Sans", "Raleway", sans-serif;
  --font-body: "Raleway", sans-serif;

  /* Spacing — 4pt base */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;
  --sp-16: 64px; --sp-20: 80px;

  /* Radii — soft, not pill */
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 22px; --r-2xl: 32px; --r-pill: 999px;

  --container: 1280px;
  --shadow-card: 0 8px 30px rgba(24, 46, 59, 0.10);
  --shadow-card-hover: 0 16px 40px rgba(24, 46, 59, 0.16);
}

/* Work Sans — design/headline surfaces (Style Guide p.5).
   Wird oben per @font-face aus assets/fonts/ geladen (selbst gehostet, kein Google-Aufruf).
   Der frühere @import von fonts.googleapis.com wurde am 19.08.2026 aus Datenschutzgründen
   entfernt (siehe Datenschutzerklärung Ziffer 4). Bitte nicht wieder einfügen. */

* { box-sizing: border-box; }
/* Sicherstellen, dass das hidden-Attribut immer greift, auch auf Elementen mit eigener
   display-Deklaration (z. B. .btn, .form-actions setzen display:inline-flex/flex). */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--slate-700);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--slate-700);
  margin: 0 0 var(--sp-4);
}
h1 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); letter-spacing: -0.02em; line-height: 1.08; }
h2 { font-size: clamp(1.6rem, 2.8vw, 2.35rem); line-height: 1.15; }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.3; }

p { margin: 0 0 var(--sp-4); }
.lead { font-family: var(--font-body); font-weight: 500; font-size: 1.15rem; line-height: 1.55; color: var(--slate-600); }
.tagline-italic { font-family: var(--font-body); font-weight: 300; font-style: italic; }

.skip-link {
  position: absolute; left: -999px; top: auto; background: var(--slate-700); color: #fff;
  padding: 12px 20px; border-radius: 0 0 var(--r-md) 0; z-index: 100; font-weight: 700;
}
.skip-link:focus { left: 0; top: 0; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-6); }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-body); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--cyan-800);
  margin-bottom: var(--sp-3);
}
.section { padding: var(--sp-20) 0; }
.section-head { max-width: 720px; margin: 0 auto var(--sp-12); text-align: center; }
.section-head.left { margin: 0 0 var(--sp-12); text-align: left; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-body); font-weight: 700; font-size: 0.98rem;
  padding: 14px 28px; border-radius: var(--r-pill); border: 2px solid transparent;
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--cyan-500); color: var(--slate-800); }
.btn-primary:hover { background: var(--cyan-400); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(48,188,236,0.35); }
.btn-outline-light { background: transparent; border-color: rgba(255,255,255,0.55); color: #fff; }
.btn-outline-light:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
.btn-ghost { background: var(--bone); color: var(--slate-700); }
.btn-ghost:hover { background: var(--cyan-50); }
.btn-outline-dark { background: transparent; border-color: var(--slate-100); color: var(--slate-700); }
.btn-outline-dark:hover { background: var(--bone); border-color: var(--slate-200); }
.btn-sm { padding: 9px 18px; font-size: 0.85rem; }
.btn-block { width: 100%; }

/* ===== Header ===== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--slate-100);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-5) var(--sp-6); gap: var(--sp-6); }
.logo img { height: 52px; width: auto; }
.main-nav { display: flex; align-items: center; gap: var(--sp-6); }
.main-nav ul { display: flex; gap: var(--sp-6); }
.main-nav a {
  font-weight: 700; font-size: 0.94rem; color: var(--slate-600);
  position: relative; padding: var(--sp-2) 0;
}
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--slate-700); }
.main-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px;
  background: var(--cyan-500); border-radius: var(--r-pill);
}
.has-dropdown { position: relative; }
.dropdown {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-card-hover);
  padding: var(--sp-2); min-width: 190px; opacity: 0; visibility: hidden;
  transition: opacity .15s ease, transform .15s ease; border: 1px solid var(--slate-100);
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.dropdown a { display: block; padding: 10px 14px; border-radius: var(--r-md); font-weight: 600; color: var(--slate-600); }
.dropdown a:hover { background: var(--bone); color: var(--slate-700); }
.header-actions { display: flex; align-items: center; gap: var(--sp-4); }
/* Menue-Knopf: nur auf schmalen Bildschirmen sichtbar, siehe Medienabfrage unten. */
.nav-toggle {
  display: none; background: var(--bone); border: 1px solid var(--slate-200);
  border-radius: var(--r-md); width: 48px; height: 48px; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 0; margin-left: auto;
}
.nav-toggle-bar { display: block; width: 22px; height: 2px; background: var(--slate-700); border-radius: 2px; }
.nav-toggle[aria-expanded="true"] { background: var(--cyan-500); border-color: var(--cyan-800); }

/* ===== Floating award badge — sticks to viewport while scrolling ===== */
.floating-badge {
  position: fixed; left: 9px; top: 100px;
  z-index: 60; display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: var(--r-lg); padding: var(--sp-3);
  box-shadow: var(--shadow-card); border: 1px solid var(--slate-100);
  transition: transform .2s ease, box-shadow .2s ease;
  width: 84px;
}
.floating-badge:hover { transform: scale(1.05); box-shadow: var(--shadow-card-hover); }
.floating-badge img { width: 48px; height: auto; margin: 0 auto; }
@media (max-width: 980px) {
  .floating-badge { left: var(--sp-3); width: 64px; padding: var(--sp-2); top: auto; bottom: var(--sp-5); transform: none; }
  .floating-badge:hover { transform: scale(1.05); }
  /* height:auto bzw. width:auto ist hier Pflicht, nicht Kosmetik: die img-Tags tragen
   seit 24.08.2026 die echten Pixelmasse als width/height-Attribute, damit beim Laden
   nichts springt. Diese Attribute wirken wie CSS. Wird nur eine Achse per CSS gesetzt,
   bleibt die andere auf dem Attributwert stehen und das Bild wird verzerrt.
   Gefunden am 25.08.2026 am Logo im Tagline-Band. Bitte nicht entfernen. */
.floating-badge img { width: 36px; height: auto; }
}

/* ===== Hero — full-bleed photo, signature gradient bar ===== */
.hero-photo {
  position: relative; overflow: hidden; color: #fff;
  min-height: 640px; display: flex; align-items: center;
  padding: var(--sp-16) 0 var(--sp-20);
  background: var(--header-gradient);
}
.hero-signature-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: var(--header-gradient); z-index: 3; filter: brightness(1.3);
}
.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 75% 40%; z-index: 0;
}
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(14,28,37,0.9) 0%, rgba(14,28,37,0.72) 32%, rgba(14,28,37,0.25) 55%, rgba(14,28,37,0.05) 78%),
    linear-gradient(to top, rgba(14,28,37,0.65), rgba(14,28,37,0) 55%);
}
.hero-inner { position: relative; z-index: 2; }
.hero-copy { max-width: 500px; }
.hero-brand {
  display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: -0.01em; color: #fff; margin-bottom: var(--sp-3);
}
.hero-copy .eyebrow { color: var(--cyan-200); }
.hero-photo h1 { color: #fff; }
.hero-photo h1 em { color: var(--cyan-300); font-style: italic; }
.hero-photo .lead { color: rgba(255,255,255,0.9); max-width: 46ch; text-shadow: 0 2px 12px rgba(0,0,0,0.25); }
.hero-ctas { display: flex; gap: var(--sp-4); margin-top: var(--sp-8); flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   Kennzeichnung KI-erzeugter Bildanteile (eingebaut 09.09.2026)

   Grundlage: Art. 50 Abs. 4 EU-KI-Verordnung verlangt die Offenlegung
   spaetestens beim ersten Ansehen des Inhalts. Ein Hinweis allein im Impressum
   genuegt dafuer nicht, er muss am Bild selbst stehen.

   Wortlaut von Romy festgelegt am 09.09.2026:
   "Symbolbild, Rollstuhl real, Personen und Umgebung KI-generiert"

   Die Klasse wird auf ein <span> direkt nach dem <img> gesetzt. Voraussetzung
   ist ein Elternelement mit position: relative; das ist bei .hero-photo und
   .product-card gegeben. Zum Entfernen: die <span class="ki-hinweis"> loeschen,
   diese Regel kann dann stehen bleiben.
   --------------------------------------------------------------------------- */
.ki-hinweis {
  position: absolute; z-index: 3;
  right: var(--sp-3); bottom: var(--sp-3);
  max-width: calc(100% - 2 * var(--sp-3));
  padding: 3px 8px; border-radius: 3px;
  font-size: 0.66rem; line-height: 1.35; letter-spacing: 0.01em;
  color: rgba(255,255,255,0.94); background: rgba(14,28,37,0.5);
  pointer-events: none;
}
/* Im Hero etwas groesser und weiter vom Rand, dort ist mehr Platz. */
.hero-photo > .ki-hinweis {
  right: var(--sp-5); bottom: var(--sp-4); font-size: 0.7rem;
}
/* In den Produktkacheln oben rechts, damit der Text in der Kachel frei bleibt.
   HINWEIS ZUR SCHRIFTGROESSE, Stand 09.09.2026:
   Gemessen ergibt 0.6rem hier 9,6 Pixel, im Hero 11,2 Pixel. Der Kontrast liegt
   bei 17,3:1 und damit klar ueber den geforderten 4,5:1.
   Eine Anhebung auf 12 bzw. 13 Pixel wurde vorgeschlagen, weil 9,6 Pixel fuer
   die Zielgruppe klein sind und sich schwer als "klar und unterscheidbar" im
   Sinne von Art. 50 EU-KI-VO verteidigen lassen. Romy hat am 09.09.2026
   entschieden, die Groesse so zu lassen. Grund: der Hinweis soll zurueckhaltend
   bleiben (siehe 1-1 mit Christian Grothe vom 09.09.2026, 12:46).
   Wenn diese Abwaegung neu bewertet wird, sind es genau diese drei Werte. */
.product-card > .ki-hinweis {
  top: var(--sp-3); bottom: auto; font-size: 0.6rem;
}.hero-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }

/* ===== Trust strip ===== */
.trust-strip { background: var(--bone); padding: var(--sp-10) 0; }
.trust-strip .container {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--sp-10) var(--sp-16);
}
.trust-item { display: flex; align-items: center; gap: var(--sp-4); }
.trust-item img { height: 64px; width: auto; border-radius: var(--r-sm); }
.trust-item .t-num { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--slate-700); }
.trust-item .t-label { font-size: 0.85rem; color: var(--slate-500); max-width: 20ch; line-height: 1.3; }

/* ===== Product overview ===== */
.product-group { margin-bottom: var(--sp-16); }
.product-group:last-child { margin-bottom: 0; }
.group-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-8); flex-wrap: wrap; }
.group-head h3 { margin: 0; }
.group-head .view-all { font-weight: 700; color: var(--cyan-800); font-size: 0.92rem; }
.group-tagline { margin: var(--sp-2) 0 0; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--slate-600); }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.card-grid.cols-1 { grid-template-columns: minmax(0, 420px); }
.product-card {
  position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--slate-700);
  box-shadow: var(--shadow-card); transition: transform .2s ease, box-shadow .2s ease;
  aspect-ratio: 3/4; display: flex; flex-direction: column; justify-content: flex-end;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.product-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.product-card .card-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14,28,37,0.92) 0%, rgba(14,28,37,0.55) 38%, rgba(14,28,37,0.02) 70%);
}
.product-card .card-body { position: relative; padding: var(--sp-6); color: #fff; }
.product-card .card-kicker {
  display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--cyan-300); margin-bottom: var(--sp-2);
}
.product-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; margin: 0 0 var(--sp-2); }
.product-card p { font-size: 0.9rem; color: rgba(255,255,255,0.82); margin: 0 0 var(--sp-4); }
.product-card .card-link { font-weight: 700; font-size: 0.88rem; display: inline-flex; align-items: center; gap: 6px; color: #fff; }
.product-card .card-link svg { width: 14px; height: 14px; transition: transform .15s ease; }
.product-card:hover .card-link svg { transform: translateX(3px); }

/* ===== USP / Why Strongback ===== */
.usp-section { background: var(--bone); }
.usp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }
.usp-card { background: #fff; border-radius: var(--r-lg); padding: var(--sp-8); box-shadow: var(--shadow-card); }
.usp-icon {
  width: 52px; height: 52px; border-radius: var(--r-md); background: var(--cyan-50);
  display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-5);
}
.usp-icon svg { width: 26px; height: 26px; stroke: var(--cyan-700); }
.usp-card h3 { font-size: 1.15rem; }
.usp-card p { color: var(--slate-500); font-size: 0.95rem; margin-bottom: 0; }
.usp-footnote { margin: var(--sp-5) 0 0; font-size: 0.78rem; color: var(--slate-500); }

/* ===== Curved cyan divider w/ tagline ===== */
.tagline-panel {
  position: relative; background: var(--cyan-500); color: var(--slate-800);
  padding: var(--sp-16) 0; margin: var(--sp-4) 0; overflow: hidden;
}
.tagline-panel .container { text-align: center; position: relative; }
/* Hoehe waechst mit dem Fenster, genau wie die Zeile darunter, damit das Verhaeltnis
   von Marke zu Claim gleich bleibt. width:auto ist Pflicht, siehe Kommentar oben. */
.tagline-panel .logo-mark { height: clamp(52px, 6vw, 80px); width: auto; margin: 0 auto var(--sp-5); filter: brightness(0) invert(1); opacity: 0.92; }
.tagline-panel p.tagline-italic { font-size: clamp(1.4rem, 3vw, 2.1rem); margin: 0; color: var(--slate-800); }
.tagline-panel::before, .tagline-panel::after {
  content: ""; position: absolute; top: -40%; width: 60%; height: 220%;
  background: rgba(255,255,255,0.10); border-radius: 50%;
}
.tagline-panel::before { left: -15%; }
.tagline-panel::after { right: -20%; }

/* ===== Contact CTA strip ===== */
.contact-cta { background: var(--slate-700); color: #fff; }
.contact-cta .container {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); flex-wrap: wrap;
  padding: var(--sp-12) var(--sp-6);
}
.contact-cta h2 { color: #fff; margin-bottom: var(--sp-2); }
.contact-cta p { color: rgba(255,255,255,0.75); margin: 0; max-width: 52ch; }
.contact-cta .ctas { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

/* ===== Footer ===== */
.site-footer { background: var(--slate-800); color: rgba(255,255,255,0.72); padding: var(--sp-16) 0 var(--sp-8); }
.footer-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-10);
  padding-bottom: var(--sp-12); border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-brand img { height: 30px; width: auto; margin-bottom: var(--sp-4); filter: brightness(0) invert(1); }
.footer-brand p { font-size: 0.88rem; max-width: 34ch; color: rgba(255,255,255,0.6); }
.footer-col .footer-col-title {
  font-family: var(--font-body); color: #fff; font-size: 0.82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em; margin: 0 0 var(--sp-4);
}
.footer-col ul li { margin-bottom: var(--sp-3); }
.footer-col a { font-size: 0.92rem; }
.footer-col a:hover { color: #fff; }
.footer-contact address, .footer-contact p { font-style: normal; font-size: 0.88rem; line-height: 1.6; color: rgba(255,255,255,0.72); }
.footer-contact address a { color: rgba(255,255,255,0.72); }
.footer-contact address a:hover { color: #fff; }
.footer-return-address { margin: var(--sp-4) 0 0; font-size: 0.82rem; color: rgba(255,255,255,0.55); }

.footer-bottom {
  padding-top: var(--sp-8); display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--sp-6);
}
.legal-links { display: flex; flex-wrap: wrap; gap: var(--sp-5); font-size: 0.85rem; }
.legal-links a:hover { color: #fff; }

.withdrawal-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--cyan-500); color: var(--slate-800); font-weight: 700; font-size: 0.85rem;
  padding: 10px 20px; border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,0.25);
}
.withdrawal-btn:hover { background: var(--cyan-400); }

.payment-icons { display: flex; align-items: center; gap: var(--sp-3); }
.payment-chip {
  display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14); border-radius: var(--r-md); padding: 7px 12px;
  font-size: 0.82rem; font-weight: 700; color: rgba(255,255,255,0.85);
}
.payment-chip svg { width: 16px; height: 16px; }

.footer-meta {
  margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-4);
  font-size: 0.8rem; color: rgba(255,255,255,0.45);
}

/* ===== Legal / policy pages ===== */
.legal-content h2 { margin-top: var(--sp-12); }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { margin-top: var(--sp-6); }
.legal-content address { font-style: normal; }
.legal-sample-box {
  background: var(--bone); border-radius: var(--r-lg); padding: var(--sp-6) var(--sp-8);
  margin-top: var(--sp-12);
}

/* ===== Widerruf-Formular ===== */
.withdrawal-form { background: var(--bone); border-radius: var(--r-xl); padding: var(--sp-8); }
.form-group { margin-bottom: var(--sp-5); }
.form-label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: var(--sp-2); color: var(--slate-700); }
.form-label .required { color: var(--cyan-800); }
.form-input, .form-textarea {
  width: 100%; padding: 12px 16px; border: 2px solid var(--slate-400); border-radius: var(--r-md);
  font-family: var(--font-body); font-size: 0.95rem; color: var(--slate-700); background: #fff;
}
.form-input:focus, .form-textarea:focus { border-color: var(--cyan-800); }
.form-textarea { resize: vertical; min-height: 90px; }
.form-hint { font-size: 0.8rem; color: var(--slate-500); margin: var(--sp-2) 0 0; }
.form-actions { display: flex; gap: var(--sp-4); margin-top: var(--sp-6); flex-wrap: wrap; }

.withdrawal-summary { background: #fff; border-radius: var(--r-md); padding: var(--sp-6); }
.withdrawal-summary dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-3) var(--sp-6); margin: 0; }
.withdrawal-summary dt { font-weight: 700; color: var(--slate-500); }
.withdrawal-summary dd { margin: 0; }

.withdrawal-success { text-align: center; }
.withdrawal-success svg { width: 56px; height: 56px; margin: 0 auto var(--sp-4); color: var(--cyan-600); display: block; }

.order-summary-box { background: var(--bone); border-radius: var(--r-lg); padding: var(--sp-6) var(--sp-8); margin-bottom: var(--sp-8); }
.order-summary-box .os-row { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-2) 0; border-bottom: 1px solid rgba(24,46,59,0.08); }
.order-summary-box .os-row:last-child { border-bottom: none; }
.order-summary-box .os-label { color: var(--slate-500); font-weight: 600; }
.order-summary-box .os-value { font-weight: 700; color: var(--slate-700); text-align: right; }

.payment-method-choice { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.payment-option { position: relative; display: flex; align-items: center; gap: var(--sp-2); }
.payment-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

/* ===== Kontakt ===== */
.contact-grid { display: grid; grid-template-columns: 320px 1fr; gap: var(--sp-12); align-items: start; }
.contact-person-card { background: var(--bone); border-radius: var(--r-xl); padding: var(--sp-8); position: sticky; top: 96px; }
.contact-avatar {
  width: 64px; height: 64px; border-radius: 50%; background: var(--cyan-500); color: #fff;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display);
  font-weight: 700; font-size: 1.2rem; margin-bottom: var(--sp-4);
}
.contact-person-card address { font-style: normal; font-size: 0.9rem; line-height: 1.6; }
/* War früher ein <h3>; jetzt <h2> für eine saubere Hierarchie, Optik unverändert. */
.contact-person-name { font-size: 1.3rem; margin: var(--sp-2) 0 var(--sp-1); }
.contact-form { background: var(--bone); border-radius: var(--r-xl); padding: var(--sp-8); }
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-person-card { position: static; }
}

.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); margin-top: var(--sp-6); }
.team-card { background: var(--bone); border-radius: var(--r-lg); padding: var(--sp-6); }
.team-card a { color: var(--cyan-800); font-size: 0.88rem; font-weight: 700; }
.team-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: block; }
.story-photo { width: 100%; border-radius: var(--r-xl); margin: 0 0 var(--sp-6); display: block; }
@media (max-width: 620px) {
  .team-grid { grid-template-columns: 1fr; }
}

.milestone-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); margin-top: var(--sp-10); }
.milestone-card { background: var(--bone); border-radius: var(--r-lg); padding: var(--sp-6); }
.milestone-year { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.8rem; color: var(--cyan-800); margin-bottom: var(--sp-2); }
.milestone-card p { margin: 0; color: var(--slate-500); font-size: 0.92rem; }
@media (max-width: 900px) {
  .milestone-grid { grid-template-columns: 1fr; }
}

.award-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }
.award-card { background: #fff; border-radius: var(--r-lg); padding: var(--sp-8); box-shadow: var(--shadow-card); text-align: center; }
.award-card img { width: 84px; height: auto; margin: 0 auto var(--sp-5); display: block; }
.award-icon {
  width: 84px; height: 84px; border-radius: 50%; background: var(--cyan-50);
  display: flex; align-items: center; justify-content: center; margin: 0 auto var(--sp-5);
}
.award-icon svg { width: 38px; height: 38px; stroke: var(--cyan-700); }
.award-card h3 { font-size: 1.05rem; margin: 0 0 4px; }
.award-card p { margin: 0; color: var(--slate-500); font-size: 0.9rem; }
@media (max-width: 900px) {
  .award-grid { grid-template-columns: 1fr; }
}

/* ===== FAQ accordion ===== */
.faq-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.faq-item { background: var(--bone); border-radius: var(--r-lg); padding: 0; overflow: hidden; }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding: var(--sp-5) var(--sp-6); font-family: var(--font-display); font-weight: 700;
  font-size: 1.02rem; color: var(--slate-700);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; flex-shrink: 0; font-size: 1.4rem; font-weight: 400; color: var(--cyan-800); line-height: 1;
}
.faq-item[open] summary::after { content: "–"; }
.faq-answer { padding: 0 var(--sp-6) var(--sp-5); margin: 0; color: var(--slate-500); }

/* ===== Product detail page ===== */
.breadcrumb-nav { padding: var(--sp-5) 0 0; font-size: 0.85rem; color: var(--slate-500); }
.breadcrumb-nav a { color: var(--slate-500); }
.breadcrumb-nav a:hover { color: var(--cyan-700); }
.breadcrumb-nav .current { color: var(--slate-700); font-weight: 600; }

.product-hero { padding: var(--sp-8) 0 var(--sp-8); }
.product-hero .container { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--sp-12); align-items: start; }

.product-gallery { position: sticky; top: 96px; }
.product-gallery-main { border-radius: var(--r-xl); overflow: hidden; background: var(--bone); aspect-ratio: 4/3.4; }
.product-gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-gallery-thumbs { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); flex-wrap: wrap; }
.product-gallery-thumbs button {
  padding: 0; border: 2px solid transparent; border-radius: var(--r-md); overflow: hidden;
  width: 72px; height: 72px; cursor: pointer; background: var(--bone); flex-shrink: 0;
}
.product-gallery-thumbs button.active { border-color: var(--cyan-500); }
.product-gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

.purchase-box .eyebrow { color: var(--cyan-700); }
.purchase-box h1 { margin: var(--sp-2) 0 var(--sp-3); }
.purchase-price { display: flex; align-items: baseline; gap: var(--sp-3); margin: var(--sp-4) 0 0; flex-wrap: wrap; }
.purchase-price .amount { font-family: var(--font-display); font-weight: 700; font-size: 2.1rem; color: var(--slate-700); }
.purchase-price .vat-note { font-size: 0.82rem; color: var(--slate-500); }
.configurator-hint { font-size: 0.82rem; margin: var(--sp-2) 0 0; }
.configurator-hint a { color: var(--cyan-700); font-weight: 700; }
.delivery-badge {
  font-size: 0.76rem; font-weight: 700; color: var(--slate-500); background: var(--bone);
  padding: 5px 12px; border-radius: var(--r-pill); white-space: nowrap;
}
.price-note { font-size: 0.78rem; color: var(--slate-500); margin: var(--sp-2) 0 var(--sp-6); }

/* Roter Hinweis, wenn eine Variante nicht bestellbar ist.
   Standard: normaler Abstand nach oben. KEIN negativer Abstand hier, sonst schiebt sich
   der Hinweis ueber das darueberliegende Auswahlfeld (Fehler vom 19.08.2026). */
.variant-unavailable-notice {
  font-size: 0.82rem; font-weight: 700; color: #b3261e; background: #fdecea;
  border-radius: var(--r-md); padding: 10px 14px; line-height: 1.45;
  margin: var(--sp-3) 0 var(--sp-5);
}
/* Nur auf den Produktseiten: dort folgt der Hinweis auf ein .variant-group, das schon
   20px Abstand nach unten hat. Dieser wird hier ausgeglichen, damit der Hinweis direkt
   unter dem Auswahlfeld sitzt. */
.variant-unavailable-notice--tight { margin-top: calc(var(--sp-5) * -1); }
.variant-unavailable-notice a { color: #b3261e; text-decoration: underline; }
.btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.delivery-badge-soldout { color: #b3261e; background: #fdecea; }
.os-row-total { border-top: 2px solid var(--slate-200); margin-top: var(--sp-2); padding-top: var(--sp-3); }
.os-row-total .os-label, .os-row-total .os-value { font-weight: 700; color: var(--slate-700); }
/* Bestellnummer auf dem Bestaetigungs-Bildschirm hervorheben. */
.order-number-box {
  display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  color: var(--slate-700); background: var(--cyan-50); border: 1px solid var(--cyan-200);
  border-radius: var(--r-md); padding: 10px 18px; margin: 0 auto var(--sp-4);
}

.variant-group { margin-bottom: var(--sp-5); }
.variant-group label { display: block; font-weight: 700; font-size: 0.88rem; color: var(--slate-700); margin-bottom: var(--sp-2); }
.variant-select {
  width: 100%; padding: 13px 16px; border-radius: var(--r-md); border: 1px solid var(--slate-400);
  font-family: var(--font-body); font-size: 0.98rem; color: var(--slate-700); background: #fff;
}
.variant-notice {
  display: flex; align-items: flex-start; gap: var(--sp-2); margin: calc(var(--sp-5) * -1) 0 var(--sp-5);
  font-size: 0.82rem; color: var(--slate-500); background: var(--bone); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
}
.variant-notice svg { width: 16px; height: 16px; stroke: var(--slate-400); flex-shrink: 0; margin-top: 1px; }
.purchase-ctas { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-6); }
.cart-confirm {
  display: none; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3);
  font-size: 0.88rem; font-weight: 700; color: var(--cyan-700);
}
.cart-confirm.visible { display: flex; }
.cart-confirm svg { width: 18px; height: 18px; stroke: var(--cyan-700); flex-shrink: 0; }

.trust-row {
  display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-8);
  padding-top: var(--sp-6); border-top: 1px solid var(--slate-100);
}
.trust-row .trust-item { display: flex; align-items: center; gap: var(--sp-2); font-size: 0.84rem; color: var(--slate-500); }
.trust-row svg { width: 20px; height: 20px; stroke: var(--cyan-700); flex-shrink: 0; }

.section-intro-features { padding-top: var(--sp-4); }
.product-intro { max-width: 760px; margin: 0 0 var(--sp-16); text-align: left; font-size: 1.02rem; color: var(--slate-600); }

.features-specs-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--sp-12); margin-top: var(--sp-10); align-items: start; }

.feature-groups-plain .feature-group { margin-bottom: var(--sp-6); }
.feature-group h4 {
  font-family: var(--font-body); font-weight: 700; font-size: 0.8rem; color: var(--cyan-700);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--sp-2);
}
.feature-group p { margin: 0; font-size: 0.94rem; line-height: 1.6; color: var(--slate-600); }
.feature-footnote { margin-top: var(--sp-2); font-size: 0.78rem; color: var(--slate-500); }

.feature-list-heading { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--slate-700); margin: 0 0 var(--sp-5); }
.feature-list { list-style: none; margin: 0 0 var(--sp-2); padding: 0; }
.feature-list li { position: relative; padding-left: var(--sp-5); margin-bottom: var(--sp-4); font-size: 0.94rem; line-height: 1.6; color: var(--slate-600); }
.feature-list li::before { content: "\00B7"; position: absolute; left: 2px; top: -3px; font-weight: 700; color: var(--cyan-700); font-size: 1.5rem; line-height: 1; }
.feature-list li strong { color: var(--slate-700); }

.spec-table-compact {
  background: var(--bone); border-radius: var(--r-lg); padding: var(--sp-6);
  position: sticky; top: 96px;
}
.spec-table-compact .eyebrow { color: var(--cyan-700); }
/* War früher ein <h4>; jetzt <h3> für eine saubere H1-H3-Hierarchie (GEO-Anforderung),
   Optik bleibt durch die feste Schriftgröße unverändert. */
.spec-block-heading { font-size: 1.05rem; margin: 4px 0 8px; }
.spec-summary { margin: 0 0 var(--sp-3); font-size: 0.8rem; line-height: 1.5; color: var(--slate-600); }
.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; }
.spec-table-wrap { overflow-x: auto; margin-top: var(--sp-2); border: 1px solid rgba(24,46,59,0.08); border-radius: var(--r-md); background: #fff; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; min-width: 320px; }
.spec-table th, .spec-table td { padding: 8px 10px; text-align: center; border-bottom: 1px solid var(--slate-100); }
.spec-table th:first-child, .spec-table td:first-child { text-align: left; font-weight: 600; color: var(--slate-700); }
.spec-table thead th { background: var(--bone); font-family: var(--font-display); font-weight: 700; color: var(--slate-700); font-size: 0.78rem; }
.spec-table tbody tr:last-child td { border-bottom: none; }
.spec-table-footnotes { padding: var(--sp-3) var(--sp-4); font-size: 0.72rem; color: var(--slate-500); border-top: 1px solid var(--slate-100); }
.spec-table-footnotes p { margin: 0 0 4px; }

/* Fließtext-Abschnitte (Orientierungs- und Beratungstexte). Begrenzte Zeilenlänge,
   weil sehr breite Textzeilen schlecht lesbar sind. */
.text-section { max-width: 76ch; }
.text-section h2 { margin-bottom: var(--sp-4); }
.text-section h3 { margin: var(--sp-8) 0 var(--sp-3); font-size: 1.15rem; }
.text-section p { color: var(--slate-600); line-height: 1.7; }
.text-section a { color: var(--cyan-800); font-weight: 700; text-decoration: underline; }

.related-products { margin-top: var(--sp-16); }

/* ===== Responsive ===== */
@media (max-width: 980px) {
  .hero-photo { min-height: 520px; }
  .hero-bg { object-fit: cover; object-position: center; opacity: 0.35; }
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(14,28,37,0.75) 0%, rgba(14,28,37,0.55) 55%, rgba(14,28,37,0.75) 100%);
  }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .usp-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  /* Statt die Navigation einfach auszublenden, wird sie hier ueber den Menue-Knopf
     ein- und ausgeklappt. Vorher war auf dem Handy keine Seite ausser der Startseite
     ueber den Kopfbereich erreichbar (Fehler gefunden am 24.08.2026). */
  .nav-toggle { display: flex; }
  .main-nav { display: none; }
  .main-nav.nav-open {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 1px solid var(--slate-100);
    box-shadow: var(--shadow-card); padding: var(--sp-4) var(--sp-6) var(--sp-6);
    max-height: calc(100vh - 100px); overflow-y: auto;
  }
  .main-nav.nav-open ul { flex-direction: column; gap: 0; }
  .main-nav.nav-open li { border-bottom: 1px solid var(--slate-100); }
  .main-nav.nav-open li:last-child { border-bottom: none; }
  .main-nav.nav-open a { display: block; padding: var(--sp-4) 0; font-size: 1.02rem; }
  /* Auf dem Handy kein Aufklapp-Menue: die Unterpunkte stehen dauerhaft sichtbar da,
     weil Hover auf Touchgeraeten nicht funktioniert. */
  .main-nav.nav-open .dropdown {
    position: static; transform: none; opacity: 1; visibility: visible;
    box-shadow: none; border: none; padding: 0 0 var(--sp-3) var(--sp-5);
    min-width: 0; background: transparent;
  }
  .main-nav.nav-open .dropdown a { padding: var(--sp-3) 0; font-size: 0.95rem; color: var(--slate-500); }
  .site-header { position: sticky; }
  .header-inner { position: relative; flex-wrap: wrap; }
  body.nav-locked { overflow: hidden; }
  .product-hero .container { grid-template-columns: 1fr; }
  .product-gallery { position: static; }
  .features-specs-grid { grid-template-columns: 1fr; }
  .spec-table-compact { position: static; }
}
@media (max-width: 620px) {
  .hero-photo { min-height: 460px; padding: var(--sp-16) 0; }
  .card-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .contact-cta .container { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Konfigurations-Leitfaden ("Welcher Rollstuhl passt zu mir?")
   ========================================================================== */
.configurator {
  background: var(--bone); border-radius: var(--r-xl); padding: var(--sp-8);
  display: flex; flex-direction: column; gap: var(--sp-8);
}
.configurator-step + .configurator-step { padding-top: var(--sp-8); border-top: 1px solid rgba(24,46,59,0.08); }
.configurator-question { margin: 0 0 var(--sp-2); font-size: 1.15rem; }
.configurator-explainer { margin: 0 0 var(--sp-5); font-size: 0.88rem; color: var(--slate-500); }
.configurator-options { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.configurator-option {
  font-family: var(--font-body); font-weight: 700; font-size: 0.92rem;
  padding: 10px 20px; border-radius: var(--r-md); border: 2px solid var(--slate-400);
  background: #fff; color: var(--slate-700); cursor: pointer; transition: all .15s ease;
}
.configurator-option:hover { border-color: var(--cyan-500); }
.configurator-option.selected { border-color: var(--cyan-800); background: var(--cyan-500); color: var(--slate-800); }
.configurator-result {
  padding-top: var(--sp-8); border-top: 1px solid rgba(24,46,59,0.08);
}
.configurator-result h2 { margin: var(--sp-2) 0 var(--sp-3); }
.configurator-note { font-size: 0.82rem; color: var(--slate-500); margin: var(--sp-3) 0 0; }
.configurator-result-ctas { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-6); }

/* ==========================================================================
   Zubehör-Übersicht
   ========================================================================== */
.accessory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.accessory-card {
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; overflow: hidden; transition: box-shadow .2s ease, transform .2s ease;
}
.accessory-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.accessory-card-media {
  aspect-ratio: 1/1; background: var(--bone); display: flex; align-items: center; justify-content: center;
  color: var(--slate-300);
}
.accessory-card-media svg { width: 64px; height: 64px; }
.accessory-card-media img { width: 100%; height: 100%; object-fit: cover; }
.accessory-thumbs { display: flex; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5) 0; }
.accessory-thumb {
  padding: 0; border: 2px solid transparent; border-radius: var(--r-md); overflow: hidden;
  width: 44px; height: 44px; cursor: pointer; background: var(--bone); flex-shrink: 0;
}
.accessory-thumb.active { border-color: var(--cyan-500); }
.accessory-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.accessory-card-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.accessory-card-body h3 { margin: 0; font-size: 1.05rem; }
.accessory-card-price { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--slate-700); }
/* Pflichtangabe nach Preisangabenverordnung: MwSt.- und Versandkostenhinweis am Preis. */
.accessory-card-vat { display: block; font-size: 0.74rem; color: var(--slate-500); margin-top: 2px; }
.accessory-card-fit { font-size: 0.78rem; font-weight: 700; color: var(--cyan-700); text-transform: uppercase; letter-spacing: 0.04em; }
.accessory-card-desc { font-size: 0.88rem; color: var(--slate-500); margin: 0; flex: 1; }
.accessory-card-ctas { margin-top: var(--sp-3); }
@media (max-width: 900px) {
  .accessory-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .accessory-grid { grid-template-columns: 1fr; }
}

/* Sichtbares Aktualisierungsdatum. LLMs und Suchmaschinen bevorzugen Quellen,
   bei denen die Aktualitaet erkennbar ist (GEO-Anforderung der Agentur). */
.page-updated {
  margin: var(--sp-10) 0 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--slate-100);
  font-size: 0.8rem;
  color: var(--slate-500);
}

/* ==========================================================================
   Tastaturbedienung: sichtbarer Fokus
   Vorher stand auf den Eingabefeldern outline:none, der Fokus war nur an einer
   hellen Rahmenfarbe erkennbar. Das ist fuer Tastaturnutzung zu wenig und nach
   WCAG 2.4.7 und 1.4.11 unzureichend. Ergaenzt am 24.08.2026.
   ========================================================================== */
:focus-visible {
  outline: 3px solid var(--slate-700);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.form-input:focus-visible,
.form-textarea:focus-visible,
.form-select:focus-visible,
select:focus-visible {
  outline: 3px solid var(--slate-700);
  outline-offset: 1px;
}
/* Kein Fokusring bei reinem Mausklick, aber immer bei Tastaturbedienung */
:focus:not(:focus-visible) { outline: none; }

/* FAQ in Themenbloecke gegliedert statt einer langen Liste (GEO-Anforderung der Agentur,
   umgesetzt am 24.08.2026). Die Ueberschriften sind echte h2, damit Suchmaschinen und
   Sprachmodelle die Zuordnung der Fragen erkennen. */
.faq-cluster-heading {
  font-size: 1.25rem;
  margin: var(--sp-12) 0 var(--sp-4);
}
.faq-cluster-heading:first-of-type { margin-top: 0; }

/* ==========================================================================
   Magazin (angelegt am 25.08.2026)
   Fuenf Artikel aus dem alten Shopify-Magazin, neu geschrieben und in das
   Design der neuen Website uebernommen.
   ========================================================================== */
.magazin-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
.magazin-card {
  display: flex; flex-direction: column; gap: var(--sp-2);
  background: var(--bone); border-radius: var(--r-lg); padding: var(--sp-6);
  border: 1px solid var(--slate-100);
  transition: transform .15s ease, box-shadow .15s ease;
}
.magazin-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.magazin-card-kicker {
  font-family: var(--font-body); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan-800);
}
.magazin-card h2 { font-size: 1.15rem; margin: 0; }
.magazin-card p { font-size: 0.92rem; color: var(--slate-500); margin: 0; flex: 1; }
.magazin-card .card-link { color: var(--cyan-800); font-weight: 700; font-size: 0.88rem;
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--sp-2); }
.magazin-card .card-link svg { width: 14px; height: 14px; }
.magazin-card:hover .card-link svg { transform: translateX(3px); }

/* Aufzaehlungen im Fliesstext der Artikel */
.magazin-liste { margin: 0 0 var(--sp-4); padding: 0; list-style: none; }
.magazin-liste li {
  position: relative; padding-left: var(--sp-5); margin-bottom: var(--sp-3);
  color: var(--slate-600); line-height: 1.7;
}
.magazin-liste li::before {
  content: ""; position: absolute; left: 4px; top: 11px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--cyan-600);
}
.magazin-liste a { color: var(--cyan-800); font-weight: 700; text-decoration: underline; }
@media (max-width: 780px) { .magazin-grid { grid-template-columns: 1fr; } }

/* Aufmacherbild der Magazin-Artikel. Feste Seitenverhaeltnisse ueber width/height
   im HTML, damit beim Laden kein Layoutsprung entsteht (CLS). */
.magazin-bild { margin: var(--sp-6) 0 0; }
.magazin-bild img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-lg); background: var(--bone);
}
.magazin-bild figcaption {
  margin-top: var(--sp-2); font-size: 0.8rem; color: var(--slate-500);
}