/* Layout concept: editorial clinic — calm left-aligned serif headlines, generous air,
   the plus-cross from the KuRS-Care logo as the one recurring brand device.
   Deliberately single-theme (light), like the live website will be. */
:root{
  color-scheme: light;
  /* colour */
  --plum-950:#240A1D;
  --plum-900:#2F0C26;
  --plum-800:#44103A;
  --plum-700:#5E0E4A;
  --plum-600:#7A1E63;
  --magenta:#B80E6B;
  --magenta-bright:#E3197F;
  --magenta-soft:#F7DDEA;
  --teal:#0E9C8E;
  --teal-ink:#0A7469;
  --teal-soft:#DDF3F0;
  --ink:#22161F;
  --ink-2:#554650;
  --ink-3:#6E5F69;
  --paper:#FAF7F8;
  --paper-2:#F3ECEF;
  --line:#E5DAE0;
  --line-strong:#CDBCC6;
  --white:#FFFFFF;
  --on-dark:#FBF3F8;
  --on-dark-2:#D9C3D2;
  --on-dark-line:rgba(251,243,248,.16);
  /* type */
  --f-display:'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --f-body:'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
  /* shape */
  --r-sm:8px; --r-md:14px; --r-lg:22px;
  --shadow-1:0 1px 2px rgba(36,10,29,.06), 0 2px 8px rgba(36,10,29,.05);
  --shadow-2:0 2px 6px rgba(36,10,29,.06), 0 18px 40px -12px rgba(36,10,29,.22);
  --maxw:1200px;
  --gutter:clamp(16px, 4vw, 40px);
  --header-h:76px;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important; transition:none!important} }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
p{margin:0 0 1em} p:last-child{margin-bottom:0}
ul,ol{margin:0; padding:0; list-style:none}
h1,h2,h3,h4{font-family:var(--f-display); font-weight:500; line-height:1.12; margin:0; color:var(--ink); letter-spacing:-.015em; text-wrap:balance}
h1{font-size:clamp(40px, 5.4vw, 70px); letter-spacing:-.025em; line-height:1.03}
h2{font-size:clamp(30px, 3.4vw, 46px)}
h3{font-size:clamp(22px, 2vw, 27px)}
h4{font-size:20px}
em{font-style:italic}
h1 em, h2 em{color:var(--magenta); font-style:normal}
strong{font-weight:650}
:focus-visible{outline:3px solid var(--teal); outline-offset:3px; border-radius:4px}
.sr-only{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:12px; top:-60px; background:var(--plum-700); color:#fff; padding:10px 16px; border-radius:var(--r-sm); z-index:100; text-decoration:none; font-weight:600}
.skip:focus{top:12px}

.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter)}
.section{padding-block:clamp(72px, 9vw, 120px)}
.section--tint{background:var(--paper-2)}
.section--white{background:var(--white)}
.section--dark{background:var(--plum-900); color:var(--on-dark)}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:var(--on-dark)}
.section--dark h2 em{color:#FF8FC4}
.section + .section--tint, .section--tint + .section{border-top:0}

/* ---------- small type ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--magenta);
  margin-bottom:18px;
}
.eyebrow::before{content:""; width:14px; height:14px; flex:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect x='4.6' y='0' width='4.8' height='14' rx='2.4' fill='%23E3197F'/%3E%3Crect x='0' y='4.6' width='14' height='4.8' rx='2.4' fill='%230E9C8E' fill-opacity='.9'/%3E%3C/svg%3E") center/contain no-repeat}
.section--dark .eyebrow{color:#FF8FC4}
.lede{font-size:clamp(18px, 1.5vw, 21px); line-height:1.55; color:var(--ink-2); max-width:58ch}
.section--dark .lede{color:var(--on-dark-2)}
.muted{color:var(--ink-3)}
.small{font-size:14.5px}
.head{max-width:760px; margin-bottom:clamp(40px, 5vw, 64px)}
.head h2 + .lede, .head h1 + .lede{margin-top:20px}
.head--split{max-width:none; display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:end}
.head--split .lede{margin:0}

/* ---------- buttons & links ---------- */
.btn{
  --bg:var(--plum-700); --fg:#fff; --bd:var(--plum-700);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:50px; padding:12px 24px; border-radius:999px; border:1.5px solid var(--bd);
  background:var(--bg); color:var(--fg); font:600 16px/1.2 var(--f-body); text-decoration:none; cursor:pointer;
  transition:background .18s, color .18s, border-color .18s, transform .18s;
}
.btn:hover{--bg:var(--plum-600); --bd:var(--plum-600)}
.btn:active{transform:translateY(1px)}
.btn svg{width:18px; height:18px; flex:none}
.btn--ghost{--bg:transparent; --fg:var(--ink); --bd:var(--line-strong)}
.btn--ghost:hover{--bg:var(--white); --fg:var(--plum-700); --bd:var(--plum-700)}
.btn--light{--bg:#fff; --fg:var(--plum-800); --bd:#fff}
.btn--light:hover{--bg:var(--magenta-soft); --bd:var(--magenta-soft); --fg:var(--plum-900)}
.btn--outline-light{--bg:transparent; --fg:var(--on-dark); --bd:rgba(251,243,248,.45)}
.btn--outline-light:hover{--bg:rgba(251,243,248,.08); --fg:#fff; --bd:#fff}
.btn--sm{min-height:40px; padding:8px 18px; font-size:14.5px}
.btn--block{width:100%}
.btn-row{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.link{
  display:inline-flex; align-items:center; gap:8px; font-weight:650; color:var(--plum-700); text-decoration:none;
  border-bottom:1.5px solid color-mix(in srgb, var(--magenta) 45%, transparent); padding-bottom:2px; transition:border-color .18s, gap .18s;
}
.link:hover{border-color:var(--magenta); gap:12px}
.link svg{width:16px; height:16px}
.section--dark .link{color:var(--on-dark); border-color:rgba(255,143,196,.5)}

/* ---------- announcement ---------- */
.announce{background:var(--plum-900); color:var(--on-dark); font-size:14.5px}
.announce .wrap{display:flex; align-items:center; justify-content:center; gap:14px; min-height:42px; padding-block:8px; flex-wrap:wrap; text-align:center}
.announce strong{color:#fff}
.announce a{color:#FF9FCB; font-weight:650; text-decoration:none; border-bottom:1px solid rgba(255,159,203,.5)}
.announce a:hover{border-color:#FF9FCB}
.announce__short{display:none}
.swipe-hint{display:none}
.announce .dot{width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px rgba(14,156,142,.25); flex:none}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:40;
  background:rgba(250,247,248,.9); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid transparent; transition:border-color .2s, box-shadow .2s;
}
.site-header.is-scrolled{border-color:var(--line); box-shadow:0 6px 20px -16px rgba(36,10,29,.35)}
.site-header .wrap{display:flex; align-items:center; gap:28px; height:var(--header-h)}
.brand{display:flex; align-items:center; flex:none}
.brand{padding-block:4px}
.brand img{height:48px; width:auto; transform:translateY(-2px)}
.nav{margin-left:auto}
.nav ul{display:flex; align-items:center; gap:4px}
.nav a{
  position:relative; display:block; padding:10px 14px; border-radius:999px;
  font-size:15.5px; font-weight:600; color:var(--ink-2); text-decoration:none; transition:color .15s, background .15s;
}
.nav a:hover{color:var(--plum-700); background:var(--paper-2)}
.nav a[aria-current="page"]{color:var(--plum-700)}
.nav a[aria-current="page"]::after{content:""; position:absolute; left:14px; right:14px; bottom:3px; height:2px; border-radius:2px; background:var(--magenta)}
.header-actions{display:flex; align-items:center; gap:10px}
.cart-link{
  position:relative; width:46px; height:46px; display:grid; place-items:center; border-radius:50%;
  color:var(--ink); text-decoration:none; transition:background .15s;
}
.cart-link:hover{background:var(--paper-2)}
.cart-link svg{width:22px; height:22px}
.cart-count{
  position:absolute; top:4px; right:2px; min-width:19px; height:19px; padding:0 5px; border-radius:10px;
  background:var(--magenta); color:#fff; font-size:11.5px; font-weight:700; line-height:19px; text-align:center;
}
.menu-btn{display:none; width:46px; height:46px; border-radius:50%; border:1.5px solid var(--line-strong); background:transparent; cursor:pointer; place-items:center; color:var(--ink)}
.menu-btn svg{width:22px; height:22px}

/* ---------- page hero (subpages) ---------- */
.page-hero{padding-block:clamp(56px, 7vw, 96px) clamp(48px, 6vw, 80px); position:relative; overflow:hidden}
.page-hero .crumbs{font-size:14px; color:var(--ink-3); margin-bottom:26px}
.page-hero .crumbs a{color:var(--ink-3); text-decoration:none}
.page-hero .crumbs a:hover{color:var(--plum-700)}
.page-hero .crumbs span{margin-inline:8px; color:var(--line-strong)}
.page-hero h1{max-width:18ch}
.page-hero .lede{margin-top:24px}
.page-hero .btn-row{margin-top:34px}
.page-hero__grid{display:grid; grid-template-columns:1.25fr .75fr; gap:56px; align-items:center}
.page-hero__aside{justify-self:end; width:100%; max-width:420px}

.subnav{position:sticky; top:calc(env(safe-area-inset-top, 0px) + var(--header-h)); z-index:30; background:var(--white); border-block:1px solid var(--line)}
.subnav ul{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-block:10px}
.subnav ul::-webkit-scrollbar{display:none}
.subnav a{display:block; white-space:nowrap; padding:8px 16px; border-radius:999px; font-size:15px; font-weight:600; color:var(--ink-2); text-decoration:none}
.subnav a:hover{background:var(--paper-2); color:var(--plum-700)}
.subnav a.is-active{background:var(--plum-700); color:#fff}
[id]{scroll-margin-top:calc(var(--header-h) + 72px)}

/* ---------- home hero ---------- */
.hero{padding-block:clamp(48px, 6vw, 88px) clamp(56px, 7vw, 96px); position:relative; overflow:hidden}
.hero::before{
  content:""; position:absolute; right:-160px; top:-220px; width:720px; height:720px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(227,25,127,.10), rgba(227,25,127,0) 70%); pointer-events:none;
}
.hero::after{
  content:""; position:absolute; left:-240px; bottom:-300px; width:640px; height:640px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(14,156,142,.09), rgba(14,156,142,0) 70%); pointer-events:none;
}
.hero .wrap{position:relative; z-index:1}
.hero__grid{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(40px, 5vw, 72px); align-items:center}
.hero__meta{display:flex; flex-wrap:wrap; gap:8px 18px; margin-bottom:28px; font-size:14.5px; color:var(--ink-3); font-weight:600}
.hero__meta span{display:inline-flex; align-items:center; gap:8px}
.hero__meta span + span::before{content:""; width:4px; height:4px; border-radius:50%; background:var(--line-strong); margin-right:10px}
.hero h1{max-width:13.5ch}
.hero .lede{margin-top:26px}
.hero .btn-row{margin-top:36px}
.hero__audiences{margin-top:40px; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; font-size:14.5px; color:var(--ink-3)}
.hero__audiences b{font-weight:600; color:var(--ink-2); margin-right:4px}
.pill{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; background:var(--white); border:1px solid var(--line); color:var(--ink-2); font-weight:600; font-size:13.5px}

/* video card */
.video{
  position:relative; display:block; border-radius:var(--r-lg); overflow:hidden; text-decoration:none; color:#fff;
  aspect-ratio:4/4.3; max-width:100%; background:var(--plum-900); box-shadow:var(--shadow-2); isolation:isolate;
}
.video__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:62% 22%; z-index:-2; transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.video::before{content:""; position:absolute; inset:0; z-index:-1; background:
  linear-gradient(180deg, rgba(36,10,29,0) 30%, rgba(36,10,29,.55) 58%, rgba(36,10,29,.94) 100%),
  linear-gradient(90deg, rgba(94,14,74,.35), rgba(94,14,74,0) 60%)}
.video:hover .video__img{transform:scale(1.03)}
.video__body{position:absolute; left:0; right:0; bottom:0; padding:clamp(22px, 3vw, 34px); display:grid; gap:14px}
.video__tag{display:inline-flex; align-items:center; gap:8px; justify-self:start; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.14); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase}
.video__title{font-family:var(--f-display); font-size:clamp(22px, 2.3vw, 30px); line-height:1.15; font-weight:500; max-width:20ch; text-wrap:balance}
.video__by{font-size:14.5px; color:rgba(255,255,255,.8)}
.video__play{
  position:absolute; top:clamp(20px, 3vw, 30px); right:clamp(20px, 3vw, 30px);
  width:72px; height:72px; border-radius:50%; background:#fff; color:var(--plum-700); display:grid; place-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,.25); transition:transform .2s;
}
.video__play::after{content:""; position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(255,255,255,.45); animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{transform:scale(.9); opacity:1} 100%{transform:scale(1.35); opacity:0}}
.video__play svg{width:26px; height:26px; margin-left:4px}
.video:hover .video__play{transform:scale(1.06)}
.video-frame{position:relative; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden; background:#000; box-shadow:var(--shadow-2)}
.video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.video-consent{position:absolute; inset:0; display:grid; place-items:center; padding:24px; background:rgba(36,10,29,.92); color:var(--on-dark); text-align:center}
.video-consent p{max-width:42ch; font-size:15px; color:var(--on-dark-2)}
.video-consent .btn-row{justify-content:center; margin-top:16px}
.video-note{margin-top:14px; font-size:13.5px; color:var(--ink-3); display:flex; gap:8px; align-items:flex-start}
.video-note svg{width:16px; height:16px; flex:none; margin-top:3px}

/* ---------- facts ---------- */
.facts{display:grid; grid-template-columns:repeat(4, 1fr); border-block:1px solid var(--line)}
.fact{padding:32px 28px 30px; border-left:1px solid var(--line)}
.fact:first-child{border-left:0; padding-left:0}
.fact__num{font-family:var(--f-display); font-size:clamp(40px, 4vw, 56px); line-height:1; letter-spacing:-.03em; color:var(--plum-700); font-variant-numeric:lining-nums tabular-nums}
.fact__num small{font-size:.5em; letter-spacing:0; margin-left:4px; color:var(--magenta)}
.fact__label{margin-top:12px; font-size:15px; color:var(--ink-2); line-height:1.45; max-width:26ch}

/* ---------- offers ---------- */
.offers{display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:18px}
.offer{
  position:relative; display:flex; flex-direction:column; gap:12px; padding:28px 28px 26px; border-radius:var(--r-md);
  background:var(--white); border:1px solid var(--line); text-decoration:none; color:inherit; min-width:0;
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.offer:hover{border-color:var(--line-strong); box-shadow:var(--shadow-2); transform:translateY(-2px)}
.offer__icon{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--paper-2); color:var(--plum-700)}
.offer__icon svg{width:24px; height:24px}
.offer h3{font-size:23px; margin-top:6px}
.offer p{font-size:15.5px; color:var(--ink-2); margin:0}
.offer__go{margin-top:auto; padding-top:8px; display:inline-flex; align-items:center; gap:8px; font-weight:650; font-size:15px; color:var(--plum-700)}
.offer__go svg{width:16px; height:16px; transition:transform .2s}
.offer:hover .offer__go svg{transform:translateX(4px)}
.offer--feature{
  grid-row:span 3; background:var(--plum-800); border-color:var(--plum-800); color:var(--on-dark); padding:36px 34px; overflow:hidden;
}
.offer--feature:hover{border-color:var(--plum-800)}
.offer--feature h3{color:#fff; font-size:clamp(28px, 2.6vw, 36px)}
.offer--feature p{color:var(--on-dark-2); font-size:16.5px}
.offer--feature .offer__go{color:#fff}
.offer--feature .offer__tag{align-self:flex-start; padding:5px 12px; border-radius:999px; background:rgba(255,143,196,.16); color:#FFB6D8; font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase}
.offer--feature .seal-stack{margin:14px 0 6px; display:flex; gap:10px; align-items:center}
.offer--feature .seal-stack svg{width:31%; max-width:120px; height:auto; filter:drop-shadow(0 10px 18px rgba(0,0,0,.25))}
.offer--feature ul{display:grid; gap:8px; margin-top:4px}
.feature-split{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:10px; padding-top:22px; border-top:1px solid var(--on-dark-line)}
.feature-split > div{min-width:0}
.feature-split b{display:block; color:#fff; font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin-bottom:12px}
.feature-split li{font-size:14.5px!important}
.offer--feature li{display:flex; gap:10px; align-items:flex-start; font-size:15px; color:var(--on-dark-2)}
.offer--feature li::before{content:""; flex:none; width:8px; height:8px; margin-top:8px; border-radius:50%; background:#FF8FC4}
.offers--two{grid-template-columns:repeat(2, 1fr)}
/* offers with photos (Bilder von kurs-care.de) */
.offers--media{grid-template-columns:1.2fr 1fr 1fr}
.offer--img{padding:0; gap:0; overflow:hidden}
.offer__media{display:block; aspect-ratio:16/10; overflow:hidden; background:var(--paper-2)}
.offer__media img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.offer--img:hover .offer__media img{transform:scale(1.04)}
.offer__body{display:flex; flex-direction:column; gap:10px; padding:22px 26px 24px; flex:1}
.offer--img h3{margin-top:0}
.offer--feature.offer--img{grid-row:span 2; padding:0}
.offer--feature .offer__media{aspect-ratio:16/11.3}
.offer--feature .offer__body{padding:28px 32px 30px; gap:12px}
.offer--wide{grid-column:1 / -1; display:grid; grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr); background:var(--plum-900); border-color:var(--plum-900); color:var(--on-dark)}
.offer--wide:hover{border-color:var(--plum-900)}
.offer--wide .offer__media{aspect-ratio:auto; height:100%; min-height:280px; max-height:340px}
.offer--wide .offer__media img{object-position:50% 45%}
.offer--wide .offer__body{justify-content:center; padding:40px 48px; gap:14px}
.offer--wide h3{color:#fff; font-size:clamp(26px, 2.4vw, 34px)}
.offer--wide p{color:var(--on-dark-2); font-size:16.5px; max-width:44ch}
.offer--wide .offer__go{color:#fff; margin-top:6px}
.offer__tag--light{align-self:flex-start; padding:5px 12px; border-radius:999px; background:rgba(255,143,196,.16); color:#FFB6D8; font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase}

.offers--three{grid-template-columns:repeat(3, 1fr)}

/* ---------- course band ---------- */
.course{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(40px, 6vw, 88px); align-items:start}
.date-card{
  display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center; margin-top:32px;
  padding:22px 24px; border-radius:var(--r-md); background:rgba(255,255,255,.06); border:1px solid var(--on-dark-line);
}
.date-card__cal{width:78px; border-radius:12px; overflow:hidden; background:#fff; color:var(--plum-900); text-align:center; box-shadow:0 8px 20px rgba(0,0,0,.25)}
.date-card__cal span{display:block; background:var(--magenta-bright); color:#fff; font-size:12px; font-weight:800; letter-spacing:.12em; padding:5px 0; text-transform:uppercase}
.date-card__cal b{display:block; font-family:var(--f-display); font-size:38px; font-weight:500; line-height:1.15; padding:4px 0 2px}
.date-card__cal i{display:block; font-style:normal; font-size:12px; font-weight:700; color:var(--ink-3); padding-bottom:6px}
.date-card h4{font-family:var(--f-body); font-size:17px; font-weight:700; color:#fff}
.date-card p{font-size:15px; color:var(--on-dark-2); margin-top:4px}
.countdown{display:inline-flex; align-items:center; gap:8px; margin-top:8px; padding:4px 11px; border-radius:999px; background:rgba(14,156,142,.22); color:#8FF0E4; font-size:13.5px; font-weight:700}

/* module bar (drawn to scale: width = Unterrichtseinheiten) */
.modbar{margin-top:6px}
.modbar__scale{display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; margin-bottom:8px}
.section--dark .modbar__scale{color:var(--on-dark-2)}
.modbar__track{display:flex; gap:3px; height:64px}
.modbar__seg{
  position:relative; flex:var(--ue) 1 0; min-width:0; border-radius:6px; background:var(--c); color:#fff;
  display:flex; align-items:flex-end; padding:7px 8px; font-size:12.5px; font-weight:700; cursor:default;
  transition:transform .15s, filter .15s; outline:none;
}
.modbar__seg:hover,.modbar__seg:focus-visible{transform:translateY(-3px); filter:brightness(1.08)}
.modbar__seg[data-type="grund"]{--c:var(--plum-600)}
.modbar__seg[data-type="fach"]{--c:var(--magenta)}
.modbar__seg[data-type="spezial"]{--c:var(--teal)}
.section--dark .modbar__seg[data-type="grund"]{--c:#9C3E86}
.modbar__tip{
  position:absolute; left:50%; bottom:calc(100% + 10px); transform:translateX(-50%); width:max-content; max-width:240px;
  padding:9px 12px; border-radius:10px; background:var(--ink); color:#fff; font-size:13px; font-weight:500; line-height:1.35;
  display:none; pointer-events:none; z-index:5; text-align:left; box-shadow:var(--shadow-2)
}
.modbar__seg:nth-child(-n+2) .modbar__tip{left:0; transform:none}
.modbar__seg:nth-last-child(-n+2) .modbar__tip{left:auto; right:0; transform:none}
.modbar__tip b{display:block; font-weight:700; margin-bottom:2px}
.modbar__seg:hover .modbar__tip,.modbar__seg:focus-visible .modbar__tip{display:block}
.modbar__groups{display:flex; gap:3px; margin-top:10px}
.modbar__group{flex:var(--ue) 1 0; min-width:0; border-top:2px solid var(--c); padding-top:8px; font-size:13.5px; line-height:1.3}
.modbar__group b{display:block; font-weight:700}
.modbar__group span{color:var(--ink-3); font-variant-numeric:tabular-nums}
.section--dark .modbar__group span{color:var(--on-dark-2)}
.modbar__group[data-type="grund"]{--c:var(--plum-600)}
.section--dark .modbar__group[data-type="grund"]{--c:#9C3E86}
.modbar__group[data-type="fach"]{--c:var(--magenta)}
.modbar__group[data-type="spezial"]{--c:var(--teal)}
.flow-line{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; margin-top:34px; font-size:14px}
.flow-line__node{display:grid; gap:2px; padding:12px 16px; border-radius:12px; background:var(--white); border:1px solid var(--line)}
.flow-line__node b{font-size:15px}
.flow-line__node span{color:var(--ink-3); font-size:13.5px}
.flow-line__mid{position:relative; text-align:center; padding:12px 16px; border-radius:12px; border:1.5px dashed var(--line-strong); color:var(--ink-2)}
.flow-line__mid b{display:block; color:var(--ink); font-size:15px}
.section--dark .flow-line__node{background:rgba(255,255,255,.06); border-color:var(--on-dark-line)}
.section--dark .flow-line__node span, .section--dark .flow-line__mid{color:var(--on-dark-2)}
.section--dark .flow-line__mid{border-color:rgba(251,243,248,.3)}
.section--dark .flow-line__mid b{color:#fff}

/* photos */
.photo{margin:0; border-radius:var(--r-lg); overflow:hidden; background:var(--paper-2); aspect-ratio:797/564}
.photo img{width:100%; height:100%; object-fit:cover}
.photo--lift{box-shadow:var(--shadow-2)}
.photo--square{aspect-ratio:1}

/* seal plaques (Fotos) vs. vector seals (Grafik) – Vorschau-Umschalter */
:root[data-seals="grafik"] .sv-foto{display:none!important}
:root:not([data-seals="grafik"]) .sv-grafik{display:none!important}
.medals{position:relative; aspect-ratio:1 / .92; max-width:440px}
.medal{position:absolute; width:52%; height:auto; filter:drop-shadow(0 18px 26px rgba(36,10,29,.28))}
.medal--silber{left:0; top:4%; transform:rotate(-7deg)}
.medal--bronze{right:0; top:4%; transform:rotate(7deg)}
.medal--gold{left:22%; bottom:0; width:56%; z-index:2}
.tier__visual{display:flex; align-items:flex-end; gap:14px; min-height:150px; margin-bottom:6px}
.tier__medal{width:138px; height:auto; filter:drop-shadow(0 10px 16px rgba(36,10,29,.2))}
.tier__visual svg{width:112px; height:112px}
.metal{font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border-radius:999px; margin-bottom:8px}
.metal--bronze{background:#F1E2D3; color:#7A4A1E}
.metal--silber{background:#E9EAEE; color:#4B4F5C}
.metal--gold{background:#F6E9C4; color:#7A5A00}
.variant-switch{position:fixed; left:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:55; display:flex; align-items:center; gap:6px; padding:6px 6px 6px 14px; border-radius:999px; background:var(--ink); color:#fff; font-size:13.5px; font-weight:600; box-shadow:var(--shadow-2)}
.variant-switch button{appearance:none; border:0; border-radius:999px; padding:7px 14px; background:transparent; color:#D9C3D2; font:700 13.5px/1 var(--f-body); cursor:pointer}
.variant-switch button[aria-pressed="true"]{background:#fff; color:var(--plum-800)}

/* seal fan on Gütesiegel hero */
.seal-hero{position:relative; aspect-ratio:1; max-width:360px}
.seal-hero svg{position:absolute; width:62%; height:auto; filter:drop-shadow(0 18px 30px rgba(36,10,29,.18))}
.seal-hero svg:nth-child(1){right:0; top:4%; transform:rotate(9deg)}
.seal-hero svg:nth-child(2){left:0; top:0; transform:rotate(-8deg)}
.seal-hero svg:nth-child(3){left:19%; bottom:0; transform:rotate(2deg)}

/* ---------- steps (a real sequence) ---------- */
.steps{display:grid; grid-template-columns:repeat(4, 1fr); gap:0; counter-reset:step; position:relative}
.step{position:relative; padding:0 26px 0 0}
.step__num{
  position:relative; z-index:1; width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:var(--white); border:1.5px solid var(--plum-700); color:var(--plum-700);
  font-family:var(--f-display); font-size:24px; font-weight:500; margin-bottom:22px
}
.step:not(:last-child)::after{content:""; position:absolute; top:26px; left:52px; right:0; height:1.5px; background:repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 12px)}
.step:last-child .step__num{background:var(--plum-700); color:#fff}
.step h4{font-family:var(--f-body); font-size:18px; font-weight:700; margin-bottom:8px}
.step p{font-size:15.5px; color:var(--ink-2)}

/* ---------- seals ---------- */
.tiers{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
.tier{position:relative; padding:30px 28px 28px; border-radius:var(--r-md); background:var(--white); border:1px solid var(--line); display:grid; gap:10px; align-content:start}
.tier svg{width:112px; height:112px; margin-bottom:8px}
.tier h4{font-family:var(--f-body); font-weight:700; font-size:19px}
.tier p{font-size:15.5px; color:var(--ink-2); margin:0}
.tier__req{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.tier__req span{font-size:12.5px; font-weight:700; padding:4px 10px; border-radius:999px; background:var(--paper-2); color:var(--ink-2)}
.tier__flag{position:absolute; top:18px; right:18px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--magenta)}

/* ---------- holiday calendar ---------- */
.cal-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(40px, 6vw, 88px); align-items:start}
.cal-list{display:grid; gap:0; border-top:1px solid var(--line)}
.cal-item{display:grid; grid-template-columns:76px 1fr auto; gap:22px; align-items:start; padding:22px 0; border-bottom:1px solid var(--line)}
.cal-date{text-align:center; border-radius:12px; border:1px solid var(--line); background:var(--white); padding:8px 0 9px; line-height:1}
.cal-date b{display:block; font-family:var(--f-display); font-size:30px; font-weight:500; color:var(--plum-700)}
.cal-date span{display:block; margin-top:5px; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.cal-item h4{font-family:var(--f-body); font-size:18px; font-weight:700; display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px}
.cal-when{font-size:14px; color:var(--ink-3); margin-top:2px; font-variant-numeric:tabular-nums}
.cal-item p{font-size:15.5px; color:var(--ink-2); margin-top:8px; max-width:62ch}
.rel{font-family:var(--f-body); font-size:12px; font-weight:700; letter-spacing:.04em; padding:3px 9px; border-radius:999px; background:var(--paper-2); color:var(--ink-2)}
.rel[data-rel="Islam"]{background:#E1F2EE; color:#0A6158}
.rel[data-rel="Christentum"]{background:#EEE6F6; color:#4F2A7A}
.rel[data-rel="Orthodoxes Christentum"]{background:#E7E9F7; color:#2E3E82}
.rel[data-rel="Judentum"]{background:#E3ECF8; color:#1F4E86}
.rel[data-rel="Hinduismus"]{background:#FBE8DA; color:#8A3B0C}
.rel[data-rel="Buddhismus"]{background:#FAF0D2; color:#735400}
.cal-in{white-space:nowrap; font-size:13.5px; font-weight:700; color:var(--teal-ink); background:var(--teal-soft); padding:5px 11px; border-radius:999px}
.cal-note{margin-top:22px; font-size:14px; color:var(--ink-3); max-width:60ch}

/* ---------- testimonials ---------- */
.quotes{display:grid; grid-template-columns:1.25fr 1fr 1fr; grid-auto-rows:auto; gap:18px}
.quote{margin:0; padding:28px 28px 24px; border-radius:var(--r-md); background:var(--white); border:1px solid var(--line); display:flex; flex-direction:column; gap:16px}
.quote--lead{grid-row:span 2; background:var(--plum-800); border-color:var(--plum-800); color:var(--on-dark); padding:36px 34px 30px}
.quote__stars{color:var(--magenta); letter-spacing:3px; font-size:15px}
.quote--lead .quote__stars{color:#FF8FC4}
.quote blockquote{margin:0; font-family:var(--f-display); font-size:19px; line-height:1.45; color:var(--ink); flex:1}
.quote--lead blockquote{font-size:clamp(21px, 1.9vw, 25px); color:#fff; line-height:1.4}
.quote figcaption{display:flex; align-items:center; gap:12px; font-size:14px; color:var(--ink-3); padding-top:16px; border-top:1px solid var(--line)}
.quote--lead figcaption{color:var(--on-dark-2); border-color:var(--on-dark-line)}
.quote figcaption b{display:block; color:var(--ink); font-size:15px}
.quote--lead figcaption b{color:#fff}
.quote__ini{width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--magenta-soft); color:var(--plum-700); font-weight:800; font-size:15px}
.quote--lead .quote__ini{background:rgba(255,143,196,.18); color:#FFB6D8}

/* ---------- people ---------- */
.people{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:28px 22px}
.person{display:grid; gap:14px; align-content:start}
.person__img{position:relative; aspect-ratio:4/5; border-radius:var(--r-md); overflow:hidden; background:var(--paper-2)}
.person__img img{width:100%; height:100%; object-fit:cover; object-position:50% 20%; transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.person:hover .person__img img{transform:scale(1.03)}
.person__mono{position:absolute; inset:0; display:grid; place-items:center; background:linear-gradient(160deg, var(--plum-700), var(--plum-900)); color:#fff; font-family:var(--f-display); font-size:64px; font-weight:500; letter-spacing:-.02em}
.person__mono::after{content:""; position:absolute; right:18px; bottom:18px; width:26px; height:26px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect x='4.6' y='0' width='4.8' height='14' rx='2.4' fill='%23E3197F'/%3E%3Crect x='0' y='4.6' width='14' height='4.8' rx='2.4' fill='%230E9C8E' fill-opacity='.9'/%3E%3C/svg%3E") center/contain no-repeat}
.person h4{font-family:var(--f-body); font-size:18px; font-weight:700; line-height:1.3}
.person__role{font-size:14.5px; color:var(--magenta); font-weight:650; margin-top:2px}
.person p{font-size:15px; color:var(--ink-2); margin-top:6px}
.person a{color:var(--plum-700); font-weight:600}
.people--lead{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:32px}
.people--five{grid-template-columns:repeat(5, minmax(0, 1fr)); gap:28px 18px}
.people--five h4{font-size:17px}
.people--five p{font-size:14.5px}
.people--lead .person__img{aspect-ratio:4/4.6}
.team-teaser{display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(40px, 6vw, 88px); align-items:center}
.team-teaser__portrait{position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/4.4; box-shadow:var(--shadow-2)}
.team-teaser__portrait img{width:100%; height:100%; object-fit:cover; object-position:50% 25%}
.team-teaser__cap{position:absolute; left:18px; right:18px; bottom:18px; padding:14px 18px; border-radius:14px; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.team-teaser__cap b{display:block; font-size:16.5px}
.team-teaser__cap span{font-size:14px; color:var(--ink-3)}
.faces{display:flex; margin-top:30px}
.faces img, .faces .face-mono{width:58px; height:58px; border-radius:50%; object-fit:cover; object-position:50% 22%; border:3px solid var(--paper); margin-left:-12px; background:var(--paper-2)}
.faces img:first-child{margin-left:0}
.face-mono{display:grid; place-items:center; background:var(--plum-700)!important; color:#fff; font-weight:700; font-size:16px}
.quals{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:30px}
.qual{padding:18px 20px; border-radius:12px; background:var(--white); border:1px solid var(--line)}
.qual b{display:block; font-size:15.5px}
.qual span{font-size:14.5px; color:var(--ink-3)}

/* ---------- lists ---------- */
.checks{display:grid; gap:12px}
.checks li{position:relative; padding-left:34px; color:var(--ink-2)}
.checks li::before{
  content:""; position:absolute; left:0; top:3px; width:22px; height:22px; border-radius:50%;
  background:var(--teal-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A7469' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/13px no-repeat;
}
.section--dark .checks li{color:var(--on-dark-2)}
.section--dark .checks li::before{background-color:rgba(14,156,142,.25)}
.dashes{display:grid; gap:9px}
.dashes li{position:relative; padding-left:22px; color:var(--ink-2)}
.dashes li::before{content:""; position:absolute; left:0; top:12px; width:10px; height:2px; border-radius:2px; background:var(--magenta)}

/* ---------- split layouts ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px, 6vw, 88px); align-items:start}
.split--wide{grid-template-columns:1.2fr .8fr}
.split > *{min-width:0}
.card{padding:clamp(24px, 3vw, 36px); border-radius:var(--r-md); background:var(--white); border:1px solid var(--line)}
.card h3{font-size:24px; margin-bottom:18px}
.card--tint{background:var(--paper-2); border-color:transparent}
.prose p{color:var(--ink-2); max-width:64ch}
.prose p + p{margin-top:1em}
.note{
  display:flex; gap:14px; align-items:flex-start; padding:18px 20px; border-radius:12px; background:var(--teal-soft); color:#0B4E47; font-size:15px;
}
.note svg{width:20px; height:20px; flex:none; margin-top:2px}
.note--warn{background:#FDF1D8; color:#6A4700}
.note--plum{background:var(--magenta-soft); color:var(--plum-800)}

/* ---------- goals (Orientierung → Öffnung → Kompetenz) ---------- */
.goals{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; position:relative}
.goal{padding:30px 28px; border-radius:var(--r-md); background:var(--white); border:1px solid var(--line); position:relative}
.goal__bar{display:flex; gap:4px; margin-bottom:22px}
.goal__bar i{height:6px; flex:1; border-radius:3px; background:var(--line)}
.goal__bar i.on{background:var(--magenta)}
.goal h3{font-size:24px; margin-bottom:10px}
.goal .teaser{font-weight:600; color:var(--ink); font-size:16px}
.goal p{font-size:15.5px; color:var(--ink-2)}

/* ---------- benefits ---------- */
.benefits{display:grid; grid-template-columns:repeat(3, 1fr); gap:0; border-top:1px solid var(--line)}
.benefit{padding:32px 30px 34px 0; border-bottom:1px solid var(--line)}
.benefit:not(:nth-child(3n+1)){padding-left:30px; border-left:1px solid var(--line)}
.benefit__icon{width:40px; height:40px; color:var(--magenta); margin-bottom:18px}
.benefit h4{font-family:var(--f-body); font-size:18.5px; font-weight:700; margin-bottom:10px}
.benefit p{font-size:15.5px; color:var(--ink-2)}
.benefit ul{margin-top:12px}
.benefit ul li{font-size:14.5px}

/* ---------- tabs ---------- */
.tabs{margin-top:8px}
.tablist{display:flex; flex-wrap:wrap; gap:8px; padding:6px; border-radius:999px; background:var(--white); border:1px solid var(--line); width:fit-content; max-width:100%}
.tab{appearance:none; border:0; background:transparent; padding:11px 20px; border-radius:999px; font:600 15.5px/1.2 var(--f-body); color:var(--ink-2); cursor:pointer; transition:background .15s, color .15s}
.tab:hover{color:var(--plum-700); background:var(--paper-2)}
.tab[aria-selected="true"]{background:var(--plum-700); color:#fff}
.tab small{font-weight:700; opacity:.7; margin-left:6px; font-size:12.5px}
.tabpanel{margin-top:36px}
.tabpanel__intro{display:flex; gap:16px; align-items:center; margin-bottom:28px; font-size:16px; color:var(--ink-2)}
.std-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:18px}
.std{padding:26px 26px 24px; border-radius:var(--r-md); background:var(--white); border:1px solid var(--line); display:grid; gap:12px; align-content:start}
.std h4{font-family:var(--f-body); font-size:18px; font-weight:700; display:flex; gap:12px; align-items:baseline}
.std h4 span{font-family:var(--f-display); font-weight:500; color:var(--magenta); font-size:22px}
.std .dashes li{font-size:15.5px}
.std__proof{display:flex; gap:8px; align-items:flex-start; padding-top:12px; border-top:1px dashed var(--line); font-size:14px; color:var(--ink-3)}
.std__proof b{color:var(--ink-2); font-weight:650}
.std__proof svg{width:16px; height:16px; flex:none; margin-top:3px}
.std-grid > .std:last-child:nth-child(odd){grid-column:1 / -1}
.std__proof--x b{color:#9B1C1C}

/* ---------- table ---------- */
.table-wrap{overflow-x:auto; border-radius:var(--r-md); border:1px solid var(--line); background:var(--white)}
table.modules{width:100%; border-collapse:collapse; font-size:15.5px; min-width:560px}
table.modules th{text-align:left; font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); padding:16px 20px; border-bottom:1px solid var(--line); background:var(--paper)}
table.modules td{padding:15px 20px; border-bottom:1px solid var(--line); color:var(--ink-2); vertical-align:top}
table.modules tr:last-child td{border-bottom:0}
table.modules td.num{font-variant-numeric:tabular-nums; color:var(--ink-3); width:56px}
table.modules td.ue{text-align:right; font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink); white-space:nowrap}
table.modules th.ue{text-align:right}
table.modules tfoot td{font-weight:700; color:var(--ink); background:var(--paper); border-top:1px solid var(--line-strong)}
.type-dot{display:inline-flex; align-items:center; gap:8px; white-space:nowrap; font-weight:600; font-size:14px; color:var(--ink-2)}
.type-dot::before{content:""; width:10px; height:10px; border-radius:3px; background:var(--c)}
.type-dot[data-type="grund"]{--c:var(--plum-600)}
.type-dot[data-type="fach"]{--c:var(--magenta)}
.type-dot[data-type="spezial"]{--c:var(--teal)}

/* ---------- key facts row ---------- */
.keyfacts{display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden}
.keyfacts > div{background:var(--white); padding:22px 22px 20px}
.keyfacts b{display:block; font-family:var(--f-display); font-weight:500; font-size:30px; line-height:1.1; color:var(--plum-700)}
.keyfacts span{display:block; margin-top:6px; font-size:14.5px; color:var(--ink-2); line-height:1.4}

/* ---------- cohorts ---------- */
.cohorts{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
.cohort{padding:26px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--white)}
.cohort__year{font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.cohort__num{font-family:var(--f-display); font-size:52px; line-height:1; color:var(--plum-700); margin:12px 0 8px}
.cohort p{font-size:15px; color:var(--ink-2)}
.cohort--next{background:var(--plum-800); border-color:var(--plum-800); color:var(--on-dark)}
.cohort--next .cohort__year{color:#FFB6D8}
.cohort--next .cohort__num{color:#fff}
.cohort--next p{color:var(--on-dark-2)}

/* ---------- course list ---------- */
.courses{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
.course-card{padding:26px; border-radius:var(--r-md); background:var(--white); border:1px solid var(--line); display:grid; gap:10px; align-content:start}
.course-card h4{font-family:var(--f-body); font-size:18px; font-weight:700}
.course-card p{font-size:15px; color:var(--ink-2)}
.meta-row{display:flex; flex-wrap:wrap; gap:6px}
.tag{font-size:12.5px; font-weight:700; padding:4px 10px; border-radius:999px; background:var(--paper-2); color:var(--ink-2)}
.tag--teal{background:var(--teal-soft); color:var(--teal-ink)}
.tag--magenta{background:var(--magenta-soft); color:var(--plum-700)}
.group-title{display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin:0 0 22px; padding-bottom:14px; border-bottom:1px solid var(--line)}
.group-title h3{font-size:26px}
.group-title span{font-size:14.5px; color:var(--ink-3)}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:24px; align-items:center; padding:22px 0; font-weight:650; font-size:17.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; flex:none; width:32px; height:32px; border-radius:50%; border:1.5px solid var(--line-strong); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E0E4A' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/16px no-repeat; transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details > div{padding:0 56px 24px 0; color:var(--ink-2)}

/* ---------- principles / flow ---------- */
.principles{display:flex; flex-wrap:wrap; gap:10px}
.principles span{padding:10px 18px; border-radius:999px; background:var(--white); border:1px solid var(--line); font-weight:600; font-size:15px; color:var(--plum-700)}
.flow{display:grid; gap:0; counter-reset:flow; border-left:1.5px solid var(--line-strong); margin-left:18px}
.flow li{position:relative; padding:0 0 26px 38px; counter-increment:flow}
.flow li:last-child{padding-bottom:0}
.flow li::before{content:counter(flow); position:absolute; left:-19px; top:-4px; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--white); border:1.5px solid var(--plum-700); color:var(--plum-700); font-family:var(--f-display); font-size:17px}
.flow b{display:block; font-size:17px}
.flow span{font-size:15px; color:var(--ink-3)}
.flow .meta-row{margin-top:8px}

/* ---------- CTA band ---------- */
.cta{position:relative; overflow:hidden; border-radius:var(--r-lg); background:var(--plum-800); color:var(--on-dark); padding:clamp(36px, 5vw, 64px); display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center}
.cta::after{content:""; position:absolute; right:-150px; bottom:-170px; width:360px; height:360px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect x='4.6' y='0' width='4.8' height='14' rx='2.4' fill='%23E3197F' fill-opacity='.35'/%3E%3Crect x='0' y='4.6' width='14' height='4.8' rx='2.4' fill='%230E9C8E' fill-opacity='.35'/%3E%3C/svg%3E") center/contain no-repeat; transform:rotate(12deg); pointer-events:none}
.cta h2{color:#fff; font-size:clamp(28px, 3vw, 42px)}
.cta p{color:var(--on-dark-2); margin-top:14px; max-width:48ch}
.cta__contact{position:relative; z-index:1; display:grid; gap:12px; justify-items:start}
.cta__line{display:flex; align-items:center; gap:12px; font-size:17px; font-weight:600; color:#fff}
.cta__line svg{width:20px; height:20px; color:#FF8FC4}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(40px, 6vw, 88px); align-items:start}
.contact-block{display:grid; gap:4px; padding:22px 0; border-bottom:1px solid var(--line)}
.contact-block:first-child{padding-top:0}
.contact-block h4{font-family:var(--f-body); font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px}
.contact-block p{margin:0; font-size:17px}
.copy-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.copy-row a{font-weight:650; color:var(--plum-700); text-decoration:none; font-size:18px}
.copy-btn{display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; border:1px solid var(--line-strong); background:var(--white); font:600 13px/1 var(--f-body); color:var(--ink-2); cursor:pointer}
.copy-btn:hover{border-color:var(--plum-700); color:var(--plum-700)}
.copy-btn svg{width:14px; height:14px}
.copy-btn.is-done{border-color:var(--teal); color:var(--teal-ink)}

/* ---------- forms ---------- */
.form{padding:clamp(24px, 3.5vw, 40px); border-radius:var(--r-lg); background:var(--white); border:1px solid var(--line); box-shadow:var(--shadow-1)}
.form h3{font-size:28px; margin-bottom:8px}
.form > p{color:var(--ink-3); font-size:15px; margin-bottom:26px}
.fields{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.field{display:grid; gap:7px; min-width:0}
.field--full{grid-column:1 / -1}
.field label{font-size:14px; font-weight:650; color:var(--ink-2)}
.field label i{font-style:normal; color:var(--magenta)}
.field input,.field select,.field textarea{
  width:100%; min-height:50px; padding:12px 15px; border-radius:10px; border:1.5px solid var(--line-strong); background:var(--paper);
  font:400 16px/1.4 var(--f-body); color:var(--ink); transition:border-color .15s, background .15s, box-shadow .15s;
}
.field textarea{min-height:140px; resize:vertical}
.field select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23554650' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:18px; padding-right:44px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--plum-700); background:var(--white); box-shadow:0 0 0 4px rgba(122,30,99,.12)}
.field.is-invalid input,.field.is-invalid textarea,.field.is-invalid select{border-color:#B42318; background:#FFF6F5}
.field__err{font-size:13.5px; color:#B42318; display:none}
.field.is-invalid .field__err{display:block}
.check{display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--ink-2); grid-column:1 / -1}
.check input{width:20px; height:20px; margin-top:2px; accent-color:var(--plum-700); flex:none}
.check.is-invalid{color:#B42318}
.form-actions{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:6px}
.form-actions .small{color:var(--ink-3)}
.form-success{display:grid; gap:14px; justify-items:start; padding:clamp(24px, 3.5vw, 40px); border-radius:var(--r-lg); background:var(--white); border:1px solid var(--line)}
.form-success__icon{width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:var(--teal-soft); color:var(--teal-ink)}
.form-success__icon svg{width:28px; height:28px}
.form-success h3{font-size:28px}
.preview-note{font-size:13.5px; color:#6A4700; background:#FDF1D8; border-radius:8px; padding:8px 12px}

/* ---------- legal pages ---------- */
.legal{max-width:760px}
.legal h2{font-size:28px; margin:48px 0 14px}
.legal h3{font-family:var(--f-body); font-size:18px; font-weight:700; margin:28px 0 8px}
.legal p, .legal li{color:var(--ink-2)}
.legal ul{list-style:disc; padding-left:22px; margin-bottom:1em}
.legal .todo{background:#FDF1D8; color:#6A4700; padding:1px 6px; border-radius:4px; font-weight:600}
.legal dl{display:grid; grid-template-columns:max-content 1fr; gap:8px 24px; margin:0}
.legal dt{font-weight:650; color:var(--ink)}
.legal dd{margin:0; color:var(--ink-2)}

/* ---------- footer ---------- */
.site-footer{background:var(--plum-950); color:var(--on-dark-2); padding-block:clamp(56px, 7vw, 88px) 28px; font-size:15px}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px}
.footer-grid h4{font-family:var(--f-body); font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#fff; margin-bottom:18px}
.footer-grid ul{display:grid; gap:10px}
.footer-grid a{color:var(--on-dark-2); text-decoration:none; transition:color .15s}
.footer-grid a:hover{color:#fff}
.footer-brand img{height:40px; width:auto; margin-bottom:22px}
.footer-brand p{max-width:34ch; font-size:15px}
.socials{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
.socials a{display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px; border:1px solid var(--on-dark-line); font-size:13.5px; font-weight:600}
.socials a:hover{border-color:rgba(255,255,255,.5)}
.socials svg{width:12px; height:12px; opacity:.7}
.footer-bottom{margin-top:56px; padding-top:24px; border-top:1px solid var(--on-dark-line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; font-size:14px}
.footer-bottom nav{display:flex; gap:22px}
.footer-bottom a{color:var(--on-dark-2); text-decoration:none}
.footer-bottom a:hover{color:#fff}

/* ---------- shop ---------- */
.shop-top{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:18px; margin-bottom:34px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{appearance:none; border:1.5px solid var(--line-strong); background:var(--white); color:var(--ink-2); padding:9px 17px; border-radius:999px; font:600 15px/1.2 var(--f-body); cursor:pointer; transition:all .15s}
.chip:hover{border-color:var(--plum-700); color:var(--plum-700)}
.chip[aria-pressed="true"]{background:var(--plum-700); border-color:var(--plum-700); color:#fff}
.chip small{font-weight:700; opacity:.65; margin-left:4px}
.shop-count{font-size:14.5px; color:var(--ink-3)}
.products{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:32px 22px}
.product{display:flex; flex-direction:column; gap:14px; min-width:0}
.product__cover{
  position:relative; display:block; width:100%; aspect-ratio:3/4; border:0; padding:0; border-radius:var(--r-md); cursor:pointer; overflow:hidden;
  background:var(--paper-2); transition:transform .25s, box-shadow .25s;
}
.product__cover:hover{transform:translateY(-4px); box-shadow:var(--shadow-2)}
.product__badges{position:absolute; bottom:10px; left:10px; display:flex; flex-wrap:wrap; gap:5px; z-index:2}
.product__badges + .cover{padding-bottom:calc(11% + 30px)}
.badge{font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:999px; background:#fff; color:var(--ink-2); box-shadow:0 2px 6px rgba(0,0,0,.08)}
.badge--demo{background:#FDF1D8; color:#6A4700}
.badge--digital{background:var(--teal-soft); color:var(--teal-ink)}
.product__type{font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.product h3{font-family:var(--f-body); font-size:17.5px; font-weight:700; line-height:1.3; margin-top:4px}
.product__by{font-size:14.5px; color:var(--ink-3); margin-top:2px}
.product__foot{display:grid; gap:12px; margin-top:auto; padding-top:2px}
.product__foot .price small{font-family:var(--f-body); font-size:12.5px; color:var(--ink-3); margin-left:6px; letter-spacing:0}
.price{font-family:var(--f-display); font-size:23px; font-weight:500; color:var(--ink); font-variant-numeric:lining-nums tabular-nums; white-space:nowrap}
.add-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:44px; padding:8px 15px; border-radius:999px; border:1.5px solid var(--plum-700); background:transparent; color:var(--plum-700); font:650 14px/1 var(--f-body); cursor:pointer; transition:all .15s; white-space:nowrap}
.add-btn:hover{background:var(--plum-700); color:#fff}
.add-btn.is-added{background:var(--teal); border-color:var(--teal); color:#fff}
.add-btn svg{width:16px; height:16px}

/* generated covers */
.cover{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:14% 12% 11%; text-align:left; color:var(--cf); background:var(--cb)}
.cover__kicker{font:800 10px/1.3 var(--f-body); letter-spacing:.16em; text-transform:uppercase; opacity:.8}
.cover__title{font-family:var(--f-display); font-weight:500; font-size:clamp(20px, 2vw, 27px); line-height:1.08; letter-spacing:-.01em; text-wrap:balance}
.cover__sub{font:500 12px/1.35 var(--f-body); opacity:.85; margin-top:10px}
.cover__title,.cover__sub{display:block}
.cover__author{font:700 11.5px/1.3 var(--f-body); letter-spacing:.04em}
.cover__mark{position:absolute; width:24%; height:auto; aspect-ratio:1; right:10%; top:9%; opacity:.95}
.cover > span{position:relative; z-index:1}
.cover--plum{--cb:linear-gradient(160deg, #6A1553, #2F0C26); --cf:#FBF3F8}
.cover--rose{--cb:linear-gradient(170deg, #F9E3EE, #F1CFE0); --cf:#44103A}
.cover--teal{--cb:linear-gradient(165deg, #0E8A7E, #075A52); --cf:#EFFFFC}
.cover--ink{--cb:linear-gradient(165deg, #2A1E27, #150E13); --cf:#F7EFF4}
.cover--paper{--cb:#FFFDFB; --cf:#2F0C26; box-shadow:inset 0 0 0 1px var(--line)}
.cover--sand{--cb:linear-gradient(170deg, #F3E6D3, #E6D2B8); --cf:#3E2A12}
.cover::after{content:""; position:absolute; left:0; top:0; bottom:0; width:7%; background:linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,0)); pointer-events:none}
.cover--card::after, .cover--poster::after, .cover--pdf::after{display:none}

/* dialog */
dialog.pd{width:min(920px, calc(100vw - 32px)); max-height:calc(100vh - 48px); padding:0; border:0; border-radius:var(--r-lg); background:var(--white); color:var(--ink); box-shadow:0 30px 80px rgba(36,10,29,.35)}
dialog.pd::backdrop{background:rgba(36,10,29,.55); backdrop-filter:blur(3px)}
.pd__grid{display:grid; grid-template-columns:.85fr 1.15fr}
.pd__cover{position:relative; background:var(--paper-2); padding:36px; display:grid; place-items:center}
.pd__cover .product__cover{max-width:300px; cursor:default; box-shadow:var(--shadow-2)}
.pd__cover .product__cover:hover{transform:none}
.pd__body{padding:40px 40px 34px; display:grid; gap:14px; align-content:start; overflow:auto; max-height:calc(100vh - 48px)}
.pd__body h2{font-size:32px}
.pd__body .price{font-size:30px}
.pd__specs{display:grid; grid-template-columns:max-content 1fr; gap:6px 20px; font-size:14.5px; padding:16px 0; border-block:1px solid var(--line); margin:6px 0}
.pd__specs dt{color:var(--ink-3)}
.pd__specs dd{margin:0; color:var(--ink); font-weight:600}
.pd__close{position:absolute; top:14px; right:14px; width:42px; height:42px; border-radius:50%; border:0; background:var(--white); box-shadow:var(--shadow-1); cursor:pointer; display:grid; place-items:center; z-index:3; color:var(--ink)}
.pd__close svg{width:20px; height:20px}
.qty{display:inline-flex; align-items:center; border:1.5px solid var(--line-strong); border-radius:999px; overflow:hidden}
.qty button{width:40px; height:40px; border:0; background:transparent; font:600 18px/1 var(--f-body); color:var(--ink); cursor:pointer}
.qty button:hover{background:var(--paper-2)}
.qty output{min-width:30px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums}

/* cart drawer */
.drawer{position:fixed; inset:0; z-index:60; display:flex; justify-content:flex-end; visibility:hidden; pointer-events:none}
.drawer.is-open{visibility:visible; pointer-events:auto}
.drawer__scrim{position:absolute; inset:0; background:rgba(36,10,29,.5); opacity:0; transition:opacity .25s}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer__panel{
  position:relative; width:min(460px, 100vw); height:100%; background:var(--white); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .3s cubic-bezier(.2,.7,.2,1); box-shadow:-20px 0 60px rgba(36,10,29,.2);
  padding-top:env(safe-area-inset-top, 0px); padding-bottom:env(safe-area-inset-bottom, 0px);
}
.drawer.is-open .drawer__panel{transform:none}
.drawer__head{display:flex; align-items:center; justify-content:space-between; padding:22px 26px; border-bottom:1px solid var(--line)}
.drawer__head h3{font-size:26px}
.drawer__body{flex:1; overflow:auto; padding:10px 26px}
.drawer__foot{padding:22px 26px 26px; border-top:1px solid var(--line); display:grid; gap:12px; background:var(--paper)}
.icon-btn{width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:var(--white); display:grid; place-items:center; cursor:pointer; color:var(--ink)}
.icon-btn:hover{border-color:var(--plum-700); color:var(--plum-700)}
.icon-btn svg{width:20px; height:20px}
.line-item{display:grid; grid-template-columns:64px 1fr auto; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); align-items:start}
.line-item:last-child{border-bottom:0}
.line-item__thumb{position:relative; width:64px; aspect-ratio:3/4; border-radius:8px; overflow:hidden}
.line-item__thumb .cover{padding:10px 8px}
.line-item__thumb .cover__title{font-size:9.5px}
.line-item__thumb .cover__kicker,.line-item__thumb .cover__sub,.line-item__thumb .cover__author,.line-item__thumb .cover__mark{display:none}
.line-item h4{font-family:var(--f-body); font-size:15.5px; font-weight:700; line-height:1.3}
.line-item .muted{font-size:13.5px}
.line-item .qty{margin-top:10px}
.line-item .qty button{width:32px; height:32px; font-size:16px}
.line-item__right{display:grid; justify-items:end; gap:8px}
.line-item__right .price{font-size:19px}
.remove{border:0; background:none; padding:0; font:600 13px/1 var(--f-body); color:var(--ink-3); cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.remove:hover{color:#B42318}
.sum-row{display:flex; justify-content:space-between; font-size:15px; color:var(--ink-2); font-variant-numeric:tabular-nums}
.sum-row--total{font-size:18px; font-weight:700; color:var(--ink); padding-top:10px; border-top:1px solid var(--line)}
.ship-meter{font-size:13.5px; color:var(--teal-ink); background:var(--teal-soft); border-radius:10px; padding:10px 12px}
.ship-meter i{display:block; height:5px; border-radius:3px; background:rgba(10,116,105,.18); margin-top:8px; overflow:hidden}
.ship-meter i::after{content:""; display:block; height:100%; width:var(--p); background:var(--teal); border-radius:3px; transition:width .3s}
.empty{padding:48px 10px; text-align:center; color:var(--ink-3); display:grid; gap:14px; justify-items:center}
.empty svg{width:48px; height:48px; color:var(--line-strong)}
.toast{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom, 0px)); transform:translate(-50%, 20px); z-index:70; background:var(--ink); color:#fff; padding:12px 18px; border-radius:999px; font-size:15px; font-weight:600; box-shadow:var(--shadow-2); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; display:flex; gap:10px; align-items:center}
.toast.is-on{opacity:1; transform:translate(-50%, 0)}
.toast svg{width:18px; height:18px; color:#7CE3D6}
.shop-info{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-top:64px}
.shop-info > div{display:flex; gap:16px; align-items:flex-start; padding:22px; border-radius:var(--r-md); background:var(--white); border:1px solid var(--line)}
.shop-info svg{width:26px; height:26px; color:var(--magenta); flex:none; margin-top:2px}
.shop-info b{display:block; font-size:16px}
.shop-info span{font-size:14.5px; color:var(--ink-3)}
.preview-bar{display:flex; gap:12px; align-items:flex-start; padding:14px 18px; border-radius:12px; background:#FDF1D8; color:#6A4700; font-size:14.5px; margin-bottom:34px}
.preview-bar svg{width:20px; height:20px; flex:none; margin-top:1px}

/* ---------- reveal ---------- */
.reveal{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.reveal-2{animation-delay:.08s} .reveal-3{animation-delay:.16s} .reveal-4{animation-delay:.24s}
@keyframes rise{from{opacity:.001; transform:translateY(14px)} to{opacity:1; transform:none}}

/* ---------- responsive ---------- */
@media (max-width: 1080px){
  .nav a{padding:10px 10px; font-size:15px}
  .products{grid-template-columns:repeat(3, 1fr)}
  .people,.people--five{grid-template-columns:repeat(3, minmax(0, 1fr))}
}
@media (max-width: 960px){
  :root{--header-h:68px}
  .menu-btn{display:grid}
  .site-header{backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--paper)}
  .nav{position:fixed; inset:calc(env(safe-area-inset-top, 0px) + var(--header-h)) 0 0 0; background:var(--paper); margin:0; padding:24px var(--gutter); opacity:0; transform:translateY(-8px); transition:opacity .22s, transform .22s, visibility .22s; overflow:auto; visibility:hidden; pointer-events:none}
  .nav.is-open{opacity:1; transform:none; visibility:visible; pointer-events:auto}
  .nav ul{flex-direction:column; align-items:stretch; gap:2px}
  .nav a{font-family:var(--f-display); font-size:30px; font-weight:500; color:var(--ink); padding:14px 4px; border-radius:0; border-bottom:1px solid var(--line)}
  .nav a:hover{background:none}
  .nav a[aria-current="page"]::after{display:none}
  .nav a[aria-current="page"]{color:var(--magenta)}
  .header-actions{margin-left:auto}
  .header-actions .btn{display:none}
  .hero__grid,.page-hero__grid,.course,.cal-grid,.team-teaser,.split,.split--wide,.contact-grid,.cta,.head--split{grid-template-columns:1fr}
  .page-hero__aside{justify-self:start}
  .facts{grid-template-columns:repeat(2, 1fr)}
  .fact:nth-child(3){border-left:0; padding-left:0}
  .fact:nth-child(n+3){border-top:1px solid var(--line)}
  .offers{grid-template-columns:1fr 1fr}
  .offer--feature,.offer--feature.offer--img{grid-row:auto; grid-column:1 / -1}
  .offers--media{grid-template-columns:1fr 1fr}
  .offers--three{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr; gap:36px 0}
  .step:nth-child(2)::after{display:none}
  .tiers,.goals,.cohorts,.courses,.shop-info{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr 1fr}
  .quote--lead{grid-row:auto; grid-column:1 / -1}
  .benefits{grid-template-columns:1fr 1fr}
  .benefit{padding:28px 24px 28px 0!important; border-left:0!important}
  .benefit:nth-child(2n){padding-left:24px!important; border-left:1px solid var(--line)!important}
  .people,.people--lead,.people--five{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .products{grid-template-columns:repeat(2, 1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .keyfacts{grid-template-columns:1fr 1fr}
  .std-grid{grid-template-columns:1fr}
  .pd__grid{grid-template-columns:1fr}
  .pd__cover{padding:28px}
  .pd__cover .product__cover{max-width:180px}
}
@media (max-width: 600px){
  body{font-size:16.5px}
  .quotes{grid-template-columns:1fr}
  .offers,.offers--two,.offers--three,.offers--media,.benefits,.fields,.quals,.footer-grid{grid-template-columns:1fr}
  .offer--wide{grid-template-columns:1fr}
  .offer--wide .offer__media{min-height:0; aspect-ratio:16/10}
  .offer--wide .offer__body{padding:26px}
  .benefit,.benefit:nth-child(n){padding:26px 0!important; border-left:0!important}
  .facts{grid-template-columns:1fr 1fr}
  .fact{padding:24px 12px 22px 16px}
  .fact:nth-child(odd){padding-left:0}
  .steps{grid-template-columns:1fr}
  .step::after{display:none}
  .cal-item{grid-template-columns:64px 1fr; gap:16px}
  .cal-in{grid-column:2; justify-self:start}
  .products{gap:24px 14px}
  .feature-split{grid-template-columns:1fr}
  .product__foot .price{white-space:normal; font-size:20px}
  .product__foot .price small{display:block; margin:2px 0 0}
  .add-btn{white-space:normal; font-size:13px; padding:8px 10px; line-height:1.2}
  .add-btn svg{display:none}
  .flow-line{grid-template-columns:1fr}
  .modbar__seg{font-size:0; padding:0}
  .modbar__groups{display:grid; grid-template-columns:1fr}
  .modbar__group{flex:none}
  .tablist{border-radius:18px}
  .video{aspect-ratio:4/4.6}
  .brand img{height:38px}
  .announce{font-size:13.5px}
  .toast{top:calc(12px + env(safe-area-inset-top, 0px)); bottom:auto; left:16px; right:16px; justify-content:center; transform:translateY(-20px); border-radius:16px; font-size:14px}
  .toast.is-on{transform:none}
  .faq details > div{padding-right:0}
  .pd__body{padding:28px 22px}
  .footer-bottom{flex-direction:column}
}

/* ---------- Tablet-Feinschliff ---------- */
@media (max-width: 960px){
  .subnav .wrap{position:relative}
  .subnav .wrap::after{content:""; position:absolute; right:0; top:0; bottom:0; width:44px; background:linear-gradient(90deg, rgba(255,255,255,0), #fff); pointer-events:none}
  .page-hero__aside{max-width:440px}
  .medals{max-width:360px; margin-inline:auto}
  .team-teaser__portrait{max-width:520px}
}

@media (min-width: 601px) and (max-width: 960px){
  .people--lead,.people--five{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .products{grid-template-columns:repeat(3, minmax(0, 1fr))}
}
@media (max-width: 1180px){
  .announce .wrap{flex-wrap:nowrap}
  .announce__long{display:none}
  .announce__short{display:inline}
  .announce .wrap > span,.announce a{white-space:nowrap}
}

/* ---------- Handy ---------- */
@media (max-width: 600px){
  /* Ankündigung: eine Zeile */
  .announce .wrap{min-height:38px; padding-block:7px; gap:10px; flex-wrap:nowrap}
  .announce__long{display:none}
  .announce__short{display:inline}
  .announce .dot{display:none}
  .announce .wrap > span,.announce a{white-space:nowrap}
  .announce{font-size:13.5px}

  /* Abstände */
  .section{padding-block:56px}
  .page-hero{padding-block:32px 40px}
  .page-hero .crumbs{margin-bottom:18px}
  .head{margin-bottom:28px}
  .head h2 + .lede,.head h1 + .lede{margin-top:14px}
  .page-hero .lede,.hero .lede{margin-top:18px}
  .page-hero .btn-row,.hero .btn-row{margin-top:26px}
  .lede{font-size:17px}
  h2{font-size:29px}
  .eyebrow{font-size:12px; margin-bottom:14px}

  /* Buttons: volle Breite, gut zu treffen */
  main .btn:not(.btn--sm){width:100%}
  .btn{min-height:52px; white-space:normal; text-align:center; padding-inline:18px}
  .btn-row{gap:10px}

  /* Startseite */
  .hero{padding-block:28px 48px}
  .hero__meta{margin-bottom:16px; font-size:13.5px}
  .hero__audiences{margin-top:28px; padding-top:18px}
  .fact__label{font-size:14px}
  .offer__media{aspect-ratio:16/9}
  .offer--feature .offer__media{aspect-ratio:16/11.3}
  .offer--feature .offer__body{padding:24px 22px 26px}
  .offer__body{padding:20px 22px 22px}
  .team-teaser__portrait{aspect-ratio:4/3.4}
  .team-teaser__portrait img{object-position:50% 18%}
  .faces img,.faces .face-mono{width:48px; height:48px; margin-left:-10px}
  .cta::after{display:none}
  .cta{padding:30px 22px}
  .date-card{grid-template-columns:64px 1fr; gap:16px; padding:18px}
  .date-card__cal{width:64px}
  .date-card__cal b{font-size:32px}

  /* Schritte: Nummer links, Text rechts, Linie dazwischen */
  .steps{gap:22px}
  .step{display:grid; grid-template-columns:44px 1fr; column-gap:16px; padding:0}
  .step__num{grid-row:span 2; width:44px; height:44px; font-size:20px; margin:0}
  .step h4{margin:9px 0 4px}
  .step:not(:last-child)::after{display:block; left:21px; right:auto; top:50px; bottom:-18px; width:1.5px; height:auto; background:repeating-linear-gradient(180deg, var(--line-strong) 0 5px, transparent 5px 10px)}

  /* Stimmen: zum Wischen */
  .quotes{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter); scroll-padding-inline:var(--gutter); scrollbar-width:none; padding-bottom:4px}
  .quotes::-webkit-scrollbar{display:none}
  .quote{flex:0 0 86%; scroll-snap-align:start; padding:24px 22px 20px}
  .quote--lead{padding:24px 22px 20px}
  .quote--lead blockquote{font-size:19px}
  .quote blockquote{font-size:17.5px}
  .swipe-hint{display:block; margin-top:14px; font-size:13.5px; font-weight:600; color:var(--ink-3)}
  .swipe-hint span{color:var(--magenta)}

  /* Gütesiegel */
  .medals{max-width:300px}
  .tablist{display:flex; width:100%; flex-wrap:nowrap; border-radius:999px; padding:4px; gap:4px}
  .tab{flex:1 1 auto; padding:10px 8px; font-size:14.5px; white-space:nowrap}
  .tab small{margin-left:4px}
  .tab__long{display:none}
  .tabpanel{margin-top:24px}
  .tabpanel__intro{flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:20px; font-size:15px}
  .std{padding:22px 20px 20px}
  .tier{padding:24px 22px}
  .tier__visual{min-height:0}
  .tier__medal{width:112px}
  .variant-switch{left:50%; transform:translateX(-50%); bottom:calc(10px + env(safe-area-inset-bottom, 0px)); padding:4px 4px 4px 12px; font-size:12px; white-space:nowrap}
  .variant-switch button{padding:7px 11px; font-size:12.5px}
  .goal{padding:24px 22px}

  /* Weiterbildung: Modultabelle ohne seitliches Scrollen */
  table.modules{min-width:0; font-size:15px}
  table.modules th:nth-child(2),table.modules td:nth-child(2){display:none}
  table.modules th,table.modules td{padding:12px 14px}
  table.modules tbody tr td:first-child::before{content:""; display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:10px; vertical-align:1px; background:var(--c, var(--line-strong))}
  table.modules tr[data-type="grund"]{--c:var(--plum-600)}
  table.modules tr[data-type="fach"]{--c:var(--magenta)}
  table.modules tr[data-type="spezial"]{--c:var(--teal)}
  .modbar__scale{font-size:11.5px}
  .group-title{flex-direction:column; align-items:flex-start; gap:2px}
  .group-title h3{font-size:23px}
  .cohort__num{font-size:44px}
  .course-card{padding:22px 20px}

  /* Beratung: Karten oben kompakt */
  .offers--three{gap:12px}
  .offers--three .offer--img{display:grid; grid-template-columns:108px 1fr}
  .offers--three .offer__media{aspect-ratio:auto; height:100%; min-height:120px}
  .offers--three .offer__body{padding:16px 18px; gap:6px}
  .offers--three .offer h3,.offers--three h3{font-size:20px}
  .offers--three .offer p{font-size:14.5px}
  .card{padding:24px 20px}

  /* Team: Foto links, Text rechts */
  .people,.people--lead,.people--five{grid-template-columns:1fr; gap:22px}
  .person{grid-template-columns:104px minmax(0, 1fr); gap:16px; align-items:start}
  .person__img,.people--lead .person__img{aspect-ratio:4/5; border-radius:12px}
  .person__mono{font-size:34px}
  .person__mono::after{width:14px; height:14px; right:8px; bottom:8px}
  .person h4,.people--five h4{font-size:17px}
  .person p,.people--five p{font-size:14.5px; margin-top:4px}

  /* Shop */
  .page-hero__aside .photo--square{aspect-ratio:16/10}
  .products .cover{padding:12% 10% 10%}
  .products .product__badges + .cover{padding-bottom:40px}
  .products .cover__sub,.products .cover__author,.products .cover__kicker{display:none}
  .products .cover{justify-content:flex-end}
  .products .cover__title{font-size:18px}
  .product h3{font-size:16px}
  .preview-bar{font-size:13.5px; padding:12px 14px}
  .shop-info{margin-top:44px}
  .drawer__head,.drawer__body,.drawer__foot{padding-inline:18px}
  .line-item{grid-template-columns:52px 1fr auto; gap:12px}
  .line-item__thumb{width:52px}
  dialog.pd{width:calc(100vw - 20px); max-height:calc(100vh - 20px)}
  .pd__body{max-height:none}
  .pd__body h2{font-size:26px}

  /* Kontakt */
  .copy-row a{font-size:17px}
  .form{padding:22px 18px}

  /* Footer: Links zweispaltig */
  .footer-grid{grid-template-columns:1fr 1fr; gap:32px 20px}
  .footer-brand,.footer-grid > div:last-child{grid-column:1 / -1}
  .site-footer{padding-block:48px 24px}
  .footer-bottom{margin-top:36px}
}
@media (max-width: 380px){
  .person{grid-template-columns:88px minmax(0, 1fr)}
  .tab{font-size:13.5px; padding:10px 6px}
  .products{grid-template-columns:1fr 1fr; gap:22px 10px}
}

/* ---------- Handy-Menü: Symbol und Pfeil je Eintrag ---------- */
.nav__ic, .nav__go, .nav__mobil{display:none}
@media (max-width: 960px){
  .nav{overscroll-behavior:contain}
  .nav .nav__mobil{display:block}
  .nav a{display:flex; align-items:center; gap:16px}
  .nav__ic{display:grid; place-items:center; flex:none; width:50px; height:50px; border-radius:16px; background:var(--ic-bg, var(--magenta-soft)); color:var(--ic-fg, var(--plum-700)); transition:transform .2s}
  .nav__ic svg{width:26px; height:26px}
  .nav__txt{flex:1; min-width:0}
  .nav__go{display:grid; place-items:center; flex:none; color:var(--ink-3); transition:transform .2s, color .2s}
  .nav__go svg{width:20px; height:20px}
  .nav a:hover .nav__go, .nav a:focus-visible .nav__go{transform:translateX(3px); color:var(--plum-700)}
  .nav a:active .nav__ic{transform:scale(.94)}
  .nav a[aria-current="page"] .nav__go{color:var(--magenta)}
  .nav-ic--guetesiegel{--ic-bg:#F6ECD6; --ic-fg:#8A6418}
  .nav-ic--weiterbildung{--ic-bg:var(--teal-soft); --ic-fg:var(--teal-ink)}
  .nav-ic--beratung{--ic-bg:var(--magenta-soft); --ic-fg:var(--plum-700)}
  .nav-ic--team{--ic-bg:#EFE6F2; --ic-fg:var(--plum-700)}
  .nav-ic--shop{--ic-bg:#FCE4F0; --ic-fg:var(--magenta)}
  .nav-ic--kontakt{--ic-bg:var(--plum-700); --ic-fg:#fff}
}
@media (max-width: 380px){
  .nav a{font-size:26px; gap:14px}
  .nav__ic{width:44px; height:44px; border-radius:14px}
}

/* ---------- Menü: deutliche Rückmeldung bei Maus, Tastatur, Antippen und aktueller Seite ---------- */
@media (min-width: 961px){
  .nav a:hover{background:none}
  .nav a::after{content:""; position:absolute; left:14px; right:14px; bottom:3px; height:2px; border-radius:2px; background:var(--magenta); transform:scaleX(0); transition:transform .25s cubic-bezier(.2,.7,.2,1)}
  .nav a:hover::after, .nav a:focus-visible::after, .nav a[aria-current="page"]::after{transform:scaleX(1)}
  .nav a:focus-visible{outline:2px solid var(--magenta); outline-offset:2px}
}
@media (max-width: 960px){
  .nav a{-webkit-tap-highlight-color:transparent; border-bottom:0; border-radius:18px; padding:10px 10px; margin-inline:-10px; transition:background .2s, color .2s}
  .nav li{border-bottom:1px solid var(--line); padding-block:4px}
  .nav li:last-child{border-bottom:0}
  .nav a:active{background:color-mix(in srgb, var(--ic-bg, var(--magenta-soft)) 75%, transparent)}
  .nav a:focus-visible{outline:2px solid var(--magenta); outline-offset:2px}
  .nav a[aria-current="page"]{background:color-mix(in srgb, var(--ic-bg, var(--magenta-soft)) 60%, transparent); color:var(--ic-fg, var(--magenta))}
  .nav-ic--kontakt a[aria-current="page"]{color:var(--plum-700)}
  .nav a[aria-current="page"] .nav__ic{background:var(--ic-fg, var(--plum-700)); color:#fff}
  .nav-ic--kontakt a[aria-current="page"] .nav__ic{background:#fff; color:var(--plum-700)}
  .nav a[aria-current="page"] .nav__go svg{display:none}
  .nav a[aria-current="page"] .nav__go::after{content:"Sie sind hier"; font:700 12px/1 var(--f-body); letter-spacing:.02em; color:var(--ic-fg, var(--plum-700)); background:#fff; padding:7px 10px; border-radius:999px; white-space:nowrap}
  .nav-ic--kontakt a[aria-current="page"] .nav__go::after{color:var(--plum-700)}
  /* Einträge gleiten beim Öffnen nacheinander herein */
  .nav li{opacity:0; transform:translateY(10px); transition:opacity .3s ease, transform .35s cubic-bezier(.2,.7,.2,1)}
  .nav.is-open li{opacity:1; transform:none}
  .nav.is-open li:nth-child(2){transition-delay:.04s}
  .nav.is-open li:nth-child(3){transition-delay:.08s}
  .nav.is-open li:nth-child(4){transition-delay:.12s}
  .nav.is-open li:nth-child(5){transition-delay:.16s}
  .nav.is-open li:nth-child(6){transition-delay:.2s}
  .nav.is-open li:nth-child(n+7){transition-delay:.24s}
}