/* ==========================================================================
   Priebe Marketing (pri.ma) — Premium Redesign
   Warme Erdtöne · Fraunces + Hanken Grotesk + JetBrains Mono (self-hosted)
   ========================================================================== */

/* ===== Schriften (lokal, DSGVO-konform) ===== */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-normal.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ===== Design-Tokens ===== */
:root {
  /* Farben — warme Erdtöne */
  --paper:        #F7F2EA;   /* Seiten-Hintergrund (warmes Creme) */
  --paper-2:      #FCF9F4;   /* helle Fläche */
  --card:         #FFFFFF;
  --ink:          #241A12;   /* warmes Espresso-Schwarz (Text/Headlines) */
  --ink-2:        #4A3E34;
  --muted:        #6E6357;   /* Fließtext gedämpft */
  --line:         #E8DFD3;   /* warme Trennlinie */
  --line-strong:  #DBCFBE;

  --mokka:        #8B6755;
  --mokka-deep:   #5C4636;
  --mokka-tint:   #F0E7DF;

  --sage:         #5E8B7E;
  --sage-deep:    #3F6357;
  --sage-tint:    #E7EEEA;

  --sand:         #C99B63;
  --sand-deep:    #A87C41;
  --sand-tint:    #F6EAD8;

  --espresso:     #221913;   /* dunkler „Moment" */
  --espresso-2:   #2E2118;

  /* Typo */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Radius & Schatten */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --shadow-xs: 0 1px 2px rgba(46, 33, 24, 0.06);
  --shadow-sm: 0 4px 14px rgba(46, 33, 24, 0.07);
  --shadow:    0 12px 34px rgba(46, 33, 24, 0.10);
  --shadow-lg: 0 26px 60px rgba(46, 33, 24, 0.16);

  /* Layout */
  --container: 1160px;
  --narrow: 760px;
  --gutter: clamp(1.15rem, 4vw, 2.25rem);
  --section-y: clamp(4.75rem, 9vw, 8.5rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===== Reset / Grundlagen ===== */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
  /* verhindert seitliches Wischen/Flackern auf Mobilgeräten –
     overflow-x auf body allein reicht Touch-Browsern nicht */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.68;
  color: var(--ink-2);
  background-color: var(--paper);
  /* extrem dezente Papier-Textur für haptisches Premium-Gefühl */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* KEIN overflow-x hier! Das macht den <body> zum eigenen Scroll-Container
     (overflow-y wird dann automatisch zu "auto") – dadurch klebt der sticky
     Header nicht mehr und mobile Browser fangen an zu ruckeln/springen.
     Das seitliche Clipping übernimmt allein html { overflow-x: clip }. */
}

img { max-width: 100%; display: block; }

::selection { background: var(--sand); color: var(--espresso); }

/* ===== Typografie ===== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 96, "SOFT" 34, "WONK" 0;
  color: var(--ink);
  line-height: 1.06;
  letter-spacing: -0.012em;
  margin: 0 0 0.6rem;
  font-weight: 560;
}

h1 { font-size: clamp(2.4rem, 5.2vw, 3.95rem); }
h2 { font-size: clamp(1.95rem, 3.9vw, 3rem); }
h3 { font-size: 1.24rem; font-variation-settings: "opsz" 40, "SOFT" 40, "WONK" 0; font-weight: 600; letter-spacing: -0.005em; }
h4 { font-size: 1.05rem; font-variation-settings: "opsz" 30, "SOFT" 40, "WONK" 0; }

.serif-italic { font-style: italic; font-variation-settings: "opsz" 90, "SOFT" 60, "WONK" 1; }

p { margin: 0 0 1rem; }
strong { font-weight: 650; color: var(--ink); }
a { color: var(--sage-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* ===== Layout-Helfer ===== */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { max-width: var(--narrow); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-y) 0; position: relative; }
.section-tint { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ===== Eyebrow (Mono-Label mit Marker) ===== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.15rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mokka);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--sand-deep);
  border-radius: 2px;
}
.section-head { max-width: 640px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-intro { color: var(--muted); font-size: 1.08rem; margin: 0.4rem 0 0; }

/* ===== Buttons ===== */
.btn {
  --btn-bg: var(--sage);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease),
              background-color 0.22s var(--ease), border-color 0.22s var(--ease);
}
.btn svg { width: 1.1em; height: 1.1em; }
.btn-primary {
  --btn-bg: var(--sage);
  box-shadow: 0 10px 24px -8px rgba(63, 99, 87, 0.55), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-primary:hover {
  --btn-bg: var(--sage-deep);
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -8px rgba(63, 99, 87, 0.6), inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover { --btn-bg: var(--mokka-tint); transform: translateY(-2px); border-color: var(--mokka); }
.btn-lg { padding: 1rem 1.8rem; font-size: 1.06rem; }
.btn-xl { padding: 1.15rem 2.3rem; font-size: 1.14rem; }
.btn-arrow svg { transition: transform 0.22s var(--ease); }
.btn:hover .btn-arrow svg { transform: translateX(3px); }

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

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 242, 234, 0.72);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(247, 242, 234, 0.9);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-xs);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* Feste Höhe: schrumpft der Header beim Scrollen, verkleinert sich der
     Platz, den er im Fluss belegt – die ganze Seite springt dann um die
     Differenz nach oben. Höhe bleibt darum konstant, beim Scrollen ändern
     sich nur Hintergrund, Rahmen und Schatten. */
  min-height: 76px;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
/* Das Logo darf schrumpfen – es bleibt unter der min-height des Headers
   und verschiebt deshalb nichts. */
.brand-logo { height: 52px; width: auto; transition: height 0.3s var(--ease); }
.is-scrolled .brand-logo { height: 44px; }

.site-nav { display: flex; align-items: center; gap: 0.35rem; }
.site-nav a:not(.btn) {
  position: relative;
  padding: 0.5rem 0.85rem;
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.98rem;
  border-radius: 999px;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.site-nav a:not(.btn):hover { color: var(--ink); background: rgba(139, 103, 85, 0.09); }
.nav-cta { margin-left: 0.5rem; padding: 0.62rem 1.2rem; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px; height: 46px;
  padding: 11px;
  background: none; border: none; cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.25s var(--ease), opacity 0.2s var(--ease); }
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== HERO ===== */
.hero {
  position: relative;
  overflow: hidden;
  /* Oben bewusst sehr knapp: der Hero soll direkt unter dem Header ansetzen,
     damit der CTA "Kostenloses Erstgespräch buchen" ohne Scrollen im Bild
     steht. Zusammen mit der Zeilenhöhe des Eyebrows bleiben rund 20 px Luft
     zum Header – weniger klebt an der halbtransparenten Header-Leiste. */
  padding: clamp(0.75rem, 1vw, 1.25rem) 0 clamp(3rem, 6vw, 5rem);
}
.hero::before {
  /* weiche Farb-Aura im Hintergrund */
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 120%;
  background:
    radial-gradient(52% 46% at 82% 18%, rgba(94, 139, 126, 0.22), transparent 70%),
    radial-gradient(46% 44% at 12% 8%, rgba(201, 155, 99, 0.20), transparent 72%),
    radial-gradient(60% 50% at 50% 120%, rgba(139, 103, 85, 0.12), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  /* Textspalte breiter als früher (war 1.05fr): die Headline kommt damit mit
     einer Zeile weniger aus, was den CTA spürbar nach oben zieht. */
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 4vw, 3.75rem);
  align-items: center;
}
.hero-copy { max-width: 620px; }
/* min-width: 0 ist Pflicht: Grid-Items haben von Haus aus min-width: auto und
   wachsen dann auf die max-content-Breite ihres Inhalts. Der getippte
   Suchtext (nowrap) hätte die Spalte sonst mit jedem Buchstaben breiter
   gemacht – dadurch wanderte die Karte nach rechts und die Seite sprang. */
.hero-visual { min-width: 0; }
.hero .eyebrow { margin-bottom: 0.7rem; }
.hero h1 { margin-bottom: 0.95rem; line-height: 1.03; }
.hero h1 .accent { color: var(--mokka); position: relative; white-space: nowrap; }
.hero h1 .u-stroke {
  position: absolute;
  left: -2%;
  bottom: -0.12em;
  width: 104%;
  height: 0.34em;
  color: var(--sand-deep);
  opacity: 0.9;
}
.hero-lead {
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  color: var(--ink-2);
  max-width: 34rem;
  margin-bottom: 1.5rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 1.15rem; }
.cta-micro {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.01em;
  color: var(--muted);
}
.cta-micro svg { width: 15px; height: 15px; color: var(--sage-deep); flex: 0 0 auto; }

/* ---- SERP-Mock (Signature) ---- */
.serp {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.15rem 1.15rem 1.35rem;
  transform: rotate(0.6deg);
}
.serp::after {
  /* dezenter „Ergebnisse laden"-Fortschritt oben */
  content: "";
  position: absolute;
  left: 1.15rem; right: 1.15rem; top: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sage), var(--sand), var(--mokka));
  opacity: 0.5;
}
.serp-chrome { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.9rem; }
.serp-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.serp-dot:nth-child(1) { background: #E4A08B; }
.serp-dot:nth-child(2) { background: #E8C98A; }
.serp-dot:nth-child(3) { background: #9FC2B2; }
.serp-tab {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
}
.serp-bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  box-shadow: var(--shadow-xs);
  background: var(--paper-2);
}
.serp-g { flex: 0 0 auto; width: 20px; height: 20px; }
.serp-query {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.96rem;
  line-height: 1.4;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
}
.serp-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: -0.15em;
  background: var(--sage-deep);
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.serp-search-icon { flex: 0 0 auto; width: 18px; height: 18px; color: var(--sage-deep); }

.serp-results { margin-top: 1.1rem; }
.serp-ad {
  padding: 0.95rem 1.05rem;
  border: 1px solid var(--sage-tint);
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(94,139,126,0.06), rgba(255,255,255,0));
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.serp-ad-head { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.35rem; }
.serp-badge {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage-deep);
  border: 1px solid var(--sage);
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
}
.serp-url { font-family: var(--font-mono); font-size: 0.76rem; color: var(--muted); }
.serp-ad-title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 34, "SOFT" 40, "WONK" 0;
  font-weight: 600;
  font-size: 1.12rem;
  color: var(--sage-deep);
  line-height: 1.25;
  margin-bottom: 0.25rem;
}
.serp-ad-desc { font-size: 0.86rem; color: var(--ink-2); margin: 0; line-height: 1.5; }
.serp-ad-meta { display: flex; gap: 0.9rem; margin-top: 0.5rem; font-size: 0.76rem; color: var(--muted); }
.serp-ad-meta b { color: var(--sand-deep); font-weight: 700; }
.serp-organic { margin-top: 0.9rem; display: grid; gap: 0.85rem; opacity: 0.55; }
.serp-skel-title { height: 9px; width: 62%; border-radius: 999px; background: var(--line-strong); }
.serp-skel-line  { height: 7px; width: 92%; border-radius: 999px; background: var(--line); margin-top: 6px; }
.serp-skel-line.short { width: 74%; }

.serp-float {
  position: absolute;
  right: -14px; bottom: -18px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  background: var(--espresso);
  color: #fff;
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  transform: rotate(-1.2deg);
}
.serp-float b { font-family: var(--font-display); font-variation-settings: "opsz" 30, "SOFT" 40; font-size: 1.1rem; }
.serp-float span { font-size: 0.78rem; color: rgba(255,255,255,0.72); }
.serp-float .pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 0 rgba(94,139,126,0.7); animation: pulse 2s var(--ease) infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(94,139,126,0.55); }
  70% { box-shadow: 0 0 0 12px rgba(94,139,126,0); }
  100% { box-shadow: 0 0 0 0 rgba(94,139,126,0); }
}

/* ===== Stat-Strip ===== */
.stat-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper-2); }
.stat-strip .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  padding-block: 0;
}
.stat {
  padding: 2.1rem 1.4rem;
  text-align: center;
  position: relative;
}
.stat + .stat::before {
  content: "";
  position: absolute; left: 0; top: 24%; bottom: 24%;
  width: 1px; background: var(--line);
}
.stat-num {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 90, "SOFT" 30, "WONK" 0;
  font-weight: 560;
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  color: var(--mokka);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-label { margin-top: 0.5rem; font-size: 0.9rem; color: var(--muted); }

/* ===== Karten (Nutzen) ===== */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-top: 3rem;
}
.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.28s var(--ease);
}
.card::before {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 3px;
  background: var(--accent, var(--sage));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.card:hover::before { transform: scaleX(1); }
.card-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--sand-deep);
}
.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  margin: 0.9rem 0 1.15rem;
  border-radius: 15px;
  background: var(--accent-tint, var(--sage-tint));
  color: var(--accent, var(--sage-deep));
}
.card-icon svg { width: 27px; height: 27px; }
.card h3 { margin-bottom: 0.5rem; }
.card p { margin: 0; color: var(--muted); }
.accent-sage { --accent: var(--sage-deep); --accent-tint: var(--sage-tint); }
.accent-mokka { --accent: var(--mokka); --accent-tint: var(--mokka-tint); }
.accent-sand { --accent: var(--sand-deep); --accent-tint: var(--sand-tint); }

/* ===== Branchen / Für wen ===== */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 3rem;
}
.audience {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.5rem 1.35rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.audience:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.audience-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--mokka-tint); color: var(--mokka);
}
.audience-icon svg { width: 22px; height: 22px; }
.audience h4 { margin: 0; }
.audience p { margin: 0; font-size: 0.92rem; color: var(--muted); }

/* ===== Vergleich ===== */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  margin-top: 3rem;
  align-items: stretch;
}
.compare-col { border-radius: var(--r-lg); padding: 2.1rem 1.9rem; }
.compare-col h3 { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.4rem; }
.compare-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.compare-col li { display: flex; gap: 0.8rem; align-items: flex-start; line-height: 1.5; }
.compare-others {
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--muted);
}
.compare-others h3 { color: var(--ink-2); }
.compare-me {
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(94,139,126,0.28), transparent 60%),
    linear-gradient(155deg, var(--mokka) 0%, var(--mokka-deep) 100%);
  color: rgba(255,255,255,0.94);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.compare-me h3 { color: #fff; }
.compare-tag {
  position: absolute; top: 1.4rem; right: 1.4rem;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sand-tint);
  border: 1px solid rgba(255,255,255,0.28);
  padding: 0.2rem 0.5rem; border-radius: 999px;
}
.mark {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-top: 1px;
  border-radius: 50%;
}
.mark svg { width: 15px; height: 15px; }
.mark-x { background: var(--paper); color: var(--line-strong); border: 1px solid var(--line); }
.mark-check { background: var(--sage); color: #fff; }

/* ===== Ablauf (Steps) ===== */
.steps {
  list-style: none; margin: 3rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem;
  counter-reset: step;
}
.step {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 2rem 1.7rem 1.8rem;
  box-shadow: var(--shadow-sm);
}
.step-index {
  display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 1rem;
}
.step-num {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 20, "WONK" 0;
  font-weight: 500;
  font-size: 3rem;
  line-height: 0.8;
  color: var(--mokka);
}
.step-of { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--muted); }
.step h3 { margin-bottom: 0.5rem; }
.step p { margin: 0; color: var(--muted); font-size: 0.98rem; }
.step-connector {
  position: absolute; z-index: 2; top: 3rem; right: -1.4rem;
  width: 2.8rem; height: 2px;
  color: var(--sage);
}
.step-connector svg { width: 100%; height: 12px; overflow: visible; }
.sa-line { stroke-dasharray: 6 6; animation: flow 0.9s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -12; } }

/* ===== Über mich ===== */
.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.portrait-frame { position: relative; }
.portrait-frame::before {
  content: "";
  position: absolute; inset: 20px -20px -20px 20px;
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, var(--sage) 0%, var(--sage-deep) 100%);
  opacity: 0.85;
}
.portrait {
  position: relative;
  width: 100%; height: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.portrait-badge {
  position: absolute; z-index: 2; left: -18px; bottom: 26px;
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.75rem 1.05rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.portrait-badge .sig { font-family: var(--font-display); font-variation-settings: "opsz" 40, "SOFT" 60, "WONK" 1; font-style: italic; font-size: 1.25rem; color: var(--ink); }
.portrait-badge small { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); display: block; }
.about-text h2 .serif-italic { color: var(--mokka); }
.fact-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; margin: 1.6rem 0 0; padding: 0; }
.fact-chips li {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
}

/* ===== FAQ ===== */
.faq { display: grid; gap: 0.85rem; margin-top: 2.5rem; }
.faq details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.faq details[open] { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.faq summary {
  position: relative;
  padding: 1.2rem 3.2rem 1.2rem 1.4rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute; right: 1.35rem; top: 1.5rem;
  width: 13px; height: 13px;
  background:
    linear-gradient(var(--mokka), var(--mokka)) center/13px 2px no-repeat,
    linear-gradient(var(--mokka), var(--mokka)) center/2px 13px no-repeat;
  transition: transform 0.28s var(--ease);
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq details p { margin: 0; padding: 0 1.4rem 1.3rem; color: var(--muted); }

/* ===== CTA (dunkler Espresso-Moment) ===== */
.cta-section { padding-block: clamp(3rem, 6vw, 5rem); }
.cta-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
  color: #fff;
  background:
    radial-gradient(60% 80% at 15% 10%, rgba(94,139,126,0.4), transparent 60%),
    radial-gradient(55% 70% at 88% 90%, rgba(201,155,99,0.32), transparent 62%),
    linear-gradient(155deg, var(--espresso-2), var(--espresso));
  box-shadow: var(--shadow-lg);
}
.cta-panel .eyebrow { color: var(--sand); justify-content: center; }
.cta-panel .eyebrow::before { background: var(--sand); }
.cta-panel h2 { color: #fff; max-width: 18ch; margin-inline: auto; }
.cta-panel h2 .serif-italic { color: var(--sand); }
.cta-panel p { max-width: 46ch; margin: 1rem auto 2rem; color: rgba(255,255,255,0.82); font-size: 1.08rem; }
.cta-panel .btn-ghost { --btn-fg: #fff; border-color: rgba(255,255,255,0.3); }
.cta-panel .btn-ghost:hover { --btn-bg: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.6); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; }
/* ===== Footer ===== */
.site-footer {
  position: relative;
  color: rgba(255,255,255,0.82);
  background:
    radial-gradient(60% 70% at 12% 0%, rgba(94,139,126,0.22), transparent 62%),
    radial-gradient(55% 65% at 92% 8%, rgba(201,155,99,0.16), transparent 65%),
    linear-gradient(160deg, #2C2018 0%, var(--espresso) 60%, #1C140E 100%);
  font-size: 0.95rem;
}
.footer-main {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-top: clamp(3rem, 5vw, 4.25rem);
  padding-bottom: 2.75rem;
}
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 1.15rem; max-width: 30ch; }
.footer-brand .brand-mark { width: 56px; height: 56px; border-radius: 14px; }
.brand-footer { display: inline-flex; align-items: center; gap: 0.85rem; text-decoration: none; }
.footer-brand-name {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 40, "SOFT" 40, "WONK" 0;
  font-weight: 560;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: #fff;
  transition: color 0.2s var(--ease);
}
.brand-footer:hover .footer-brand-name { color: var(--sand); }
.footer-social { display: flex; gap: 0.6rem; list-style: none; margin: 0; padding: 0; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease), color 0.2s var(--ease);
}
.footer-social a:hover { background: var(--sage); color: #fff; transform: translateY(-2px); }
.footer-social svg { width: 20px; height: 20px; }
.footer-col h4 {
  margin: 0 0 1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.footer-col { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
.footer-col a { color: rgba(255,255,255,0.82); text-decoration: none; transition: color 0.18s var(--ease); }
.footer-col a:hover { color: var(--sand); }
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem;
  padding-block: 1.5rem 1.8rem;
  border-top: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.55);
  font-size: 0.86rem;
  text-align: center;
}
.footer-bottom p { margin: 0; }
.footer-bottom a { color: rgba(255,255,255,0.72); text-decoration: none; }
.footer-bottom a:hover { color: var(--sand); }

/* ===== Rechtsseiten ===== */
.legal { max-width: var(--narrow); margin: 0 auto; padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) 5rem; }
.legal h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 1.5rem; }
.legal h2 { font-size: 1.45rem; margin-top: 2.5rem; }
.legal h3 { font-size: 1.12rem; margin-top: 1.75rem; }
.legal p, .legal li { color: var(--ink-2); }
.legal a { word-break: break-word; }
.back-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-bottom: 1.75rem;
  font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.04em;
  color: var(--mokka); text-decoration: none; font-weight: 600;
}
.back-link:hover { color: var(--mokka-deep); }

/* ===== Sticky Mobile-CTA ===== */
.mobile-cta { display: none; }

@media (max-width: 720px) {
  .mobile-cta {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 95;
    padding-top: 0.6rem;
    padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: rgba(247, 242, 234, 0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -10px 30px rgba(46, 33, 24, 0.12);
    transition: transform 0.32s var(--ease), opacity 0.32s var(--ease);
  }
  .mobile-cta.is-hidden { transform: translateY(130%); opacity: 0; pointer-events: none; }
  .mobile-cta-inner { display: flex; align-items: center; gap: 0.9rem; }
  .mobile-cta-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
  .mobile-cta-text strong { font-size: 0.95rem; color: var(--ink); font-weight: 650; }
  .mobile-cta-text span { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.02em; color: var(--muted); }
  .mobile-cta .btn { margin-left: auto; padding: 0.72rem 1.35rem; white-space: nowrap; }
}

/* ===== Reveal-Animation ===== */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-copy { max-width: 640px; }
  .serp { max-width: 520px; margin: 0 auto; transform: none; }
  .about-grid { grid-template-columns: 1fr; }
  .audience-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .cards { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 2.4rem; }
  .step-connector { top: auto; right: 50%; bottom: -1.55rem; transform: translateX(50%) rotate(90deg); }
  .stat-strip .container { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2)::before { display: none; }
  .stat { border-bottom: 1px solid var(--line); }
  .stat:nth-last-child(-n+2) { border-bottom: none; }
}

@media (max-width: 720px) {
  .nav-toggle { display: flex; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    padding: 0.5rem var(--gutter) 1.25rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .nav-open .site-nav { display: flex; }
  .site-nav a:not(.btn) { padding: 0.9rem 0.5rem; border-radius: 0; border-bottom: 1px solid var(--line); }
  .nav-cta { margin: 0.9rem 0 0; }
  .serp-float { right: 0; }
  /* Suchfeld auf dem Handy: der getippte Text bricht um, statt nach rechts
     zu laufen. Die Höhe ist auf zwei Zeilen fixiert, damit der Umbruch
     nichts nach unten schiebt – die Zeile erscheint in bereits
     reserviertem Platz. */
  .serp-bar { align-items: flex-start; border-radius: 20px; }
  .serp-g, .serp-search-icon { margin-top: 1px; }
  .serp-query {
    white-space: normal;
    overflow-wrap: anywhere;
    height: 2.8em;
  }
  .audience-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: center; }
}

@media (max-width: 420px) {
  .stat-strip .container { grid-template-columns: 1fr; }
  .stat::before { display: none !important; }
  .stat { border-bottom: 1px solid var(--line); }
  .stat:last-child { border-bottom: none; }
}

/* ===== Reduced Motion ===== */
@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; }
  .reveal { opacity: 1; transform: none; }
  .serp-caret { opacity: 1; }
}