/* ============================================================
   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}
html,body{height:100%}
body{
  font-family:var(--font-body);
  background:var(--bg);color:var(--ink);
  line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow:hidden;
  transition:background-color .5s var(--ease),color .5s var(--ease);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::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}

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

.bg-aura{position:fixed;inset:0;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;
  padding:13px clamp(14px,3vw,22px);
  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}
.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);
}
.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}

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

/* ====== 6. VIEWPORT / SPA-VIEWS ====== */
.app-viewport{position:fixed;inset:0;z-index:1}
.category-view{
  position:absolute;inset:0;
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  /* Safe-Area für iPhones mit Notch / Dynamic Island */
  padding:
    calc(var(--head-h) + 26px)
    max(clamp(16px,4vw,26px), env(safe-area-inset-right,0px))
    96px
    max(clamp(16px,4vw,26px), env(safe-area-inset-left,0px));
  display:none;
  /* iOS: Scroll-Bounce am Rand abfangen, sodass die fixed-Hintergründe
     nicht durchblitzen */
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.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:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 32%,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}
.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%);
}
[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 .45s var(--ease);
}
@keyframes bmRise{
  from{opacity:0;transform:translateY(24px) scale(.985);filter:blur(6px)}
  to{opacity:1;transform:none;filter:none}
}
.blog-modal-close{
  position:absolute;top:14px;right:14px;z-index:3;
  width:40px;height:40px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;font-size:1.4rem;line-height:1;
  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);
}
.blog-modal-close:hover{transform:scale(1.08)}
.blog-modal-scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:clamp(26px,4vw,44px)}
.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}
  .header-instagram{display:none}
  .header-container{justify-content:center}
  .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; 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{
  position: fixed; inset: -10% -10% -10% -10%;
  z-index: -1;
  pointer-events: none;
  background-image: url("asset/stone-texture.svg");
  background-size: 2560px 1440px;
  background-repeat: repeat;
  opacity: 0.06;
  mix-blend-mode: multiply;
  will-change: transform;
  transform: translate3d(0,0,0);
  transition: opacity .3s ease;
}
[data-theme="dark"] .gkmi-stone-bg{
  opacity: 0.32;
  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. */
@supports (animation-timeline: scroll()){
  .gkmi-stone-bg{
    animation: gkmiStoneParallax linear both;
    animation-timeline: scroll();
    animation-range: 0 100vh;
  }
  @keyframes gkmiStoneParallax{
    from{ transform: translate3d(0, 0, 0); }
    to  { transform: translate3d(0, -60px, 0); }
  }
}

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

/* 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 */
@media (display-mode: standalone){
  .fixed-header{ padding-top: max(13px, env(safe-area-inset-top,13px)); }
}

/* ============================================================
   MEHR-TAB: Podcast · Teilnehmerstimmen · Audio-Player
   ------------------------------------------------------------
   Diese Klassen werden von content/blocks.php gerendert
   (ce_block_podcast, ce_block_testimonials, ce_player) und
   benötigen das passende Liquid-Glass-Layout.
   ============================================================ */

.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{
  display: flex; flex-direction: column;
  gap: 14px;
  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 Episode-Karten + Cover-Karte --- */
.episode{
  display: flex; align-items: center; gap: 18px;
  padding: 18px 22px;
  flex-wrap: wrap;
}
.episode h4{
  margin: 0;
  font-family: var(--font-display, 'Fraunces', serif);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
  flex: 0 0 auto;
  min-width: 160px;
}
.episode .gkmi-player{ flex: 1 1 240px; min-width: 0; }

/* Cover-Panel (oben, mit Bild) */
.podcast-top{
  align-items: stretch;
  padding: 0;
  overflow: hidden;
}
.podcast-top img{
  width: 100%; max-width: 260px;
  height: auto; object-fit: cover;
  border-radius: 0;
  flex: 0 0 auto;
}
.podcast-top > div{
  padding: 20px 26px;
  display: flex; flex-direction: column; justify-content: center;
}
.podcast-top h4{
  font-family: var(--font-display, 'Fraunces', serif);
  font-weight: 600; font-size: 1.15rem;
  color: var(--ink);
}

/* --- Teilnehmerstimmen (Stimmen-Grid) --- */
.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;
}
.stimme img{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.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;
}

/* ============================================================
   GKMI Audio-Player (Custom-Look, Liquid-Glass)
   ============================================================ */
.gkmi-player{
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  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);
}
.gkmi-player audio{ display: none; }   /* native Controls weg, wir bauen unser eigenes UI */

.gkmi-pp{
  flex: 0 0 36px;
  width: 36px; height: 36px;
  border: none; border-radius: 50%;
  background: var(--c-signal, #C6073D);
  color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px -8px rgba(198,7,61,.5);
  transition: transform .2s var(--ease, cubic-bezier(.16,1,.3,1)), background .2s;
  position: relative;
}
.gkmi-pp:hover{ transform: scale(1.06); }
/* Play-Dreieck via CSS */
.gkmi-pp::before{
  content: '';
  width: 0; height: 0;
  border-left: 10px solid #fff;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  margin-left: 3px;
  transition: opacity .2s, transform .2s;
}
/* Pause-Strich via CSS – wird beim Abspielen aktiviert */
.gkmi-pp.is-playing::before{
  width: 4px; height: 14px;
  border: none;
  background: #fff;
  margin: 0 2px 0 0;
  box-shadow: 7px 0 0 0 #fff;
}

.gkmi-bar{
  flex: 1; min-width: 60px;
  height: 4px; border-radius: 999px;
  background: rgba(92,18,51,.18);
  position: relative; cursor: pointer;
  overflow: hidden;
}
.gkmi-fill{
  position: absolute; inset: 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: 38px; text-align: right;
}

/* Mobile: Podcast-Cover wird einspaltig (Bild oben, Text drunter) */
@media (max-width: 720px){
  .podcast-top{ flex-direction: column; }
  .podcast-top img{ max-width: 100%; }
  .podcast-top > div{ padding: 18px 22px; }
  .episode{ gap: 14px; padding: 14px 18px; }
  .episode h4{ flex: 1 1 100%; min-width: 0; }
}