/* =============================================================================
   fo-base.css — Fahrschule Okan
   Standalone-Layer: funktioniert ohne GHL, ohne .inner-Wrapper.
   Alle GHL-spezifischen Overrides liegen in fo-ghl.css, nicht hier.
   ============================================================================= */

/* ============================= Tokens ============================= */
:root {
  /* Farbsystem — vier Rollen, siehe Design-Brief §3 */
  --fo-stage: #FFFFFF;
  --fo-stage-2: #F3F6F6;
  --fo-voice: #0B0F10;
  --fo-move: #4DB5B5;        /* nur Flächen/Linien, nie Fliesstext auf Weiss */
  --fo-move-dark: #1F7A7A;   /* Türkis als Text auf Weiss */
  --fo-move-light: #DDF1F1;  /* Chips, Hover, sanfte Flächen */
  --fo-grey: #5B6467;
  --fo-white: #FFFFFF;
  --fo-line: #E4EAEA;

  --fo-font-accent: 'Exo 2', sans-serif;
  --fo-font-heading: 'Manrope', system-ui, sans-serif;
  --fo-font-body: 'Manrope', system-ui, sans-serif;

  --fo-container: 1280px;
  --fo-section-pad: clamp(4rem, 3rem + 4vw, 8rem);
  --fo-section-pad-sm: clamp(2.5rem, 2rem + 2vw, 4.5rem);
  --fo-gap-lg: clamp(2rem, 1.2rem + 3.5vw, 4.5rem);
  --fo-gap-md: clamp(1.25rem, 1rem + 1vw, 2rem);

  --fo-radius-sm: 6px;
  --fo-radius-md: 14px;
  --fo-radius-pill: 999px;

  --fo-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fo-dur: 240ms;

  /* Fluid Type-Skala */
  --fo-h1: clamp(2.6rem, 1.85rem + 3.3vw, 5.5rem);
  --fo-h2: clamp(2rem, 1.6rem + 1.8vw, 3.1rem);
  --fo-h3: clamp(1.4rem, 1.25rem + 0.7vw, 1.85rem);
  --fo-lead: clamp(1.05rem, 1rem + 0.35vw, 1.3rem);
  --fo-body: clamp(1rem, 0.96rem + 0.15vw, 1.09rem);
  --fo-small: clamp(0.85rem, 0.83rem + 0.1vw, 0.92rem);
  --fo-ghost: clamp(5rem, 3.5rem + 7vw, 10rem);
}

/* ============================= Reset ============================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body {
  font-family: var(--fo-font-body);
  font-size: var(--fo-body);
  color: var(--fo-voice);
  background: var(--fo-stage);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { background: none; border: none; cursor: pointer; }

h1, h2, h3, h4 { font-family: var(--fo-font-heading); font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; color: var(--fo-voice); }
/* Deutsche Komposita (z.B. "Datenschutzerklärung") können auf schmalen Viewports
   breiter als der Container sein — ohne Fallback läuft der Text über den Rand
   hinaus, statt zu umbrechen. */
h1, h2, h3, h4, p, span, a, div { overflow-wrap: break-word; }

:focus-visible { outline: 2px solid var(--fo-move-dark); outline-offset: 3px; border-radius: 3px; }
:focus:not(:focus-visible) { outline: none; }

.fo-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.fo-skip-link {
  position: absolute; top: -100%; left: 1rem; z-index: 999;
  background: var(--fo-voice); color: var(--fo-white); padding: 0.75em 1.25em;
  border-radius: var(--fo-radius-sm); transition: top var(--fo-dur) var(--fo-ease);
}
.fo-skip-link:focus { top: 1rem; }

/* ============================= Layout ============================= */
.fo-container {
  width: 100%;
  max-width: var(--fo-container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 1rem + 3vw, 3rem);
}

.c-section { position: relative; }
.c-row { position: relative; }
.c-column { position: relative; min-width: 0; }

/* ============================= Typography-Bausteine ============================= */
.fo-eyebrow {
  display: inline-block;
  font-family: var(--fo-font-accent);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--fo-small);
  color: var(--fo-move-dark);
  margin-bottom: 0.9em;
}
.fo-eyebrow--onmove { color: var(--fo-voice); }
.fo-eyebrow--onvoice { color: var(--fo-move); }

.fo-h1 { font-size: var(--fo-h1); }
.fo-h2 { font-size: var(--fo-h2); margin-bottom: 0.5em; }
.fo-h3 { font-size: var(--fo-h3); margin-bottom: 0.4em; }

.fo-lead { font-size: var(--fo-lead); color: var(--fo-grey); line-height: 1.55; }
.fo-lead--onmove, .fo-lead--onvoice { color: inherit; opacity: 0.85; }

p.c-paragraph, .fo-text { font-size: var(--fo-body); color: var(--fo-grey); line-height: 1.7; }
.fo-text + .fo-text { margin-top: 1em; }
/* c-element-Wrapper stapeln oft mehrere Absätze (jeder Absatz eigener c-element-Block,
   daher kein direktes Geschwister-Verhältnis zwischen den <p>) — Sicherheitsnetz hier. */
.c-element.c-paragraph + .c-element.c-paragraph { margin-top: 1em; }

.fo-ghost {
  font-family: var(--fo-font-accent);
  font-weight: 700;
  font-style: italic;
  font-size: var(--fo-ghost);
  line-height: 0.85;
  color: var(--fo-stage-2);
  -webkit-text-stroke: 1px #E7EDED;
  user-select: none;
}

.fo-placeholder-text { color: inherit; opacity: 0.55; }

/* ============================= Buttons ============================= */
.fo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  height: 3.25em; padding-inline: 1.6em;
  font-family: var(--fo-font-body); font-weight: 500; font-size: var(--fo-body);
  border-radius: var(--fo-radius-pill);
  transition: background var(--fo-dur) var(--fo-ease), color var(--fo-dur) var(--fo-ease), transform var(--fo-dur) var(--fo-ease), box-shadow var(--fo-dur) var(--fo-ease);
  white-space: nowrap;
  cursor: pointer;
  border: 1.5px solid transparent;
}
.fo-btn--primary { background: var(--fo-voice); color: var(--fo-white); }
.fo-btn--primary:hover { background: var(--fo-move); color: var(--fo-voice); transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(11,15,16,0.35); }
.fo-btn--secondary { background: transparent; color: var(--fo-voice); border-color: var(--fo-voice); }
.fo-btn--secondary:hover { background: var(--fo-voice); color: var(--fo-white); transform: translateY(-2px); }
.fo-btn--whatsapp { background: var(--fo-voice); color: var(--fo-white); }
.fo-btn--whatsapp:hover { background: var(--fo-move); color: var(--fo-voice); transform: translateY(-2px); }
.fo-btn__icon { width: 1.15em; height: 1.15em; flex-shrink: 0; }
.fo-btn:active { transform: translateY(0); }

/* ============================= Header / Nav ============================= */
.fo-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--fo-line);
}
.fo-header .fo-container { display: flex; align-items: center; justify-content: space-between; height: clamp(4.25rem, 4rem + 1vw, 5rem); }
.fo-brand {
  font-family: var(--fo-font-accent); font-weight: 700; font-style: italic;
  text-transform: uppercase; letter-spacing: 0.03em;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
  color: var(--fo-voice);
}
.fo-brand span { color: var(--fo-move-dark); }
.fo-nav { display: flex; align-items: center; gap: clamp(1.25rem, 1rem + 1vw, 2.5rem); }
.fo-nav__links { display: flex; align-items: center; gap: clamp(1rem, 0.8rem + 1vw, 2rem); }
.fo-nav__links a {
  font-size: var(--fo-small); font-weight: 500; color: var(--fo-voice);
  position: relative; padding-block: 0.3em;
}
.fo-nav__links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--fo-move-dark); transition: right var(--fo-dur) var(--fo-ease);
}
.fo-nav__links a:hover::after { right: 0; }
/* CTA-Button in der Nav ist ein `a.fo-btn`, `.fo-nav__links a` (0,1,1) würde sonst
   die Button-Textfarbe (0,1,0) schlagen -> schwarzer Text auf schwarzem Button. */
.fo-nav__links a.fo-btn { color: var(--fo-white); padding-block: 0; }
.fo-nav__links a.fo-btn::after { display: none; }
.fo-nav__links a.fo-btn:hover { color: var(--fo-voice); }
.fo-nav__toggle { display: none; width: 2.75em; height: 2.75em; align-items: center; justify-content: center; }
.fo-burger { position: relative; width: 22px; height: 16px; }
.fo-burger span { position: absolute; left: 0; width: 100%; height: 2px; background: var(--fo-voice); transition: transform var(--fo-dur) var(--fo-ease), opacity var(--fo-dur) var(--fo-ease); }
.fo-burger span:nth-child(1) { top: 0; }
.fo-burger span:nth-child(2) { top: 7px; }
.fo-burger span:nth-child(3) { top: 14px; }
.fo-header.is-nav-open .fo-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.fo-header.is-nav-open .fo-burger span:nth-child(2) { opacity: 0; }
.fo-header.is-nav-open .fo-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .fo-nav__links { position: fixed; top: clamp(4.25rem, 4rem + 1vw, 5rem); left: 0; right: 0;
    background: var(--fo-white); flex-direction: column; align-items: flex-start;
    padding: 1.5rem clamp(1.25rem, 1rem + 3vw, 3rem) 2rem; gap: 1.1rem;
    border-bottom: 1px solid var(--fo-line);
    transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--fo-dur) var(--fo-ease), transform var(--fo-dur) var(--fo-ease), visibility var(--fo-dur);
  }
  .fo-header.is-nav-open .fo-nav__links { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
  .fo-nav__cta { display: none; }
  .fo-nav__toggle { display: inline-flex; }
}

/* ============================= Reveal (JS-Hook) ============================= */
.fo-reveal { opacity: 0; transform: translateY(12px); transition: opacity 500ms ease-out, transform 500ms ease-out; }
.fo-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .fo-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================= Speed-Band Motiv ============================= */
.fo-speedband {
  position: absolute; inset: 0; overflow: visible; pointer-events: none; z-index: 0;
}
.fo-speedband__panel {
  position: absolute; background: var(--fo-move); transform: skewX(-12deg);
}
.fo-speedband__line {
  position: absolute; background: var(--fo-white); transform: skewX(-12deg);
}

/* ============================= S01 — Hero ============================= */
.fo-hero { padding-block: var(--fo-section-pad); background: var(--fo-stage); }
.fo-hero__grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--fo-gap-lg); align-items: center;
}
.fo-hero__text { max-width: 34rem; }
.fo-hero h1 { margin-bottom: 0.45em; }
.fo-hero__subline { margin-bottom: 1.75em; }
.fo-hero__ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 1.75rem; }
.fo-hero__trust {
  font-size: var(--fo-small); color: var(--fo-grey);
  display: flex; flex-wrap: wrap; gap: 0.5em 0.7em; align-items: center;
}
.fo-hero__trust .fo-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--fo-grey); opacity: 0.5; }

.fo-hero__media { position: relative; aspect-ratio: 1/0.98; display: flex; align-items: flex-end; justify-content: center; }
.fo-hero__media::before {
  content: ''; position: absolute; left: 2%; right: -8%; bottom: 14%; height: 34%;
  background: var(--fo-move); transform: skewX(-12deg); z-index: 0;
  border-radius: 4px;
}
.fo-hero__media::after {
  content: ''; position: absolute; bottom: 14%; height: 34%; left: 62%;
  width: 5px; background: var(--fo-white); transform: skewX(-12deg); z-index: 1;
}
.fo-hero__car { position: relative; z-index: 2; width: 108%; max-width: none; margin-left: -4%; margin-bottom: 6%; }
.fo-hero__car img { width: 100%; height: auto; filter: drop-shadow(0 24px 34px rgba(11,15,16,0.3)); }
.fo-hero__placeholder-note { display: none; }

@media (max-width: 991px) {
  .fo-hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .fo-hero__media { order: -1; aspect-ratio: 1/0.85; max-width: 30rem; margin-inline: auto; }
  .fo-hero__text { max-width: none; }
}
@media (max-width: 480px) {
  .fo-hero__media { aspect-ratio: 1/0.95; }
}

/* ============================= S02 — Editorial (Erste Lektion) ============================= */
.fo-editorial { padding-block: var(--fo-section-pad); background: var(--fo-stage); }
.fo-editorial__grid { display: grid; grid-template-columns: 0.55fr 1.45fr; gap: var(--fo-gap-lg); align-items: start; }
.fo-editorial__num { line-height: 0.8; }
.fo-editorial__body { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--fo-gap-md); }
.fo-editorial__body .fo-text { grid-column: span 1; }
.fo-editorial__quote {
  grid-column: 1 / -1; margin-top: 1.75em; padding-left: 1.25em; border-left: 3px solid var(--fo-move);
  font-family: var(--fo-font-accent); font-style: italic; font-weight: 700;
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.5rem); color: var(--fo-voice); line-height: 1.4;
}
.fo-editorial__quote cite { display: block; margin-top: 0.6em; font-family: var(--fo-font-body); font-style: normal; font-weight: 500; font-size: var(--fo-small); color: var(--fo-grey); }

@media (max-width: 860px) {
  .fo-editorial__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .fo-editorial__num { font-size: clamp(4rem, 20vw, 6rem); }
  .fo-editorial__body { grid-template-columns: 1fr; }
}

/* ============================= S03 — Listen-Reihen (So unterrichte ich) ============================= */
.fo-listrows { padding-block: var(--fo-section-pad); background: var(--fo-stage-2); }
.fo-listrows__head { max-width: 34rem; margin-bottom: clamp(2rem, 1.6rem + 2vw, 3.5rem); }
.fo-listrows__list { display: flex; flex-direction: column; }
.fo-row {
  display: grid; grid-template-columns: 0.32fr 0.68fr; gap: var(--fo-gap-md);
  padding-block: clamp(1.75rem, 1.5rem + 1.2vw, 2.75rem);
  border-top: 1px solid var(--fo-line);
  position: relative; padding-left: 1.5rem;
}
.fo-row::before { content: ''; position: absolute; left: 0; top: clamp(1.75rem, 1.5rem + 1.2vw, 2.75rem); bottom: clamp(1.75rem, 1.5rem + 1.2vw, 2.75rem); width: 4px; background: var(--fo-move); }
.fo-row:last-child { border-bottom: 1px solid var(--fo-line); }
.fo-row__title { font-size: var(--fo-h3); margin-bottom: 0; }
.fo-row__body p { margin-bottom: 0.5em; }
.fo-row__body p:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  .fo-row { grid-template-columns: 1fr; gap: 0.6rem; }
}

/* ============================= S04 — Pricing Vollband ============================= */
.fo-pricing {
  position: relative; background: var(--fo-move); color: var(--fo-voice);
  padding-block: calc(var(--fo-section-pad) + 3rem);
  clip-path: polygon(0 3.25rem, 100% 0, 100% calc(100% - 3.25rem), 0 100%);
  margin-block: -1px;
}
.fo-pricing__head { max-width: 38rem; margin-bottom: clamp(2rem, 1.6rem + 2vw, 3rem); }
.fo-pricing__table { width: 100%; border-collapse: collapse; margin-bottom: clamp(1.75rem, 1.5rem + 1vw, 2.5rem); }
.fo-pricing__table th { text-align: left; font-family: var(--fo-font-accent); font-weight: 700; font-style: italic; text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--fo-small); padding-block: 0.9em; border-bottom: 2px solid var(--fo-white); }
.fo-pricing__table td { padding-block: 1em; border-bottom: 1px solid rgba(255,255,255,0.55); font-size: var(--fo-body); }
.fo-pricing__table td:last-child, .fo-pricing__table th:last-child { text-align: right; font-weight: 700; }
.fo-pricing__note {
  background: rgba(255,255,255,0.35); border-radius: var(--fo-radius-md);
  padding: clamp(1.25rem, 1.1rem + 0.8vw, 1.9rem);
  font-size: var(--fo-body); line-height: 1.65; margin-bottom: clamp(1.5rem,1.3rem + 1vw, 2.25rem);
}
.fo-pricing__note strong { display: block; margin-bottom: 0.35em; font-family: var(--fo-font-heading); font-weight: 800; }
.fo-pricing__terms { font-size: var(--fo-small); line-height: 1.7; margin-bottom: clamp(1.75rem, 1.5rem + 1vw, 2.5rem); max-width: 42rem; }
.fo-pricing .fo-btn--primary { background: var(--fo-voice); color: var(--fo-white); }
.fo-pricing .fo-btn--primary:hover { background: var(--fo-white); color: var(--fo-voice); }

@media (max-width: 640px) {
  .fo-pricing__table { font-size: 0.9em; }
  .fo-pricing__table th, .fo-pricing__table td { padding-block: 0.7em; }
}

/* ============================= S05 — Chip-Grid (Für wen) ============================= */
.fo-chips { padding-block: var(--fo-section-pad); background: var(--fo-stage); }
.fo-chips__head { max-width: 32rem; margin-bottom: clamp(2rem, 1.6rem + 2vw, 3rem); }
.fo-chip-grid { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.fo-chip {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.85em 1.4em; border-radius: var(--fo-radius-pill);
  background: var(--fo-move-light); color: var(--fo-voice);
  font-size: var(--fo-body); font-weight: 500;
  transition: background var(--fo-dur) var(--fo-ease), transform var(--fo-dur) var(--fo-ease);
}
.fo-chip:hover { background: var(--fo-move); transform: translateY(-2px); }
.fo-chip__tag {
  font-family: var(--fo-font-accent); font-weight: 700; font-style: italic; font-size: 0.72em;
  text-transform: uppercase; letter-spacing: 0.05em; background: var(--fo-voice); color: var(--fo-white);
  padding: 0.3em 0.6em; border-radius: var(--fo-radius-pill);
}

/* ============================= S06 — Timeline (Ablauf) ============================= */
.fo-timeline { padding-block: var(--fo-section-pad); background: var(--fo-stage-2); }
.fo-timeline__head { max-width: 32rem; margin-bottom: clamp(2.5rem, 2rem + 2.5vw, 4rem); }
.fo-timeline__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 0.8rem + 1vw, 2rem); position: relative; }
.fo-timeline__row::before {
  content: ''; position: absolute; top: calc(var(--fo-ghost-h, 3.4rem)); left: 0; right: 0; height: 1px; background: var(--fo-line); z-index: 0;
}
.fo-step { position: relative; z-index: 1; }
.fo-step__num {
  font-family: var(--fo-font-accent); font-weight: 700; font-style: italic;
  font-size: clamp(2.5rem, 2rem + 2vw, 3.6rem); color: var(--fo-move-dark); line-height: 1; margin-bottom: 0.5em;
}
.fo-step__title { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.4em; font-family: var(--fo-font-heading); }
.fo-step p { font-size: var(--fo-small); color: var(--fo-grey); line-height: 1.6; }

@media (max-width: 860px) {
  .fo-timeline__row { grid-template-columns: 1fr; gap: 1.75rem; }
  .fo-timeline__row::before { display: none; }
  .fo-step { padding-left: 1.5rem; border-left: 2px solid var(--fo-move); }
}

/* ============================= S07 — Über Okan Teaser ============================= */
.fo-about-teaser { padding-block: var(--fo-section-pad); background: var(--fo-stage); }
.fo-about-teaser__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--fo-gap-lg); align-items: center; }
.fo-photo-placeholder {
  position: relative; aspect-ratio: 4/5; border-radius: var(--fo-radius-md); overflow: hidden;
  background: linear-gradient(155deg, var(--fo-move) 0%, var(--fo-move-dark) 100%);
}
.fo-photo-placeholder::before {
  content: ''; position: absolute; top: -10%; bottom: -10%; left: 42%; width: 3px;
  background: rgba(255,255,255,0.75); transform: skewX(-12deg);
}
.fo-about-teaser__quote {
  font-family: var(--fo-font-accent); font-style: italic; font-weight: 700;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem); line-height: 1.35; margin-bottom: 0.9em;
}
.fo-about-teaser__link { display: inline-flex; align-items: center; gap: 0.4em; color: var(--fo-move-dark); font-weight: 700; margin-top: 0.5em; }
.fo-about-teaser__link:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .fo-about-teaser__grid { grid-template-columns: 1fr; gap: 2rem; }
  .fo-photo-placeholder { max-width: 22rem; margin-inline: auto; }
}

/* ============================= S08 — VKU Formular-Panel ============================= */
.fo-vku { padding-block: var(--fo-section-pad); background: var(--fo-stage); }
.fo-vku__panel {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1.5px solid var(--fo-move); border-radius: var(--fo-radius-md); overflow: hidden;
}
.fo-vku__info { padding: clamp(2rem, 1.6rem + 2vw, 3.25rem); background: var(--fo-move-light); }
.fo-vku__info dl { margin-top: 1.25em; display: grid; gap: 0.75em; }
.fo-vku__info dt { font-size: var(--fo-small); color: var(--fo-grey); }
.fo-vku__info dd { font-weight: 700; font-size: 1.05em; }
.fo-vku__form { padding: clamp(2rem, 1.6rem + 2vw, 3.25rem); }

@media (max-width: 860px) {
  .fo-vku__panel { grid-template-columns: 1fr; }
}

/* ============================= S09 — Schaffhausen ============================= */
.fo-schaffhausen { padding-block: clamp(2rem, 1.6rem + 1.5vw, 3rem); background: var(--fo-stage-2); }
.fo-schaffhausen__row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.fo-schaffhausen p { font-size: var(--fo-small); color: var(--fo-grey); max-width: 42rem; }
.fo-schaffhausen__badge {
  font-family: var(--fo-font-accent); font-style: italic; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; font-size: var(--fo-small); color: var(--fo-move-dark);
  border: 1px solid var(--fo-move-dark); border-radius: var(--fo-radius-pill); padding: 0.5em 1em; white-space: nowrap;
}

/* ============================= S10 — FAQ Accordion ============================= */
.fo-faq { padding-block: var(--fo-section-pad); background: var(--fo-stage); }
.fo-faq__inner { max-width: 47.5rem; margin-inline: auto; }
.fo-faq__head { text-align: center; margin-bottom: clamp(2rem, 1.6rem + 2vw, 3rem); }
.fo-accordion__item { border-bottom: 1px solid var(--fo-line); }
.fo-accordion__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  text-align: left; padding-block: 1.35em; font-family: var(--fo-font-heading); font-weight: 600;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.15rem); color: var(--fo-voice);
}
.fo-accordion__icon { flex-shrink: 0; width: 1.5em; height: 1.5em; position: relative; }
.fo-accordion__icon::before, .fo-accordion__icon::after {
  content: ''; position: absolute; top: 50%; left: 50%; background: var(--fo-move-dark);
  transform: translate(-50%, -50%); transition: transform var(--fo-dur) var(--fo-ease), opacity var(--fo-dur) var(--fo-ease);
}
.fo-accordion__icon::before { width: 100%; height: 2px; }
.fo-accordion__icon::after { width: 2px; height: 100%; }
.fo-accordion__trigger[aria-expanded="true"] .fo-accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.fo-accordion__panel {
  display: grid; grid-template-rows: 0fr; overflow: hidden;
  transition: grid-template-rows 320ms var(--fo-ease);
}
.fo-accordion__panel > div { overflow: hidden; }
.fo-accordion__item.is-open .fo-accordion__panel { grid-template-rows: 1fr; }
.fo-accordion__panel p { padding-bottom: 1.35em; color: var(--fo-grey); line-height: 1.7; max-width: 42rem; }

/* ============================= S11 — Kontakt ============================= */
.fo-contact { padding-block: var(--fo-section-pad); background: var(--fo-stage-2); }
.fo-contact__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--fo-gap-lg); align-items: start; }
.fo-contact__side { background: var(--fo-white); border-radius: var(--fo-radius-md); padding: clamp(1.75rem, 1.5rem + 1.5vw, 2.5rem); border: 1px solid var(--fo-line); }
.fo-contact__side .fo-btn { width: 100%; margin-bottom: 1.25rem; }
.fo-contact__block { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--fo-line); }
.fo-contact__block h3 { font-size: 1rem; margin-bottom: 0.4em; font-family: var(--fo-font-heading); }
.fo-contact__block p { font-size: var(--fo-small); color: var(--fo-grey); line-height: 1.65; }

@media (max-width: 900px) {
  .fo-contact__grid { grid-template-columns: 1fr; }
}

/* ============================= Formulare ============================= */
.fo-form { display: grid; gap: 1rem; }
.fo-form__row { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.fo-field { display: flex; flex-direction: column; gap: 0.4em; }
.fo-field label { font-size: var(--fo-small); font-weight: 500; color: var(--fo-voice); }
.fo-field input, .fo-field select, .fo-field textarea {
  border: 1.5px solid var(--fo-line); border-radius: var(--fo-radius-sm);
  padding: 0.85em 1em; font-size: var(--fo-body); background: var(--fo-white);
  transition: border-color var(--fo-dur) var(--fo-ease), box-shadow var(--fo-dur) var(--fo-ease);
}
.fo-field textarea { resize: vertical; min-height: 6.5em; }
.fo-field input:focus, .fo-field select:focus, .fo-field textarea:focus {
  border-color: var(--fo-move-dark); box-shadow: 0 0 0 3px var(--fo-move-light); outline: none;
}
.fo-field--full { grid-column: 1 / -1; }
.fo-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fo-form__submit { margin-top: 0.4rem; }

@media (max-width: 560px) {
  .fo-form__row { grid-template-columns: 1fr; }
}

/* ============================= Footer ============================= */
.fo-footer-band {
  height: 18px; background: var(--fo-move);
  clip-path: polygon(0 65%, 100% 0%, 100% 35%, 0% 100%);
}
.fo-footer { background: var(--fo-voice); color: var(--fo-white); padding-block: clamp(3rem, 2.5rem + 2vw, 4.5rem) 2rem; }
.fo-footer__grid { display: grid; grid-template-columns: 1.2fr 0.8fr 0.8fr; gap: var(--fo-gap-lg); margin-bottom: 2.5rem; }
.fo-footer__logo img { height: clamp(4.5rem, 4rem + 2vw, 5.5rem); width: auto; margin-bottom: 1.25rem; margin-left: -0.5rem; }
.fo-footer__grid p { color: rgba(255,255,255,0.65); font-size: var(--fo-small); line-height: 1.65; max-width: 22rem; }
.fo-footer__col h4 { font-family: var(--fo-font-accent); font-style: italic; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--fo-small); color: var(--fo-move); margin-bottom: 1rem; }
.fo-footer__col ul { display: grid; gap: 0.65rem; }
.fo-footer__col a { color: rgba(255,255,255,0.8); font-size: var(--fo-small); }
.fo-footer__col a:hover { color: var(--fo-move); }
.fo-footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,0.12); font-size: var(--fo-small); color: rgba(255,255,255,0.5); }

@media (max-width: 760px) {
  .fo-footer__grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ============================= Über-mich / Legal (Lesespalte) ============================= */
.fo-page-hero { padding-block: clamp(3rem, 2.5rem + 2vw, 5rem) clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); background: var(--fo-stage); }
.fo-page-hero .fo-h1 { font-size: clamp(2.2rem, 1.8rem + 2vw, 3.4rem); }

.fo-about-page { padding-block: 0 var(--fo-section-pad); background: var(--fo-stage); }
.fo-about-page__photo {
  max-width: 40rem; margin: 0 auto clamp(2.5rem, 2rem + 2.5vw, 4rem);
  aspect-ratio: 16/10; border-radius: var(--fo-radius-md); overflow: hidden; position: relative;
  background: linear-gradient(155deg, var(--fo-move) 0%, var(--fo-move-dark) 100%);
}
.fo-about-page__photo::before {
  content: ''; position: absolute; top: -20%; bottom: -20%; left: 55%; width: 4px;
  background: rgba(255,255,255,0.75); transform: skewX(-12deg);
}
.fo-readspine { max-width: 45rem; margin-inline: auto; }
.fo-readspine h2 { font-size: var(--fo-h3); margin-top: 1.8em; margin-bottom: 0.5em; }
.fo-readspine p { font-size: var(--fo-lead); color: var(--fo-grey); line-height: 1.75; margin-bottom: 1em; }
.fo-pull-quote {
  margin-block: 2em; padding: 1.5em 1.75em; border-left: 3px solid var(--fo-move);
  background: var(--fo-stage-2); border-radius: 0 var(--fo-radius-md) var(--fo-radius-md) 0;
  font-family: var(--fo-font-accent); font-style: italic; font-weight: 700;
  font-size: clamp(1.15rem, 1.05rem + 0.6vw, 1.5rem); line-height: 1.4; color: var(--fo-voice);
}
.fo-about-page__cta { text-align: center; margin-top: clamp(2rem, 1.6rem + 2vw, 3rem); }

.fo-legal { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) var(--fo-section-pad); background: var(--fo-stage); }
.fo-legal__inner { max-width: 45rem; margin-inline: auto; }
.fo-legal__inner h2 { font-size: 1.25rem; margin-top: 1.75em; margin-bottom: 0.5em; }
.fo-legal__inner p, .fo-legal__inner address { font-size: var(--fo-body); color: var(--fo-grey); line-height: 1.75; margin-bottom: 1em; font-style: normal; }
.fo-legal__inner a { color: var(--fo-move-dark); font-weight: 600; }
.fo-legal__inner a:hover { text-decoration: underline; }