/* === CSS-BUNDLE: fonts.css + tokens/* + Layout ===
   HTML lädt nur css/styles.css. Token-Dateien bleiben die Pflegequelle.
   ============================================================ */

/* Selbst gehostete Schriften, nur latin (deckt Deutsch inkl. Umlaute ab). */

@font-face {
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/merriweather-italic-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: 'Merriweather';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url(../fonts/merriweather-normal-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: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/open-sans-italic-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: 'Open Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/open-sans-normal-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;
}

/* ==========================================================================
   DRK — COLOR TOKENS
   Source: styleguide.drk.de · Basiselemente → Farben / Digital → Webseite
   --------------------------------------------------------------------------
   PRIMARY (Primärfarben): Rot, Weiß, Schwarz.
     The red cross emblem must ALWAYS sit on white — never invert or tint it.
   SECONDARY (Sekundärfarben): the blue family + structuring greys.
   ========================================================================== */

:root {
  /* ---- Primary -------------------------------------------------------- */
  --drk-red:            #E2001A;  /* DRK-Rot · RAL 3020 Verkehrsrot · C0 M100 Y100 K0 */
  --drk-red-tile:       #E60005;  /* digital tile variant (msapplication) */
  --drk-white:          #FFFFFF;
  --drk-black:          #000000;

  /* ---- Secondary · blues ---------------------------------------------- */
  --drk-dark-blue:      #002D55;  /* Dunkelblau · RGB 0/45/85 · RAL 5003 · icons, buttons, quotes, disaster comms */
  --drk-mid-blue:       #008CCD;  /* Mittelblau · RGB 0/140/205 · hover effects */
  --drk-blue:           #2275D0;  /* Volltonblau · RGB 34/117/208 · text links */
  --drk-light-blue:     #EBF5FF;  /* Hellblau · RGB 235/245/255 · info surfaces, form fields */

  /* ---- Neutrals · greys (content structuring) ------------------------- */
  --drk-grey-bg:        #EFEEEA;  /* Hellgrau · RGB 239/238/234 · alt background / "grauer Kasten" */
  --drk-grey-100:       #F5F5F4;
  --drk-grey-200:       #E6E5E2;
  --drk-grey-300:       #CFCEC9;
  --drk-grey-400:       #A8A7A2;
  --drk-grey-500:       #7C7B77;
  --drk-grey-550:       #6B6A66;  /* gedämpfter Text: 5,4:1 auf Weiß (grey-500 erreichte nur 4,2:1) */
  --drk-grey-600:       #565551;
  --drk-grey-700:       #36352F;  /* "almost black" body on light */

  /* ---- Derived states (hover/press of red) ---------------------------- */
  --drk-red-hover:      #C40017;  /* darken ~10% */
  --drk-red-press:      #A60014;  /* darken ~20% */
  --drk-dark-blue-hover:#013D72;

  /* ======================================================================
     SEMANTIC ALIASES — reference these in components, not the raw values.
     ====================================================================== */

  /* Brand */
  --color-brand:            var(--drk-red);
  --color-brand-hover:      var(--drk-red-hover);
  --color-brand-press:      var(--drk-red-press);
  --color-accent:           var(--drk-dark-blue);

  /* Text */
  --text-strong:            var(--drk-black);
  --text-body:              var(--drk-grey-700);
  --text-muted:             var(--drk-grey-550);
  --text-on-brand:          var(--drk-white);
  --text-on-dark:           var(--drk-white);
  --text-link:              var(--drk-blue);
  --text-link-hover:        var(--drk-dark-blue);
  --text-heading:           var(--drk-black);
  --text-quote:             var(--drk-dark-blue);

  /* Surfaces */
  --surface-page:           var(--drk-white);
  --surface-card:           var(--drk-white);
  --surface-subtle:         var(--drk-light-blue); /* wechselndes Band, kein Beige */
  --surface-info:           var(--drk-light-blue);
  --surface-dark:           var(--drk-dark-blue);
  --surface-brand:          var(--drk-red);

  /* Lines / borders */
  --border-subtle:          var(--drk-grey-200);
  --border-default:         var(--drk-grey-300);
  --border-strong:          var(--drk-grey-400);
  --border-focus:           var(--drk-dark-blue);

  /* Feedback (derived from brand palette — DRK has no dedicated semantic set) */
  --color-danger:           var(--drk-red);
  --color-info:             var(--drk-blue);
  --color-success:          #2E7D32;
  --color-warning:          #C77700;
}

/* ==========================================================================
   DRK — TYPOGRAPHY TOKENS
   Hausschriften: Merriweather (serif) for headlines & subheads,
   Helvetica Neue (sans) for body, UI & captions. Open Sans is the styleguide's
   official free web substitute for Helvetica Neue.
   Headlines = serif; running text = sans. Quotes/captions in Dunkelblau.
   ========================================================================== */

:root {
  /* ---- Families ------------------------------------------------------- */
  --font-serif:  'Merriweather', Georgia, 'Times New Roman', serif;
  --font-sans:   'Helvetica Neue', 'Open Sans', Arial, Helvetica, sans-serif;
  --font-mono:   ui-monospace, Menlo, Consolas, monospace;

  /* Semantic family roles */
  --font-display:   var(--font-serif);  /* headlines, big numbers */
  --font-heading:   var(--font-serif);  /* h1–h4 */
  --font-body:      var(--font-sans);   /* running text, UI */
  --font-ui:        var(--font-sans);   /* buttons, labels, nav */

  /* ---- Weights ----------------------------------------------- @kind font */
  --fw-light:     300;  /* @kind font */
  --fw-regular:   400;  /* @kind font */
  --fw-medium:    500;  /* @kind font */
  --fw-semibold:  600;  /* @kind font */
  --fw-bold:      700;  /* @kind font */
  --fw-black:     900;  /* @kind font */

  /* ---- Type scale (rem · 1rem = 16px) --------------------------------- */
  --fs-display-2xl: 4.5rem;   /* 72 */
  --fs-display-xl:  3.5rem;   /* 56 */
  --fs-display-lg:  2.75rem;  /* 44 */
  --fs-h1:          2.25rem;  /* 36 */
  --fs-h2:          1.75rem;  /* 28 */
  --fs-h3:          1.375rem; /* 22 */
  --fs-h4:          1.125rem; /* 18 */
  --fs-body-lg:     1.125rem; /* 18 */
  --fs-body:        1rem;     /* 16 */
  --fs-body-sm:     0.875rem; /* 14 */
  --fs-caption:     0.75rem;  /* 12 */
  --fs-overline:    0.6875rem;/* 11 */

  /* ---- Line heights ------------------------------------------ @kind font */
  --lh-tight:   1.1;   /* @kind font */
  --lh-snug:    1.25;  /* @kind font */
  --lh-heading: 1.3;   /* @kind font */
  --lh-body:    1.6;   /* @kind font */
  --lh-relaxed: 1.75;  /* @kind font */

  /* ---- Letter spacing ---------------------------------------- @kind font */
  --ls-tight:    -0.02em;  /* @kind font */
  --ls-normal:   0;        /* @kind font */
  --ls-wide:     0.04em;   /* @kind font */
  --ls-overline: 0.12em;   /* @kind font */
}

/* ==========================================================================
   DRK — SPACING, RADII, SHADOWS, LAYOUT
   The DRK look is rectilinear and institutional: a structuring "grauer Kasten"
   grid, square-to-slightly-soft corners, restrained elevation. Avoid heavy
   shadows and large pill radii — they read off-brand.
   ========================================================================== */

:root {
  /* ---- Spacing scale (4px base) --------------------------------------- */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4  */
  --space-2:   0.5rem;   /* 8  */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.5rem;   /* 24 */
  --space-6:   2rem;     /* 32 */
  --space-7:   2.5rem;   /* 40 */
  --space-8:   3rem;     /* 48 */
  --space-9:   4rem;     /* 64 */
  --space-10:  5rem;     /* 80 */
  --space-12:  6rem;     /* 96 */

  /* ---- Radii (kept tight — DRK is square-ish) ------------------------- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-pill: 999px;  /* use sparingly — tags/avatars only */

  /* ---- Borders -------------------------------------------------------- */
  --border-width:        1px;
  --border-width-strong: 2px;
  --bar-width:           4px;  /* "Balkenbreite" — logo protection unit & accent bars */

  /* ---- Shadows (subtle, neutral) -------------------------------------- */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:  0 10px 28px rgba(0,0,0,0.12);
  --shadow-focus: 0 0 0 3px rgba(0,45,85,0.30);  /* dark-blue focus ring */

  /* ---- Layout --------------------------------------------------------- */
  --container-sm:  640px;
  --container-md:  840px;
  --container-lg:  1080px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  /* ---- Motion (calm, functional — fades & short eases, no bounce) -- @kind other */
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);  /* @kind other */
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);    /* @kind other */
  --dur-fast:   120ms;  /* @kind other */
  --dur-base:   200ms;  /* @kind other */
  --dur-slow:   320ms;  /* @kind other */

  /* ---- Z-index ----------------------------------------------- @kind other */
  --z-base:    0;     /* @kind other */
  --z-sticky:  100;   /* @kind other */
  --z-overlay: 1000;  /* @kind other */
  --z-modal:   1100;  /* @kind other */
  --z-toast:   1200;  /* @kind other */
}

/* ==========================================================================
   DRK — BASE / RESET
   Element defaults wired to the DRK tokens. Body is sans (Helvetica Neue /
   Open Sans); headings are serif (Merriweather). Black text on white, white
   text on dark/brand surfaces.
   ========================================================================== */

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

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

.svg-sprite {
  display: none;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--text-heading);
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-4);
  font-weight: var(--fw-bold);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-bold); }

p { margin: 0 0 var(--space-4); }

a {
  color: var(--text-link);
  font-weight: var(--fw-bold);
  text-decoration: none;
}
a:hover { color: var(--text-link-hover); text-decoration: underline; }

strong, b { font-weight: var(--fw-bold); }

blockquote {
  font-family: var(--font-heading);
  color: var(--text-quote);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  margin: var(--space-6) 0;
  padding-left: var(--space-5);
  border-left: var(--bar-width) solid var(--drk-red);
}

small { font-size: var(--fs-body-sm); }

hr {
  border: 0;
  border-top: var(--border-width) solid var(--border-subtle);
  margin: var(--space-6) 0;
}

::selection { background: var(--drk-red); color: #fff; }

img { max-width: 100%; display: block; }

/* ==========================================================================
   DRK Hausnotruf-Check — Produktions-Styles
   Tokens: css/tokens/*  ·  Layout nach Design-Handoff Variante 1a
   ========================================================================== */

/* Tokens und Schriften sind in diese Datei eingebettet (eine CSS-Anfrage). */

:root {
  --container-page: 1320px;
  /* Fließtext und Eingabefelder bleiben schmal – ab etwa 75 Zeichen je Zeile
     findet das Auge den Zeilenanfang nicht mehr zuverlässig wieder. Kartenraster
     brauchen die Schranke nicht und werden von ihr nur gestaucht. */
  --shop-text: 640px;
  --header-h: 80px;
}

html {
  scroll-behavior: auto;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

body {
  font-size: 16px;
  min-width: 320px;
  overflow-x: clip;
}

img, svg { max-width: 100%; }

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Nach jedem Schritt springt der Fokus auf die mit data-focus markierte Überschrift,
   damit Screenreader den neuen Bildschirm ansagen (siehe shop-ui.js). Nur dort soll
   der programmgesteuerte Fokus unsichtbar bleiben; andere Elemente mit tabindex="-1"
   können nach einer Tastaturaktion fokussiert werden und behalten ihren Rahmen. */
[data-focus][tabindex="-1"]:focus,
[data-focus][tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }

.skip-link {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 200;
  background: var(--drk-dark-blue);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-weight: 700;
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[id] { scroll-margin-top: var(--header-h); }

.container {
  max-width: var(--container-page);
  margin: 0 auto;
  padding: 64px 32px;
}
.container-hero,
.container-split {
  max-width: var(--container-page);
  margin: 0 auto;
  padding: 72px 32px;
}

.overline {
  margin: 0 0 12px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--drk-red);
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--drk-red);
}
.hero-kicker::before {
  content: "";
  width: 4px;
  height: 1.15em;
  background: var(--drk-red);
  flex: none;
}

.section-title {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.25;
  color: var(--drk-black);
}
.section-title-blue {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.25;
  color: var(--drk-dark-blue);
}
.section-lead {
  margin: 0 0 40px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-body);
}
.section-lead--narrow {
  max-width: 640px;
}

.check-list {
  display: grid;
  gap: 12px;
  max-width: 480px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.check-list li {
  display: flex;
  gap: 12px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-body);
}
.check-mark {
  color: var(--drk-red);
  font-weight: 700;
  flex: none;
  width: 1em;
}

.cta-row { font-size: 15px; font-weight: 700; color: var(--drk-dark-blue); margin: 0; }
.cta-row a { color: var(--drk-dark-blue); font-weight: 700; text-decoration: none; }
.cta-row a:hover { color: var(--drk-red); text-decoration: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-weight: 700;
  line-height: 1;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn svg, .btn img { flex: none; }

.btn-sm { font-size: 15px; padding: 10px 16px; min-height: 44px; }
.btn-md { font-size: 15px; padding: 11px 20px; min-height: 44px; }
.btn-lg { font-size: 17px; padding: 14px 26px; min-height: 48px; }
.btn-block { display: flex; width: 100%; }

.btn-primary {
  background: var(--drk-red);
  color: #fff;
  border-color: var(--drk-red);
}
.btn-primary:hover { background: var(--drk-red-hover); border-color: var(--drk-red-hover); color: #fff; }
.btn-primary:active { background: var(--drk-red-press); border-color: var(--drk-red-press); }

.btn-secondary {
  background: var(--drk-dark-blue);
  color: #fff;
  border-color: var(--drk-dark-blue);
}
.btn-secondary:hover { background: var(--drk-dark-blue-hover); border-color: var(--drk-dark-blue-hover); color: #fff; }
.btn-secondary:active { background: #012647; }

.btn-outline {
  background: #fff;
  color: var(--drk-dark-blue);
  border-color: var(--border-default);
}
.btn-outline:hover { background: var(--drk-grey-100); color: var(--drk-dark-blue); }

.btn-inverse {
  background: transparent;
  color: #fff;
  border-color: #fff;
}
.btn-inverse:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

.link-btn {
  background: none;
  border: none;
  padding: 8px 0;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-link);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
}
.link-btn:hover { color: var(--text-link-hover); text-decoration: underline; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: #fff;
  border-bottom: 1px solid var(--border-subtle);
}
.header-inner {
  max-width: var(--container-page);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 32px;
}
.brand {
  display: inline-flex;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  flex: none;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  display: block;
  height: 40px;
  width: auto;
  margin-right: 7px;
}
.brand-bar {
  width: 1px;
  height: 40px;
  background: #000;
  flex: none;
  margin-right: 8px;
}
.brand-sender {
  font-family: var(--font-ui);
  font-size: 12.2px;
  line-height: 13.3px;
  color: #000;
}
.brand-sender span { display: block; white-space: nowrap; font-weight: 400; }
.brand-sender .brand-facility { font-weight: 700; }

.site-nav {
  display: flex;
  gap: 26px;
  font-size: 15px;
  font-weight: 600;
}
.site-nav a {
  color: var(--drk-grey-700);
  text-decoration: none;
  white-space: nowrap;
  padding: 8px 0;
}
.site-nav a:hover { color: var(--drk-red); text-decoration: none; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
}
.header-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
  color: var(--drk-dark-blue);
  text-decoration: none;
  white-space: nowrap;
}
.header-phone:hover { color: var(--drk-dark-blue-hover); text-decoration: none; }
.header-phone img { display: block; width: 20px; height: 20px; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--drk-dark-blue);
}

.mobile-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid var(--border-subtle);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}

/* ---------- Hero ---------- */
.hero { background: #fff; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.hero h1 {
  margin: 0 0 18px;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 48px;
  line-height: 1.14;
  color: var(--drk-black);
}
.hero .lead {
  margin: 0 0 28px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-body);
  max-width: 520px;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 20px;
}
.trust {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.trust li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 16px;
  color: var(--drk-grey-600);
}
.privacy-note {
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--text-muted);
}

.media-frame {
  position: relative;
  margin: 0;
  width: 100%;
  height: 460px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--drk-grey-200);
  contain: layout paint;
}
.media-frame--angehoerige { height: 400px; }
.media-frame video,
.media-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
img.media-still {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.media-video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-frame.is-still .media-video,
.media-frame.is-still .media-pause { display: none; }
.media-frame.is-playing img.media-still { visibility: hidden; }

@media (prefers-reduced-motion: reduce), (max-width: 840px) {
  .media-video,
  .media-pause { display: none !important; }
  img.media-still { visibility: visible !important; }
}

.media-pause {
  position: absolute;
  z-index: 2;
  right: 10px;
  bottom: 10px;
  margin: 0;
  padding: 10px 14px;
  min-height: 44px;
  border: 0;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.media-pause:hover,
.media-pause:focus-visible {
  background: rgba(15, 23, 42, 0.9);
}

/* ---------- Flächen-Rhythmus: Weiß / Hellblau / Rot ---------- */
.section-subtle,
.section-info {
  background: var(--surface-info);
}
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.step {
  margin: 0;
  padding: 28px 24px 32px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.step-nr {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--drk-white);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  color: var(--drk-red);
}
.step h3 {
  margin: 20px 0 10px;
  font-size: 19px;
}
.step p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-body);
}

/* ---------- Frage / Check ---------- */
.preview-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}
.preview-copy h2 {
  margin: 0 0 14px;
  font-size: 30px;
  line-height: 1.25;
}
.preview-copy p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-body);
}

.check-card {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  padding: 36px;
}
.check-start h3 {
  margin: 0 0 8px;
  font-size: 22px;
}
.check-start .lead {
  margin: 0 0 20px;
  font-size: 16px;
  color: var(--text-body);
}
.check-start-buttons {
  display: grid;
  gap: 12px;
}
.check-start .frage-hint {
  margin: 18px 0 0;
  font-size: 15px;
  color: var(--text-muted);
}

.progress {
  display: flex;
  justify-content: space-between;
  font-size: 14.5px;
  color: var(--text-muted);
  margin: 0 0 8px;
}
.progress-track {
  height: 6px;
  background: var(--drk-grey-200);
  border-radius: 2px;
  margin: 0 0 24px;
  overflow: hidden;
}
.progress-fill {
  height: 6px;
  background: var(--drk-red);
  border-radius: 2px;
  transition: width var(--dur-base) var(--ease-standard);
}

.frage-titel {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.4;
  color: var(--drk-black);
}
.frage-hint {
  margin: 0 0 16px;
  font-size: 16px;
  color: var(--text-muted);
}

.answers { display: grid; gap: 12px; }
.answer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 16px 18px;
  border: 2px solid var(--drk-grey-300);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.4;
  color: var(--drk-grey-700);
  background: #fff;
  cursor: pointer;
  min-height: 52px;
  transition: border-color var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}
.answer:hover {
  border-color: var(--drk-dark-blue);
  background: var(--drk-light-blue);
}
.answer[aria-pressed="true"] {
  border-color: var(--drk-dark-blue);
  background: var(--drk-light-blue);
  font-weight: 600;
  color: var(--drk-dark-blue);
}
.answer-check {
  font-weight: 700;
  margin-left: 12px;
  flex: none;
}
.check-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 24px 0 0;
}

/* ---------- Ergebnis (im Check) ---------- */
.ergebnis-eyebrow {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.skala-bars {
  display: flex;
  gap: 4px;
  margin: 0 0 16px;
}
.skala-bars span {
  flex: 1;
  height: 8px;
  border-radius: 2px;
  background: var(--drk-grey-200);
}
.skala-bars span.filled { background: var(--drk-dark-blue); }

.ergebnis-titel {
  margin: 0 0 10px;
  font-size: 24px;
}
.ergebnis-text {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.6;
}

.hinweis-box {
  margin: 16px 0;
  padding: 16px 20px;
  border-left: 4px solid var(--drk-red);
  background: var(--drk-light-blue);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--drk-dark-blue);
}
.hinweis-box p { margin: 0; }

.ergebnis-zitat {
  margin: 16px 0;
  padding: 16px 20px;
  border-left: 4px solid var(--drk-red);
  background: var(--drk-light-blue);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--drk-dark-blue);
}
.ergebnis-zitat p { margin: 0 0 8px; }
.ergebnis-zitat cite {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 14.5px;
  color: var(--text-muted);
}

.module-titel { margin: 24px 0 12px; font-size: 18px; }
.module-liste {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.modul {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 16px;
}
.modul img { width: 44px; height: 44px; flex: none; }
.modul h4 { margin: 0 0 4px; font-size: 16px; }
.modul p { margin: 0; font-size: 15.5px; color: var(--text-body); }

.kosten-box {
  margin: 18px 0;
  padding: 20px;
  background: var(--drk-light-blue);
  border-radius: 8px;
}
.kosten-box h4 { margin: 0 0 8px; font-size: 17px; color: var(--drk-dark-blue); }
.kosten-box p { margin: 0; font-size: 16px; }

.cta-box { margin-top: 24px; }
.cta-box h4 { margin: 0 0 8px; font-size: 19px; }
.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}
.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 15.5px;
  color: var(--text-body);
  margin-top: 16px;
  cursor: pointer;
}
.consent input {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px;
  accent-color: var(--drk-red);
}

.ergebnis-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}
.ergebnis-datenschutz {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 14px;
}
.toast { font-size: 14px; font-weight: 700; color: var(--color-success); }
.print-kopf { display: none; }

/* ---------- Stufen-Karten ---------- */
.stufen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.stufen-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 28px;
  box-shadow: var(--shadow-xs);
}
.stufen-bars {
  display: flex;
  gap: 4px;
  margin: 0 0 16px;
}
.stufen-bars span {
  flex: 1;
  height: 8px;
  border-radius: 2px;
  background: var(--drk-grey-200);
}
.stufen-bars span.on { background: var(--drk-dark-blue); }
.stufen-card .overline {
  margin: 0 0 6px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.stufen-card h3 { margin: 0 0 10px; font-size: 20px; }
.stufen-card p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-body);
}

/* ---------- Module ---------- */
.module-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.module-card {
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 24px;
}
.module-card img { display: block; width: 44px; height: 44px; }
.module-card h3 { margin: 16px 0 8px; font-size: 18px; }
.module-card p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text-body);
}
.module-note {
  margin: 20px 0 0;
  font-size: 15px;
  color: var(--text-muted);
}

/* ---------- Kosten ---------- */
.kosten-head {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin: 0 0 28px;
}
.kosten-head img { flex: none; width: 52px; height: 52px; }
.kosten-head p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--drk-grey-700);
  max-width: 720px;
}
.kosten-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.kosten-card {
  background: #fff;
  border-radius: 8px;
  padding: 28px;
}
.kosten-card h3 { margin: 0 0 8px; font-size: 19px; }
.kosten-card p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-body);
}

/* ---------- Angehörige ---------- */
.angehoerige-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 56px;
  align-items: center;
}
.angehoerige-copy h2 {
  margin: 0 0 14px;
  font-size: 30px;
  line-height: 1.25;
}
.angehoerige-copy > p {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-body);
  max-width: 500px;
}
.quote-block {
  margin: 0 0 24px;
  padding: 16px 20px;
  border-left: 4px solid var(--drk-red);
  background: var(--drk-light-blue);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--drk-dark-blue);
}
.angehoerige-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.angehoerige-cta .hint {
  font-size: 15px;
  color: var(--text-muted);
  max-width: 280px;
}

/* ---------- Hilfe vor Ort ---------- */
.story-block {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 56px;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 48px;
}
.story-block--flip {
  grid-template-columns: 1.05fr 0.95fr;
  padding-bottom: 56px;
}
.story-block--flip figure { order: 2; }
.story-copy h3 {
  margin: 0 0 14px;
  font-size: 28px;
  line-height: 1.25;
}
.story-copy > p {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-body);
  max-width: 520px;
}

/* ---------- Einsatzgebiet & FAQ (SEO/GEO) ---------- */
.geo-block { max-width: 860px; }
.geo-block > p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-body);
}
.geo-places {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 20px 0 16px;
  padding: 0;
  list-style: none;
}
.geo-places li {
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--drk-dark-blue);
  background: var(--drk-light-blue);
}
.geo-note {
  margin: 0;
  font-size: 15px;
  color: var(--text-muted);
}
.faq-wrap { max-width: 760px; }
.faq-list {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 4px 24px 8px;
}
.faq-list details {
  border-bottom: 1px solid var(--border-subtle);
}
.faq-list details:last-child { border-bottom: 0; }
.faq-list summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 0;
  min-height: 44px;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--drk-dark-blue);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  float: right;
  color: var(--drk-red);
  font-weight: 700;
}
.faq-list details[open] summary::after { content: "–"; }
.faq-list details p {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-body);
  max-width: 640px;
}
/* ---------- Rückruf ---------- */
.rueckruf-grid {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 64px;
  align-items: center;
}
.rueckruf-copy h2 {
  margin: 0 0 14px;
  font-size: 30px;
  line-height: 1.25;
}
.rueckruf-copy > p {
  margin: 0 0 var(--space-5);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-body);
  max-width: 480px;
}
.rueckruf-copy strong {
  color: var(--drk-dark-blue);
  white-space: nowrap;
}
.rueckruf-copy .check-list {
  margin: 0 0 var(--space-6);
}
.testimonial {
  margin: 0;
  max-width: 480px;
}
.testimonial blockquote {
  margin: 0 0 var(--space-2);
  padding: 0;
  border: 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 19px;
  line-height: 1.4;
  color: var(--drk-dark-blue);
}
.testimonial blockquote p {
  margin: 0;
}
.testimonial figcaption {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--text-muted);
}

.form-card {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  padding: 32px;
}
.form-card h3 { margin: 0 0 6px; font-size: 21px; }
.form-card .form-sub {
  margin: 0 0 22px;
  font-size: 15px;
  color: var(--text-muted);
}
.form-grid { display: grid; gap: 18px; }
.rueckruf-felder { min-width: 0; margin: 0; padding: 0; border: 0; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field[hidden] { display: none; }
.field label {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-strong);
}
.req { color: var(--drk-red); margin-left: 3px; }
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field input[type="date"] {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-strong);
  padding: 13px 14px;
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field input:focus {
  border-color: var(--drk-dark-blue);
  box-shadow: var(--shadow-focus);
}
.field input[aria-invalid="true"] { border-color: var(--drk-red); }
.field-help {
  font-size: 14.5px;
  color: var(--text-muted);
}
.field-error {
  font-size: 14.5px;
  color: var(--drk-red);
}
.checkbox-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 0;
  min-height: 44px;
  font-size: 16px;
  color: var(--text-body);
  cursor: pointer;
}
.checkbox-row input {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px;
  accent-color: var(--drk-red);
}
.form-legal {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}
.form-success h3 { margin: 0 0 10px; font-size: 21px; }
.form-success p { margin: 0; font-size: 16px; line-height: 1.6; }
.form-error { margin: 0; }

/* Anliegen-Wahl im Rückruf-Formular */
.choice-row {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.choice-row legend {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-strong);
  padding: 0;
  margin: 0 0 6px;
}
.choice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: 16px;
  color: var(--text-body);
  cursor: pointer;
}
.choice:has(input:checked) {
  border-color: var(--drk-dark-blue);
  background: var(--drk-light-blue);
  color: var(--drk-dark-blue);
  font-weight: 600;
}
.choice input {
  width: 20px;
  height: 20px;
  margin: 0;
  flex: none;
  accent-color: var(--drk-red);
}
.optional { font-weight: 400; color: var(--text-muted); }
/* TP2: Rollenfrage – eine Wahl je Zeile, mit Erklärung darunter. */
.shop-rolle {
  border: 0;
  margin: 18px 0 0;
  padding: 0;
  min-width: 0;
  display: grid;
  gap: 8px;
}
.shop-rolle legend { padding: 0; margin: 0 0 6px; }
.choice-block span { display: grid; gap: 2px; }
.choice-block small { font-size: 15px; font-weight: 400; color: var(--text-muted); line-height: 1.4; }
.shop-rolle-hinweis { margin-top: 10px; }
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
@media (max-width: 480px) {
  .choice-row { grid-template-columns: 1fr; }
}

/* Solange der Check läuft, würde die mobile Startleiste ihn zurücksetzen. */
.check-active .mobile-cta { display: none !important; }

/* ---------- Abschluss-CTA ---------- */
.closing {
  background: var(--drk-red);
  text-align: center;
}
.closing .container { padding: 56px 32px; }
.closing h2 {
  margin: 0 0 10px;
  font-size: 30px;
  color: #fff;
}
.closing p {
  margin: 0 0 28px;
  font-size: 16.5px;
  color: rgba(255, 255, 255, 0.92);
}
.closing-actions {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.closing-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}
.closing-phone:hover { color: #fff; text-decoration: underline; }
.closing-phone img { display: block; width: 24px; height: 24px; }

/* ---------- Rechtstexte ---------- */
.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  max-width: var(--container-page);
  margin: 0 auto;
  padding: 8px 32px 16px;
  background: #fff;
  border-bottom: 1px solid var(--border-subtle);
}
.legal-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
}
.legal-nav a[aria-current="page"] { color: var(--drk-red); }
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 32px 80px;
}
.legal h1 { margin-bottom: 8px; }
.legal-stand {
  margin: 0 0 28px;
  font-size: 15px;
  color: var(--text-muted);
}
.legal h2 {
  margin: 32px 0 12px;
  font-size: 22px;
}
.legal h3 {
  margin: 22px 0 8px;
  font-size: 18px;
}
.legal p,
.legal li {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-body);
}
.legal ul { padding-left: 1.2em; }
.legal dl {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 10px 20px;
  margin: 0 0 24px;
}
.legal dt {
  margin: 0;
  font-weight: 700;
  color: var(--drk-dark-blue);
}
.legal dd { margin: 0; }
.legal-note {
  padding: 14px 16px;
  background: var(--drk-light-blue);
  border-left: 4px solid var(--drk-red);
}
@media (max-width: 640px) {
  .legal dl { grid-template-columns: 1fr; }
  .legal-nav { padding-left: 24px; padding-right: 24px; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: #fff;
  border-top: 1px solid var(--border-subtle);
}
.footer-grid {
  max-width: var(--container-page);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 48px;
  padding: 48px 32px 28px;
}
.footer-brand .brand-mark { height: 36px; }
.footer-brand .brand-bar { height: 36px; }
.footer-brand .brand-sender { font-size: 11px; line-height: 12px; }
.footer-address {
  margin: 18px 0 0;
  font-size: 15px;
  font-style: normal;
  line-height: 1.7;
  color: var(--drk-grey-600);
}
.footer-label {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--drk-grey-500);
}
.footer-col p,
.footer-col a {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--drk-grey-700);
  text-decoration: none;
  font-weight: 400;
}
.footer-col a:hover { color: var(--drk-red); }
.footer-disclaimer {
  max-width: var(--container-page);
  margin: 0 auto;
  padding: 0 32px 28px;
}
.footer-disclaimer p {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
  font-size: 14px;
  color: var(--text-muted);
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .container,
  .container-hero,
  .container-split,
  .header-inner,
  .footer-grid,
  .footer-disclaimer,
  .closing .container { padding-left: 24px; padding-right: 24px; }
  .module-grid { grid-template-columns: 1fr 1fr; }
  .rueckruf-grid { grid-template-columns: 1fr 400px; gap: 40px; }
}

@media (max-width: 840px) {
  .container,
  .container-hero,
  .container-split { padding-top: 48px; padding-bottom: 48px; }
  .hero-grid,
  .preview-grid,
  .stufen-grid,
  .kosten-grid,
  .angehoerige-grid,
  .rueckruf-grid,
  .story-block,
  .story-block--flip,
  .steps,
  .footer-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 32px; }
  .section-title,
  .preview-copy h2,
  .angehoerige-copy h2,
  .rueckruf-copy h2,
  .story-copy h3,
  .closing h2 { font-size: 24px; }
  .media-frame,
  .media-frame--angehoerige { height: auto; aspect-ratio: 4 / 3; }
  .story-block--flip figure { order: 0; }
  .story-block,
  .story-block--flip { padding-bottom: 32px; gap: 24px; }
  .header-inner {
    gap: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .header-inner .btn-sm { display: none; }
  .header-inner .brand-bar,
  .header-inner .brand-sender { display: none; }
  .header-phone { min-height: 44px; }
  .nav-toggle { display: flex; }
  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--border-subtle);
    padding: 8px 24px 16px;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 12px 0; min-height: 44px; }
  .hero .container-hero {
    padding-bottom: calc(48px + 76px + env(safe-area-inset-bottom, 0px));
  }
  .trust {
    flex-direction: column;
    gap: 8px;
  }
  .hero-cta,
  .angehoerige-cta,
  .closing-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-cta .btn,
  .angehoerige-cta .btn { width: 100%; }
  .rueckruf-copy strong { white-space: normal; }
  .mobile-cta { display: block; }
  .mobile-cta[hidden] { display: none; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .check-card,
  .form-card { padding: 24px; }
}

@media (max-width: 560px) {
  .module-grid { grid-template-columns: 1fr; }
  .header-phone-num { display: none; }
  .legal { padding-left: 20px; padding-right: 20px; }
}

/* ---------- Shop-Bestellstrecke ---------- */
.shop-page .mobile-cta { display: none !important; }
.shop-main { padding: 0 0 64px; }
/* ==========================================================================
   VERKAUFSSTRECKE – Rahmen nach dem Design-Handoff (TP10 Phase D)
   Weiß ist die Bühne; Grau setzt nur einzelne Blöcke ab. Maße: Inhalt 1180 px,
   Textspalte 720 px, Zusammenfassung 360 px.
   ========================================================================== */
.shop-page { background: #fff; }
.shop-wrap { max-width: var(--container-page); padding-top: 40px; padding-bottom: 64px; }

/* Kopfzeile: Marke, Titel, Telefon – keine Hauptnavigation. */
.shop-header { background: #fff; border-bottom: 1px solid var(--drk-grey-300); }
.shop-header-inner {
  max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 18px;
  padding: 14px 24px;
}
.shop-header-tel { margin: 0 0 0 auto; text-align: right; }
.shop-header-tel span { display: block; font-size: 15px; color: var(--drk-grey-600); }
.shop-header-tel a {
  font-size: 20px; font-weight: 700; color: var(--drk-dark-blue);
  text-decoration: none; white-space: nowrap;
}

/* Fortschritt: drei Abschnitte, aktiv weiß mit rotem Balken. */
.shop-steps { margin: 0 0 32px; }
/* Fortschrittsleiste, keine Reiter. Rückmeldung aus dem Feld: Als gefüllte Kacheln
   mit farbiger Unterkante sahen die Abschnitte anklickbar aus. Jetzt eine Kette aus
   Ziffern mit Verbindungslinie – erledigte tragen einen Haken. Nichts davon hat eine
   Fläche, die zum Klicken einlädt, und der Mauszeiger bleibt der normale. */
.shop-step-track {
  display: flex; align-items: flex-start; gap: 0; margin: 0 0 10px; padding: 0; list-style: none;
}
.shop-step-seg {
  flex: 1 1 0; min-width: 0; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: var(--font-ui); font-size: 15px; font-weight: 600; line-height: 1.3;
  text-align: center; color: var(--drk-grey-600); cursor: default;
}
/* Verbindungslinie zwischen den Ziffern – sie liegt hinter der Marke. */
.shop-step-seg::before {
  content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px;
  background: var(--drk-grey-300);
}
.shop-step-seg:first-child::before { display: none; }
.shop-step-seg.is-done::before,
.shop-step-seg.is-active::before { background: var(--drk-dark-blue); }
.shop-step-marke {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: #fff; border: 2px solid var(--drk-grey-300);
  font-size: 15px; font-weight: 700; color: var(--drk-grey-600);
}
.shop-step-text { display: block; max-width: 100%; }
.shop-step-seg.is-done { color: var(--text-body); }
.shop-step-seg.is-done .shop-step-marke {
  background: var(--drk-dark-blue); border-color: var(--drk-dark-blue); color: #fff;
}
.shop-step-seg.is-active { color: var(--text-heading); }
.shop-step-seg.is-active .shop-step-marke {
  background: var(--drk-red); border-color: var(--drk-red); color: #fff;
}
.shop-steps-head { margin: 0; font-size: 14px; color: var(--drk-grey-600); }

/* Herstellertext auf der Geräteseite: sichtbar abgesetzt vom eigenen Verkaufstext. */
.pdp-quelle-titel {
  margin: 24px 0 6px; font-family: var(--font-ui); font-size: 15px; font-weight: 700;
  color: var(--drk-grey-600);
}
.pdp-quelle-text {
  margin: 0; padding-left: 14px; border-left: 3px solid var(--drk-grey-300);
  font-size: 16px; line-height: 1.6; color: var(--drk-grey-600);
}

@media (max-width: 480px) {
  .shop-step-seg { font-size: 13px; }
  .shop-step-marke { width: 24px; height: 24px; font-size: 13px; }
  .shop-step-seg::before { top: 11px; }
}

/* Zwei Spalten ab 1024 px; darunter eine Spalte mit fester Preisleiste. */
.shop-layout { display: block; }
.shop-side { display: none; }
.shop-side-card {
  background: #fff; border: 1px solid var(--drk-grey-300); border-top: 4px solid var(--drk-dark-blue);
  padding: 22px; position: sticky; top: 24px;
  /* Wird die Übersicht einmal länger als das Fenster – viele Zubehörzeilen –,
     bliebe der Preis sonst unten außerhalb. Der Kasten scrollt dann in sich. */
  max-height: calc(100vh - 48px); overflow: auto;
}
.shop-side-title {
  margin: 0 0 16px; font-family: var(--font-display); font-weight: 700; font-size: 20px;
  color: var(--text-heading);
}
.shop-side-leer {
  display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 3;
  background: #F5F4F1; border: 1px dashed var(--drk-grey-300);
}
.shop-side-leer p { margin: 0; padding: 0 18px; text-align: center; font-size: 17px; line-height: 1.5; color: var(--drk-grey-600); }
.shop-side-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #F5F4F1; }
.shop-side-list {
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 10px 16px; margin: 18px 0 0;
}
.shop-side-list dt { font-size: 16px; color: var(--drk-grey-600); }
.shop-side-list dd { margin: 0; font-size: 16px; color: var(--text-body); }
.shop-side-preis {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--drk-grey-300);
}
.shop-side-preis span { font-size: 17px; color: var(--text-body); }
.shop-side-preis strong {
  font-family: var(--font-display); font-weight: 900; font-size: 24px; color: var(--text-heading);
  white-space: nowrap;
}
.shop-side-zeile { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; margin: 8px 0 0; font-size: 17px; }
.shop-side-stern {
  margin: 16px 0 0; padding: 14px; background: var(--drk-light-blue); border: 1px solid #C9DFF5;
  font-size: 15px; line-height: 1.6; color: var(--text-body);
}
.shop-side-hinweis { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: var(--drk-grey-600); }

/* Rechte Spalte auf dem ersten Bildschirm: der Ablauf statt eines leeren Kastens. */
/* Zahl der Geräte auf einer Gruppenkarte – ein Hinweis, keine Überschrift. */
.geraet-anzahl {
  display: block; margin-top: 10px; font-family: var(--font-ui); font-size: 15px;
  color: var(--drk-grey-600);
}

.shop-ablauf { margin: 0; padding: 0; list-style: none; }
.shop-ablauf li {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px;
  align-items: start; padding: 0 0 18px;
}
.shop-ablauf li:last-child { padding-bottom: 0; }
.shop-ablauf-nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: #fff; border: 2px solid var(--drk-grey-300);
  font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: var(--drk-grey-600);
}
.shop-ablauf-text { font-size: 16px; line-height: 1.5; color: var(--drk-grey-600); }
.shop-ablauf-text strong {
  display: block; font-family: var(--font-ui); font-size: 17px; color: var(--text-heading);
}

/* Handy: feste Leiste unten mit Preis und dem nächsten Schritt. */
.shop-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: #fff; border-top: 1px solid var(--drk-grey-300);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}
.shop-bar-inner { display: flex; align-items: center; gap: 12px; max-width: 760px; margin: 0 auto; }
.shop-bar-inner.is-gestapelt { flex-direction: column; align-items: stretch; gap: 10px; }
.shop-bar-preis {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-height: 44px; padding: 0; background: transparent; border: 0; cursor: pointer; text-align: left;
}
.shop-bar-preis span:first-child { font-size: 14px; color: var(--drk-grey-600); }
.shop-bar-preis strong { font-family: var(--font-display); font-weight: 900; font-size: 21px; color: var(--text-heading); }
.shop-bar-leer { margin: 0; font-size: 15px; line-height: 1.45; color: var(--drk-grey-600); max-width: 19ch; }
.shop-bar-spacer { flex: 1; }
.shop-bar-btn { flex: 0 0 auto; }
.shop-bar-einzel {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px;
  margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid var(--drk-grey-300);
}
.shop-bar-einzel dt { font-size: 16px; color: var(--text-body); }
.shop-bar-einzel dd { margin: 0; font-size: 16px; text-align: right; white-space: nowrap; }

/* Pflegegrad-Wahl in Schritt 2: enger als die Antwortkarten des Checks. */
.answers-eng { display: grid; gap: 10px; margin: 0 0 26px; }
.answers-eng .answer { min-height: 56px; }
.answer-sub { display: block; font-size: 15px; font-weight: 400; color: var(--drk-grey-600); margin-top: 2px; }

/* Der Schritt steht direkt auf Weiß – der Entwurf kennt hier keine Karte. */

/* Verkürzte Fußzeile. */
.shop-footer { background: #fff; border-top: 1px solid var(--drk-grey-300); }
.shop-footer-inner {
  max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px 28px; padding: 22px 24px;
}
.shop-footer-inner a { font-size: 16px; }
.shop-footer-spacer { flex: 1; }
.shop-footer-note { font-size: 15px; color: var(--drk-grey-600); }

@media (min-width: 1024px) {
  .shop-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start;
  }
  /* Ein klebender Kasten klebt nur innerhalb seiner eigenen Spalte. Ohne diese
     Zeile ist die Spalte genau so hoch wie der Kasten selbst – es gibt also gar
     keine Strecke, auf der er kleben könnte, und er scrollt einfach weg. Mit
     „stretch“ reicht die Spalte über die ganze Zeile, und die Preisübersicht
     bleibt beim Scrollen stehen. align-items: start oben gilt weiter für alles
     andere. */
  .shop-side { display: block; align-self: stretch; }
  .shop-bar { display: none; }
  /* Der Preis steht rechts – im Fluss wäre er doppelt. */
  .shop-quote-inline { display: none; }
}
@media (max-width: 1023px) {
  .shop-header-tel span { display: none; }
  .shop-header-tel a { font-size: 17px; }
  /* Platz, damit die feste Leiste nichts verdeckt. */
  .shop-page main { padding-bottom: 96px; }
}

.shop-preview-banner {
  margin: 0;
  padding: 10px 24px;
  background: var(--drk-light-blue);
  border-bottom: 3px solid var(--drk-red);
  font-size: 14px;
  text-align: center;
  color: var(--drk-dark-blue);
}
.shop-form { display: grid; gap: 16px; }
.shop-grid-2 { grid-template-columns: 1fr 1fr; }
.shop-hotline {
  margin: 18px 0 0;
  font-size: 15px;
  text-align: center;
}
.shop-hotline a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--drk-red);
  text-decoration: none;
}
.shop-nav { margin-top: 8px; }
.shop-legal {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  background: #fff;
}
.shop-legal summary {
  cursor: pointer;
  font-weight: 700;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.shop-legal-body {
  padding: 8px 0 12px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-body);
}
.field textarea {
  width: 100%;
  box-sizing: border-box;
  height: auto;
  min-height: 96px;
  resize: vertical;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-strong);
  padding: 13px 14px;
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  outline: none;
}
.field textarea:focus {
  border-color: var(--drk-dark-blue);
  box-shadow: var(--shadow-focus);
}
.field input[readonly] {
  background: var(--drk-grey-100);
  color: var(--text-muted);
}
@media (max-width: 640px) {
  .shop-grid-2 { grid-template-columns: 1fr; }
}

/* ===========================================================================
   Shop-Bestellstrecke · Webshop-Ausbau (Produktkarten, Warenkorb, Stepper)
   =========================================================================== */
/* Dankeseite, Widerruf und Kündigung behalten die Karte; nur die Strecke selbst
   steht rahmenlos auf Weiß (Design-Handoff, Regel weiter unten). */
.shop-page .check-card {
  padding: 32px 36px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  border-color: var(--drk-grey-200);
}
@media (max-width: 720px) {
  .shop-page .check-card { padding: 24px 20px; }
}

/* Zusatzbaustein: Hinweiszeile */
.shop-sub-hint { margin: 0 0 12px; font-size: 15px; color: var(--text-muted); }

/* Die Strecke selbst hat keinen Kartenrahmen; sie steht direkt auf Weiß.
   Muss nach `.shop-page .check-card` stehen – gleiche Spezifität, die spätere Regel gewinnt. */
.shop-layout > .check-card { border: 0; padding: 0; box-shadow: none; background: transparent; }

/* Innerhalb der Strecke bleibt schmal, was gelesen oder ausgefüllt wird – also
   alles, bis auf die unten genannten Ausnahmen. Die Regel ist bewusst
   andersherum gebaut als die Ausnahmeliste: Ein neuer Textblock ist damit von
   sich aus richtig, und nur wer die ganze Breite braucht, muss es sagen. */
.shop-layout > .check-card > *,
.shop-layout > .check-card > form > * {
  max-width: var(--shop-text);
}
/* Die Kartenraster (Gruppen, Geräte, Pakete) und die Fortschrittsleiste nehmen
   die ganze Spalte. Bei den Karten gibt es keine Zeilen, die das Auge verlieren
   könnte; die Schranke hätte dort nur zur Folge, dass die vierte Karte allein
   umbricht. */
/* Das Formular selbst ist nur die Klammer – eng wird es erst bei seinen Kindern,
   sonst zöge es die Kartenraster darin mit auf Textbreite zusammen. */
.shop-layout > .check-card > form,
.shop-layout > .check-card > .shop-steps,
.shop-layout > .check-card > form > .shop-fieldset,
.shop-layout > .check-card .geraet-gitter,
.shop-layout > .check-card .paket-gitter {
  max-width: none;
}

/* --- Schritt 5: Zahlung (Design-Handoff TP10) --- */
.iban-stand { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; min-height: 24px; font-size: 16px; color: #1F5C22; }
.iban-haken { color: var(--color-success); font-weight: 700; }
.shop-abbuchung {
  margin: 22px 0 0; padding: 20px; background: var(--drk-light-blue); border: 1px solid #C9DFF5;
}
.shop-abbuchung-titel {
  margin: 0 0 12px; font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--drk-dark-blue);
}
.shop-abbuchung-liste {
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 10px 18px; margin: 0;
}
.shop-abbuchung-liste dt { font-size: 17px; color: var(--drk-grey-600); }
.shop-abbuchung-liste dd { margin: 0; font-size: 17px; color: var(--text-body); }
.shop-abbuchung-note { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--text-body); }

/* --- Schritt 6: Prüfen und bestellen (Design-Handoff TP10) --- */
/* Meldung über den Blöcken, wenn eine Bestätigung fehlt. */
.shop-alarm {
  display: grid; gap: 4px; margin: 0 0 22px; padding: 16px 18px; background: #fff;
  border: 2px solid #B00019; font-size: 17px; line-height: 1.55; color: var(--text-body);
}
.shop-alarm strong { font-family: var(--font-ui); font-size: 18px; color: #B00019; }

/* Die Blöcke stehen als einzelne Karten, nicht mehr als eine Liste mit Trennlinien. */
.vertrag { display: grid; gap: 14px; }
.vertrag + .vertrag { margin-top: 14px; }
.vertrag section { padding: 18px 20px; background: #fff; border: 1px solid var(--border-default); }
.v-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 8px; }
.v-head h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--text-heading); }
.v-head a { font-size: 17px; font-weight: 700; }
.v-party { margin: 0; font-size: 17px; line-height: 1.6; }
.v-party strong { display: block; margin-bottom: 4px; font-size: 19px; color: var(--text-strong); }
.v-kv { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 8px 18px; margin: 0; font-size: 17px; }
.v-kv dt { color: var(--drk-grey-600); }
.v-kv dd { margin: 0; color: var(--text-body); }
.v-contacts { margin: 0; padding: 0; list-style: none; font-size: 17px; }
.v-contacts li { display: flex; gap: 10px; align-items: baseline; padding: 4px 0; }
.v-contacts .n {
  flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px;
  background: var(--drk-grey-200); color: var(--text-body); font-size: 14px; font-weight: 700;
}
.v-tag {
  display: inline-block; margin-left: 8px; padding: 2px 8px; background: #E6F2EE;
  color: var(--color-success); font-size: 14px; font-weight: 700;
}
.v-note { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: var(--drk-grey-600); }

/* Kosten und Vertrag: der Kasten, auf den es ankommt. */
.kosten-block { margin: 14px 0; padding: 22px; background: #fff; border: 2px solid var(--drk-dark-blue); }
.kosten-titel {
  margin: 0 0 16px; font-family: var(--font-display); font-weight: 700; font-size: 21px; color: var(--text-heading);
}
.kosten-zeile {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 14px 0; border-bottom: 1px solid var(--border-default);
}
.kosten-zeile:first-of-type { padding-top: 0; }
.kosten-zeile span { font-size: 17px; color: var(--text-body); }
.kosten-zeile strong { font-size: 19px; font-weight: 700; color: var(--text-strong); white-space: nowrap; }
.kosten-gross span { font-size: 19px; }
.kosten-gross strong { font-family: var(--font-display); font-weight: 900; font-size: 30px; }
.kosten-details { margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--border-default); }
.kosten-note { margin: 16px 0 0; font-size: 15px; line-height: 1.6; color: var(--drk-grey-600); }

/* Pflichtangaben unmittelbar über dem Kaufknopf (§ 312j Abs. 2 BGB). */
.shop-pflicht {
  margin: 26px 0 0; padding: 20px; background: var(--drk-grey-bg); border: 1px solid var(--border-default);
}
.shop-pflicht-kopf {
  margin: 0 0 12px; font-family: var(--font-ui); font-size: 17px; font-weight: 700; color: var(--text-heading);
}
.shop-pflicht .v-kv dd strong { font-size: 19px; }

/* Empfehlung aus dem Hausnotruf-Check – ein Hinweis, kein Häkchen. */
.zubehoer-tipp {
  display: inline-block; margin-left: 8px; padding: 2px 8px; background: var(--drk-light-blue);
  color: var(--drk-dark-blue); font-family: var(--font-ui); font-size: 14px; font-weight: 700;
}

/* Bestätigungen: fehlende Zeile bekommt einen Rahmen, kein Suchen. */
.checkbox-row.is-fehlt { padding: 12px 14px; background: #fff; border: 2px solid #B00019; }
.checkbox-fehlt { display: block; margin-top: 4px; color: #B00019; }

/* Kaufzeile: der Knopf über die volle Breite, „Zurück“ darunter. */
.shop-kaufzeile { display: grid; gap: 14px; justify-items: center; margin: 26px 0 0; }
.shop-kaufzeile .btn { width: 100%; min-height: 58px; }

/* --- Schritt 3: Wer nutzt den Hausnotruf (Design-Handoff TP10) --- */
/* Große Wahlkarten: „Für mich selbst“ / „Für jemand anderen“ und die Rolle. */
.wahl-karten { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.wahl-karten-eng { grid-template-columns: minmax(0, 1fr); }
.wahl-karte {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px; background: #fff;
  border: 1px solid var(--border-default); cursor: pointer;
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.wahl-karte:hover { border-color: var(--drk-mid-blue); }
.wahl-karte:focus-within { outline: 3px solid var(--drk-dark-blue); outline-offset: 2px; }
.wahl-karte.is-on { border-color: var(--drk-dark-blue); box-shadow: inset 0 0 0 1px var(--drk-dark-blue); }
.wahl-karte input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wahl-radio {
  flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%;
  border: 2px solid var(--drk-grey-400); background: #fff; position: relative;
}
.wahl-karte.is-on .wahl-radio { border-color: var(--drk-dark-blue); }
.wahl-karte.is-on .wahl-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--drk-dark-blue); }
.wahl-text { min-width: 0; font-size: 17px; line-height: 1.5; color: var(--text-body); }
.wahl-text strong {
  display: block; margin-bottom: 2px; font-family: var(--font-display); font-weight: 700;
  font-size: 19px; color: var(--text-heading);
}

/* Formularflächen auf hellblauem Grund, wie im Entwurf. */
.shop-panel {
  margin: 24px 0 0; padding: 24px; background: var(--drk-light-blue); border: 1px solid #C9DFF5;
}
.shop-panel + .shop-panel { margin-top: 20px; }
.shop-panel-titel {
  margin: 0 0 4px; padding: 0; font-family: var(--font-display); font-weight: 700; font-size: 21px;
  color: var(--text-heading);
}
.shop-panel-lead { margin: 0 0 18px; font-size: 17px; line-height: 1.55; color: var(--text-body); }
.shop-panel .field input,
.shop-panel .field select { background: #fff; }
/* Nur Blöcke untereinander bekommen Abstand – nicht die zweite Spalte im Raster. */
.shop-panel > .form-grid + .form-grid,
.shop-panel > .form-grid + .field,
.shop-panel > .field + .field,
.shop-panel > .datum-gruppe + .form-grid { margin-top: 20px; }

/* Geburtsdatum in drei Feldern. */
.datum-gruppe { margin: 20px 0 0; padding: 0; border: 0; min-width: 0; }
.datum-gruppe legend {
  padding: 0; margin: 0 0 4px; font-family: var(--font-ui); font-size: 16px; font-weight: 700;
  color: var(--text-body);
}
.datum-gruppe .field-help { display: block; margin: 0 0 8px; }
.datum-felder { display: flex; gap: 12px; max-width: 340px; }
.datum-feld { display: flex; flex-direction: column; gap: 4px; flex: 0 0 84px; }
.datum-feld.datum-jahr { flex-basis: 110px; }
.datum-feld label { font-size: 15px; color: var(--drk-grey-600); }
.datum-feld input {
  width: 100%; height: 50px; padding: 12px 14px; font-family: var(--font-body); font-size: 17px;
  color: var(--text-strong); background: #fff; border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.datum-feld input:focus { border-color: var(--drk-dark-blue); box-shadow: var(--shadow-focus); outline: none; }
.datum-gruppe.is-err .datum-feld input { border-color: var(--drk-red); }

/* Rolle: Wahlkarten und der Satz, was die Wahl bedeutet. */
.shop-rolle { margin: 22px 0 0; padding: 18px 0 0; border: 0; border-top: 1px solid #C9DFF5; min-width: 0; }
.shop-rolle legend { padding: 0; margin: 0 0 12px; }
.shop-rolle-hinweis {
  margin: 12px 0 0; padding: 14px 16px; background: #fff; border: 1px solid #C9DFF5;
  font-size: 17px; line-height: 1.6; color: var(--text-body);
}

/* Was wir bewusst später fragen. */
.shop-hinweis-grau {
  margin: 22px 0 0; padding: 16px 18px; background: var(--drk-grey-bg);
  font-size: 17px; line-height: 1.6; color: var(--text-body); max-width: 66ch;
}

@media (max-width: 560px) {
  .shop-panel { padding: 18px; }
  .datum-felder { max-width: none; }
}

/* Warenkorb / Preis-Zusammenfassung */
.shop-quote {
  margin: 22px 0 4px; padding: 18px 20px;
  border: 1px solid var(--drk-grey-200); border-radius: var(--radius-lg);
  background: var(--drk-grey-100);
}
.shop-quote-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.shop-quote-head svg { flex: none; color: var(--drk-red); }
.shop-quote-head h3 { margin: 0; font-family: var(--font-ui); font-size: 16px; font-weight: 700; color: var(--drk-dark-blue); }
.shop-quote-lines { list-style: none; margin: 0; padding: 0; }
.shop-quote-lines li {
  display: flex; justify-content: space-between; gap: 16px; padding: 8px 0;
  font-size: 16px; color: var(--text-body); border-bottom: 1px solid var(--drk-grey-200);
}
.shop-quote-num { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-strong); white-space: nowrap; }
.shop-quote-num small { font-weight: 500; color: var(--text-muted); margin-left: 3px; font-size: 12px; }
.shop-quote-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  margin-top: 14px;
}
.shop-quote-total > span { font-family: var(--font-ui); font-weight: 700; font-size: 15px; color: var(--drk-dark-blue); }
.shop-quote-total strong { font-family: var(--font-ui); font-size: 26px; font-weight: 800; color: var(--drk-black); white-space: nowrap; }
.shop-quote-total strong small { font-size: 14px; font-weight: 600; color: var(--text-muted); margin-left: 2px; }
.shop-quote-note { margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--text-muted); }

/* Navigation / CTA-Leiste */
.shop-nav { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--drk-grey-200); }
.shop-nav .btn { min-width: 168px; }
.shop-nav .link-btn { font-size: 15px; }
@media (max-width: 520px) {
  .shop-nav { flex-direction: column-reverse; align-items: stretch; }
  .shop-nav .btn { width: 100%; }
  .shop-nav .link-btn { align-self: center; }
}

/* Rechtstexte */
.shop-legal { margin: 0; }
.shop-legal + .shop-legal { margin-top: 8px; }
.shop-legal summary { font-size: 15px; color: var(--drk-dark-blue); }

/* --- Schritt 2: Gerät, Paket, Zubehör (Design-Handoff TP10) --- */
.shop-config-title { margin: 0 0 8px; font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1.25; color: var(--text-heading); }
.shop-abschnitt { margin: 34px 0 12px; font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--text-heading); }
.shop-abschnitt-lead { margin: 0 0 16px; font-size: 17px; line-height: 1.6; color: var(--text-body); max-width: 66ch; }
.shop-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.shop-hinweis-blau { margin: 0; padding: 18px 20px; background: var(--drk-light-blue); border: 1px solid #C9DFF5; font-size: 17px; line-height: 1.6; color: var(--text-body); }
/* Kein Preis, keine Bestellung – das ist kein Hinweis am Rande, sondern der Grund,
   warum es hier nicht weitergeht. Deshalb nicht im ruhigen Blau der übrigen
   Hinweise. Beim Absenden wird derselbe Absatz zur Fehlermeldung und bekommt den
   Fokus; der Rahmen zeigt dann, worauf der Sprung ging. */
.shop-hinweis-warnung { margin: 0; padding: 18px 20px; background: #FDF4E7; border: 1px solid #E8C89A; font-size: 17px; line-height: 1.6; color: var(--text-body); }
.shop-hinweis-warnung.is-fehler { border-color: var(--drk-red); border-left-width: 4px; }
.shop-hinweis-warnung:focus { outline: 3px solid var(--drk-dark-blue); outline-offset: 2px; }
.shop-fussnote { margin: 18px 0 0; font-size: 15px; line-height: 1.6; color: var(--drk-grey-600); max-width: 66ch; }

/* „Gewählt“ – derselbe grüne Haken an Geräte- und Paketkarten. */
.wahl-haken { display: inline-flex; align-items: center; gap: 6px; flex: none; font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: #1F5C22; }
.wahl-haken-kreis { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--color-success); color: #fff; font-size: 13px; }

/* Gerätekarten: große Karten mit Bildfläche im Format 4:3. */
.geraet-gitter { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* Ein einzelnes Gerät ist keine Auswahl, sondern eine Auskunft. Über die ganze
   Spalte gezogen sähe die Karte aus wie ein Banner; sie behält die Breite, die
   sie neben anderen hätte. */
.geraet-gitter-einzeln { grid-template-columns: minmax(0, 280px); }
.geraet-karte { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border-default); transition: border-color var(--dur-base), box-shadow var(--dur-base); }
.geraet-karte:hover { border-color: var(--drk-mid-blue); }
.geraet-karte:focus-within { outline: 3px solid var(--drk-dark-blue); outline-offset: 2px; }
/* Der innere Schatten macht den Rahmen 2 px stark, ohne dass der Inhalt springt. */
.geraet-karte.is-on { border-color: var(--drk-dark-blue); box-shadow: inset 0 0 0 1px var(--drk-dark-blue); }
.geraet-wahl { display: block; padding: 16px; cursor: pointer; }
.geraet-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.geraet-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 22px; }
.geraet-radio { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--drk-grey-400); background: #fff; position: relative; }
.geraet-karte.is-on .geraet-radio { border-color: var(--drk-dark-blue); }
.geraet-karte.is-on .geraet-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--drk-dark-blue); }
.geraet-bild { display: flex; align-items: center; justify-content: center; margin-top: 12px; width: 100%; aspect-ratio: 4 / 3; background: var(--drk-grey-100); }
.geraet-bild img { width: 100%; height: 100%; object-fit: contain; }
.geraet-bild-leer { display: flex; color: var(--drk-grey-400); }
.geraet-name { display: block; margin-top: 12px; font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--text-heading); }
.geraet-satz { display: block; margin-top: 6px; font-size: 17px; line-height: 1.55; color: var(--text-body); }
.geraet-details { align-self: flex-start; margin: auto 16px 12px; min-height: 44px; padding: 10px 0; background: none; border: 0; font: inherit; font-family: var(--font-ui); font-weight: 700; font-size: 16px; color: var(--drk-dark-blue); text-align: left; text-decoration: underline; cursor: pointer; }
.geraet-details:hover { color: var(--drk-red); }

/* Paketkarten: Fahne, großer Preis, Leistungen, Knopf am Fuß. */
/* Ohne align-items: stretch (die Voreinstellung) behielte jede Karte ihre eigene
   Höhe, und die Kacheln einer Reihe endeten auf verschiedenen Linien – beim
   empfohlenen Paket zusätzlich versetzt, weil die Fahne oben Platz nimmt. Die
   Karte ist innen eine Flexspalte mit flex: 1 am Inhalt, der Knopf sitzt also
   von selbst am Fuß, sobald die Karte die Reihenhöhe bekommt. */
.paket-gitter { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* Genau vier Pakete passen in der breiten Spalte nicht in eine Reihe, ohne dass
   Preis und Leistungsliste zerfleddern. Drei nebeneinander und das vierte allein
   darunter sieht nach Versehen aus – also zwei Reihen zu zweit. Kennt ein alter
   Browser :has() nicht, bleibt es beim Umbruch nach dreien; kaputt ist nichts. */
.paket-gitter:has(> :last-child:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.paket-karte { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border-default); overflow: hidden; transition: border-color var(--dur-base), box-shadow var(--dur-base); }
.paket-karte.is-empfohlen { border-color: var(--drk-dark-blue); box-shadow: inset 0 0 0 1px var(--drk-dark-blue); }
.paket-karte.is-on { border-color: var(--color-success); box-shadow: inset 0 0 0 1px var(--color-success); }
.paket-fahne { margin: 0; padding: 8px 16px; background: var(--drk-dark-blue); color: #fff; font-family: var(--font-ui); font-size: 15px; font-weight: 700; text-align: center; }
.paket-inhalt { display: flex; flex-direction: column; flex: 1; padding: 20px; }
/* Name und „Gewählt“ stehen nebeneinander, solange Platz ist. Stehen drei oder
   vier Pakete in einer Reihe, wird die Karte schmal – und weil „Sicherheitspaket“
   ein einziges langes Wort ist, schrumpfte die Überschrift nicht mit (min-width
   ist bei Flex-Elementen voreingestellt auf auto, also mindestens die Breite des
   längsten Wortes). Der Haken wurde dadurch aus der Karte geschoben und
   abgeschnitten. Mit wrap rutscht er in so einem Fall unter den Namen. */
.paket-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.paket-name { margin: 0 0 8px; min-width: 0; font-family: var(--font-display); font-weight: 700; font-size: 21px; color: var(--text-heading); }
.paket-preis { margin: 0 0 2px; font-family: var(--font-display); font-weight: 900; font-size: 32px; line-height: 1.1; color: var(--text-heading); }
.paket-preis sup { font-size: 18px; }
.paket-preis-sub { margin: 0 0 4px; font-size: 17px; color: var(--text-body); }
.paket-kasse { margin: 0 0 4px; font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--drk-dark-blue); }
.paket-note { margin: 0 0 10px; font-size: 15px; color: var(--drk-grey-600); }
.paket-leistungen { list-style: none; margin: 6px 0 16px; padding: 0; display: grid; gap: 10px; }
.paket-leistungen li { display: flex; gap: 10px; font-size: 16px; line-height: 1.5; color: var(--text-body); }
.paket-leistungen li::before { content: "✓"; color: var(--color-success); font-weight: 700; }
.paket-weg { margin: 0 0 16px; padding: 12px 14px; background: var(--drk-light-blue); font-size: 16px; line-height: 1.5; color: var(--text-body); }
.paket-btn { width: 100%; margin-top: auto; }

/* Aufklapper „Was ist im Paket enthalten?“ */
.shop-aufklapper { margin: 20px 0 0; background: #fff; border: 1px solid var(--border-default); }
.shop-aufklapper-knopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 14px 18px; background: transparent; border: 0; font: inherit; font-family: var(--font-ui); font-size: 17px; font-weight: 700; color: var(--drk-dark-blue); text-align: left; cursor: pointer; }
.shop-aufklapper-knopf:hover { color: var(--drk-red); }
.shop-aufklapper-knopf:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.shop-aufklapper-pfeil { font-size: 18px; transition: transform var(--dur-fast); }
.shop-aufklapper-pfeil.is-offen { transform: rotate(180deg); }
.shop-aufklapper-inhalt { padding: 0 18px 18px; }
.shop-aufklapper-inhalt dl { margin: 0; }
.shop-aufklapper-inhalt dl > div { padding: 14px 0; border-top: 1px solid var(--border-subtle); }
.shop-aufklapper-inhalt dt { font-size: 17px; font-weight: 700; color: var(--text-strong); }
.shop-aufklapper-inhalt dd { margin: 4px 0 0; font-size: 17px; line-height: 1.6; color: var(--text-body); }

/* Zubehör: Liste zum Ankreuzen, nichts ist vorbelegt. */
.zubehoer-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.zubehoer-zeile { display: flex; align-items: flex-start; gap: 14px; padding: 16px; background: #fff; border: 1px solid var(--border-default); cursor: pointer; transition: border-color var(--dur-base), box-shadow var(--dur-base); }
.zubehoer-zeile:hover { border-color: var(--drk-mid-blue); }
.zubehoer-zeile:focus-within { outline: 3px solid var(--drk-dark-blue); outline-offset: 2px; }
.zubehoer-zeile.is-on { border-color: var(--drk-dark-blue); box-shadow: inset 0 0 0 1px var(--drk-dark-blue); }
.zubehoer-zeile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.zubehoer-kasten { flex: none; width: 22px; height: 22px; margin-top: 2px; border: 2px solid var(--drk-grey-400); background: #fff; position: relative; }
.zubehoer-zeile.is-on .zubehoer-kasten { border-color: var(--drk-dark-blue); background: var(--drk-dark-blue); }
.zubehoer-zeile.is-on .zubehoer-kasten::after { content: ""; position: absolute; left: 5px; top: 0; width: 6px; height: 12px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.zubehoer-text { flex: 1; min-width: 0; font-size: 17px; line-height: 1.5; color: var(--text-body); }
.zubehoer-text strong { display: block; color: var(--text-strong); }
.zubehoer-preis { flex: none; font-family: var(--font-ui); font-size: 17px; font-weight: 700; color: var(--drk-dark-blue); white-space: nowrap; }
.zubehoer-zeile.is-included { cursor: default; background: var(--drk-grey-100); }
.zubehoer-zeile.is-included .zubehoer-preis { color: var(--color-success); }

/* Produktdetailseite (PDP) als Vollbild-Overlay */
.pdp { position: fixed; inset: 0; z-index: 1000; background: #fff; overflow-y: auto; display: none; }
.pdp.open { display: block; }
body.pdp-lock { overflow: hidden; }
.pdp-bar { position: sticky; top: 0; z-index: 3; background: #fff; border-bottom: 1px solid var(--border-subtle); }
.pdp-bar-in { max-width: 1000px; margin-inline: auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pdp-back { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; font-family: var(--font-ui); font-weight: 800; font-size: 15px; color: var(--drk-dark-blue); cursor: pointer; padding: 8px 0; }
.pdp-back:hover { color: var(--drk-red); }
.pdp-crumb { font-size: 14px; color: var(--text-muted); font-family: var(--font-ui); }
.pdp-main { max-width: 1000px; margin-inline: auto; padding: 28px 24px 48px; }
.pdp-top { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.pdp-media { background: radial-gradient(120% 120% at 60% 15%, var(--drk-light-blue) 0%, var(--drk-grey-bg) 72%); border-radius: 18px; padding: 30px; display: flex; align-items: center; justify-content: center; min-height: 300px; }
.pdp-photo, .pdp-video { max-width: 100%; max-height: 340px; object-fit: contain; border-radius: 8px; }
.pdp-photo { filter: drop-shadow(0 16px 28px rgba(0,0,0,.16)); }
.pdp-media-ph { color: var(--drk-grey-400); }
.pdp-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pdp-thumb { width: 64px; height: 64px; border-radius: 10px; border: 2px solid var(--border-subtle); background: var(--drk-grey-100); overflow: hidden; cursor: pointer; padding: 0; position: relative; }
.pdp-thumb.is-on { border-color: var(--drk-red); }
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumb-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0,0,0,.35); font-size: 18px; }
.pdp-maker { font-family: var(--font-ui); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--drk-red); margin: 0 0 6px; }
.pdp-title { font-family: var(--font-heading); font-weight: 900; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.1; color: var(--drk-black); margin: 0 0 6px; }
.pdp-modell { font-size: 15px; color: var(--text-muted); margin: 0 0 16px; }
.pdp-price { display: flex; align-items: baseline; gap: 8px; margin: 0 0 18px; }
.pdp-price strong { font-family: var(--font-heading); font-size: 32px; font-weight: 900; color: var(--drk-black); }
.pdp-price small { font-size: 15px; color: var(--text-muted); font-weight: 600; }
.pdp-benefits { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.pdp-benefits li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--drk-grey-700); }
.pdp-benefits .chk { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--drk-red); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.pdp-cta { width: 100%; }
.pdp-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.pdp-chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-ui); font-size: 14px; font-weight: 700; padding: 7px 12px; border-radius: var(--radius-pill); background: var(--drk-grey-100); color: var(--drk-dark-blue); border: 1px solid var(--border-subtle); text-decoration: none; }
.pdp-chip.gkv { background: var(--drk-light-blue); border-color: var(--drk-light-blue); }
.pdp-sections { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; margin-top: 36px; padding-top: 30px; border-top: 1px solid var(--border-subtle); }
.pdp-sections h3 { font-family: var(--font-heading); font-weight: 900; font-size: 21px; color: var(--drk-black); margin: 0 0 14px; }
.pdp-desc p { font-size: 16px; line-height: 1.65; color: var(--text-body); margin: 0; }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table tr { border-bottom: 1px solid var(--border-subtle); }
.spec-table th { text-align: left; font-family: var(--font-ui); font-weight: 700; font-size: 15px; color: var(--text-muted); padding: 11px 12px 11px 0; vertical-align: top; width: 46%; }
.spec-table td { font-size: 15.5px; color: var(--text-strong); padding: 11px 0; font-weight: 600; }
.spec-empty { font-size: 14px; color: var(--text-muted); font-style: italic; }
@media (max-width: 860px) {
  .pdp-top { grid-template-columns: 1fr; gap: 22px; }
  .pdp-media { order: -1; min-height: 220px; }
  .pdp-sections { grid-template-columns: 1fr; gap: 24px; }
}

/* Notfallkontakte (Schritt 4) – Karte mit grauer Kopfleiste (Design-Handoff) */
.nf-list { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }
.nf-card { background: #fff; border: 1px solid var(--border-default); }
.nf-card:focus { outline: 2px solid var(--drk-dark-blue); outline-offset: 2px; }
.nf-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0;
  padding: 14px 18px; background: #F5F4F1; border-bottom: 1px solid var(--border-default);
}
.nf-rang { font-family: var(--font-ui); font-size: 16px; font-weight: 700; color: var(--drk-dark-blue); }
.nf-order { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.nf-body { padding: 18px; }
.nf-pfeil {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px;
  background: transparent; border: 1px solid var(--border-default); color: var(--drk-dark-blue);
  font-size: 13px; cursor: pointer;
}
.nf-pfeil:hover { border-color: var(--drk-dark-blue); }
.nf-pfeil:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.nf-weg {
  min-height: 44px; padding: 0 12px; background: transparent; border: 0; font: inherit;
  font-family: var(--font-ui); font-size: 16px; font-weight: 700; color: var(--text-link); cursor: pointer;
}
.nf-weg:hover { color: var(--drk-red); }
.nf-add { margin: 16px 0 0; }
.nf-self { margin: 18px 0 0; }
.nf-self .btn { width: 100%; max-width: 420px; }
.nf-self-hint { margin: 12px 0 24px; font-size: 16px; line-height: 1.6; color: var(--drk-grey-600); }
.field select { width: 100%; height: 50px; padding: 12px 14px; font-family: var(--font-body); font-size: 16px; color: var(--text-strong); background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.field select:focus { border-color: var(--drk-dark-blue); box-shadow: var(--shadow-focus); outline: none; }
.field select[aria-invalid="true"] { border-color: var(--drk-red); }
.shop-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 640px) {
  .shop-grid-3 { grid-template-columns: 1fr; }
  .nf-order { margin-left: 0; width: 100%; }
}

.shop-final { margin-top: 4px; padding: 18px 20px; background: var(--drk-light-blue); border-left: 4px solid var(--drk-red); border-radius: var(--radius-md); font-size: 15px; color: var(--drk-dark-blue); }
.shop-final strong { color: #000; }
@media (max-width: 640px) {
  .v-kv { grid-template-columns: 1fr; gap: 2px 0; }
  .v-kv dd { margin-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .shop-step-seg, .geraet-karte, .paket-karte, .wahl-karte,
  .zubehoer-zeile, .shop-aufklapper-pfeil { transition: none; }
}

@media print {
  .site-header,
  .hero,
  .section-subtle,
  .section-info,
  .closing,
  .site-footer,
  .mobile-cta,
  .cta-box,
  .ergebnis-aktionen,
  .check-nav,
  .angehoerige-cta,
  #so-funktionierts,
  #ergebnis,
  #module,
  #vor-ort,
  #einsatzgebiet,
  #faq,
  #kosten,
  #angehoerige,
  #rueckruf { display: none !important; }
  .check-card { box-shadow: none; border: none; padding: 0; }
  .print-kopf { display: block; margin-bottom: 1.2rem; border-bottom: 2px solid var(--drk-red); padding-bottom: 0.8rem; }
}

/* Widerruf und Kündigung (§ 356a, § 312k BGB): zweistufiges Formular.
   Bewusst schlicht – die Seiten müssen ohne Login und ohne Suchen erreichbar
   sein, auch für Menschen, die selten online sind. */
.form-block { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; }
.form-block legend { font-weight: 600; font-size: 17px; margin-bottom: 6px; padding: 0; }
.form-actions { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pruef-liste { margin: 16px 0 20px; display: grid; gap: 0; }
.pruef-row { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--drk-grey-200); }
.pruef-row dt { color: var(--text-muted); font-size: 14px; }
.pruef-row dd { margin: 0; font-size: 16px; }
@media (min-width: 560px) {
  .pruef-row { grid-template-columns: 220px 1fr; gap: 12px; align-items: baseline; }
}
@media print {
  .form-actions, .site-header, .site-footer, .skip-link { display: none; }
}

/* Einstiege zu Widerruf und Kündigung: hervorgehoben und leicht zu finden,
   wie § 356a Abs. 1 S. 3 und § 312k Abs. 2 S. 3 BGB es verlangen. */
.footer-legal-action { font-weight: 600; }
.danke-legal { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--drk-grey-200); font-size: 15px; }

/* ==========================================================================
   Bestellbestätigung mit Terminbuchung (bestellung-danke.html)
   Umsetzung des Design-Handoffs „Bestellbestätigung mit Terminbuchung“.
   Weiß ist die Bühne: keine Schatten, keine Verläufe, keine runden Ecken.
   Grau setzt allein den Terminbereich ab, Rot trägt genau eine Aktion je
   Bildschirm („Verbindlich buchen“). Alle Bedienelemente mindestens 44 px,
   Zeitfenster, Aktionsknöpfe und Eingabefelder 52 px.
   ========================================================================== */

.danke-seite {
  /* Die Kanten- und Flächenwerte des Entwurfs. Sie liegen zwischen den
     globalen Grautönen; hier gelten die Werte des Handoffs. */
  --d-flaeche: #F5F4F1;
  --d-kante: #DCDBD6;
  --d-kante-stark: #CFCEC9;
  --d-text: #36352F;
  --d-text-leise: #565551;
  --d-gruen: #2E7D32;
  --d-gruen-flaeche: #EAF3EA;
  --d-gruen-kante: #C9E0C9;
  --d-gruen-text: #1F5C22;
  --d-blau-flaeche: #EBF5FF;
  --d-blau-kante: #C9DFF5;
  --d-warn: #C77700;
  --d-warn-text: #8A5A12;
  background: #fff;
  color: var(--d-text);
}

/* Der Fokusring des Entwurfs: 3 px Dunkelblau, sichtbar auf jeder Fläche. */
.danke-seite *:focus-visible {
  outline: 3px solid var(--drk-dark-blue);
  outline-offset: 2px;
  box-shadow: none;
}
/* Nach einem Zustandswechsel wandert der Fokus auf die Überschrift, damit
   Screenreader den neuen Stand vorlesen. Dort bleibt der Ring unsichtbar – wie
   überall auf der Seite (siehe [data-focus] oben); getippt wurde ja nichts. */
.danke-seite [data-focus][tabindex="-1"]:focus,
.danke-seite [data-focus][tabindex="-1"]:focus-visible { outline: none; }

.danke-seite a { color: var(--drk-blue); }
.danke-seite a:hover { color: var(--drk-dark-blue); }

/* ---------- Kopfzeile: keine Hauptnavigation, nur Marke, Titel, Telefon ---------- */
.danke-header { background: #fff; border-bottom: 1px solid var(--d-kante); }
.danke-header-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 32px;
}
.danke-header-strich { width: 1px; height: 30px; background: var(--d-kante); flex: none; }
.danke-header-titel {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 19px;
  color: #000;
}
.danke-header-tel { margin: 0 0 0 auto; text-align: right; }
.danke-header-tel span { display: block; font-size: 15px; color: var(--d-text-leise); }
.danke-header-tel a {
  font-size: 20px;
  font-weight: 700;
  color: var(--drk-dark-blue);
  text-decoration: none;
  white-space: nowrap;
}
.danke-header-anruf { display: none; }

/* ---------- Kopfblock ---------- */
.danke-main { max-width: 1180px; margin: 0 auto; padding: 44px 32px 56px; }
.danke-seite [hidden] { display: none !important; }
.danke-vorschau { margin: 0 0 24px; border-radius: 0; }
.danke-kopf { max-width: 760px; }
.danke-marke {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 10px 16px;
  background: var(--d-gruen-flaeche);
  border: 1px solid var(--d-gruen-kante);
  font-size: 17px;
  font-weight: 700;
  color: var(--d-gruen-text);
}
.danke-haken,
.termin-karte-haken {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 50%;
  background: var(--d-gruen);
  color: #fff;
}
.danke-haken { width: 26px; height: 26px; font-size: 16px; }
.danke-h1 {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 38px;
  line-height: 1.2;
  color: #000;
  text-wrap: pretty;
}
.danke-nummer { margin: 0 0 8px; font-size: 19px; line-height: 1.6; }
.danke-nummer strong { font-family: var(--font-heading); font-weight: 700; }
.danke-lead {
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.6;
  max-width: 66ch;
  text-wrap: pretty;
}
.danke-klein { margin: 0 0 8px; font-size: 15px; line-height: 1.6; color: var(--d-text-leise); max-width: 66ch; }
/* Die Zustandstexte bleiben je nach Lage leer – dann darf auch kein Abstand entstehen. */
.danke-lead:empty, .danke-klein:empty, .danke-nummer:empty { display: none; }

/* ---------- Spalten ---------- */
.danke-grid { display: grid; gap: 28px; align-items: start; margin-top: 36px; }
.danke-spalte { min-width: 0; }

/* ---------- Bestellübersicht ---------- */
.danke-uebersicht {
  background: #fff;
  border: 1px solid var(--d-kante);
  border-top: 4px solid var(--drk-dark-blue);
  padding: 22px;
}
.danke-uebersicht h2 {
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  color: #000;
}
.danke-uebersicht-liste {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 10px 16px;
  margin: 0;
}
.danke-uebersicht-liste dt { font-size: 16px; color: var(--d-text-leise); }
.danke-uebersicht-liste dd { margin: 0; font-size: 16px; }
.danke-betrag {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--d-kante);
  font-size: 17px;
}
.danke-betrag-wert {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 24px;
  color: #000;
  white-space: nowrap;
}
.danke-uebersicht .danke-klein { margin: 14px 0 0; }

/* ---------- Fußbereich: der Widerruf gehört sichtbar hierher ---------- */
.danke-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  max-width: 760px;
  margin: 40px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--d-kante);
}
.danke-fuss-kv { margin: 0 auto 0 0; font-size: 16px; color: var(--d-text-leise); }
.danke-fuss-kv a { font-weight: 700; white-space: nowrap; }
.danke-fuss-links { margin: 0; font-size: 16px; }
.danke-fuss-trenner { color: var(--d-text-leise); }

/* ---------- Knöpfe dieser Seite ---------- */
.danke-seite .btn { border-radius: 0; }
.danke-seite .btn-md, .danke-seite .btn-lg { min-height: 52px; font-size: 17px; padding: 14px 22px; }
.danke-seite .btn-sm { min-height: 44px; font-size: 16px; }
/* Sekundär ist hier der Umriss: Rot bleibt der einen Hauptaktion vorbehalten. */
.danke-seite .btn-secondary {
  background: #fff;
  color: var(--drk-dark-blue);
  border: 2px solid var(--drk-dark-blue);
}
.danke-seite .btn-secondary:hover { background: var(--d-blau-flaeche); color: var(--drk-dark-blue); border-color: var(--drk-dark-blue); }
.danke-seite .btn-ghost {
  background: none;
  border: 1px solid transparent;
  color: var(--drk-blue);
  text-decoration: underline;
  font-weight: 700;
}
.danke-seite .btn-ghost:hover { color: var(--drk-dark-blue); background: none; }

/* ---------- Formularfelder dieser Seite ---------- */
.danke-seite .field label { font-size: 16px; }
.danke-seite .field input[type="text"],
.danke-seite .field input[type="tel"],
.danke-seite .field select {
  height: 52px;
  border-radius: 0;
  border-color: var(--d-kante-stark);
  font-size: 17px;
}
.danke-seite .field input:focus, .danke-seite .field select:focus { box-shadow: none; }
.danke-seite .field-help, .danke-seite .field-error { font-size: 15px; }
.danke-seite .checkbox-row { font-size: 17px; }
.danke-seite .form-actions { margin-top: 16px; gap: 12px; }
.danke-seite .form-ok, .danke-seite .form-error { border-radius: 0; font-size: 17px; }

/* ==========================================================================
   Block 1 — Terminbereich (TP6). Grau abgesetzt, Tage als Karten,
   Zeitfenster als gedrückte Knöpfe (aria-pressed), nicht als Radios.
   ========================================================================== */
.termin {
  background: var(--d-flaeche);
  border: 1px solid var(--d-kante);
  padding: 24px;
  margin: 0 0 24px;
}
.startklar { margin: 0; }
.danke-h2 {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.25;
  color: #000;
}
.termin p, .startklar > p { font-size: 17px; line-height: 1.6; max-width: 66ch; }
.termin > p { margin: 0 0 16px; }
.termin-hinweis { margin: 0 0 20px; }

.termin-tage { display: grid; gap: 14px; margin: 0; }
.termin-tag { background: #fff; border: 1px solid var(--d-kante); border-radius: 0; padding: 16px 18px; }
.termin-tag-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 14px;
  margin: 0 0 12px;
  font-weight: 400;
  font-size: inherit;
}
.termin-tag-name { font-family: var(--font-heading); font-weight: 700; font-size: 19px; color: #000; }
.termin-tag-datum { font-family: var(--font-body); font-weight: 400; font-size: 16px; color: var(--d-text-leise); }
/* Kein Lockmittel, sondern ein sachlicher Vorteil: kürzere Anfahrt an diesem Tag. */
.termin-nah {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 4px 10px;
  background: var(--d-blau-flaeche);
  border: 1px solid var(--d-blau-kante);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--drk-dark-blue);
}
.termin-nah img { display: block; }

.termin-fenster-liste { display: flex; flex-wrap: wrap; gap: 10px; }
.termin-fenster {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 16px;
  background: #fff;
  border: 1px solid var(--d-kante-stark);
  border-radius: 0;
  font-family: var(--font-ui);
  font-size: 17px;
  color: var(--d-text);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.termin-fenster:hover { border-color: var(--drk-mid-blue); }
/* Gewählt: 2 px Kante, Innenabstand um 1 px kleiner – so springt nichts. */
.termin-fenster[aria-pressed="true"] {
  padding: 0 15px;
  border: 2px solid var(--drk-dark-blue);
  background: var(--d-blau-flaeche);
  font-weight: 700;
  color: var(--drk-dark-blue);
}

/* Erscheint erst nach der Wahl – kein deaktivierter Knopf, der ins Leere zeigt. */
.termin-buchen {
  margin: 18px 0 0;
  padding: 18px 20px;
  background: var(--d-blau-flaeche);
  border: 1px solid var(--d-blau-kante);
}
.termin-buchen h3 {
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 19px;
  color: var(--drk-dark-blue);
}
.termin-buchen .field-help { margin-bottom: 4px; }

.termin-karte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 0 0 18px;
  padding: 18px 20px;
  background: var(--d-gruen-flaeche);
  border: 1px solid var(--d-gruen-kante);
}
.termin-karte-haken { width: 28px; height: 28px; font-size: 16px; }
.termin-karte-text { min-width: 0; flex: 1 1 200px; }
.termin-karte-datum {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 21px;
  color: #000;
}
.termin-karte-zeit { display: block; margin-top: 4px; font-size: 17px; color: var(--d-text); }
.termin-frage { margin: 16px 0 0; padding: 18px 20px; background: #fff; border: 1px solid var(--d-kante); }
.termin-frage p { margin: 0 0 12px; }

/* ==========================================================================
   Block 2 — Aufgabenliste. Der Stand steht als Wort da, nie nur als Farbe.
   ========================================================================== */
.startklar-stand { margin: 0 0 6px; }
.startklar-ruhe { margin: 0 0 18px; }
.startklar-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.startklar-punkt {
  background: #fff;
  border: 1px solid var(--d-kante);
  border-radius: 0;
  padding: 18px 20px;
}
.startklar-punkt.is-erledigt { border-color: var(--d-gruen-kante); background: #fff; }
.startklar-zeile { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; }
.startklar-marke {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--d-warn);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.is-erledigt .startklar-marke { background: var(--d-gruen); }
.startklar-text { min-width: 0; flex: 1 1 240px; }
.startklar-punkt h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 19px;
  color: #000;
}
.startklar-punkt h3 .optional { font-family: var(--font-body); font-weight: 400; font-size: 16px; color: var(--d-text-leise); }
.startklar-beschreibung { margin: 4px 0 0; font-size: 17px; line-height: 1.55; color: var(--d-text); }
.startklar-status { display: block; margin-top: 8px; font-size: 16px; font-weight: 700; color: var(--d-warn-text); }
.is-erledigt .startklar-status { color: var(--d-gruen-text); }
.startklar-form { margin-top: 16px; }
.startklar-punkt .startklar-form,
.startklar-punkt > p:not(.startklar-beschreibung) { margin-top: 16px; }
.startklar-kontakte { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.startklar-kontakte li { font-size: 17px; line-height: 1.6; }
.startklar-kontakte .btn { margin-top: 8px; }
.form-ok { margin: 8px 0; padding: 10px 12px; border-left: 4px solid var(--d-gruen); background: var(--d-gruen-flaeche); }

/* ---------- Ab hier zweispaltig, die Übersicht bleibt stehen ---------- */
@media (min-width: 1024px) {
  .danke-grid.hat-uebersicht { grid-template-columns: minmax(0, 1fr) 380px; gap: 44px; }
  .danke-grid.hat-uebersicht .danke-uebersicht { position: sticky; top: 24px; }
}

/* ---------- Handy ---------- */
@media (max-width: 767px) {
  .danke-header-inner { gap: 12px; padding: 10px 16px; }
  .danke-header .brand-mark { height: 30px; margin-right: 0; }
  .danke-header .brand-bar, .danke-header .brand-sender, .danke-header-strich, .danke-header-tel { display: none; }
  .danke-header-titel { margin-left: auto; font-size: 16px; }
  .danke-header-anruf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
    border: 1px solid var(--drk-dark-blue);
    text-decoration: none;
  }
  .danke-main { padding: 20px 16px 28px; }
  .danke-h1 { font-size: 27px; }
  .danke-nummer, .danke-lead { font-size: 17px; }
  .danke-h2 { font-size: 21px; }
  .termin { padding: 18px; }
  .startklar-punkt { padding: 16px; }
  .termin-fenster, .startklar-punkt .btn, .termin .btn, .termin-buchen .btn { width: 100%; }
  .termin-fenster-liste { display: grid; }
  .danke-fuss { display: grid; gap: 10px; margin-top: 28px; }
  .danke-fuss-kv { margin: 0; }
}


/* ==========================================================================
   WARTESTELLE – die Seite vor der Bestätigung
   Design-Handoff „Bestellung bestätigen“ (September 2026).

   Dieselbe Adresse wie die Bestellbestätigung oben, aber der Moment davor:
   Die Bestellung ist abgeschickt und wird erst mit dem Klick in der E-Mail
   verbindlich. Rahmen, Farbwerte und Knöpfe kommen deshalb aus `.danke-seite`
   weiter oben – nur der Inhalt ist ein anderer.

   Kein DRK-Rot. Das ist Absicht, keine Auslassung: Hier gibt es keine
   Hauptaktion, die liegt im Postfach. Ein roter Knopf wäre ein Abbruchpfad und
   schickte Leute weg, bevor sie bestätigt haben.
   ========================================================================== */

/* Fortschrittsband: derselbe Baustein wie in der Bestellstrecke, damit die
   Seite nicht wie ein Bruch wirkt – nur steht er hier als Band unter der
   Kopfzeile, und der letzte Abschnitt ist grün statt rot. */
.bes-fortschritt { background: #fff; border-bottom: 1px solid var(--d-kante); }
.bes-fortschritt-inner { max-width: 1180px; margin: 0 auto; padding: 14px 32px; }
.bes-fortschritt .shop-steps { margin: 0; }
.bes-fortschritt .shop-steps-head { font-size: 15px; }
.shop-step-seg.is-final { color: var(--d-gruen-text); }
.shop-step-seg.is-final::before { background: var(--d-gruen); }
.shop-step-seg.is-final .shop-step-marke {
  background: var(--d-gruen); border-color: var(--d-gruen); color: #fff;
}

/* Einspaltig, keine mitlaufende Übersicht: Die Strecke ist zu Ende, und
   solange nichts bestätigt ist, gibt es auch nichts zusammenzufassen. */
.bes-spalte { max-width: 720px; }

/* 1 – Kopfblock: Marke, Überschrift, Zusage */
.bes-marke {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 18px;
  padding: 10px 16px; background: var(--d-blau-flaeche); border: 1px solid var(--d-blau-kante);
}
.bes-marke-zeichen {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: var(--drk-dark-blue); color: #fff; font-size: 15px; font-weight: 700;
}
.bes-marke-text { font-size: 17px; font-weight: 700; color: var(--drk-dark-blue); }
.bes-marke.is-abgelaufen { background: #FFF6E6; border-color: #E8D4A8; }
.bes-marke.is-abgelaufen .bes-marke-zeichen { background: var(--d-warn); }
.bes-marke.is-abgelaufen .bes-marke-text { color: var(--d-warn-text); }

.bes-lead {
  margin: 0 0 28px; font-size: 19px; line-height: 1.6; color: var(--d-text);
  max-width: 66ch; text-wrap: pretty;
}
.bes-h2 {
  margin: 0 0 14px; font-family: var(--font-heading); font-weight: 700;
  font-size: 24px; color: #000;
}

/* 2 – E-Mail-Block. Die Adresse ist das größte Element der Seite, weil sie die
   häufigste Frage beantwortet: in welches Postfach schaue ich? */
.bes-mail {
  background: var(--d-blau-flaeche); border: 1px solid var(--d-blau-kante);
  padding: 22px; margin: 0 0 30px;
}
.bes-mail-titel {
  margin: 0 0 6px; font-family: var(--font-heading); font-weight: 700;
  font-size: 20px; color: var(--drk-dark-blue);
}
.bes-mail-adresse {
  margin: 0 0 4px; font-size: 21px; font-weight: 700; color: #000;
  word-break: break-word;
}
.bes-mail-hinweis { margin: 0; font-size: 16px; color: var(--d-text-leise); }

/* 3 – So geht es weiter */
.bes-schritte { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; }
.bes-schritt {
  display: flex; align-items: flex-start; gap: 14px;
  background: #fff; border: 1px solid var(--d-kante); padding: 18px 20px;
}
.bes-schritt-nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: var(--drk-dark-blue); color: #fff;
  font-family: var(--font-heading); font-weight: 700; font-size: 17px;
}
.bes-schritt-text { min-width: 0; flex: 1; }
.bes-schritt-titel {
  display: block; font-family: var(--font-heading); font-weight: 700;
  font-size: 19px; color: #000;
}
.bes-schritt-satz {
  display: block; margin-top: 4px; font-size: 17px; line-height: 1.55;
  color: var(--d-text);
}

/* 4 – Ihre Bestellung */
.bes-daten { background: #fff; border: 1px solid var(--d-kante); padding: 22px; margin: 0 0 24px; }
.bes-daten-titel {
  margin: 0 0 14px; font-family: var(--font-heading); font-weight: 700;
  font-size: 19px; color: #000;
}
.bes-dl {
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 12px 20px; margin: 0;
}
.bes-dl dt { font-size: 16px; color: var(--d-text-leise); }
.bes-dl dd { margin: 0; font-size: 17px; color: var(--d-text); }
/* Die Referenznummer soll abschreibbar aussehen, nicht wie Fließtext. */
.bes-ref { font-family: var(--font-heading); font-weight: 700; font-size: 19px; color: #000; }
.bes-dd-zusatz { display: block; font-size: 16px; color: var(--d-text-leise); }
.bes-daten-fuss {
  margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--drk-grey-200);
  font-size: 16px; line-height: 1.6; color: var(--d-text-leise);
}

/* 5 – Keine E-Mail erhalten? Die einzige Aktion der Seite, bewusst sekundär. */
.bes-hilfe { background: var(--d-flaeche); border: 1px solid var(--d-kante); padding: 22px; }
.bes-hilfe-titel {
  margin: 0 0 8px; font-family: var(--font-heading); font-weight: 700;
  font-size: 19px; color: #000;
}
.bes-hilfe-text { margin: 0 0 16px; font-size: 17px; line-height: 1.6; color: var(--d-text); max-width: 66ch; }
.bes-hilfe-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.bes-tel { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 17px; color: var(--d-text); }
.bes-tel img { display: block; }
.bes-tel a { font-weight: 700; white-space: nowrap; }
.bes-hilfe-fuss { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--d-text-leise); }

.bes-meldung {
  display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 14px 16px;
  background: var(--d-gruen-flaeche); border: 1px solid var(--d-gruen-kante);
}
.bes-meldung-zeichen {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  background: var(--d-gruen); color: #fff; font-size: 14px;
}
.bes-meldung-text { font-size: 17px; font-weight: 700; color: var(--d-gruen-text); }
.bes-meldung.is-fehler { background: #FFF6E6; border-color: #E8D4A8; }
.bes-meldung.is-fehler .bes-meldung-zeichen { background: var(--d-warn); }
.bes-meldung.is-fehler .bes-meldung-text { color: var(--d-warn-text); }

/* 6 – Abschluss statt rotem Ausgang */
.bes-schluss { margin: 26px 0 0; font-size: 16px; line-height: 1.6; color: var(--d-text-leise); max-width: 66ch; }

@media (max-width: 767px) {
  .bes-fortschritt-inner { padding: 12px 16px; }
  .bes-spalte { max-width: none; }
  .bes-lead { font-size: 17px; }
  .bes-h2 { font-size: 21px; }
  .bes-mail, .bes-daten, .bes-hilfe { padding: 18px; }
  .bes-schritt { padding: 16px; }
  .bes-dl { grid-template-columns: minmax(0, 1fr); gap: 4px 0; }
  .bes-dl dd + dt { margin-top: 12px; }
  .bes-hilfe-zeile { flex-direction: column; align-items: stretch; gap: 14px; }
  .bes-hilfe-zeile .bes-senden { width: 100%; }
}

/* ==========================================================================
   PREIS MIT ANERKANNTEM PFLEGEGRAD
   Der volle Beitrag bleibt stehen und wird durchgestrichen, groß steht der
   Eigenanteil. Der gestrichene Preis ist kein früherer, sondern der, den man
   bis zur Genehmigung wirklich zahlt – deshalb ist er gedämpft, aber lesbar
   und nicht weggeräumt. Der Vorbehalt steht unmittelbar darunter, nicht nur
   in der Fußnote (§ 6 Abs. 1 GKV-Hausnotrufvertrag: kein Eindruck einer
   automatischen Kostenübernahme).
   ========================================================================== */

/* Paketkarte */
.paket-preis.is-kasse { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.paket-preis-alt {
  font-family: var(--font-ui); font-weight: 600; font-size: 20px;
  color: var(--drk-grey-600); text-decoration: line-through;
}
.paket-preis-neu { color: var(--text-heading); }

/* Rechte Zusammenfassung */
.shop-side-preis strong .shop-side-preis-alt {
  font-family: var(--font-ui); font-weight: 600; font-size: 17px;
  color: var(--drk-grey-600); text-decoration: line-through;
}
.shop-side-preis strong .shop-side-preis-neu { font-size: 24px; color: var(--text-heading); }
.shop-side-preis-fuss { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--drk-grey-600); }

/* Leiste auf dem Handy */
.shop-bar-preis strong .shop-bar-preis-alt {
  font-family: var(--font-ui); font-weight: 600; font-size: 15px;
  color: var(--drk-grey-600); text-decoration: line-through;
}
.shop-bar-preis strong .shop-bar-preis-neu { font-size: 21px; color: var(--text-heading); }
/* Der Vorbehalt steht in der eingeklappten Leiste, nicht erst hinter „Einzelheiten“. */
.shop-bar-vorbehalt { font-size: 13px; line-height: 1.35; color: var(--drk-grey-600); }