/* Dentosophie-Ausbildung, Craniosophie Akademie
   Layout: warmer Greige-Verlauf als Grund, Portrait randlos eingeblendet,
   Navigation als Pillen-Gruppe, Überschriften im Kontrast leicht/fett.
   Farben aus der bisherigen Website: Anthrazit #3a3735, Greige #bab7ac (Logo), Taupe #867a6c. */

/* Schriften lokal eingebunden (Inter, Cormorant Garamond; SIL Open Font License), keine Verbindung zu Google */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/cormorant-garamond-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/cormorant-garamond-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #f2f0eb;
  --bg-top: #c9c4b8;
  --bg-mid: #dfdbd2;
  --surface: #ffffff;
  --glass: rgba(255, 255, 255, .6);
  --ink: #2a2725;
  --ink-soft: #4a4542;
  --muted: #7a726a;
  --light: #8a8073;
  --line: rgba(58, 55, 53, .16);
  --dark: #3a3735;
  --dark-deep: #2a2725;
  --greige: #bab7ac;
  --accent: #bab7ac;      /* Greige aus dem Logo: auf Anthrazit */
  --accent-ink: #867a6c;  /* Taupe: auf Weiss und hellen Flächen */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --radius: 28px;
  --radius-sm: 18px;
  --max: 1240px;
  --gutter: clamp(16px, 2.6vw, 34px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 999px; }

h1, h2, h3, h4 { font-family: var(--font); font-weight: 600; line-height: 1.05; letter-spacing: -.035em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); }
h3 { font-size: 1.3rem; letter-spacing: -.02em; line-height: 1.2; }
.lt { font-weight: 300; color: var(--light); }
p { margin: 0; }
p + p { margin-top: 1em; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.55; color: var(--ink-soft); max-width: 58ch; }
.muted { color: var(--muted); }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(72px, 10vw, 140px); }
section[id], main[id] { scroll-margin-top: 90px; }
.m-only { display: none; }

/* Pills (also used for eyebrows) */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill, .eyebrow {
  display: inline-flex; align-items: center; width: fit-content;
  padding: 7px 16px; border-radius: 999px;
  border: 1px solid rgba(58,55,53,.5);
  font-size: .88rem; font-weight: 500; letter-spacing: -.005em; color: var(--ink);
  background: transparent;
}
.section-head { display: grid; gap: 18px; max-width: 54rem; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head .lead { margin-top: 2px; }
.section-head.left { max-width: none; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  padding: 14px 22px 14px 26px; border-radius: 999px;
  font: 500 1rem/1 var(--font); letter-spacing: -.01em;
  border: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .2s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn .arrow { color: var(--accent); font-size: 1.1em; transition: transform .2s ease; }
.price.featured .btn-primary .arrow, .certificate .btn-primary .arrow, .cta-box .btn-primary .arrow { color: var(--accent-ink); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-primary { background: var(--dark); color: #fff; }
.btn-primary:hover { background: var(--dark-deep); }
.btn-secondary { background: var(--glass); color: var(--ink); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding-inline: 24px; }
.btn-secondary:hover { background: #fff; }
.btn-lg { padding: 18px 26px 18px 34px; font-size: 1.08rem; }
.btn-small { padding: 12px 18px 12px 22px; font-size: .95rem; }

/* Header */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: calc(18px + env(safe-area-inset-top, 0px)) var(--gutter) 0; transition: transform .3s ease; pointer-events: none; }
.header-inner { max-width: var(--max); margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; pointer-events: auto; }
.site-header.scrolled { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
.site-header::before { content: ""; position: absolute; inset: 0 0 -28px 0; background: linear-gradient(180deg, rgba(242,240,235,.96) 0%, rgba(242,240,235,.82) 55%, rgba(242,240,235,0) 100%); opacity: 0; transition: opacity .3s ease; pointer-events: none; z-index: -1; }
.site-header.scrolled::before { opacity: 1; }
.site-header.scrolled .brand { background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.brand { display: inline-flex; align-items: center; gap: 12px; justify-self: start; padding: 5px 16px 5px 5px; border-radius: 999px; text-decoration: none; color: var(--ink); min-width: 0; transition: none; }
.brand-mark { position: relative; width: 48px; height: 48px; border-radius: 50%; background: var(--dark); overflow: hidden; flex: none; }
.brand-mark img { position: absolute; top: 9px; left: 9px; height: 30px; width: auto; max-width: none; clip-path: inset(0 calc(100% - 30px) 0 0); filter: brightness(1.35); }
.brand-text { display: grid; line-height: 1.15; min-width: 0; }
.brand-text strong { font-size: .98rem; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.brand-text small { font-size: .74rem; color: var(--muted); white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 6px; }
.nav a { padding: 15px 20px; border-radius: 999px; background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: var(--ink); font-size: .95rem; font-weight: 500; letter-spacing: -.01em; text-decoration: none; transition: none; }
.nav a:hover { background: #fff; }
.nav a.active { background: var(--dark); color: #fff; }
.nav-cta { justify-self: end; display: flex; align-items: center; gap: 8px; }
.menu-toggle { display: none; width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 0; background: var(--dark); color: #fff; cursor: pointer; place-items: center; transition: transform .25s ease; }
.menu-toggle svg { width: 22px; height: 22px; fill: currentColor; }
.menu-toggle:hover { background: var(--dark-deep); }
.menu-toggle[aria-expanded="true"] { transform: rotate(90deg); }

@media (max-width: 1180px) { .brand-text small { display: none; } .nav a { padding: 13px 15px; font-size: .9rem; } }
@media (max-width: 980px) {
  .header-inner { grid-template-columns: 1fr auto; }
  .site-header { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
  .brand { padding: 4px 14px 4px 4px; }
  .site-header .brand { background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
  .brand-mark { width: 40px; height: 40px; }
  .brand-mark img { top: 7px; left: 7px; height: 26px; clip-path: inset(0 calc(100% - 26px) 0 0); }
  .brand-text strong { font-size: .9rem; }
  .nav { position: absolute; top: calc(100% + 8px); left: var(--gutter); right: var(--gutter); flex-direction: column; align-items: stretch; gap: 6px; padding: 8px; border-radius: 26px; background: rgba(255,255,255,.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 20px 50px rgba(58,55,53,.12); display: none; }
  .nav.open { display: flex; }
  .nav a { padding: 16px 20px; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; font-size: 1.05rem; }
  .nav a.active { background: var(--dark); }
  .menu-toggle { display: grid; }
  .nav-cta .btn { display: none; }
}

/* Hero */
.hero {
  position: relative; overflow: hidden;
  min-height: min(100svh, 900px);
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 45%, var(--bg) 100%);
  display: flex;
}
.hero-visual { position: absolute; inset: 0 0 0 auto; width: min(58vw, 860px); pointer-events: none; }
.hero-visual img {
  width: 100%; height: 100%; object-fit: cover; object-position: 30% 18%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 30%), linear-gradient(to top, transparent 0%, #000 28%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 30%), linear-gradient(to top, transparent 0%, #000 28%);
  mask-composite: intersect;
  filter: saturate(.92) contrast(1.02);
}
.hero-inner { position: relative; z-index: 1; width: 100%; max-width: var(--max); margin-inline: auto; padding: clamp(120px, 16vh, 170px) var(--gutter) clamp(32px, 5vh, 56px); display: grid; grid-template-rows: 1fr auto; gap: 48px; }
.hero-copy { align-self: center; display: grid; gap: 26px; max-width: 700px; }
.hero h1 { font-size: clamp(2.6rem, 4.6vw, 4.1rem); }
.hero-actions { display: flex; align-items: center; gap: 8px; }
.avatar { width: 62px; height: 62px; border-radius: 50%; overflow: hidden; flex: none; border: 2px solid rgba(255,255,255,.7); transition: transform .25s ease; }
.avatar:hover { transform: scale(1.06); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar:nth-of-type(1) img { object-position: 30% 30%; }
.avatar:nth-of-type(2) img { object-position: 55% 45%; }
.hero-foot { display: flex; justify-content: space-between; align-items: end; gap: 32px; }
.hero-desc { max-width: 34rem; font-size: 1.08rem; line-height: 1.5; color: var(--ink-soft); }
.hero-badge { position: absolute; left: 24%; bottom: clamp(36px, 8vh, 80px); z-index: 2; display: grid; gap: 2px; max-width: 320px; padding: 11px 16px 12px; border-radius: 16px; background: rgba(255,255,255,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 28px rgba(42,39,37,.10); animation: rise .8s cubic-bezier(.2,.7,.2,1) .55s both; }
.hero-badge-label { display: inline-flex; align-items: center; gap: 6px; font-size: .7rem; font-weight: 500; color: var(--accent-ink); margin-bottom: 2px; }
.hero-badge-label::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-ink); }
.hero-badge strong { font-size: .95rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; color: var(--ink); }
.hero-badge-role { font-size: .76rem; color: var(--muted); line-height: 1.35; }

@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
.hero-copy > * { animation: rise .8s cubic-bezier(.2,.7,.2,1) both; }
.hero-copy > :nth-child(1) { animation-delay: .1s; }
.hero-copy > :nth-child(2) { animation-delay: .2s; }
.hero-copy > :nth-child(3) { animation-delay: .32s; }
.hero-foot { animation: rise .8s cubic-bezier(.2,.7,.2,1) .45s both; }
.hero-visual { animation: fadeIn 1.2s cubic-bezier(.2,.7,.2,1) both; }
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .hero { min-height: 0; flex-direction: column; }
  .hero-visual { position: relative; inset: auto; width: 100%; height: min(108vw, 600px); padding-top: 66px; }
  .hero-visual img { object-position: 50% 12%; -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 35%); mask-image: linear-gradient(to top, transparent 0%, #000 35%); -webkit-mask-composite: source-over; mask-composite: add; }
  .hero-inner { padding: 22px var(--gutter) 40px; margin-top: 0; gap: 28px; }
  .hero-copy { gap: 18px; }
  .hero h1 { font-size: clamp(2.2rem, 9vw, 3rem); }
  .hero-foot { flex-direction: column; align-items: stretch; gap: 16px; }
  .hero-desc { font-size: 1rem; }
  .hero-badge { left: var(--gutter); right: auto; bottom: 12px; max-width: calc(100% - 2 * var(--gutter)); padding: 9px 13px 10px; border-radius: 14px; gap: 1px; }
  .hero-badge-label { display: none; }
  .hero-badge strong { font-size: .84rem; }
  .hero-badge-role { display: none; }
  .avatar { width: 54px; height: 54px; }
}
@media (max-width: 420px) { .avatar:nth-of-type(2) { display: none; } .btn-lg { padding: 17px 22px 17px 28px; } }

/* Trust strip */
.trust { padding-block: 0 24px; }
.trust .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.trust-item { display: grid; gap: 6px; padding: 24px; background: var(--surface); border-radius: var(--radius-sm); }
.trust-item strong { font-size: 1.2rem; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
.trust-item span { font-size: .88rem; color: var(--muted); }
@media (max-width: 980px) { .trust .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .trust-item { padding: 16px; } .trust-item strong { font-size: .98rem; } .trust-item span { display: none; } }

/* Icons */
.ico { width: 44px; height: 44px; border-radius: 50%; background: var(--bg); color: var(--ink); display: grid; place-items: center; flex: none; }
.ico svg { width: 20px; height: 20px; }

/* Problem / Silo */
.silo { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.silo .section-head { margin-bottom: 32px; }
.silo-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.silo-list li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: center; padding: 14px 20px 14px 14px; background: var(--surface); border-radius: 999px; }
.silo-list strong { display: block; font-weight: 600; letter-spacing: -.015em; }
.silo-list span { color: var(--muted); font-size: .92rem; }
.silo figure { margin: 0; }
.silo figure img { border-radius: var(--radius); aspect-ratio: 4 / 5; object-fit: cover; object-position: 45% 50%; }
@media (max-width: 980px) {
  .silo { grid-template-columns: 1fr; }
  .silo figure { display: none; }
  .silo-list li { border-radius: var(--radius-sm); }
  .silo-list li > div > span { display: none; }
}

/* Cards */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 980px) { .grid-3, .grid-2 { grid-template-columns: 1fr; gap: 10px; } }
.card { background: var(--surface); border-radius: var(--radius); padding: 34px; display: grid; gap: 14px; align-content: start; min-width: 0; transition: transform .3s ease; }
.card:hover { transform: translateY(-4px); }
.card p { color: var(--ink-soft); }
.card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--ink-soft); font-size: .96rem; }
.card ul li { padding-left: 20px; position: relative; }
.card ul li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-ink); }
@media (max-width: 980px) {
  .card { padding: 24px 22px; border-radius: var(--radius-sm); gap: 10px; }
  .card p, .card ul { font-size: .95rem; }
  #ausbildung .card { grid-template-columns: 44px 1fr; column-gap: 14px; }
  #ausbildung .card .ico { grid-row: span 2; }
  .lead { font-size: 1rem; }
}
.alt { background: linear-gradient(180deg, var(--bg) 0%, #e7e3da 100%); }

/* Audience */
.audience .who { font-size: 1.55rem; font-weight: 600; letter-spacing: -.03em; line-height: 1.12; }
.audience .num { width: fit-content; padding: 5px 12px; border-radius: 999px; background: var(--bg); font-size: .8rem; font-weight: 500; color: var(--ink-soft); }

/* Included (offer stack) */
.included { background: var(--surface); border-radius: var(--radius); padding: clamp(24px, 3vw, 40px); margin-bottom: 12px; display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 24px 48px; align-items: start; }
.included-head { display: grid; gap: 8px; }
.included-head h3 { font-size: 1.6rem; letter-spacing: -.03em; }
.included-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; }
.included-list li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; min-width: 0; }
.included-list strong { display: block; font-weight: 600; line-height: 1.3; letter-spacing: -.015em; }
.included-list span { font-size: .9rem; color: var(--muted); }
.more-btn { display: none; margin-top: 6px; padding: 12px 20px; border-radius: 999px; border: 1px solid rgba(58,55,53,.5); background: none; font: 500 .92rem/1 var(--font); color: var(--ink); cursor: pointer; }
@media (max-width: 980px) { .included { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .included-list { grid-template-columns: 1fr; gap: 16px; }
  .included-list li.m-more { display: none; }
  .included.expanded .included-list li.m-more { display: grid; }
  .more-btn { display: inline-block; justify-self: start; }
}

/* Pricing */
.pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.price { background: var(--surface); border-radius: var(--radius); padding: 34px 30px; display: grid; gap: 18px; align-content: start; min-width: 0; position: relative; }
.price.featured { background: var(--dark); color: #fff; }
.price.featured::before { content: "Für Praxisinhaber"; width: fit-content; order: -1; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); font-size: .8rem; font-weight: 500; }
.price .who { font-weight: 600; font-size: 1.05rem; letter-spacing: -.015em; }
.price .amount { font-size: 3rem; font-weight: 600; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.price .amount small { font-size: 1rem; color: var(--muted); font-weight: 400; letter-spacing: 0; margin-left: 6px; }
.price ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--ink-soft); font-size: .95rem; }
.price.featured ul, .price.featured .amount small { color: #cfcbc2; }
.price ul li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
.price ul li svg { width: 16px; height: 16px; color: var(--ink); margin-top: 4px; }
.price.featured ul li svg { color: var(--accent); }
.price .btn { margin-top: 6px; }
.price .btn-secondary { background: var(--bg); }
.price.featured .btn-primary { background: #fff; color: var(--ink); }
.price-note { margin-top: 20px; font-size: .9rem; color: var(--muted); }
@media (max-width: 980px) { .pricing { grid-template-columns: 1fr; gap: 10px; } .price { padding: 28px 24px; } }

/* Benefits */
.benefit-wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.benefit-block { background: var(--surface); border-radius: var(--radius); padding: 32px; min-width: 0; }
.check-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.check-list li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; color: var(--ink-soft); font-size: .97rem; }
.check-list li svg { width: 20px; height: 20px; color: var(--ink); margin-top: 2px; }
.callout { background: var(--dark); color: #fff; border-radius: var(--radius-sm); padding: 20px 22px; display: grid; gap: 8px; }
.callout .label { font-size: .8rem; font-weight: 500; color: #cfcbc2; }
.callout .values { display: grid; gap: 10px; font-variant-numeric: tabular-nums; }
.callout .values strong { font-size: 1.35rem; font-weight: 600; letter-spacing: -.03em; color: var(--accent); }
.callout .values span { display: block; font-size: .85rem; color: #cfcbc2; }
@media (max-width: 1080px) { .benefit-wrap { grid-template-columns: 1fr; gap: 10px; } }
@media (max-width: 980px) { .benefit-block { padding: 22px; border-radius: var(--radius-sm); } }

/* Collapsible on mobile (details.md): always open on desktop */
.md > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; font-size: 1.35rem; letter-spacing: -.025em; line-height: 1.2; pointer-events: none; margin-bottom: 18px; }
.md > summary::-webkit-details-marker { display: none; }
.md > summary::after { content: "+"; display: none; width: 34px; height: 34px; border-radius: 50%; background: var(--bg); place-items: center; font-size: 1.3rem; font-weight: 300; flex: none; }
.md[open] > summary::after { transform: rotate(45deg); }
.md > .md-body { display: grid; gap: 16px; }
@media (max-width: 980px) {
  .md > summary { pointer-events: auto; cursor: pointer; font-size: 1.08rem; margin-bottom: 0; }
  .md > summary::after { display: grid; }
  .md[open] > .md-body { margin-top: 18px; }
  .m-hide { display: none !important; }
}

/* Curriculum */
.phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: phase; }
.phase { background: var(--surface); border-radius: var(--radius); padding: 34px 30px; display: grid; gap: 14px; align-content: start; min-width: 0; transition: transform .3s ease; }
.phase:hover { transform: translateY(-4px); }
.phase .months { width: fit-content; padding: 6px 14px; border-radius: 999px; background: var(--dark); color: #fff; font-size: .8rem; font-weight: 500; }
.phase p { color: var(--ink-soft); }
.phase .topics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.phase .topics span { font-size: .8rem; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-soft); }
.companion { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.companion .item { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 14px 22px 14px 14px; border-radius: 999px; background: var(--glass); }
.companion .item .ico { background: #fff; }
.companion .item strong { display: block; font-weight: 600; letter-spacing: -.015em; font-size: .97rem; }
.companion .item span { font-size: .86rem; color: var(--muted); }
.certificate { margin-top: 12px; display: grid; grid-template-columns: 64px 1fr auto; gap: 22px; align-items: center; padding: 26px 30px; border-radius: var(--radius); background: var(--dark); color: #fff; }
.certificate .ico { width: 64px; height: 64px; background: rgba(255,255,255,.08); color: var(--accent); }
.certificate .ico svg { width: 28px; height: 28px; }
.certificate strong { display: block; font-weight: 600; font-size: 1.3rem; letter-spacing: -.025em; }
.certificate span { color: #cfcbc2; font-size: .95rem; }
.certificate .btn-primary { background: #fff; color: var(--ink); }
@media (max-width: 980px) {
  .phases, .companion { grid-template-columns: 1fr; gap: 8px; }
  .phase { padding: 24px 22px; border-radius: var(--radius-sm); }
  .phase .topics { display: none; }
  .companion .item { border-radius: var(--radius-sm); }
  .certificate { grid-template-columns: 48px 1fr; padding: 22px; gap: 16px; }
  .certificate .ico { width: 48px; height: 48px; }
  .certificate .btn { grid-column: 1 / -1; justify-self: start; }
}

/* About */
.about { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.about figure { margin: 0; }
.about figure img { border-radius: var(--radius); aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.about-copy { display: grid; gap: 20px; }
.about-copy .name { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.about-copy .role { color: var(--muted); font-size: .95rem; }
.about-copy > p:not(.name):not(.role) { color: var(--ink-soft); }
.about-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.about-facts div { padding: 16px 18px; background: var(--surface); border-radius: var(--radius-sm); display: grid; gap: 2px; min-width: 0; }
.about-facts strong { font-weight: 600; letter-spacing: -.015em; }
.about-facts span { font-size: .86rem; color: var(--muted); }
blockquote { margin: 0; padding: 0; font-size: clamp(1.3rem, 2.2vw, 1.75rem); font-weight: 300; letter-spacing: -.03em; line-height: 1.3; color: var(--ink); }
/* Mobile: Überschrift zuerst, dann Portrait mit Name und Titel direkt darunter, dann Text */
@media (max-width: 980px) {
  .about { grid-template-columns: 1fr; gap: 0; }
  .about-copy { display: contents; }
  .about-copy > * { order: 3; }
  .about-copy > .eyebrow { order: 0; justify-self: start; margin-bottom: 16px; }
  .about-copy > h1 { order: 1; margin-bottom: 28px; }
  .about figure { order: 2; margin-bottom: 18px; width: 100%; max-width: 480px; }
  .about figure img { aspect-ratio: 4 / 5; object-position: 50% 20%; }
  .about-copy > div:not(.about-facts) { margin-bottom: 20px; }
  .about-copy > p:not(.name):not(.role) { margin-bottom: 24px; }
  .about-facts { display: none; }
}

/* FAQ */
.faq-wrap { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.faq-wrap .section-head { margin-bottom: 0; position: sticky; top: 110px; }
.faq { display: grid; gap: 8px; }
.faq-item { background: var(--surface); border-radius: var(--radius-sm); }
.faq-item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 34px; gap: 16px; align-items: center; padding: 20px 20px 20px 24px; font-weight: 600; font-size: 1.02rem; letter-spacing: -.015em; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; width: 34px; height: 34px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font-size: 1.3rem; font-weight: 300; }
.faq-item[open] summary::after { transform: rotate(45deg); background: var(--dark); color: #fff; }
.faq-body { padding: 0 24px 24px; color: var(--ink-soft); max-width: 62ch; animation: rise .4s ease both; }
@media (max-width: 980px) { .faq-wrap { grid-template-columns: 1fr; } .faq-wrap .section-head { position: static; } }

/* CTA band */
.cta-band { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-mid) 55%, var(--bg-top) 100%); }
.cta-band .wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(72px, 10vw, 140px); }
.cta-band .wrap > div:first-child { display: grid; gap: 20px; }
.cta-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cta-steps li { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; background: var(--glass); color: var(--ink-soft); font-size: .92rem; }
.cta-steps li b { width: 26px; height: 26px; border-radius: 50%; background: var(--dark); color: var(--accent); display: grid; place-items: center; font-size: .78rem; font-weight: 600; }
.cta-box { background: var(--dark); color: #fff; border-radius: var(--radius); padding: 34px; display: grid; gap: 16px; }
.cta-box .big { font-size: 1.6rem; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.cta-box p { color: #cfcbc2; }
.cta-box .btn-primary { background: #fff; color: var(--ink); width: 100%; }
.cta-box .or { font-size: .88rem; color: #cfcbc2; text-align: center; }
@media (max-width: 980px) { .cta-band .wrap { grid-template-columns: 1fr; } .cta-steps { display: none; } .cta-box { padding: 26px 22px; } }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.contact-info { display: grid; gap: 10px; align-content: start; }
.contact-info .row { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 14px 20px 14px 14px; background: var(--surface); border-radius: var(--radius-sm); }
.contact-info .row strong { display: block; font-weight: 600; letter-spacing: -.015em; }
.contact-info .row > div span, .contact-info .row > div a { display: block; color: var(--muted); word-break: break-word; font-size: .95rem; }
.contact-info .row > div a { color: var(--ink); }
.contact-info > div:last-child { padding-top: 14px; }
.socials { display: flex; flex-wrap: wrap; gap: 8px; }
.socials a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(58,55,53,.5); color: var(--ink); font-size: .9rem; font-weight: 500; text-decoration: none; }
.socials a:hover { background: var(--dark); color: #fff; }
.socials svg { width: 18px; height: 18px; }
.form { background: var(--surface); border-radius: var(--radius); padding: 34px; display: grid; gap: 16px; }
.form h3, .form .form-title { font-size: 1.5rem; letter-spacing: -.03em; }
.form .intro { color: var(--muted); font-size: .95rem; }
.field { display: grid; gap: 6px; }
.field label { font-size: .85rem; font-weight: 500; color: var(--ink-soft); }
.field input, .field select, .field textarea { font: inherit; padding: 14px 18px; border: 1px solid transparent; border-radius: 16px; background: var(--bg); color: var(--ink); width: 100%; min-width: 0; }
.field input, .field select { border-radius: 999px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); background: #fff; }
.field textarea { min-height: 130px; resize: vertical; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form .btn { justify-self: start; }
.form .fine { font-size: .8rem; color: var(--muted); }
.form-status { display: none; padding: 14px 18px; border-radius: 16px; background: var(--bg); font-weight: 500; }
.form-status.show { display: block; }
@media (max-width: 980px) { .contact { grid-template-columns: 1fr; } .form { padding: 24px 20px; } .form .btn { justify-self: stretch; } }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

/* Footer */
.site-footer { background: var(--dark); color: #b3aea4; padding-block: 64px 28px; font-size: .92rem; }
.site-footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; }
.footer-logo { display: inline-block; text-decoration: none; }
.footer-logo img { height: 44px; width: auto; filter: brightness(1.25); }
.site-footer .footer-title { color: #fff; font-size: .85rem; letter-spacing: -.01em; font-weight: 600; margin-bottom: 14px; }
.site-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.site-footer a { color: #b3aea4; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer .claim { font-size: 1.4rem; font-weight: 600; letter-spacing: -.03em; color: #fff; margin-top: 18px; }
.site-footer .small { font-size: .88rem; }
.footer-bottom { max-width: var(--max); margin: 40px auto 0; padding-inline: var(--gutter); padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); font-size: .8rem; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
@media (max-width: 980px) { .site-footer .wrap { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 560px) { .site-footer .wrap { grid-template-columns: 1fr 1fr; gap: 28px 20px; } .site-footer .wrap > div:first-child, .site-footer .wrap > div:last-child { grid-column: 1 / -1; } .footer-logo img { height: 38px; } }

/* Mobile sticky CTA */
.mobile-cta { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px)); pointer-events: none; transform: translateY(120%); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.mobile-cta.show { transform: none; }
.mobile-cta .btn { width: 100%; pointer-events: auto; box-shadow: 0 12px 30px rgba(58,55,53,.25); padding-block: 17px; }
@media (max-width: 980px) {
  .mobile-cta { display: block; }
  body { padding-bottom: 0; }
  .site-footer { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
  .section { padding-block: 64px; }
  .section-head { margin-bottom: 28px; gap: 14px; }
  h2 { font-size: clamp(1.8rem, 7.4vw, 2.4rem); }
  .m-only { display: block; }
}

/* Legal pages */
.legal { max-width: 72ch; padding-block: clamp(120px, 14vw, 160px) clamp(48px, 7vw, 96px); display: grid; gap: 22px; }
.legal h1 { font-size: clamp(2.2rem, 4.4vw, 3.2rem); }
.legal h2 { font-size: 1.3rem; letter-spacing: -.02em; margin-top: 14px; }
.legal p, .legal li { color: var(--ink-soft); }
.legal address { font-style: normal; line-height: 1.7; }
.back { display: inline-flex; width: fit-content; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: var(--surface); font-weight: 500; text-decoration: none; }

/* Unterseiten: erster Abschnitt als Seitenkopf unter der schwebenden Navigation */
.section.page-top { padding-top: clamp(140px, 16vw, 200px); background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 38%, var(--bg) 100%); }
.page-top h1 { font-size: clamp(2.3rem, 5vw, 4rem); }
.page-top .section-head { margin-bottom: clamp(36px, 5vw, 64px); }
@media (max-width: 980px) { .section.page-top { padding-top: 112px; } .page-top h1 { font-size: clamp(2rem, 8.4vw, 2.7rem); } }

/* Startseite: Übersichtskacheln zu den Unterseiten */
.teaser-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.teaser { position: relative; overflow: hidden; display: grid; align-content: end; gap: 10px; min-height: 280px; padding: 32px; border-radius: var(--radius); background: var(--surface); color: var(--ink); text-decoration: none; transition: transform .3s ease; isolation: isolate; }
.teaser:hover { transform: translateY(-4px); text-decoration: none; }
.teaser h3 { font-size: 1.7rem; letter-spacing: -.035em; }
.teaser p { color: var(--ink-soft); max-width: 42ch; }
.teaser-kicker { width: fit-content; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: .8rem; font-weight: 500; color: var(--ink-soft); }
.teaser-more { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; font-weight: 500; }
.teaser-more .arrow { color: var(--accent-ink); transition: transform .2s ease; }
.teaser:hover .teaser-more .arrow { transform: translateX(4px); }
.teaser-dark { background: var(--dark); color: #fff; }
.teaser-dark p { color: #cfcbc2; }
.teaser-dark .teaser-kicker { border-color: rgba(255,255,255,.3); color: #e7e3da; }
.teaser-dark .teaser-more .arrow { color: var(--accent); }
.teaser-photo { color: #fff; }
.teaser-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 30%; z-index: -2; }
.teaser-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(42,39,37,.2) 0%, rgba(42,39,37,.6) 40%, rgba(42,39,37,.92) 100%); }
.teaser-photo p { color: #e7e3da; }
.teaser-photo .teaser-kicker { border-color: rgba(255,255,255,.45); color: #fff; }
.teaser-photo .teaser-more .arrow { color: var(--accent); }
@media (max-width: 980px) { .teaser-grid { grid-template-columns: 1fr; gap: 10px; } .teaser { min-height: 0; padding: 24px 22px; border-radius: var(--radius-sm); } .teaser-photo { min-height: 300px; } .teaser h3 { font-size: 1.4rem; } }

.cta-box a.or { color: #cfcbc2; text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); }
.cta-box a.or:hover { color: #fff; }

/* Sprachumschalter DE / EN */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); text-decoration: none; font-size: .8rem; font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.lang-switch span { padding: 9px 11px; border-radius: 999px; line-height: 1; transition: none; }
.lang-switch span.is-current { background: var(--dark); color: #fff; }
.lang-switch:hover { text-decoration: none; }
.lang-switch:hover span:not(.is-current) { color: var(--ink); background: rgba(255,255,255,.7); }
@media (max-width: 980px) { .lang-switch span { padding: 10px 10px; } }
.nav .nav-lang { display: none; }
@media (max-width: 980px) {
  .nav-cta .lang-switch { display: none; }
  .nav .nav-lang { display: inline-flex; align-self: flex-start; margin: 8px 12px 6px; padding: 4px; background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; font-size: .9rem; }
  .nav .nav-lang span { padding: 10px 16px; }
}
/* Plus/Kreuz erst animieren, wenn der Startzustand gesetzt ist */
.ready .md > summary::after { transition: transform .3s ease; }
.ready .faq-item summary::after { transition: transform .3s ease; }
/* Zwischengrösse (kleine Laptops): Kopfzeilen-Button ausblenden, damit Name und Navigation Platz haben */
@media (max-width: 1180px) and (min-width: 981px) { .nav-cta .btn { display: none; } }

/* Kopfzeilen-Marke wie Referenz: Craniosophie-Zeichen, Wortmarke, Name klein darunter */
.brand { gap: 12px; padding: 6px 16px 6px 6px; background: transparent; }
.site-header .brand, .site-header.scrolled .brand { backdrop-filter: none; -webkit-backdrop-filter: none; background: transparent; }
.site-header.scrolled .brand { background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.site-header .brand-mark { position: relative; width: 46px; height: 46px; border-radius: 50%; background: none; overflow: hidden; flex: none; }
.site-header .brand-mark img { position: absolute; top: 0; left: 0; height: 46px; width: auto; max-width: none; clip-path: none; filter: none; }
.site-header .brand-text { gap: 3px; }
.site-header .brand-text strong { font-family: "Cormorant Garamond", "Iowan Old Style", Georgia, serif; font-size: 1.75rem; font-weight: 500; letter-spacing: .005em; line-height: .95; color: var(--ink); white-space: nowrap; }
.site-header .brand-text small { display: block; font-size: .6rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
@media (max-width: 980px) {
  .site-header .brand { padding: 5px 12px 5px 5px; gap: 10px; }
  .site-header .brand-mark { width: 40px; height: 40px; }
  .site-header .brand-mark img { height: 40px; }
  .site-header .brand-text strong { font-size: 1.5rem; }
  .site-header .brand-text small { font-size: .54rem; letter-spacing: .12em; }
}
/* Marke auf hellem Grund, damit das Craniosophie-Zeichen klar lesbar ist (wie Logo auf Weiss) */
.site-header .brand, .site-header.scrolled .brand { background: rgba(255,255,255,.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 6px 18px 6px 6px; }
.site-header .brand-mark { background: #fff; }
.site-header .brand-mark img { filter: brightness(.8) saturate(1.15); }
@media (max-width: 980px) { .site-header .brand, .site-header.scrolled .brand { padding: 5px 14px 5px 5px; } }

/* ------------------------------------------------------------------ */
/* Anmelden + Erstgespräch */
[hidden] { display: none !important; }
.btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); }
.btn-ghost:hover { background: rgba(255,255,255,.08); }
.cta-box .btn-ghost { width: 100%; }
.hero-actions .btn-secondary { background: rgba(255,255,255,.7); }
.hero-call-note { font-size: .86rem; color: var(--muted); margin-top: -10px; }
@media (max-width: 980px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .hero-call-note { margin-top: -4px; font-size: .8rem; }
  .mobile-cta { display: grid; grid-template-columns: 1.15fr 1fr; gap: 8px; }
  .mobile-cta .btn { padding-inline: 12px; font-size: .95rem; }
  .mobile-cta .btn-secondary { background: rgba(255,255,255,.92); box-shadow: 0 12px 30px rgba(42,39,37,.15); pointer-events: auto; }
}
@media (min-width: 981px) { .mobile-cta { display: none !important; } }

/* Nächste Praxistage */
.dates-strip { margin-top: 20px; display: grid; grid-template-columns: auto 1fr auto; gap: 18px 28px; align-items: center; padding: 22px 26px; border-radius: var(--radius); background: var(--surface); }
.dates-strip strong { display: block; font-weight: 600; letter-spacing: -.015em; }
.dates-strip span { font-size: .88rem; color: var(--muted); }
.date-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.date-chips li { padding: 8px 14px; border-radius: 999px; background: var(--bg); font-size: .88rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); }
@media (max-width: 1080px) { .dates-strip { grid-template-columns: 1fr; } .dates-strip .btn { justify-self: start; } }
@media (max-width: 980px) { .dates-strip { padding: 20px; border-radius: var(--radius-sm); } .dates-strip .btn { justify-self: stretch; } }

/* Anmeldeseite */
.register-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.register-form { display: grid; gap: 14px; min-width: 0; }
.reg-step { margin: 0; padding: 28px; border: 0; border-radius: var(--radius); background: var(--surface); display: grid; gap: 16px; min-width: 0; }
.reg-step legend { float: left; width: 100%; display: flex; align-items: center; gap: 12px; padding: 0; margin-bottom: 4px; font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; }
.reg-step legend + * { clear: both; }
.step-num { width: 30px; height: 30px; border-radius: 50%; background: var(--dark); color: #fff; display: grid; place-items: center; font-size: .85rem; font-weight: 600; flex: none; }
.option-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; border-radius: 18px; }
.option-card, .date-option { position: relative; cursor: pointer; }
.option-card input, .date-option input { position: absolute; opacity: 0; pointer-events: none; }
.option-body { display: grid; gap: 6px; height: 100%; padding: 18px; border-radius: 18px; background: var(--bg); border: 1.5px solid transparent; transition: none; }
.option-title { font-weight: 600; font-size: .95rem; letter-spacing: -.01em; line-height: 1.3; }
.option-price { font-size: 1.7rem; font-weight: 600; letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.option-price small { font-size: .85rem; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.option-note { font-size: .82rem; color: var(--muted); }
.option-card:hover .option-body, .date-option:hover span { border-color: var(--line); }
.option-card.is-selected .option-body, .option-card input:checked + .option-body { background: #fff; border-color: var(--dark); box-shadow: 0 8px 24px rgba(42,39,37,.08); }
.option-card input:focus-visible + .option-body, .date-option input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.reg-hint { font-size: .86rem; color: var(--muted); }
.date-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border-radius: 18px; }
.date-option span { display: grid; gap: 2px; padding: 14px 16px; border-radius: 16px; background: var(--bg); border: 1.5px solid transparent; transition: none; }
.date-option b { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.date-option small { font-size: .8rem; color: var(--muted); }
.date-option input:checked + span { background: var(--dark); color: #fff; border-color: var(--dark); }
.date-option input:checked + span small { color: #cfcbc2; }
.reg-step .field input, .reg-step .field select, .reg-step .field textarea { background: var(--bg); }
.form-row-zip { grid-template-columns: 140px minmax(0, 1fr); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: .9rem; color: var(--ink-soft); cursor: pointer; padding: 4px; border-radius: 12px; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--dark); }
.is-invalid, .field input.is-invalid, .field select.is-invalid { border-color: #b4483c !important; box-shadow: 0 0 0 3px rgba(180,72,60,.12); }
.option-grid.is-invalid, .date-grid.is-invalid, .check.is-invalid { box-shadow: 0 0 0 2px rgba(180,72,60,.45); }
.form-status.is-error { background: #fbeeec; color: #8a2f25; }
.reg-submit { display: grid; gap: 10px; justify-items: start; padding: 8px 4px 0; }
.reg-submit .fine { font-size: .82rem; color: var(--muted); }
.register-summary { position: sticky; top: 100px; display: grid; gap: 18px; padding: 26px; border-radius: var(--radius); background: var(--dark); color: #fff; }
.register-summary h3 { font-size: 1.15rem; }
.register-summary dl { margin: 0; display: grid; gap: 12px; }
.register-summary dl div { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.12); }
.register-summary dt { font-size: .78rem; color: #cfcbc2; }
.register-summary dd { margin: 0; font-weight: 500; }
.register-summary .sum-total dd { font-size: 1.5rem; font-weight: 600; letter-spacing: -.03em; color: var(--accent); }
.trust-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: .86rem; color: #e7e3da; }
.trust-list li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; }
.trust-list li::before { content: "✓"; color: var(--accent); }
.summary-call { display: grid; gap: 10px; padding-top: 4px; }
.summary-call span { font-size: .86rem; color: #cfcbc2; }
.summary-call .btn-secondary { background: #fff; }
.register-success { grid-column: 1; display: grid; justify-items: start; gap: 14px; padding: 40px 32px; border-radius: var(--radius); background: var(--surface); }
.register-success h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.register-success p { color: var(--ink-soft); max-width: 52ch; }
.success-ico { width: 56px; height: 56px; border-radius: 50%; background: var(--dark); color: var(--accent); display: grid; place-items: center; }
.success-ico svg { width: 26px; height: 26px; }
@media (max-width: 1080px) { .option-grid { grid-template-columns: 1fr; } }
@media (max-width: 980px) {
  .register-grid { grid-template-columns: 1fr; }
  .register-summary { display: none; }
  .reg-step { padding: 22px 18px; border-radius: var(--radius-sm); }
  .date-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reg-submit, .reg-submit .btn { justify-items: stretch; width: 100%; }
  .register-success { padding: 28px 22px; }
}
/* Handy: lange Button-Texte dürfen umbrechen, nichts verbreitert die Seite */
@media (max-width: 980px) { .btn { white-space: normal; text-align: center; line-height: 1.2; } .cta-band .wrap, .register-grid, .contact { grid-template-columns: minmax(0, 1fr); } }

/* Anmelden + Erstgespräch oben auf der Curriculum-Seite */
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.page-actions .btn-secondary { background: #fff; box-shadow: inset 0 0 0 1px var(--line, rgba(0,0,0,.12)); }
@media (max-width: 980px) {
  .page-actions { flex-direction: column; align-items: stretch; margin-top: 4px; }
  .page-actions .btn { width: 100%; }
}

/* Startseite: «Dentosophie-Ausbildung» als Hauptbegriff, Claim leiser darunter */
.hero h1 .hero-title {
  display: block; font-weight: 700; letter-spacing: -.04em;
  background: linear-gradient(100deg, var(--dark-deep) 0%, var(--dark) 45%, var(--accent-ink) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  white-space: nowrap; font-size: min(1em, 59px, calc((100vw - 2 * var(--gutter)) / 11.8));
  padding-bottom: .06em;
}
.hero h1 .hero-claim { display: block; margin-top: .12em; font-size: .62em; font-weight: 400; letter-spacing: -.025em; line-height: 1.15; color: var(--ink-soft); }
@media (max-width: 980px) {
  .hero h1 .hero-claim { font-size: .6em; }
}

/* Anmelden + Erstgespräch als Paar: beide Wege sichtbar, Erstgespräch bewusst zurückhaltender */
.cta-pair { display: grid; gap: 8px; }
.btn-outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn-outline:hover { background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(58,55,53,.3); }
.price .cta-pair { margin-top: 6px; }
.price .cta-pair .btn { margin-top: 0; }
.certificate .cta-pair .btn-ghost, .price.featured .cta-pair .btn-ghost { width: 100%; }
@media (max-width: 1080px) { .dates-strip .cta-pair { justify-self: start; } }
@media (max-width: 980px) {
  .certificate .cta-pair { grid-column: 1 / -1; justify-self: stretch; }
  .certificate .cta-pair .btn { justify-self: stretch; }
  .dates-strip .cta-pair { justify-self: stretch; }
}

/* =====================================================================
   Feinschliff nach Taste-Skill (Look bleibt):
   5 Textgrössen statt ~50, Fliesstext in voller Tinte und mind. 17px,
   Grau nur für Nebeninfos (etwas dunkler), keine Schatten auf ruhenden Elementen.
   ===================================================================== */
:root {
  --muted: #6b635b;
  --fs-xs: .8125rem;   /* 13px: Labels, Kleingedrucktes */
  --fs-sm: .9375rem;   /* 15px: Nebeninfos, Navigation, Formular-Labels */
  --fs-base: 1.0625rem;/* 17px: Fliesstext */
  --fs-md: 1.3125rem;  /* 21px: Lead, Zwischentitel */
  --fs-lg: 1.75rem;    /* 28px: grosse Zwischentitel */
}
@media (max-width: 980px) { :root { --fs-md: 1.1875rem; --fs-lg: 1.5rem; } }

/* Fliesstext: volle Tinte, mind. 17px */
.lead { font-size: var(--fs-md); color: var(--ink); }
.hero-desc { font-size: var(--fs-md); color: var(--ink); }
.card p, .card ul, .price ul, .check-list li, .phase p, .about-copy > p:not(.name):not(.role),
.faq-body, .legal p, .legal li, .teaser p, .register-success p { font-size: var(--fs-base); color: var(--ink); }
.check { color: var(--ink); }
@media (max-width: 980px) {
  .lead, .hero-desc { font-size: var(--fs-base); }
  .card p, .card ul { font-size: var(--fs-base); }
}

/* Zwischentitel 21px */
h3, .trust-item strong, .callout .values strong, .md > summary, .certificate strong, .about-copy .name,
.reg-step legend, .legal h2, .register-summary h3 { font-size: var(--fs-md); }

/* Grosse Zwischentitel 28px */
.audience .who, .included-head h3, .cta-box .big, .form h3, .form .form-title, .site-footer .claim, .teaser h3,
.option-price, .register-summary .sum-total dd { font-size: var(--fs-lg); }

/* 17px: Buttons, Aufzählungen, Fragen */
.btn-lg, .companion .item strong, .faq-item summary, .price .who { font-size: var(--fs-base); }
@media (max-width: 980px) { .md > summary { font-size: var(--fs-base); } }

/* 15px: Nebeninfos */
.eyebrow, .btn-small, .nav a, .trust-item span, .silo-list span, .included-list span, .callout .values span,
.companion .item span, .certificate span, .about-facts span, .about-copy .role, .cta-steps li, .cta-box .or,
.contact-info .row > div span, .contact-info .row > div a, .socials a, .form .intro, .field label,
.site-footer, .site-footer .footer-title, .site-footer .small, .hero-call-note, .dates-strip span, .date-chips li,
.option-title, .option-price small, .option-note, .reg-hint, .check, .trust-list, .summary-call span,
.price-note, .price .amount small, .hero-badge strong, .mobile-cta .btn, .nav .nav-lang { font-size: var(--fs-sm); }
@media (max-width: 1180px) { .nav a { font-size: var(--fs-sm); } }
@media (max-width: 980px) { .nav a { font-size: var(--fs-base); } .hero-call-note { font-size: var(--fs-sm); } .hero-badge strong { font-size: var(--fs-sm); } }

/* 13px: Labels, Kleingedrucktes */
.hero-badge-label, .hero-badge-role, .audience .num, .price.featured::before, .callout .label, .phase .months,
.phase .topics span, .cta-steps li b, .form .fine, .footer-bottom, .teaser-kicker, .lang-switch, .step-num,
.date-option small, .reg-submit .fine, .register-summary dt { font-size: var(--fs-xs); }

/* Keine Schatten auf ruhenden Elementen (das Namens-Badge bleibt, nur ohne Schatten) */
.hero-badge { box-shadow: none; background: rgba(255,255,255,.86); }
.btn:not(.btn-small) { font-size: var(--fs-base); }
.btn .arrow { font-size: 1em; }
.pill { font-size: var(--fs-sm); }
/* Über mich: Überschrift in der halben Spalte auf H2-Grösse, damit sie zweizeilig bleibt */
@media (min-width: 981px) { .about-copy h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); } }
.mobile-cta .btn { font-size: var(--fs-sm); }
/* Rechtliche Seiten: lange Wörter (Datenschutzerklärung) trennen statt die Seite zu verbreitern */
.legal { grid-template-columns: minmax(0, 1fr); }
.legal h1 { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
/* Curriculum-Phasen auf kleinen Laptops: Titel bleiben zweizeilig */
@media (min-width: 981px) and (max-width: 1180px) { .phase h3 { font-size: var(--fs-base); } }
/* Kacheln auf dunklem Grund / Foto: heller Text (sonst greift die dunkle Fliesstext-Farbe) */
.teaser.teaser-dark p, .teaser.teaser-photo p { color: #ebe7df; }
.teaser.teaser-dark .teaser-more .arrow, .teaser.teaser-photo .teaser-more .arrow { color: #d6d2c8; }

/* =====================================================================
   Web Interface Guidelines (Vercel): Barrierefreiheit, Fokus, Touch, Safe Areas
   ===================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: 12px; z-index: 100; padding: 12px 20px; border-radius: 999px; background: var(--dark); color: #fff; font-weight: 500; text-decoration: none; transform: translateY(-160%); transition: transform .2s ease; }
.skip-link:focus-visible { transform: none; outline-offset: 3px; }
.footer-title { margin: 0 0 14px; }

/* Sichtbarer Fokusring auch in Formularfeldern */
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Fixierter Header und Handy-Leiste verdecken das fokussierte Element nicht */
html { scroll-padding-top: 104px; -webkit-tap-highlight-color: rgba(42, 39, 37, .08); }
@media (max-width: 980px) { html { scroll-padding-top: 88px; scroll-padding-bottom: 96px; } }
a, button, input, select, textarea, label, summary { touch-action: manipulation; }

/* Header beim Scrollen: verschieben statt Abstand animieren */
.site-header.scrolled { padding-top: calc(18px + env(safe-area-inset-top, 0px)); transform: translateY(-8px); }
@media (max-width: 980px) {
  .site-header.scrolled { padding-top: calc(12px + env(safe-area-inset-top, 0px)); transform: translateY(-2px); }
  .nav { overscroll-behavior: contain; }
}

/* Seitliche Safe Areas (Notch im Querformat) */
.wrap { padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); }
.site-header { padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.mobile-cta { padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }

/* Zahlen in Vergleichen gleich breit; Absätze ohne einzelnes Wort in der letzten Zeile */
.option-price, .register-summary dd, .date-option b, .date-chips li { font-variant-numeric: tabular-nums; }
p { text-wrap: pretty; }

/* Senden-Knopf: Ladeanzeige während der Anfrage */
.btn.is-loading { pointer-events: none; opacity: .8; }
.btn.is-loading .arrow { display: none; }
.btn.is-loading::after { content: ""; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* =====================================================================
   Vorteile: Amortisation und wissenschaftlicher Mehrwert zuerst
   ===================================================================== */
.roi { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }
.roi p + p { margin-top: 0; }
.roi-main { background: var(--dark); color: #fff; border-radius: var(--radius); padding: 34px; display: grid; gap: 12px; align-content: start; }
.roi-label { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }
.roi-main .roi-label { color: #cfcbc2; }
.roi-figure { display: flex; align-items: baseline; gap: 14px; margin: 4px 0 0; }
.roi-figure strong { font-size: clamp(4.5rem, 8vw, 7rem); line-height: .85; font-weight: 700; letter-spacing: -.05em; color: var(--accent); font-variant-numeric: tabular-nums; }
.roi-figure span { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.03em; }
.roi-text { font-size: var(--fs-md); font-weight: 600; letter-spacing: -.02em; line-height: 1.3; color: #fff; max-width: 28ch; }
.roi-note { font-size: var(--fs-sm); color: #cfcbc2; }
.roi-item { background: var(--surface); border-radius: var(--radius); padding: 30px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.roi-values { display: grid; gap: 16px; font-variant-numeric: tabular-nums; }
.roi-values strong { display: block; font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.roi-values span { font-size: var(--fs-sm); color: var(--muted); }
.roi-big { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.roi-item p { font-size: var(--fs-base); color: var(--ink); }
.benefit-intro { font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 1080px) {
  .roi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .roi-main { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .roi { gap: 10px; margin-bottom: 10px; }
  .roi-main, .roi-item { padding: 22px; border-radius: var(--radius-sm); }
}
@media (max-width: 640px) { .roi { grid-template-columns: minmax(0, 1fr); } }

/* Praxistage mit Foto der Vorbereitung: Desktop Bild links, Handy flaches Querformat oben */
.dates-strip.has-photo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; padding: 0; overflow: hidden; align-items: stretch; }
.dates-photo { margin: 0; min-height: 320px; }
.dates-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 40%; }
.dates-body { padding: 30px 34px; display: grid; gap: 18px; align-content: center; min-width: 0; }
.dates-body .cta-pair { justify-self: start; }
@media (max-width: 980px) {
  .dates-strip.has-photo { grid-template-columns: minmax(0, 1fr); }
  .dates-photo { min-height: 0; }
  .dates-photo img { height: auto; aspect-ratio: 16 / 9; max-height: 260px; object-position: 50% 16%; }
  .dates-body { padding: 20px; gap: 16px; }
  .dates-body .cta-pair { justify-self: stretch; }
}

/* Kontaktseite: Erstgespräch direkt buchen (Calendly lädt erst nach Klick) */
.booking { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px clamp(24px, 4vw, 56px); align-items: center; padding: 30px 34px; background: var(--surface); border-radius: var(--radius); margin-bottom: clamp(32px, 5vw, 56px); overflow: hidden; }
.booking-title { font-size: var(--fs-lg); letter-spacing: -.03em; line-height: 1.15; margin: 0 0 8px; }
.booking-head p { color: var(--ink); max-width: 52ch; }
.booking-frame { display: grid; gap: 10px; justify-items: start; }
.booking-note { font-size: var(--fs-xs); color: var(--muted); max-width: 32ch; }
.booking-frame.is-loaded { display: block; grid-column: 1 / -1; height: 700px; margin: 0 -34px -30px; }
@media (max-width: 980px) {
  .booking { grid-template-columns: minmax(0, 1fr); padding: 22px; border-radius: var(--radius-sm); }
  .booking-frame { justify-items: stretch; }
  .booking-frame .btn { width: 100%; }
  .booking-frame.is-loaded { height: 760px; margin: 0 -22px -22px; }
}

/* =====================================================================
   Werdegang (Über mich): Stationen, Bücher, Medien
   ===================================================================== */
.cred-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cred { background: var(--surface); border-radius: var(--radius); padding: 28px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.cred-k, .term-k { font-size: var(--fs-sm); font-weight: 500; color: var(--accent-ink); }
.cred h3 { font-size: var(--fs-md); letter-spacing: -.02em; line-height: 1.2; }
.cred p { font-size: var(--fs-sm); color: var(--muted); }
.books { margin-top: clamp(36px, 5vw, 64px); display: grid; gap: 20px; }
.books-head { display: grid; gap: 6px; max-width: 54rem; }
.books-head h3 { font-size: var(--fs-lg); letter-spacing: -.03em; line-height: 1.15; }
.books-head p { color: var(--ink); }
.books-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.book { display: grid; gap: 14px; align-content: start; padding: 16px 16px 20px; background: var(--surface); border-radius: var(--radius); color: var(--ink); text-decoration: none; min-width: 0; transition: transform .25s ease; }
.book:hover { transform: translateY(-4px); text-decoration: none; }
.book-cover { display: block; aspect-ratio: 4 / 5; border-radius: var(--radius-sm); background: #fff; overflow: hidden; }
.book-cover img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.book-text { display: grid; gap: 2px; padding-inline: 4px; }
.book-text strong { font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.book-text small { font-size: var(--fs-sm); color: var(--muted); }
.media-row { list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.media-row a { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 14px 18px 14px 14px; background: var(--surface); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; min-width: 0; transition: transform .2s ease; }
.media-row a:hover { transform: translateY(-2px); text-decoration: none; }
.media-row .ico { width: 44px; height: 44px; border-radius: 50%; background: var(--dark); color: #fff; display: grid; place-items: center; flex: none; }
.media-row .ico svg { width: 20px; height: 20px; }
.media-row strong { display: block; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.media-row small { display: block; font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 1080px) { .cred-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) {
  .cred-grid, .books-grid, .media-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cred { padding: 20px; border-radius: var(--radius-sm); }
  .book { grid-template-columns: 96px minmax(0, 1fr); align-items: center; padding: 12px 16px 12px 12px; border-radius: var(--radius-sm); }
  .book-cover img { padding: 6px; }
}

/* =====================================================================
   Begriffe (Startseite): Dentosophie, Craniosophie, Craniosomatik
   ===================================================================== */
.terms { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.term { background: var(--surface); border-radius: var(--radius); padding: 30px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.term h3 { font-size: var(--fs-lg); letter-spacing: -.03em; line-height: 1.1; }
.term p { color: var(--ink); }
.term.is-core { background: var(--dark); color: #fff; }
.term.is-core p { color: #ebe7df; }
.term.is-core .term-k { color: var(--accent); }
@media (max-width: 980px) {
  .terms { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .term { padding: 22px; border-radius: var(--radius-sm); }
}

/* Begriffe: freigestellter Modulator, ruhig schwebend auf heller Scheibe mit atmendem Bodenschatten */
.begriffe-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: clamp(24px, 5vw, 80px); align-items: center; margin-bottom: clamp(36px, 5vw, 64px); }
.begriffe-head .section-head { margin-bottom: 0; }
.modulator { margin: 0; display: grid; grid-template-areas: "stage" "cap"; justify-items: center; gap: 16px; }
.modulator-disc { grid-area: stage; align-self: center; width: 92%; aspect-ratio: 1; border-radius: 50%; background: var(--surface); }
.modulator-shadow { grid-area: stage; align-self: end; width: 40%; height: 14px; margin-bottom: 19%; border-radius: 50%; background: rgba(42, 39, 37, .16); filter: blur(6px); animation: modulator-shadow 6s ease-in-out infinite; }
.modulator img { grid-area: stage; align-self: center; position: relative; width: 64%; height: auto; margin-bottom: 8%; animation: modulator-float 6s ease-in-out infinite; }
.modulator figcaption { grid-area: cap; font-size: var(--fs-sm); font-weight: 600; letter-spacing: -.01em; color: var(--ink); text-align: center; }
@keyframes modulator-float { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-12px) rotate(-4deg); } }
@keyframes modulator-shadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.82); opacity: .6; } }
@media (min-width: 981px) and (max-width: 1200px) { .begriffe-head { grid-template-columns: minmax(0, 1fr) minmax(0, 290px); } }
@media (max-width: 980px) {
  .begriffe-head { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-bottom: 28px; }
  .modulator { width: min(230px, 66%); justify-self: center; gap: 10px; }
}
/* CTA-Kasten: Spalten dürfen schrumpfen, Button-Text bricht um statt die Seite zu verbreitern (981–1000px) */
.cta-band .wrap > * { min-width: 0; }
.cta-box .btn { white-space: normal; text-align: center; }

/* Logo oben links: komplettes Craniosophie-Logo auf Anthrazit, wie auf der alten Website */
.site-header .brand.brand-logo, .site-header.scrolled .brand.brand-logo { background: var(--dark); backdrop-filter: none; -webkit-backdrop-filter: none; padding: 6px 22px 6px 10px; gap: 0; }
.site-header .brand.brand-logo img { display: block; height: 50px; width: auto; max-width: none; }
.site-header .brand.brand-logo:hover { background: var(--dark-deep); }
@media (max-width: 980px) {
  .site-header .brand.brand-logo, .site-header.scrolled .brand.brand-logo { padding: 5px 16px 5px 7px; }
  .site-header .brand.brand-logo img { height: 40px; }
}
@media (min-width: 981px) and (max-width: 1180px) {
  .site-header .brand.brand-logo, .site-header.scrolled .brand.brand-logo { padding: 5px 16px 5px 7px; }
  .site-header .brand.brand-logo img { height: 40px; }
}

/* Über mich: internationale Stationen (dunkel) und Zusatzqualifikationen (Chips) */
.intl { margin-top: 12px; background: var(--dark); color: #fff; border-radius: var(--radius); padding: clamp(24px, 3vw, 36px); display: grid; gap: 22px; }
.intl-head { display: grid; gap: 6px; }
.intl-head h3 { font-size: var(--fs-lg); letter-spacing: -.03em; line-height: 1.15; }
.intl-head p { color: #cfcbc2; }
.intl-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.intl-list li { display: grid; gap: 4px; align-content: start; padding: 18px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .06); min-width: 0; }
.intl-year { font-size: var(--fs-sm); font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.intl-list strong { font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.intl-list li > span:not(.intl-year) { font-size: var(--fs-sm); color: #cfcbc2; }
.quals { margin-top: 12px; background: var(--surface); border-radius: var(--radius); padding: clamp(24px, 3vw, 36px); display: grid; gap: 16px; }
.quals h3 { font-size: var(--fs-lg); letter-spacing: -.03em; line-height: 1.15; }
.qual-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.qual-list li { padding: 10px 16px; border-radius: 16px; background: var(--bg); font-size: var(--fs-sm); color: var(--ink); line-height: 1.35; }
@media (max-width: 1180px) { .intl-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 980px) {
  .intl, .quals { padding: 22px; border-radius: var(--radius-sm); margin-top: 10px; }
  .intl-list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .intl-list li { grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; padding: 14px 16px; }
  .intl-year { grid-row: span 2; padding-top: 1px; }
  .qual-list li { width: 100%; }
}

/* Starterpaket als Rad: Produkte im Ring um den Titel, öffnet sich zur 3D-Trommel */
.paket-stage { aspect-ratio: 1; border-radius: var(--radius); background: var(--surface); display: grid; place-items: center; overflow: hidden; }
.paket-stage img { width: 68%; height: 68%; object-fit: contain; filter: drop-shadow(0 18px 16px rgba(42, 39, 37, .18)); animation: paket-float 6s ease-in-out infinite; }
.is-flat .paket-stage img { width: 62%; height: 72%; filter: none; }
.wheel-card:nth-child(2) .paket-stage img { animation-delay: -1.2s; }
.wheel-card:nth-child(3) .paket-stage img { animation-delay: -2.4s; }
.wheel-card:nth-child(4) .paket-stage img { animation-delay: -3.6s; }
.wheel-card:nth-child(5) .paket-stage img { animation-delay: -4.8s; }
@keyframes paket-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(1deg); } }
.paket-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: transform .2s ease; }
.paket-btn:hover { transform: scale(1.06); }
.paket-btn:disabled { opacity: .35; cursor: default; transform: none; }
.paket-btn svg { width: 20px; height: 20px; }
.wheel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 580px) minmax(0, 1fr); grid-template-areas: "info scene index" "nav nav nav" "hint hint hint"; align-items: center; gap: 8px clamp(16px, 3vw, 40px); outline: none; border-radius: var(--radius); }
.wheel:focus-visible { outline: 2px solid var(--ink); outline-offset: 8px; }
.wheel-scene { grid-area: scene; position: relative; height: 560px; perspective: 1400px; perspective-origin: 50% 50%; overflow: clip; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.wheel.is-dragging .wheel-scene { cursor: grabbing; }
.wheel-ring { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.wheel-card { position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .9s cubic-bezier(.2, .7, .2, 1); will-change: transform; cursor: pointer; }
.wheel-card .paket-stage { width: 100%; height: 100%; transition: box-shadow .4s ease; }
.wheel.is-open .wheel-card.is-active .paket-stage { box-shadow: 0 24px 60px rgba(42, 39, 37, .14); }
.wheel-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 210px; display: grid; justify-items: center; gap: 4px; text-align: center; transition: opacity .5s ease; }
.wheel-center-k { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.wheel-center-n { font-size: var(--fs-sm); color: var(--muted); line-height: 1.35; }
.wheel.is-open .wheel-center { opacity: 0; pointer-events: none; }
.wheel-info { grid-area: info; display: grid; gap: 8px; align-content: center; opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
.wheel.is-open .wheel-info { opacity: 1; transform: none; }
.wheel-title { font-size: var(--fs-lg); letter-spacing: -.03em; line-height: 1.15; }
.wheel-desc { color: var(--ink); }
.wheel-index { grid-area: index; list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; justify-items: end; text-align: right; }
.wheel-index button { border: 0; background: none; padding: 5px 0; font: inherit; font-size: var(--fs-sm); color: var(--muted); cursor: pointer; transition: color .2s ease; text-align: right; }
.wheel-index button:hover, .wheel-index button[aria-pressed="true"] { color: var(--ink); }
.wheel-index button[aria-pressed="true"] { font-weight: 600; }
.wheel-nav { grid-area: nav; display: flex; align-items: center; justify-content: center; gap: 14px; }
.wheel-count { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; min-width: 5ch; text-align: center; }
.wheel-count b { color: var(--ink); font-weight: 600; }
.wheel-hint { grid-area: hint; margin: 0; text-align: center; font-size: var(--fs-xs); color: var(--muted); transition: opacity .4s ease; }
.wheel.is-touched .wheel-hint { opacity: 0; }
.hint-mobile { display: none; }
html:not(.js) .wheel-scene { height: auto; }
html:not(.js) .wheel-ring { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
html:not(.js) .wheel-card { position: static; width: auto; height: auto; margin: 0; }
html:not(.js) .wheel-center, html:not(.js) .wheel-nav { display: none; }
@media (max-width: 1180px) { .wheel { grid-template-columns: minmax(0, 1fr) minmax(0, 480px) minmax(0, 1fr); } .wheel-scene { height: 500px; } .wheel-card { width: 170px; height: 170px; margin: -85px 0 0 -85px; } }
@media (max-width: 980px) {
  .wheel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "scene" "info" "nav" "hint"; gap: 12px; }
  .hint-desktop { display: none; }
  .hint-mobile { display: inline; }
  .wheel-scene { height: 400px; perspective: 900px; }
  .wheel-card { width: 150px; height: 150px; margin: -75px 0 0 -75px; }
  .wheel-card .paket-stage { border-radius: var(--radius-sm); }
  .wheel-center { width: 150px; }
  .wheel-center-k { font-size: var(--fs-md); }
  .wheel-center-n { display: none; }
  .wheel-index { display: none; }
  .wheel-info { min-height: 84px; text-align: center; justify-items: center; }
  .wheel-info p { max-width: 36ch; }
}
@media (prefers-reduced-motion: reduce) { .wheel-ring, .wheel-card { transition-duration: .01s; } }

/* Lange Wörter (z. B. «Bewegungseinschränkungen») dürfen auf schmalen Handys trennen statt überzustehen */
.silo-list li { grid-template-columns: 44px minmax(0, 1fr); }
.silo-list li > div { min-width: 0; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }

/* ===== Umbau Oktober 2026 ===== */

/* Abstandssystem: vier Stufen, überall gleich.
   section = zwischen Abschnitten, head = Abschnittskopf -> Inhalt, block = Karten im Raster, group = Blöcke im Abschnitt */
:root { --sp-section: clamp(64px, 8.5vw, 120px); --sp-head: clamp(28px, 4vw, 52px); --sp-block: 12px; --sp-group: clamp(20px, 2.6vw, 32px); }
@media (max-width: 980px) { :root { --sp-section: 56px; --sp-head: 22px; --sp-block: 10px; --sp-group: 18px; } }
.section { padding-block: var(--sp-section); }
.section.page-top { padding-top: clamp(140px, 16vw, 200px); }
.section-head, .page-top .section-head { margin-bottom: var(--sp-head); }
.silo .section-head { margin-bottom: var(--sp-group); }
.faq-wrap .section-head, .begriffe-head .section-head, .price-mini-wrap .section-head { margin-bottom: 0; }
.grid-3, .grid-2, .pricing, .phases, .benefit-wrap, .teaser-grid, .cred-grid, .companion, .faq, .silo-list, .roi, .books-grid, .media-row, .about-facts, .trust .wrap, .case-steps, .peek-grid, .gallery, .voices, .steps, .price-mini { gap: var(--sp-block); }
.included, .roi { margin-bottom: var(--sp-group); }
.companion, .certificate, .intl, .quals, .dates-strip, .price-note, .books, .media-row { margin-top: var(--sp-group); }
.trust { padding-block: 0; }
@media (max-width: 980px) {
  .section { padding-block: var(--sp-section); }
  .section.page-top { padding-top: 112px; }
  .section-head { margin-bottom: var(--sp-head); }
  .intl, .quals { margin-top: var(--sp-group); }
  .roi { margin-bottom: var(--sp-group); }
  .begriffe-head { margin-bottom: var(--sp-head); }
}

/* Platzhalter für Fotos und Videos: werden später durch echte Medien ersetzt */
.ph { position: relative; display: grid; place-items: center; align-content: center; gap: 8px; aspect-ratio: var(--ph-ar, 16 / 9); width: 100%; min-width: 0; padding: 20px; border-radius: var(--radius); border: 1.5px dashed rgba(58, 55, 53, .32); background: repeating-linear-gradient(135deg, rgba(58, 55, 53, .045) 0 12px, transparent 12px 24px), #e3dfd6; color: var(--ink-soft); text-align: center; overflow: hidden; }
.ph-ico { width: 48px; height: 48px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--ink); }
.ph-ico svg { width: 22px; height: 22px; }
.ph-video .ph-ico { width: 60px; height: 60px; background: var(--dark); color: #fff; }
.ph-video .ph-ico svg { width: 24px; height: 24px; margin-left: 3px; }
.ph-kind { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
.ph-text { font-size: var(--fs-sm); max-width: 32ch; line-height: 1.4; color: var(--ink-soft); text-wrap: balance; }
.ph-sm { --ph-ar: 3 / 2; border-radius: var(--radius-sm); padding: 14px; gap: 6px; }
.ph-sm .ph-ico { width: 38px; height: 38px; }
.ph-sm .ph-ico svg { width: 18px; height: 18px; }
.ph-sm .ph-kind { font-size: .7rem; }
.ph-sm .ph-text { font-size: var(--fs-xs); }
.ph-portrait { --ph-ar: 4 / 5; }
.ph-square { --ph-ar: 1; }
.ph-wide { --ph-ar: 21 / 9; margin-top: var(--sp-group); }
.ph-dark { border-color: rgba(255, 255, 255, .35); background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 12px, transparent 12px 24px), rgba(255, 255, 255, .06); color: #e7e3da; }
.ph-dark .ph-text { color: #cfcbc2; }
.ph-dark .ph-kind { color: var(--accent); }
.ph-dark .ph-ico, .ph-dark.ph-video .ph-ico { background: #fff; color: var(--ink); }
.ph-avatar { width: 56px; aspect-ratio: 1; border-radius: 50%; padding: 0; gap: 0; }
.ph-avatar .ph-kind, .ph-avatar .ph-text { display: none; }
.ph-avatar .ph-ico { width: 100%; height: 100%; background: transparent; }
.card > .ph, .contact-info > .ph { margin-bottom: 4px; }
@media (max-width: 980px) {
  .ph { border-radius: var(--radius-sm); }
  .ph-ico { width: 42px; height: 42px; }
  .ph-wide { --ph-ar: 16 / 10; }
  #ausbildung .card { grid-template-columns: 1fr; }
  .card .ph-sm, .contact-info .ph-sm { --ph-ar: 2 / 1; }
}

/* Video-Band: dunkler Abschnitt mit Erklärvideo */
.video-band { background: var(--dark); color: #fff; }
.video-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.video-copy { display: grid; gap: 20px; }
.video-band .eyebrow { border-color: rgba(255, 255, 255, .35); color: #e7e3da; }
.video-band .lt { color: var(--accent); }
.video-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.video-points li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: center; color: #e7e3da; }
.video-points b { width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: var(--accent); display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 600; }
.video-band .btn-primary { background: #fff; color: var(--ink); }
.video-band .btn-primary .arrow { color: var(--accent-ink); }
@media (max-width: 980px) { .video-grid { grid-template-columns: 1fr; gap: 22px; } .video-copy { gap: 14px; } }

/* Dein Weg: fünf Schritte, auf dem Desktop nebeneinander, auf dem Handy als Zeitleiste */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.step { position: relative; display: grid; gap: 14px; align-content: start; padding: 26px 22px 24px; background: var(--surface); border-radius: var(--radius); min-width: 0; }
.step-n { width: 40px; height: 40px; border-radius: 50%; background: var(--dark); color: var(--accent); display: grid; place-items: center; font-weight: 600; font-size: var(--fs-sm); }
.step-body { display: grid; gap: 8px; }
.step h3 { font-size: var(--fs-base); font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.step p { font-size: var(--fs-sm); color: var(--ink-soft); }
.step-link { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-top: 2px; font-weight: 500; font-size: var(--fs-sm); color: var(--ink); }
.step-link .arrow { color: var(--accent-ink); }
.step:not(:last-child)::after { content: ""; position: absolute; top: 46px; right: calc(-1 * var(--sp-block)); width: var(--sp-block); height: 1px; background: rgba(58, 55, 53, .3); }
@media (max-width: 1180px) and (min-width: 981px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .step:nth-child(3)::after { display: none; } }
@media (max-width: 980px) {
  .steps { grid-template-columns: 1fr; gap: 0; }
  .step { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; padding: 0 0 22px; background: none; border-radius: 0; }
  .step:last-child { padding-bottom: 0; }
  .step::after, .step:not(:last-child)::after { content: ""; position: absolute; left: 19.5px; top: 44px; bottom: 0; right: auto; width: 1px; height: auto; background: rgba(58, 55, 53, .25); }
  .step:last-child::after { display: none; }
  .step-body { padding-top: 9px; }
}

/* Stimmen: Platzhalter für Zitate, später echte Teilnehmende */
.voices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.voice { margin: 0; display: grid; gap: 16px; align-content: start; padding: 28px; background: var(--surface); border-radius: var(--radius); min-width: 0; }
.voice blockquote { margin: 0; font-size: var(--fs-base); line-height: 1.5; color: var(--ink-soft); font-style: italic; }
.voice figcaption { display: grid; gap: 2px; }
.voice figcaption strong { font-weight: 600; letter-spacing: -.015em; }
.voice figcaption span { font-size: var(--fs-sm); color: var(--muted); }

/* Startseite: Preise kurz */
.price-mini-wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.price-mini-wrap .cta-pair { margin-top: 6px; }
.price-mini { list-style: none; margin: 0; padding: 0; display: grid; }
.price-mini li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px 18px; align-items: center; padding: 20px 24px; background: var(--surface); border-radius: var(--radius-sm); }
.price-mini li:first-child { background: var(--dark); color: #fff; }
.pm-who { font-weight: 500; letter-spacing: -.01em; }
.pm-amount { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pm-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--bg); color: var(--ink); font-weight: 500; font-size: var(--fs-sm); text-decoration: none; white-space: nowrap; }
.pm-link:hover { text-decoration: none; background: #fff; }
.price-mini li:first-child .pm-link { background: #fff; }
.pm-link .arrow { color: var(--accent-ink); }
@media (max-width: 980px) {
  .price-mini-wrap { grid-template-columns: 1fr; gap: 22px; }
  .price-mini li { grid-template-columns: minmax(0, 1fr) auto; padding: 16px 18px; }
  .pm-link { grid-column: 1 / -1; justify-self: start; }
}

/* Fallbeispiel (Vorteile) */
.case-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.case-copy { display: grid; gap: 18px; }
.case-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 6px; }
@media (max-width: 980px) { .case-grid { grid-template-columns: 1fr; gap: 22px; } .case-copy { gap: 14px; } }

/* Einblick in die Module (Curriculum) und Galerie (Über mich) */
.peek-grid, .gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.peek, .gallery figure { margin: 0; display: grid; gap: 12px; align-content: start; min-width: 0; }
.peek figcaption, .gallery figcaption { display: grid; gap: 2px; padding-inline: 6px; }
.peek figcaption strong, .gallery figcaption strong { font-weight: 600; letter-spacing: -.015em; }
.peek figcaption span, .gallery figcaption span { font-size: var(--fs-sm); color: var(--muted); }

/* Handy: Reihen zum seitlichen Wischen statt langer Stapel */
@media (max-width: 980px) {
  .snap-row { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 320px); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); padding-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .snap-row::-webkit-scrollbar { display: none; }
  .snap-row > * { scroll-snap-align: start; }
  .voice { padding: 22px 20px; border-radius: var(--radius-sm); }
}

/* Unterschiede: nummeriert statt drei gleiche Textkarten */
.diff .grid-3 { counter-reset: diff; }
.diff .card { counter-increment: diff; }
.diff .card::before { content: counter(diff, decimal-leading-zero); font-family: "Cormorant Garamond", "Iowan Old Style", Georgia, serif; font-size: 2.8rem; line-height: 1; color: var(--accent-ink); }

/* Split-Blöcke mit schmaler Textspalte: Titel eine Stufe kleiner, damit er in zwei Zeilen bleibt */
@media (min-width: 981px) { .video-copy h2, .case-copy h2, .price-mini-wrap h2 { font-size: clamp(1.9rem, 2.9vw, 2.9rem); } }
@media (min-width: 981px) { .video-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.ph.ph-avatar { border-radius: 50%; }
/* Handy: Übersichtskacheln kompakt (Titel und Link reichen, Details stehen auf der Unterseite) */
@media (max-width: 980px) { .teaser p { display: none; } .teaser { gap: 8px; } .teaser-photo { min-height: 220px; } }
/* Handy: die drei kleinen Fall-Platzhalter ohne feste Proportion, damit die Beschriftung Platz hat */
@media (max-width: 980px) { .case-steps .ph { aspect-ratio: auto; min-height: 96px; padding: 10px 6px; gap: 4px; } .case-steps .ph-kind { display: none; } .case-steps .ph-text { font-size: .72rem; } }
/* Handy: Video-Vorschauen im Wischband etwas höher und mit kleinerem Abspielknopf */
@media (max-width: 980px) { .peek .ph { --ph-ar: 4 / 3; } .snap-row .ph-video .ph-ico { width: 46px; height: 46px; } .snap-row .ph-video .ph-ico svg { width: 20px; height: 20px; } }

/* ===== Feinschliff: hochwertige Akzente, ohne Schatten ===== */
:root { --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif; --hair: rgba(58, 55, 53, .12); --sheen: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .09), transparent 60%); }
::selection { background: var(--greige); color: var(--ink); }

/* Titel: der leichte Teil in Serife, der Kern fett in Inter (editorialer Kontrast) */
.lt { font-family: var(--serif); font-weight: 500; font-size: 1.14em; letter-spacing: 0; color: var(--light); }
.hero h1 .hero-claim { font-family: var(--serif); font-weight: 500; font-size: .62em; letter-spacing: 0; line-height: 1.1; color: var(--ink-soft); }

/* Kennzahlen, Preise und grosse Ziffern in Serife */
.trust-item strong { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; letter-spacing: 0; }
.price .amount, .pm-amount { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; }
.price .amount { font-size: 3.5rem; }
.pm-amount { font-size: 2rem; }
.roi-figure strong { font-family: var(--serif); font-weight: 500; letter-spacing: -.02em; }
.step-n, .video-points b, .cta-steps li b, .step-num { font-family: var(--serif); font-weight: 500; font-size: 1.15rem; }
.site-footer .claim { font-family: var(--serif); font-weight: 500; font-size: 1.85rem; letter-spacing: 0; }

/* Zitate mit typografischem Anführungszeichen */
blockquote { font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: 0; line-height: 1.25; position: relative; padding-left: 1em; }
blockquote::before { content: "„"; position: absolute; left: 0; top: -.08em; font-size: 2.2em; line-height: 1; color: var(--accent-ink); }
.voice blockquote { font-style: normal; font-size: 1.2rem; line-height: 1.4; padding-left: .9em; }
.voice blockquote::before { font-size: 2em; top: -.12em; }

/* Kleiner Akzentpunkt vor jedem Abschnittslabel */
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-ink); margin-right: 9px; flex: none; }
.video-band .eyebrow::before, .cta-band .eyebrow::before { background: var(--accent); }

/* Haarlinie zwischen den Abschnitten (ausgeblendet an den Rändern) */
.section + .section, .section + .cta-band, .trust + .section { position: relative; }
.section + .section::before, .section + .cta-band::before, .trust + .section::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(calc(100% - 2 * var(--gutter)), var(--max)); height: 1px; background: linear-gradient(90deg, transparent, var(--hair) 18%, var(--hair) 82%, transparent); pointer-events: none; }
.section + .video-band::before { display: none; }

/* Helle Karten mit feiner Innenkante statt Schatten */
.card, .price:not(.featured), .phase, .step, .voice, .faq-item, .trust-item, .cred, .book, .about-facts div, .silo-list li, .included, .benefit-block, .quals, .contact-info .row, .companion .item, .media-row a, .price-mini li:not(:first-child), .teaser:not(.teaser-dark):not(.teaser-photo), .option, .reg-step { box-shadow: inset 0 0 0 1px var(--hair); }
@media (max-width: 980px) { .step { box-shadow: none; } }

/* Dunkle Flächen mit sanftem Lichtschein und heller Oberkante */
.price.featured, .cta-box, .intl, .certificate, .teaser-dark, .roi-main, .price-mini li:first-child, .video-band, .site-footer { background-image: var(--sheen); background-repeat: no-repeat; }
.price.featured, .cta-box, .intl, .certificate, .teaser-dark, .roi-main, .price-mini li:first-child { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }

/* Hauptbutton mit feinem Verlauf und Lichtkante */
.btn-primary { background: linear-gradient(180deg, #46423f 0%, var(--dark) 55%, var(--dark-deep) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
.btn-primary:hover { background: linear-gradient(180deg, #3e3a37 0%, var(--dark-deep) 100%); }

/* Curriculum: Bild der Lernplattform (ersetzt den Platzhalter) */
.peek-wide { margin: var(--sp-group) 0 0; }
.peek-wide img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 40%; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--hair); }
@media (max-width: 980px) { .peek-wide img { aspect-ratio: 3 / 2; border-radius: var(--radius-sm); } }

/* Ausbildung: Mockup der Lernplattform in der ersten Bausteine-Karte */
.card-media { margin: 0 0 4px; }
.card-media img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 45%; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--hair); }
@media (max-width: 980px) { .card-media img { aspect-ratio: 2 / 1; } }

/* Erklärvideo: Vorschaubild, Vimeo lädt erst nach Klick (2026-10-17) */
.video-embed { display: grid; gap: 10px; min-width: 0; width: 100%; }
.video-poster { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; background: #1e1c1b; cursor: pointer; font: inherit; text-align: left; }
.video-poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.video-poster:hover img { transform: scale(1.02); }
.video-poster:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.video-play { position: absolute; left: 5%; top: 62%; display: inline-flex; align-items: center; gap: 12px; padding: 8px 20px 8px 8px; border-radius: 999px; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--ink); font-weight: 600; font-size: .95rem; letter-spacing: -.01em; box-shadow: 0 10px 28px rgba(0, 0, 0, .18); transition: transform .2s ease; }
.video-poster:hover .video-play { transform: translateY(-2px); }
.video-play-ico { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--dark); color: #fff; display: grid; place-items: center; }
.video-play-ico svg { width: 18px; height: 18px; margin-left: 2px; }
.video-play-text small { font-size: .85em; font-weight: 500; color: var(--muted); margin-left: 4px; }
.video-embed iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); display: block; background: #000; }
.video-note { margin: 0; font-size: .8rem; color: #cfcbc2; }
.video-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 600px) {
  .video-poster, .video-embed iframe { border-radius: var(--radius-sm); }
  .video-play { left: 4%; top: auto; bottom: 6%; gap: 8px; padding: 5px 14px 5px 5px; font-size: .85rem; }
  .video-play-ico { width: 34px; height: 34px; }
  .video-play-ico svg { width: 14px; height: 14px; }
}

/* Echte Fotos (Oktober 2026): Galerie auf «Über mich», Teaser-Foto und Bild «Warum diese Ausbildung» */
.gallery figure img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--hair); }
@media (max-width: 980px) { .gallery figure img { border-radius: var(--radius-sm); } }
.teaser-photo img { object-position: 50% 32%; }
.silo figure img { object-position: 45% 40%; }
/* Handy: das Foto bei «Warum diese Ausbildung» auch auf dem Handy zeigen, im Querformat unter der Liste */
@media (max-width: 980px) { .silo figure { display: block; margin-top: var(--sp-group); } .silo figure img { aspect-ratio: 4 / 3; object-position: 45% 48%; border-radius: var(--radius-sm); } }

/* Vorteile: Seitenkopf mit Foto (Astrid zeigt den Balancer), Querformat, damit der Balancer sichtbar bleibt */
.intro-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; margin-bottom: var(--sp-head); }
.intro-split .section-head { margin-bottom: 0; }
.intro-photo { margin: 0; }
.intro-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 30% 45%; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--hair); }
@media (max-width: 980px) { .intro-split { grid-template-columns: 1fr; gap: var(--sp-group); } .intro-photo img { border-radius: var(--radius-sm); } }
@media (min-width: 981px) { .intro-split h1 { font-size: clamp(2.3rem, 3.4vw, 3.3rem); } }

/* Craniosophie-Ausbildung: Dentosophie als Fundament im Hero, drei Ebenen mit Schlagworten */
.hero-kern { display: inline-flex; align-items: center; gap: 10px; width: fit-content; margin: -6px 0 0; padding: 8px 16px 8px 12px; border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--hair); font-size: var(--fs-sm); color: var(--ink-soft); }
.hero-kern strong { color: var(--ink); font-weight: 600; }
.hero-kern-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-ink); flex: none; }
.term-by { font-size: var(--fs-sm); font-weight: 500; color: var(--accent); margin-top: -4px; }
.term .topics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.term .topics span { font-size: .8rem; padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink-soft); background: var(--bg); }
.term.is-core .topics span { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: #ebe7df; }
.terms-foot { margin-top: var(--sp-group); display: grid; gap: 14px; justify-items: start; }
.terms-formula { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; padding: 10px 20px; border-radius: 999px; background: var(--dark); color: var(--bg); font-weight: 500; font-size: var(--fs-sm); }
.terms-formula .sep { color: var(--accent); }
.terms-note { margin: 0; max-width: 72ch; color: var(--ink-soft); }
.terms-note strong { color: var(--ink); }
@media (max-width: 980px) { .hero-kern { margin-top: -4px; } .terms-formula { border-radius: var(--radius-sm); } }