/* =============================================================
   dirkhollstein.com — Stylesheet
   Design System v1.0 · Intellectual Premium
   Single source of truth for all pages.
   ============================================================= */

/* -------------------------------------------------------------
   FONTS — local hosting (DSGVO)
   Files expected in /assets/fonts/. Falls back to Georgia / system-ui
   if a font file is missing.
   ------------------------------------------------------------- */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/libre-baskerville/libre-baskerville-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/libre-baskerville/libre-baskerville-italic.woff2') format('woff2');
}
/* Inter is a variable font — one file serves weights 300–600. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/inter/inter.woff2') format('woff2-variations');
}
/* Cormorant Garamond — used ONLY for the UMOYA wordmark per brand spec.
   Light weight, scoped to .umoya-logo so it doesn't pollute headlines. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/cormorant/cormorant-garamond-300.woff2') format('woff2');
}

/* -------------------------------------------------------------
   DESIGN TOKENS — from Design_System_dirkhollstein.com.md
   ------------------------------------------------------------- */
:root {
  /* Colors (Design System §2) */
  --bg:        #FAF7F2;  /* Warmes Off-White */
  --ink:       #2A2826;  /* Warmes Anthrazit */
  --mid:       #555555;  /* Mittelgrau */
  --gold:      #9A7B3F;  /* Altgold gedämpft */
  --gold-deep: #7E6433;  /* Altgold hover/press */
  --surface:   #F3EFE8;  /* Helles Leinen */

  /* Typography */
  --serif: 'Libre Baskerville', 'Iowan Old Style', Georgia, serif;
  --sans:  'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;

  /* Layout */
  --max:    1200px;
  --read:    680px;     /* lesefreundliche Spalte */
  --pad-x:  clamp(24px, 6vw, 96px);
  --pad-y:  clamp(72px, 9vw, 140px);

  /* Spacing scale */
  --s-1:  8px;
  --s-2: 16px;
  --s-3: 32px;
  --s-4: 64px;
  --s-5: 120px;

  /* Borders / radii */
  --radius: 2px;
  --hairline: 1px solid rgba(42, 40, 38, 0.1);
  --hairline-soft: 1px solid rgba(42, 40, 38, 0.06);

  /* Motion */
  --dur:  240ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* -------------------------------------------------------------
   RESET & BASE
   ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.675;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* -------------------------------------------------------------
   ACCESSIBILITY HELPERS
   ------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--pad-x);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 20px;
  z-index: 200;
  border-radius: var(--radius);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------
   LAYOUT
   ------------------------------------------------------------- */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.section { padding: var(--pad-y) 0; }
.section + .section { border-top: var(--hairline); }
.section--alt { background: var(--surface); }
.section--alt + .section { border-top: none; }

/* -------------------------------------------------------------
   NAVIGATION
   ------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface);
  border-bottom: var(--hairline);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav--hidden { transform: translateY(-100%); }
.nav__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 20px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.nav__brand {
  display: flex;
  flex-direction: column;
  gap: 0;
  text-decoration: none;
  border: 0;
}
.nav__name {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.nav__line {
  display: block;
  width: 48px;
  height: 2px;
  background: var(--gold);
  margin-top: 5px;
}
.nav__links {
  display: flex;
  gap: 36px;
}
.nav__links a {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.02em;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav__links a:hover { color: var(--gold); }
.nav__links a[aria-current='page'] {
  color: var(--ink);
  border-bottom-color: var(--gold);
}

/* Mobile nav */
.nav__toggle { display: none; }
.nav__drawer { display: none; }

@media (max-width: 760px) {
  /* Mobile: Nav nicht kleben lassen — sie scrollt mit der Seite weg,
     statt oben links stehen zu bleiben und beim Lesen zu stören. */
  .nav { position: static; }
  .nav--hidden { transform: none; }
  .nav__links { display: none; }
  .nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    color: var(--ink);
    font-size: 1.25rem;
  }
  .nav__drawer {
    position: fixed;
    inset: 0;
    background: var(--surface);
    z-index: 150;
    padding: 100px var(--pad-x) 40px;
    transform: translateY(-100%);
    transition: transform 320ms var(--ease);
    display: block;
  }
  .nav__drawer[aria-hidden='false'] { transform: translateY(0); }
  .nav__drawer ul { display: flex; flex-direction: column; gap: 24px; }
  .nav__drawer a {
    font-family: var(--serif);
    font-size: 1.5rem;
    color: var(--ink);
    text-decoration: none;
    border: 0;
  }
  .nav__drawer-close {
    position: absolute;
    top: 20px;
    right: var(--pad-x);
    width: 40px; height: 40px;
    color: var(--ink);
    font-size: 1.5rem;
  }
  body.nav-open { overflow: hidden; }
  /* The drawer is position:fixed, but the scroll-aware nav applies a transform
     (.nav--hidden), which would make .nav the containing block and break the
     fullscreen overlay (menu items bleed over the page). Force no transform
     while the drawer is open so it always anchors to the viewport. */
  body.nav-open .nav { transform: none !important; transition: none !important; }
}

/* -------------------------------------------------------------
   BUTTONS (Design System §5)
   ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 15px 34px;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
  color: var(--gold);
  border-color: var(--gold);
}
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* -------------------------------------------------------------
   HERO
   ------------------------------------------------------------- */
.hero { padding: clamp(80px, 10vw, 160px) 0 var(--pad-y); }
.hero__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 100px);
  align-items: center;
}
@media (max-width: 760px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__photo { order: -1; max-width: 420px; margin: 0 auto; }
}
.hero__eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 24px;
}
.hero__headline {
  font-family: var(--serif);
  font-size: clamp(2.125rem, 4.5vw, 3.375rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 28px;
  text-wrap: balance;
}
.hero__accent {
  display: block;
  width: 48px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 28px;
}
.hero__body {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--mid);
  max-width: 480px;
  margin-bottom: 44px;
}
.hero__photo {
  aspect-ratio: 4 / 5;
  background: linear-gradient(150deg, #E8E0D4 0%, #D4C9B8 60%, #C4B49A 100%);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero__photo-label {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(42, 40, 38, 0.4);
  text-align: center;
  line-height: 1.8;
  padding: 0 24px;
}

/* -------------------------------------------------------------
   SECTION HEAD (shared eyebrow + h2 pattern)
   ------------------------------------------------------------- */
.section-head { margin-bottom: clamp(40px, 5vw, 72px); }
.section-head__eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-head__eyebrow::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--gold);
}
.section-head h2 {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3.5vw, 2.625rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
  max-width: 640px;
  text-wrap: balance;
}
.section-head p {
  margin-top: 20px;
  color: var(--mid);
  max-width: 560px;
  font-size: 1.0625rem;
}

/* -------------------------------------------------------------
   POSITIONING (Startseite)
   ------------------------------------------------------------- */
.positioning__inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(40px, 5vw, 100px);
  align-items: start;
}
@media (max-width: 680px) {
  .positioning__inner { grid-template-columns: 1fr; }
}
.positioning__label {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 6px;
}
.positioning__text h2 {
  font-family: var(--serif);
  font-size: clamp(1.625rem, 3vw, 2.375rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 28px;
  text-wrap: balance;
}
.positioning__text p {
  color: var(--mid);
  max-width: var(--read);
  margin-bottom: 20px;
}
.positioning__text p:last-child { margin-bottom: 0; }
.positioning__more {
  color: var(--gold);
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  border: 0;
}
.positioning__more:hover { color: var(--gold-deep); }

/* -------------------------------------------------------------
   FÜR WEN
   ------------------------------------------------------------- */
.fuerwen__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
@media (max-width: 600px) {
  .fuerwen__grid { grid-template-columns: 1fr; }
}
.fuerwen__item {
  padding: 40px 44px;
  border-bottom: 1px solid rgba(42, 40, 38, 0.08);
  border-right: 1px solid rgba(42, 40, 38, 0.08);
}
.fuerwen__item:nth-child(2n) { border-right: none; }
.fuerwen__item:nth-last-child(-n+2) { border-bottom: none; }
@media (max-width: 600px) {
  .fuerwen__item { border-right: none; padding: 32px 0; }
  .fuerwen__item:last-child { border-bottom: none; }
}
.fuerwen__item-title {
  font-family: var(--serif);
  font-size: 1.1875rem;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 12px;
  line-height: 1.35;
}
.fuerwen__item-text {
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--mid);
  line-height: 1.65;
}

/* -------------------------------------------------------------
   ANGEBOTE
   ------------------------------------------------------------- */
.offers { /* zentrierte Innenspalte für Headline + Offers */ }
.offers__inner { max-width: 920px; margin: 0 auto; }
.offers__list { display: flex; flex-direction: column; }
.offer {
  padding: 44px 0;
  border-bottom: 1px solid rgba(42, 40, 38, 0.1);
  display: grid;
  grid-template-columns: 1fr 2.5fr auto;
  gap: 32px;
  align-items: start;
}
.offer:first-child { padding-top: 0; }
.offer:last-child { border-bottom: none; }
@media (max-width: 680px) {
  .offer { grid-template-columns: 1fr; gap: 16px; }
}
.offer__tag {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 4px;
}
.offer__title {
  font-family: var(--serif);
  font-size: 1.3125rem;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 10px;
  line-height: 1.3;
}
.offer__desc {
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--mid);
  line-height: 1.65;
  max-width: 460px;
}
.offer__cta { padding-top: 2px; }

/* -------------------------------------------------------------
   VERTRAUEN
   ------------------------------------------------------------- */
.trust__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 100px);
  align-items: center;
}
@media (max-width: 680px) {
  .trust__inner { grid-template-columns: 1fr; }
}
.trust__quote blockquote {
  font-family: var(--serif);
  font-size: clamp(1.1875rem, 2.2vw, 1.5rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.6;
  color: var(--ink);
  padding-left: 28px;
  border-left: 2px solid var(--gold);
  margin-bottom: 20px;
  max-width: 580px;
}
.trust__quote cite {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--mid);
  letter-spacing: 0.03em;
  padding-left: 28px;
  display: block;
}
.trust__facts { display: flex; flex-direction: column; gap: 32px; }
.trust__fact-number {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 6px;
}
.trust__fact-label {
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--mid);
  line-height: 1.5;
  max-width: 420px;
}
.trust__facts-divider {
  width: 100%;
  height: 1px;
  background: rgba(42, 40, 38, 0.1);
}

/* -------------------------------------------------------------
   ABSCHLUSS-CTA
   ------------------------------------------------------------- */
.closing { text-align: center; padding: clamp(100px, 12vw, 180px) 0; }
.closing__headline {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
  max-width: 600px;
  margin: 0 auto 40px;
  text-wrap: balance;
}
.closing__sub {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--mid);
  margin: 0 auto 48px;
  max-width: 520px;
}

/* -------------------------------------------------------------
   PAGE HEADER (used on inner pages — Über Dirk, Anfrage, etc.)
   ------------------------------------------------------------- */
.page-header {
  padding: clamp(100px, 11vw, 160px) 0 clamp(40px, 6vw, 80px);
}
.page-header__eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
}
.page-header h1 {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
  max-width: 760px;
  text-wrap: balance;
}
.page-header__lead {
  margin-top: 28px;
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--mid);
  max-width: 620px;
}

/* -------------------------------------------------------------
   PROSE — long-form text pages (Über Dirk, Impressum, Datenschutz)
   ------------------------------------------------------------- */
.prose {
  max-width: var(--read);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink);
}
.prose > * + * { margin-top: 1.25em; }
.prose h2 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
  margin-top: 2.4em;
  text-wrap: balance;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin-top: 1.8em;
}
.prose p { color: var(--ink); }
.prose a {
  color: var(--ink);
  border-bottom: 1px solid var(--gold);
  text-decoration: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.prose a:hover { color: var(--gold-deep); border-bottom-color: var(--gold-deep); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.4em; }
.prose strong { font-weight: 600; }
.prose blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--ink);
  padding-left: 28px;
  border-left: 2px solid var(--gold);
  max-width: 580px;
}
.prose hr {
  border: 0;
  border-top: 1px solid rgba(42, 40, 38, 0.15);
  margin: 2.5em 0;
}

/* -------------------------------------------------------------
   FORMS (Anfrage page)
   ------------------------------------------------------------- */
.form { max-width: var(--read); display: flex; flex-direction: column; gap: 32px; }
.form__field { display: flex; flex-direction: column; gap: 8px; }
.form__label {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mid);
}
.form__input,
.form__textarea,
.form__select {
  font-family: var(--sans);
  font-size: 1.0625rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(42, 40, 38, 0.25);
  padding: 10px 0;
  width: 100%;
  transition: border-color var(--dur) var(--ease);
}
.form__input:focus,
.form__textarea:focus,
.form__select:focus {
  outline: none;
  border-bottom-color: var(--gold);
}
.form__textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.6;
}
.form__select { -webkit-appearance: none; appearance: none; padding-right: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%239A7B3F' stroke-width='1.5' d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
}

/* Radio cards for Anfrage option */
.form__radios {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
}
.form__radio {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(42, 40, 38, 0.1);
  cursor: pointer;
  align-items: flex-start;
}
.form__radio:last-child { border-bottom: none; }
.form__radio input[type='radio'] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border: 1px solid rgba(42, 40, 38, 0.4);
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
  transition: border-color var(--dur), background var(--dur);
}
.form__radio input[type='radio']:checked {
  border-color: var(--gold);
  background: radial-gradient(circle, var(--gold) 0 5px, transparent 6px);
}
.form__radio-label {
  font-family: var(--serif);
  font-size: 1.0625rem;
  color: var(--ink);
  line-height: 1.4;
}
.form__radio-desc {
  display: block;
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--mid);
  margin-top: 4px;
}

/* Checkbox (DSGVO consent) */
.form__check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--mid);
}
.form__check input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border: 1px solid rgba(42, 40, 38, 0.4);
  border-radius: 2px;
  margin-top: 3px;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color var(--dur), background var(--dur);
  position: relative;
}
.form__check input[type='checkbox']:checked {
  border-color: var(--gold);
  background: var(--gold);
}
.form__check input[type='checkbox']:checked::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: solid var(--bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Honeypot — invisible, off-screen */
.form__hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Inline messages */
.form__error {
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--mid);
  margin-top: 6px;
}
/* Fehlmarkierung — deutlicher: kraeftigere Linie + dezent roter Label-Ton */
.form__field--invalid .form__input,
.form__field--invalid .form__textarea,
.form__field--invalid .form__select {
  border-bottom-color: #B05A3A;
  border-bottom-width: 2px;
}
.form__field--invalid .form__label { color: #B05A3A; }

/* Datenschutz-Checkbox markieren (liegt in .form__check, nicht .form__field) */
.form__check--invalid { color: #B05A3A; }
.form__check--invalid input[type='checkbox'] { border-color: #B05A3A; }

.form__alert {
  font-family: var(--sans);
  font-size: 0.9375rem;
  padding: 16px 20px;
  border-left: 2px solid var(--gold);
  background: var(--surface);
  color: var(--ink);
}
.form__alert--error { border-left-color: #B05A3A; }

/* Pflichtfeld-Stern */
.form__req { color: var(--gold); font-weight: 400; }

/* Grosse Bestaetigung nach Versand — VOLLBILD-Uebernahme (Formular + Seite
   "verschwinden", wie die Danke-Seite von taebetty.com) */
.form__success-screen {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--bg);
  display: grid;
  place-items: center;
  padding: 2rem;
  animation: revealUp 320ms var(--ease) both;
}
.form__success-inner {
  max-width: 540px;
  text-align: center;
}
.form__success-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 1.25rem;
}
.form__success-text {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--mid);
  margin: 0 0 2.5rem;
}
.form__success-back a {
  font-family: var(--sans);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.form__success-back a:hover { color: var(--ink); }

/* -------------------------------------------------------------
   ASSESSMENT EMBED SLOT
   ------------------------------------------------------------- */
.assessment-slot {
  margin-top: clamp(56px, 7vw, 96px);
  padding: 40px;
  border: 1px dashed rgba(42, 40, 38, 0.25);
  background: var(--surface);
  border-radius: var(--radius);
  text-align: center;
}
.assessment-slot__label {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
  display: block;
}
.assessment-slot__text {
  font-family: var(--serif);
  font-size: 1.125rem;
  color: var(--ink);
  line-height: 1.5;
  margin: 0 auto;
  max-width: 480px;
}

/* -------------------------------------------------------------
   PRESS / MEDIEN GRID
   ------------------------------------------------------------- */
.press__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-top: 32px;
}
.press__photo {
  aspect-ratio: 4 / 5;
  background: linear-gradient(150deg, #E8E0D4 0%, #D4C9B8 60%, #C4B49A 100%);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.press__photo img { width: 100%; height: 100%; object-fit: cover; }
.press__photo-label {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(42, 40, 38, 0.4);
  text-align: center;
  padding: 0 12px;
  line-height: 1.7;
}
.press__topics { display: flex; flex-direction: column; gap: 28px; max-width: 760px; }
.press__topic {
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(42, 40, 38, 0.1);
}
.press__topic:last-child { border-bottom: none; }
.press__topic h3 {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.3;
}
.press__topic p {
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--mid);
  line-height: 1.65;
  max-width: 580px;
}
.press__downloads { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.press__download {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(42, 40, 38, 0.15);
  padding: 10px 0;
  transition: color var(--dur), border-color var(--dur);
  align-self: flex-start;
}
.press__download::before {
  content: '↓';
  color: var(--gold);
  font-weight: 500;
}
.press__download:hover { color: var(--gold); border-bottom-color: var(--gold); }
.press__contact {
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--mid);
  line-height: 1.7;
  margin-top: 12px;
}
.press__contact a { color: var(--ink); border-bottom: 1px solid rgba(42, 40, 38, 0.2); text-decoration: none; }
.press__contact a:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* Two-column layout for inner pages (sidebar meta + main prose) */
.split {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(40px, 5vw, 100px);
  align-items: start;
}
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } }
.split__label {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 6px;
}

/* -------------------------------------------------------------
   PROSE-COLS — Editorial side-headline layout for long-form pages.
   H2s sit in the left column, body in the right. Auto-flow
   alternates head/body to form rows. Use:

     <article class="prose-cols">
       <header class="prose-cols__head"><h2>…</h2></header>
       <div class="prose-cols__body prose"><p>…</p></div>
       <header class="prose-cols__head"><h2>…</h2></header>
       <div class="prose-cols__body prose"><p>…</p></div>
       …
     </article>

   For elements that should span both columns (figures, hr, CTAs):
     <div class="prose-cols__full">…</div>
   ------------------------------------------------------------- */
.prose-cols {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(40px, 5vw, 100px);
  row-gap: clamp(56px, 7vw, 96px);
  align-items: start;
}
.prose-cols__head { padding-top: 4px; }
.prose-cols__head h2 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
  text-wrap: balance;
  border-left: 2px solid var(--gold);
  padding-left: 18px;
  margin: 0;
}
.prose-cols__body > * + * { margin-top: 1.25em; }
.prose-cols__body > h3:not(:first-child) { margin-top: 1.8em; }
.prose-cols__full { grid-column: 1 / -1; }

@media (max-width: 760px) {
  .prose-cols {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
  .prose-cols__head { padding-top: 0; }
  .prose-cols__head h2 { padding-left: 14px; }
  .prose-cols__body { margin-top: 4px; }
  /* On mobile, give a little more breathing room before each new section */
  .prose-cols__body + .prose-cols__head { margin-top: 32px; }
}

/* -------------------------------------------------------------
   UMOYA LOGO — laut Brand-Style-Guide (Cormorant Garamond Light,
   Linie in voller Schriftbreite, „SYSTEM" in Inter mit Sperrung).
   Inline gebaut: kein zusätzliches Bild-Asset, scharf in jeder
   Größe, per CSS skalierbar via --logo-size.
   ------------------------------------------------------------- */
.umoya-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: 'Cormorant Garamond', 'Libre Baskerville', Georgia, serif;
  color: var(--ink);
  text-decoration: none;
  border: 0;
  --logo-size: 1.5rem;
  line-height: 1;
}
.umoya-logo__word {
  font-size: var(--logo-size);
  font-weight: 300;
  letter-spacing: 0.2em;
  /* Letter-spacing schiebt rechts — ausgleichen: padding-right = letter-spacing */
  padding-right: 0.2em;
}
.umoya-logo__rule {
  display: block;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0.85;
}
.umoya-logo__sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: calc(var(--logo-size) * 0.34);
  font-weight: 300;
  letter-spacing: 0.32em;
  padding-right: 0.32em;
  color: var(--mid);
  margin-top: 2px;
}

/* Sizing variants */
.umoya-logo--lg { --logo-size: 3.25rem; }
.umoya-logo--md { --logo-size: 2rem; }
.umoya-logo--sm { --logo-size: 1.125rem; }
.umoya-logo--compact .umoya-logo__sub { display: none; }

/* On dark backgrounds (Closing CTA, future espresso section) */
.umoya-logo--inverse { color: var(--bg); }
.umoya-logo--inverse .umoya-logo__sub { color: rgba(250, 247, 242, 0.7); }

/* As a link, no border-bottom (we use the rule instead) */
a.umoya-logo:hover { color: var(--gold-deep); }

/* -------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------- */
.footer {
  border-top: var(--hairline);
  padding: 36px 0;
  margin-top: clamp(80px, 8vw, 120px);
}
.footer__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.footer__brand {
  font-family: var(--serif);
  font-size: 0.9375rem;
  color: var(--ink);
}
.footer__links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer__links a {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--mid);
  text-decoration: none;
  border: 0;
  transition: color var(--dur);
}
.footer__links a:hover { color: var(--gold); }

/* -------------------------------------------------------------
   COOKIE BANNER (informativ — kein Tracking-Consent)
   ------------------------------------------------------------- */
.cookie {
  position: fixed;
  bottom: 16px;
  left: 16px;
  max-width: 380px;
  background: var(--ink);
  color: var(--bg);
  padding: 18px 22px;
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.55;
  border-radius: var(--radius);
  box-shadow: 0 8px 24px -12px rgba(26, 25, 21, 0.4);
  display: none;
  z-index: 200;
}
.cookie.is-open { display: block; }
.cookie a { color: var(--bg); border-bottom: 1px solid rgba(255,255,255,0.4); }
.cookie a:hover { border-bottom-color: var(--gold); color: var(--gold); }
.cookie__actions { margin-top: 14px; display: flex; gap: 12px; }
.cookie__btn {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 8px 18px;
  background: var(--gold);
  color: var(--ink);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--dur);
}
.cookie__btn:hover { background: var(--bg); }

/* -------------------------------------------------------------
   HERO — CENTERED VARIANT (photo above text, landscape format)
   Used on Startseite per Dirks Vorgabe: „Hero wie ein gerahmtes
   Bild auf einer weißen Wand schwebend, mit Freiraum drumherum."
   ------------------------------------------------------------- */
.hero--centered {
  padding: clamp(56px, 8vw, 120px) 0 clamp(64px, 8vw, 120px);
  text-align: center;
}
.hero--centered .hero__inner {
  display: block;
  max-width: 920px;
}
.hero--centered .hero__photo {
  aspect-ratio: 3 / 2;
  max-width: 760px;
  margin: 0 auto clamp(48px, 6vw, 80px);
  background: none;
}
.hero--centered .hero__eyebrow,
.hero--centered .hero__body,
.hero--centered .hero__accent {
  margin-left: auto;
  margin-right: auto;
}
.hero--centered .hero__body { max-width: 580px; }
.hero--centered .hero__headline { max-width: 760px; margin-left: auto; margin-right: auto; }
.hero--centered .hero__accent { margin-bottom: 32px; }

/* -------------------------------------------------------------
   HERO VARIANT — V4: SPLIT 2-COLUMN (photo left, text right)
   Beide Spalten gleichberechtigt, Text vertikal zentriert,
   Foto im 3:2-Format wie eine gerahmte Editorial-Aufnahme.
   ------------------------------------------------------------- */
.hero--split { padding: clamp(64px, 9vw, 140px) 0 clamp(64px, 8vw, 120px); }
.hero--split .hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 96px);
  align-items: center;
  max-width: var(--max);
  padding: 0 var(--pad-x);
  text-align: left;
}
.hero--split .hero__photo {
  aspect-ratio: 3 / 2;
  max-width: none;
  margin: 0;
  background: none;
}
.hero--split .hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero--split .hero__textwrap {
  display: flex;
  flex-direction: column;
  max-width: 520px;
}
.hero--split .hero__eyebrow {
  margin: 0 0 20px;
}
.hero--split .hero__headline {
  margin: 0 0 24px;
  max-width: none;
  font-size: clamp(1.625rem, 3vw, 2.5rem);
  line-height: 1.2;
}
.hero--split .hero__accent { margin: 0 0 28px; }
.hero--split .hero__body { margin: 0 0 36px; max-width: 460px; }
.hero--split .btn-primary { align-self: flex-start; }

@media (max-width: 760px) {
  .hero--split .hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .hero--split .hero__textwrap { max-width: none; }
}

/* -------------------------------------------------------------
   HERO VARIANT — V2: FULL-BLEED TOP, TEXT BELOW
   Foto liegt vollbreit oben, Text/CTA darunter im Off-White.
   ------------------------------------------------------------- */
.hero--fullbleed-below { padding: 0; }
.hero--fullbleed-below .hero__inner {
  display: block;
  max-width: none;
  padding: 0;
  text-align: center;
}
.hero--fullbleed-below .hero__photo {
  width: 100%;
  max-width: none;
  height: clamp(380px, 60vh, 760px);
  aspect-ratio: auto;
  margin: 0;
  border-radius: 0;
  background: none;
}
.hero--fullbleed-below .hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero--fullbleed-below .hero__textwrap {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(56px, 7vw, 112px) var(--pad-x) clamp(64px, 8vw, 120px);
}
.hero--fullbleed-below .hero__eyebrow,
.hero--fullbleed-below .hero__body,
.hero--fullbleed-below .hero__accent {
  margin-left: auto;
  margin-right: auto;
}
.hero--fullbleed-below .hero__body { max-width: 580px; }
.hero--fullbleed-below .hero__headline { max-width: 760px; margin: 0 auto 28px; }
.hero--fullbleed-below .hero__accent { margin-bottom: 32px; }
@media (max-width: 760px) {
  .hero--fullbleed-below .hero__photo { height: 56vh; min-height: 320px; }
}

/* -------------------------------------------------------------
   HERO VARIANT — V3: FULL-BLEED OVERLAY (magazine cover)
   Foto füllt großen Viewport-Bereich, Text linksbündig unten
   mit Verlauf für Lesbarkeit. Weiße Typografie.
   ------------------------------------------------------------- */
.hero--fullbleed-overlay { padding: 0; position: relative; }
.hero--fullbleed-overlay .hero__inner {
  position: relative;
  max-width: none;
  display: block;
  padding: 0;
  height: clamp(560px, 88vh, 920px);
  overflow: hidden;
}
.hero--fullbleed-overlay .hero__photo {
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%; height: 100%;
  max-width: none;
  aspect-ratio: auto;
  border-radius: 0;
  background: none;
  z-index: 0;
}
.hero--fullbleed-overlay .hero__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Desktop: Gradient kommt von rechts (dunkel) zu links (transparent),
   damit Dirks Gesicht links sichtbar bleibt und der Text rechts auf
   dunklem Grund lesbar ist. */
.hero--fullbleed-overlay .hero__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    270deg,
    rgba(20, 18, 14, 0.88) 0%,
    rgba(20, 18, 14, 0.65) 30%,
    rgba(20, 18, 14, 0.15) 60%,
    rgba(20, 18, 14, 0.0) 80%
  );
  pointer-events: none;
  z-index: 1;
}
/* Text-Spalte rechts, vertikal zentriert. */
.hero--fullbleed-overlay .hero__textwrap {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 5vw, 80px) clamp(40px, 6vw, 96px) clamp(40px, 5vw, 80px) clamp(24px, 3vw, 56px);
  text-align: left;
  max-width: 720px;
  margin-left: auto;
}
.hero--fullbleed-overlay .hero__eyebrow {
  color: rgba(250, 247, 242, 0.75);
  margin-bottom: 20px;
  margin-left: 0; margin-right: 0;
}
.hero--fullbleed-overlay .hero__headline {
  color: var(--bg);
  margin: 0 0 28px;
  max-width: none;
  font-size: clamp(1.75rem, 3.4vw, 2.875rem);
  line-height: 1.18;
}
.hero--fullbleed-overlay .hero__accent {
  background: var(--gold);
  margin: 0 0 28px;
}
.hero--fullbleed-overlay .hero__body {
  color: rgba(250, 247, 242, 0.92);
  margin: 0 0 36px;
  max-width: 540px;
}
.hero--fullbleed-overlay .btn-primary {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--bg);
  align-self: flex-start;
}
.hero--fullbleed-overlay .btn-primary:hover,
.hero--fullbleed-overlay .btn-primary:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg);
}

/* picture-Wrapper soll die Container-Box voll ausfüllen */
.hero--fullbleed-overlay .hero__photo picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Mobile: rechte Spalte wäre zu schmal — Text zurück nach unten,
   Gradient läuft wieder vertikal von unten. Mobile lädt zusätzlich
   einen Portrait-Crop des Fotos (Gesicht oberes Drittel, Hemd
   füllt untere Hälfte), damit der Text-Overlay nicht aufs Gesicht
   fällt. */
@media (max-width: 760px) {
  .hero--fullbleed-overlay .hero__inner { height: clamp(580px, 92vh, 860px); }
  .hero--fullbleed-overlay .hero__photo::after {
    background: linear-gradient(
      180deg,
      rgba(20, 18, 14, 0.0)  0%,
      rgba(20, 18, 14, 0.0)  45%,
      rgba(20, 18, 14, 0.35) 60%,
      rgba(20, 18, 14, 0.78) 78%,
      rgba(20, 18, 14, 0.95) 100%
    );
  }
  .hero--fullbleed-overlay .hero__textwrap {
    top: auto;
    left: 0; right: 0; bottom: 0;
    max-width: none;
    margin-left: 0;
    justify-content: flex-end;
    padding: clamp(36px, 5vw, 64px) var(--pad-x) clamp(32px, 4vw, 48px);
  }
  .hero--fullbleed-overlay .hero__headline {
    font-size: clamp(1.5rem, 6.5vw, 2.125rem);
    line-height: 1.22;
  }
  .hero--fullbleed-overlay .hero__body {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 28px;
  }
}

/* -------------------------------------------------------------
   COMPARE BAR — kleine Toggle-Leiste für die Hero-Varianten
   (nur auf den hero-v*.html Demo-Seiten sichtbar).
   ------------------------------------------------------------- */
.compare {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 250;
  background: rgba(42, 40, 38, 0.92);
  color: var(--bg);
  padding: 8px 8px 8px 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 32px -8px rgba(20, 18, 14, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.compare__label {
  color: rgba(250, 247, 242, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.6875rem;
}
.compare__links { display: flex; gap: 4px; }
.compare__links a {
  color: var(--bg);
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 999px;
  transition: background var(--dur);
  font-weight: 500;
}
.compare__links a:hover { background: rgba(250, 247, 242, 0.12); }
.compare__links a[aria-current='page'] {
  background: var(--gold);
  color: var(--bg);
}
@media (max-width: 480px) {
  .compare { font-size: 0.75rem; padding: 6px 6px 6px 12px; gap: 8px; }
  .compare__links a { padding: 5px 10px; }
}

/* -------------------------------------------------------------
   EDITORIAL FIGURE — landscape photo „floating" within a long page
   with generous whitespace, no caption boxes, no shadows.
   ------------------------------------------------------------- */
.editorial-figure {
  margin: 0 auto;
  max-width: 920px;
  padding: 0 var(--pad-x);
}
.editorial-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}
.editorial-figure figcaption {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--mid);
  text-align: center;
  margin-top: 16px;
}

/* -------------------------------------------------------------
   PRACTICE STORIES — plain-text blocks with generous whitespace
   between them (Startseite: „Was sichtbar wird"). Per Dirks
   Vorgabe: keine Kacheln, keine Rahmen.
   ------------------------------------------------------------- */
.practice {
  max-width: 720px;
  margin: 0 auto;
}
.practice__intro {
  font-family: var(--sans);
  font-size: 1.0625rem;
  color: var(--mid);
  line-height: 1.7;
  margin-bottom: clamp(48px, 6vw, 80px);
  text-align: center;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}
.practice__story {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink);
}
.practice__story + .practice__story {
  margin-top: clamp(56px, 7vw, 100px);
}
.practice__story p {
  margin-bottom: 1em;
  max-width: 680px;
}
.practice__story p:last-child { margin-bottom: 0; }
.practice__story p em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink);
  display: block;
  margin: 1.25em 0;
}

/* -------------------------------------------------------------
   PRAXIS-SLIDER — Karten im horizontalen Slider (Layout wie bei
   Tae Betty „Stimmen der Kunden"). Pfeil-Steuerung via JS.
   ------------------------------------------------------------- */
.praxis-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 48px);
  margin-bottom: clamp(28px, 4vw, 48px);
}
.praxis-controls {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.praxis-controls button {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(42, 40, 38, 0.2);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.praxis-controls button:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.praxis-controls button svg { width: 18px; height: 18px; }
.praxis-slider {
  display: flex;
  gap: clamp(20px, 3vw, 40px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 8px;
}
.praxis-slider::-webkit-scrollbar { display: none; }
.praxis-slide {
  flex: 0 0 clamp(300px, 72vw, 560px);
  scroll-snap-align: start;
  background: var(--bg);
  border: 1px solid rgba(42, 40, 38, 0.1);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 44px);
  margin: 0;
}
.section--alt .praxis-slide { background: #fff; }
.praxis-slide p {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink);
  margin-bottom: 1em;
}
.praxis-slide p:last-child { margin-bottom: 0; }
.praxis-slide p em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink);
  display: block;
  margin: 1.1em 0;
}
@media (max-width: 680px) {
  .praxis-controls { display: none; }
  .praxis-slide { flex-basis: 86%; }
}

/* -------------------------------------------------------------
   STILLE LINK-LIST — drei stille Textlinks für „Drei Formen"-Block
   auf der Startseite. Kein Button, kein Box-Look.
   ------------------------------------------------------------- */
.quietlinks {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 720px;
}
.quietlink {
  display: block;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(42, 40, 38, 0.1);
  text-decoration: none;
  color: var(--ink);
  border-radius: 0;
  transition: color var(--dur) var(--ease);
}
.quietlink:last-child { border-bottom: none; }
.quietlink__title {
  font-family: var(--serif);
  font-size: 1.1875rem;
  font-weight: 400;
  line-height: 1.35;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}
.quietlink__title::after {
  content: '→';
  color: var(--gold);
  transition: transform var(--dur) var(--ease);
}
.quietlink__desc {
  display: block;
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--mid);
  line-height: 1.65;
  margin-top: 8px;
  max-width: 580px;
}
.quietlink:hover .quietlink__title { color: var(--gold-deep); }
.quietlink:hover .quietlink__title::after { transform: translateX(4px); }

/* -------------------------------------------------------------
   TEXT-IMAGE PAIR — text column + landscape photo side by side
   (verwendet auf Startseite „Wer hinter dieser Arbeit steht").
   ------------------------------------------------------------- */
.textimage {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 760px) { .textimage { grid-template-columns: 1fr; } }
.textimage__text { max-width: 540px; }
.textimage__text h2 {
  font-family: var(--serif);
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 24px;
  text-wrap: balance;
}
.textimage__text p {
  color: var(--ink);
  margin-bottom: 16px;
  line-height: 1.7;
}
.textimage__text p:last-of-type { margin-bottom: 24px; }
.textimage__more {
  color: var(--gold);
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.textimage__more::after { content: '→'; transition: transform var(--dur) var(--ease); }
.textimage__more:hover { color: var(--gold-deep); }
.textimage__more:hover::after { transform: translateX(4px); }
.textimage__photo img {
  aspect-ratio: 3 / 2;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

/* -------------------------------------------------------------
   INLINE CTA-BLOCK — kleiner, ruhiger CTA mitten in einer Seite
   (zwischen Sektionen). Keine farbige Fläche, nur Linie + Button.
   ------------------------------------------------------------- */
.inline-cta {
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 48px) 0;
}
.inline-cta__text {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 28px;
  text-wrap: balance;
}

/* -------------------------------------------------------------
   ANGEBOTE-SEITE — Angebot als ausführliche Sektion (nicht Kachel)
   ------------------------------------------------------------- */
.angebot {
  padding: clamp(56px, 7vw, 96px) 0;
  border-bottom: 1px solid rgba(42, 40, 38, 0.1);
}
.angebot:last-of-type { border-bottom: none; }
.angebot__inner {
  display: grid;
  grid-template-columns: 1fr 2.4fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 760px) { .angebot__inner { grid-template-columns: 1fr; gap: 20px; } }
.angebot__label {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 6px;
}
.angebot__title {
  font-family: var(--serif);
  font-size: clamp(1.625rem, 2.8vw, 2.125rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 20px;
  text-wrap: balance;
}
.angebot__lead {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 20px;
  max-width: 620px;
}
.angebot__body {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--mid);
  max-width: 620px;
}
.angebot__body p { margin-bottom: 1.1em; }
.angebot__body p:last-child { margin-bottom: 0; }
.angebot__meta {
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--mid);
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(42, 40, 38, 0.1);
  max-width: 620px;
}
.angebot__cta { margin-top: 28px; }

/* -------------------------------------------------------------
   ENTSCHEIDUNGSHILFE — kleine 3-Zeilen-Tabelle „Welcher Weg passt?"
   ------------------------------------------------------------- */
.decision {
  max-width: 820px;
  margin: 0 0 clamp(24px, 3vw, 40px);
}
.decision__row {
  display: grid;
  grid-template-columns: 1.4fr auto 1fr;
  gap: clamp(16px, 3vw, 40px);
  padding: 18px 0;
  border-bottom: 1px solid rgba(42, 40, 38, 0.08);
  align-items: baseline;
}
.decision__row:last-child { border-bottom: none; }
@media (max-width: 680px) {
  .decision__row { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }
}
.decision__lage {
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--ink);
  line-height: 1.55;
}
.decision__arrow {
  color: var(--gold);
  font-family: var(--sans);
  font-size: 0.9375rem;
}
@media (max-width: 680px) { .decision__arrow { display: none; } }
.decision__weg a {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  transition: color var(--dur);
}
.decision__weg a:hover { color: var(--gold-deep); }

/* -------------------------------------------------------------
   FORMAT-LIST — kleine Liste „Formate" auf Vortragsseite
   ------------------------------------------------------------- */
.format-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 48px);
}
@media (max-width: 860px) {
  .format-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .format-list { grid-template-columns: 1fr; }
}
.format-list__item {
  padding: 20px 0;
  border-top: 1px solid rgba(42, 40, 38, 0.1);
}
.format-list__item h4 {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 6px;
}
.format-list__item p {
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--mid);
  line-height: 1.55;
}

/* -------------------------------------------------------------
   VORTRAGSTHEMEN — nummeriertes Layout (01 · 02 · 03),
   analog zu Tae Bettys „Zusammenarbeit".
   ------------------------------------------------------------- */
.vortrag-topics {
  display: flex;
  flex-direction: column;
}
.vortrag-topic {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: clamp(20px, 4vw, 64px);
  align-items: start;
  padding: clamp(36px, 5vw, 60px) 0;
  border-top: 1px solid rgba(42, 40, 38, 0.12);
}
.vortrag-topic:last-child { border-bottom: 1px solid rgba(42, 40, 38, 0.12); }
.vortrag-topic__number {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 400;
  line-height: 1;
  color: var(--gold);
  opacity: 0.55;
}
.vortrag-topic__body { max-width: 680px; }
.vortrag-topic__title {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 10px;
}
.vortrag-topic__for {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--mid);
  margin-bottom: 20px;
}
.vortrag-topic__body > p {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink);
  margin-bottom: 1em;
}
.vortrag-topic__body > p:last-child { margin-bottom: 0; }
.vortrag-topic__takeaway strong {
  font-weight: 500;
  color: var(--ink);
}
@media (max-width: 680px) {
  .vortrag-topic { grid-template-columns: 1fr; gap: 8px; }
  .vortrag-topic__number { font-size: 2rem; }
}

/* -------------------------------------------------------------
   ANFRAGE — Direktkontakt-Block
   ------------------------------------------------------------- */
.direct-contact {
  max-width: var(--read);
  margin-bottom: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(32px, 4vw, 48px);
  border-bottom: 1px solid rgba(42, 40, 38, 0.15);
}
.direct-contact__label {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.direct-contact__item {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: 8px;
}
.direct-contact__item a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(154, 123, 63, 0.3);
  transition: border-color var(--dur);
}
.direct-contact__item a:hover { border-bottom-color: var(--gold); color: var(--gold-deep); }
.direct-contact__or {
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--mid);
  margin-top: 18px;
  letter-spacing: 0.04em;
}

/* Interesse-an Marker auf Anfrage-Seite (wird via JS aus URL-Param befüllt) */
.interest-hint {
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--mid);
  padding: 14px 18px;
  background: var(--surface);
  border-left: 2px solid var(--gold);
  margin-bottom: 28px;
  border-radius: 0;
}
.interest-hint[hidden] { display: none; }
.interest-hint strong { color: var(--ink); font-weight: 500; }

/* -------------------------------------------------------------
   404 PAGE
   ------------------------------------------------------------- */
.notfound {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(80px, 10vw, 140px) var(--pad-x);
  text-align: center;
}
.notfound h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 20px;
  max-width: 600px;
}
.notfound p {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--mid);
  margin: 0 auto 40px;
  max-width: 480px;
  line-height: 1.7;
}

/* -------------------------------------------------------------
   ANIMATIONS — fade-in on scroll, with reduced-motion fallback
   ------------------------------------------------------------- */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* Stagger — wenn ein Container .fade-in-stagger erhält, faden direkte
   .fade-in Kinder sequenziell ein (max. 5 Stufen, 80ms pro Schritt). */
.fade-in-stagger > .fade-in:nth-child(1) { transition-delay: 0ms; }
.fade-in-stagger > .fade-in:nth-child(2) { transition-delay: 80ms; }
.fade-in-stagger > .fade-in:nth-child(3) { transition-delay: 160ms; }
.fade-in-stagger > .fade-in:nth-child(4) { transition-delay: 240ms; }
.fade-in-stagger > .fade-in:nth-child(5) { transition-delay: 320ms; }

/* Page-load reveal — sanftes Auftauchen ohne Scroll-Trigger.
   Nur opacity + kleine vertikale Bewegung, ein einziger Easing-Token. */
@keyframes revealUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero-Block — sequenzielles Auftauchen beim Page-Load */
.hero__photo,
.hero__eyebrow,
.hero__headline,
.hero__accent,
.hero__body,
.hero .btn-primary {
  animation: revealUp 0.7s var(--ease) both;
}
.hero__photo       { animation-delay: 0ms; }
.hero__eyebrow     { animation-delay: 0ms; }
.hero__headline    { animation-delay: 80ms; }
.hero__accent      { animation-delay: 160ms; }
.hero__body        { animation-delay: 220ms; }
.hero .btn-primary { animation-delay: 320ms; }

/* Page-Header (Inner-Seiten) — Eyebrow → H1 → Lead */
.page-header__eyebrow,
.page-header h1,
.page-header__lead {
  animation: revealUp 0.7s var(--ease) both;
}
.page-header__eyebrow { animation-delay: 0ms; }
.page-header h1       { animation-delay: 100ms; }
.page-header__lead    { animation-delay: 220ms; }

/* Pfeil-Shift auf .positioning__more (text-arrow ist im CSS, nicht im HTML) */
.positioning__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.positioning__more::after {
  content: '→';
  display: inline-block;
  transition: transform var(--dur) var(--ease);
}
.positioning__more:hover::after,
.positioning__more:focus-visible::after {
  transform: translateX(4px);
}

/* Press-Download — sanfter Pull-Down auf Hover */
.press__download::before {
  display: inline-block;
  transition: transform var(--dur) var(--ease);
}
.press__download:hover::before,
.press__download:focus-visible::before {
  transform: translateY(2px);
}

/* Form-Focus Ink Line — gold-Linie wächst beim Focus von links nach rechts.
   Nur auf Feldern mit Text/Textarea/Select (nicht auf Radio-Fieldsets). */
.form__field:has(.form__input, .form__textarea, .form__select) {
  position: relative;
}
.form__field:has(.form__input, .form__textarea, .form__select)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
  pointer-events: none;
}
.form__field:has(.form__input:focus, .form__textarea:focus, .form__select:focus)::after {
  transform: scaleX(1);
}

/* Form-Alert + Cookie-Banner — sanftes Auftauchen statt Snap-on */
.form__alert:not([hidden]) {
  animation: revealUp 240ms var(--ease) both;
}
.cookie.is-open {
  animation: revealUp 240ms var(--ease) both;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .fade-in { opacity: 1; transform: none; }
  /* Page-load reveals sicher abschalten — kein Flash bei 0.001ms */
  .hero__eyebrow,
  .hero__headline,
  .hero__accent,
  .hero__body,
  .hero .btn-primary,
  .hero__photo,
  .page-header__eyebrow,
  .page-header h1,
  .page-header__lead,
  .form__alert,
  .cookie.is-open {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* -------------------------------------------------------------
   PRINT — basic readability for legal pages
   ------------------------------------------------------------- */
@media print {
  .nav, .footer, .cookie, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { border: 0; }
  .prose a::after { content: ' (' attr(href) ')'; font-size: 0.85em; color: #555; }
}