/* Variante B „Klar“ — hell, freundlich, Karten-Layout. Tokens aus design/homepage/README.md */
html[data-theme="klar"]{
  --bg:#f3f8f9; --surface:#ffffff; --surface-2:#ffffff; --line:#d3e3e8;
  --text:#0f2a36; --text-2:#4a616b; --text-3:#4a616b;
  --accent:#0a6c8c; --on-accent:#ffffff; --primary:#0a6c8c; --primary-soft:#dff0f4;
  --action:#ffd24a; --on-action:#0f2a36; --card:#ffffff; --card-line:#ffffff; --img-fallback:#b9dbe4; --error:#c0392b;
  --font-head:"Bricolage Grotesque",system-ui,sans-serif; --font-body:"Figtree",system-ui,sans-serif; --font-mono:"Figtree",sans-serif;
  --r-lg:24px; --r-md:18px; --r-sm:12px; --r-btn:12px; --r-input:12px;
  --pad-x:56px; --sec-gap:72px; --sec-gap-sm:40px;
  --head-pad:18px 32px; --head-pad-m:14px 16px; --nav-active-bg:var(--primary-soft); --menu-btn-bg:#fff; --menu-close-r:12px;
  --hero-overlay:none; --hero-title:#fff; --hero-text:#d6ecf2; --hero-card-bg:#fff; --hero-card-line:#fff; --hero-card-text:#0f2a36; --hero-card-sub:#4a616b;
  --tile-gap:16px; --tile-r:20px; --tile-h:auto; --tile-pad:12px 14px 18px;
  --stat-gap:16px; --stat-bg:#fff; --stat-r:18px; --stat-pad:22px 26px; --stat-value:var(--primary); --stat-border:0;
  --tn-gap:16px; --box-bg:#fff; --box-r:24px; --box-pad:36px; --date-bg:#fff; --date-text:var(--text); --weekly-bg:var(--primary-soft); --weekly-text:var(--text);
  --spot-r:999px; --spot-bg:#fff; --spot-line:#fff;
  --footer-margin:0 16px 16px; --footer-r:24px; --footer-bg:#0f2a36; --footer-text:#fff; --footer-btn-bg:#ffd24a; --footer-btn-text:#0f2a36;
  --step-pad:22px; --step-bg:#fff; --step-border:0;
  --levels-bg:var(--primary-soft); --level-bg:#fff; --form-bg:#fff; --input-bg:var(--bg);
}
/* Kopfzeile als weiße, abgerundete Leiste */
html[data-theme="klar"] .site-header{padding:16px 16px 0}
html[data-theme="klar"] .site-header__inner{background:#fff;border-radius:18px}
html[data-theme="klar"] .brand__name{font-size:20px}
html[data-theme="klar"] .brand__sub{display:none}
/* Hero als Primär-Box + Foto rechts */
html[data-theme="klar"] .hero{min-height:0;padding:16px 16px 0;display:grid;grid-template-columns:1.1fr 1fr;gap:16px;overflow:visible}
html[data-theme="klar"] .hero__bg{display:none}
html[data-theme="klar"] .hero__inner{grid-column:1;flex-direction:column;align-items:flex-start;justify-content:center;gap:24px;min-height:540px;padding:56px;border-radius:24px;background:var(--primary);color:#fff}
html[data-theme="klar"] .hero__photo{display:block;grid-column:2;border-radius:24px;overflow:hidden;min-height:540px}
html[data-theme="klar"] .hero__photo img{width:100%;height:100%;object-fit:cover}
html[data-theme="klar"] .hero .kicker{display:none}
html[data-theme="klar"] .hero__title{font-size:clamp(40px,6.5vw,84px);font-weight:800;line-height:.95;margin:0 0 16px}
html[data-theme="klar"] .hero__lead{color:#d6ecf2;font-size:19px}
html[data-theme="klar"] .hero__next{background:#fff;color:var(--text);border-color:#fff;margin-top:8px}
/* Einstiege als weiße Karten mit Chip */
html[data-theme="klar"] .einstiege{padding-top:var(--sec-gap-sm)}
html[data-theme="klar"] .tile{padding:12px;gap:12px}
html[data-theme="klar"] .tile__img{height:170px;border-radius:14px}
html[data-theme="klar"] .tile__body{padding:0 4px 6px}
html[data-theme="klar"] .tile__chip{display:inline-flex;align-self:flex-start}
html[data-theme="klar"] .tile__title{font-size:24px;font-weight:700}
/* Kennzahlen: weiße Karten */
html[data-theme="klar"] .stats{padding-top:var(--sec-gap-sm)}
html[data-theme="klar"] .stats__grid{padding:0}
html[data-theme="klar"] .stat__value{font-size:34px;font-weight:800}
/* Termine/News-Zeilen */
html[data-theme="klar"] .event-row{background:var(--bg);border-radius:16px;padding:14px;border:0;margin-bottom:10px;grid-template-columns:72px 1fr}
html[data-theme="klar"] .event-row__date{width:72px;height:72px;border-radius:12px}
html[data-theme="klar"] .weekly{background:var(--primary-soft)}
html[data-theme="klar"] .news-grid{grid-template-columns:1fr;gap:14px}
html[data-theme="klar"] .news-card{display:grid;grid-template-columns:104px 1fr;gap:4px 14px}
html[data-theme="klar"] .news-card__img{grid-row:1/4;height:80px;border-radius:12px}
html[data-theme="klar"] .news-card__title{font-size:18px}
/* Tauchplätze als Pillen */
html[data-theme="klar"] .spots__grid{display:flex;flex-wrap:wrap}
html[data-theme="klar"] .spot{padding:14px 22px;font-size:16px;gap:0}
html[data-theme="klar"] .spot__nr{font-size:0}
/* Formular-Button petrol, Umschalter */
html[data-theme="klar"] .btn--ghost{background:rgba(255,255,255,.15);color:#fff}
html[data-theme="klar"] .fact__label{align-self:flex-start}
html[data-theme="klar"] .step__nr{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--primary);color:#fff;font-size:20px}
html[data-theme="klar"] .theme-toggle{background:rgba(15,42,54,.92)}
html[data-theme="klar"] .theme-toggle button[aria-pressed="true"]{background:#ffd24a;color:#0f2a36}
html[data-theme="klar"] .mobile-menu__close{background:var(--text);color:#fff}
html[data-theme="klar"] .mobile-nav>li{background:#fff;border-radius:20px;padding:0 18px;margin-bottom:10px;border:0}
html[data-theme="klar"] .mobile-nav>li>a{font-size:24px;font-weight:800}
html[data-theme="klar"] .mobile-nav__toggle{right:10px}
html[data-theme="klar"] .mobile-nav ul.level_2{display:none;flex-wrap:wrap;gap:8px}
html[data-theme="klar"] .mobile-nav>li.is-open>ul.level_2{display:flex}
html[data-theme="klar"] .mobile-nav ul.level_2 a{border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:14px;font-weight:700;padding:8px 14px}
@media (max-width:1023px){
  html[data-theme="klar"] .hero{grid-template-columns:1fr;padding:0 12px}
  html[data-theme="klar"] .hero__photo{grid-column:1;grid-row:1;min-height:200px;height:200px;border-radius:22px 22px 0 0}
  html[data-theme="klar"] .hero__inner{grid-column:1;grid-row:2;min-height:0;padding:24px 20px 26px;border-radius:0 0 22px 22px}
  html[data-theme="klar"] .site-header{padding:12px 12px 0}
  html[data-theme="klar"] .einstiege__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;overflow:visible}
  html[data-theme="klar"] .einstiege__grid .tile{flex:none;min-height:0}
  html[data-theme="klar"] .tile__img{height:96px}
  html[data-theme="klar"] .tile__title{font-size:17px;hyphens:auto}
  html[data-theme="klar"] .stats__grid{grid-template-columns:1fr 1fr;gap:10px;border:0;overflow:visible}
  html[data-theme="klar"] .stat{border-radius:18px;outline:0}
  html[data-theme="klar"] .site-footer{margin:0 12px 12px}
}