/* ============================================================
   Elena Ziegler — Website Stylesheet
   Hand-codiert, statisch. Tokens 1:1 aus design-system/tokens/*.
   VERBINDLICH: Magenta #A4208B, Orange #FD7F01, Grau #DEDEDE,
   Weiß, Ink #1A1A1A. Roboto (self-hosted). Nichts umfärben.
   ============================================================ */

/* ---- FONTS: Roboto, self-hosted (DSGVO, keine externen Requests) ---- */
@font-face {
  font-family: 'Roboto'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/roboto-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/roboto-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/roboto-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/roboto-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('../fonts/roboto-latin-900-normal.woff2') format('woff2');
}

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* Brand core (fixed) */
  --magenta: #A4208B;
  --orange:  #FD7F01;
  --gray:    #DEDEDE;
  --white:   #FFFFFF;
  --ink:     #1A1A1A;

  /* Magenta scale */
  --magenta-900:#4E0F42; --magenta-800:#6B155B; --magenta-700:#871B73;
  --magenta-600:#A4208B; --magenta-500:#B93FA2; --magenta-400:#CE6BBC;
  --magenta-300:#E09FD6; --magenta-200:#EFCCE9; --magenta-100:#F8E9F5; --magenta-050:#FCF4FA;

  /* Orange scale (stops at 600 = brand; darker turns brown) */
  --orange-600:#FD7F01; --orange-500:#FE9527; --orange-400:#FEAD57;
  --orange-300:#FEC888; --orange-200:#FEDDB4; --orange-100:#FFEEDA; --orange-050:#FFF7EE;

  /* Neutral scale */
  --neutral-000:#FFFFFF; --neutral-050:#FAFAFA; --neutral-100:#F4F4F4; --neutral-200:#EAEAEA;
  --neutral-300:#DEDEDE; --neutral-400:#C4C4C4; --neutral-500:#9B9B9B; --neutral-600:#6E6E6E;
  --neutral-700:#4A4A4A; --neutral-800:#2C2C2C; --neutral-900:#1A1A1A;

  /* Surfaces */
  --surface-page:var(--white); --surface-subtle:var(--neutral-050); --surface-muted:var(--neutral-100);
  --surface-card:var(--white); --surface-brand:var(--magenta-600); --surface-brand-soft:var(--magenta-050);
  --surface-accent-soft:var(--orange-050); --surface-inverse:var(--neutral-900);

  /* Text */
  --text-heading:var(--magenta-600); --text-body:var(--ink); --text-muted:var(--neutral-600);
  --text-subtle:var(--neutral-500); --text-on-brand:var(--white); --text-on-accent:var(--white);
  --text-link:var(--magenta-600); --text-link-hover:var(--magenta-800);

  /* Borders */
  --border-subtle:var(--neutral-200); --border-default:var(--neutral-300); --border-strong:var(--neutral-400);
  --border-brand:var(--magenta-600); --divider:var(--neutral-300);

  /* CTA (orange) states */
  --cta-bg:var(--orange-600);
  --cta-bg-hover:color-mix(in srgb, var(--orange-600) 90%, #1A1A1A);
  --cta-bg-active:color-mix(in srgb, var(--orange-600) 82%, #1A1A1A);
  --cta-text:var(--white); --cta-disabled-bg:var(--orange-200); --cta-disabled-text:var(--white);

  /* Brand (magenta) button states */
  --brand-bg:var(--magenta-600); --brand-bg-hover:var(--magenta-700); --brand-bg-active:var(--magenta-800);

  /* Focus */
  --focus-ring:var(--magenta-600); --focus-ring-offset:var(--white);

  /* Feedback */
  --success:#1E7A46; --success-soft:#E6F2EB; --error:#B02525; --error-soft:#FBEAEA;

  /* Typography */
  --font-sans:'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-bold:700; --fw-black:900;
  --fs-display:clamp(2.75rem, 1.6rem + 4.2vw, 4.5rem);
  --fs-h1:3rem; --fs-h2:2.25rem; --fs-h3:1.5rem; --fs-h4:1.25rem;
  --fs-body-lg:1.25rem; --fs-body:1.0625rem; --fs-body-sm:0.9375rem; --fs-small:0.8125rem; --fs-eyebrow:0.75rem;
  --lh-tight:1.1; --lh-heading:1.2; --lh-snug:1.4; --lh-body:1.65; --lh-relaxed:1.75;
  --ls-tighter:-0.02em; --ls-tight:-0.01em; --ls-normal:0; --ls-wide:0.04em; --ls-eyebrow:0.14em;

  /* Spacing */
  --space-0:0; --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem; --space-10:8rem;

  /* Radii */
  --radius-xs:4px; --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:24px; --radius-pill:999px;
  --radius-card:var(--radius-lg); --radius-input:var(--radius-sm); --radius-button:var(--radius-sm);

  --border-width:1px; --border-width-strong:2px;

  /* Shadows */
  --shadow-xs:0 1px 2px rgba(26,26,26,0.06);
  --shadow-sm:0 2px 6px rgba(26,26,26,0.07);
  --shadow-md:0 6px 18px rgba(26,26,26,0.08);
  --shadow-lg:0 16px 40px rgba(26,26,26,0.10);
  --shadow-focus:0 0 0 3px rgba(164,32,139,0.35);

  /* Layout */
  --container-max:1200px; --container-narrow:760px; --gutter:var(--space-5); --section-py:var(--space-10);

  /* Motion */
  --ease-standard:cubic-bezier(0.2,0,0,1); --ease-out:cubic-bezier(0.16,1,0.3,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms;

  /* Imagery */
  --img-grayscale:grayscale(100%) contrast(1.02);
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  color: var(--text-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }
p.lead { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--text-body); }

a { color: var(--text-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--text-link-hover); text-decoration: underline; text-underline-offset: 3px; }

small { font-size: var(--fs-small); }
strong { font-weight: var(--fw-medium); }
hr { border: 0; border-top: var(--border-width) solid var(--divider); margin: var(--space-6) 0; }
img { max-width: 100%; display: block; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
::selection { background: var(--magenta-100); color: var(--magenta-900); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---- Utilities ---- */
.container { max-width: var(--container-max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.eyebrow {
  font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--orange-600); margin: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--magenta-600); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--radius-sm) 0;
  font-weight: var(--fw-medium);
}
.skip-link:focus { left: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   WORDMARK
   ============================================================ */
.wordmark {
  display: inline-flex; align-items: baseline; gap: 0.28em;
  font-family: var(--font-sans); font-weight: var(--fw-bold); letter-spacing: -0.01em;
  line-height: 1; white-space: nowrap; text-decoration: none;
}
.wordmark:hover { text-decoration: none; }
.wordmark--sm { font-size: 1.125rem; }
.wordmark__first { color: var(--magenta-600); }
.wordmark__second { color: var(--orange-600); }
.wordmark__dot { display: none; }
.wordmark--on-dark .wordmark__first { color: var(--white); }
.wordmark--on-dark .wordmark__second { color: var(--orange-400); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-sans); font-weight: var(--fw-medium); line-height: 1; letter-spacing: 0.01em;
  border-radius: var(--radius-button); cursor: pointer; border: 1px solid transparent;
  text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--sm { padding: 8px 16px; font-size: var(--fs-body-sm); min-height: 40px; }
.btn--md { padding: 12px 24px; font-size: var(--fs-body); min-height: 48px; }
.btn--lg { padding: 16px 32px; font-size: var(--fs-body-lg); min-height: 56px; }
.btn--full { width: 100%; }

.btn--primary { background: var(--cta-bg); color: var(--cta-text); }
.btn--primary:hover { background: var(--cta-bg-hover); color: var(--cta-text); }
.btn--primary:active { background: var(--cta-bg-active); }

.btn--secondary { background: var(--brand-bg); color: var(--text-on-brand); }
.btn--secondary:hover { background: var(--brand-bg-hover); color: var(--text-on-brand); }
.btn--secondary:active { background: var(--brand-bg-active); }

.btn--outline { background: transparent; color: var(--magenta-600); border-color: var(--magenta-600); }
.btn--outline:hover { background: var(--magenta-050); color: var(--magenta-600); }
.btn--outline:active { background: var(--magenta-100); }

/* Outline auf magenta Fläche (Buchungskarte) */
.btn--on-brand { background: var(--white); color: var(--magenta-700); }
.btn--on-brand:hover { background: var(--magenta-050); color: var(--magenta-800); }

/* ============================================================
   NAV HEADER
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.9);
  -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}
.site-header__bar {
  max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter);
  height: 72px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
}
.site-header__brand { display: inline-flex; flex-direction: column; gap: 1px; text-decoration: none; }
.site-header__brand:hover { text-decoration: none; }
.site-header__tagline {
  font-size: 11px; line-height: 1.2; font-weight: var(--fw-medium);
  letter-spacing: 0.02em; color: var(--orange-600);
}
/* Header: kompletter Name in Magenta (auch "Ziegler", das sonst orange ist) */
.site-header__brand .wordmark__second { color: var(--magenta-600); }
.site-nav { display: flex; align-items: center; gap: var(--space-6); }
.site-nav__link {
  font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--neutral-800);
  text-decoration: none; padding: 6px 2px; border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.site-nav__link:hover { color: var(--magenta-600); text-decoration: none; }
.site-nav__link.is-active { color: var(--magenta-600); border-bottom-color: var(--magenta-600); }
.site-header__actions { display: flex; align-items: center; gap: var(--space-4); }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 8px; cursor: pointer;
}
.nav-toggle__bar {
  display: block; width: 26px; height: 2.5px; border-radius: 2px; background: var(--magenta-600);
  transition: transform var(--dur-base) var(--ease-standard), opacity var(--dur-fast);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.mobile-nav { display: none; border-top: 1px solid var(--border-subtle); background: var(--white); padding: var(--space-5) var(--gutter); }
.mobile-nav.is-open { display: block; }
.mobile-nav__list { display: flex; flex-direction: column; gap: var(--space-4); }
.mobile-nav__link { font-size: var(--fs-h4); font-weight: var(--fw-medium); color: var(--neutral-800); text-decoration: none; }
.mobile-nav__link:hover { color: var(--magenta-600); text-decoration: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; overflow: hidden; background: var(--white); }
.hero__motif {
  position: absolute; top: -40px; right: -120px; width: 760px; max-width: 90%; opacity: 0.7; pointer-events: none;
}
.hero__inner {
  position: relative; max-width: var(--container-max); margin: 0 auto;
  padding: clamp(48px,7vw,104px) var(--gutter);
  display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr);
  gap: clamp(32px,5vw,72px); align-items: center;
}
.hero__content { display: flex; flex-direction: column; gap: var(--space-5); max-width: 640px; }
.hero__title {
  margin: 0; font-size: var(--fs-display); font-weight: var(--fw-black);
  line-height: 1.05; letter-spacing: -0.02em; color: var(--text-heading);
}
.hero__intro { margin: 0; font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--text-body); max-width: 560px; }
.hero__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-2); }
.hero__portrait {
  border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5; background: var(--neutral-200);
}
.hero__portrait img { width: 100%; height: 100%; object-fit: cover; }

/* Positionierungs-Leiste unter Hero */
.trustbar { border-top: 1px solid var(--border-subtle); background: var(--surface-subtle); }
.trustbar__inner {
  max-width: var(--container-max); margin: 0 auto; padding: var(--space-5) var(--gutter);
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: center; justify-content: center;
}
.trustbar__item {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-size: var(--fs-body-sm); color: var(--neutral-700); font-weight: var(--fw-medium);
}
.trustbar__item::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange-600); flex: 0 0 auto;
}

/* ============================================================
   SECTION HEADING
   ============================================================ */
.section-heading { display: flex; flex-direction: column; gap: var(--space-3); }
.section-heading__title { margin: 0; color: var(--text-heading); font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-tight); }
.section-heading__intro { margin: 0; max-width: 640px; font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--text-body); }

/* ============================================================
   HALTUNG (magenta band)
   ============================================================ */
.haltung { background: var(--magenta-600); color: var(--text-on-brand); }
.haltung__inner {
  max-width: 72rem; margin: 0 auto; padding: clamp(56px,7vw,96px) var(--gutter);
  display: flex; flex-direction: column; gap: var(--space-5);
}
.haltung__eyebrow {
  font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--orange-300); margin: 0;
}
.haltung__lead { margin: 0; font-size: clamp(1.4rem,2.4vw,1.9rem); font-weight: var(--fw-medium); line-height: 1.4; letter-spacing: -0.01em; }
.haltung__body { margin: 0; font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: rgba(255,255,255,0.88); }
.haltung__aside { margin: 0; font-size: var(--fs-body); color: rgba(255,255,255,0.72); font-style: italic; }
.haltung__cite { display: block; margin-top: var(--space-2); font-style: normal; font-size: var(--fs-small); color: rgba(255,255,255,0.6); }

/* ============================================================
   LEISTUNGEN
   ============================================================ */
.leistungen { background: var(--surface-subtle); }
.section-shell { max-width: var(--container-max); margin: 0 auto; padding: clamp(64px,8vw,128px) var(--gutter); display: flex; flex-direction: column; gap: var(--space-8); }
.service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }

/* Subgrid: alle Karten teilen sich dieselben Zeilen-Tracks, damit Text, "Typische
   Situationen" und die erste Zeile der Kundenstimme ueber die Karten hinweg fluchten */
.service-card {
  display: grid; grid-template-rows: subgrid; grid-row: span 7; row-gap: 0;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-card); overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.service-card:hover, .service-card:focus-within { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.service-card__media { grid-row: 1; position: relative; overflow: hidden; min-height: 200px; background: var(--neutral-200); }
.service-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: filter var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard);
}
.service-card:hover .service-card__media img { transform: scale(1.03); }
/* Dezentes KI-Hinweis-Label, hochkant am rechten Bildrand, unten beginnend */
.service-card__ai-note {
  position: absolute; bottom: 12px; right: 7px; z-index: 2; margin: 0;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 11px; line-height: 1; letter-spacing: 0.01em;
  color: rgba(255,255,255,0.9); text-shadow: 0 1px 3px rgba(26,26,26,0.55);
  pointer-events: none; white-space: nowrap;
}
.service-card__body { grid-row: 2 / span 6; padding: var(--space-6); display: grid; grid-template-rows: subgrid; row-gap: 1.25rem; }
/* Karten-CTA nur in der Mobilansicht (Desktop hat die sichtbare Header-CTA) */
.service-card__cta { display: none; align-self: stretch; margin-top: var(--space-1); white-space: normal; text-align: center; }
.service-card__index { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--magenta-300); letter-spacing: var(--ls-wide); }
.service-card__title { margin: 0; font-size: var(--fs-h3); color: var(--text-heading); }
/* min-height reserviert 2 Zeilen, damit Text/Themen ueber die Karten hinweg fluchten */
.service-card__subtitle { margin: 0; min-height: 2.8em; font-size: var(--fs-body-lg); font-weight: var(--fw-medium); line-height: var(--lh-snug); color: var(--orange-600); }
.service-card__text { margin: 0; color: var(--text-body); }

/* TopicList */
.topics { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
.topics__title {
  font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--orange-600);
}
.topics__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.topics__item { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--fs-body); line-height: var(--lh-snug); color: var(--text-body); }
.topics__item::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--magenta-600); }

/* ============================================================
   KUNDENSTIMMEN (in der jeweiligen Leistungskarte, unter den Situationen)
   ============================================================ */
.service-quote {
  margin: 0; display: flex; flex-direction: column; gap: var(--space-2);
  padding-left: var(--space-4); border-left: 3px solid var(--magenta-600);
}
.service-quote__text { margin: 0; font-size: var(--fs-body); line-height: var(--lh-snug); color: var(--text-body); font-style: italic; }
.service-quote__source { font-size: var(--fs-body-sm); color: var(--text-muted); }
/* Platzhalter sichtbar markieren, damit nichts versehentlich als echte Referenz live geht */
.service-quote.is-placeholder { border-left-style: dashed; border-left-color: var(--orange-400); }
.service-quote.is-placeholder .service-quote__text,
.service-quote.is-placeholder .service-quote__source { color: var(--neutral-600); font-style: italic; }

/* ============================================================
   ÜBER MICH
   ============================================================ */
.about { background: var(--white); }
.about__grid { display: grid; grid-template-columns: minmax(0,0.8fr) minmax(0,1.2fr); gap: clamp(32px,5vw,72px); align-items: start; }
/* Portrait + Badges wandern als Einheit mit (sticky liegt auf der Spalte, damit
   das overflow:hidden des gerundeten Portraits die Badges nicht abschneidet) */
.about__portrait-col { display: flex; flex-direction: column; gap: var(--space-5); position: sticky; top: 96px; }
.about__portrait {
  border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md);
  aspect-ratio: 4/5; background: var(--neutral-200);
}
.about__portrait img { width: 100%; height: 100%; object-fit: cover; }

/* Zertifikats-Badges (selbst gehostet, kein Credly-Embed) */
.badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.badges__link {
  display: block; border-radius: var(--radius-sm);
  transition: transform var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard);
}
.badges__link:hover { transform: translateY(-2px); opacity: 0.85; }
.badges__link img { display: block; width: auto; height: 84px; max-width: 100%; object-fit: contain; }
.about__content { display: flex; flex-direction: column; gap: var(--space-6); }
.about__content p { margin: 0; color: var(--text-body); max-width: 62ch; }
.about__subhead { margin: 0; font-size: var(--fs-h4); }

.factbox {
  display: flex; flex-direction: column; gap: var(--space-3); background: var(--surface-subtle);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6);
}
.factbox__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.factbox__item { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--fs-body-sm); line-height: 1.5; }
.factbox__item::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--orange-600); }

.tags-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.tags-col { display: flex; flex-direction: column; gap: var(--space-3); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  display: inline-flex; align-items: center; padding: 6px 14px; border-radius: var(--radius-pill);
  font-size: var(--fs-body-sm); font-weight: var(--fw-medium); line-height: 1.2;
  background: var(--neutral-100); color: var(--neutral-800); border: 1px solid var(--border-default);
}
.chip--magenta { background: var(--magenta-050); color: var(--magenta-700); border-color: var(--magenta-200); }
.chip--orange { background: var(--orange-050); color: var(--orange-600); border-color: var(--orange-200); }

/* ============================================================
   KONTAKT
   ============================================================ */
.kontakt { background: var(--surface-subtle); }
.kontakt__grid { display: grid; grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr); gap: var(--space-6); align-items: stretch; }

.booking-card {
  background: var(--magenta-600); color: var(--text-on-brand); border-radius: var(--radius-xl);
  padding: clamp(28px,4vw,48px); display: flex; flex-direction: column; gap: var(--space-6);
}
.booking-card h3 { margin: 0; color: var(--white); font-size: var(--fs-h3); }
.booking-card__sub { margin: 0; color: rgba(255,255,255,0.85); }
.booking-card__divider { height: 1px; background: rgba(255,255,255,0.2); }
.channels { display: flex; flex-direction: column; gap: var(--space-5); }
.channel { display: flex; flex-direction: column; gap: 2px; }
.channel__label { font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--magenta-300); }
.channel__value { font-size: var(--fs-body); font-weight: var(--fw-medium); }
.channel__value a { color: var(--white); text-decoration: none; }
.channel__value a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.channel__sub { font-size: var(--fs-small); color: rgba(255,255,255,0.65); }
.channel__linkedin {
  display: inline-flex; align-items: center; gap: var(--space-3); align-self: flex-start;
  color: var(--white); text-decoration: none; font-size: var(--fs-body); font-weight: var(--fw-medium);
}
.channel__linkedin svg { flex: 0 0 auto; display: block; }
.channel__linkedin span { color: var(--white); }
.channel__linkedin:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.channel__linkedin:hover span { text-decoration: underline; text-underline-offset: 3px; }
.channel__linkedin:hover svg { opacity: 0.9; }

.form-card {
  background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl);
  padding: clamp(28px,4vw,48px); box-shadow: var(--shadow-sm);
}
.form-card h3 { margin: 0 0 var(--space-5); font-size: var(--fs-h3); }
.contact-form { display: flex; flex-direction: column; gap: var(--space-5); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label { font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--text-body); }
.field__req { color: var(--orange-600); margin-left: 2px; }
.field__control {
  width: 100%; min-height: 48px; padding: 12px 14px; font-family: var(--font-sans); font-size: var(--fs-body);
  color: var(--text-body); background: var(--white); border: 1px solid var(--border-default);
  border-radius: var(--radius-input); outline: none;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
textarea.field__control { min-height: auto; line-height: var(--lh-snug); resize: vertical; }
.field__control:focus { border-color: var(--magenta-600); box-shadow: var(--shadow-focus); }
.field__msg { font-size: var(--fs-small); color: var(--text-muted); }
.field.has-error .field__control { border-color: var(--error); }
.field.has-error .field__control:focus { box-shadow: 0 0 0 3px rgba(176,37,37,0.28); }
.field.has-error .field__msg { color: var(--error); }

/* Checkbox */
.checkbox { display: flex; flex-direction: column; gap: var(--space-1); }
.checkbox__label { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--fs-body-sm); color: var(--text-body); cursor: pointer; line-height: var(--lh-snug); }
.checkbox__box { position: relative; flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; }
.checkbox__box input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.checkbox__visual {
  display: flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: var(--radius-xs); border: 2px solid var(--border-strong); background: var(--white);
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.checkbox__visual svg { opacity: 0; }
.checkbox__box input:checked + .checkbox__visual { background: var(--magenta-600); border-color: var(--magenta-600); }
.checkbox__box input:checked + .checkbox__visual svg { opacity: 1; }
.checkbox__box input:focus-visible + .checkbox__visual { box-shadow: var(--shadow-focus); }
.checkbox.has-error .checkbox__visual { border-color: var(--error); }
.checkbox__msg { font-size: var(--fs-small); color: var(--error); padding-left: 34px; }

/* Success state */
.form-success { display: none; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.form-success__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
  border-radius: 50%; background: var(--success-soft);
}
.form-card.is-sent .contact-form { display: none; }
.form-card.is-sent .form-success { display: flex; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--magenta-600); color: rgba(255,255,255,0.85); }
.site-footer__inner {
  max-width: var(--container-max); margin: 0 auto; padding: var(--space-7) var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5);
}
.site-footer__nav { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.site-footer__nav a { font-size: var(--fs-body-sm); color: rgba(255,255,255,0.82); text-decoration: none; }
.site-footer__nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-footer__copy { font-size: var(--fs-small); color: rgba(255,255,255,0.7); }
/* Footer-Brand: Name komplett Weiss (inkl. Punkt), Tagline Orange darunter */
.site-footer__brand { display: inline-flex; flex-direction: column; gap: 2px; }
.site-footer__brand .wordmark__first, .site-footer__brand .wordmark__second { color: var(--white); }
.site-footer__brand .wordmark__dot { background: var(--white); }
.site-footer__tagline {
  font-size: 11px; line-height: 1.2; font-weight: var(--fw-medium);
  letter-spacing: 0.02em; color: var(--orange-400);
}
.site-footer__note {
  max-width: var(--container-max); margin: 0 auto;
  padding: var(--space-4) var(--gutter);
  border-top: 1px solid rgba(255,255,255,0.15);
}
.site-footer__note p { margin: 0; font-size: var(--fs-small); color: rgba(255,255,255,0.55); }

/* ============================================================
   LEGAL PAGES (Impressum / Datenschutz)
   ============================================================ */
.legal { padding: clamp(48px,7vw,96px) 0; }
.legal h1 { font-size: var(--fs-h1); margin-bottom: var(--space-6); }
.legal h2 { font-size: var(--fs-h3); margin-top: var(--space-7); }
.legal h3 { font-size: var(--fs-h4); margin-top: var(--space-5); }
.legal p, .legal li { color: var(--text-body); max-width: 70ch; }
.legal a { color: var(--text-link); }
.legal .placeholder {
  background: var(--orange-050); border: 1px dashed var(--orange-400); border-radius: var(--radius-sm);
  padding: 2px 8px; color: var(--neutral-800); font-size: var(--fs-body-sm);
}
.legal__back { display: inline-block; margin-top: var(--space-8); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  html { scroll-padding-top: 72px; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__portrait-wrap { order: -1; max-width: 420px; }
  .about__grid { grid-template-columns: 1fr; }
  .about__portrait-col { position: static; max-width: 360px; }
  .kontakt__grid { grid-template-columns: 1fr; }
  .tags-grid { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: 1fr; }
  /* Mobil (1 Spalte gestapelt): kein Fluchten noetig -> zurueck auf Flexbox,
     damit die sichtbare Karten-CTA als zusaetzliches Element nicht das Subgrid sprengt */
  .service-card { display: flex; flex-direction: column; }
  .service-card__body { display: flex; flex-direction: column; gap: 1.25rem; flex: 1; }
  .service-quote { margin: auto 0 0; }
  .service-card__cta { display: inline-flex; }
  .site-nav, .site-header__actions { display: none; }
  .nav-toggle { display: inline-flex; }
  /* Trustbar: linksbuendig stapeln (statt zentriert verschoben) */
  .trustbar__inner { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .trustbar__item { align-items: flex-start; }
  .trustbar__item::before { margin-top: 9px; }
}
@media (max-width: 520px) {
  .form-row { grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; }
}