/*
  Attitude Teaching Program · Design V3
  Eigenständiges Stylesheet. Gestaltungssprache der Imagebroschüre:
  kräftige, weit gesperrte Versalien im Wechsel mit dünnen Zeilen,
  Anthrazit, Blush und Altrosa, große Fotoflächen.
  Schriften (alle SIL OFL, lokal): Montserrat, Instrument Sans, Caveat.
*/

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-latin.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("assets/fonts/InstrumentSans-latin.woff") format("woff");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("assets/fonts/Caveat-latin.woff") format("woff");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #232528;
  --ink-2: #2e3134;
  --wine: #3c1414;
  --wine-2: #4d1b1b;
  --rose: #c09f98;
  --rose-deep: #7a4e46;
  --blush: #eddad3;
  --blush-soft: #f5ece8;
  --paper: #fcf9f7;
  --white: #fff;
  --muted: #565a5e;
  --line: rgba(35, 37, 40, 0.14);
  --on-dark: rgba(255, 255, 255, 0.78);
  --display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --text: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --script: "Caveat", "Segoe Script", cursive;
  --radius: 4px;
  --content-max: 1200px;
  --content: min(var(--content-max), calc(100% - 48px));
  --gutter: max(24px, calc((100vw - var(--content-max)) / 2));
  --pad: clamp(64px, 7vw, 108px);
}
@media (min-width: 1500px) { :root { --content-max: 1280px; } }
@media (min-width: 1900px) { :root { --content-max: 1440px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 18px/1.65 var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: var(--rose); color: var(--ink); }
:focus-visible { outline: 2px solid var(--rose-deep); outline-offset: 3px; }
.dark-section :focus-visible, .elegant-header :focus-visible, .infoabend :focus-visible, .site-footer :focus-visible,
.hero :focus-visible, .sticky-cta :focus-visible { outline-color: var(--rose); }

.skip-link {
  position: fixed; left: 16px; top: -80px; z-index: 100;
  background: var(--white); color: var(--ink); padding: 12px 18px; border-radius: 2px;
  font: 600 14px var(--display); text-decoration: none; transition: top .2s;
}
.skip-link:focus { top: 16px; }

/* ---------- Typografie ---------- */
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
h2 {
  font: 700 clamp(30px, 3.7vw, 56px)/1.12 var(--display);
  letter-spacing: -0.018em;
  color: var(--ink);
  text-wrap: balance;
}
h2 .type-quiet { font-weight: 300; }
h2 .type-emphasis { font-weight: 800; }
h3 { font: 700 21px/1.3 var(--display); letter-spacing: -0.01em; }
p { text-wrap: pretty; }

.eyebrow {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 22px;
  font: 600 11.5px/1.5 var(--display);
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--rose-deep);
}
.eyebrow::before { content: ""; flex: none; width: 36px; height: 1px; background: currentColor; }

.section-pad { padding: var(--pad) 0; }
.section-pad > * { width: var(--content); margin-inline: auto; }

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 0 80px; align-items: end;
  margin-bottom: clamp(36px, 4.4vw, 60px);
}
.section-heading > .eyebrow { grid-column: 1 / -1; }
.section-heading > h2 { grid-column: 1; }
.section-heading > p:not(.eyebrow) { grid-column: 2; color: var(--muted); font-size: 18px; }
.section-heading > h2:last-child { grid-column: 1 / -1; }

/* ---------- Buttons ---------- */
.button, .elegant-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  padding: 18px 30px; border-radius: 2px;
  font: 600 12.5px/1.2 var(--display); letter-spacing: 0.15em; text-transform: uppercase;
  text-decoration: none; text-align: center;
  transition: background .25s, color .25s, transform .25s, box-shadow .25s;
}
.button-primary { background: var(--wine); color: var(--white); }
.button-primary:hover { background: var(--ink); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(35,37,40,.22); }
.button-dark { background: var(--ink); color: var(--white); }
.button-dark:hover { background: var(--wine); transform: translateY(-2px); }

/* ---------- Kopfzeile ---------- */
.elegant-header {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  padding: 26px var(--gutter);
  color: var(--white);
  background: linear-gradient(180deg, rgba(25, 26, 28, 0.72) 0%, rgba(25, 26, 28, 0) 100%);
  transition: background .3s, padding .3s, box-shadow .3s;
}
.elegant-header.is-scrolled {
  padding-block: 12px;
  background: rgba(35, 37, 40, 0.94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,.08);
}
.elegant-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; text-decoration: none; }
.elegant-brand img { width: 148px; height: auto; filter: brightness(0) invert(1); transition: width .3s; }
.is-scrolled .elegant-brand img { width: 120px; }
.elegant-brand span { font: 600 9.5px/1 var(--display); letter-spacing: 0.36em; text-transform: uppercase; color: var(--rose); }
.elegant-nav { display: flex; gap: clamp(22px, 3vw, 44px); }
.elegant-nav a {
  position: relative; padding: 8px 0;
  font: 500 12px/1 var(--display); letter-spacing: 0.17em; text-transform: uppercase; text-decoration: none;
}
.elegant-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--rose);
  transition: right .3s;
}
.elegant-nav a:hover::after { right: 0; }

.elegant-menu { display: none; position: relative; }
.elegant-menu summary {
  list-style: none; cursor: pointer; padding: 10px 0;
  font: 600 12px/1 var(--display); letter-spacing: 0.17em; text-transform: uppercase;
}
.elegant-menu summary::-webkit-details-marker { display: none; }
.elegant-menu summary span { display: inline-block; margin-left: 6px; transition: transform .25s; }
.elegant-menu[open] summary span { transform: rotate(45deg); }
.elegant-menu nav {
  position: absolute; right: 0; top: calc(100% + 14px); min-width: 250px;
  display: flex; flex-direction: column;
  background: var(--ink); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius);
  padding: 8px 22px; box-shadow: 0 24px 60px rgba(0,0,0,.4);
}
.elegant-menu nav a {
  padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.1);
  font: 500 13px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
}
.elegant-menu nav a:last-child { border: 0; color: var(--rose); }

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(900px 600px at 12% 85%, rgba(192,159,152,.16), transparent 70%),
    linear-gradient(135deg, #2e3134 0%, #232528 60%, #1b1c1e 100%);
  color: var(--white);
  overflow: hidden;
}
.elegant-hero-layout {
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  height: clamp(660px, 100svh, 980px);
}
.elegant-copy {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 150px clamp(32px, 4vw, 72px) 56px var(--gutter);
}
.elegant-copy h1 { display: flex; flex-direction: column; gap: .5em; margin-bottom: 36px; font-family: var(--display); }
.elegant-copy h1 span:first-child {
  font-size: clamp(14px, 1.5vw, 21px); font-weight: 300; letter-spacing: .42em; text-transform: uppercase;
  color: var(--rose);
}
.elegant-copy h1 span:last-child {
  font-size: clamp(46px, 5.7vw, 96px); font-weight: 800; line-height: 1;
  letter-spacing: -.015em; text-transform: uppercase; text-wrap: balance;
}
.elegant-intro { max-width: 27em; margin-bottom: 44px; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55; color: var(--on-dark); }
.elegant-cta { background: var(--blush); color: var(--wine); }
.elegant-cta:hover { background: var(--white); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.elegant-cta span { transition: transform .25s; }
.elegant-cta:hover span { transform: translateX(5px); }
.elegant-meta {
  margin-top: auto; padding-top: 48px;
  font: 500 11px/1.8 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--rose);
}
.elegant-meta span { margin-inline: 8px; opacity: .6; }
.elegant-image { position: relative; overflow: hidden; }
.elegant-image::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #232528 0, rgba(35,37,40,0) 14%);
}
.elegant-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }

/* ---------- Einstieg ---------- */
.statement { background: var(--paper); }
.statement .narrow {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 80px; align-items: end;
  margin-bottom: clamp(40px, 4.6vw, 64px);
}
.statement .narrow .eyebrow { grid-column: 1 / -1; }
.statement .narrow .lead { color: var(--muted); }
.situation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 56px; }
.situation-grid article { position: relative; padding-top: 32px; border-top: 1px solid var(--line); }
.situation-grid article::before { content: ""; position: absolute; left: 0; top: -1px; width: 64px; height: 3px; background: var(--rose); }
.situation-grid article > span { display: block; margin-bottom: 26px; font: 200 64px/1 var(--display); color: var(--rose); }
.situation-grid h3 { margin-bottom: 14px; font-size: 22px; }
.situation-grid p { color: var(--muted); font-size: 17px; }

/* ---------- Nutzen ---------- */
.benefits { background: var(--blush); }
.benefit-visual-layout { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.preparation-visual img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 30% 50%; border-radius: var(--radius); box-shadow: 0 30px 60px -28px rgba(60,20,20,.45); }
.preparation-visual figcaption { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.preparation-visual figcaption span { display: block; opacity: .85; }
.benefit-list { border-bottom: 1px solid rgba(35,37,40,.2); }
.benefit-list article { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 12px; padding: 30px 0; border-top: 1px solid rgba(35,37,40,.2); }
.benefit-list article > span { font: 300 22px/1.3 var(--display); color: var(--rose-deep); }
.benefit-list h3 { margin-bottom: 8px; font-size: 22px; }
.benefit-list p { color: var(--muted); font-size: 17px; }

/* ---------- Eignung ---------- */
.fit-section { background: var(--white); }
.fit-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 110px); align-items: start; }
.fit-layout h2 { margin-bottom: 26px; }
.fit-layout > div:first-child > p:not(.eyebrow) { color: var(--muted); }
.fit-facts > div { padding: 28px 0 28px 30px; border-left: 3px solid var(--rose); margin-bottom: 22px; background: linear-gradient(90deg, var(--blush-soft), transparent 70%); }
.fit-facts strong { display: block; margin-bottom: 8px; font: 700 21px/1.3 var(--display); letter-spacing: -.01em; }
.fit-facts div p { color: var(--muted); font-size: 17px; }
.fit-note { margin-top: 32px; padding: 24px 28px; border-radius: var(--radius); background: var(--ink); color: var(--on-dark); font-size: 16.5px; }

/* ---------- Programm ---------- */
.program-intro, .quick-proof, .module-band { background: var(--blush-soft); }
.program-intro { padding-bottom: clamp(40px, 5vw, 64px); }
.program-intro .section-heading { margin-bottom: 0; }
.quick-proof { padding-block: 0 clamp(48px, 6vw, 72px); }
.quick-proof-grid {
  width: var(--content); margin-inline: auto;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid rgba(35,37,40,.2);
}
.quick-proof-grid > div { padding: 34px 28px; border-left: 1px solid rgba(35,37,40,.2); }
.quick-proof-grid > div:first-child { border-left: 0; padding-left: 0; }
.quick-proof-grid strong { display: block; font: 800 clamp(21px, 1.85vw, 26px)/1.15 var(--display); letter-spacing: -.02em; color: var(--wine); }
.quick-proof-grid span { display: block; margin-top: 8px; font-size: 14.5px; color: var(--muted); }
.module-band { padding: 0 0 var(--pad); }
.competence-map { width: var(--content); margin-inline: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.competence-item { background: var(--white); border-radius: var(--radius); box-shadow: 0 1px 0 rgba(35,37,40,.06); transition: box-shadow .3s, transform .3s; }
.competence-item:hover { box-shadow: 0 18px 40px -22px rgba(60,20,20,.4); transform: translateY(-2px); }
.competence-item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 56px minmax(0, 1fr) 28px; gap: 18px; align-items: center; padding: 26px 24px; }
.competence-item summary::-webkit-details-marker { display: none; }
.competence-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--rose); background: var(--blush-soft); }
.competence-icon img { width: 26px; height: 26px; opacity: .85; }
.competence-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.competence-number { font: 600 10.5px/1.4 var(--display); letter-spacing: .22em; color: var(--rose-deep); }
.competence-label strong { font: 700 17.5px/1.25 var(--display); letter-spacing: -.01em; }
.competence-label > span:last-child { font-size: 14.5px; color: var(--muted); }
.competence-toggle { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); font: 400 18px/1 var(--display); transition: transform .3s, background .3s; }
.competence-item[open] .competence-toggle { transform: rotate(45deg); background: var(--blush); }
.competence-item > p { padding: 0 24px 26px 98px; font-size: 16px; line-height: 1.65; color: var(--muted); }
.competence-hint { width: var(--content); margin: 28px auto 0; font-size: 14px; color: var(--muted); text-align: center; }

/* ---------- Praxis ---------- */
.dark-section { background: linear-gradient(160deg, #2b2e31 0%, #1d1e20 100%); color: var(--white); }
.dark-section h2 { color: var(--white); }
.dark-section .eyebrow { color: var(--rose); }
.practice-copy { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 80px; align-items: end; margin-bottom: clamp(48px, 6vw, 84px); }
.practice-copy .eyebrow { grid-column: 1 / -1; }
.practice-copy > p:not(.eyebrow) { color: var(--on-dark); }
.visual-learning-path { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.visual-learning-path figure { margin-bottom: 26px; overflow: hidden; border-radius: var(--radius); }
.visual-learning-path img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.visual-learning-path li:hover img { transform: scale(1.04); }
.step-number { display: block; margin-bottom: 14px; font: 600 11.5px/1.4 var(--display); letter-spacing: .24em; text-transform: uppercase; color: var(--rose); }
.learning-step-copy h3 { margin-bottom: 10px; font-size: 24px; color: var(--white); }
.learning-step-copy p { color: var(--on-dark); font-size: 17px; }
.learning-image-note { margin-top: 32px !important; font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.55); max-width: 72ch; }
.practice-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; margin-top: clamp(48px, 6vw, 80px) !important; padding-top: 44px; border-top: 1px solid rgba(255,255,255,.16); }
.practice-points strong { display: block; margin-bottom: 8px; font: 700 clamp(22px, 2.2vw, 30px)/1.15 var(--display); letter-spacing: -.015em; color: var(--rose); }
.practice-points p { color: var(--on-dark); font-size: 16.5px; }

/* ---------- Begleitung ---------- */
.mentor-section { background: var(--blush); text-align: center; }
.mentor-statement { max-width: 880px; }
.mentor-statement .eyebrow { justify-content: center; }
.mentor-statement .eyebrow::after { content: ""; flex: none; width: 36px; height: 1px; background: currentColor; }
.mentor-statement h2 { margin-bottom: 30px; }
.mentor-statement > p:not(.eyebrow):not(.mentor-signature) { max-width: 40em; margin-inline: auto; color: var(--muted); font-size: 19px; }
.mentor-signature { margin-top: 28px !important; }
.mentor-signature strong { font: 600 clamp(32px, 3.4vw, 46px)/1.1 var(--script); color: var(--wine); }

/* ---------- Team ---------- */
.trainer { background: var(--white); }
.trainer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 28px; align-items: start; }
.profile-card { display: flex; flex-direction: column; gap: 20px; }
.profile-header { display: flex; flex-direction: column; gap: 22px; }
.profile-portrait { overflow: hidden; border-radius: var(--radius); background: var(--blush); }
.profile-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.profile-card:hover .profile-portrait img { transform: scale(1.035); }
.profile-role { margin-bottom: 10px; font: 600 10.5px/1.55 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--rose-deep); }
.profile-card h3 { font: 800 26px/1.12 var(--display); letter-spacing: -.02em; }
.profile-card h3 .type-firstname { display: block; font-weight: 300; }
.profile-intro { font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.profile-more { border-top: 1px solid var(--line); }
.profile-more summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px 0; font: 600 10.5px/1.5 var(--display); letter-spacing: .15em; text-transform: uppercase; color: var(--ink);
}
.profile-more summary::-webkit-details-marker { display: none; }
.profile-more summary::after { content: "+"; flex: none; font: 400 20px/1 var(--display); transition: transform .3s; }
.profile-more[open] summary::after { transform: rotate(45deg); }
.profile-facts { display: grid; gap: 16px; padding-bottom: 8px; }
.profile-facts dt { margin-bottom: 4px; font: 600 10.5px/1.5 var(--display); letter-spacing: .15em; text-transform: uppercase; color: var(--rose-deep); }
.profile-facts dd { font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* ---------- Studio ---------- */
.attitude-proof { background: var(--blush-soft); }
.split-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.proof-copy h2 { margin-bottom: 28px; }
.proof-copy > p:not(.eyebrow) { margin-bottom: 18px; color: var(--muted); }
.image-frame img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; border-radius: var(--radius); box-shadow: 0 34px 70px -34px rgba(60,20,20,.5); }

/* ---------- Kurse & Preise ---------- */
.investment { background: var(--paper); }
.course-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.course-card { display: flex; flex-direction: column; padding: 38px 32px 32px; background: var(--white); border: 1px solid var(--line); border-radius: 6px; transition: transform .3s, box-shadow .3s; }
.course-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -34px rgba(35,37,40,.45); }
.course-card .eyebrow { margin-bottom: 18px; font-size: 10.5px; }
.course-card h3 { margin-bottom: 32px; font: 800 clamp(22px, 2vw, 28px)/1.18 var(--display); letter-spacing: -.02em; }
.course-model { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 272px; margin-bottom: 28px; }
.model-module { display: flex; flex-direction: column; gap: 3px; padding: 14px 18px; border-radius: 3px; }
.model-module strong { font: 700 15px/1.2 var(--display); }
.model-module span { font-size: 12.5px; line-height: 1.4; }
.model-classic { background: var(--rose); color: var(--ink); min-height: 66px; }
.model-modern { background: var(--blush); color: var(--ink); min-height: 66px; }
.model-base { background: var(--ink); color: var(--white); min-height: 132px; justify-content: center; }
.model-base span:first-child { font: 600 9.5px/1.4 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--rose); }
.model-base strong { font-size: 19px; }
.course-content { min-height: 3.4em; margin-bottom: 22px; font-size: 16px; line-height: 1.55; }
.course-facts { list-style: none; padding: 0; margin: 0 0 28px; }
.course-facts li { padding: 11px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.course-facts li:last-child { border-bottom: 1px solid var(--line); }
.course-facts strong { color: var(--ink); font-weight: 700; }
.course-price { margin-top: auto; font: 800 clamp(40px, 4vw, 54px)/1 var(--display); letter-spacing: -.03em; }
.course-price span { margin-left: 4px; font: 500 14px var(--text); letter-spacing: 0; color: var(--muted); }
.course-monthly { margin: 10px 0 26px; font-size: 14px; color: var(--muted); }
.course-card .button { width: 100%; }
.course-card-complete { background: var(--wine); border-color: var(--wine); color: var(--white); }
.course-card-complete .eyebrow { color: var(--rose); }
.course-card-complete h3, .course-card-complete .course-price { color: var(--white); }
.course-card-complete .course-facts li { color: var(--on-dark); border-color: rgba(255,255,255,.2); }
.course-card-complete .course-facts strong { color: var(--white); }
.course-card-complete .course-price span, .course-card-complete .course-monthly { color: rgba(255,255,255,.7); }
.course-card-complete .model-base { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); }
.course-card-complete .button { background: var(--blush); color: var(--wine); }
.course-card-complete .button:hover { background: var(--white); }

.course-upgrade { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: center; margin-top: 28px !important; padding: 38px 44px; background: var(--blush); border-radius: 6px; }
.course-upgrade-number strong { display: block; font: 800 clamp(34px, 3.6vw, 52px)/1 var(--display); letter-spacing: -.03em; color: var(--wine); }
.course-upgrade-number span { display: block; margin-top: 10px; font-size: 14.5px; color: var(--muted); }
.course-upgrade h3 { margin-bottom: 8px; font-size: 22px; }
.course-upgrade p { color: var(--muted); font-size: 16.5px; }
.course-upgrade p strong { color: var(--ink); }
.fine-print { font-size: 13px; line-height: 1.6; color: var(--muted); }
.course-payment-note { margin-top: 24px !important; max-width: 78ch; }
.course-included { display: flex; justify-content: space-between; align-items: center; gap: 48px; margin-top: 44px !important; padding-top: 40px; border-top: 1px solid var(--line); }
.course-included p { max-width: 62ch; font-size: 17px; }
.course-included .button { flex: none; }

.roi-disclosure { margin-top: 56px !important; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.roi-disclosure > summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 26px 0; font: 600 17px/1.4 var(--display); letter-spacing: -.005em;
}
.roi-disclosure > summary::-webkit-details-marker { display: none; }
.roi-disclosure > summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); font: 400 20px/1 var(--display); transition: transform .3s, background .3s; }
.roi-disclosure[open] > summary::after { transform: rotate(45deg); background: var(--blush); }
.roi-panel { padding: 8px 0 44px; max-width: 880px; }
.roi-panel h3 { margin-bottom: 16px; font-size: 26px; }
.roi-intro { margin-bottom: 28px; color: var(--muted); font-size: 17px; }
.roi-intro strong { color: var(--ink); }
.roi-table { margin-bottom: 24px; border-top: 1px solid var(--ink); }
.roi-head, .roi-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.roi-head { font: 600 10.5px/1.4 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--rose-deep); }
.roi-cell { display: flex; flex-direction: column; }
.roi-label { font: 700 17px/1.3 var(--display); }
.roi-value { font-size: 14.5px; color: var(--muted); }
.roi-row > strong { font: 800 clamp(18px, 2vw, 24px)/1.2 var(--display); letter-spacing: -.01em; color: var(--wine); text-align: right; }
.roi-formula { margin-bottom: 14px; font-size: 15px; color: var(--muted); }

/* ---------- Ablauf ---------- */
.journey { background: var(--blush); }
.journey-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 56px; counter-reset: step; }
.journey-list li { position: relative; padding-top: 36px; border-top: 1px solid rgba(35,37,40,.25); }
.journey-list li::before { content: ""; position: absolute; left: 0; top: -1px; width: 64px; height: 3px; background: var(--wine); }
.journey-list li > span { display: block; margin-bottom: 22px; font: 200 72px/1 var(--display); color: var(--rose-deep); }
.journey-list h3 { margin-bottom: 12px; font-size: 22px; }
.journey-list p { color: var(--muted); font-size: 17px; }

/* ---------- FAQ ---------- */
.faq { background: var(--white); }
.faq-groups { display: flex; flex-direction: column; gap: clamp(56px, 7vw, 96px); }
.faq-group { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px 64px; }
.faq-group > h3 { position: sticky; top: 100px; align-self: start; font: 700 clamp(21px, 2vw, 26px)/1.3 var(--display); letter-spacing: -.015em; }
.faq-group > h3 span { display: block; margin-bottom: 14px; font: 200 56px/1 var(--display); color: var(--rose); }
.faq-list { border-bottom: 1px solid var(--line); }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list summary { position: relative; list-style: none; cursor: pointer; padding: 24px 56px 24px 0; font: 600 17px/1.45 var(--display); letter-spacing: -.005em; transition: color .2s; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--rose-deep); }
.faq-list summary::after { content: "+"; position: absolute; right: 0; top: 50%; display: grid; place-items: center; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; border: 1px solid var(--line); font: 400 20px/1 var(--display); transition: transform .3s, background .3s; }
.faq-list details[open] summary::after { transform: rotate(45deg); background: var(--blush); }
.faq-list details p { padding: 0 56px 28px 0; font-size: 17px; line-height: 1.7; color: var(--muted); }

/* ---------- Infoabend ---------- */
.infoabend {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  column-gap: clamp(40px, 7vw, 110px); align-items: center;
  padding-inline: var(--gutter);
  background: radial-gradient(900px 500px at 85% 0%, rgba(192,159,152,.18), transparent 70%), var(--wine);
  color: var(--white);
}
.infoabend > * { width: auto; margin: 0; }
.infoabend .eyebrow { color: var(--rose); }
.infoabend h2 { margin-bottom: 26px; color: var(--white); font-weight: 800; font-size: clamp(34px, 4.4vw, 66px); }
.infoabend-copy > p:not(.eyebrow) { max-width: 34em; color: var(--on-dark); font-size: 19px; }
.infoabend-copy ul { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 14px; }
.infoabend-copy li { display: flex; align-items: center; gap: 16px; color: var(--white); font-size: 17px; }
.infoabend-copy li::before { content: ""; flex: none; width: 28px; height: 1px; background: var(--rose); }
.contact-panel { padding: clamp(32px, 3.4vw, 52px); background: var(--white); color: var(--ink); border-radius: 6px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.55); }
.contact-panel .eyebrow { color: var(--rose-deep); }
.contact-panel h3 { margin-bottom: 14px; font: 800 clamp(22px, 2.2vw, 28px)/1.2 var(--display); letter-spacing: -.02em; }
.contact-panel > p:not(.eyebrow):not(.contact-alternative) { margin-bottom: 28px; color: var(--muted); font-size: 16.5px; }
.contact-panel .button { width: 100%; }
.contact-alternative { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.contact-alternative a { font: 700 20px/1.6 var(--display); letter-spacing: -.01em; color: var(--wine); text-decoration: none; }
.contact-alternative a:hover { text-decoration: underline; }

/* ---------- Fußzeile ---------- */
.site-footer {
  display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: 40px;
  padding: 72px var(--gutter) 64px; background: var(--ink); color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.7;
}
.footer-brand img { width: 150px; margin-bottom: 22px; filter: brightness(0) invert(1); }
.footer-brand p { font-size: 14px; letter-spacing: .02em; }
.site-footer address { font-style: normal; }
.footer-contact, .footer-links { display: flex; flex-direction: column; gap: 6px; }
.site-footer a { text-decoration: none; transition: color .2s; }
.site-footer a:hover { color: var(--rose); }

/* ---------- Schwebender Button ---------- */
.sticky-cta {
  position: fixed; right: 24px; bottom: 24px; z-index: 30;
  display: flex; align-items: center; gap: 18px; padding: 8px 8px 8px 22px;
  background: var(--ink); color: var(--white); border: 1px solid rgba(255,255,255,.14); border-radius: 3px;
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
  transform: translateY(160%); opacity: 0; pointer-events: none;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), opacity .3s;
}
.sticky-cta.is-visible { transform: none; opacity: 1; pointer-events: auto; }
.sticky-cta span { font: 500 11px/1.2 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--rose); }
.sticky-cta a { padding: 14px 20px; border-radius: 2px; background: var(--blush); color: var(--wine); font: 600 11.5px/1.2 var(--display); letter-spacing: .13em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background .2s; }
.sticky-cta a:hover { background: var(--white); }

/* ---------- Einblenden beim Scrollen ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Responsiv ---------- */
@media (max-width: 1180px) {
  .trainer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; }
  .profile-header { flex-direction: row; align-items: flex-end; }
  .profile-portrait { flex: 0 0 46%; }
  .competence-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1020px) {
  .course-grid { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
  .course-model { min-height: 0; }
  .elegant-nav { display: none; }
  .elegant-menu { display: block; }
}
@media (max-width: 900px) {
  .section-heading, .statement .narrow, .practice-copy { grid-template-columns: 1fr; gap: 20px; }
  .section-heading > p:not(.eyebrow) { grid-column: 1; }
  .benefit-visual-layout, .fit-layout, .split-layout { grid-template-columns: 1fr; }
  .situation-grid, .journey-list, .visual-learning-path, .practice-points { grid-template-columns: 1fr; gap: 40px; }
  .situation-grid article > span, .journey-list li > span { font-size: 52px; margin-bottom: 14px; }
  .quick-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-proof-grid > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .quick-proof-grid > div:nth-child(n+3) { border-top: 1px solid rgba(35,37,40,.2); }
  .faq-group { grid-template-columns: 1fr; gap: 24px; }
  .faq-group > h3 { position: static; display: flex; align-items: baseline; gap: 16px; }
  .faq-group > h3 span { margin: 0; font-size: 40px; }
  .course-upgrade { grid-template-columns: 1fr; gap: 18px; padding: 30px 28px; }
  .course-included { flex-direction: column; align-items: flex-start; gap: 28px; }
  .infoabend { grid-template-columns: 1fr; row-gap: 48px; }

  .elegant-hero-layout { grid-template-columns: 1fr; height: auto; }
  .elegant-copy { padding: 128px 24px 48px; }
  .elegant-meta { margin-top: 40px; padding-top: 0; }
  .elegant-image { aspect-ratio: 4 / 5; }
  .elegant-image::after { background: linear-gradient(180deg, #232528 0, rgba(35,37,40,0) 12%); }
  .elegant-image img { object-position: 50% 20%; }
  .elegant-header { padding-block: 18px; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  :root { --pad: 56px; }
  .trainer-grid { grid-template-columns: 1fr; gap: 44px; }
  .profile-header { flex-direction: row; align-items: center; gap: 20px; }
  .profile-portrait { flex: 0 0 38%; }
  .profile-card h3 { font-size: 22px; }
  .situation-grid, .journey-list, .visual-learning-path, .practice-points { gap: 32px; }
  .hero .elegant-copy { padding-top: 112px; }
  .competence-map { grid-template-columns: 1fr; }
  .competence-item > p { padding-left: 24px; }
  .roi-head, .roi-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .roi-row > strong { text-align: left; }
  .site-footer { grid-template-columns: 1fr; gap: 32px; padding-block: 56px; }
  .sticky-cta { left: 16px; right: 16px; bottom: 16px; justify-content: space-between; padding-left: 16px; }
  .sticky-cta span { display: none; }
  .sticky-cta a { flex: 1; text-align: center; }
  .elegant-brand img { width: 124px; }
  .quick-proof-grid > div { padding: 26px 16px; }
  .quick-proof-grid > div:nth-child(odd) { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* =====================================================================
   Design V4 · Ergänzungen für Anmeldung, Vertrauen und Entscheidungshilfen
   ===================================================================== */

/* ---------- Platzhalter für fehlende Angaben (Prüfansicht) ---------- */
.todo {
  margin-top: 18px;
  padding: 12px 16px 12px 14px;
  background: #fff6d8; color: #4d3b00;
  border: 2px dashed #d19a00; border-radius: var(--radius);
  font: 500 13px/1.55 var(--text);
}
.todo strong {
  display: inline-block; margin-right: 8px; padding: 2px 8px;
  background: #d19a00; color: #231a00; border-radius: 2px;
  font: 700 10px/1.5 var(--display); letter-spacing: .14em; text-transform: uppercase;
}
.clean .todo { display: none !important; }

/* ---------- Kopfzeile: Anmelden-Button ---------- */
.elegant-nav { align-items: center; }
.elegant-nav a.nav-cta {
  padding: 11px 20px; border: 1px solid var(--rose); border-radius: 2px; color: var(--white);
  transition: background .25s, color .25s;
}
.elegant-nav a.nav-cta::after { display: none; }
.elegant-nav a.nav-cta:hover { background: var(--blush); color: var(--wine); }
.elegant-nav a.nav-cta:hover::after { display: none; }

/* ---------- Hero ---------- */
.hero-kicker {
  margin-bottom: 22px;
  font: 600 11.5px/1.5 var(--display); letter-spacing: .26em; text-transform: uppercase; color: var(--rose);
}
.elegant-copy h1 { margin-bottom: 28px; }
.elegant-intro { margin-bottom: 30px; }
.hero-event { display: flex; flex-direction: column; gap: 4px; margin-bottom: 28px; padding-left: 18px; border-left: 3px solid var(--rose); }
.hero-event-date { font: 700 clamp(17px, 1.6vw, 22px)/1.3 var(--display); letter-spacing: -.01em; color: var(--white); }
.hero-event-text { font-size: 15px; color: var(--on-dark); }
.countdown { display: inline-block; margin-left: 8px; padding: 2px 10px; background: var(--rose); color: var(--ink); border-radius: 2px; font: 700 11px/1.6 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.countdown:empty, .countdown[hidden] { display: none; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.hero-link { font: 600 12px/1.2 var(--display); letter-spacing: .15em; text-transform: uppercase; color: var(--white); text-decoration: none; border-bottom: 1px solid var(--rose); padding-bottom: 6px; }
.hero-link:hover { color: var(--rose); }
.hero-audience { margin-top: 28px; max-width: 34em; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.62); }
.elegant-meta { padding-top: 28px; }

/* ---------- Christina ---------- */
.christina { background: var(--blush); }
.christina-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.christina-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: var(--radius); box-shadow: 0 34px 70px -34px rgba(60,20,20,.5); }
.christina-copy h2 { margin-bottom: 26px; }
.christina-copy > p:not(.eyebrow):not(.christina-signature):not(.todo) { margin-bottom: 16px; color: var(--muted); font-size: 18px; }
.pullquote { margin: 28px 0 0; padding: 4px 0 4px 26px; border-left: 3px solid var(--wine); }
.pullquote p { font: 300 clamp(20px, 1.9vw, 26px)/1.4 var(--display); letter-spacing: -.01em; color: var(--wine); }
.pullquote footer { margin-top: 12px; font: 600 11px/1.5 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--rose-deep); }
.christina-signature { margin-top: 24px; }
.christina-signature strong { font: 600 clamp(30px, 3vw, 42px)/1.1 var(--script); color: var(--wine); }

/* ---------- Nicht für dich ---------- */
.not-fit { margin-top: clamp(40px, 5vw, 64px); padding: clamp(28px, 3.4vw, 48px); background: var(--blush-soft); border-radius: 6px; }
.not-fit h3 { margin-bottom: 22px; font-size: clamp(20px, 2vw, 26px); }
.not-fit ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 48px; }
.not-fit li { position: relative; padding-left: 26px; font-size: 16.5px; line-height: 1.55; color: var(--muted); }
.not-fit li::before { content: ""; position: absolute; left: 0; top: .72em; width: 14px; height: 2px; background: var(--rose-deep); }
.not-fit li strong { color: var(--ink); }

/* ---------- Das nimmst du mit ---------- */
.takeaway { margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(36px, 4vw, 56px); border-top: 1px solid rgba(35,37,40,.2); }
.takeaway-head { margin-bottom: 32px; }
.takeaway-head h3 { font: 800 clamp(26px, 2.8vw, 38px)/1.15 var(--display); letter-spacing: -.02em; }
.takeaway-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.takeaway-grid > div { padding: 26px 24px; background: var(--white); border-radius: var(--radius); border-top: 3px solid var(--rose); }
.takeaway-grid strong { display: block; margin-bottom: 8px; font: 700 18px/1.3 var(--display); letter-spacing: -.01em; }
.takeaway-grid p { font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.takeaway-section { background: var(--blush); }

/* ---------- Zwischen-CTA ---------- */
.cta-band { background: var(--wine); color: var(--white); padding: clamp(44px, 5vw, 72px) 0; }
.cta-band-inner { width: var(--content); margin-inline: auto; display: flex; justify-content: space-between; align-items: center; gap: 32px 56px; flex-wrap: wrap; }
.cta-band-date { margin-bottom: 10px; font: 600 11.5px/1.5 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--rose); }
.cta-band h2 { max-width: 20em; color: var(--white); font-size: clamp(24px, 2.8vw, 38px); font-weight: 800; }
.cta-band-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.button-light { background: var(--blush); color: var(--wine); }
.button-light:hover { background: var(--white); transform: translateY(-2px); }
.text-link-light { font: 600 12px/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--rose); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 5px; }
.text-link-light:hover { color: var(--white); }

/* ---------- Klarheit ---------- */
.clarity { background: var(--paper); }
.clarity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.clarity-grid > div { padding: 32px 30px; background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--wine); border-radius: var(--radius); }
.clarity-grid h3 { margin-bottom: 14px; font-size: 22px; }
.clarity-grid p { color: var(--muted); font-size: 16.5px; }

/* ---------- Belege im Studio-Abschnitt ---------- */
.attitude-proof .proof-stats { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid rgba(35,37,40,.2); }
.proof-stats > div { padding: 28px 28px 28px 0; }
.proof-stats > div + div { padding-left: 28px; border-left: 1px solid rgba(35,37,40,.2); }
.proof-stats strong { display: block; font: 800 clamp(26px, 2.8vw, 38px)/1.1 var(--display); letter-spacing: -.02em; color: var(--wine); }
.proof-stats span { display: block; margin-top: 8px; font-size: 15px; color: var(--muted); }

/* ---------- Kurswegweiser ---------- */
.guide { margin-bottom: clamp(40px, 5vw, 64px); padding: clamp(28px, 3.4vw, 48px); background: var(--blush); border-radius: 6px; }
.guide-head { margin-bottom: 26px; }
.guide-head .eyebrow { margin-bottom: 14px; }
.guide-head h3 { font: 700 clamp(20px, 2.1vw, 28px)/1.3 var(--display); letter-spacing: -.015em; }
.guide-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.guide-list a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center;
  padding: 20px 24px; background: var(--white); border-radius: var(--radius); text-decoration: none;
  border: 1px solid transparent; transition: border-color .25s, transform .25s, box-shadow .25s;
}
.guide-list a:hover { border-color: var(--wine); transform: translateY(-2px); box-shadow: 0 16px 30px -22px rgba(60,20,20,.5); }
.guide-q { font: 700 16.5px/1.35 var(--display); letter-spacing: -.01em; }
.guide-a { grid-column: 1; font-size: 14.5px; color: var(--muted); }
.guide-arrow { grid-row: 1 / span 2; grid-column: 2; font: 400 22px/1 var(--display); color: var(--wine); transition: transform .25s; }
.guide-list a:hover .guide-arrow { transform: translateX(4px); }
.course-grid > .course-card:target { outline: 3px solid var(--rose); outline-offset: 4px; }

/* ---------- Ablauf: Button ---------- */
.journey-cta { margin-top: clamp(36px, 4vw, 56px) !important; }

/* ---------- Formular ---------- */
.signup-card { padding: clamp(28px, 3.2vw, 48px); background: var(--white); color: var(--ink); border-radius: 6px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.55); }
.signup-card .eyebrow { color: var(--rose-deep); margin-bottom: 14px; }
.signup-card h2, .signup-card h3 { margin-bottom: 22px; font: 800 clamp(22px, 2.2vw, 28px)/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); }
.signup-form { display: grid; gap: 16px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-row { display: grid; gap: 6px; }
.form-row label, .form-choice legend { font: 600 12px/1.4 var(--display); letter-spacing: .06em; color: var(--ink); }
.form-row label small { font: 400 12px var(--text); letter-spacing: 0; color: var(--muted); }
.form-row input:not([type="checkbox"]):not([type="radio"]), .form-row select {
  width: 100%; min-height: 50px; padding: 12px 14px; font: 400 16px/1.3 var(--text); color: var(--ink);
  background: var(--paper); border: 1px solid rgba(35,37,40,.28); border-radius: 3px;
  transition: border-color .2s, box-shadow .2s;
}
.form-row input:focus, .form-row select:focus { outline: none; border-color: var(--wine); box-shadow: 0 0 0 3px rgba(60,20,20,.16); }
.form-row [aria-invalid="true"] { border-color: #a4262c; background: #fff7f7; }
.field-error { min-height: 0; font-size: 13px; line-height: 1.4; color: #a4262c; }
.field-error:empty { display: none; }
.form-choice { margin: 0; padding: 0; border: 0; display: grid; gap: 10px; }
.form-choice legend { padding: 0; margin-bottom: 4px; }
.choice { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--paper); border: 1px solid rgba(35,37,40,.2); border-radius: 3px; cursor: pointer; font: 400 15px/1.45 var(--text); transition: border-color .2s, background .2s; }
.choice:has(input:checked) { border-color: var(--wine); background: var(--blush-soft); }
.choice input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--wine); }
.checkbox-row { grid-template-columns: auto 1fr; align-items: start; column-gap: 12px; }
.checkbox-row input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--wine); }
.checkbox-row label { font: 400 13.5px/1.55 var(--text); letter-spacing: 0; color: var(--muted); }
.checkbox-row label a { color: var(--wine); }
.checkbox-row .field-error { grid-column: 2; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-submit { width: 100%; }
.form-note { font-size: 14px; line-height: 1.55; color: var(--ink); }
.form-note:empty { display: none; }
.form-note.is-error { color: #a4262c; font-weight: 600; }
.form-reassure { font-size: 13px; color: var(--muted); text-align: center; }
.alt-contact { margin-top: 36px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.18); }
.alt-contact p { color: var(--on-dark); font-size: 16px; }
.alt-contact p + p { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.alt-link { font: 600 12px/1.2 var(--display); letter-spacing: .13em; text-transform: uppercase; color: var(--rose); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 5px; }
.alt-link:hover { color: var(--white); }

/* ---------- Kurze Anmeldeseite ---------- */
.reg-page .reg-hero { min-height: 100svh; padding-top: 150px; padding-bottom: 80px; align-items: start; }
.reg-page .reg-hero h1 { margin-bottom: 24px; font: 800 clamp(32px, 4.4vw, 62px)/1.06 var(--display); letter-spacing: -.025em; color: var(--white); text-wrap: balance; }
.reg-intro { max-width: 34em; margin-bottom: 28px; font-size: 19px; color: var(--on-dark); }
.reg-page .infoabend-copy .hero-event { margin-bottom: 28px; }
.reg-more { margin-top: 36px; }
.reg-page .christina { padding-block: var(--pad); }

/* ---------- Dankeseite ---------- */
.thanks-panel { padding-top: 160px !important; max-width: 920px; margin-inline: auto; }
.thanks-panel > * { width: auto; }
.thanks-panel h1 { margin-bottom: 24px; font: 800 clamp(32px, 4.4vw, 60px)/1.1 var(--display); letter-spacing: -.025em; }
.thanks-panel h1 .type-quiet { font-weight: 300; }
.thanks-lead { margin-bottom: 44px; font-size: 20px; color: var(--muted); }
.thanks-lead strong { color: var(--ink); }
.thanks-panel .journey-list { margin-bottom: 44px; }
.thanks-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }
.thanks-back a { font: 600 12px/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--wine); }
.thanks-page { background: var(--paper); }
.thanks-page .elegant-header { position: absolute; background: var(--ink); }
.thanks-page .elegant-header.is-scrolled { position: absolute; }

/* ---------- Responsiv V4 ---------- */
@media (max-width: 1180px) {
  .takeaway-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .christina-layout, .clarity-grid, .not-fit ul, .guide-list { grid-template-columns: 1fr; }
  .christina-media { max-width: 420px; }
  .cta-band-inner { flex-direction: column; align-items: flex-start; }
  .form-grid { grid-template-columns: 1fr; }
  .reg-page .reg-hero { padding-top: 120px; }
  .elegant-hero-layout .elegant-copy { padding-top: 112px; }
}
@media (max-width: 640px) {
  .takeaway-grid { grid-template-columns: 1fr; }
  .proof-stats > div { padding: 22px 12px 22px 0; }
  .proof-stats > div + div { padding-left: 16px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .elegant-cta { width: 100%; }
  .hero-link { align-self: flex-start; }
  .guide-list a { padding: 18px 18px; }
}

/* Hero kompakter, damit Termin, Button und Meta ohne Scrollen sichtbar bleiben */
.v4 .elegant-copy { padding-top: 128px; padding-bottom: 40px; }
.v4 .elegant-intro { font-size: clamp(17px, 1.35vw, 20px); margin-bottom: 26px; }
.v4 .hero-audience { margin-top: 22px; }
.v4 .elegant-meta { padding-top: 22px; margin-top: auto; }
.cta-band-inner > div:first-child { flex: 1 1 480px; max-width: 760px; }
.cta-band-actions { flex: none; }

/* Überlange Platzhaltertexte und Grid-Kinder dürfen auf dem Handy nie die Seite verbreitern */
.todo { overflow-wrap: anywhere; }
.christina-layout > *, .clarity-grid > *, .takeaway-grid > *, .guide-list > *, .signup-card, .infoabend > * { min-width: 0; }
@media (max-width: 640px) {
  :root { --pad: 48px; }
  .christina-media img { aspect-ratio: 1 / 1; object-position: 50% 12%; }
  .visual-learning-path img { aspect-ratio: 16 / 10; }
  .not-fit, .guide { padding: 24px 20px; }
  .takeaway-grid > div, .clarity-grid > div { padding: 22px 20px; }
  .cta-band { padding-block: 40px; }
  .section-heading { margin-bottom: 32px; }
}
@media (max-width: 640px) {
  .model-classic, .model-modern { min-height: 54px; padding: 10px 14px; }
  .model-base { min-height: 100px; }
  .course-model { gap: 5px; margin-bottom: 20px; }
}

/* =====================================================================
   Design V5 · Geschichte statt Abschnitte
   ===================================================================== */

/* ---------- Hero: der Gewinn ---------- */
.hero-goal { max-width: 30em; margin: -6px 0 28px; padding: 14px 18px; border-radius: 3px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); font-size: 16px; line-height: 1.55; color: var(--white); }
.hero-goal span { display: block; margin-bottom: 2px; font: 600 10.5px/1.6 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--rose); }

/* ---------- Grammatik-Vergleich ---------- */
.analogy { margin-top: clamp(44px, 5vw, 72px); padding: clamp(28px, 3.4vw, 44px) clamp(24px, 3vw, 48px); background: var(--ink); color: var(--white); border-radius: 6px; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 24px 48px; align-items: end; }
.analogy-quote { font: 300 clamp(20px, 2vw, 28px)/1.4 var(--display); letter-spacing: -.01em; }
.analogy-source { font: 600 11px/1.6 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--rose); }

/* ---------- Der eine Moment ---------- */
.moment { position: relative; isolation: isolate; display: grid; place-items: center; min-height: clamp(520px, 78vh, 760px); padding: var(--pad) var(--gutter); color: var(--white); text-align: center; overflow: hidden; background: #1f1b1b; }
.moment::before { content: ""; position: absolute; inset: -4%; z-index: -2; background: url("assets/opt/studio.webp") center 40% / cover; filter: grayscale(1) blur(2px); opacity: .28; }
.moment::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(31,27,27,.1), rgba(31,27,27,.75)); }
.moment-inner { max-width: 900px; }
.moment .eyebrow { justify-content: center; color: var(--rose); margin-bottom: 34px; }
.moment .eyebrow::after { content: ""; flex: none; width: 36px; height: 1px; background: currentColor; }
.moment-quote { margin: 0 0 34px; }
.moment-quote p { font: 300 clamp(26px, 3.6vw, 50px)/1.25 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.moment-name { font: 600 clamp(30px, 3.2vw, 44px)/1.1 var(--script); color: var(--rose); }
.moment-role { margin-top: 10px; font: 500 12px/1.6 var(--display); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }

/* ---------- Leitsatz im Programmintro ---------- */
.maxim { max-width: 46em; margin-top: 28px !important; padding-left: 22px; border-left: 3px solid var(--wine); font: 300 clamp(19px, 1.7vw, 24px)/1.45 var(--display); letter-spacing: -.01em; color: var(--ink); }
.maxim span { display: block; margin-top: 10px; font: 600 11px/1.6 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--rose-deep); }

/* ---------- Werkzeugkoffer ---------- */
.toolbox { background: var(--white); }
.toolbox-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.toolbox-grid article { position: relative; padding: clamp(28px, 3vw, 44px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tool-number { display: block; margin-bottom: 18px; font: 200 48px/1 var(--display); color: var(--rose); }
.toolbox-grid h3 { margin-bottom: 10px; font-size: clamp(20px, 1.9vw, 24px); }
.tool-scene { margin-bottom: 18px; font-size: 17px; color: var(--muted); }
.tool-answer { padding: 16px 18px; background: var(--blush-soft); border-left: 3px solid var(--rose-deep); font-size: 15.5px; line-height: 1.6; }
.tool-answer strong { color: var(--rose-deep); }

/* ---------- Das nimmst du mit: Ziel und Erkennungsmerkmale ---------- */
.takeaway-goal { margin-top: 14px; max-width: 40em; font-size: 17px; color: var(--muted); }
.takeaway-goal em { font-style: normal; color: var(--wine); font-weight: 600; }
.recognise { margin-top: 32px; padding: clamp(24px, 3vw, 40px); background: var(--white); border-radius: var(--radius); }
.recognise h4 { margin: 0 0 18px; font: 700 clamp(18px, 1.7vw, 22px)/1.3 var(--display); letter-spacing: -.01em; }
.recognise ul { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 40px; }
.recognise li { position: relative; padding-left: 24px; font-size: 16px; line-height: 1.5; }
.recognise li::before { content: ""; position: absolute; left: 0; top: .7em; width: 12px; height: 2px; background: var(--rose-deep); }
.recognise-note { font-size: 13.5px; color: var(--muted); }

/* ---------- Preis je UE ---------- */
.per-unit { white-space: nowrap; }
.course-card-complete .per-unit { color: rgba(255,255,255,.7); }

/* ---------- Formular: Teilnahme nach den Feldern ---------- */
.signup-form .form-choice { margin-top: 4px; }

@media (max-width: 900px) {
  .analogy { grid-template-columns: 1fr; }
  .toolbox-grid { grid-template-columns: 1fr; }
  .recognise ul { grid-template-columns: 1fr; }
  .moment { min-height: 0; padding-block: 72px; }
}

/* =====================================================================
   Design V6 · Teamstimme, Trigger, echte Bilder
   ===================================================================== */

/* ---------- Hero: Neu ---------- */
.hero-badge { display: inline-flex; align-items: center; gap: 10px; margin: -8px 0 22px; padding: 7px 14px 7px 7px; border: 1px solid rgba(192,159,152,.45); border-radius: 999px; font: 500 12.5px/1.3 var(--text); color: var(--white); }
.hero-badge span { padding: 4px 9px; border-radius: 999px; background: var(--rose); color: var(--ink); font: 700 10px/1.3 var(--display); letter-spacing: .18em; text-transform: uppercase; }

/* ---------- Gegenüberstellung ---------- */
.analogy { grid-template-columns: 1fr; gap: 28px; }
.analogy-quote { font-size: clamp(19px, 1.8vw, 25px); max-width: 44em; }
.contrast { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.contrast > div { padding: 20px 22px; border-radius: var(--radius); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.contrast > div:last-child { background: rgba(192,159,152,.16); border-color: rgba(192,159,152,.45); }
.contrast-label { display: block; margin-bottom: 8px; font: 600 10.5px/1.5 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--rose); }
.contrast p { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.85); }

/* ---------- Moment: Spitzenschuhe statt Empfang ---------- */
.moment::before { background-image: url("assets/opt/schuhe-bokeh.webp"); filter: grayscale(.35) blur(1px); opacity: .32; }
.moment-quote { max-width: 24em; margin-inline: auto; }
.moment-quote, .moment-quote p { font: 300 clamp(24px, 3.1vw, 42px)/1.3 var(--display); letter-spacing: -.02em; text-wrap: balance; }

/* ---------- Team früh ---------- */
.team-early { background: var(--blush); }
.team-early-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.team-early-card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.team-early-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; border-radius: var(--radius); margin-bottom: 16px; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.team-early-card:hover img { transform: scale(1.03); }
.team-early-name { font: 800 19px/1.2 var(--display); letter-spacing: -.015em; margin-bottom: 6px; }
.team-early-proof { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.team-early-note { margin-top: clamp(36px, 4vw, 56px); padding-top: 32px; border-top: 1px solid rgba(35,37,40,.2); max-width: 880px; }
.team-early-note > p:first-child { font: 300 clamp(19px, 1.8vw, 24px)/1.45 var(--display); letter-spacing: -.01em; }

/* ---------- Programmsatz ---------- */
.maxim { font-weight: 400; }

/* ---------- Echtes Klassenfoto ---------- */
.preparation-visual.real-photo img { aspect-ratio: 16 / 9; object-position: 50% 40%; }

/* ---------- Klarheit: vier Karten ---------- */
.clarity-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.clarity-grid > div { padding: 26px 24px; }
.clarity-grid h3 { font-size: 20px; }
.clarity-grid p { font-size: 15.5px; }

/* ---------- Qualifikation sichtbar ---------- */
.profile-cred { font: 600 11.5px/1.55 var(--display); letter-spacing: .04em; color: var(--wine); }

/* ---------- Bühne, Plakate, Stimmen ---------- */
.stage { margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid rgba(35,37,40,.2); }
.stage-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 64px; align-items: end; margin-bottom: 32px; }
.stage-head .eyebrow { grid-column: 1 / -1; }
.stage-head h3 { font: 800 clamp(24px, 2.6vw, 36px)/1.15 var(--display); letter-spacing: -.02em; }
.stage-head p:not(.eyebrow) { color: var(--muted); font-size: 16.5px; }
.stage-grid { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; }
.stage-grid figure { margin: 0; overflow: hidden; border-radius: var(--radius); position: relative; }
.stage-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stage-main { grid-row: 1 / span 2; }
.stage-main figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 22px 16px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.7)); color: var(--white); font: 600 11.5px/1.5 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.posters { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.posters li { display: flex; flex-direction: column; gap: 10px; }
.posters img { width: 100%; aspect-ratio: 350 / 495; object-fit: cover; border-radius: 3px; box-shadow: 0 14px 30px -18px rgba(60,20,20,.5); }
.posters span { font: 600 11px/1.5 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--rose-deep); }
.voices { margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid rgba(35,37,40,.2); }
.voices-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 64px; align-items: end; margin-bottom: 32px; }
.voices-head .eyebrow { grid-column: 1 / -1; }
.voices-head h3 { font: 800 clamp(24px, 2.6vw, 36px)/1.15 var(--display); letter-spacing: -.02em; }
.voices-head p:not(.eyebrow) { color: var(--muted); font-size: 16.5px; }
.voices-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.voice { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); background: var(--white); border-radius: var(--radius); overflow: hidden; transition: transform .3s, box-shadow .3s; }
.voice:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -30px rgba(60,20,20,.5); }
.voice img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 30% 50%; display: block; }
.voice-name { padding: 16px 18px 4px; font: 700 16px/1.3 var(--display); letter-spacing: -.01em; }
.voice-text { padding: 0 18px 18px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.voices-note { margin-top: 16px; font-size: 13px; color: var(--muted); }

@media (max-width: 1180px) {
  .clarity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-early-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
}
@media (max-width: 900px) {
  .contrast { grid-template-columns: 1fr; }
  .stage-head, .voices-head { grid-template-columns: 1fr; gap: 16px; }
  .stage-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .stage-main { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 3 / 2; }
  .posters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .voices-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .clarity-grid { grid-template-columns: 1fr; }
  .posters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .hero-badge { margin-bottom: 18px; }
}

/* =====================================================================
   Design V7 · Rückmeldung Stefan/Christina: gestrafft, Rechenbeispiel offen
   ===================================================================== */
.roi-open { margin-top: 56px !important; padding-top: 44px; border-top: 1px solid var(--line); }
.roi-open .roi-question { margin-bottom: 8px; font: 600 11.5px/1.5 var(--display); letter-spacing: .26em; text-transform: uppercase; color: var(--rose-deep); }
.roi-open .roi-panel { padding-top: 0; }
.roi-open .roi-panel > .eyebrow { display: none; }

/* =====================================================================
   Design V8 · Review Stefan/Christina vom 15.10.2026: helle CI-Flächen
   ===================================================================== */

/* ---------- Kopfzeile: heller Attitude-Header ---------- */
.v8 .elegant-header, .v8 .elegant-header.is-scrolled { background: var(--white); color: var(--ink); box-shadow: 0 1px 0 var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
.v8 .elegant-header { padding-block: 18px; }
.v8 .elegant-header.is-scrolled { padding-block: 12px; box-shadow: 0 1px 0 var(--line), 0 10px 30px -22px rgba(35,37,40,.35); }
.v8 .elegant-brand img { filter: none; width: 136px; }
.v8 .is-scrolled .elegant-brand img { width: 118px; }
.v8 .elegant-brand span { color: var(--rose-deep); }
.v8 .elegant-nav a { color: var(--ink); }
.v8 .elegant-nav a::after { background: var(--wine); }
.v8 .elegant-nav a.nav-cta { border-color: var(--wine); color: var(--wine); }
.v8 .elegant-nav a.nav-cta:hover { background: var(--wine); color: var(--white); }
.v8 .elegant-menu summary { color: var(--ink); }
.v8 .elegant-menu nav { background: var(--white); border-color: var(--line); box-shadow: 0 24px 60px rgba(35,37,40,.18); }
.v8 .elegant-menu nav a { color: var(--ink); border-color: var(--line); }
.v8 .elegant-menu nav a:last-child { color: var(--wine); }
.v8 .elegant-header :focus-visible { outline-color: var(--wine); }

/* ---------- Hero: helle CI-Fläche, weicher Übergang ---------- */
.v8 .hero { background: linear-gradient(135deg, #f7efeb 0%, var(--blush) 100%); color: var(--ink); }
.v8 .hero-kicker { color: var(--rose-deep); }
.v8 .hero-badge { border-color: rgba(60,20,20,.25); color: var(--ink); }
.v8 .hero-badge span { background: var(--wine); color: var(--white); }
.v8 .elegant-copy h1 span:first-child { color: var(--rose-deep); }
.v8 .elegant-copy h1 span:last-child { color: var(--ink); }
.v8 .elegant-intro { color: var(--muted); }
.v8 .hero-goal { background: rgba(255,255,255,.55); border-color: rgba(60,20,20,.12); color: var(--ink); }
.v8 .hero-goal span { color: var(--rose-deep); }
.v8 .hero-event { border-left-color: var(--wine); }
.v8 .hero-event-date { color: var(--ink); }
.v8 .hero-event-text { color: var(--muted); }
.v8 .countdown { background: var(--wine); color: var(--white); }
.v8 .elegant-cta { background: var(--wine); color: var(--white); }
.v8 .elegant-cta:hover { background: var(--ink); box-shadow: 0 12px 30px rgba(35,37,40,.25); }
.v8 .hero-link { color: var(--ink); border-bottom-color: var(--wine); }
.v8 .hero-link:hover { color: var(--wine); }
.v8 .hero-audience { color: var(--muted); }
.v8 .elegant-meta { color: var(--rose-deep); }
.v8 .elegant-image::after { background: linear-gradient(90deg, var(--blush) 0%, rgba(237,218,211,.85) 10%, rgba(237,218,211,0) 36%), linear-gradient(180deg, rgba(237,218,211,.5) 0%, rgba(237,218,211,0) 18%); }
.v8 .elegant-copy { padding-top: 140px; }
.v8 .hero :focus-visible { outline-color: var(--wine); }

/* ---------- Praxis: helle Fläche wie das Programmintro ---------- */
.v8 .dark-section { background: var(--blush-soft); color: var(--ink); }
.v8 .dark-section h2 { color: var(--ink); }
.v8 .dark-section .eyebrow, .v8 .step-number { color: var(--rose-deep); }
.v8 .practice-copy > p:not(.eyebrow), .v8 .learning-step-copy p, .v8 .practice-points p { color: var(--muted); }
.v8 .learning-step-copy h3 { color: var(--ink); }
.v8 .learning-image-note { color: var(--muted); }
.v8 .practice-points { border-top-color: rgba(35,37,40,.2); }
.v8 .practice-points strong { color: var(--wine); }
.v8 .dark-section :focus-visible { outline-color: var(--wine); }

/* ---------- Kursvergleich: Einleitung unter der Überschrift, drei gleiche Karten ---------- */
.v8 #investition .section-heading { grid-template-columns: 1fr; }
.v8 #investition .section-heading > p:not(.eyebrow) { grid-column: 1; max-width: 48em; margin-top: 18px; }
.v8 .course-card-complete { background: var(--white); border-color: var(--line); color: var(--ink); }
.v8 .course-card-complete .eyebrow { color: var(--rose-deep); }
.v8 .course-card-complete h3, .v8 .course-card-complete .course-price { color: var(--ink); }
.v8 .course-card-complete .course-facts li { color: var(--muted); border-color: var(--line); }
.v8 .course-card-complete .course-facts strong { color: var(--ink); }
.v8 .course-card-complete .course-price span, .v8 .course-card-complete .course-monthly, .v8 .course-card-complete .per-unit { color: var(--muted); }
.v8 .course-card-complete .model-base { background: var(--ink); border: 0; }
.v8 .course-card-complete .button { background: var(--wine); color: var(--white); }
.v8 .course-card-complete .button:hover { background: var(--ink); }

/* ---------- Infoabend: CI-Blush statt Bordeaux, Button in CI-Rosé ---------- */
.v8 .infoabend { background: var(--blush); color: var(--ink); }
.v8 .infoabend .eyebrow { color: var(--rose-deep); }
.v8 .infoabend h2 { color: var(--ink); }
.v8 .infoabend-copy > p:not(.eyebrow) { color: var(--muted); }
.v8 .infoabend-copy li { color: var(--ink); }
.v8 .infoabend-copy li::before { background: var(--wine); }
.v8 .alt-contact { border-top-color: rgba(35,37,40,.2); }
.v8 .alt-contact p { color: var(--muted); }
.v8 .alt-link { color: var(--wine); }
.v8 .alt-link:hover { color: var(--ink); }
.v8 .signup-card { box-shadow: 0 30px 60px -30px rgba(60,20,20,.35); }
.v8 .infoabend :focus-visible { outline-color: var(--wine); }
.v8 .form-submit, .v8 .reg-page .form-submit { background: var(--rose); color: var(--wine); }
.v8 .form-submit:hover { background: var(--wine); color: var(--white); }
.v8 .reg-page .reg-hero { background: var(--blush); color: var(--ink); }
.v8 .reg-page .reg-hero h1 { color: var(--ink); }
.v8 .reg-intro { color: var(--muted); }

@media (max-width: 900px) {
  .v8 .elegant-image::after { background: linear-gradient(180deg, var(--blush) 0%, rgba(237,218,211,0) 22%); }
  .v8 .elegant-copy { padding-top: 112px; }
}

/* Hero wächst mit dem Inhalt statt ihn zu beschneiden (Laptop-Höhen, längere Zielzeile) */
.v8 .elegant-hero-layout { height: auto; min-height: clamp(660px, 100svh, 980px); }
.v8 .elegant-copy { padding-bottom: 56px; }
.v8 .elegant-image { min-height: 100%; }

/* Flache Bildschirme (Laptop): Hero kompakter, damit der Anmelde-Button ohne Scrollen sichtbar bleibt */
@media (min-width: 901px) and (max-height: 960px) {
  .v8 .elegant-copy { padding-top: 112px; padding-bottom: 36px; }
  .v8 .hero-kicker { margin-bottom: 12px; }
  .v8 .hero-badge { margin: -4px 0 14px; }
  .v8 .elegant-copy h1 { margin-bottom: 18px; gap: .35em; }
  .v8 .elegant-copy h1 span:last-child { font-size: clamp(42px, 4.6vw, 72px); }
  .v8 .elegant-intro { font-size: 17px; margin-bottom: 16px; }
  .v8 .hero-goal { margin: 0 0 16px; padding: 10px 14px; font-size: 15px; }
  .v8 .hero-event { margin-bottom: 16px; }
  .v8 .hero-audience { margin-top: 14px; font-size: 13.5px; }
  .v8 .elegant-meta { padding-top: 14px; }
}

/* =====================================================================
   Design V9 · Rückmeldung Stefan vom 22.10.2026
   ===================================================================== */
/* Logo größer, ohne Slogan */
.v9 .elegant-brand img { width: 172px; }
.v9 .is-scrolled .elegant-brand img { width: 150px; }
.v9 .elegant-brand span { display: none; }
/* Hero-Texte größer */
.v9 .hero-kicker { font-size: clamp(13px, 1.1vw, 15px); letter-spacing: .22em; }
.v9 .elegant-copy h1 span:first-child { font-size: clamp(18px, 1.9vw, 27px); letter-spacing: .38em; }
.v9 .elegant-intro { font-size: clamp(18px, 1.5vw, 21px); }
.v9 .hero-goal { font-size: 16.5px; }
/* Klarheit: vier gleich hohe Karten */
.v9 .clarity-grid { align-items: stretch; }
@media (min-width: 901px) and (max-height: 960px) {
  .v9 .hero-kicker { font-size: 13px; }
  .v9 .elegant-copy h1 span:first-child { font-size: clamp(17px, 1.7vw, 24px); }
  .v9 .elegant-intro { font-size: 18px; }
  .v9 .hero-goal { font-size: 15.5px; }
}