/* =====================================================================
   Reiseapotheken-Konfigurator – Stylesheet
   Design an das FINALE Pharma-Deutschland-Design angeglichen
   (Werte live von pharmadeutschland.de gemessen):
     • Überschriften: Nunito 700, Navy #112f6e
     • Fließtext: Open Sans / Roboto-Fallback
     • Primärfarbe (Marke): #012956 · Buttons/Links: Royalblau #014694
     • Akzent: Cyan #34c9f6 · Button-Hover: Navy #112f6e (0.4s)
   Farben & Schriften werden zentral über CSS-Variablen (:root)
   gesteuert – zum Umfärben einfach die Werte unter "FARBEN" anpassen.
   ===================================================================== */

/* Schriften: Nunito (Überschriften) + RobotoBah (Fließtext, wie Live-Seite).
   Nunito + Open Sans (Fallback) werden zusätzlich in der index.html geladen. */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&family=Open+Sans:wght@300;400;600;700&display=swap');

:root{
  /* ---------- Typo-Skala & Abstände ---------- */
  --text-xs:clamp(.75rem,.7rem + .25vw,.875rem);
  --text-sm:clamp(.875rem,.8rem + .35vw,1rem);
  --text-base:clamp(1rem,.95rem + .25vw,1.0625rem);
  --text-lg:clamp(1.125rem,1rem + .6vw,1.4rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.1vw,2.1rem);
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;
  --space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;
  --radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.625rem;--radius-xl:.75rem;--radius-full:9999px;
  --transition:180ms cubic-bezier(.16,1,.3,1);
}

/* =====================================================================
   FARBEN – Hell-Modus (Pharma-Deutschland-Look)
   Primär = Marineblau #012956, Akzent = Cyan #34c9f6
   ===================================================================== */
:root{
  --bg:#f3f5f8;--surface:#ffffff;--surface-2:#f7fafd;--surface-offset:#e9eef4;
  --border:#d6dee8;--divider:#e4eaf1;
  --text:#012956;--text-muted:#44545c;--text-faint:#5a6b74;--text-inverse:#ffffff;/* text-faint dunkler für WCAG-AA-Kontrast (≈ 5.5:1) */
  --primary:#012956;--primary-hover:#112f6e;--primary-active:#001e40;--primary-soft:#e3edf8;
  --accent:#34c9f6;--accent-soft:#cceafc;
  --warn:#b45309;--warn-soft:#fdf1e2;--warn-border:#f3d9b8;
  --danger:#ef4c67;--danger-soft:#fdeaee;--danger-border:#f8c6d0;
  --ok:#2f7d4f;--ok-soft:#e6f4ec;--ok-border:#c2e2ce;
  --shadow-sm:0 1px 2px rgba(1,41,86,.06);
  --shadow-md:0 4px 14px rgba(1,41,86,.10);
  --shadow-lg:0 16px 40px rgba(1,41,86,.16);
  /* Schriften (Pharma-Deutschland-Look) */
  --font:'RobotoBah','Open Sans','Helvetica Neue',Arial,sans-serif;       /* Fließtext wie Live-Seite */
  --font-heading:'Nunito','Open Sans','Helvetica Neue',Arial,sans-serif;  /* Überschriften */
  --font-footer:'RobotoBah','Open Sans','Helvetica Neue',Arial,sans-serif;/* Footer wie Live-Seite */
  --heading-color:#112f6e;   /* Navy – H1/H2/H3 wie auf der Live-Seite */
  --link:#014694;            /* Royalblau – Links & Buttons */
  --link-hover:#34c9f6;      /* Cyan – Link-Hover */
}

/* =====================================================================
   Grundlagen
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;
  color-scheme:light}
/* ---------------------------------------------------------------------
   Scrollleisten-Ausgleich (nur Desktop) für Info-Seite UND Hauptseite:
   Scrollleiste sichtbar behalten, aber das Springen des zentrierten
   Headers/Logos vermeiden.

   Mechanik: Die vertikale Scrollleiste verschmälert den nutzbaren Bereich und
   verschiebt den über margin:auto zentrierten Inhalt um die halbe Leistenbreite
   nach links. Ein Skript misst die reale Leistenbreite und setzt --sbw; hier
   gleichen wir mit padding-left = --sbw exakt aus (OS-/browserübergreifend, ohne
   feste Pixelannahme). Ist keine Leiste da (kurze Seite/Schritt 1), ist --sbw:0
   -> kein Padding, kein Versatz. Auf der Hauptseite misst das Skript bei jedem
   Schrittwechsel neu (die Höhe ändert sich, Balken kommt/geht). Nur ab 768px –
   Mobil nutzt Overlay-Leisten und braucht keinen Ausgleich.
   Hinweis: Die Scrollleiste bleibt bewusst nativ (inkl. Pfeilen); kein
   ::-webkit-scrollbar-Custom-Styling. */
@media (min-width:768px){
  /* Ausgleich NUR auf die zentrierten Inhalts-Container legen, damit das
     margin:auto-Zentrieren nicht springt. Die vollflächigen Balken
     (Header-/Footer-Hintergrund) bleiben randlos – sonst entstünde links
     am blauen Footer-Balken eine Lücke in Breite der Scrollleiste. */
  html.page-info .header-inner,
  html.page-app .header-inner{padding-left:calc(var(--space-5) + var(--sbw,0px))}
  html.page-info .wrap,
  html.page-app .wrap{padding-left:calc(var(--space-5) + var(--sbw,0px))}
  html.page-info .footer-inner,
  html.page-app .footer-inner{padding-left:var(--sbw,0px)}
}
/* =====================================================================
   RobotoBah = die echte Fließtext-Schrift von pharmadeutschland.de.
   Direkt vom Live-Server geladen (WOFF2), damit der Konfigurator exakt
   wie die Website aussieht. Fallback über local()/Open Sans.
   ===================================================================== */
@font-face{font-family:'RobotoBah';font-style:normal;font-weight:300;font-display:swap;
  src:local('Roboto Light'),local('Roboto-Light'),
  url('https://www.pharmadeutschland.de/_assets/9a793b87472c08e2f03d1786638e1103/dist/fonts/roboto-v20-latin-300.37a706.woff2') format('woff2')}
@font-face{font-family:'RobotoBah';font-style:normal;font-weight:400;font-display:swap;
  src:local('Roboto'),local('Roboto-Regular'),
  url('https://www.pharmadeutschland.de/_assets/9a793b87472c08e2f03d1786638e1103/dist/fonts/roboto-v20-latin-regular.176f8f.woff2') format('woff2')}
@font-face{font-family:'RobotoBah';font-style:italic;font-weight:400;font-display:swap;
  src:local('Roboto Italic'),local('Roboto-Italic'),
  url('https://www.pharmadeutschland.de/_assets/9a793b87472c08e2f03d1786638e1103/dist/fonts/roboto-v20-latin-italic.d022bc.woff2') format('woff2')}
@font-face{font-family:'RobotoBah';font-style:normal;font-weight:500;font-display:swap;
  src:local('Roboto Medium'),local('Roboto-Medium'),
  url('https://www.pharmadeutschland.de/_assets/9a793b87472c08e2f03d1786638e1103/dist/fonts/roboto-v20-latin-500.f5b74d.woff2') format('woff2')}
@font-face{font-family:'RobotoBah';font-style:normal;font-weight:700;font-display:swap;
  src:local('Roboto Bold'),local('Roboto-Bold'),
  url('https://www.pharmadeutschland.de/_assets/9a793b87472c08e2f03d1786638e1103/dist/fonts/roboto-v20-latin-700.c18ee3.woff2') format('woff2')}
body{min-height:100dvh;line-height:1.6;font-family:var(--font);font-size:var(--text-base);color:var(--text);background:var(--bg);
  display:flex;flex-direction:column}
body>main{flex:1 0 auto}
.site-footer{flex-shrink:0}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{line-height:1.2;text-wrap:balance;font-weight:700;
  font-family:var(--font-heading);color:var(--heading-color)}
p{text-wrap:pretty}
button{cursor:pointer;background:none;border:none;transition:all var(--transition)}
a{color:var(--link)}
a:hover{color:var(--link-hover)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--surface) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.header-inner{max-width:1100px;margin:0 auto;padding:var(--space-3) var(--space-5);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.brand{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.brand-mark{flex-shrink:0}
.brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand-text strong{font-size:var(--text-sm);font-weight:700;letter-spacing:-.01em}
.brand-text span{font-size:var(--text-xs);color:var(--text-muted)}
.header-actions{display:flex;align-items:center;gap:var(--space-2)}
.icon-btn{width:46px;height:46px;display:grid;place-items:center;border-radius:var(--radius-md);
  color:var(--primary);border:1px solid transparent;transition:background .15s,color .15s,border-color .15s}
.icon-btn svg{width:28px;height:28px}
.icon-btn:hover{background:var(--surface-offset);color:var(--link);border-color:var(--border)}
.icon-btn:focus-visible{outline:2px solid var(--link);outline-offset:2px}
/* Logo im Header (statt Titel + Dark-Mode-Umschalter) */
.brand-logo{display:inline-flex;align-items:center;line-height:0}
.brand-logo img{height:56px;width:auto;display:block}

/* ---------- Layout ---------- */
.wrap{max-width:1100px;margin:0 auto;padding:var(--space-8) var(--space-5) var(--space-16)}
.hero,.intro{text-align:center;max-width:680px;margin:0 auto var(--space-8)}
.hero h1,.intro h1{font-size:var(--text-xl);letter-spacing:-.02em;margin-bottom:var(--space-3)}
.hero p,.intro p{color:var(--text-muted);font-size:var(--text-base)}
/* Start-Ansicht */
.intro{margin:var(--space-12) auto var(--space-8)}
.intro-actions{display:flex;justify-content:center;margin-top:var(--space-8)}

/* ---------- Stepper ---------- */
.stepper{display:flex;align-items:center;justify-content:center;gap:var(--space-1);
  margin:0 auto var(--space-8);flex-wrap:nowrap;max-width:760px}
.step-pill{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-xs);
  color:var(--text-faint);font-weight:500;
  font-family:inherit;background:none;border:0;padding:var(--space-1) 2px;
  border-radius:var(--radius-full);line-height:1.2;white-space:nowrap}
.step-pill .num{width:26px;height:26px;border-radius:var(--radius-full);display:grid;place-items:center;
  background:var(--surface-offset);color:var(--text-muted);font-weight:700;border:1px solid var(--border);font-size:.8rem;
  transition:background .15s,color .15s,border-color .15s}
.step-pill.active{color:var(--primary)}
.step-pill.active .num{background:var(--primary);color:var(--text-inverse);border-color:var(--primary)}
.step-pill.done .num{background:var(--primary-soft);color:var(--primary);border-color:var(--primary)}
/* Klickbare (bereits besuchte) Schritte */
.step-pill.clickable{cursor:pointer}
.step-pill.clickable:hover{color:var(--primary)}
.step-pill.clickable:hover .num{border-color:var(--primary);color:var(--primary)}
.step-pill.clickable:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* Noch nicht erreichte Schritte: nicht klickbar (auch im Startzustand, in dem
   nur aria-disabled gesetzt ist, bevor showStep() erstmals Klassen vergibt) */
.step-pill.locked,
.step-pill[aria-disabled="true"]{cursor:default}
.step-pill[aria-disabled="true"]:hover{color:var(--text-faint)}
.step-pill.active{cursor:default}
.step-sep{width:18px;height:1px;background:var(--border)}
/* Desktop: größere Schritt-Punkte (mobil bleibt kompakt für eine Zeile) */
@media (min-width:768px){
  .stepper{gap:var(--space-3);flex-wrap:wrap}
  .step-pill{font-size:var(--text-base);gap:var(--space-3);padding:var(--space-1) var(--space-2)}
  .step-pill .num{width:40px;height:40px;font-size:1.05rem}
  .step-sep{width:40px}
}

/* ---------- Card ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm);padding:clamp(var(--space-5),4vw,var(--space-10))}
.panel{display:none;animation:fade .35s var(--transition)}
.panel.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.panel h2{font-size:var(--text-lg);margin-bottom:var(--space-2)}
.panel .sub{color:var(--text-muted);font-size:var(--text-sm);margin-bottom:var(--space-6)}

/* ---------- Formular ---------- */
.field{margin-bottom:var(--space-6)}
.field > label{display:block;font-size:var(--text-sm);font-weight:700;margin-bottom:var(--space-2)}
.field .hint{font-size:var(--text-xs);color:var(--text-faint);margin-top:var(--space-1);font-weight:400}
.control{width:100%;min-height:48px;padding:var(--space-3) var(--space-4);font-size:var(--text-base);
  line-height:1.4;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);
  color:var(--text)}
.control:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
/* Select exakt so hoch wie das Input-Feld: natives Styling zurücksetzen und eigenen Pfeil rechts einsetzen */
select.control{-webkit-appearance:none;-moz-appearance:none;appearance:none;
  padding-right:calc(var(--space-4) + 18px);cursor:pointer;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235a6b74' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--space-4) center}

/* Barrierefrei verstecken (native Select bleibt als Datenquelle im DOM, unsichtbar) */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- Such-Combobox Reiseziel ---- */
.combo{position:relative}
.combo-input-wrap{position:relative}
.combo-input{padding-right:calc(var(--space-4) + 22px);cursor:text}
.combo-toggle{position:absolute;top:0;right:0;height:100%;width:44px;
  display:grid;place-items:center;cursor:pointer;color:var(--text-faint);
  background:none;border:0;border-radius:0 var(--radius-md) var(--radius-md) 0}
.combo-toggle::before{content:"";width:14px;height:14px;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235a6b74' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;transition:transform .18s ease}
.combo.open .combo-toggle::before{transform:rotate(180deg)}
.combo-list{position:absolute;z-index:60;top:calc(100% + 4px);left:0;right:0;
  max-height:320px;overflow-y:auto;margin:0;padding:0 var(--space-2) var(--space-2);list-style:none;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg)}
.combo-list[hidden]{display:none}
.combo-group{padding:var(--space-2) var(--space-3) var(--space-1);
  font-size:var(--text-xs);font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  color:var(--text-faint);position:sticky;top:0;z-index:1;background:var(--surface);
  box-shadow:0 -1px 0 4px var(--surface)}
.combo-group[hidden]{display:none}
.combo-opt{padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);
  font-size:var(--text-base);color:var(--text);cursor:pointer;line-height:1.35}
.combo-opt[hidden]{display:none}
.combo-opt:hover,.combo-opt.active{background:var(--primary-soft);color:var(--primary)}
.combo-opt[aria-selected="true"]{font-weight:600}
.combo-empty{padding:var(--space-3);color:var(--text-muted);font-size:var(--text-sm);text-align:center}
.combo-empty[hidden]{display:none}

.row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
@media(max-width:560px){.row{grid-template-columns:1fr}}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.chip{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);
  border:1px solid var(--border);border-radius:var(--radius-full);font-size:var(--text-sm);
  background:var(--surface-2);color:var(--text-muted);user-select:none}
.chip:hover{border-color:var(--primary);color:var(--text)}
.chip input{display:none}
.chip.sel{background:var(--primary-soft);border-color:var(--primary);color:var(--primary);font-weight:700}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--border)}
.chip.sel .dot{background:var(--accent)}

/* Counter */
.counter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}
@media(max-width:640px){.counter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Schwangerschaft: Merkmal-Schalter (kein Zaehler) */
.schwanger-toggle{display:flex;align-items:center;gap:var(--space-3);
  margin-top:var(--space-4);padding:var(--space-4);
  border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface-2);
  cursor:pointer;transition:border-color .15s,background .15s}
.schwanger-toggle:hover{border-color:var(--accent);background:var(--surface)}
.schwanger-toggle input{position:absolute;opacity:0;width:0;height:0}
.schwanger-box{flex:0 0 auto;width:24px;height:24px;border-radius:var(--radius-sm);
  border:2px solid var(--border);background:var(--surface);position:relative;transition:background .15s,border-color .15s}
.schwanger-box::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;
  border:solid var(--text-inverse);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);
  transition:transform .15s}
.schwanger-toggle input:checked + .schwanger-box{background:var(--primary);border-color:var(--primary)}
.schwanger-toggle input:checked + .schwanger-box::after{transform:rotate(45deg) scale(1)}
.schwanger-toggle input:focus-visible + .schwanger-box{outline:2px solid var(--accent);outline-offset:2px}
.schwanger-text{display:flex;flex-direction:column;gap:2px}
.schwanger-title{font-size:var(--text-sm);font-weight:700;color:var(--text)}
.schwanger-desc{font-size:var(--text-xs);color:var(--text-faint)}
.counter{border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4);background:var(--surface-2);
  display:flex;flex-direction:column}
.counter .clabel{font-size:var(--text-sm);font-weight:700}
/* Beschreibung nimmt mind. zwei Zeilen ein, damit die Zähler aller Karten auf gleicher Höhe sitzen */
.counter .cdesc{font-size:var(--text-xs);color:var(--text-faint);margin-bottom:var(--space-3);
  line-height:1.35;min-height:calc(2 * var(--text-xs) * 1.35)}
/* Zähler-Steuerung immer am unteren Rand der Karte ausrichten */
.counter .cctl{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin-top:auto;
  touch-action:manipulation}
.counter .cctl button{width:34px;height:34px;border-radius:var(--radius-md);border:1px solid var(--border);
  background:var(--surface);font-size:1.1rem;font-weight:700;color:var(--primary);
  /* Doppeltipp-Zoom (iOS Safari) beim schnellen mehrfachen Tippen der +/- Buttons
     unterbinden; Pinch-Zoom der Seite bleibt erhalten. */
  touch-action:manipulation}
.counter .cctl button:hover{background:var(--primary-soft)}
.counter .cval{font-size:var(--text-lg);font-weight:700;min-width:2ch;text-align:center;
  touch-action:manipulation}

/* ---------- Navigations-Buttons (Optik: .m-button__primary) ----------
   Royalblau #014694 · Pill-Form · Weight 600/700 · Hover Navy #112f6e (0.4s) */
.nav-row{display:flex;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-8)}
.btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);
  border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:700;border:1px solid transparent;
  transition:color .4s ease-in-out, background-color .4s ease-in-out, border-color .4s ease-in-out}
.btn-primary{background:var(--link);color:var(--text-inverse)}
.btn-primary:hover{background:var(--primary-hover);color:var(--text-inverse)}
.btn-ghost{background:var(--surface-2);color:var(--text-muted);border-color:var(--border)}
.btn-ghost:hover{color:var(--text);border-color:var(--text-muted)}
.btn[disabled]{opacity:.4;pointer-events:none}

/* ---------- Disclaimer ---------- */
.disclaimer{display:flex;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-lg);
  background:var(--warn-soft);border:1px solid var(--warn-border);font-size:var(--text-sm);color:var(--text);margin-bottom:var(--space-6)}
.disclaimer svg{flex-shrink:0;color:var(--warn);margin-top:2px}

/* ---------- Ergebnisse ---------- */
.result-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-6)}
.result-head h2{font-size:var(--text-xl);letter-spacing:-.02em}
.trip-summary{font-size:var(--text-sm);color:var(--text-muted);margin-top:var(--space-1)}
.result-actions{display:flex;gap:var(--space-2);flex-wrap:wrap;justify-content:flex-end}
/* Obere Aktionsleiste immer rechtsbündig – auch wenn sie umbricht */
.result-head .result-actions{margin-left:auto}
/* Zweite Aktionsleiste unten unter den Quellen mit etwas Abstand, rechtsbündig */
.result-actions-bottom{margin-top:var(--space-5)}

.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:2px var(--space-3);
  border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:700}
.badge-low{background:var(--ok-soft);color:var(--ok)}
.badge-medium{background:var(--warn-soft);color:var(--warn)}
.badge-high{background:var(--danger-soft);color:var(--danger)}
.badge-very-high{background:var(--danger);color:#fff}

.section{margin-bottom:var(--space-10)}
.section-title{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-lg);
  margin-bottom:var(--space-4);padding-bottom:var(--space-2);border-bottom:1px solid var(--divider)}
.section-title .ico{width:34px;height:34px;border-radius:var(--radius-md);display:grid;place-items:center;
  background:var(--primary-soft);color:var(--primary);flex-shrink:0}

/* ---- Aufklappbare Abschnitte (Accordeon) ---- */
.section.collapsible>.section-title{cursor:pointer;-webkit-user-select:none;user-select:none;
  width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--divider);
  font:inherit;color:inherit;align-items:flex-start}
.section.collapsible>.section-title:hover{color:var(--primary)}
.section.collapsible>.section-title:focus-visible{outline:2px solid var(--primary);
  outline-offset:3px;border-radius:var(--radius-sm)}
.section.collapsible>.section-title .acc-titlewrap{flex:1;min-width:0;display:flex;
  flex-direction:column;gap:2px}
.section.collapsible>.section-title .acc-summary{font-size:var(--text-sm);font-weight:400;
  color:var(--text-muted);line-height:1.35}
.section.collapsible>.section-title .acc-chevron{flex-shrink:0;margin-left:var(--space-3);
  color:var(--text-muted);transition:transform .22s ease;margin-top:2px;display:inline-flex}
.section.collapsible>.section-title .acc-chevron svg{width:28px;height:28px}
.section.collapsible.open>.section-title .acc-chevron{transform:rotate(180deg)}
.section.collapsible.open>.section-title .acc-summary{display:none}
.section.collapsible>.acc-body{overflow:hidden;transition:height .24s ease;height:0}
.section.collapsible.open>.acc-body{height:auto}
@media (prefers-reduced-motion:reduce){
  .section.collapsible>.acc-body{transition:none}
  .section.collapsible>.section-title .acc-chevron{transition:none}
}

/* Checkliste */
.cat-block{margin-bottom:var(--space-6)}
.cat-name{font-size:var(--text-sm);font-weight:700;color:var(--text-muted);text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:var(--space-3)}
/* Mengen-Orientierung */
.menge-box{border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--radius-md);
  background:var(--surface-2);padding:var(--space-4);margin-bottom:var(--space-6)}
.menge-head{font-weight:700;color:var(--primary);font-size:var(--text-sm);display:flex;align-items:center;gap:6px;
  margin-bottom:var(--space-2)}
.menge-head svg{width:16px;height:16px}
.menge-kennzahl{font-size:var(--text-base);color:var(--text);margin-bottom:var(--space-2)}
.menge-kennzahl strong{color:var(--primary)}
.menge-gruppe{font-size:var(--text-sm);color:var(--text);background:var(--primary-soft);
  border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);margin-bottom:var(--space-2)}
.menge-hint{font-size:var(--text-xs);color:var(--text-muted);line-height:1.5}
.cat-menge{font-size:var(--text-xs);color:var(--text-muted);font-style:italic;margin:-2px 0 var(--space-3)}
ul[role=list]{list-style:none}
.check-item{display:flex;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-md);
  border:1px solid var(--divider);margin-bottom:var(--space-2);background:var(--surface-2)}
.check-item:hover{border-color:var(--border)}
.check-item .box{width:20px;height:20px;border:2px solid var(--primary);border-radius:5px;flex-shrink:0;margin-top:3px;
  display:grid;place-items:center;cursor:pointer;background:var(--surface)}
.check-item .box.checked{background:var(--primary)}
.check-item .box svg{opacity:0;color:#fff}
.check-item .box.checked svg{opacity:1}
.ci-body{min-width:0;flex:1}
.ci-name{font-weight:700;font-size:var(--text-base)}
.ci-zweck{font-size:var(--text-sm);color:var(--text-muted);margin-top:2px}
.ci-edu{font-size:var(--text-xs);color:var(--text-faint);font-style:italic;margin-top:2px}
.packliste-hinweis{font-size:var(--text-sm);color:var(--text);background:var(--accent-soft);
  border:1px solid var(--primary);border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4);margin-bottom:var(--space-4)}
.ci-tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-2)}
.tag{display:inline-flex;align-items:center;gap:var(--space-1);
  font-size:var(--text-xs);padding:2px var(--space-3);border-radius:var(--radius-full);font-weight:500}
.tag svg{flex-shrink:0;display:block}
.tag-heat{background:var(--warn-soft);color:var(--warn)}
.tag-liquid{background:var(--accent-soft);color:var(--primary)}
.ci-warn{font-size:var(--text-sm);margin-top:var(--space-2);padding:var(--space-2) var(--space-3);
  border-left:3px solid var(--warn);background:var(--warn-soft);border-radius:var(--radius-sm)}
.ci-warn strong{color:var(--warn)}

/* Info-Karten (Zoll/Lager) */
.info-card{border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-5);
  background:var(--surface-2);margin-bottom:var(--space-4)}
.info-card h4{font-size:var(--text-base);margin-bottom:var(--space-2);display:flex;align-items:center;gap:var(--space-2)}
.info-card p,.info-card li{font-size:var(--text-sm);color:var(--text);}
.info-card ul{padding-left:var(--space-5);margin-top:var(--space-2)}
.info-card ul li{margin-bottom:var(--space-1)}

/* Inhaltsseite (z. B. Über diese Reiseapotheke) */
.content-page{max-width:760px;margin:0 auto}
.content-page>h1{font-size:var(--text-xl);letter-spacing:-.02em;margin-bottom:var(--space-3)}
.content-page .lead{font-size:var(--text-base);color:var(--text-muted);margin-bottom:var(--space-6);max-width:60ch}
.content-page .info-card h2{font-size:var(--text-lg);margin:var(--space-5) 0 var(--space-2)}
.content-page .info-card h2:first-child{margin-top:0}
.content-page .info-card p{font-size:var(--text-base);line-height:1.6;margin-bottom:var(--space-3)}
.content-page .info-card p:last-child{margin-bottom:0}

.kvp{display:grid;grid-template-columns:minmax(0,max-content) 1fr;gap:var(--space-2) var(--space-5);font-size:var(--text-sm);align-items:baseline}
.kvp dt{font-weight:700;color:var(--text-muted);overflow-wrap:anywhere}
.kvp dd{margin:0;overflow-wrap:anywhere}
@media(max-width:560px){.kvp{grid-template-columns:1fr}.kvp dt{margin-top:var(--space-2)}}

.alert{display:flex;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);
  font-size:var(--text-sm);margin-top:var(--space-3);margin-bottom:var(--space-4)}
.alert-danger{background:var(--danger-soft);border:1px solid var(--danger-border);color:var(--text)}
.alert-danger svg{color:var(--danger);flex-shrink:0;margin-top:2px}
.alert-warn{background:var(--warn-soft);border:1px solid var(--warn-border);color:var(--text)}
.alert-warn svg{color:var(--warn);flex-shrink:0;margin-top:2px}
.alert-warn ul{margin:var(--space-1) 0 0;padding-left:1.1em}
.alert-success{background:var(--ok-soft);border:1px solid var(--ok-border);color:var(--text)}
.alert-success svg{color:var(--ok);flex-shrink:0;margin-top:2px}
.alert-success ul{margin:var(--space-1) 0 0;padding-left:1.1em}
.alert-danger ul{margin:var(--space-1) 0 0;padding-left:1.1em}

/* ============================================================
   SCHRITT 4 – Opt-in-Karte (Reisewarnungen & Impfempfehlungen)
   ============================================================ */
.optin-card{border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--space-6);background:var(--surface-2)}
.optin-head{display:flex;gap:var(--space-4);align-items:flex-start;margin-bottom:var(--space-5)}
.optin-ico{flex-shrink:0;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--primary-soft);color:var(--primary)}
.optin-head h3{font-size:var(--text-base);margin:0 0 var(--space-1);color:var(--text)}
.optin-head p{font-size:var(--text-sm);color:var(--text-muted);margin:0}

/* Toggle-Switch */
.switch-row{display:flex;align-items:center;gap:var(--space-3);cursor:pointer;
  padding:var(--space-3) var(--space-4);border:1px solid var(--border);
  border-radius:var(--radius-md);background:var(--surface);user-select:none}
.switch-row input{position:absolute;opacity:0;width:0;height:0}
.switch{position:relative;flex-shrink:0;width:44px;height:24px;border-radius:999px;
  background:var(--border);transition:background .25s ease}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;
  border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .25s ease}
.switch-row input:checked + .switch{background:var(--accent)}
.switch-row input:checked + .switch::after{transform:translateX(20px)}
.switch-row input:focus-visible + .switch{outline:2px solid var(--accent);outline-offset:2px}
.switch-label{font-size:var(--text-sm);font-weight:600;color:var(--text)}

.optin-note{display:flex;gap:var(--space-2);margin-top:var(--space-4);
  font-size:var(--text-xs);color:var(--text-faint);line-height:1.5}
.optin-note svg{flex-shrink:0;color:var(--warn);margin-top:1px}

/* ============================================================
   CONSENT-MODAL (Reisewarnungen & Impfempfehlungen)
   ============================================================ */
.modal-overlay{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;
  padding:var(--space-4);background:rgba(1,41,86,.45);backdrop-filter:blur(2px);
  animation:modalFade var(--transition)}
.modal-overlay[hidden]{display:none}
.modal-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);padding:clamp(var(--space-5),4vw,var(--space-8));
  width:100%;max-width:540px;max-height:90vh;overflow-y:auto;
  animation:modalRise var(--transition)}
.modal-actions{margin-top:var(--space-6)}
body.modal-open{overflow:hidden}
@keyframes modalFade{from{opacity:0}to{opacity:1}}
@keyframes modalRise{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .modal-overlay,.modal-box{animation:none}
}
@media print{.modal-overlay{display:none !important}}

/* ============================================================
   ERGEBNIS – Reisewarnungs-Box
   ============================================================ */
.warn-loading{display:flex;align-items:center;gap:var(--space-2);color:var(--text-muted)}
.spinner{width:16px;height:16px;border-radius:50%;border:2px solid var(--border);
  border-top-color:var(--accent);animation:pd-spin .7s linear infinite;display:inline-block}
@keyframes pd-spin{to{transform:rotate(360deg)}}

.warn-box{border-left-width:4px;border-left-style:solid}
.warn-box.warn-ok{border-left-color:var(--ok)}
.warn-box.warn-warn{border-left-color:var(--warn)}
.warn-box.warn-danger{border-left-color:var(--danger)}
.warn-head{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-3)}
.warn-badge{font-size:var(--text-xs);font-weight:700;padding:3px 10px;border-radius:999px;
  text-transform:uppercase;letter-spacing:.02em}
.warn-ok .warn-badge{background:var(--ok-soft);color:var(--ok)}
.warn-warn .warn-badge{background:var(--warn-soft);color:var(--warn)}
.warn-danger .warn-badge{background:var(--danger);color:#fff}
.warn-country{font-size:var(--text-base);font-weight:700;color:var(--text)}
.warn-lead{font-size:var(--text-sm);color:var(--text);margin-bottom:var(--space-3)}
.warn-note{font-size:var(--text-xs);color:var(--text-muted);line-height:1.5;
  padding:var(--space-2) var(--space-3);background:var(--surface-2);
  border-radius:var(--radius-md);margin:0 0 var(--space-3)}
.besonderheit-card{border-left:4px solid var(--primary);background:var(--primary-soft)}
.besonderheit-card p{margin:0;font-size:var(--text-sm);line-height:1.55;color:var(--text)}
.warn-excerpt{font-size:var(--text-sm);color:var(--text-muted);line-height:1.55;
  padding:var(--space-3) var(--space-4);background:var(--surface-2);
  border-radius:var(--radius-md);margin-bottom:var(--space-3)}
.warn-excerpt h2,.warn-excerpt h3{font-size:var(--text-sm);font-weight:700;
  color:var(--text);margin:var(--space-2) 0 var(--space-1)}
.warn-excerpt p{margin:0 0 var(--space-2)}
.warn-excerpt a{color:var(--link);}
.warn-region{margin-bottom:var(--space-3);padding-left:var(--space-3);
  border-left:4px solid var(--primary)}
.warn-region-title{font-size:var(--text-sm);font-weight:700;color:var(--text);
  margin:0 0 var(--space-1)}
.warn-region .warn-excerpt{margin-bottom:0}
.warn-foot{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);
  align-items:center;font-size:var(--text-xs);margin-bottom:var(--space-2)}
.warn-stand{color:var(--text-faint)}
.warn-src{font-size:var(--text-xs);color:var(--text-faint);margin:0}

/* ============================================================
   ERGEBNIS – Impfempfehlungen
   ============================================================ */
.impf-card h4{color:var(--primary)}
.impf-tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-2)}
.impf-tag{display:inline-flex;align-items:center;font-size:var(--text-xs);font-weight:600;
  padding:4px 12px;border-radius:999px;background:var(--primary-soft);color:var(--primary);
  border:1px solid var(--accent-soft)}

/* Zeitzonen-Plan */
.tz-controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-4);margin-bottom:var(--space-5)}
@media(max-width:680px){.tz-controls{grid-template-columns:1fr}}
.tz-table{width:100%;border-collapse:collapse;font-size:var(--text-sm);overflow:hidden;border-radius:var(--radius-md)}
.tz-table th,.tz-table td{padding:var(--space-3) var(--space-4);text-align:left;border-bottom:1px solid var(--divider)}
.tz-table th{background:var(--surface-offset);font-weight:700;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted)}
.tz-table tr:last-child td{border-bottom:none}
.tz-arrow{color:var(--accent);font-weight:700}
.tz-empty{color:var(--text-faint);font-size:var(--text-sm);padding:var(--space-4);text-align:center}

.foot-note{font-size:var(--text-xs);color:var(--text-faint);margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--divider)}
.foot-note a{color:var(--text-muted)}
.src-list{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);margin-top:var(--space-2)}

/* Minimal-Footer im Pharma-Deutschland-Stil (Navy-Hintergrund, weißes Logo) */
.site-footer{background:#112f6e;color:#fff;padding:var(--space-6) var(--space-5);
  font-family:var(--font-footer);font-weight:400}
.footer-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;flex-wrap:wrap;gap:var(--space-4)}
.footer-logo{display:inline-flex;align-items:center;flex-shrink:0}
.footer-logo img{height:46px;width:auto;display:block}
.footer-links{display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--space-2) var(--space-5);font-size:var(--text-sm)}
.footer-links a{color:#fff;font-weight:400;text-decoration:none;
  text-underline-offset:4px;
  transition:color .4s ease-in-out}
.footer-links a:hover,.footer-links a:focus{color:#fff;text-decoration:underline;text-underline-offset:4px}
.footer-version{flex-basis:100%;text-align:center;font-size:var(--text-xs,12px);
  opacity:.6;margin-top:var(--space-3)}
@media (max-width:640px){
  .footer-inner{flex-direction:column;align-items:flex-start}
  .footer-links{gap:var(--space-2) var(--space-4)}
  .footer-version{text-align:left}
}

/* ---------- Druck-Elemente (nur im PDF sichtbar) ---------- */
.print-only{display:none}

/* ---------- Druck ---------- */
@page{
  size:A4;
  /* Ränder links/rechts/oben; unten extra Platz für die wiederkehrende Fußzeile */
  margin:16mm 16mm 26mm 16mm;
}
@media print{
  /* Druck immer in hellem Layout */
  html{
    --bg:#fff;--surface:#fff;--surface-2:#fff;--surface-offset:#f3f3f3;
    --border:#ccc;--divider:#ddd;
    --text:#000;--text-muted:#333;--text-faint:#555;
    --primary:#012956;--primary-soft:#e3edf8;
    --accent:#0a6e97;--accent-soft:#dceefb;
    --warn:#8a4b00;--warn-soft:#fbf3e8;--warn-border:#e6cba0;
    --danger:#a51f3a;--danger-soft:#fbecee;--danger-border:#e3b9be;
    --ok:#2f5e22;--ok-soft:#eef5ea;--ok-border:#c6dcbb;
  }
  .site-header,.stepper,.nav-row,.result-actions,.site-footer,.icon-btn,.no-print,.hero,.intro{display:none!important}
  body{background:#fff;color:#000;display:block;font-size:11pt;line-height:1.5}
  #configurator{display:block!important}
  .card{box-shadow:none;border:none;padding:0}
  .panel{display:none!important}
  #panel-result{display:block!important}
  .check-item,.info-card{break-inside:avoid;border-color:#ccc}
  .section{break-inside:avoid;margin-top:14pt}
  .wrap{padding:0;max-width:100%;margin:0}
  .check-item .box{border-color:#666}
  a{color:#000;text-decoration:none}

  /* Nur-Druck-Elemente einblenden */
  .print-only{display:block}

  /* Kopf: Logo + Titel */
  .print-header{display:flex;align-items:center;gap:14pt;
    padding-bottom:10pt;margin-bottom:14pt;border-bottom:2pt solid var(--primary);
    break-inside:avoid;break-after:avoid}
  .print-logo{height:52px;width:auto}
  .print-title-main{font-family:var(--font-heading);font-weight:700;
    color:var(--primary);font-size:20pt;line-height:1.1}
  .print-title-sub{color:#333;font-size:10.5pt;margin-top:2pt}

  /* Titel & Zusammenfassung stehen bereits im Druck-Kopf – hier ausblenden */
  .result-head{display:none!important}
  /* Interaktive Bedienelemente gehören nicht ins PDF */
  .tz-controls,#tzAdder,select.control,.control{display:none!important}

  /* Überschriften nicht am Seitenende hängen lassen */
  .section-title{break-after:avoid;text-wrap:balance;font-size:13pt}

  /* Aufklappbare Abschnitte im Druck immer vollständig zeigen */
  .section.collapsible>.acc-body{height:auto!important;overflow:visible!important}
  .acc-chevron,.section.collapsible>.section-title .acc-summary{display:none!important}

  /* Optionaler Abschlusstext aus der TXT-Datei */
  .pdf-note{margin-top:18pt;padding-top:10pt;border-top:1pt solid #ccc;
    font-size:9pt;color:#444;line-height:1.45;break-inside:avoid}
  .pdf-note p{margin:0 0 6pt}
  .pdf-note p:last-child{margin-bottom:0}

  /* Sicherheitsabstand am Dokumentende, damit nichts unter die Fußzeile rutscht */
  #panel-result{padding-bottom:10mm}

  /* Wiederkehrende Fußzeile auf jeder Seite */
  .print-footer{position:fixed;left:0;right:0;bottom:-14mm;
    font-size:8pt;color:#555;text-align:left;
    padding-top:4pt;border-top:.5pt solid #ccc}
  .print-footer .print-footer-text::after{content:" · Seite " counter(page) " von " counter(pages);}
}

/* =====================================================================
   EINLEITUNG / EMPOWERMENT (Seite 1 im PDF) – v4.1
   ===================================================================== */
#einleitung .intro-lead{font-size:var(--text-base);line-height:1.65;
  color:var(--text);margin-bottom:var(--space-4);font-weight:500}
#einleitung .intro-body{margin-bottom:var(--space-2);color:var(--text)}
#einleitung .intro-list{list-style:none;padding:0;margin:0 0 var(--space-5) 0;
  display:flex;flex-direction:column;gap:var(--space-3)}
#einleitung .intro-list li{padding-left:var(--space-4);border-left:3px solid var(--accent,#0a5);
  line-height:1.55}
#einleitung .intro-apo{background:var(--surface-2,#f3f6fb);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--space-4) var(--space-5);line-height:1.6;color:var(--text)}
.opt-badge{display:inline-block;margin-left:var(--space-2);
  font-size:var(--text-xs);font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;padding:2px 8px;border-radius:var(--radius-full);
  background:var(--surface-2,#eef2f9);color:var(--muted,#5a5a5a);
  border:1px solid var(--border);vertical-align:middle}