/* ============================================================
   Lokale Schriften (DSGVO: kein Google-CDN, keine Drittanfrage).
   Variable Webfonts, SIL OFL – siehe asset/fonts/*-OFL.txt
   ============================================================ */
@font-face{
  font-family:'Fraunces';
  font-style:normal;font-weight:100 900;font-display:swap;
  src:url('asset/fonts/fraunces-opsz-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces';
  font-style:italic;font-weight:100 900;font-display:swap;
  src:url('asset/fonts/fraunces-opsz-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;font-weight:200 800;font-display:swap;
  src:url('asset/fonts/plus-jakarta-sans-wght-normal.woff2') format('woff2');
}

/* ============================================================
   GKMI FLEX · style.css
   Liquid-Glass-Redesign der gesamten Website.
   ------------------------------------------------------------
   REIN VISUELLER RE-SKIN. Spricht ausschliesslich die bereits
   vorhandenen Klassen/IDs der index.php an. Keine Funktion,
   kein OSBR-Formular, kein Wizard wird veraendert.
   Additiv genutzt: .bg-aura/.aura-orb, .theme-switch,
   .mobile-tabbar/.tab  (Markup additiv in index.php ergaenzt).
   ============================================================ */

/* ====== 1. DESIGN-TOKENS ====== */
:root{
  /* Markenfarben – kraeftig, nur fuer kleine Akzente */
  --c-signal:#C6073D; --c-red:#D4003B; --c-bordeaux:#5C1233; --c-plum:#3C061E;
  --c-gold:#FFCC00;   --c-amber:#F6AC4D; --c-coral:#EE835F;
  --c-rose:#E8526B;   --c-peri:#99A9CB;

  /* Manifest-Icons (Inline-Styles der index.php nutzen diese) */
  --color-launch:#F6AC4D; --color-elevate:#C6073D;
  --color-mastery:#FFCC00; --color-erfolg:#E8526B;

  /* Akzent-Ebenen – per JS pro Kategorie/Paket gesetzt */
  --accent:#FFCC00;        /* kraeftig  – Punkte, Linien, Tags     */
  --accent-bg:#F1E7C9;     /* entsaettigt – Hintergrund-Toenung    */

  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;

  --maxw:1180px; --head-h:74px;
  --r-xl:30px; --r-lg:24px; --r-md:16px; --r-sm:11px;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---- HELL ---- */
[data-theme="light"]{
  --bg:#F8F5F0;
  --ink:#1C1916; --ink-soft:#574F48; --ink-faint:#8E857B;
  --text-muted:#574F48;        /* Inline-Styles der index.php nutzen das */
  --bg-warm:#F8F5F0;

  --glass:rgba(255,255,255,.64);
  --glass-strong:rgba(255,255,255,.82);
  --glass-edge:rgba(255,255,255,.9);
  --glass-hi:rgba(255,255,255,.95);
  --glass-lo:rgba(28,20,14,.06);
  --glass-blur:20px; --glass-sat:118%;

  --hairline:rgba(28,20,14,.08);
  --shadow:0 20px 44px -18px rgba(48,18,30,.18), 0 5px 14px -8px rgba(48,18,30,.1);
  --shadow-soft:0 12px 30px -14px rgba(48,18,30,.12);

  --orb-blend:normal; --orb-o:.75;
}

/* ---- DUNKEL (warmes Fast-Schwarz) ---- */
[data-theme="dark"]{
  --bg:#0C0709;
  --ink:#F2EBE7; --ink-soft:#ABA39C; --ink-faint:#6E665F;
  --text-muted:#ABA39C;
  --bg-warm:#0C0709;

  --glass:rgba(48,28,38,.52);
  --glass-strong:rgba(60,36,48,.68);
  --glass-edge:rgba(255,255,255,.12);
  --glass-hi:rgba(255,255,255,.15);
  --glass-lo:rgba(0,0,0,.5);
  --glass-blur:22px; --glass-sat:118%;

  --hairline:rgba(255,255,255,.08);
  --shadow:0 28px 60px -18px rgba(0,0,0,.78), 0 8px 22px -8px rgba(0,0,0,.6);
  --shadow-soft:0 16px 38px -16px rgba(0,0,0,.6);

  --orb-blend:screen; --orb-o:.4;
}

/* ====== 2. RESET ====== */
*{margin:0;padding:0;box-sizing:border-box}

/* iOS-robustes Höhen-Modell:
   - html/body: 100% reicht für ältere iOS
   - Custom-Property --app-vh wird via JS bei UA-Bug (ältere iOS) gefüllt
   - dvh = dynamic viewport height: zieht beim Ein-/Ausblenden der
     Safari-Adressleiste sauber mit (iOS 15.4+, alle modernen Browser)
   - svh = small viewport height: kleinste mögliche Höhe (Adressleiste sichtbar)
   - lvh = large viewport height: größte mögliche Höhe (Adressleiste verborgen) */
html, body { height: 100%; }
html {
  /* Wenn Nutzer iOS-Text-Resize aktiv hat (z.B. Settings → Display), nicht durcheinander */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Saubere Tap-Reaktion ohne grauen Flash */
  -webkit-tap-highlight-color: transparent;
}
body{
  font-family:var(--font-body);
  background:var(--bg);color:var(--ink);
  line-height:1.6;-webkit-font-smoothing:antialiased;
  /* WICHTIG: body MUSS scrollen damit iOS Safari die Adressleiste minimiert.
     Vorher war hier overflow:hidden – dadurch fehlte das Scroll-Signal. */
  overflow-x: hidden;
  overflow-y: auto;
  /* Verhindert Rubber-Band-Scroll am Wurzel-Body (nur Inhalts-Container scrollen) */
  overscroll-behavior-y: none;
  transition:background-color .5s var(--ease),color .5s var(--ease);
  /* Mindest-Höhe damit Browser die Adressleiste minimiert */
  min-height: 100vh;
  min-height: 100dvh;
}
img{max-width:100%;display:block}
a{
  color:inherit;text-decoration:none;
  -webkit-touch-callout: none;   /* iOS: long-press-Menü auf Links unterdrücken */
}
button{
  font-family:inherit;
  -webkit-tap-highlight-color: transparent;
}
::selection{background:var(--c-signal);color:#fff}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;letter-spacing:-.015em;line-height:1.16}

/* Eingabefelder auf iOS: Auto-Zoom verhindern (Mindest-FontSize 16px = no zoom) */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="password"],
textarea,
select {
  font-size: max(16px, 1rem);
}

/* ====== 3. HINTERGRUND (hell, entsaettigt) ====== */
.page-background{display:none}

.bg-aura{
  position:fixed;
  inset:0;
  /* Explizit volle Höhe damit Aura-Orbs nicht abgeschnitten werden
     wenn iOS Adressleiste umschaltet */
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index:0;overflow:hidden;pointer-events:none;
}
.aura-orb{
  position:absolute;border-radius:50%;filter:blur(95px);
  mix-blend-mode:var(--orb-blend);opacity:var(--orb-o);
  will-change:transform;
  transition:background-color 1.2s var(--ease),opacity .6s var(--ease);
}
.aura-orb.o1{width:58vw;height:58vw;top:-16vw;right:-14vw;
  background-color:#F2E8CE;animation:auraDrift 30s ease-in-out infinite}
.aura-orb.o2{width:62vw;height:62vw;bottom:-24vw;left:-18vw;
  background-color:#F1DEE4;animation:auraDrift 36s ease-in-out infinite reverse}
.aura-orb.o3{width:48vw;height:48vw;top:26%;left:18%;
  background-color:var(--accent-bg);animation:auraDrift2 42s ease-in-out infinite}
.aura-orb.o4{width:46vw;height:46vw;bottom:2%;right:-10vw;
  background-color:var(--accent-bg);animation:auraDrift 34s ease-in-out infinite}
@keyframes auraDrift{0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-5vw,4vw,0) scale(1.1)}}
@keyframes auraDrift2{0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(4vw,5vw,0) scale(.92)}}

/* ====== 4. GLAS-BASIS ====== */
.glass-panel,.premium-card,.about-card,.blog-post-card,.theme-card,
.statement-banner,.package-card{
  position:relative;
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid var(--glass-edge);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow),inset 0 1px 0 var(--glass-hi),inset 0 -1px 2px var(--glass-lo);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),
             background-color .5s var(--ease),border-color .5s var(--ease);
}

/* ====== 5. HEADER ====== */
.fixed-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:90;
  display:flex;justify-content:center;
  /* Safe-Area-Top: bei iPhones mit Notch landet der Header NICHT unter der Statusleiste */
  padding:
    calc(13px + env(safe-area-inset-top, 0px))
    max(clamp(14px,3vw,22px), env(safe-area-inset-right,0px))
    13px
    max(clamp(14px,3vw,22px), env(safe-area-inset-left,0px));
  transition:padding .35s var(--ease);
}
.header-container{
  width:100%;max-width:var(--maxw);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:8px 10px 8px 18px;border-radius:50px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid var(--glass-edge);
  box-shadow:var(--shadow-soft),inset 0 1px 0 var(--glass-hi);
  transition:box-shadow .35s var(--ease),background-color .5s var(--ease);
}
.fixed-header.scrolled .header-container{box-shadow:var(--shadow),inset 0 1px 0 var(--glass-hi)}
.header-logo{height:32px;width:auto;cursor:pointer;transition:transform .3s var(--ease)}
.header-logo:hover{transform:scale(1.05)}

.header-nav{display:flex;align-items:center;gap:2px}
.header-logo-link{display:inline-flex;align-items:center;text-decoration:none;color:inherit}
.nav-link{
  position:relative;cursor:pointer;
  font-size:.9rem;font-weight:500;color:var(--ink-soft);
  padding:8px 14px;border-radius:30px;
  display:inline-flex;align-items:center;gap:6px;
  transition:.25s var(--ease);
  text-decoration:none;
  font-family:inherit;background:transparent;border:none;
}
a.nav-link, a.nav-burger-item { text-decoration:none; }
a.nav-link:visited { color:var(--ink-soft); }
.mobile-tabbar a.tab { text-decoration:none; color:inherit; }
.mobile-sheet-item { text-decoration:none; color:inherit; }
.nav-link:hover{color:var(--ink)}
.nav-link.active-nav{
  color:var(--ink);background:var(--glass-strong);
  box-shadow:inset 0 1px 0 var(--glass-hi);
}
.nav-link.active-nav::after{
  content:'';position:absolute;bottom:3px;left:50%;transform:translateX(-50%);
  width:18px;height:3px;border-radius:3px;background:var(--accent);
  transition:background-color 1s var(--ease);
}
.nav-link .nav-link-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;color:var(--ink-soft);
  flex:0 0 18px;
  transition:color .25s var(--ease);
}
.nav-link .nav-link-icon svg{width:18px;height:18px}
.nav-link.active-nav .nav-link-icon{color:var(--c-bordeaux,#5C1233)}
.nav-link .nav-link-label{display:inline-block}

/* Instagram als runder Button rechts vom Nav */
.header-instagram{
  width:42px;height:42px;flex-shrink:0;
  border:1px solid var(--glass-edge);border-radius:50%;
  background:var(--glass-strong);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 var(--glass-hi);
  display:grid;place-items:center;color:var(--ink);
  transition:.25s var(--ease);
  text-decoration:none;
}
.header-instagram:hover{transform:scale(1.07);color:var(--c-signal,#C6073D)}
.header-instagram svg{width:18px;height:18px;fill:currentColor}

/* Mehrere Social-Icons im Header */
.header-socials{display:flex;align-items:center;gap:8px;flex-shrink:0}
.header-social{
  width:38px;height:38px;flex-shrink:0;
  border:1px solid var(--glass-edge);border-radius:50%;
  background:var(--glass-strong);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 var(--glass-hi);
  display:grid;place-items:center;color:var(--ink);
  transition:.25s var(--ease);text-decoration:none;
}
.header-social svg{width:17px;height:17px;fill:currentColor}
.header-social:hover{transform:scale(1.08);color:var(--c-signal,#C6073D)}
/* Plattform-Hover-Farben (dezent, optional) */
.header-social-youtube:hover{color:#FF0000}
.header-social-facebook:hover{color:#1877F2}
.header-social-linkedin:hover{color:#0A66C2}
.header-social-whatsapp:hover{color:#25D366}

/* Theme-Switch: nicht mehr vorhanden – Klasse trotzdem versteckt für alte Caches */
.theme-switch{display:none !important}

/* ====== 6. VIEWPORT / SPA-VIEWS ======
   WICHTIG (iOS-Safari-Optimierung):
   .app-viewport ist KEIN fixed-Container mehr.
   Sondern: ein normaler Layout-Block. Das Window (also html/body)
   scrollt. Nur so erkennt iOS Safari einen "echten" Scroll und
   blendet die Adressleiste beim Hochscrollen ein. */
.app-viewport{
  position: relative;
  width: 100%;
  /* min-height: damit Hintergrund-Layer sicher die Höhe haben */
  min-height: 100vh;
  min-height: 100dvh;
}

.category-view{
  /* KEIN absolute mehr — normaler Block, Body scrollt */
  position: relative;
  width: 100%;
  /* Safe-Area für iPhones mit Notch / Dynamic Island.
     Oben:   Header-Höhe + Abstand + safe-area-top
     Rechts: dynamisches Padding ODER safe-area-right
     Unten:  96px + safe-area-bottom (Home-Indicator)
     Links:  spiegelbildlich */
  padding:
    calc(var(--head-h) + 26px + env(safe-area-inset-top,0px))
    max(clamp(16px,4vw,26px), env(safe-area-inset-right,0px))
    calc(96px + env(safe-area-inset-bottom,0px))
    max(clamp(16px,4vw,26px), env(safe-area-inset-left,0px));
  display:none;
  /* min-height damit jede View den vollen Viewport füllt (Adressleisten-Effekt) */
  min-height: 100vh;
  min-height: 100dvh;
}
.category-view.active-view{display:block;animation:viewIn .55s var(--ease)}
@keyframes viewIn{
  from{opacity:0;transform:translateY(18px) scale(.994);filter:blur(8px)}
  to{opacity:1;transform:none;filter:none}
}
/* zentrierte Inhaltsbloecke */
.category-view>section,
.workspace-grid-container,
.hero-banner,
.statement-banner,
.premium-footer{max-width:var(--maxw);margin-inline:auto}
.category-view>section{padding-block:32px}

/* ====== 7. BLOBS (alt) deaktiviert ====== */
.blob-container{display:none}

/* ====== 8. HERO ====== */
.hero-banner{padding:40px 0 30px;text-align:center}
.hero-tagline{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:20px;
}
.hero-tagline::before,.hero-tagline::after{
  content:'';width:24px;height:1px;background:var(--accent);
  transition:background-color 1s var(--ease);
}
.hero-title{
  font-size:clamp(1.7rem,5.6vw,4rem);font-weight:500;
  letter-spacing:-.025em;margin-bottom:20px;
  /* Lange deutsche Wörter ("Persönlichkeitsentfaltung") sauber umbrechen */
  hyphens:auto;
  -webkit-hyphens:auto;
  overflow-wrap:break-word;
  word-break:normal;
  text-wrap:balance;
}
.hero-description{
  font-size:1.12rem;color:var(--ink-soft);
  max-width:580px;margin:0 auto 30px;
  text-wrap:pretty;
}

/* Buttons */
.btn-interface-trigger,.btn-primary{
  position:relative;overflow:hidden;cursor:pointer;border:none;
  display:inline-flex;align-items:center;gap:9px;
  font-size:.96rem;font-weight:600;
  padding:15px 32px;border-radius:50px;
  background:var(--c-signal);color:#fff;
  box-shadow:0 14px 30px -12px rgba(198,7,61,.5);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.btn-interface-trigger:hover,.btn-primary:hover{
  transform:translateY(-3px);box-shadow:0 20px 42px -12px rgba(198,7,61,.55);
}
.btn-secondary{
  cursor:pointer;border:1px solid var(--glass-edge);
  display:inline-flex;align-items:center;gap:9px;
  font-size:.96rem;font-weight:600;
  padding:14px 30px;border-radius:50px;
  background:var(--glass-strong);color:var(--ink);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 var(--glass-hi),var(--shadow-soft);
  transition:transform .35s var(--ease);
}
.btn-secondary:hover{transform:translateY(-3px)}
/* Maus-Lichtkegel (script.js setzt --x/--y) */
.class-glow-btn::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120px circle at var(--x,50%) var(--y,50%),
    rgba(255,255,255,.35),transparent 60%);
  opacity:0;transition:opacity .3s var(--ease);
}
.class-glow-btn:hover::before{opacity:1}

/* Parallax-Zoom */
.parallax-zoom-container{
  margin:40px auto 0;max-width:980px;
  display:flex;justify-content:center;overflow:visible;
}
.zoom-parallax-img{
  width:100%;border-radius:var(--r-xl);
  box-shadow:var(--shadow);
  transform-origin:center top;
}

/* ====== 9. STATEMENT-BAND ====== */
.statement-banner{
  margin:46px auto;padding:46px clamp(26px,4vw,44px);
  border-radius:var(--r-xl);
  background:linear-gradient(135deg,var(--c-plum),var(--c-bordeaux));
  border:none;color:#F4ECEF;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.statement-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center;
}
.statement-left h2,.statement-left h3{font-size:1.7rem;line-height:1.24;color:#fff}
.statement-right p,.statement-left p{color:rgba(244,236,239,.82);font-size:1.02rem}
.statement-banner *{color:inherit}

/* ====== 10. SECTIONS ====== */
.section-title{
  font-size:clamp(1.55rem,4vw,2.9rem);font-weight:500;
  text-align:center;margin-bottom:12px;
  hyphens:auto;-webkit-hyphens:auto;
  overflow-wrap:break-word;
  text-wrap:balance;
}
.section-subtitle{
  text-align:center;color:var(--ink-soft);font-size:1.05rem;
  max-width:600px;margin:0 auto 38px;
  text-wrap:pretty;
}

/* ====== 11. KARTEN-GRID (Prinzipien) ====== */
.content-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:22px;margin-top:14px;
}
.premium-card{padding:32px 28px}
.premium-card:hover{transform:translateY(-6px)}
.manifest-icon{
  display:block;width:40px;height:40px;border-radius:12px;margin-bottom:20px;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.4),0 6px 16px -6px rgba(0,0,0,.3);
}
.premium-card h3{font-size:1.26rem;font-weight:600;margin-bottom:9px}
.premium-card p{color:var(--ink-soft);font-size:.96rem}

/* ====== 12. OSB-PAKETE ====== */
.packages-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  max-width:var(--maxw);margin:8px auto 40px;
}
.package-card{
  display:flex;flex-direction:column;
  padding:20px;cursor:pointer;
  --hover-brand-color:var(--c-signal);
}
.package-card:hover{transform:translateY(-6px)}
.package-image-wrapper{
  order:1;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--glass-edge);margin-bottom:16px;
  background:linear-gradient(150deg,var(--glass-strong),var(--glass-lo));
}
.package-img{width:100%;height:auto;display:block}
.package-card::before{ display:none; }
.package-card::after{
  order:2;content:attr(data-note);
  font-size:.8rem;font-weight:500;line-height:1.45;
  color:var(--ink);opacity:.72;white-space:normal;
}
.package-card.active-package{
  border-color:var(--hover-brand-color);
  box-shadow:var(--shadow),inset 0 1px 0 var(--glass-hi),
             0 0 0 1px var(--hover-brand-color),
             0 24px 48px -18px var(--hover-brand-color);
}

/* ====== 13. BUCHUNGS-CONTAINER (Glas, sichtbar inline) ====== */
.booking-form-container{
  max-width:760px;margin:0 auto;
  padding:clamp(22px,3.6vw,40px);
  border-radius:var(--r-xl);
  scroll-margin-top:110px;
  --glow:rgba(198,7,61,.22);
  box-shadow:var(--shadow),inset 0 1px 0 var(--glass-hi),
             0 46px 88px -34px var(--glow);
  transition:box-shadow .7s var(--ease);
}
.booking-form-container.open{
  box-shadow:var(--shadow),inset 0 1px 0 var(--glass-hi),
             0 52px 96px -30px var(--glow);
}
.form-wrapper{width:100%}

/* ====== 14. WORKSPACE / BLOG ====== */
.workspace-grid-container{padding-block:30px}
.workspace-grid-container .section-title{text-align:left}
.blog-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:22px;margin-top:24px;
}
.blog-post-card{display:flex;flex-direction:column;padding:0;overflow:hidden}
.blog-post-card:hover{transform:translateY(-6px)}
.blog-post-thumb{width:100%;height:170px;object-fit:cover;display:block}
.blog-post-inner{display:flex;flex-direction:column;flex:1;padding:22px}
.blog-post-title{font-size:1.2rem;font-weight:600;margin-bottom:9px;line-height:1.3}
.blog-post-teaser{
  color:var(--ink-soft);font-size:.93rem;flex:1;margin-bottom:16px;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden;
}
.blog-readmore{
  align-self:flex-start;display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-family:var(--font-body);font-size:.86rem;font-weight:600;color:var(--accent);
  background:none;border:none;padding:0;transition:gap .25s var(--ease);
}
.blog-readmore svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.blog-readmore:hover{gap:11px}
.blog-readmore:hover svg{transform:translateX(2px)}

/* ====== 15. THEMEN ====== */
.themes-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:20px;margin-top:24px;
}
.theme-card{
  padding:26px 24px;
  display:flex;flex-direction:column;min-height:210px;
  opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease),
             box-shadow .5s var(--ease);
}
.theme-card.visible{opacity:1;transform:none}
.theme-card:hover{transform:translateY(-6px)}
.theme-date{
  font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:12px;
}
.theme-category{
  align-self:flex-start;
  font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:5px 12px;border-radius:30px;margin-bottom:13px;
  background:color-mix(in srgb,var(--accent) 18%,transparent);
  color:#FFFFFF;
  border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
}
/* Wenn der Tag eine eigene Hintergrundfarbe per Inline-Style hat
   (themen.json: tag_color), soll der Text immer weiß bleiben */
.theme-category[style*="background"],
.theme-category[style*="background:"]{
  color:#FFFFFF !important;
  border-color: transparent;
}
.theme-card h3,.theme-card h4{font-size:1.14rem;font-weight:600;margin-bottom:8px;line-height:1.32}
.theme-card p{color:var(--ink-soft);font-size:.92rem;flex-grow:1}

/* ====== 16. UEBER UNS ====== */
.about-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:24px;
}
.about-card{padding:0;overflow:hidden}
.about-card:hover{transform:translateY(-6px)}
.about-image-frame{width:100%;height:230px;overflow:hidden}
.about-img{width:100%;height:100%;object-fit:cover}
.about-info{padding:24px 24px 28px}
.about-role{
  display:block;font-size:.72rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);margin-bottom:6px;
  transition:color 1s var(--ease);
}
.about-info h3{font-size:1.24rem;font-weight:600;margin-bottom:8px}
.about-info p{color:var(--ink-soft);font-size:.93rem}

/* ====== 17. FOOTER ====== */
.premium-footer{
  margin-top:48px;padding-top:46px;
  border-top:1px solid var(--hairline);
}
.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;
  padding-bottom:34px;
}
.footer-logo{height:34px;width:auto;margin-bottom:12px}
.footer-motto{
  font-family:var(--font-display);font-style:italic;font-weight:500;
  color:var(--c-coral);
}
.footer-col h4{
  font-size:.73rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:13px;
}
.footer-col p,.footer-col a{
  display:block;font-size:.88rem;color:var(--ink-soft);margin-bottom:8px;
  transition:color .2s;
}
.footer-col a{cursor:pointer}
.footer-col a:hover{color:var(--ink)}
.footer-bottom{
  border-top:1px solid var(--hairline);
  padding:20px 0 10px;
}
.footer-bottom p{font-size:.78rem;color:var(--ink-faint);text-align:center}

/* ====== 18. MOBILE BOTTOM-BAR (additiv) ====== */
.mobile-tabbar{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(16px + env(safe-area-inset-bottom,0px));
  z-index:95;
  display:none;gap:3px;padding:7px;border-radius:32px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid var(--glass-edge);
  box-shadow:var(--shadow),inset 0 1px 0 var(--glass-hi);
}
.mobile-tabbar .tab{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 12px;border-radius:24px;cursor:pointer;
  background:none;border:none;color:var(--ink-soft);
  transition:.3s var(--ease);position:relative;
}
.mobile-tabbar .tab svg{width:21px;height:21px}
.mobile-tabbar .tab span{font-size:.62rem;font-weight:600;white-space:nowrap;line-height:1.1}
.mobile-tabbar .tab.active{
  color:var(--ink);background:var(--glass-strong);
  box-shadow:inset 0 1px 0 var(--glass-hi);
}
.mobile-tabbar .tab.active::after{
  content:'';position:absolute;top:3px;left:50%;transform:translateX(-50%);
  width:15px;height:3px;border-radius:3px;background:var(--accent);
  transition:background-color 1s var(--ease);
}

/* ====== 18b. HERVORHEBUNGEN (Markenfarben, Textfarbe) ====== */
.hl{font-weight:600}
.hl-signal{color:#C6073D}
.hl-rot{color:#D4003B}
.hl-bordeaux{color:#5C1233}
.hl-plum{color:#3C061E}
.hl-gold{color:#FFCC00}
.hl-amber{color:#F6AC4D}
.hl-koralle{color:#EE835F}
.hl-rose{color:#E8526B}
.hl-peri{color:#99A9CB}
/* Dunkelmodus: die dunklen Toene aufhellen, damit sie lesbar bleiben */
[data-theme="dark"] .hl-signal{color:#FF6B86}
[data-theme="dark"] .hl-rot{color:#FF5C82}
[data-theme="dark"] .hl-bordeaux{color:#D98AA6}
[data-theme="dark"] .hl-plum{color:#CE89AC}

/* ====== 18c. BLOG-POPUP (Liquid-Glass-Overlay) ====== */
body.modal-open{overflow:hidden}
.blog-modal{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;padding:clamp(14px,4vw,40px);
}
.blog-modal.open{display:flex;animation:bmFade .3s var(--ease)}
@keyframes bmFade{from{opacity:0}to{opacity:1}}
.blog-modal-backdrop{
  position:absolute;inset:0;background:rgba(28,16,22,.4);
  -webkit-backdrop-filter:blur(8px) saturate(115%);backdrop-filter:blur(8px) saturate(115%);
  opacity:0;
  animation:bmBackdrop .3s var(--ease) forwards;
}
@keyframes bmBackdrop{from{opacity:0}to{opacity:1}}
[data-theme="dark"] .blog-modal-backdrop{background:rgba(0,0,0,.6)}
.blog-modal-panel{
  position:relative;z-index:1;width:100%;max-width:760px;max-height:88vh;
  display:flex;flex-direction:column;border-radius:var(--r-xl);overflow:hidden;
  animation:bmRise .4s var(--ease);
}
@keyframes bmRise{
  from{opacity:0;transform:translateY(20px) scale(.99)}
  to{opacity:1;transform:none}
}
.blog-modal-close{
  position:absolute;top:14px;right:14px;z-index:3;
  width:40px;height:40px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  padding:0;
  color:var(--ink);background:var(--glass-strong);border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 var(--glass-hi);
  transition:transform .25s var(--ease),background .2s var(--ease);
}
.blog-modal-close svg{
  width:18px;height:18px;display:block;
}
.blog-modal-close:hover{transform:scale(1.08);background:var(--glass-hi)}
.blog-modal-scroll{
  overflow-y:auto;-webkit-overflow-scrolling:touch;padding:clamp(26px,4vw,44px);
  scrollbar-width:thin;
  scrollbar-color:var(--accent) transparent;
}
.blog-modal-scroll::-webkit-scrollbar{width:10px}
.blog-modal-scroll::-webkit-scrollbar-track{
  background:transparent;
  margin:8px 0;
}
.blog-modal-scroll::-webkit-scrollbar-thumb{
  background:var(--glass-lo);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}
.blog-modal-scroll::-webkit-scrollbar-thumb:hover{
  background:var(--accent);
  background-clip:padding-box;
}
.blog-modal-img{
  width:100%;max-height:300px;object-fit:cover;border-radius:var(--r-md);
  margin-bottom:22px;display:none;
}
.blog-modal-title{
  font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:500;
  letter-spacing:-.02em;margin-bottom:20px;padding-right:44px;
}
.blog-post-body{color:var(--ink-soft);font-size:1.02rem;line-height:1.7}
.blog-post-body p{margin-bottom:1em}
.blog-post-body h3,.blog-post-body h4{
  font-family:var(--font-display);color:var(--ink);
  margin:1.4em 0 .5em;font-weight:600;
}
.blog-post-body ul,.blog-post-body ol{margin:0 0 1em 1.4em}
.blog-post-body li{margin-bottom:.4em}
.blog-post-body a{color:var(--accent);text-decoration:underline}
.blog-post-body blockquote{
  border-left:3px solid var(--accent);padding-left:16px;margin:1em 0;
  color:var(--ink);font-style:italic;
}

/* ====== 19. SCROLL-REVEAL ====== */
.js-animate .animate-in{opacity:0;transform:translateY(28px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js-animate .animate-in.visible{opacity:1;transform:none}

/* ====== 20. RESPONSIVE ====== */
@media(max-width:980px){
  .statement-grid{grid-template-columns:1fr;gap:24px}
  .packages-grid,.about-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .header-nav{display:none}
  /* Instagram bleibt sichtbar, etwas kleiner */
  .header-instagram{ width:36px; height:36px; }
  .header-instagram svg{ width:16px; height:16px; }
  .header-socials{ gap:6px; }
  .header-social{ width:34px; height:34px; }
  .header-social svg{ width:15px; height:15px; }
  /* Header-Container: Logo links, Instagram rechts (space-between) */
  .header-container{
    justify-content: space-between;
    padding: 6px 8px 6px 14px;
  }
  .mobile-tabbar{display:flex}
  /* Bottom-Padding = Tabbar-Höhe + Safe-Area (iPhone-Home-Indikator) */
  .category-view{padding-bottom:calc(118px + env(safe-area-inset-bottom,0px))}
  .footer-grid{grid-template-columns:1fr}
}
@media(min-width:821px){.mobile-tabbar{display:none}}
@media(max-width:520px){
  :root{--head-h:64px}
  .hero-banner{padding-top:24px}
  .booking-form-container{padding:22px 16px}
  .premium-card{padding:26px 22px}
}

/* ====== 21. REDUCED MOTION ====== */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .aura-orb{animation:none}
}

/* ============================================================
   Kündigungs-Button im Footer (§ 312k BGB – dezent, aber rot)
   ============================================================ */
.footer-cancel-btn {
  display: inline-block;
  padding: 4px 12px;
  background: var(--c-signal, #C6073D);
  color: #ffffff !important;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85em;
  text-decoration: none !important;
  line-height: 1.4;
  transition: background .15s ease, transform .15s ease;
}
.footer-cancel-btn:hover,
.footer-cancel-btn:focus {
  background: var(--c-bordeaux, #5C1233);
  transform: translateY(-1px);
}

/* ============================================================
   Burger-Menü (runder „…"-Button im Header + Liquid-Glass-Dropdown)
   ============================================================ */
.nav-burger-wrap { position: relative; display: inline-flex; }
.nav-burger-btn {
  width: 36px; height: 36px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: var(--glass, rgba(255,255,255,.45));
  border: 1px solid var(--glass-edge, rgba(92,18,51,.18));
  border-radius: 999px; cursor: pointer;
  color: var(--ink);
  -webkit-backdrop-filter: blur(var(--glass-blur,20px)) saturate(var(--glass-sat,118%));
  backdrop-filter: blur(var(--glass-blur,20px)) saturate(var(--glass-sat,118%));
  box-shadow: 0 4px 14px -8px rgba(48,18,30,.25), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .18s var(--ease, cubic-bezier(.16,1,.3,1)), background .15s;
}
.nav-burger-btn:hover { transform: translateY(-1px); background: var(--glass-strong, rgba(255,255,255,.7)); }
.nav-burger-btn[aria-expanded="true"] { background: var(--c-signal,#C6073D); color:#fff; border-color: var(--c-signal,#C6073D); }
.nav-burger-icon{
  position: relative; display: inline-block;
  width: 16px; height: 12px;
}
.nav-burger-icon span{
  position: absolute; left: 0; right: 0; height: 2px; border-radius: 1px;
  background: currentColor;
  transition: transform .25s var(--ease, cubic-bezier(.16,1,.3,1)), top .25s var(--ease), opacity .15s;
}
.nav-burger-icon span:nth-child(1){ top: 0; }
.nav-burger-icon span:nth-child(2){ top: 5px; }
.nav-burger-icon span:nth-child(3){ top: 10px; }
.nav-burger-btn[aria-expanded="true"] .nav-burger-icon span:nth-child(1){ top: 5px; transform: rotate(45deg); }
.nav-burger-btn[aria-expanded="true"] .nav-burger-icon span:nth-child(2){ opacity: 0; }
.nav-burger-btn[aria-expanded="true"] .nav-burger-icon span:nth-child(3){ top: 5px; transform: rotate(-45deg); }

.nav-burger-menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 220px; padding: 8px;
  background: var(--glass-strong, rgba(255,255,255,.78));
  border: 1px solid var(--glass-edge, rgba(92,18,51,.16));
  border-radius: var(--r-md, 16px);
  -webkit-backdrop-filter: blur(24px) saturate(125%);
  backdrop-filter: blur(24px) saturate(125%);
  box-shadow: 0 24px 60px -22px rgba(48,18,30,.4), inset 0 1px 0 rgba(255,255,255,.6);
  display: flex; flex-direction: column; gap: 4px;
  z-index: 1000;
  opacity: 0; transform: translateY(-8px) scale(.96);
  transition: opacity .18s var(--ease), transform .22s var(--ease);
  pointer-events: none;
}
.nav-burger-menu.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.nav-burger-menu[hidden] { display: none; }

.nav-burger-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 9px 12px; border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink); font: inherit; font-weight: 500; font-size: 0.85rem;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.nav-burger-item .nav-burger-glyph{
  width: 28px; height: 28px; flex: 0 0 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--glass, rgba(255,255,255,.4));
  border: 1px solid var(--glass-edge, rgba(92,18,51,.12));
  color: var(--c-bordeaux, #5C1233);
}
.nav-burger-item .nav-burger-glyph svg{ width: 16px; height: 16px; }
.nav-burger-item:hover {
  background: var(--glass, rgba(255,255,255,.4));
  border-color: var(--glass-edge, rgba(92,18,51,.14));
  transform: translateX(2px);
}
.nav-burger-item.active-nav {
  background: var(--c-signal,#C6073D); color: #fff;
  border-color: var(--c-signal,#C6073D);
}
.nav-burger-item.active-nav .nav-burger-glyph{
  background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.3); color:#fff;
}

/* Dark-Mode Anpassungen */
[data-theme="dark"] .nav-burger-btn {
  background: rgba(60,36,48,.55); color: #fff;
  border-color: rgba(255,255,255,.14);
}
[data-theme="dark"] .nav-burger-btn:hover { background: rgba(80,48,64,.7); }
[data-theme="dark"] .nav-burger-menu {
  background: rgba(40,22,32,.78); color: #fff;
  border-color: rgba(255,255,255,.12);
}
[data-theme="dark"] .nav-burger-item { color: #f5e9ee; }
[data-theme="dark"] .nav-burger-item:hover { background: rgba(255,255,255,.08); }

/* ============================================================
   Mobile-Burger-Icon in der Bottom-Bar (drei Striche)
   ============================================================ */
.mobile-burger-icon{
  position: relative; display: inline-block;
  width: 22px; height: 16px; margin: 0 auto 4px;
}
.mobile-burger-icon span{
  position: absolute; left: 2px; right: 2px; height: 2px; border-radius: 1px;
  background: currentColor;
  transition: top .25s var(--ease, cubic-bezier(.16,1,.3,1)), transform .25s var(--ease), opacity .15s;
}
.mobile-burger-icon span:nth-child(1){ top: 2px; }
.mobile-burger-icon span:nth-child(2){ top: 7px; }
.mobile-burger-icon span:nth-child(3){ top: 12px; }
.mobile-tabbar .tab[aria-expanded="true"] .mobile-burger-icon span:nth-child(1){ top: 7px; transform: rotate(45deg); }
.mobile-tabbar .tab[aria-expanded="true"] .mobile-burger-icon span:nth-child(2){ opacity: 0; }
.mobile-tabbar .tab[aria-expanded="true"] .mobile-burger-icon span:nth-child(3){ top: 7px; transform: rotate(-45deg); }

/* ============================================================
   Mobile-Sheet (Bottom-Sheet für überflüssige Tabs)
   ============================================================ */
.mobile-sheet{
  position: fixed;
  inset: 0;
  /* 3-stufiger Höhen-Fallback wie bei .app-viewport */
  height: 100vh;
  height: var(--app-vh, 100vh);
  height: 100dvh;
  z-index: 9000;
  display: flex; align-items: flex-end; justify-content: center;
}
.mobile-sheet[hidden]{ display: none; }
.mobile-sheet-backdrop{
  position: absolute; inset: 0;
  background: rgba(20,8,14,.35);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  backdrop-filter: blur(8px) saturate(110%);
  opacity: 0; transition: opacity .25s var(--ease, ease);
}
.mobile-sheet.open .mobile-sheet-backdrop{ opacity: 1; }
.mobile-sheet-panel{
  position: relative; z-index: 1;
  width: 100%; max-width: 520px;
  background: var(--glass-strong, rgba(255,255,255,.85));
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  backdrop-filter: blur(24px) saturate(130%);
  border: 1px solid var(--glass-edge, rgba(92,18,51,.18));
  border-bottom: none;
  border-top-left-radius: 22px; border-top-right-radius: 22px;
  padding: 14px 16px calc(20px + env(safe-area-inset-bottom,0));
  transform: translateY(100%);
  transition: transform .32s var(--ease, cubic-bezier(.16,1,.3,1));
  box-shadow: 0 -16px 60px -20px rgba(48,18,30,.4);
}
.mobile-sheet.open .mobile-sheet-panel{ transform: translateY(0); }
.mobile-sheet-handle{
  width: 44px; height: 4px; border-radius: 999px;
  background: rgba(0,0,0,.18); margin: 4px auto 14px;
}
.mobile-sheet-title{
  margin: 0 0 14px;
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 1.05rem; font-weight: 600;
  color: var(--ink); text-align: center;
}
.mobile-sheet-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 14px;
}
.mobile-sheet-item{
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 8px; border-radius: 16px;
  background: var(--glass, rgba(255,255,255,.45));
  border: 1px solid var(--glass-edge, rgba(92,18,51,.12));
  color: var(--ink); font: inherit; font-size: 0.78rem; font-weight: 500;
  cursor: pointer;
  transition: transform .15s, background .15s, border-color .15s;
}
.mobile-sheet-item:hover, .mobile-sheet-item:focus-visible{
  transform: translateY(-1px);
  background: var(--glass-strong, rgba(255,255,255,.65));
  border-color: var(--c-signal, #C6073D);
}
.mobile-sheet-icon{
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--c-bordeaux, #5C1233); color:#fff;
}
.mobile-sheet-icon svg{ width: 18px; height: 18px; }
.mobile-sheet-label{ line-height: 1.2; text-align: center; }
.mobile-sheet-close{
  width: 100%; padding: 12px;
  border: 1px solid var(--glass-edge, rgba(92,18,51,.18));
  border-radius: 14px;
  background: transparent;
  color: var(--ink); font: inherit; font-weight: 500; cursor: pointer;
}
.mobile-sheet-close:hover{ background: var(--glass, rgba(255,255,255,.4)); }

[data-theme="dark"] .mobile-sheet-panel{
  background: rgba(40,22,32,.88);
  border-color: rgba(255,255,255,.12);
  color: #f5e9ee;
}
[data-theme="dark"] .mobile-sheet-item{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: #f5e9ee;
}
[data-theme="dark"] .mobile-sheet-item:hover{ background: rgba(255,255,255,.12); }

/* ============================================================
   Stein-Textur Hintergrund (subtil, mit Parallax)
   - Liegt UNTER allen Inhalten und unter dem bg-aura-Glow
   - SVG-prozedurale Textur (~1 KB, kein Bilddownload)
   - z-index: -1 + body{isolation:isolate} = sicher hinten, aber sichtbar
   ============================================================ */
body{ isolation: isolate; }    /* Stacking-Context: z-index:-1 bleibt sichtbar */
.gkmi-stone-bg{
  /* Fixed-positioniert. height ist großzügig damit translate3d-Parallax
     das Element nicht aus dem Sichtfeld zieht.
     - top: -50vh → Element startet bereits 1/2 Viewport über dem Sichtbereich
     - height: 300vh → reicht 2.5 Viewports nach unten
     - Insgesamt: 3 Viewport-Höhen Spielraum für den Parallax-Shift */
  position: fixed;
  top: -50vh;
  left: -10%;
  right: -10%;
  height: 300vh;
  width: 120%;
  z-index: -1;
  pointer-events: none;
  background-image: url("asset/stone-texture.svg");
  background-size: 2560px 1440px;
  background-repeat: repeat;
  opacity: 0.22;
  mix-blend-mode: multiply;
  will-change: transform;
  transform: translate3d(0,0,0);
  transition: opacity .3s ease;
}
[data-theme="dark"] .gkmi-stone-bg{
  opacity: 0.18;
  mix-blend-mode: screen;
}

/* ============================================================
   FAQ-Akkordeon (Liquid-Glass)
   ============================================================ */
.gkmi-faq-list{
  display: flex; flex-direction: column; gap: 14px;
  max-width: 820px; margin: 0 auto;
}
.gkmi-faq-item{
  padding: 0;
  overflow: hidden;
  transition: box-shadow .25s var(--ease);
}
.gkmi-faq-item[open]{
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-hi);
}
.gkmi-faq-q{
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--ink);
  user-select: none;
  transition: color .2s var(--ease);
}
.gkmi-faq-q::-webkit-details-marker{ display: none; }
.gkmi-faq-q::marker{ display: none; }
.gkmi-faq-q:hover{ color: var(--c-signal, #C6073D); }
.gkmi-faq-chev{
  width: 28px; height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  position: relative;
  transition: transform .3s var(--ease), background .2s;
}
.gkmi-faq-chev::before,
.gkmi-faq-chev::after{
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 10px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transform-origin: center;
  transition: transform .3s var(--ease);
}
.gkmi-faq-chev::before{ transform: translate(-50%,-50%) rotate(0deg); }
.gkmi-faq-chev::after{  transform: translate(-50%,-50%) rotate(90deg); }
.gkmi-faq-item[open] .gkmi-faq-chev{
  background: var(--c-signal, #C6073D);
  border-color: var(--c-signal, #C6073D);
}
.gkmi-faq-item[open] .gkmi-faq-chev::before,
.gkmi-faq-item[open] .gkmi-faq-chev::after{ background: #fff; }
.gkmi-faq-item[open] .gkmi-faq-chev::after{
  transform: translate(-50%,-50%) rotate(0deg);
}
.gkmi-faq-a{
  padding: 0 22px 22px;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.7;
}
.gkmi-faq-a p{ margin: 0 0 12px; }
.gkmi-faq-a p:last-child{ margin-bottom: 0; }
.gkmi-faq-a strong{ color: var(--ink); font-weight: 600; }

/* Center-Variante für prose */
.about-rich-center{ text-align: center; }
.about-rich-center .about-pillars{ justify-content: center; }

/* ============================================================
   iOS 26 / Safari Modern Polish (Progressive Enhancement)
   ------------------------------------------------------------
   Diese Regeln verschönern den Look auf modernem Safari & iOS,
   ohne ältere Browser zu brechen. Mit @supports & color() für
   Display-P3-Farben (sattere Rottöne auf Apple-Displays).
   ============================================================ */

/* Globale Touch-Polish: kein graues Tap-Highlight, sauberer Focus-Ring */
html{
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
button, a, [role="button"], .nav-link, .mobile-sheet-item, .nav-burger-item,
.gkmi-faq-q, .package-card, .ce-btn{
  -webkit-tap-highlight-color: transparent;
}
:focus-visible{
  outline: 2px solid var(--c-signal, #C6073D);
  outline-offset: 3px;
  border-radius: 6px;
}
/* iOS Safari fix: input/textarea zoomt bei <16px Schrift beim Tippen rein */
input, textarea, select{
  font-size: max(16px, 0.95rem);
}

/* Display-P3 Farben für moderne Bildschirme (sattere Brand-Töne) */
@supports (color: color(display-p3 1 0 0)){
  :root{
    --c-signal-p3:    color(display-p3 0.745 0.043 0.220);
    --c-bordeaux-p3:  color(display-p3 0.345 0.063 0.180);
  }
  /* Auf Buttons und Akzentbalken automatisch nutzen */
  .btn-interface-trigger, .btn-primary{
    background: var(--c-signal-p3, var(--c-signal));
  }
  .nav-link.active-nav::after{
    background: var(--c-signal-p3, var(--c-signal));
  }
}

/* Apple-Style "Liquid Glass" Material: stärkere Saturation/Blur,
   wenn der Browser es kann. Fallback ist der bestehende Look. */
@supports (backdrop-filter: blur(40px) saturate(180%)){
  .header-container,
  .mobile-tabbar,
  .nav-burger-menu,
  .mobile-sheet-panel,
  .glass-panel,
  .header-instagram,
  .nav-burger-btn{
    -webkit-backdrop-filter: blur(28px) saturate(180%) brightness(1.04);
    backdrop-filter: blur(28px) saturate(180%) brightness(1.04);
  }
}

/* Scroll-driven Animation für die Stein-Textur (CSS-only Parallax).
   Wenn unterstützt, verlangsamen wir den Stein sanft mit dem Scroll.
   Auf Safari 18+/iOS 18+ ist das hardwarebeschleunigt und absolut smooth.
   Das JS-Parallax bleibt als Fallback aktiv. */
/* Hinweis: Eine frühere CSS Scroll-Driven Animation
   (@supports (animation-timeline: scroll())) wurde ENTFERNT,
   weil sie das JavaScript-Parallax (script.js, translate3d auf
   #gkmiStoneBg) überschrieb. Das JS-Parallax läuft jetzt
   konsistent auf allen Browsern. */

/* :has() Selektor — Body bekommt eine Klasse wenn ein Modal offen ist,
   und der Stein wird sanft heruntergedimmt. */
@supports selector(html:has(*)){
  .gkmi-stone-bg{ transition: opacity .3s var(--ease); }
  html:has(.mobile-sheet:not([hidden])) .gkmi-stone-bg,
  html:has(.osb-popup-overlay.show) .gkmi-stone-bg,
  html:has(.blog-modal.open) .gkmi-stone-bg{
    opacity: 0.08;
  }
}

/* Font-Synthesis verhindert künstliche fett/kursiv-Verzerrung */
.hero-title, .section-title, .footer-motto, .ce-section-title, .ce-card-title{
  font-synthesis-weight: none;
  font-synthesis-style: none;
}

/* Smoothe Scrollbars (für Browser die es unterstützen) */
.category-view{
  scrollbar-width: thin;
  scrollbar-color: rgba(92,18,51,0.18) transparent;
}
.category-view::-webkit-scrollbar{ width: 8px; height: 8px; }
.category-view::-webkit-scrollbar-thumb{
  background: rgba(92,18,51,0.18);
  border-radius: 8px;
}
.category-view::-webkit-scrollbar-thumb:hover{
  background: rgba(92,18,51,0.3);
}

/* iOS-Standalone PWA: keine störende Highlightleiste oben — Header-Padding
   wird bereits über das Haupt-.fixed-header-Padding mit env(safe-area-inset-top)
   abgedeckt. */


/* ============================================================
   MEHR-TAB: Podcast · Teilnehmerstimmen · Seminar · Audio-Player
   ============================================================ */

.mehr-lead{
  text-align: left;
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 720px;
  margin: 0 0 24px;
  text-wrap: pretty;
}

/* .mehr-section ist nur ein Outer-Margin – KEIN Flex, damit interne
   Layouts (Seminar Bild+Text) ihr eigenes Display behalten dürfen. */
.mehr-section{
  margin-bottom: 32px;
}

.stimmen-note{
  font-size: 0.92rem;
  color: var(--ink-soft);
  font-style: italic;
  margin-top: 24px;
  text-align: left;
  max-width: 720px;
}

/* --- Podcast: Cover-Karte + Episode-Karten --- */
.podcast-top{
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  margin-bottom: 14px;
}
.podcast-top > img{
  width: 100%; max-width: 240px;
  height: auto; object-fit: cover;
  flex: 0 0 auto;
}
.podcast-top > div{
  padding: 22px 26px;
  display: flex; flex-direction: column; justify-content: center;
  flex: 1; min-width: 220px;
}
.podcast-top h4{
  font-family: var(--font-display, 'Fraunces', serif);
  font-weight: 600; font-size: 1.18rem;
  color: var(--ink);
  margin-bottom: 4px;
}

.episode{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 18px 22px;
  margin-bottom: 12px;
}
.episode h4{
  margin: 0;
  font-family: var(--font-display, 'Fraunces', serif);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
}
.episode .gkmi-player{ width: 100%; }

/* --- Teilnehmerstimmen Grid (Karten-Look unverändert lassen) --- */
.stimmen-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.stimme{
  display: flex; flex-direction: column;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}
.stimme img{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.stimme h4{
  margin: 0;
  padding: 14px 18px 4px;
  font-family: var(--font-display, 'Fraunces', serif);
  font-weight: 600; font-size: 1.05rem;
  color: var(--ink);
}
.stimme .gkmi-player{
  margin: 6px 14px 14px;
  max-width: calc(100% - 28px);  /* nie breiter als die Card minus Margin */
}

/* --- Seminar-Block (BOX AT HOME) --- */
.seminar-card{
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.seminar-card > img{
  width: 100%;
  max-width: 320px;
  height: auto;
  object-fit: cover;
  flex: 0 0 auto;
}
.seminar-body{
  padding: 24px 28px;
  display: flex; flex-direction: column; justify-content: center;
  gap: 12px;
  flex: 1; min-width: 240px;
}
.seminar-body h4{
  margin: 0;
  font-family: var(--font-display, 'Fraunces', serif);
  font-weight: 600;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  color: var(--ink);
  letter-spacing: -.01em;
}
.seminar-body p{
  margin: 0;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.65;
}
.mehr-cta{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px;
  background: var(--c-signal, #C6073D);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 999px;
  align-self: flex-start;
  margin-top: 6px;
  box-shadow: 0 8px 22px -10px rgba(198,7,61,.55);
  transition: transform .2s var(--ease, cubic-bezier(.16,1,.3,1)), box-shadow .2s;
}
.mehr-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px rgba(198,7,61,.7);
  color: #fff;
}

/* ============================================================
   GKMI Audio-Player (Custom-UI im Liquid-Glass-Look)
   ============================================================ */
.gkmi-player{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 14px 8px 8px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 var(--glass-hi);
  box-sizing: border-box;
  /* Kein überlappendes Layout: bleibt im Card-Bereich */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;     /* erlaubt flex-children zu schrumpfen */
}
.gkmi-player audio{
  display: none;
}

.gkmi-pp{
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--c-signal, #C6073D);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* dezenter Schatten, keine seitliche Ausdehnung */
  box-shadow: 0 2px 6px -1px rgba(198,7,61,.35);
  transition: transform .2s var(--ease, cubic-bezier(.16,1,.3,1)), background .2s;
  position: relative;
  z-index: 1;
}
.gkmi-pp:hover{
  transform: scale(1.06);
  box-shadow: 0 3px 8px -1px rgba(198,7,61,.45);
}
.gkmi-pp:focus-visible{ outline: 2px solid var(--c-signal,#C6073D); outline-offset: 3px; }

/* Das Play- bzw. Pause-Icon wird vom JS als SVG in den Button injiziert.
   Hier nur das Größen-Styling für das SVG. */
.gkmi-pp svg{
  width: 16px;
  height: 16px;
  display: block;
  pointer-events: none;   /* Klicks gehen an den Button, nicht ans SVG */
}

.gkmi-bar{
  flex: 1 1 auto;
  min-width: 40px;
  height: 4px;
  border-radius: 999px;
  background: rgba(92,18,51,.18);
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.gkmi-fill{
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: var(--c-signal, #C6073D);
  border-radius: 999px;
  transition: width .15s linear;
}
.gkmi-time{
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-weight: 500;
  min-width: 36px;
  text-align: right;
}

/* --- Mobile-Anpassungen für Mehr-Tab --- */
@media (max-width: 720px){
  .podcast-top{ flex-direction: column; }
  .podcast-top > img{ max-width: 100%; }
  .podcast-top > div{ padding: 18px 22px; }

  .episode{ padding: 14px 18px; }

  .seminar-card{ flex-direction: column; }
  .seminar-card > img{ max-width: 100%; aspect-ratio: 16/10; }
  .seminar-body{ padding: 20px 22px; }
}

/* ============================================================
   BILD-KARUSSELL (gkmi-carousel) – Liquid-Glass-Look
   ============================================================ */
.gkmi-carousel-wrap{
  width: 100%;
  margin-bottom: 20px;
  /* Eigener Stacking-Context: figcaptions können nicht in folgende
     Sektionen (z.B. OSB-Pakete) ragen. */
  isolation: isolate;
  position: relative;
}
.gkmi-carousel{
  position: relative;
  padding: 0;
  overflow: hidden;
  border-radius: var(--r-lg, 22px);
}
.gkmi-carousel-track{
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gkmi-carousel-track::-webkit-scrollbar{ display: none; }

.gkmi-carousel-slide{
  flex: 0 0 100%;
  width: 100%;
  margin: 0;
  scroll-snap-align: start;
  position: relative;
  /* Default: panoramisch flach (21:9) UND auf max 320px gedeckelt */
  aspect-ratio: 21 / 9;
  max-height: 320px;
  background: rgba(92,18,51,.06);
  overflow: hidden;
}
.gkmi-carousel-tall .gkmi-carousel-slide{
  aspect-ratio: 4 / 5;
  max-height: 480px;
  /* Subtle Liquid-Glass Hintergrund für die Ränder, wenn das Bild nicht
     exakt 4:5 ist (Portrait-Bilder unterschiedlicher Verhältnisse) */
  background:
    linear-gradient(135deg, rgba(92,18,51,.08), rgba(255,204,0,.04) 60%, rgba(198,7,61,.06)),
    rgba(255,255,255,.4);
}
.gkmi-carousel-wide .gkmi-carousel-slide{
  aspect-ratio: 21 / 7;
  max-height: 260px;
}
/* Auto-Modus: spezifische Layout-Regeln stehen am Ende der Datei
   (im Block "Carousel An Bild anpassen – finale Regeln") */

/* Auto + Blur-Extend Background: BG soll dahinter weiter füllen */
.gkmi-carousel-auto.gkmi-carousel-bg-blur-extend .gkmi-carousel-slide-bg{
  position: absolute;
  inset: -20px;
}

/* Image-Wrapper (positioniert + Maske für contain mit Blur-BG) */
.gkmi-carousel-slide-img-wrap{
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Image-Wrapper (positioniert + Maske für contain mit Blur-BG) */
.gkmi-carousel-slide-img-wrap{
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gkmi-carousel-slide-img-wrap img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Fit-Mode: contain (Bild komplett zeigen) */
.gkmi-carousel-fit-contain .gkmi-carousel-slide-img-wrap img{
  object-fit: contain;
  padding: 6px;
}
/* Tall (alte Logik) bekommt automatisch contain */
.gkmi-carousel-tall .gkmi-carousel-slide-img-wrap img{
  object-fit: contain;
  padding: 6px;
}
.gkmi-carousel-tall.gkmi-carousel-fit-contain .gkmi-carousel-slide-img-wrap img{
  /* schon contain, keine Änderung */
}

/* Background-Mode: blur-extend (Bild als Blur hinter dem Hauptbild) */
.gkmi-carousel-slide-bg{
  position: absolute;
  inset: -20px;
  z-index: 0;
  background-size: cover;
  background-position: center;
  filter: blur(36px) saturate(140%);
  transform: scale(1.15);
  opacity: 0.85;
}
.gkmi-carousel-bg-blur-extend .gkmi-carousel-slide{
  background: #2d1418;   /* dunkler Fallback */
}

/* Background-Mode: glass (Markenfarbverlauf) */
.gkmi-carousel-bg-glass .gkmi-carousel-slide{
  background:
    linear-gradient(135deg, rgba(92,18,51,.18), rgba(255,204,0,.08) 50%, rgba(198,7,61,.14)),
    linear-gradient(0deg, #FAF7F0, #FFFFFF);
}
/* Caption: Default-Gradient gilt NUR wenn kein expliziter Stil gesetzt ist.
   Die :not()-Selektoren verhindern dass diese Default-Regel die Pill- oder
   Panel-Variante kapert (left:0;right:0 würde die Pille zerstören). */
.gkmi-carousel-slide > figcaption:not(.gkmi-carousel-cap-pill):not(.gkmi-carousel-cap-panel-inner){
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 22px 14px;
  color: var(--cap-color, #fff);
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: clamp(0.9rem, 1.4vw, 1.05rem);
  font-weight: 500;
  background: var(--cap-bg, linear-gradient(180deg, transparent 0%, rgba(0,0,0,.05) 30%, rgba(60,6,30,.85) 100%));
  letter-spacing: .005em;
  z-index: 3;
}

/* Navigation: Pfeile */
.gkmi-carousel-arrow{
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--glass-edge);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 6px 18px -10px rgba(0,0,0,.3), inset 0 1px 0 var(--glass-hi);
  cursor: pointer;
  color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .2s var(--ease,cubic-bezier(.16,1,.3,1)), background .2s;
  z-index: 2;
}
.gkmi-carousel-arrow:hover{
  transform: translateY(-50%) scale(1.08);
  background: var(--c-signal, #C6073D);
  color: #fff;
  border-color: var(--c-signal, #C6073D);
}
.gkmi-carousel-arrow:focus-visible{
  outline: 2px solid var(--c-signal,#C6073D);
  outline-offset: 3px;
}
.gkmi-carousel-prev{ left: 12px; }
.gkmi-carousel-next{ right: 12px; }
.gkmi-carousel-arrow::before{
  content: '';
  width: 9px; height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: -3px;
}
.gkmi-carousel-prev::before{
  transform: rotate(-135deg);
  margin-left: 3px;
}

/* Navigation: Dots */
.gkmi-carousel-dots{
  position: absolute;
  bottom: 10px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 7px;
  padding: 5px 10px;
  background: rgba(0,0,0,.28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  z-index: 2;
}
.gkmi-carousel-dot{
  width: 7px; height: 7px;
  padding: 0;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,.45);
  cursor: pointer;
  transition: transform .2s, background .2s, width .25s;
}
.gkmi-carousel-dot:hover{ background: rgba(255,255,255,.75); }
.gkmi-carousel-dot.is-active{
  background: #fff;
  width: 20px; border-radius: 4px;
}

/* --- Mobile-Anpassung Karussell --- */
@media (max-width: 720px){
  .gkmi-carousel-slide{
    aspect-ratio: 16 / 10;   /* etwas weniger flach auf Mobile */
    max-height: 240px;
  }
  .gkmi-carousel-tall .gkmi-carousel-slide{
    aspect-ratio: 4 / 5;
    max-height: 380px;
  }
  .gkmi-carousel-wide .gkmi-carousel-slide{
    aspect-ratio: 21 / 9;
    max-height: 200px;
  }
  /* Pfeile auf kleinen Screens komplett weg – nur Swipe + Dots */
  .gkmi-carousel-arrow{ display: none; }
  .gkmi-carousel-slide > figcaption:not(.gkmi-carousel-cap-pill):not(.gkmi-carousel-cap-panel-inner){ padding: 18px 16px 12px; font-size: 0.85rem; }
}

/* ============================================================
   VIDEO-KARTE (gkmi-video-card)
   ============================================================ */
.gkmi-video-card{
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  margin-bottom: 24px;
}
.gkmi-video-side{ flex-direction: row; }
.gkmi-video-stack{ flex-direction: column; }

.gkmi-video-media{
  position: relative;
  background: #000;
  flex: 1 1 60%;
  min-width: 0;
}
.gkmi-video-side .gkmi-video-media{
  max-width: 60%;
  aspect-ratio: 16 / 9;
}
.gkmi-video-stack .gkmi-video-media{
  width: 100%;
  aspect-ratio: 16 / 9;
}
.gkmi-video-media video{
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}

/* Brand-Style für die nativen Video-Controls (so weit der Browser es erlaubt) */
.gkmi-video-media video::-webkit-media-controls-panel{
  background: linear-gradient(180deg, transparent 0%, rgba(60,6,30,.75) 100%);
}

.gkmi-video-body{
  padding: 24px 28px;
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
  flex: 1 1 40%; min-width: 0;
}
.gkmi-video-body h3{
  margin: 0;
  font-family: var(--font-display, 'Fraunces', serif);
  font-weight: 600;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  color: var(--ink);
  letter-spacing: -.01em;
}
.gkmi-video-text{
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.65;
}
.gkmi-video-text p{ margin: 0 0 0.85em; }
.gkmi-video-text p:last-child{ margin-bottom: 0; }
.gkmi-video-text strong{ color: var(--ink); font-weight: 600; }
.gkmi-video-text a{ color: var(--c-signal, #C6073D); }

@media (max-width: 820px){
  .gkmi-video-card{ flex-direction: column; }
  .gkmi-video-side .gkmi-video-media{
    max-width: 100%;
    width: 100%;
  }
  .gkmi-video-body{ padding: 20px 22px; }
}

/* ============================================================
   Carousel Caption-Stile (Phase 1)
   ============================================================ */
/* Caption-Container immer über Bild + Backgrounds (z-index) */
.gkmi-carousel-slide figcaption{ z-index: 3; }

/* Stil 1: Gradient (Default – schon oben gestylt) */
.gkmi-carousel-cap-gradient .gkmi-carousel-slide figcaption,
.gkmi-carousel-slide > figcaption:not(.gkmi-carousel-cap-pill):not(.gkmi-carousel-cap-panel-inner){
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 22px 14px;
  color: var(--cap-color, #fff);
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: clamp(0.9rem, 1.4vw, 1.05rem);
  font-weight: 500;
  background: var(--cap-bg, linear-gradient(180deg, transparent 0%, rgba(0,0,0,.05) 30%, rgba(60,6,30,.88) 100%));
  letter-spacing: .005em;
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
}

/* Stil 2: Glas-Pille (schwebt unten mit Backdrop-Blur)
   Höhere Specifity damit es die Default-figcaption-Regel sicher schlägt */
.gkmi-carousel-slide > figcaption.gkmi-carousel-cap-pill{
  position: absolute;
  left: 50%;
  right: auto;     /* Reset gegen Default-Regel die right:0 setzt */
  top: auto;
  bottom: 14px;
  transform: translateX(-50%);
  width: auto;
  max-width: calc(100% - 28px);
  padding: 9px 18px;
  background: var(--cap-bg, rgba(255,255,255,.18));
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  color: var(--cap-color, #fff);
  font-size: 0.92rem;
  font-weight: 500;
  text-align: center;
  box-shadow: 0 10px 26px -10px rgba(0,0,0,.4);
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.gkmi-carousel-cap-pill span{
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Stil 3: Seitenpanel (eigene Karte rechts neben dem Bild) */
.gkmi-carousel-cap-panel .gkmi-carousel-slide{
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 0;
  aspect-ratio: auto;
  max-height: none;
  height: auto;
  min-height: 280px;
}
.gkmi-carousel-cap-panel .gkmi-carousel-slide-img-wrap{
  position: relative;
  aspect-ratio: 4/3;
  height: auto;
}
.gkmi-carousel-cap-panel-inner{
  position: static;
  background: var(--glass, rgba(255,255,255,.6));
  padding: 24px 28px;
  display: flex;
  align-items: center;
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ink, #1a1a1a);
  border-left: 1px solid var(--glass-edge, rgba(60,6,30,.12));
}

@media (max-width: 720px){
  .gkmi-carousel-cap-panel .gkmi-carousel-slide{
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .gkmi-carousel-cap-panel-inner{
    border-left: none;
    border-top: 1px solid var(--glass-edge, rgba(60,6,30,.12));
    padding: 18px 22px;
    font-size: 0.95rem;
  }
}

/* Stil 4: none – bereits durch PHP-Suppression abgedeckt */

/* ============================================================
   Carousel "An Bild anpassen" – finale Regeln
   (ans Ende damit sie alle vorherigen Regeln überschreiben)
   ============================================================ */
.gkmi-carousel-auto .gkmi-carousel-slide,
.gkmi-carousel.gkmi-carousel-auto .gkmi-carousel-slide{
  aspect-ratio: auto !important;
  max-height: none !important;
  height: auto !important;
  min-height: 200px;
  background: rgba(92,18,51,.06);
  overflow: visible;
}
.gkmi-carousel-auto .gkmi-carousel-slide-img-wrap,
.gkmi-carousel.gkmi-carousel-auto .gkmi-carousel-slide-img-wrap{
  position: relative !important;
  inset: auto !important;
  width: 100%;
  height: auto !important;
  display: block;
  z-index: 1;
}
.gkmi-carousel-auto .gkmi-carousel-slide-img-wrap img,
.gkmi-carousel.gkmi-carousel-auto .gkmi-carousel-slide-img-wrap img{
  width: 100% !important;
  height: auto !important;
  max-height: 700px;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  padding: 0;
}
/* Auto + Caption-Pille: am unteren Bildrand, nicht außerhalb */
.gkmi-carousel-auto .gkmi-carousel-slide > figcaption.gkmi-carousel-cap-pill{
  bottom: 14px;
}

/* ============================================================
   PWA Install-Hint (iOS Safari only)
   Dezenter Banner unten zentriert
   ============================================================ */
.gkmi-pwa-hint {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(140%);
  z-index: 95;
  width: min(calc(100% - 32px), 380px);
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(60, 6, 30, 0.10);
  border-radius: 18px;
  box-shadow: 0 18px 50px -16px rgba(48, 18, 30, 0.35);
  opacity: 0;
  transition:
    transform .42s cubic-bezier(.16,1,.3,1),
    opacity .3s ease;
  pointer-events: none;
}
.gkmi-pwa-hint.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.gkmi-pwa-hint-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 14px;
}
.gkmi-pwa-hint-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C6073D, #5C1233);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 10px -3px rgba(198, 7, 61, 0.35);
}
.gkmi-pwa-hint-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.3;
}
.gkmi-pwa-hint-text strong {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 0.92rem;
  font-weight: 600;
  color: #3C061E;
}
.gkmi-pwa-hint-text span {
  font-size: 0.78rem;
  color: #5C5C5C;
}
.gkmi-pwa-hint-close {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(60, 6, 30, 0.06);
  color: #5C5C5C;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.gkmi-pwa-hint-close:hover {
  background: rgba(60, 6, 30, 0.12);
  color: #3C061E;
}
.gkmi-pwa-hint-close:active { transform: scale(0.92); }

/* Schmalere Schrift bei sehr kleinen Phones */
@media (max-width: 360px) {
  .gkmi-pwa-hint-text strong { font-size: 0.86rem; }
  .gkmi-pwa-hint-text span { font-size: 0.72rem; }
}

/* ============================================================
   OSB TERMINE
   Liquid-Glass Style, passend zur GKMI-Site
   ============================================================ */
.gkmi-termine {
  max-width: 980px;
  margin: 0 auto;
}
.gkmi-termine-intro {
  text-align: center;
  margin-bottom: 28px;
}
.gkmi-termine-title {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  background: linear-gradient(135deg, var(--c-bordeaux, #5C1233), var(--c-signal, #C6073D));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
}
.gkmi-termine-lead {
  font-size: 1.05rem;
  color: var(--ink-soft);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Toolbar (Views + Filter) */
.gkmi-termine-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding: 12px 14px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-edge);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
.gkmi-termine-views {
  display: inline-flex;
  gap: 3px;
  background: rgba(60,6,30,.06);
  padding: 3px;
  border-radius: 999px;
}
.gkmi-tv-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.86rem;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: .2s ease;
  font-family: inherit;
}
.gkmi-tv-btn:hover { color: var(--ink); }
.gkmi-tv-btn.is-active {
  background: var(--c-bordeaux, #5C1233);
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(92,18,51,.4);
}

/* Filter-Pillen */
.gkmi-termine-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.gkmi-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255,255,255,.7);
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: .2s ease;
  font-family: inherit;
  --cat-color: var(--c-bordeaux, #5C1233);
}
.gkmi-cat-pill:hover { color: var(--ink); background: rgba(255,255,255,.95); }
.gkmi-cat-pill.is-active {
  background: var(--cat-color);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px -4px var(--cat-color);
}
.gkmi-cat-pill.is-active .gkmi-cat-dot { background: rgba(255,255,255,.9); }
.gkmi-cat-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cat-color);
}
.gkmi-cat-count {
  font-size: 0.74rem;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  color: inherit;
  font-weight: 600;
}
.gkmi-cat-pill.is-active .gkmi-cat-count {
  background: rgba(255,255,255,.22);
}

/* Empty State */
.gkmi-termine-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-soft);
}
.gkmi-termine-empty svg { color: var(--ink-faint, #99a); margin-bottom: 12px; }
.gkmi-termine-empty p { font-size: 1rem; }

/* ===== Listen-Ansicht ===== */
/* hidden-Attribut muss display:flex / display:block überschreiben */
.gkmi-termine [data-view-pane][hidden] { display: none !important; }

.gkmi-termine-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gkmi-termine[data-density="compact"]    .gkmi-termine-list { gap: 6px; }
.gkmi-termine[data-density="spacious"]   .gkmi-termine-list { gap: 16px; }

.gkmi-termine-monthhead {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--c-bordeaux, #5C1233);
  margin: 18px 4px 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(92,18,51,.12);
}
.gkmi-termine-list > .gkmi-termine-monthhead:first-child { margin-top: 0; }

.gkmi-termine-card {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-edge);
  border-left: 3px solid var(--cat-color, #5C1233);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 var(--glass-hi);
  cursor: pointer;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
  text-align: left;
  font-family: inherit;
}
.gkmi-termine-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -16px rgba(48,18,30,.25), inset 0 1px 0 var(--glass-hi);
}
.gkmi-termine[data-density="compact"]  .gkmi-termine-card { padding: 10px 14px; }
.gkmi-termine[data-density="spacious"] .gkmi-termine-card { padding: 20px 22px; }

.gkmi-termine-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(198,7,61,.08), rgba(92,18,51,.06));
  border: 1px solid rgba(92,18,51,.08);
  border-radius: 12px;
  padding: 8px 4px;
  min-width: 56px;
}
.gkmi-termine-day {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
  color: var(--c-bordeaux, #5C1233);
  letter-spacing: -0.02em;
}
.gkmi-termine-dow {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-top: 2px;
}
.gkmi-termine-body { min-width: 0; }
.gkmi-termine-headline { margin-bottom: 4px; }
.gkmi-termine-cat-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cat-color, #5C1233);
  margin-bottom: 4px;
}
.gkmi-termine-cardtitle {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 1.08rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1.3;
}
.gkmi-termine-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.84rem;
  color: var(--ink-soft);
}
.gkmi-termine-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.gkmi-termine-cta {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--glass-edge);
  background: rgba(255,255,255,.6);
  color: var(--ink-soft);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: .2s ease;
}
.gkmi-termine-card:hover .gkmi-termine-cta {
  background: var(--cat-color, #5C1233);
  color: #fff;
  border-color: transparent;
}

/* ===== Monatsraster ===== */
.gkmi-termine-month {
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-edge);
  border-radius: 22px;
  padding: 18px;
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
.gkmi-month-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.gkmi-month-nav {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--glass-edge);
  background: rgba(255,255,255,.55);
  color: var(--ink-soft);
  display: grid; place-items: center;
  cursor: pointer;
  transition: .2s ease;
}
.gkmi-month-nav:hover {
  background: var(--c-bordeaux, #5C1233);
  color: #fff;
  border-color: transparent;
}
.gkmi-month-label {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--c-bordeaux, #5C1233);
  margin: 0;
  text-align: center;
  flex: 1;
}
.gkmi-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.gkmi-month-dowhead {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  text-align: center;
  padding: 6px 0 4px;
}
.gkmi-month-cell {
  min-height: 92px;
  border: 1px solid transparent;
  background: rgba(255,255,255,.45);
  border-radius: 10px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  cursor: default;
  transition: background .15s ease, border-color .15s ease;
  font-family: inherit;
  overflow: hidden;
}
.gkmi-month-cell.is-empty {
  background: transparent;
  border: none;
  min-height: 0;
}
.gkmi-month-cell.has-events {
  cursor: pointer;
  background: rgba(255,255,255,.78);
  border-color: var(--glass-edge);
}
.gkmi-month-cell.has-events:hover {
  background: #fff;
  border-color: var(--c-bordeaux, #5C1233);
}
.gkmi-month-cell.is-today {
  background: rgba(198,7,61,.08);
  border-color: var(--c-signal, #C6073D);
}
.gkmi-month-cell.is-today .gkmi-month-day {
  color: var(--c-signal, #C6073D);
  font-weight: 700;
}
.gkmi-month-day {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  align-self: flex-start;
  padding: 0 2px;
  line-height: 1.1;
}
/* Event-Balken (Apple-Kalender-Stil) */
.gkmi-month-bars {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  width: 100%;
  min-width: 0;
}
.gkmi-month-bar {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 2px 6px;
  border-radius: 4px;
  color: #fff;
  font-size: 0.7rem;
  line-height: 1.35;
  font-weight: 500;
  min-width: 0;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}
.gkmi-bar-time {
  font-family: var(--font-mono, ui-monospace, 'SF Mono', 'Menlo', monospace);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 0.66rem;
  letter-spacing: -0.01em;
}
.gkmi-bar-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.gkmi-month-overflow {
  font-size: 0.66rem;
  color: var(--ink-soft);
  font-weight: 600;
  padding: 1px 4px;
  margin-top: 1px;
}

/* Tag-Detail unter dem Raster */
.gkmi-month-legend {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(92,18,51,.12);
}
.gkmi-month-day-title {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 1rem;
  font-weight: 500;
  color: var(--c-bordeaux, #5C1233);
  margin: 0 0 12px;
}
.gkmi-month-event {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: baseline;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--glass-edge);
  border-left: 3px solid var(--cat-color, #5C1233);
  background: rgba(255,255,255,.6);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  margin-bottom: 6px;
  transition: .2s ease;
}
.gkmi-month-event:hover {
  background: #fff;
  transform: translateX(2px);
}
.gkmi-month-event-time {
  grid-row: 1 / span 2;
  font-family: var(--font-mono, 'SF Mono', monospace);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--cat-color, #5C1233);
}
.gkmi-month-event-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}
.gkmi-month-event-loc {
  font-size: 0.78rem;
  color: var(--ink-soft);
  grid-column: 2;
}

/* ===== Modal ===== */
.gkmi-termine-modal {
  position: fixed; inset: 0;
  z-index: 9001;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  --cat-color: #5C1233;
}
.gkmi-termine-modal[hidden] { display: none; }
.gkmi-termine-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(20,8,14,.45);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  opacity: 0;
  transition: opacity .22s ease;
}
.gkmi-termine-modal.is-open .gkmi-termine-modal-backdrop { opacity: 1; }
.gkmi-termine-modal-panel {
  position: relative;
  width: 100%;
  max-width: 540px;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--glass-edge);
  border-radius: 22px;
  padding: 28px 26px 22px;
  box-shadow: 0 30px 80px -20px rgba(48,18,30,.5);
  transform: translateY(20px) scale(.96);
  opacity: 0;
  transition: transform .28s cubic-bezier(.16,1,.3,1), opacity .22s ease;
}
.gkmi-termine-modal.is-open .gkmi-termine-modal-panel {
  transform: none;
  opacity: 1;
}
.gkmi-termine-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(60,6,30,.06);
  color: var(--ink-soft);
  display: grid; place-items: center;
  cursor: pointer;
  transition: .15s ease;
}
.gkmi-termine-modal-close:hover {
  background: var(--c-bordeaux, #5C1233);
  color: #fff;
}
.gkmi-termine-modal-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cat-color);
  padding: 4px 10px;
  background: color-mix(in srgb, var(--cat-color) 12%, transparent);
  border-radius: 999px;
  margin-bottom: 10px;
}
.gkmi-termine-modal-title {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 14px;
  padding-right: 36px;
  line-height: 1.2;
}
.gkmi-termine-modal-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  padding: 12px 14px;
  background: rgba(60,6,30,.04);
  border-radius: 12px;
}
.gkmi-termine-modal-row {
  font-size: 0.92rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.gkmi-termine-modal-row[hidden] { display: none; }
.gkmi-termine-modal-desc {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 20px;
}
.gkmi-termine-modal-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.gkmi-termine-modal-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 20px;
  border: none;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: .2s ease;
  font-family: inherit;
  text-decoration: none;
}
.gkmi-btn-primary {
  background: linear-gradient(135deg, var(--c-signal, #C6073D), var(--c-bordeaux, #5C1233));
  color: #fff;
  box-shadow: 0 6px 18px -8px rgba(198,7,61,.5);
}
.gkmi-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px rgba(198,7,61,.6);
}
.gkmi-btn-secondary {
  background: rgba(60,6,30,.06);
  color: var(--ink);
}
.gkmi-btn-secondary:hover {
  background: rgba(60,6,30,.12);
}

/* Mobile-Anpassungen */
@media (max-width: 640px) {
  .gkmi-termine-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .gkmi-termine-views { align-self: center; }
  .gkmi-termine-filters { justify-content: center; }
  .gkmi-termine-card {
    grid-template-columns: 56px 1fr;
    gap: 12px;
  }
  .gkmi-termine-cta { display: none; }
  .gkmi-termine-day { font-size: 1.4rem; }
  .gkmi-termine-cardtitle { font-size: 1rem; }
  .gkmi-month-grid { gap: 2px; }
  .gkmi-month-cell { padding: 3px; border-radius: 8px; min-height: 64px; }
  .gkmi-month-day { font-size: 0.8rem; }
  /* Bars werden klein: Time-only, Titel weg */
  .gkmi-month-bar {
    padding: 1px 4px;
    font-size: 0.6rem;
    gap: 0;
    line-height: 1.25;
  }
  .gkmi-bar-time { font-size: 0.6rem; }
  .gkmi-bar-title { display: none; }
  .gkmi-month-overflow { font-size: 0.58rem; padding: 0 3px; }
  .gkmi-termine-modal-panel {
    padding: 22px 20px 18px;
    max-height: calc(100dvh - 24px);
  }
  .gkmi-termine-modal-title { font-size: 1.3rem; }
  .gkmi-termine-modal-cta { flex-direction: column; }
  .gkmi-termine-modal-btn { width: 100%; justify-content: center; }
}

/* Sehr kleine Screens: Bars werden zu Farb-Stripes (Punkt-Ersatz) */
@media (max-width: 420px) {
  .gkmi-month-cell { min-height: 54px; }
  .gkmi-month-bar {
    height: 3px;
    padding: 0;
    border-radius: 2px;
    overflow: hidden;
  }
  .gkmi-bar-time { display: none; }
  .gkmi-month-overflow { font-size: 0.55rem; }
}

/* ===== Editor-Page-Spezifisch (admin/content-editor/termine.php) ===== */
.termine-status {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  background: var(--ce-bg-soft, #f5f7fb);
  border: 1px solid var(--ce-border, #e5e8f0);
  border-radius: 10px;
}
.termine-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
}
.termine-status-meta {
  font-size: 0.78rem;
  color: var(--ce-ink-faint, #888);
}
.termine-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.termine-status-dot.ok { background: #00B894; }
.termine-status-dot.warn { background: #FDCB6E; }
.termine-refresh-btn {
  align-self: flex-start;
  margin-top: 4px;
}
.termine-detected {
  margin-bottom: 14px;
  padding: 10px 14px;
  background: var(--ce-bg-soft, #f5f7fb);
  border-radius: 10px;
  font-size: 0.85rem;
}
.termine-detected-pill {
  display: inline-block;
  margin: 3px 4px 3px 8px;
  padding: 3px 10px;
  background: #fff;
  border: 1px solid var(--ce-border, #e5e8f0);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--ce-ink, #2a2a3a);
}
.termine-cats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.termine-cat-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
}
.termine-cat-color {
  width: 48px;
  height: 38px;
  padding: 2px;
  border: 1px solid var(--ce-border, #e5e8f0);
  border-radius: 8px;
  cursor: pointer;
  background: #fff;
}
.termine-cat-del {
  width: 38px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
}
.se-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 6px 0;
}
.se-toggle input[type="checkbox"] { accent-color: var(--ce-signal, #C6073D); width: 18px; height: 18px; }

/* ════════════════════════════════════════════════════════════
   NEUE BLOCK-TYPEN (Frontend)
   ════════════════════════════════════════════════════════════ */

/* ---- Abstandshalter ---- */
.ce-spacer { width: 100%; }

/* ---- Zwei Spalten (Bild + Text) ---- */
.ce-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  margin: 2rem 0;
}
.ce-columns-right { direction: rtl; }
.ce-columns-right > * { direction: ltr; }
.ce-cols-media img {
  width: 100%; height: auto; border-radius: var(--r-lg);
  display: block; box-shadow: var(--shadow-soft, 0 10px 30px rgba(0,0,0,.08));
}
.ce-cols-text h3 {
  font-family: var(--font-display); font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight: 600; margin-bottom: .6em; color: var(--ink);
}
.ce-cols-body { color: var(--ink-soft); line-height: 1.7; }
.ce-cols-body p { margin-bottom: 1em; }
@media (max-width: 760px) {
  .ce-columns { grid-template-columns: 1fr; }
  .ce-columns-right { direction: ltr; }
}

/* ---- Großes Zitat ---- */
.ce-quote-spotlight {
  --quote-accent: var(--accent);
  max-width: 760px; margin: 2.5rem auto; padding: clamp(24px,4vw,44px);
  text-align: center; position: relative;
}
.ce-quote-spotlight blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  line-height: 1.4; color: var(--ink); font-weight: 500;
  position: relative; margin: 0 0 1.2em;
}
.ce-quote-spotlight blockquote::before {
  content: '“'; font-size: 3em; color: var(--quote-accent);
  position: absolute; top: -.4em; left: 50%; transform: translateX(-50%);
  opacity: .25; line-height: 1;
}
.ce-quote-spotlight figcaption {
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.ce-quote-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.ce-quote-meta { display: flex; flex-direction: column; text-align: left; }
.ce-quote-meta strong { color: var(--ink); font-weight: 600; }
.ce-quote-role { font-size: .85rem; color: var(--ink-faint); }

/* ---- Einbettung (iFrame) ---- */
.ce-embed-block { margin: 2rem 0; }
.ce-embed-heading {
  font-family: var(--font-display); font-size: clamp(1.2rem,2.4vw,1.7rem);
  font-weight: 600; margin-bottom: 1rem; color: var(--ink);
}
.ce-embed-frame {
  position: relative; width: 100%; height: 0; overflow: hidden;
  border-radius: var(--r-lg); background: var(--glass-lo);
}
.ce-embed-frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* ---- Bild-Raster (Galerie) ---- */
.ce-gallery-grid-block { margin: 2rem 0; }
.ce-gg-heading {
  font-family: var(--font-display); font-size: clamp(1.2rem,2.4vw,1.7rem);
  font-weight: 600; margin-bottom: .5rem; color: var(--ink);
}
.ce-gg-sub { color: var(--ink-soft); margin-bottom: 1.2rem; }
.ce-gg-grid { display: grid; gap: 12px; }
.ce-gg-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.ce-gg-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.ce-gg-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.ce-gg-item { margin: 0; overflow: hidden; border-radius: var(--r-md); }
.ce-gg-link { display: block; overflow: hidden; border-radius: var(--r-md); }
.ce-gg-item img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block;
  transition: transform .4s var(--ease);
}
.ce-gg-item:hover img { transform: scale(1.06); }
.ce-gg-item figcaption { font-size: .82rem; color: var(--ink-faint); padding: 6px 2px; }
@media (max-width: 760px) {
  .ce-gg-grid[data-cols="3"], .ce-gg-grid[data-cols="4"] { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Lightbox ---- */
.ce-lightbox {
  position: fixed; inset: 0; z-index: 300; display: none;
  align-items: center; justify-content: center; padding: 30px;
  background: rgba(10,6,8,.88);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ce-lightbox.open { display: flex; animation: bmFade .25s var(--ease); }
.ce-lightbox img { max-width: 92vw; max-height: 82vh; border-radius: var(--r-md); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.ce-lightbox-cap { position: absolute; bottom: 24px; left: 0; right: 0; text-align: center; color: #fff; font-size: .9rem; }
.ce-lightbox-close {
  position: absolute; top: 20px; right: 24px; width: 44px; height: 44px;
  border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,.15);
  color: #fff; display: flex; align-items: center; justify-content: center;
}
.ce-lightbox-close svg { width: 20px; height: 20px; }
.ce-lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.15); color: #fff; font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
}
.ce-lightbox-prev { left: 20px; }
.ce-lightbox-next { right: 20px; }

/* ---- Akkordeon (allgemein) ---- */
.ce-accordion-block { margin: 2rem 0; }
.ce-acc-heading {
  font-family: var(--font-display); font-size: clamp(1.2rem,2.4vw,1.7rem);
  font-weight: 600; margin-bottom: 1rem; color: var(--ink);
}
.ce-acc-list { display: flex; flex-direction: column; gap: 10px; }
.ce-acc-item {
  border: 1px solid var(--glass-edge); border-radius: var(--r-md);
  background: var(--glass); overflow: hidden;
}
.ce-acc-summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; cursor: pointer; font-weight: 600; color: var(--ink);
  list-style: none; transition: background .15s;
}
.ce-acc-summary::-webkit-details-marker { display: none; }
.ce-acc-summary:hover { background: var(--glass-strong); }
.ce-acc-chev { transition: transform .25s var(--ease); flex-shrink: 0; color: var(--accent); }
.ce-acc-item[open] .ce-acc-chev { transform: rotate(180deg); }
.ce-acc-body { padding: 0 20px 18px; color: var(--ink-soft); line-height: 1.7; }
.ce-acc-body p { margin-bottom: 1em; }

/* ---- Reiter / Tabs ---- */
.ce-tabs-block { margin: 2rem 0; }
.ce-tabs-heading {
  font-family: var(--font-display); font-size: clamp(1.2rem,2.4vw,1.7rem);
  font-weight: 600; margin-bottom: 1rem; color: var(--ink);
}
.ce-tabs-nav {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px;
  border-bottom: 1px solid var(--glass-edge);
}
.ce-tab-btn {
  padding: 10px 18px; border: none; background: none; cursor: pointer;
  font: inherit; font-weight: 600; font-size: .9rem; color: var(--ink-faint);
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s;
}
.ce-tab-btn:hover { color: var(--ink); }
.ce-tab-btn.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.ce-tab-panel { color: var(--ink-soft); line-height: 1.7; animation: bmFade .25s var(--ease); }
.ce-tab-panel p { margin-bottom: 1em; }

/* ---- Zahlen-Block (Counter) ---- */
.ce-stats-block { margin: 2.5rem 0; }
.ce-stats-heading {
  font-family: var(--font-display); font-size: clamp(1.2rem,2.4vw,1.7rem);
  font-weight: 600; margin-bottom: 1.5rem; color: var(--ink); text-align: center;
}
.ce-stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(20px, 4vw, 40px);
}
.ce-stat-item { text-align: center; }
.ce-stat-value {
  font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 700; color: var(--accent); line-height: 1; display: flex;
  align-items: baseline; justify-content: center; gap: 2px;
}
.ce-stat-prefix, .ce-stat-suffix { font-size: .6em; }
.ce-stat-label { margin-top: .5rem; color: var(--ink-soft); font-size: .95rem; }

/* ---- Zeitstrahl ---- */
.ce-timeline-block { margin: 2.5rem 0; }
.ce-tl-heading {
  font-family: var(--font-display); font-size: clamp(1.2rem,2.4vw,1.7rem);
  font-weight: 600; margin-bottom: .5rem; color: var(--ink);
}
.ce-tl-sub { color: var(--ink-soft); margin-bottom: 1.5rem; }
.ce-tl-track { position: relative; padding-left: 8px; }
.ce-tl-track::before {
  content: ''; position: absolute; left: 19px; top: 8px; bottom: 8px;
  width: 2px; background: var(--glass-edge);
}
.ce-tl-step { position: relative; padding-left: 52px; padding-bottom: 28px; }
.ce-tl-step:last-child { padding-bottom: 0; }
.ce-tl-dot {
  position: absolute; left: 0; top: 0; width: 40px; height: 40px;
  border-radius: 50%; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .9rem; z-index: 1;
  box-shadow: 0 0 0 4px var(--bg, #fff);
}
.ce-tl-content h4 {
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 600;
  color: var(--ink); margin-bottom: .3em;
}
.ce-tl-content p { color: var(--ink-soft); line-height: 1.6; margin: 0; }

/* ---- Button-Leiste (CTA) ---- */
.ce-cta-block { margin: 2rem 0; }
.ce-cta-center { text-align: center; }
.ce-cta-heading {
  font-family: var(--font-display); font-size: clamp(1.3rem,2.6vw,1.9rem);
  font-weight: 600; margin-bottom: .5em; color: var(--ink);
}
.ce-cta-text { color: var(--ink-soft); margin-bottom: 1.2rem; line-height: 1.6; }
.ce-cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.ce-cta-center .ce-cta-row { justify-content: center; }
.ce-cta-btn {
  display: inline-flex; align-items: center; padding: 12px 26px;
  border-radius: 999px; font-weight: 600; font-size: .95rem;
  text-decoration: none; transition: transform .15s, box-shadow .15s;
}
.ce-cta-filled { background: var(--accent); color: #1c1916; }
.ce-cta-filled:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(255,204,0,.35); }
.ce-cta-outline { border: 1.5px solid var(--accent); color: var(--ink); }
.ce-cta-outline:hover { background: var(--accent); color: #1c1916; }

/* ---- Logo-Leiste ---- */
.ce-logobar-block { margin: 2rem 0; text-align: center; }
.ce-logobar-heading {
  font-size: .85rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-faint); margin-bottom: 1.2rem; font-weight: 600;
}
.ce-logobar-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(24px, 5vw, 56px);
}
.ce-logo-item img { height: 38px; width: auto; display: block; }
.ce-logobar-block.is-grayscale .ce-logo-item img {
  filter: grayscale(1); opacity: .6; transition: filter .25s, opacity .25s;
}
.ce-logobar-block.is-grayscale .ce-logo-item:hover img { filter: grayscale(0); opacity: 1; }

/* ---- Preis-Tabelle ---- */
.ce-pricing-block { margin: 2.5rem 0; }
.ce-pricing-heading {
  font-family: var(--font-display); font-size: clamp(1.3rem,2.6vw,1.9rem);
  font-weight: 600; margin-bottom: .5rem; color: var(--ink); text-align: center;
}
.ce-pricing-sub { color: var(--ink-soft); margin-bottom: 1.8rem; text-align: center; }
.ce-pricing-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px; align-items: stretch;
}
.ce-price-card {
  position: relative; border: 1px solid var(--glass-edge); border-radius: var(--r-lg);
  background: var(--glass); padding: 28px 24px; display: flex; flex-direction: column;
}
.ce-price-card.is-featured {
  border-color: var(--accent); border-width: 2px;
  box-shadow: 0 12px 36px rgba(255,204,0,.18);
}
.ce-price-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #1c1916; font-size: .72rem; font-weight: 700;
  padding: 4px 14px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em;
}
.ce-price-name { font-weight: 600; font-size: 1.1rem; color: var(--ink); margin-bottom: .4rem; }
.ce-price-amount {
  font-family: var(--font-display); font-size: 2.4rem; font-weight: 700;
  color: var(--ink); line-height: 1; margin-bottom: 1.2rem;
}
.ce-price-period { font-size: .9rem; font-weight: 400; color: var(--ink-faint); }
.ce-price-features { list-style: none; padding: 0; margin: 0 0 1.5rem; flex: 1; }
.ce-price-features li {
  display: flex; align-items: flex-start; gap: 8px; padding: 7px 0;
  color: var(--ink-soft); font-size: .92rem; line-height: 1.4;
}
.ce-price-check { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.ce-price-btn {
  display: block; text-align: center; padding: 12px; border-radius: 999px;
  background: var(--accent); color: #1c1916; font-weight: 600; text-decoration: none;
  transition: transform .15s;
}
.ce-price-btn:hover { transform: translateY(-2px); }
.ce-price-card:not(.is-featured) .ce-price-btn {
  background: transparent; border: 1.5px solid var(--accent); color: var(--ink);
}

/* ---- Download-Box ---- */
.ce-download-block { margin: 2rem 0; }
.ce-dl-heading {
  font-family: var(--font-display); font-size: clamp(1.2rem,2.4vw,1.7rem);
  font-weight: 600; margin-bottom: 1rem; color: var(--ink);
}
.ce-dl-list { display: flex; flex-direction: column; gap: 10px; }
.ce-dl-item {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  border: 1px solid var(--glass-edge); border-radius: var(--r-md);
  background: var(--glass); text-decoration: none; transition: border-color .15s, transform .12s;
}
.ce-dl-item:hover { border-color: var(--accent); transform: translateX(3px); }
.ce-dl-icon {
  width: 44px; height: 44px; border-radius: 50%; background: var(--accent-bg);
  color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ce-dl-meta { flex: 1; display: flex; flex-direction: column; }
.ce-dl-meta strong { color: var(--ink); font-weight: 600; }
.ce-dl-desc { font-size: .82rem; color: var(--ink-faint); }
.ce-dl-type {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: var(--glass-lo); color: var(--ink-soft); padding: 4px 10px; border-radius: 6px; flex-shrink: 0;
}

/* ---- Cookie-Hinweis-Banner ---- */
.gkmi-cookie-banner {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(20px);
  z-index: 250; max-width: 560px; width: calc(100% - 32px);
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px; border-radius: var(--r-lg);
  background: var(--glass-strong); border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(20px) saturate(118%); backdrop-filter: blur(20px) saturate(118%);
  box-shadow: 0 16px 50px rgba(0,0,0,.2);
  opacity: 0; transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.gkmi-cookie-banner.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.gkmi-cookie-text { flex: 1; margin: 0; font-size: .88rem; color: var(--ink-soft); line-height: 1.5; }
.gkmi-cookie-text a { color: var(--accent); text-decoration: underline; }
.gkmi-cookie-btn {
  flex-shrink: 0; padding: 10px 22px; border: none; cursor: pointer;
  border-radius: 999px; background: var(--accent); color: #1c1916;
  font-weight: 600; font-size: .88rem; transition: transform .15s;
}
.gkmi-cookie-btn:hover { transform: translateY(-1px); }
@media (max-width: 540px) {
  .gkmi-cookie-banner { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ════════════════════════════════════════════════════════════
   KOMPAKTERE DARSTELLUNG (Desktop + Tablet, ab 821px)
   ------------------------------------------------------------
   Ziel: Seite wirkt aufgeräumter — ~12% kleinere Schriften,
   begrenzte Lesezeilen-Breite, etwas weniger Weißraum.
   Handy / schmale Hochkant-Ansicht (< 821px) bleibt unverändert.
   ════════════════════════════════════════════════════════════ */
@media (min-width: 821px) {

  /* 1) Inhalts-Breite begrenzen ------------------------------------
     Alle direkten Block-Kinder einer View auf --maxw zentrieren.
     Wichtig v.a. für die Startseite (viewStart hat keinen
     .workspace-grid-container, daher liefen Panels vorher voll breit). */
  .category-view > .glass-panel,
  .category-view > .about-rich,
  .category-view > .premium-card,
  .category-view > .statement-banner,
  .category-view > .ce-accordion-block,
  .category-view > .ce-tabs-block,
  .category-view > .ce-quote-spotlight,
  .category-view > .ce-embed-block,
  .category-view > .ce-gallery-grid-block,
  .category-view > .ce-stats-block,
  .category-view > .ce-timeline-block,
  .category-view > .ce-cta-block,
  .category-view > .ce-logobar-block,
  .category-view > .ce-pricing-block,
  .category-view > .ce-download-block,
  .category-view > .ce-columns,
  .category-view > section {
    max-width: var(--maxw);
    margin-inline: auto;
  }

  /* 2) Lesezeilen begrenzen ----------------------------------------
     Fließtext in den Text-Panels soll nicht über die ganze Breite
     laufen. Die Karte bleibt breit, der Text wird komfortabel
     (~760px) und links ausgerichtet gehalten. */
  .about-rich p,
  .about-rich ul,
  .about-rich ol,
  .about-rich h3 {
    max-width: 760px;
  }
  .about-rich:not(.about-rich-center) p,
  .about-rich:not(.about-rich-center) ul,
  .about-rich:not(.about-rich-center) ol {
    margin-left: 0;
    margin-right: auto;
  }
  /* Zentrierte Prosa bleibt mittig, nur schmaler */
  .about-rich-center p,
  .about-rich-center h3 { margin-left: auto; margin-right: auto; }

  /* 3) Schriften ~12% kleiner --------------------------------------
     html-Basisgröße auf 88% senkt alle rem-Werte und die
     clamp()-Obergrenzen gleichmäßig. Media-Query-Breakpoints
     bleiben davon unberührt (sie referenzieren die Browser-Basis). */
  html { font-size: 88%; }

  /* Zusätzlich die vw-Anteile der größten Headlines dämpfen,
     damit sie auf sehr breiten Monitoren nicht wieder hochschießen. */
  .hero-title    { font-size: clamp(1.6rem, 4.4vw, 3.3rem); }
  .section-title { font-size: clamp(1.45rem, 3.2vw, 2.4rem); }

  /* 4) Weißraum etwas reduzieren ------------------------------------ */
  .category-view > section { padding-block: 26px; }
  .hero-banner { padding: 30px 0 22px; }
  .statement-banner { margin: 6px auto 30px; }
}

/* Sehr breite Monitore: Inhalt nicht unnötig auseinanderziehen */
@media (min-width: 1500px) {
  :root { --maxw: 1120px; }
}

/* ════════════════════════════════════════════════════════════
   CONSENT-MANAGEMENT (Banner + Einstellungs-Dialog + Platzhalter)
   Additiv – nur aktiv bei cookie.mode = "consent". Nutzt die CI-
   Variablen mit Fallbacks, damit nichts vom Theme abhängt.
   ════════════════════════════════════════════════════════════ */
.gkmi-consent { position: fixed; inset: 0; z-index: 300; pointer-events: none; }
.gkmi-consent[hidden] { display: none; }

.gkmi-consent-overlay {
  position: fixed; inset: 0; background: rgba(20,16,14,.45);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .3s var(--ease, ease); pointer-events: auto;
}
.gkmi-consent-overlay.is-visible { opacity: 1; }
.gkmi-consent-overlay[hidden] { display: none; }

.gkmi-consent-banner {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(20px);
  width: min(720px, calc(100% - 32px));
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px;
  padding: 18px 22px; border-radius: var(--r-lg, 18px);
  background: var(--glass-strong, rgba(255,255,255,.92));
  border: 1px solid var(--glass-edge, rgba(0,0,0,.08));
  -webkit-backdrop-filter: blur(20px) saturate(118%); backdrop-filter: blur(20px) saturate(118%);
  box-shadow: 0 16px 50px rgba(0,0,0,.22);
  opacity: 0; transition: opacity .3s var(--ease, ease), transform .3s var(--ease, ease);
  pointer-events: auto;
}
.gkmi-consent-banner.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.gkmi-consent-banner[hidden] { display: none; }
.gkmi-consent-banner-body { flex: 1 1 320px; min-width: 0; }
.gkmi-consent-title { margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; color: var(--ink, #1c1916); }
.gkmi-consent-text { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--ink-soft, #4a443d); }
.gkmi-consent-text a { color: var(--accent, #c6073d); text-decoration: underline; }

.gkmi-consent-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.gkmi-consent-btn {
  flex: 0 0 auto; padding: 10px 20px; border-radius: 999px; cursor: pointer;
  font-weight: 600; font-size: .88rem; border: 1px solid transparent;
  transition: transform .15s var(--ease, ease), border-color .15s, color .15s;
}
.gkmi-consent-btn:hover { transform: translateY(-1px); }
.gkmi-consent-btn.solid { background: var(--accent, #c6073d); color: #fff; }
.gkmi-consent-btn.ghost { background: transparent; color: var(--ink, #1c1916); border-color: var(--glass-edge, rgba(0,0,0,.2)); }
.gkmi-consent-btn.ghost:hover { border-color: var(--accent, #c6073d); color: var(--accent, #c6073d); }

.gkmi-consent-modal {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -46%);
  width: min(560px, calc(100% - 32px)); max-height: min(86vh, 720px); overflow: auto;
  background: var(--glass-strong, rgba(255,255,255,.97));
  border: 1px solid var(--glass-edge, rgba(0,0,0,.08)); border-radius: var(--r-lg, 18px);
  -webkit-backdrop-filter: blur(24px) saturate(120%); backdrop-filter: blur(24px) saturate(120%);
  box-shadow: 0 24px 70px rgba(0,0,0,.3);
  opacity: 0; transition: opacity .3s var(--ease, ease), transform .3s var(--ease, ease);
  pointer-events: auto;
}
.gkmi-consent-modal.is-visible { opacity: 1; transform: translate(-50%, -50%); }
.gkmi-consent-modal[hidden] { display: none; }
.gkmi-consent-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px 8px; }
.gkmi-consent-modal-head h2 { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--ink, #1c1916); }
.gkmi-consent-close { background: none; border: none; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--ink-soft, #4a443d); padding: 0 4px; }
.gkmi-consent-close:hover { color: var(--accent, #c6073d); }
.gkmi-consent-modal-body { padding: 6px 22px 8px; }
.gkmi-consent-modal-body > .gkmi-consent-text { margin-bottom: 14px; }
.gkmi-consent-modal .gkmi-consent-actions { padding: 8px 22px 22px; }

.gkmi-consent-cat { padding: 12px 0; border-top: 1px solid var(--glass-edge, rgba(0,0,0,.08)); }
.gkmi-consent-cat-head { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; color: var(--ink, #1c1916); }
.gkmi-consent-cat-head input { width: 18px; height: 18px; accent-color: var(--accent, #c6073d); cursor: pointer; }
.gkmi-consent-cat-head input:disabled { cursor: not-allowed; opacity: .7; }
.gkmi-consent-cat-name { flex: 1; }
.gkmi-consent-cat-state { font-size: .78rem; font-weight: 600; color: var(--accent, #c6073d); background: rgba(198,7,61,.1); padding: 2px 10px; border-radius: 999px; }
.gkmi-consent-cat-desc { margin: 6px 0 0 28px; font-size: .84rem; line-height: 1.5; color: var(--ink-soft, #4a443d); }

.footer-consent-reopen { cursor: pointer; }

.gkmi-embed-guard { width: 100%; }
.gkmi-consent-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 14px; padding: 32px 24px; min-height: min(var(--gkmi-cal-h, 520px), 520px);
  border: 1px dashed var(--glass-edge, rgba(0,0,0,.2)); border-radius: var(--r-lg, 18px);
  background: var(--glass-strong, rgba(255,255,255,.55));
}
.gkmi-cp-icon { font-size: 2.4rem; line-height: 1; }
.gkmi-cp-text { max-width: 520px; margin: 0; font-size: .92rem; line-height: 1.55; color: var(--ink-soft, #4a443d); }
.gkmi-cp-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.gkmi-cp-load, .gkmi-cp-settings {
  padding: 10px 20px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: .88rem;
  border: 1px solid transparent; transition: transform .15s var(--ease, ease), border-color .15s, color .15s;
}
.gkmi-cp-load { background: var(--accent, #c6073d); color: #fff; }
.gkmi-cp-load:hover { transform: translateY(-1px); }
.gkmi-cp-settings { background: transparent; color: var(--ink, #1c1916); border-color: var(--glass-edge, rgba(0,0,0,.2)); }
.gkmi-cp-settings:hover { border-color: var(--accent, #c6073d); color: var(--accent, #c6073d); }

@media (max-width: 600px) {
  .gkmi-consent-banner { flex-direction: column; align-items: stretch; text-align: left; left: 0; bottom: 0; width: 100%; transform: translateY(20px); border-radius: var(--r-lg, 18px) var(--r-lg, 18px) 0 0; }
  .gkmi-consent-banner.is-visible { transform: translateY(0); }
  .gkmi-consent-btn { flex: 1 1 auto; text-align: center; }
}