/*
Theme Name: Physiokarriere
Description: One-Pager Landingpage fuer Physiokarriere. Eigenstaendiges Theme, kein Parent noetig.
Version: 1.0
Author: Physiokarriere
Text Domain: physiokarriere
*/

/* ---------- 0. Fonts (selbst gehostet, DSGVO-konform) -- */
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/instrument-sans-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/instrument-sans-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/instrument-sans-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/instrument-sans-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/instrument-serif-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/instrument-serif-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/instrument-serif-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/instrument-serif-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* =========================================================
   PHYSIOKARRIERE — One-Pager
   1. Tokens
   2. Base
   3. Layout-Primitives
   4. Komponenten
   5. Sektionen
   6. Responsive
   ========================================================= */

/* ---------- 1. Tokens ---------------------------------- */
:root{
  color-scheme: light;

  /* Grund & Flächen (Neutrale mit leichter Grün-Bias) */
  --ground:      #FFFFFF;
  --surface:     #FFFFFF;
  --surface-2:   #F1F6F4;
  --line:        rgba(14,22,20,.10);
  --line-strong: rgba(14,22,20,.18);

  /* Text */
  --fg:          #0E1615;
  --fg-soft:     #3E4C47;
  --muted:       #66766F;

  /* Akzente (unveraendert) */
  --jade:        #3FD5A8;
  --jade-deep:   #1E9C79;
  --jade-wash:   rgba(63,213,168,.10);
  --sand:        #A9752B;

  /* Typo */
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;

  --step--1: clamp(.8125rem, .78rem + .16vw, .875rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.0625rem);
  --step-1:  clamp(1.125rem, 1.05rem + .35vw, 1.25rem);
  --step-2:  clamp(1.375rem, 1.24rem + .6vw, 1.625rem);
  --step-3:  clamp(1.75rem, 1.5rem + 1.1vw, 2.375rem);
  --step-4:  clamp(2.25rem, 1.75rem + 2.2vw, 3.5rem);
  --step-5:  clamp(2.75rem, 1.9rem + 3.6vw, 4.75rem);

  /* Maße */
  --wrap: 1160px;
  --measure: 62ch;
  --radius: 14px;
  --radius-lg: 22px;
  --section-y: clamp(76px, 9vw, 132px);
}

/* ---------- 2. Base ------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ground);
  color:var(--fg);
  font-family:var(--sans);
  font-size:var(--step-0);
  line-height:1.65;
  font-weight:400;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{ margin:0; font-weight:400; text-wrap:balance; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
img,svg{ max-width:100%; display:block; }
strong{ font-weight:600; color:var(--fg); }

:focus-visible{
  outline:2px solid var(--jade);
  outline-offset:3px;
  border-radius:4px;
}

::selection{ background:var(--jade); color:#04100C; }

/* ---------- 3. Layout-Primitives ----------------------- */
.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }
.section{ padding-block:var(--section-y); position:relative; }
.stack{ display:flex; flex-direction:column; }
.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* Editorial-Raster: Label links, Inhalt rechts */
.grid-editorial{
  display:grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items:start;
}
.grid-editorial > .col-label{ position:sticky; top:104px; }

/* Als Block statt inline-flex: die Oberkante haengt sonst an der
   Textgrundlinie, wodurch ein zweizeiliges Label hoeher sitzt als ein
   einzeiliges. Genau das liess "Warum ein unverbindliches Gespraech" und
   "Darauf kannst du dich verlassen" ueber der Ueberschrift stehen.
   Der margin-top gleicht die unterschiedlichen Versalhoehen aus, sodass
   Label und Ueberschrift auf derselben Linie beginnen. Der Faktor .159 ist
   das Verhaeltnis Versalabstand zu Schriftgroesse der Serifenschrift -
   dadurch skaliert die Korrektur mit dem clamp() von --step-4 mit. */
.col-label .eyebrow{
  display:flex;
  margin-top:calc(var(--step-4) * .159 - 5.15px);
}

/* Eyebrow / Kapitel-Label */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:600; color:var(--muted);
}
.eyebrow::before{
  content:""; width:22px; height:1px; background:var(--jade); flex:none;
}
.eyebrow--dot::before{
  width:6px; height:6px; border-radius:50%; background:var(--jade);
}

/* Überschriften */
.h-display{
  font-family:var(--serif);
  font-size:var(--step-5);
  line-height:1.02;
  letter-spacing:-.02em;
}
.h-section{
  font-family:var(--serif);
  font-size:var(--step-4);
  line-height:1.08;
  letter-spacing:-.015em;
}
.h-sub{
  font-family:var(--sans);
  font-size:var(--step-1);
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.35;
}
.accent-em{
  font-style:italic;
  color:var(--jade);
}
.lead{
  font-size:var(--step-1);
  color:var(--fg-soft);
  line-height:1.6;
  max-width:var(--measure);
}
.body-text{ color:var(--fg-soft); max-width:var(--measure); }
.body-text + .body-text{ margin-top:1.1em; }

/* ---------- 4. Komponenten ----------------------------- */

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--sans); font-size:.9375rem; font-weight:600; letter-spacing:-.005em;
  padding:.875rem 1.5rem;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.btn:active{ transform:translateY(1px); }
.btn--primary{
  background:var(--jade); color:#04120D;
  box-shadow:0 0 0 1px rgba(63,213,168,.4), 0 14px 40px -18px rgba(63,213,168,.75);
}
.btn--primary:hover{ background:#57E4BB; }
.btn--ghost{
  background:transparent; color:var(--fg); border-color:var(--line-strong);
}
.btn--ghost:hover{ border-color:var(--jade); color:var(--jade); }
.btn--sm{ padding:.625rem 1.125rem; font-size:.875rem; }
.btn--block{ width:100%; }

.btn-row{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }

.micro{
  font-size:var(--step--1);
  color:var(--muted);
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .9rem;
}
.micro .sep{ width:3px; height:3px; border-radius:50%; background:var(--line-strong); }

/* Bilder
   ─────────────────────────────────────────────────────────
   Die Fotos sind in dieser Datei als data:-URI eingebettet,
   damit das Template als EINE Datei funktioniert.
   Für den Livegang: den langen data:-String im src durch den
   Pfad zur Bilddatei ersetzen, z. B. src="assets/gespraech.webp".
   ───────────────────────────────────────────────────────── */
.figure{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--surface-2);
  isolation:isolate;
}
.figure img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(.88) contrast(1.04) brightness(.94);
}
.figure::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(200deg, rgba(63,213,168,.07) 0%, rgba(63,213,168,0) 45%),
    linear-gradient(0deg, rgba(10,16,15,.62) 0%, rgba(10,16,15,0) 55%);
  pointer-events:none;
}
.figure--4x3{ aspect-ratio:4 / 3; }
.figure--3x2{ aspect-ratio:3 / 2; }
.figure--1x1{ aspect-ratio:1 / 1; }
.figure--4x5{ aspect-ratio:4 / 5; }

.figure-caption{
  /* Liegt immer auf einem abgedunkelten Foto (siehe .figure::after),
     unabhaengig vom Hell/Dunkel-Thema der Seite - deshalb fest hell
     statt ueber --fg-soft, sonst unlesbar auf hellem Theme. */
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:1.25rem 1.4rem;
  font-size:.8125rem; color:rgba(233,242,238,.92);
  display:flex; align-items:center; gap:.6rem;
}
.figure-caption::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--jade); flex:none;
}

/* Bild + Text nebeneinander */
.media-split{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items:stretch;
}
.media-split--flip > .media-split__media{ order:2; }
/* Bild streckt sich auf die volle Hoehe der Textspalte (Hochformat
   statt fixem Seitenverhaeltnis) - Rueckfall auf 4:3 im gestapelten
   Mobile-Layout weiter unten, sonst kollabiert die Hoehe auf 0. */
.media-split__media,
.media-split__media .figure{ height:100%; }

/* Karte */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(1.4rem, 2.4vw, 2rem);
}

/* Checkliste */
.checklist{ display:flex; flex-direction:column; gap:.9rem; }
.checklist li{
  display:grid; grid-template-columns:22px 1fr; gap:.85rem;
  align-items:start;
  color:var(--fg-soft);
}
.checklist li > svg{ margin-top:.32em; color:var(--jade); }

/* ---------- 5. Sektionen ------------------------------- */

/* Header */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background-color .25s ease;
}
.site-header.is-stuck{ border-bottom-color:var(--line); background:rgba(255,255,255,.9); }
.header-inner{
  display:flex; align-items:center; gap:15px;
  height:72px;
}
.brand{ display:inline-flex; align-items:center; gap:.6rem; font-weight:600; letter-spacing:-.02em; font-size:1.0625rem; }
.brand-mark{
  width:26px; height:26px; border-radius:8px; flex:none;
  background:linear-gradient(150deg, var(--jade), var(--jade-deep));
  display:grid; place-items:center; color:#04120D;
}
.brand span em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--jade); }

.nav{ display:flex; align-items:center; gap:2rem; margin-left:auto; }
.nav a{ font-size:.9375rem; color:var(--fg-soft); transition:color .2s ease; }
.nav a:hover{ color:var(--fg); }

/* Buttons in der Navigation behalten ihre eigene Schriftfarbe.
   Ohne diese Regel gewinnt ".nav a" und faerbt den Text hell. */
.nav a.btn--primary{ color:#04120D; }
/* .nav a setzt font-size:.9375rem und ist spezifischer als .btn--sm.
   Ohne diese Zeile ist der Button in der Navigation 15px gross und
   damit 1,7px hoeher als der danebenliegende header-cta (14px). */
.nav a.btn--sm{ font-size:.875rem; }
.nav a.btn--ghost{ color:var(--fg); }


.nav-toggle{
  display:none; background:none; border:1px solid var(--line-strong);
  border-radius:10px; width:42px; height:38px; color:var(--fg); cursor:pointer;
  align-items:center; justify-content:center;
}

/* Hero */
.hero{ position:relative; padding-block: clamp(56px, 7vw, 96px) clamp(56px, 7vw, 88px); overflow:hidden; }
.hero-inner{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 70px;
  align-items:start;
}
.hero-copy{ display:flex; flex-direction:column; gap:1.5rem; align-items:flex-start; }
.hero h1{ max-width:15ch; }
.hero .lead{ max-width:46ch; }

/* Hero-Medien: Bild mit überlappendem Panel */
.hero-media{ position:relative; width:100%; justify-self:end; }
/* margin:0 hebt den Browser-Standard fuer <figure> auf (1em 40px).
   Ohne das waere das Bild 80 px schmaler als seine Spalte und
   koennte nicht rechtsbuendig sitzen. */
.hero-media .figure{ margin:0; box-shadow:0 50px 100px -55px rgba(14,22,20,.35); }
.hero-media .panel{
  position:relative; z-index:3;
  margin:-230px 3rem 0;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

/* Gesprächs-Panel */
.panel{
  position:relative;
  background:linear-gradient(168deg, var(--surface-2), var(--surface));
  border:1px solid var(--line);
  border-radius:26px;
  padding:clamp(1.5rem, 2.6vw, 2rem);
  box-shadow:0 40px 90px -50px rgba(14,22,20,.3);
}
.panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-bottom:1.1rem; border-bottom:1px solid var(--line); margin-bottom:1.25rem;
}
.panel-head h3{ font-size:1.0625rem; font-weight:600; letter-spacing:-.01em; }
.badge-live{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.75rem; font-weight:600; color:var(--jade);
  background:var(--jade-wash); border:1px solid rgba(63,213,168,.24);
  padding:.3rem .65rem; border-radius:999px; white-space:nowrap;
}
.badge-live i{ width:6px; height:6px; border-radius:50%; background:var(--jade); display:block; }
.panel-meta{ display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.25rem; margin-bottom:1.4rem; }
.panel-meta dt{ font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.panel-meta dd{ margin:.25rem 0 0; font-size:.9375rem; color:var(--fg); }
.panel-note{
  margin-top:1.4rem; padding-top:1.1rem; border-top:1px solid var(--line);
  font-size:var(--step--1); color:var(--muted);
}

/* Kennzahlen */
.stats{ border-block:1px solid var(--line); }
.stats-grid{
  display:grid; grid-template-columns:repeat(4, 1fr);
}
.stat{
  padding:clamp(1.75rem,3vw,2.5rem) clamp(1rem,2vw,2rem);
  border-left:1px solid var(--line);
  display:flex; flex-direction:column; gap:.4rem;
}
.stat:first-child{ border-left:0; padding-left:0; }
.stat-value{
  font-family:var(--serif); font-size:var(--step-3); line-height:1;
  letter-spacing:-.01em; color:var(--fg);
  font-variant-numeric:tabular-nums;
}
.stat-value em{ font-style:italic; color:var(--jade); }
.stat-label{ font-size:var(--step--1); color:var(--muted); line-height:1.5; }

/* Mission */
.mission-quote{
  font-family:var(--serif);
  font-size:var(--step-3);
  line-height:1.22;
  letter-spacing:-.01em;
  color:var(--fg);
  max-width:24ch;
}
.beneficiaries{
  display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.75rem;
}
.chip{
  font-size:.875rem; color:var(--fg-soft);
  border:1px solid var(--line); border-radius:999px;
  padding:.45rem 1rem; background:var(--surface);
}
.chip::before{ content:""; display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--jade); margin-right:.55rem; vertical-align:middle; }

/* Zitat-Block */
.pullquote{
  margin-top:2rem;
  border-left:2px solid var(--jade);
  padding:.35rem 0 .35rem 1.5rem;
  font-family:var(--serif); font-style:italic;
  font-size:var(--step-2); line-height:1.3; color:var(--fg);
  max-width:34ch;
}
.pullquote cite{ display:block; margin-top:.75rem; font:600 .8125rem/1.5 var(--sans); font-style:normal; color:var(--muted); letter-spacing:.02em; }

/* Erwartungen */
.topic-list{ display:grid; gap:0; margin-top:.5rem; }
.topic{
  display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:baseline;
  padding:1.15rem 0; border-bottom:1px solid var(--line);
}
.topic:first-child{ border-top:1px solid var(--line); }
.topic-key{
  font-size:.75rem; font-weight:600; color:var(--jade);
  font-variant-numeric:tabular-nums; letter-spacing:.06em;
  min-width:2.2rem;
}
.topic-text{ color:var(--fg-soft); }
.topic-text strong{ display:block; color:var(--fg); font-weight:600; margin-bottom:.15rem; }

/* Ablauf (echte Sequenz → Nummerierung gerechtfertigt) */
.steps{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; }
.step{
  position:relative; display:flex; flex-direction:column; gap:.75rem;
  padding:clamp(1.5rem,2.4vw,1.9rem);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
}
.step-n{
  font-family:var(--serif); font-size:1.75rem; line-height:1; color:var(--jade);
  font-variant-numeric:tabular-nums;
}
.step h3{ font-size:1.0625rem; font-weight:600; letter-spacing:-.01em; }
.step p{ font-size:.9375rem; color:var(--fg-soft); }
.step-time{ margin-top:auto; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600; padding-top:.5rem; }

/* Warum wir das machen — Sand-Akzent */
.belief{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(1.75rem, 3.5vw, 3rem);
  position:relative; overflow:hidden;
}
.belief::after{
  content:""; position:absolute; right:-120px; top:-120px; width:380px; height:380px;
  background:radial-gradient(closest-side, rgba(227,205,169,.07), transparent 70%);
  pointer-events:none;
}
/* .belief hat overflow:hidden und wird dadurch zum Scroll-Container.
   Ein position:sticky-Label haengt darin dauerhaft auf top:104px fest,
   statt oben buendig mit der Ueberschrift zu stehen. */
.belief .col-label{ position:static; }
.belief .h-section{ max-width:20ch; }
.belief-highlight{
  font-family:var(--serif); font-style:italic;
  color:var(--sand);
}

/* Vertrauen */
.trust-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:0;
  border-top:1px solid var(--line);
}
.trust-item{
  display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start;
  padding:1.5rem 0;
  border-bottom:1px solid var(--line);
}
.trust-grid > .trust-item:nth-child(odd){ padding-right:clamp(1rem,3vw,3rem); }
.trust-grid > .trust-item:nth-child(even){ padding-left:clamp(1rem,3vw,3rem); border-left:1px solid var(--line); }
.trust-grid > .trust-item:last-child:nth-child(odd){ grid-column:1 / -1; padding-right:0; }
.trust-icon{
  width:34px; height:34px; border-radius:10px; flex:none;
  display:grid; place-items:center;
  background:var(--jade-wash); color:var(--jade);
  border:1px solid rgba(63,213,168,.2);
}
.trust-item h3{ font-size:.9375rem; font-weight:600; margin-bottom:.15rem; }
.trust-item p{ font-size:.9375rem; color:var(--muted); }

/* FAQ */
.faq{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; background:none; border:0; cursor:pointer;
  display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem;
  padding:1.4rem 0; text-align:left;
  font-family:var(--sans); font-size:var(--step-0); font-weight:600; color:var(--fg);
  letter-spacing:-.01em;
}
.faq-icon{
  flex:none; width:26px; height:26px; border-radius:50%;
  border:1px solid var(--line-strong); display:grid; place-items:center;
  transition:transform .28s ease, border-color .2s ease, color .2s ease;
  color:var(--fg-soft);
  /* Ganzzahlig statt .1rem (=1,6px): krumme Werte lassen das Icon beim
     Drehen auf ein anderes Zwischenpixel springen. */
  margin-top:2px;
  /* Ohne diese drei Zeilen legt der Browser die Compositing-Ebene erst
     beim Start der Drehung an und verwirft sie am Ende wieder. Dabei wird
     neu gerundet - das ist der sichtbare Versatz. Mit dauerhafter Ebene
     bleibt das Icon exakt an seinem Platz. */
  transform:rotate(0deg);
  transform-origin:50% 50%;
  will-change:transform;
  backface-visibility:hidden;
}
.faq-q[aria-expanded="true"] .faq-icon{ transform:rotate(45deg); border-color:var(--jade); color:var(--jade); }
.faq-a{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .32s ease;
}
.faq-a > div{ overflow:hidden; }
.faq-item.is-open .faq-a{ grid-template-rows:1fr; }
.faq-a p{ color:var(--fg-soft); max-width:70ch; padding-bottom:1.4rem; font-size:.9375rem; }

/* Kontakt / Formular */
/* overflow-x:clip statt overflow:hidden - klippt nur seitlich.
   Mit hidden wuerde der gruene Schein an der Oberkante hart
   abgeschnitten, statt in die Sektion darueber auszulaufen.
   (Bei clip darf die andere Achse visible bleiben, bei hidden nicht.)
   Querscrollen verhindert bereits body{ overflow-x:hidden }. */
.contact{ position:relative; overflow-x:clip; }
.contact-inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:start;
}
.form-card{
  background:linear-gradient(170deg, var(--surface-2), var(--surface));
  border:1px solid var(--line-strong);
  border-radius:26px;
  padding:clamp(1.5rem, 3vw, 2.25rem);
  box-shadow:0 50px 110px -60px rgba(14,22,20,.35);
}
.field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field--full{ grid-column:1 / -1; }
.field label{ font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--muted); }
.field input,.field select,.field textarea{
  font-family:var(--sans); font-size:.9375rem; color:var(--fg);
  background:rgba(14,22,20,.03);
  border:1px solid var(--line);
  border-radius:12px;
  padding:.8rem .9rem;
  transition:border-color .2s ease, background-color .2s ease;
  width:100%;
}
.field textarea{ resize:vertical; min-height:96px; }
.field input::placeholder,.field textarea::placeholder{ color:var(--muted); }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--jade); background:rgba(63,213,168,.05);
}
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2366766F' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.5rem; }
.consent{
  grid-column:1 / -1;
  display:grid; grid-template-columns:auto 1fr; gap:.75rem; align-items:start;
  font-size:.8125rem; color:var(--muted); line-height:1.55;
}
.consent input{ width:17px; height:17px; margin-top:.2rem; accent-color:var(--jade); }
.consent a{ color:var(--fg-soft); text-decoration:underline; text-underline-offset:2px; }
.form-foot{ grid-column:1 / -1; display:flex; flex-direction:column; gap:.9rem; margin-top:.25rem; }
.form-status{
  display:none; grid-column:1/-1;
  border:1px solid rgba(63,213,168,.3); background:var(--jade-wash);
  color:var(--jade); border-radius:12px; padding:.9rem 1rem; font-size:.9375rem;
}
.form-status.is-visible{ display:block; }

/* Footer */
.site-footer{ border-top:1px solid var(--line); padding-block:clamp(2.5rem,5vw,3.5rem); }
.footer-top{ display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between; align-items:flex-start; }
.footer-links{ display:flex; flex-wrap:wrap; gap:1.5rem; font-size:.875rem; color:var(--muted); }
.footer-links a:hover{ color:var(--fg); }
.footer-bottom{
  margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  font-size:.8125rem; color:var(--muted);
}

/* Reveal */
.js [data-reveal]{ opacity:0; transform:translateY(14px); }
.js [data-reveal].is-in{
  opacity:1; transform:none;
  transition:opacity .7s cubic-bezier(.22,.7,.3,1), transform .7s cubic-bezier(.22,.7,.3,1);
}
@media (prefers-reduced-motion: reduce){
  .js [data-reveal]{ opacity:1; transform:none; }
  .btn,.faq-icon,.faq-a{ transition:none !important; }
}

/* ---------- 6. Responsive ------------------------------ */
@media (max-width: 1000px){
  .hero-inner{ grid-template-columns:1fr; gap:2.5rem; }
  .contact-inner{ grid-template-columns:1fr; }
  .grid-editorial{ grid-template-columns:1fr; gap:1.75rem; }
  .grid-editorial > .col-label{ position:static; }
  .steps{ grid-template-columns:1fr; }
  .media-split{ grid-template-columns:1fr; gap:2rem; }
  .media-split__media,
  .media-split__media .figure{ height:auto; }
  .media-split__media .figure{ aspect-ratio:4 / 3; }
  .hero-media .figure{ aspect-ratio:3 / 2; }
  .media-split--flip > .media-split__media{ order:0; }
  .hero-media .panel{ margin-inline:1rem; }
  .stats-grid{ grid-template-columns:1fr 1fr; }
  .stat{ border-left:1px solid var(--line); padding-inline:clamp(1rem,3vw,1.75rem); }
  .stat:first-child{ border-left:0; padding-left:0; }
  .stat:nth-child(3){ border-left:0; padding-left:0; border-top:1px solid var(--line); }
  .stat:nth-child(4){ border-top:1px solid var(--line); }
}
/* Dropdown-Navigation: greift schon ab Tablet (Hoch- und Querformat),
   nicht erst ab Mobile-Breite. So bleibt die Nav-Leiste in der
   mittleren Breite (768-1194px) immer gleich aufgebaut, statt bei
   manchen Tablet-Groessen/Orientierungen zwischen Vollnav und
   Dropdown hin- und herzuspringen. */
@media (max-width: 1194px){
  .nav{
    position:absolute; top:72px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--surface); border-block:1px solid var(--line);
    padding:.5rem 1.25rem 1.25rem;
    display:none;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:.85rem 0; border-bottom:1px solid var(--line); }
  .nav .btn{ margin-top:1rem; }
  .nav-toggle{ display:inline-flex; margin-left:auto; }
  .header-cta{ display:none; }
}
@media (max-width: 780px){
  .trust-grid{ grid-template-columns:1fr; }
  .trust-grid > .trust-item:nth-child(even){ padding-left:0; border-left:0; }
  .trust-grid > .trust-item:nth-child(odd){ padding-right:0; }
  .field-grid{ grid-template-columns:1fr; }
  .panel-meta{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  .stats-grid{ grid-template-columns:1fr; }
  .stat{ border-left:0; padding-inline:0; border-top:1px solid var(--line); }
  .stat:first-child{ border-top:0; }
  .btn-row .btn{ width:100%; }
}

/* ---------- 7. Formular-Versand ------------------------ */
/* Honigtopf gegen Spam-Bots: fuer Menschen unsichtbar,
   Bots fuellen ihn aus und werden verworfen. */
.hp-field{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.form-status.is-error{ color:#FF9B8A; }