/**
 * "Berater werden" page layer CSS (site/berater-werden/index.php, OEL-04,
 * 25.09.2026, chip of plan jbm-03-natuerliche-oele).
 *
 * Same convention home.css/shop.css already document at their own head:
 * every colour is a tokens.css variable, nothing hardcoded, both themes
 * inherit a fork's rebrand automatically. Loaded once via <link>, not
 * inlined. Reuses .btn/.wrap and the .ai-badge-media/.ai-badge pair from
 * tokens.css (site_ai_disclosure_badge(), DESIGN.md "KI-Kennzeichnung"),
 * adds only what this page needs on top: the hero, the role cards, the
 * media-variant picker (Joachim picks A or B per slot, see the page's own
 * inline comments), the steps list, the video placeholder tile and the
 * FAQ accordion.
 */

/* --- hero -------------------------------------------------------------- */
.berater-hero{background:linear-gradient(160deg,var(--bg-2),var(--bg));padding:48px 24px 56px}
.berater-hero-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:center;text-align:left}
@media (min-width:900px){.berater-hero-inner{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px}}
.berater-hero h1{font-size:clamp(2rem,5vw,3rem);letter-spacing:-.02em;line-height:1.1;margin:0 0 18px;color:var(--text)}
.berater-hero-sub{color:var(--text-2);font-size:1.08rem;line-height:1.6;margin:0 0 22px;max-width:680px}
.berater-hero-actions{display:flex;gap:14px;justify-content:flex-start;flex-wrap:wrap}

/* --- generic section shell, mirrors .home-section ---------------------- */
.berater-section{max-width:1180px;margin:0 auto;padding:56px 24px}
.berater-section-alt{background:var(--surface-2)}
.berater-section-head{max-width:680px;margin:0 0 32px}
.berater-section-head h2{font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.01em;line-height:1.2;margin:0 0 12px;color:var(--text)}
.berater-section-head p{color:var(--text-2);font-size:1rem;line-height:1.6;margin:0}

/* --- media-variant picker: two AI images stacked, each labelled, so
   Joachim can compare before choosing. Solid label chip (not a ghost
   overlay, web-design-quickstart.md hard rule 2), positioned clear of the
   .ai-badge in the opposite corner so the two never collide. Once a
   variant is picked, delete the unused <figure> and this component
   collapses to a single full-width image with no further CSS change
   needed. --- */
.berater-media-picker{display:grid;gap:16px;margin:0 0 32px}
.berater-media{margin:0;position:relative;border-radius:14px;overflow:hidden;background:var(--surface-2)}
.berater-media img{display:block;width:100%;height:auto;object-fit:cover}
.berater-media-picker-16x9 .berater-media img{aspect-ratio:16/9}
.berater-media-picker-4x3 .berater-media img{aspect-ratio:4/3}
.variant-label{
  position:absolute;top:8px;left:8px;z-index:1;
  background:var(--accent);color:var(--on-accent);
  font-size:.78rem;font-weight:700;letter-spacing:.02em;
  padding:5px 10px;border-radius:999px;line-height:1;
}

/* --- role cards (Einzelkunde / Vorteilskunde / Berater) ---------------- */
.berater-roles-grid{display:grid;gap:16px}
@media (min-width:834px){.berater-roles-grid{grid-template-columns:repeat(3,1fr)}}
.berater-role-card{background:var(--surface);border:1px solid var(--line-soft);border-radius:12px;padding:24px 22px;display:flex;flex-direction:column;gap:10px}
.berater-role-card-highlight{border-color:var(--accent);border-width:2px}
.berater-role-tag{font-weight:700;color:var(--text);font-size:1.02rem}
.berater-role-card p{color:var(--text-2);font-size:.95rem;line-height:1.6;margin:0}

/* --- "So begleiten wir dich" copy+media grid ---------------------------- */
/* No own max-width/margin/padding here: this div already lives inside
   .berater-section (max-width:1180px, margin:0 auto, padding:56px 24px,
   see the generic section shell above). A second, redundant declaration
   of the same three properties on this element nested it a second time,
   stacking an extra 24px of gutter on top of the section's own padding
   (48px instead of 24px on mobile, 74px instead of 50px at 1280px) --
   found in review, R1/design SHIP with this fix required. Same pattern
   as .berater-ablauf-grid just below, which never had this bug. */
.berater-begleitung-grid{display:grid;gap:32px;align-items:start}
@media (min-width:834px){.berater-begleitung-grid{grid-template-columns:1.1fr .9fr}}
.berater-begleitung-copy p{color:var(--text-2);font-size:1rem;line-height:1.7;margin:0 0 16px}
.berater-begleitung-copy p:last-child{margin-bottom:0}

/* --- placeholder box, clearly marked as not-final content --------------- */
.berater-placeholder-box{background:var(--surface);border:2px dashed var(--line);border-radius:12px;padding:22px 24px}
.berater-placeholder-box p{color:var(--text-2);font-size:.95rem;line-height:1.6;margin:0 0 8px}
.berater-placeholder-box p:last-child{margin-bottom:0}
.berater-placeholder-box strong{color:var(--text)}

/* --- ablauf: steps + media side by side --------------------------------- */
.berater-ablauf-grid{display:grid;gap:32px;align-items:start}
@media (min-width:834px){.berater-ablauf-grid{grid-template-columns:1.1fr .9fr}}
.berater-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px}
.berater-steps li{display:flex;gap:16px;align-items:flex-start}
.berater-step-num{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  background:var(--accent);color:var(--on-accent);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.95rem;
}
.berater-steps strong{display:block;color:var(--text);font-size:1rem;margin:0 0 4px}
.berater-steps p{color:var(--text-2);font-size:.92rem;line-height:1.55;margin:0}

/* --- video placeholder tile, no embed --------------------------------- */
.berater-video-slot{
  aspect-ratio:16/9;max-width:900px;margin:0 auto;border-radius:14px;
  background:linear-gradient(135deg,var(--panel-a),var(--panel-b));
  border:1px solid var(--line-soft);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  color:var(--text-2);font-size:1rem;font-weight:600;
}
.berater-video-slot-icon{
  width:56px;height:56px;border-radius:50%;background:var(--accent);color:var(--on-accent);
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;
}

/* --- FAQ accordion ------------------------------------------------------ */
.berater-faq-list{display:flex;flex-direction:column;gap:10px;max-width:820px}
.berater-faq-item{background:var(--surface);border:1px solid var(--line-soft);border-radius:10px;padding:4px 20px}
.berater-faq-item summary{
  cursor:pointer;padding:16px 0;font-weight:600;color:var(--text);font-size:1rem;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.berater-faq-item summary::-webkit-details-marker{display:none}
.berater-faq-item summary::after{content:'+';font-size:1.3rem;color:var(--accent-text,var(--accent));flex:0 0 auto}
.berater-faq-item[open] summary::after{content:'\2212'}
.berater-faq-item p{color:var(--text-2);font-size:.95rem;line-height:1.65;margin:0 0 18px}

/* --- closing CTA, mirrors .home-cta ------------------------------------- */
.berater-cta{background:var(--accent);color:var(--on-accent);text-align:center;padding:56px 24px}
.berater-cta h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:0 0 14px;letter-spacing:-.01em}
.berater-cta p{margin:0 auto 26px;opacity:.95;font-size:1.05rem;line-height:1.6;max-width:640px}
.berater-cta .btn-primary{background:var(--on-accent);color:var(--accent)}
.berater-cta .btn-primary:hover{filter:brightness(.96)}

/* --- OEQ-01 Teil D additions ---------------------------------------------
   Secondary hero action is a plain text link (no ghost button), the fit
   cards, the checklist, the fact tiles and the CTA row. Only tokens.css
   variables; longhand padding where a class shares an element with a
   padding-defining one (framework.md shorthand-clobber rule). */
.berater-textlink{align-self:center;color:var(--accent-text,var(--accent));font-weight:600;text-decoration:underline;text-underline-offset:3px;padding:12px 6px;min-height:44px;display:inline-flex;align-items:center}
.berater-hero-note{color:var(--text-2);font-size:.95rem;margin:16px 0 0}
.berater-fit-grid{display:grid;gap:16px}
@media (min-width:834px){.berater-fit-grid{grid-template-columns:1fr 1fr}}
.berater-fit-card{background:var(--surface);border:1px solid var(--line-soft);border-radius:12px;padding:24px 22px}
.berater-fit-card h3{margin:0 0 12px;font-size:1.05rem;color:var(--text)}
.berater-fit-card ul,.berater-checklist{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:8px}
.berater-fit-card li,.berater-checklist li{color:var(--text-2);font-size:.97rem;line-height:1.6}
.berater-checklist{margin-top:16px}
.berater-facts-grid{display:grid;gap:16px}
@media (min-width:640px){.berater-facts-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.berater-facts-grid{grid-template-columns:repeat(3,1fr)}}
.berater-fact{background:var(--surface);border:1px solid var(--line-soft);border-radius:12px;padding:20px 22px}
.berater-fact strong{display:block;color:var(--text);font-size:1rem;margin:0 0 6px}
.berater-fact p{color:var(--text-2);font-size:.93rem;line-height:1.6;margin:0}
.berater-cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.berater-cta .berater-cta-note{margin:18px auto 0;font-size:.95rem}

/* --- OELE-O1: decided single images and section note ------------------- */
.berater-media-single{margin:0 0 32px}
.berater-media-single img{aspect-ratio:4/3}
.berater-section-note{max-width:760px;margin:20px auto 0;padding:0 4px;color:var(--text-2);font-size:.95rem;line-height:1.6;text-align:center}
.berater-section-note a{color:var(--accent-text,var(--accent))}

/* --- Joachim meeting 05.11.2026: hero, orientation, anchor highlight ------ */
.berater-hero-free{display:flex;gap:.7rem;align-items:flex-start;margin:0 0 26px;padding:14px 16px;border-radius:12px;background:var(--accent-soft);color:var(--text-2);font-size:1rem;line-height:1.5;max-width:34rem}
.berater-hero-free svg{flex:none;width:1.5rem;height:1.5rem;color:var(--accent)}
.berater-hero-free strong{display:block;color:var(--text);font-size:1.05rem}
.berater-hero-visual{box-sizing:border-box;width:100%;min-height:200px;border-radius:16px;background:linear-gradient(150deg,var(--accent-soft),var(--panel-a) 55%,var(--panel-b))}
.berater-orient{scroll-margin-top:90px;border-radius:16px;transition:box-shadow .5s ease,background-color .5s ease}
.berater-orient.is-highlighted{box-shadow:0 0 0 3px var(--accent);background:var(--accent-soft)}
@media (min-width:900px){.berater-hero-visual{min-height:0;aspect-ratio:4/3}}
@media (prefers-reduced-motion:reduce){.berater-orient{transition:none}}
.berater-quiz{max-width:760px;padding:clamp(20px,3vw,32px);background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-1)}
.berater-quiz-progress{margin:0 0 10px;font-weight:700;color:var(--accent-text,var(--accent))}
.berater-quiz-bar{display:block;height:6px;margin:0 0 18px;border-radius:99px;background:var(--line-soft);overflow:hidden}
.berater-quiz-bar i{display:block;height:100%;background:var(--accent);transition:width .3s ease}
.berater-quiz fieldset{min-width:0;margin:0 0 14px;padding:0;border:0}
.berater-quiz legend,.berater-quiz h3{margin:0 0 14px;padding:0;font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.35;color:var(--text);font-weight:700}
.berater-quiz :is(legend,h3)[tabindex="-1"]:focus{outline:none}
.berater-quiz-choice{display:flex;gap:12px;align-items:flex-start;margin:10px 0;padding:14px 16px;border:1px solid var(--line-strong);border-radius:8px;line-height:1.5;color:var(--text);cursor:pointer}
.berater-quiz-choice:has(input:checked){border:2px solid var(--accent);padding:13px 15px;background:var(--accent-soft)}
.berater-quiz-choice input{width:1.25rem;height:1.25rem;flex:none;margin:.15rem 0 0;accent-color:var(--accent)}
.berater-quiz p{margin:0 0 12px;color:var(--text-2);line-height:1.6}
.berater-quiz-error{color:var(--error)!important;font-weight:600}
.berater-quiz-error:empty{display:none}
.berater-quiz-fine{font-size:.95rem}
.berater-quiz-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.berater-quiz .berater-quiz-soft{background:var(--btn-2-bg);color:var(--btn-2-text);border:1px solid var(--btn-2-line)}
.berater-quiz :is(button,input,a):focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media (max-width:600px){.berater-quiz-actions{display:grid;grid-template-columns:minmax(0,1fr)}}
.berater-fit-details{max-width:760px;margin:24px 0 0}
.berater-fit-details summary{cursor:pointer;font-weight:600;color:var(--accent-text,var(--accent));padding:10px 0;min-height:44px}
.berater-fit-details .berater-fit-grid{margin-top:12px}

/* --- Joachim meeting 05.11.2026, part 2: tips, photo slots, path, team ---- */
/* Grids: every row equal height, last row at least ~60 percent filled
   (4 cards in 2 columns, 6 cards in 3 or 2 columns, never 4 in 3). */
.berater-facts-grid{grid-auto-rows:1fr}
@media (min-width:1024px){.berater-facts-grid--two{grid-template-columns:repeat(2,1fr)}}
.berater-tips{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-auto-rows:1fr}
@media (min-width:640px){.berater-tips{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.berater-tips{grid-template-columns:repeat(3,1fr)}}
.berater-tip{display:flex;flex-direction:column;gap:8px;padding:22px 22px 24px;background:var(--surface);border:1px solid var(--line-soft);border-top:4px solid var(--accent);border-radius:12px;box-shadow:var(--shadow-1)}
.berater-tip-icon{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;background:var(--accent-soft);color:var(--accent-text,var(--accent));font-weight:700;font-size:.95rem}
.berater-tip h3{margin:0;font-size:1.08rem;color:var(--text)}
.berater-tip p{margin:0;color:var(--text-2);font-size:.97rem;line-height:1.6}

.berater-photo-slot{box-sizing:border-box;margin:0;min-height:240px;border-radius:16px;background:linear-gradient(150deg,var(--accent-soft),var(--panel-a) 55%,var(--panel-b))}
.berater-photo-slot--wide{min-height:180px;margin:0 0 24px}
.berater-ai-subtle{position:relative}
/* Very small, barely visible AI note at the bottom left (Olli 05.11.2026, memory "KI-Badge subtil"). */
.berater-ai-subtle .ai-badge{top:auto;right:auto;bottom:8px;left:8px;font-size:.8125rem;padding:2px 7px;opacity:.7}

.berater-path{margin:36px 0 0;padding:clamp(18px,3vw,30px);background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-1)}
.berater-path-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin:0 0 18px}
.berater-path-head h3{margin:0;font-size:1.2rem;color:var(--text)}
.berater-path-toggle{min-height:44px;padding:8px 16px;border:1px solid var(--btn-2-line);border-radius:8px;background:var(--btn-2-bg);color:var(--btn-2-text);font:inherit;font-weight:600;cursor:pointer}
.berater-path [data-path-step]{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:2px solid var(--line-soft);border-radius:10px;background:var(--surface);opacity:.55;transform:scale(.985);transition:opacity .4s ease,transform .4s ease,border-color .4s ease,background-color .4s ease;cursor:pointer}
.berater-path [data-path-step].is-active{opacity:1;transform:none;border-color:var(--accent);background:var(--accent-soft)}
.berater-path [data-path-step].is-done{opacity:.9}
.berater-path-num{flex:none;display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;background:var(--accent);color:var(--on-accent);font-weight:700}
.berater-path strong{display:block;color:var(--text)}
.berater-path p{margin:2px 0 0;color:var(--text-2);font-size:.95rem;line-height:1.5}
.berater-path-fork{display:flex;justify-content:center;height:34px}
.berater-path-fork span{position:relative;width:50%;height:100%;border:2px solid var(--line-strong);border-bottom:0;border-radius:14px 14px 0 0}
.berater-path-fork span::before{content:"";position:absolute;left:50%;top:-18px;height:18px;border-left:2px solid var(--line-strong)}
.berater-path-branches{display:grid;gap:16px}
@media (min-width:834px){.berater-path-branches{grid-template-columns:1fr 1fr}}
.berater-path-branch{padding:14px;border:1px dashed var(--line-strong);border-radius:12px}
.berater-path-branch--accent{border-style:solid;border-color:var(--accent)}
.berater-path-branch h4{margin:0 0 10px;font-size:1rem;color:var(--text)}
.berater-path-branch ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}
@media (prefers-reduced-motion:reduce){.berater-path [data-path-step]{transition:none;opacity:1;transform:none}}

.berater-team{display:grid;gap:24px;align-items:stretch}
@media (min-width:900px){.berater-team{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px}}
.berater-team-boxes{display:grid;gap:14px;align-content:start}
.berater-person{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-1);transition:border-color .2s ease}
.berater-person[open]{border-color:var(--accent);border-width:2px}
.berater-person summary{display:flex;flex-direction:column;gap:2px;padding:18px 48px 18px 20px;cursor:pointer;list-style:none;position:relative;min-height:44px}
.berater-person summary::-webkit-details-marker{display:none}
.berater-person summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:1.6rem;line-height:1;color:var(--accent)}
.berater-person[open] summary::after{content:"\2212"}
.berater-person-name{font-size:1.25rem;font-weight:700;color:var(--text)}
.berater-person-role{color:var(--text-2);font-size:.95rem}
.berater-person-body{padding:0 20px 20px}
.berater-person-body p{margin:0;color:var(--text-2);line-height:1.6}
.berater-person-body .berater-checklist{margin-top:0}
.berater-person-more{margin-top:12px!important;font-size:.95rem}
.berater-person-more a{color:var(--accent-text,var(--accent))}
.berater-person:focus-within{outline:none}
.berater-person summary:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;border-radius:10px}

/* --- /orientierungshilfe/ ---------------------------------------------- */
.orient-hero{padding:48px 24px 24px}
.orient-hero-inner,.orient-section{max-width:1000px;margin:0 auto}
.orient-eyebrow{display:inline-block;margin:0 0 .9rem;padding:.25rem .7rem;border-radius:999px;background:var(--accent-soft);color:var(--accent-text,var(--accent));font-size:.9rem;font-weight:600}
.orient-hero h1{margin:0 0 14px;font-size:clamp(1.9rem,4.5vw,2.8rem);line-height:1.15;letter-spacing:-.02em;color:var(--text)}
.orient-hero p{margin:0;max-width:44rem;font-size:1.1rem;line-height:1.6;color:var(--text-2)}
.orient-section{padding:24px 24px 32px}
.orient-section h2{margin:0 0 16px;font-size:1.4rem;color:var(--text)}
.orient-flow{list-style:none;margin:0;padding:0;display:grid;gap:14px}
@media (min-width:760px){.orient-flow{grid-template-columns:repeat(3,1fr)}}
.orient-flow li{display:flex;flex-direction:column;gap:6px;padding:18px;background:var(--surface);border:2px solid var(--line-soft);border-radius:12px;opacity:.55;transition:opacity .4s ease,border-color .4s ease,background-color .4s ease}
.orient-flow li.is-active{opacity:1;border-color:var(--accent);background:var(--accent-soft)}
.orient-flow strong{color:var(--text)}
.orient-flow p{margin:0;color:var(--text-2);font-size:.97rem;line-height:1.5}
@media (prefers-reduced-motion:reduce){.orient-flow li{transition:none;opacity:1}}
.orient-quiz-wrap .berater-quiz{max-width:none}
.berater-quiz-done{display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;margin:0 0 10px;border-radius:50%;background:var(--success-bg);color:var(--success)}
.berater-quiz-done svg{width:1.8rem;height:1.8rem}
.berater-quiz-next{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:10px;counter-reset:nx}
.berater-quiz-next li{counter-increment:nx;display:flex;gap:10px;align-items:flex-start;color:var(--text-2);line-height:1.5}
.berater-quiz-next li::before{content:counter(nx);flex:none;display:inline-flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--accent-soft);color:var(--accent-text,var(--accent));font-weight:700;font-size:.9rem}
.berater-quiz-sub{margin:0 0 8px!important;font-weight:700;color:var(--text)!important}
.orient-quiz-wrap>.berater-quiz-fine{margin:16px 0 0;color:var(--text-2);line-height:1.6}
.berater-quiz-actions+.berater-quiz-fine{margin-top:16px}

/* --- part 3: flow rail, A/B slot, FAQ, reusable CTA effects --------------- */
.berater-ablauf-left{display:flex;flex-direction:column;gap:24px}
.berater-steps--rail{position:relative;gap:14px}
.berater-steps--rail::before{content:"";position:absolute;left:19px;top:20px;bottom:20px;border-left:2px dashed var(--line-strong)}
.berater-steps--rail li{position:relative;padding:12px 14px;border:2px solid transparent;border-radius:12px;opacity:.6;transition:opacity .4s ease,border-color .4s ease,background-color .4s ease,transform .4s ease;cursor:pointer}
.berater-steps--rail li.is-active{opacity:1;border-color:var(--accent);background:var(--accent-soft);transform:none}
.berater-steps--rail li.is-done{opacity:.9}
.berater-steps--rail .berater-step-num{position:relative;z-index:1;transition:transform .4s ease}
.berater-steps--rail li.is-active .berater-step-num{transform:scale(1.15)}
.berater-ablauf-cta{margin:0}
@media (prefers-reduced-motion:reduce){.berater-steps--rail li{transition:none;opacity:1;transform:none!important}}
.berater-ab{position:relative}
.berater-ab-slot{min-height:320px;height:100%}
.berater-ab-switch{position:absolute;right:-14px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px;padding:6px;background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;box-shadow:var(--shadow-2)}
.berater-ab-switch button{width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--text);font:inherit;font-weight:700;cursor:pointer}
.berater-ab-switch button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
@media (max-width:833px){.berater-ab-switch{right:8px}}
.berater-faq-list{gap:12px}
.berater-faq-item{padding:0;overflow:hidden;border-left:4px solid var(--accent);transition:box-shadow .2s ease}
.berater-faq-item summary{display:flex;gap:14px;align-items:center;padding:16px 20px;background:var(--accent-soft);color:var(--text);font-weight:600;line-height:1.4}
.berater-faq-item summary>span:nth-child(2){flex:1}
.berater-faq-item[open]{box-shadow:var(--shadow-2)}
.berater-faq-item[open] summary{background:var(--accent);color:var(--on-accent)}
.berater-faq-item[open] summary::after{color:var(--on-accent)}
.berater-faq-q{flex:none;display:inline-flex;align-items:center;justify-content:center;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--surface);color:var(--accent-text,var(--accent));font-size:.9rem;font-weight:700}
.berater-faq-item p{padding:16px 20px 4px;margin:0 0 14px}
.berater-faq-item summary:focus-visible{outline:3px solid var(--text);outline-offset:-3px}

/* Reusable CTA band: .mv-cta + one effect modifier, wrap content in .mv-cta-inner.
   Variants: --aurora (drifting light), --pulse (ring around the button),
   --shine (light sweep over the band), --float (rising dots). Tokens only,
   all motion off under prefers-reduced-motion. Needs a .btn inside. */
.mv-cta{position:relative;overflow:hidden;isolation:isolate}
.mv-cta-inner{position:relative;z-index:1;max-width:720px;margin:0 auto}
.mv-cta h2{line-height:1.2}
.mv-cta p{line-height:1.6}
.mv-cta::before,.mv-cta::after{content:"";position:absolute;pointer-events:none;z-index:0}
.mv-cta--aurora::before{inset:-40%;background:radial-gradient(circle at 30% 40%,rgba(255,255,255,.22),transparent 40%),radial-gradient(circle at 70% 60%,rgba(255,255,255,.16),transparent 45%);animation:mv-aurora 14s ease-in-out infinite alternate}
@keyframes mv-aurora{to{transform:translate(8%,-6%) rotate(8deg) scale(1.1)}}
.mv-cta--pulse .btn{position:relative}
.mv-cta--pulse .btn::after{content:"";position:absolute;inset:-4px;border-radius:inherit;border:2px solid var(--on-accent);opacity:0;animation:mv-pulse 2.4s ease-out infinite}
@keyframes mv-pulse{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.18)}}
.mv-cta--shine::before{top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);animation:mv-shine 5s ease-in-out infinite}
@keyframes mv-shine{0%,60%{left:-40%}100%{left:130%}}
.mv-cta--float::before{left:0;right:0;bottom:-20px;height:120px;background:radial-gradient(circle,rgba(255,255,255,.35) 0 3px,transparent 4px) 0 0/60px 60px,radial-gradient(circle,rgba(255,255,255,.25) 0 2px,transparent 3px) 30px 30px/80px 80px;animation:mv-float 9s linear infinite;opacity:.8}
@keyframes mv-float{to{transform:translateY(-140px);opacity:0}}
@media (prefers-reduced-motion:reduce){.mv-cta::before,.mv-cta .btn::after{animation:none}}

.berater-media picture{display:block}
.berater-media-wide{margin:0 0 24px}
.berater-media-wide img{aspect-ratio:21/9;object-fit:cover;width:100%;height:auto}
.berater-ab-fig[hidden]{display:none}
.berater-ab-fig{margin:0;height:100%}
.berater-ab-fig img{height:100%;min-height:320px;aspect-ratio:auto;object-fit:cover}

/* --- Nachtrag 5: warmer, less white ----------------------------------- */
.berater-expect{background:linear-gradient(180deg,var(--accent-soft),transparent 70%);border-radius:16px}
.berater-expect .berater-fact{background:var(--accent-soft);border-color:rgba(47,109,133,.25);box-shadow:var(--shadow-1);opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.berater-expect.is-in .berater-fact{opacity:1;transform:none}
.berater-expect.is-in .berater-fact:nth-child(2){transition-delay:.12s}
.berater-expect.is-in .berater-fact:nth-child(3){transition-delay:.24s}
.berater-expect.is-in .berater-fact:nth-child(4){transition-delay:.36s}
.berater-expect .berater-fact strong{font-size:1.08rem}
@media (prefers-reduced-motion:reduce){.berater-expect .berater-fact{opacity:1;transform:none;transition:none}}
html:not(.js-reveal) .berater-expect .berater-fact{opacity:1;transform:none}
.berater-quiz{background:linear-gradient(160deg,var(--accent-soft),var(--surface-2));border:2px solid var(--accent);box-shadow:var(--shadow-3)}
.berater-fit-details{max-width:none;background:var(--accent-soft);border-radius:12px;padding:4px 18px}
.berater-fit-details summary{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;padding:12px 0}
.berater-fit-details summary::-webkit-details-marker{display:none}
.berater-fit-details summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--accent)}
.berater-fit-details[open] summary::after{content:"\2212"}
.berater-fit-details[open]{background:var(--accent-soft);box-shadow:var(--shadow-1)}
.berater-fit-details .berater-fit-grid{padding:4px 0 18px}
.berater-fit-details .berater-fit-card{background:var(--surface)}
/* path: more room, colour, clearer hint */
.berater-path{background:linear-gradient(170deg,var(--accent-soft),var(--surface) 60%)}
.berater-path-hint{margin:0 0 18px;color:var(--text-2);line-height:1.6;max-width:46rem}
.berater-path-start{margin-bottom:0}
.berater-path-fork{height:56px;margin-top:6px}
.berater-path-fork span::before{top:-24px;height:24px}
.berater-path [data-path-step].is-active{transform:none}
.berater-path-branch{background:var(--surface-2)}
.berater-path-branch--accent{background:var(--accent-soft)}
.berater-path-branch h4{display:inline-block;padding:4px 12px;border-radius:999px;background:var(--accent-2);color:var(--on-accent)}
.berater-path-branch--accent h4{background:var(--accent)}
.berater-path-branch:not(.berater-path-branch--accent) .berater-path-num{background:var(--accent-2)}
.berater-path-branch:not(.berater-path-branch--accent) [data-path-step].is-active{border-color:var(--accent-2)}
/* rail: numbers centred on the line, line hidden behind a ring */
.berater-steps--rail::before{left:29px}
.berater-steps--rail .berater-step-num{box-shadow:0 0 0 5px var(--surface-2)}
.berater-steps--rail li.is-active .berater-step-num{box-shadow:0 0 0 5px var(--accent-soft)}
.berater-person{background:var(--accent-soft);border-color:rgba(47,109,133,.3)}
.berater-person[open]{background:var(--accent-soft)}
.berater-person:not([open]):hover{border-color:var(--accent)}

.berater-tip p{text-wrap:balance}

.berater-hero-visual{margin:0;overflow:hidden;background:var(--panel-a)}
.berater-hero-visual img{display:block;width:100%;height:100%;object-fit:cover}
.berater-hero-visual{aspect-ratio:auto;min-height:0}
.berater-hero-visual img{height:auto;aspect-ratio:4/3}

.berater-hero-disclaimer{margin:0 0 20px;max-width:34rem;color:var(--text-2);font-size:.97rem;line-height:1.5}

/* --- Audit Paket D (05.11.2026) ------------------------------------------
   No opacity dimming on text: inactive steps keep full text colour (>= 4.5:1),
   state is shown by border, background and a check mark on done steps. */
.berater-path [data-path-step],.berater-steps--rail li,.orient-flow li{opacity:1;transform:none}
.berater-path [data-path-step]{border-color:var(--line);background:var(--surface)}
.berater-path [data-path-step].is-active,.berater-steps--rail li.is-active,.orient-flow li.is-active{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px rgba(47,109,133,.18)}
.berater-path [data-path-step].is-done,.berater-steps--rail li.is-done,.orient-flow li.is-done{border-color:var(--success);background:var(--success-bg)}
.berater-path [data-path-step]:not(.is-active):not(.is-done) .berater-path-num,.berater-steps--rail li:not(.is-active):not(.is-done) .berater-step-num{background:var(--surface);color:var(--accent-text,var(--accent));box-shadow:inset 0 0 0 2px var(--accent)}
.berater-path-branch:not(.berater-path-branch--accent) [data-path-step]:not(.is-active):not(.is-done) .berater-path-num{color:var(--accent-2);box-shadow:inset 0 0 0 2px var(--accent-2)}
.berater-path [data-path-step].is-done .berater-path-num,.berater-steps--rail li.is-done .berater-step-num{background:var(--success);color:var(--on-accent);font-size:0}
.berater-path [data-path-step].is-done .berater-path-num::after,.berater-steps--rail li.is-done .berater-step-num::after{content:"\2713";font-size:1.05rem;font-weight:700}
.orient-flow li.is-done strong::before{content:"\2713\00a0";color:var(--success)}
.berater-steps--rail .berater-step-num{box-shadow:0 0 0 5px var(--surface-2)}
.berater-steps--rail li:not(.is-active):not(.is-done) .berater-step-num{box-shadow:inset 0 0 0 2px var(--accent),0 0 0 5px var(--surface-2)}
.berater-steps--rail li.is-done .berater-step-num{box-shadow:0 0 0 5px var(--surface-2)}
.berater-steps--rail li.is-active .berater-step-num{box-shadow:0 0 0 5px var(--accent-soft)}
.berater-steps--rail li.is-done .berater-step-num{box-shadow:0 0 0 5px var(--surface-2)}
/* quiz + aside use the full grid */
.berater-orient-grid{display:grid;gap:24px;align-items:start}
@media (min-width:960px){.berater-orient-grid{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:40px}}
.berater-orient .berater-quiz{max-width:none}
.berater-orient-aside{padding:22px;border-radius:14px;background:var(--accent-soft);color:var(--text-2);line-height:1.6}
.berater-orient-aside strong{display:block;margin:0 0 8px;color:var(--text);font-size:1.1rem}
.berater-orient-aside p{margin:0 0 10px}
.berater-fit-details{margin-top:24px}
/* FAQ: no side stripe or numbers, chevron, full width */
.berater-faq-list{max-width:none}
.berater-faq-item{border-left:1px solid var(--line-soft)}
.berater-faq-item summary::after{content:"";width:.6rem;height:.6rem;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);margin:0 .3rem .25rem 0;font-size:0}
.berater-faq-item[open] summary::after{content:"";border-color:var(--on-accent);transform:rotate(225deg);margin:.25rem .3rem 0 0}
/* tips: icon instead of number, no top stripe */
.berater-tip{border-top:1px solid var(--line-soft)}
.berater-tip-icon svg{width:1.15rem;height:1.15rem}
.berater-tip-icon{width:2.2rem;height:2.2rem}
/* photo slot monogram */
.berater-photo-slot--mono{display:flex;align-items:center;justify-content:center}
.berater-photo-slot--mono span{font-size:clamp(2.5rem,6vw,4rem);font-weight:700;letter-spacing:.04em;color:var(--accent);opacity:.35}
/* typography */
.berater-hero h1,.berater-section-head h2,.berater-cta h2,.orient-hero h1{text-wrap:balance}
.berater-section p,.berater-hero p,.orient-hero p,.orient-flow p,.berater-cta p{text-wrap:pretty}
.berater-section-note{text-align:left;margin-left:0}
/* path spacing */
.berater-path-hint{margin-bottom:26px}
.berater-path-fork{margin:10px 0 8px}
.berater-path-branches{margin-top:4px}
/* orientation page grid and pill */
.orient-hero-inner,.orient-section{max-width:1180px}
.orient-hero .orient-eyebrow{display:block;width:fit-content;max-width:none;margin:0 0 1rem;font-size:.9rem;line-height:1.4}
.orient-hero{padding-top:56px}