/*
Theme Name: Brillenheld
Theme URI: https://brillenheld24.de/
Description: Schlankes Theme fuer den Neuverglasungs-Shop brillenheld24.de. Gestaltung "Grosser Blick": gross, ruhig, gut lesbar. Schrift lokal eingebettet, keine externen Aufrufe.
Author: Brillenheld
Version: 2.0.13
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.1
License: GPL v2 or later
Text Domain: brillenheld
*/

/* =========================================================================
   GROSSER BLICK

   Gross, ruhig, gut lesbar - die Kundschaft traegt ueberwiegend Gleitsicht.
   Deshalb 18 px Grundschrift, Knoepfe 56 px hoch, jedes Tippziel mindestens
   44 px. Die Startseite zeigt eine gezeichnete Brille, in deren Glaesern die
   Einstiegspreise stehen; beide Glaeser fuehren in den Konfigurator.

   KIRSCHROT NUR FUER HANDLUNG, AUSWAHL UND PREISE. Wird es breiter
   eingesetzt, kippt der Auftritt Richtung Ausverkauf.

   ALLE KONTRASTE SIND GEMESSEN, nicht geschaetzt: python tools/kontrast.py
   ========================================================================= */

/* ---------------------------------------------------------------- Schrift
   Lexend, variabel, eine Datei fuer alle Gewichte. Lizenz: SIL Open Font
   License 1.1, Lizenztext liegt daneben in fonts/OFL-Lexend.txt.
   Lokal eingebettet: Kein Aufruf an fonts.googleapis.com oder gstatic.com -
   damit verlaesst keine IP-Adresse der Besucher den Server (LG Muenchen I,
   Urteil vom 20.01.2022, Az. 3 O 17493/20).
   ========================================================================== */

@font-face{
  font-family:'Lexend'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(fonts/lexend.woff2) format('woff2');
}

/* ------------------------------------------------------------------ Marken */

:root{
  /* --- Farben. Der Wert dahinter ist der gemessene Kontrast --- */
  --grund:   #FFFFFF;
  --rose:    #FBEFF2;  /* Abschnitte, Glasflaeche, gewaehlte Karte          */
  --tinte:   #1A1A1E;  /* 17,35 auf Weiss - 15,47 auf Rose                   */
  --leise:   #50505A;  /*  7,97 auf Weiss -  7,11 auf Rose                   */
  --kirsch:  #A4133C;  /* Weiss darauf 7,67 - als Text 7,67 / 6,84 auf Rose  */
  --kirsch-tief: #8A0F32; /* Hover der Knoepfe, Weiss darauf noch dunkler    */
  --hellrose:#F6D9E1;  /*  5,82 auf Kirschrot                                */
  --linie:   #E4DEE0;  /* Zierlinie. WCAG 1.4.11 gilt fuer Bedienelemente,
                          nicht fuer Trennstriche.                           */
  --bedien:  #8C7C82;  /*  3,95 auf Weiss - Rand von Bedienelementen (Soll 3) */

  --r:    14px;
  --r-lg: 20px;

  --sans: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0; background:var(--grund); color:var(--tinte);
  font:300 18px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
}

b, strong{ font-weight:600; }
h1, h2, h3{ margin:0; line-height:1.08; letter-spacing:-.025em; font-weight:600; }
h1{ font-size:clamp(2.1rem, 1.4rem + 2.8vw, 3.4rem); letter-spacing:-.04em; }
h2{ font-size:clamp(2rem, 1.3rem + 2.8vw, 3.2rem); }
h3{ font-size:1.3rem; }
p{ margin:0; }

a{ color:inherit; text-underline-offset:3px; }
a:hover{ color:var(--kirsch); }
:focus-visible{ outline:3px solid var(--kirsch); outline-offset:3px; }

img{ max-width:100%; height:auto; }

.wrap{ max-width:1160px; margin:0 auto; padding:0 20px; }

/* Die Kopfzeile klebt oben. Ohne diese Zeile verschwindet das Ziel einer
   Sprungmarke ("#preise") hinter ihr. Der Wert liegt ueber der Kopfhoehe. */
[id]{ scroll-margin-top:84px; }

/* Sprungmarke. Sichtbar erst beim Tabben. */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--tinte); color:#FFF; padding:12px 20px; border-radius:0 0 var(--r) 0;
}
.skip-link:focus{ left:0; color:#FFF; }

/* Unsichtbare Beschriftung fuer Vorleseprogramme. */
.nur-vorlesen{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

/* ----------------------------------------------------------------- Knoepfe
   56 px hoch: eine Stufe groesser als ueblich, bewusst.
   Klassen: btn-primary (Kirschrot, die Handlung), btn-ghost (Rand, die
   zweite Wahl), btn-umkehr (weiss auf Kirschrot-Flaeche). */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:0 28px; border-radius:12px;
  font:500 1.05rem/1.15 var(--sans); text-align:center; text-decoration:none;
  border:2px solid transparent; cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn-primary, .btn-primary:hover{ color:#FFF; }
.btn-primary{ background:var(--kirsch); }
.btn-primary:hover{ background:var(--kirsch-tief); }
.btn-ghost{ background:#FFF; color:var(--tinte); border-color:var(--tinte); }
.btn-ghost:hover{ background:var(--rose); color:var(--tinte); }
.btn-umkehr{ background:#FFF; color:var(--kirsch); }
.btn-umkehr:hover{ background:var(--rose); color:var(--kirsch); }
.btn:focus-visible{ outline:3px solid var(--tinte); outline-offset:3px; }

/* -------------------------------------------------------------- Kopfzeile
   ⚠️ Live-Befund 10.10.2026: Die Regel fuer Navigationslinks ("graue Schrift")
   traf auch den Knopf "Konfigurieren" - graue Schrift auf der alten Knopffarbe, 2,14 : 1. Deshalb
   tragen die Textlinks jetzt eine eigene Klasse (.nav-link), und keine
   Regel trifft mehr alle Links im Kopf. Weiss auf Kirschrot: 7,67. */
.kopf{
  position:sticky; top:0; z-index:50;
  /* Deckend (Tom, 12.10.2026): mit .96 schien die grosse Ueberschrift
     beim Scrollen blass durch die Kopfzeile. */
  background:#FFF; border-bottom:1px solid var(--linie);
}
.kopf-in{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:68px; }
.marke{
  display:inline-flex; align-items:center; min-height:44px;   /* Tippziel */
  font-size:1.4rem; font-weight:300; letter-spacing:-.03em; line-height:1;
  color:var(--tinte); text-decoration:none;
}
.marke span{ font-weight:600; color:var(--kirsch); }
.marke:hover{ color:var(--tinte); }
/* Logo in der Kopfzeile (2.0.13): 44 px hoch, Seitenverhaeltnis aus
   width/height (107 x 48), mobil 40 px. */
.marke-logo img{ display:block; height:44px; width:auto; }
@media (max-width:400px){ .marke-logo img{ height:40px; } }
.nav{ display:flex; align-items:center; gap:4px; }
.nav-link{ display:none; }
.btn-kopf{ min-height:46px; padding:0 18px; font-size:.98rem; }
@media (min-width:860px){
  .nav-link{
    display:inline-flex; align-items:center; min-height:44px; padding:0 14px;
    color:var(--tinte); text-decoration:none; font-weight:400;
  }
  .nav-link:hover{ color:var(--kirsch); }
  .nav-link[aria-current="page"]{ font-weight:600; }
  .btn-kopf{ margin-left:10px; }
}

/* ------------------------------------------------------------------- Hero */
.hero{ padding:32px 0 56px; }
.hero h1{ font-size:clamp(2.5rem, 1.2rem + 6vw, 5.6rem); letter-spacing:-.04em; line-height:1; hyphens:manual; }
.hero h1 .zweit{ font-weight:200; }

/* Die Brille. Die Preise wachsen mit der Zeichnung, nicht mit dem Fenster,
   und brechen nie um ("139,90 €" brach im Entwurf bei 1440 px um). */
.brillenpreis{ position:relative; margin:28px 0 8px; max-width:760px; container-type:inline-size; }
.brille{ display:block; width:100%; height:auto; overflow:visible; }
.brille .fassung{ fill:none; stroke:var(--tinte); stroke-width:7; stroke-linecap:round; stroke-linejoin:round; }
.brille .glasflaeche{ fill:var(--rose); }
.linse{
  position:absolute; top:13%; height:72%; width:32%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; border-radius:40%; text-align:center; line-height:1.15;
}
.linse.links{ left:9%; }
.linse.rechts{ right:9%; }
.linse span{ font-size:clamp(.78rem, 2.5cqi, 1rem); color:var(--leise); white-space:nowrap; }
.linse b{
  font-size:clamp(1.3rem, 6.4cqi, 2.6rem); font-weight:600; color:var(--kirsch);
  letter-spacing:-.03em; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.linse:hover b{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px; }
@media (prefers-reduced-motion:no-preference){
  .brille .glasflaeche{ animation:einsetzen .9s ease-out .3s both; }
  .linse{ animation:einsetzen .6s ease-out .9s both; }
  @keyframes einsetzen{ from{ opacity:0; } to{ opacity:1; } }
}

.hero .lead{ margin-top:20px; font-size:1.15rem; color:var(--leise); max-width:48ch; }
.aktionen{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.aktionen .btn{ flex:1 1 220px; }
@media (min-width:960px){
  .hero{ padding:72px 0 96px; }
  .hero .wrap{ display:grid; grid-template-columns:1fr 1fr; column-gap:56px; align-items:center; }
  .hero h1{ grid-column:1 / -1; }
  .brillenpreis{ grid-column:2; grid-row:2 / span 2; margin:40px 0 0; }
  .hero .lead{ grid-column:1; grid-row:2; margin-top:40px; }
  .aktionen{ grid-column:1; grid-row:3; align-self:start; }
  .aktionen .btn{ flex:0 0 auto; }
}

/* -------------------------------------------------------------- Vertrauen */
.vertrauen{ background:var(--rose); padding:16px 0; }
.vertrauen-liste{ list-style:none; margin:0; padding:0; display:grid; }
/* align-content:start - sonst verteilt das Raster die Resthoehe zwischen
   Symbol und Text, und die Symbole stehen nebeneinander versetzt. */
.vertrauen-liste li{ display:grid; grid-template-columns:36px 1fr; gap:14px; align-content:start; padding:18px 0; border-bottom:1px solid var(--linie); }
.vertrauen-liste li:last-child{ border-bottom:0; }
.vertrauen-liste li > div{ min-width:0; }
.vertrauen-liste svg{ width:32px; height:32px; color:var(--kirsch); }
.vertrauen-liste b{ display:block; font-size:1.1rem; }
.vertrauen-liste p{ color:var(--leise); font-size:1rem; margin-top:2px; }
@media (min-width:960px){
  .vertrauen{ padding:24px 0; }
  .vertrauen-liste{ grid-template-columns:repeat(4, 1fr); gap:28px; }
  .vertrauen-liste li{ grid-template-columns:1fr; border:0; }
}

/* ---------------------------------------------------------------- Kapitel */
section.ablauf, section.schluss{ padding:72px 0; }
.kapitel-kopf{ margin-bottom:32px; max-width:700px; }
.unterzeile{ color:var(--leise); margin-top:10px; font-size:1.1rem; }

.schritte{ list-style:none; margin:0; padding:0; display:grid; gap:28px; }
.schritt{ display:grid; grid-template-columns:56px 1fr; gap:14px; align-content:start; }
.schritt > div{ min-width:0; }
.schritt .nr{ font-size:2.6rem; font-weight:200; line-height:1; color:var(--kirsch); }
.schritt h3{ font-size:1.3rem; margin:6px 0; }
.schritt p{ color:var(--leise); max-width:44ch; }
@media (min-width:960px){
  .schritte{ grid-template-columns:repeat(4, 1fr); }
  .schritt{ grid-template-columns:1fr; }
}

/* Die Formscheibe in Schritt 3: die Glasform, wie der Tracer sie abtastet.
   Reine Zierde, ohne Bewegung und ohne Kirschrot. */
.formscheibe{ display:block; width:100%; max-width:220px; height:auto; margin-top:16px; }
.formscheibe .speichen line{ stroke:var(--linie); stroke-width:1.2; }
.formscheibe .achse{ fill:none; stroke:var(--bedien); stroke-width:1; stroke-dasharray:3 5; }
.formscheibe .reflex{ fill:none; stroke:var(--bedien); stroke-width:1.5; opacity:.45; }
.formscheibe .kontur{ fill:none; stroke:var(--tinte); stroke-width:3; stroke-linejoin:round; }
.formscheibe .mitte{ fill:var(--tinte); }

/* ------------------------------------------------------------ Fragen (2.0.3) */
.fragen{ padding:24px 0 56px; }
.fragen h2{ font-size:clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); margin-bottom:16px; }
.fragen-liste{ display:grid; gap:10px; max-width:820px; }
.frage{ background:#FFF; border:1px solid var(--linie); border-radius:var(--r); }
.frage summary{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:48px; padding:12px 18px; cursor:pointer; font-weight:600; color:var(--tinte); list-style:none; }
.frage summary::-webkit-details-marker{ display:none; }
.frage summary::after{ content:"+"; font-size:1.4rem; line-height:1; color:var(--kirsch); }
.frage[open] summary::after{ content:"\2212"; }
.frage summary:focus-visible{ outline:3px solid var(--kirsch); outline-offset:2px; border-radius:var(--r); }
.frage p{ padding:0 18px 16px; color:var(--leise); max-width:65ch; }

/* --------------------------------------------------------------- CTA-Band */
.cta-band{ background:var(--kirsch); color:#FFF; border-radius:var(--r-lg); padding:40px 24px; display:grid; gap:14px; }
.cta-band h2{ font-size:clamp(1.9rem, 1.2rem + 2.8vw, 3rem); max-width:16ch; }
.cta-band p{ color:var(--hellrose); font-size:1.1rem; }
.cta-band .btn{ justify-self:start; margin-top:8px; }
@media (min-width:960px){ .cta-band{ padding:64px; } }

/* --------------------------------------------------------- Inhaltsseiten */
.seiten-kopf{ padding:24px 0 24px; }
.seiten-kopf .lead{ margin-top:16px; font-size:1.15rem; color:var(--leise); max-width:60ch; }

/* Brotkrume: der Link ist ein volles Tippziel (44 px), nicht nur die
   Schrifthoehe (live waren es 17 px). */
.brotkrumen{ display:flex; flex-wrap:wrap; align-items:center; padding-top:12px; font-size:.95rem; color:var(--leise); }
.brotkrumen a{ display:inline-flex; align-items:center; min-height:44px; color:var(--leise); }
.brotkrumen a:hover{ color:var(--kirsch); }
.brotkrumen span{ margin:0 8px; }

/* Fliesstext aus dem Editor. */
.prose{ max-width:72ch; }
.prose p{ margin:0 0 16px; }
.prose h2{ margin:48px 0 16px; font-size:clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); }
.prose h3{ margin:32px 0 12px; }
.prose ul, .prose ol{ padding-left:1.3em; }
.prose li{ margin-bottom:6px; }
.prose a{ color:var(--kirsch); }
.prose table{ width:100%; border-collapse:collapse; margin:24px 0; }
.prose th, .prose td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--linie); }
.prose th{ font-weight:600; }
/* Breite Inhalte duerfen in sich scrollen, aber nie die Seite schieben. */
.prose .scrollbar{ overflow-x:auto; }
/* Der Konfigurator braucht die volle Breite, nicht die Zeilenlaenge eines
   Fliesstexts. */
.prose:has(.bh-konf){ max-width:none; }
/* Auf der Konfigurator-Seite (und nur dort) ab 1200 px breiter, damit die
   drei Gleitsicht-Stufen neben der Seitenleiste nebeneinander passen. Kopf
   und Fuss gehen mit, damit die Kanten fluchten. */
@media (min-width:1200px){
  body:has(.bh-konf) .wrap{ max-width:1400px; }
}

.karten{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap:16px; }
.karte{
  background:#FFF; border:1px solid var(--linie); border-radius:var(--r); padding:26px;
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
}
/* In einer Karte ist eine H2 eine Kartenueberschrift, keine Kapitelmarke. */
.karte h2{ font-size:1.3rem; }
.karte p{ color:var(--leise); margin-bottom:12px; }
.karte .btn{ margin-top:auto; }

/* -------------------------------------------------------------- Fusszeile
   Links mit 48 px Hoehe - live waren es 33 px. */
.fuss{ border-top:1px solid var(--linie); padding:44px 0 60px; }
.fuss .spalten{ display:grid; gap:24px; }
.fuss-marke{ font-size:1.3rem; letter-spacing:-.03em; margin-bottom:6px; color:var(--tinte); }
.fuss-marke span{ font-weight:600; color:var(--kirsch); }
.fuss-titel{ font-weight:600; margin-bottom:2px; color:var(--tinte); }
.fuss p{ color:var(--leise); }
.fuss .fuss-titel, .fuss .fuss-marke{ color:var(--tinte); }
.fuss a{ display:flex; align-items:center; min-height:48px; text-decoration:none; color:var(--leise); }
.fuss a:hover{ color:var(--kirsch); }
.fuss .fuss-kontakt a{ display:inline-flex; min-height:44px; }
@media (min-width:860px){ .fuss .spalten{ grid-template-columns:2fr 1fr 1.4fr; } }

/* Schmalstes Geraet (320 px): Wortmarke und Kopfknopf etwas enger, die
   Mindesthoehe bleibt. */
@media (max-width:400px){
  .wrap{ padding:0 16px; }
  .marke{ font-size:1.3rem; }
  .btn-kopf{ padding:0 14px; font-size:.95rem; }
}

/* Wer Bewegung abbestellt hat, bekommt keine. */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* ------------------------------------------------- Gutscheincode (2.0.3)
   Klassische Kasse (Shortcode) und Blocks. Im echten WooCommerce NICHT
   geprueft: lokal gibt es weder Warenkorb noch Kasse. */
.bh-gutschein-hinweis, .woocommerce-form-coupon-toggle .woocommerce-info{ color:var(--tinte); font-weight:600; margin:0 0 8px; }
.woocommerce-form-coupon-toggle .woocommerce-info a, .showcoupon{ color:var(--kirsch); }
.checkout_coupon, .woocommerce-cart-form .coupon{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.checkout_coupon input.input-text, .woocommerce-cart-form .coupon input.input-text,
.wc-block-components-totals-coupon input{ min-height:48px; padding:0 14px; border:1px solid var(--linie); border-radius:var(--r); font:inherit; flex:1 1 200px; }
.checkout_coupon input.input-text:focus-visible, .woocommerce-cart-form .coupon input.input-text:focus-visible,
.wc-block-components-totals-coupon input:focus-visible{ outline:3px solid var(--kirsch); outline-offset:1px; }
.checkout_coupon button, .woocommerce-cart-form .coupon button,
.wc-block-components-totals-coupon__button{ min-height:48px; padding:0 20px; border:0; border-radius:var(--r); background:var(--kirsch); color:#FFF; font:inherit; font-weight:600; cursor:pointer; }

/* --------------------------------------------- Fotos (2.0.4, Stockbilder)
   Hero: Foto mit den beiden Preisen auf der freien Flaeche rechts. Die
   Preis-Kaertchen haben einen fast weissen Grund, damit der Kontrast nicht
   vom Foto abhaengt (Tinte/Leise/Kirsch auf Weiss: 17,35 / 7,97 / 7,67). */
.heldfoto{ container-type:inline-size; margin:24px 0 8px; }
.heldfoto-bild{ display:block; width:100%; height:auto; border-radius:var(--r-lg); background:#F5F2F5; }
/* Preisschilder auf den Fingerspitzen (Tom, 12.10.2026, Fassung 4):
   Zipfel mittig, Spitze bei x 50 % / 69 %, y 60 % der Bildflaeche.
   Schrift und Abstaende wachsen mit dem Foto (cqi), Kopfzeile mind. 12 px,
   Preis mind. 20 px. Kontur, Radius und Grund wie die Karten der Seite
   (1px --linie, --r, Weiss), ein weicher Schatten fuer den Halt auf dem Foto.
   Unter 660 px Fotobreite passen zwei lesbare Schilder nicht mit 10 px
   Abstand zwischen die Haende: dann stehen sie unter dem Foto. */
.heldfoto .linse{
  top:auto; right:auto; height:auto; width:max-content; min-height:0;
  bottom:calc(40% + 9px); transform:translateX(-50%);
  background:#FFF; border:1px solid var(--linie); border-radius:var(--r);
  padding:clamp(6px, 1.1cqi, 12px) clamp(10px, 1.7cqi, 18px);
  line-height:1.15; gap:2px;
  box-shadow:0 10px 28px rgba(26,26,30,.12), 0 2px 6px rgba(26,26,30,.06);
}
.heldfoto .linse::after{
  content:""; position:absolute; left:50%; bottom:-7px; width:12px; height:12px; margin-left:-6px;
  background:#FFF; border-right:1px solid var(--linie); border-bottom:1px solid var(--linie);
  transform:rotate(45deg); border-bottom-right-radius:3px;
}
.heldfoto .linse.links{ left:50%; }
.heldfoto .linse.rechts{ left:69%; }
.heldfoto .linse span{ font-size:clamp(12px, 1.75cqi, 15px); color:var(--leise); letter-spacing:.01em; }
.heldfoto .linse b{ font-size:clamp(20px, 3cqi, 30px); }
.heldfoto .linse:hover{ border-color:var(--kirsch); }
.heldfoto .linse:focus-visible{ outline:3px solid var(--kirsch); outline-offset:3px; }
@container (max-width: 659px){
  .heldfoto .linse{ position:relative; display:inline-flex; left:auto !important; bottom:auto; transform:none; min-height:44px; width:calc(50% - 8px); margin-top:12px; padding:10px 12px; box-shadow:none; }
  .heldfoto .linse.rechts{ margin-left:6px; }
  .heldfoto .linse::after{ display:none; }
  .heldfoto .linse span{ font-size:.9rem; }
  .heldfoto .linse b{ font-size:1.5rem; }
}
@media (min-width:960px){
  .heldfoto{ margin:40px 0 0; }
}
/* Layout mit Foto: 960-1199 px eine Spalte, Foto unter Text und Knoepfen
   (gross genug fuer die Schilder); ab 1200 px Foto rechts mit 700 px. */
@media (min-width:960px) and (max-width:1199px){
  .hero-foto .wrap{ display:flex; flex-direction:column; align-items:stretch; }
  .hero-foto .lead{ order:1; margin-top:32px; max-width:60ch; }
  .hero-foto .aktionen{ order:2; }
  .hero-foto .heldfoto{ order:3; max-width:none; margin-top:48px; }
}
@media (min-width:1200px){
  .hero-foto .wrap{ grid-template-columns:minmax(0, 1fr) 700px; column-gap:48px; }
  .hero-foto .heldfoto{ max-width:none; margin-top:40px; }
  .hero-foto .lead{ margin-top:40px; }
  /* Schmale Textspalte: Knoepfe bewusst untereinander, gleich breit. */
  .hero-foto .aktionen{ flex-direction:column; align-items:stretch; max-width:300px; }
  .hero-foto .aktionen .btn{ flex:0 0 auto; justify-content:center; }
}

/* So geht's: Selfie neben der Ueberschrift */
.ablauf-bild{ margin:0 0 24px; }
.ablauf-bild img{ display:block; width:100%; height:auto; border-radius:var(--r-lg); background:var(--rose); }
@media (min-width:960px){
  #ablauf .wrap{ display:grid; grid-template-columns:1fr 420px; column-gap:56px; align-items:start; }
  #ablauf .kapitel-kopf{ grid-column:1; grid-row:1; }
  .ablauf-bild{ grid-column:2; grid-row:1; margin:0 0 32px; }
  #ablauf .schritte{ grid-column:1 / -1; }
}

/* EU-Hinweis gesetzliche Gewaehrleistung (Arno S4, 2.0.11). Das Label ist ein
   amtliches Bild: nur proportional (width:100%, height:auto), nie beschneiden.
   Unter 640 px bleibt es mindestens 595 px breit (Seitenmass der Vorlage =
   Schrift in Originalgroesse) und der Rahmen scrollt waagerecht. */
.bh-gewaehr{ margin:16px 0 0; border:1px solid var(--linie); border-radius:12px; background:var(--grund); }
.bh-gewaehr-titel{ cursor:pointer; padding:12px 16px; min-height:48px; display:flex; align-items:center; font-weight:600; color:var(--tinte); }
.bh-gewaehr-titel:hover{ color:var(--kirsch); }
.bh-gewaehr-inhalt{ padding:0 16px 16px; }
.bh-gewaehr-text{ color:var(--tinte); margin:0 0 10px; }
.bh-gewaehr-rahmen{ overflow-x:auto; max-width:794px; border:1px solid var(--linie); }
.bh-gewaehr-bild{ display:block; width:100%; min-width:595px; max-width:794px; height:auto; }
.bh-gewaehr-links{ margin:10px 0 0; }
.bh-gewaehr-links a{ color:var(--kirsch); text-decoration:underline; display:inline-flex; align-items:center; min-height:44px; }
.fuss .fuss-gewaehr a{ display:inline-flex; color:var(--kirsch); text-decoration:underline; }
.fuss .fuss-gewaehr p{ color:var(--tinte); }