/* ===================================================================
   Hund Herum Glücklich — Designsystem
   Tintenblau #303842 · Apricot-Sand #E2C198
   =================================================================== */

:root{
  /* Farben */
  --ink: #303842;

  /* Zwei Textstufen unter --ink. Die Zahlen im Namen sind historisch: die
     Deckkraft ist so gewählt, dass beide auch auf --paper-alt und im Footer
     4,5:1 halten. Die Hierarchie tragen Größe, Schnitt und Versalien —
     Aufhellen bis zur Unlesbarkeit ist keine Hierarchie. */
  --ink-70: rgba(48,56,66,.78);
  --ink-50: rgba(48,56,66,.74);

  /* Rahmen von Bedienelementen (Eingaben, Chips, Ghost-Buttons). Hier ist der
     Rahmen das einzige, was das Element als bedienbar ausweist, deshalb 3:1
     nach WCAG 1.4.11 statt der dekorativen Linienstärke unten. */
  --ink-control: rgba(48,56,66,.58);

  /* Rein dekorativ: Trennlinien, Kartenrahmen, Hover-Zustände. */
  --ink-14: rgba(48,56,66,.14);
  --ink-32: rgba(48,56,66,.32);

  --sand: #E2C198;
  /* Der Akzent für Zeichen auf Papier: Ziffern, Aufzählungspunkte, Häkchen.
     Auf --paper-card muss er 3:1 halten, sonst ist die Marke, die eine Liste
     gliedert, praktisch unsichtbar. Der hellere --sand bleibt Fläche. */
  --sand-deep: #A87538;
  --sand-soft: rgba(226,193,152,.4);

  --paper: #FAF3E8;
  --paper-alt: #F1E3CD;
  --paper-card: #FCF8F1;

  /* Typografie */
  --font-display: 'Crimson Text', Georgia, 'Times New Roman', serif;
  --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Bewegung */
  --ease-out: cubic-bezier(.16,.8,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --tshadow: 0 1px 2px rgba(48,56,66,.14);

  --radius: 18px;
  --radius-sm: 10px;

  --header-h: 88px;
}

@media (min-width: 900px){
  :root{ --header-h: 104px; }
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing: border-box; }
html,body{ overflow-x: hidden; overflow-x: clip; }
/* Sanftes Scrollen übernimmt der Browser. Kein Wheel-Hijacking, damit
   Scrollbereiche innerhalb der Seite (z. B. der Lexikon-Dialog) normal
   funktionieren und das Trackpad sein eigenes Momentum behält. */
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior: smooth; }
}
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; }
button{ font: inherit; }
h1,h2,h3,h4,p,figure{ margin: 0; }
ul{ margin:0; padding:0; list-style:none; }

/* Oberflächen, die der Browser sonst selbst einfärbt. */
::selection{ background: var(--sand); color: var(--ink); }
html{ scrollbar-color: var(--ink-32) var(--paper-alt); }
:root{ accent-color: var(--ink); }

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

.skip-link{
  position:absolute; left:12px; top:-60px;
  background: var(--ink); color: var(--paper);
  padding:.8em 1.2em; border-radius: var(--radius-sm);
  z-index: 1000; transition: top .25s var(--ease-out);
  font-weight:600;
}
.skip-link:focus{ top:12px; }

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

/* ---------- Layout helpers ---------- */
.wrap{
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

section{ position: relative; }

.section-pad{ padding-block: clamp(64px, 10vw, 128px); }
.section-pad-sm{ padding-block: clamp(48px, 7vw, 88px); }

.bg-paper{ background: var(--paper); }
.bg-paper-alt{ background: var(--paper-alt); }
.bg-sand{ background: var(--sand); }
.bg-ink{ background: var(--ink); color: var(--paper); }

/* Apricot-Sand ist der dunkelste helle Untergrund. Die gedämpften Textstufen
   brauchen dort mehr Deckkraft, sonst fallen sie unter 4,5:1. */
.bg-sand{
  --ink-70: rgba(48,56,66,.84);
  --ink-50: rgba(48,56,66,.82);
  --ink-control: rgba(48,56,66,.66);
}

h2.section-title{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.18;
  max-width: 18ch;
  margin: 0 0 18px;
}

.section-lede{
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--ink-70);
  max-width: 58ch;
  margin: 0;
}

.section-head{ margin-bottom: clamp(36px, 5vw, 64px); }
.section-head--center{ text-align:center; margin-inline:auto; }
.section-head--center .section-lede{ margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding: .95em 1.7em;
  border-radius: 999px;
  font-weight: 600;
  font-size: .98rem;
  text-decoration:none;
  border: 1.5px solid transparent;
  cursor:pointer;
  transition: transform .35s var(--ease-out), background-color .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out);
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }

.btn--primary{
  background: var(--ink);
  color: var(--paper);
}
.btn--primary:hover{ background:#414c59; }

.btn--ghost{
  background: transparent;
  color: var(--ink);
  border-color: var(--ink-control);
}
.btn--ghost:hover{ border-color: var(--ink); background: rgba(48,56,66,.06); }

.btn--on-ink{
  background: var(--sand);
  color: var(--ink);
}
.btn--on-ink:hover{ background:#ecd3ac; }

@media (pointer:coarse){
  .btn{ min-height:44px; }
}

/* ---------- Header ---------- */
.site-header{
  position: fixed; inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 500;
  display:flex; align-items:center;
  transition: background-color .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled{
  background: rgba(250,243,232,.88);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: var(--ink-14);
}
.site-header__row{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 24px;
}

.brand{
  display:flex; align-items:center;
  min-height: 44px;
  text-decoration:none;
  color: var(--ink);
}
.brand__logo{
  height: clamp(30px, 4vw, 38px);
  width: auto;
  display:block;
}

.nav-desktop{
  display:none;
}
@media (min-width: 860px){
  .nav-desktop{ display:flex; align-items:center; gap: clamp(20px, 2.6vw, 40px); }
}
.nav-desktop a{
  text-decoration:none;
  font-weight: 500;
  font-size: .98rem;
  position: relative;
  padding: 6px 2px;
}
.nav-desktop a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:0;
  height:1.5px; background: currentColor;
  transition: right .35s var(--ease-out);
}
.nav-desktop a:hover::after,
.nav-desktop a:focus-visible::after{ right:0; }

/* Die Seiten setzen aria-current. Ohne Darstellung war das eine Angabe,
   die nur Screenreader erreicht hat. */
.nav-desktop a[aria-current="page"]{ font-weight: 600; }
.nav-desktop a[aria-current="page"]::after{ right: 0; }

/* Wissen-Gruppe: Untermenü auf Hover/Fokus, der Elternlink bleibt klickbar
   und führt zur Übersichtsseite (auch der Fallback für Touch ohne Hover). */
.nav-group{ position: relative; display: inline-flex; align-items: center; }
.nav-group > a{ display: inline-flex; align-items: center; gap: 7px; }
.nav-group > a::after{
  content: "";
  position: static;
  width: 6px; height: 6px;
  border: 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  background: none;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .3s var(--ease-out);
}
.nav-group:hover > a::after,
.nav-group:focus-within > a::after{ transform: translateY(1px) rotate(225deg); }
/* Unsichtbare Brücke über den Spalt zwischen Link und Menü. */
.nav-group::after{ content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px; }
.nav-group__menu{
  position: absolute;
  top: calc(100% + 12px); left: 50%;
  transform: translate(-50%, 6px);
  min-width: 172px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px;
  background: var(--paper);
  border: 1px solid var(--ink-14);
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 44px -20px rgba(48,56,66,.4);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s var(--ease-out), transform .22s var(--ease-out), visibility .22s;
}
.nav-group:hover .nav-group__menu,
.nav-group:focus-within .nav-group__menu{
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
}
.nav-group__menu a{
  padding: 8px 12px;
  font-size: .95rem;
  border-radius: 7px;
  white-space: nowrap;
}
.nav-group__menu a::after{ display: none; }
.nav-group__menu a:hover,
.nav-group__menu a:focus-visible{ background: rgba(226,193,152,.28); }
@media (prefers-reduced-motion: reduce){
  .nav-group__menu{ transition: opacity .15s linear, visibility .15s; transform: translate(-50%, 0); }
  .nav-group > a::before{ transition: none; }
}

.header-actions{ display:flex; align-items:center; gap:14px; }
.header-actions .btn{ padding: .8em 1.4em; font-size: .92rem; }
.btn__label-short{ display:none; }
@media (max-width: 560px){
  .header-actions .btn{ padding: .8em 1.1em; }
  .header-actions .btn .btn__label-full{ display:none; }
  .header-actions .btn .btn__label-short{ display:inline; }
}

.nav-toggle{
  display:inline-flex;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer;
  color: var(--ink);
}
@media (min-width: 860px){ .nav-toggle{ display:none; } }
.nav-toggle svg{ width:22px; height:22px; }
/* Über die Position statt über Klassen: das Icon-Markup wird auf den
   generierten Seiten aus tools/build_*.py erzeugt und trägt dort keine. */
.nav-toggle line{
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .35s var(--ease-out), opacity .25s var(--ease-out);
}
.nav-toggle[aria-expanded="true"] line:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] line:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] line:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce){
  .nav-toggle line{ transition: opacity .2s linear; }
}

.nav-mobile{
  position: fixed; inset:0;
  background: var(--paper);
  z-index: 490;
  display:flex; flex-direction:column;
  padding: calc(var(--header-h) + 24px) 28px 40px;
  gap: 6px;
  transform: translateY(-8px);
  opacity:0;
  pointer-events:none;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.nav-mobile.is-open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.nav-mobile a[aria-current="page"]{ font-weight: 700; }
.nav-mobile a.nav-mobile__sub{
  font-size: 1.25rem;
  padding-left: 20px;
  color: var(--ink-70);
}
.nav-mobile a{
  text-decoration:none;
  font-family: var(--font-display);
  font-size: 1.7rem;
  padding: 14px 0;
  border-bottom: 1px solid var(--ink-14);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
  transition-delay: calc(var(--i,0) * 55ms);
}
.nav-mobile.is-open a{ opacity:1; transform:none; }
.nav-mobile .btn{ margin-top: 24px; align-self:flex-start; }

@media (min-width:860px){ .nav-mobile{ display:none; } }

@media (prefers-reduced-motion: reduce){
  .nav-mobile{ transition: opacity .2s linear; transform:none; }
  .nav-mobile a{ transition: opacity .2s linear; transform:none; transition-delay:0s; }
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{
  position: relative;
}
.hero__pin{
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--sand);
}

/* Cap the hero on ultrawide monitors so the video doesn't stretch into an
   oversized, edge-to-edge strip. Breakpoint matches the max-width itself,
   so the cap engages exactly where it starts to bite — no jump from
   full-bleed to a visibly smaller, centered box.

   Beyond the cap the page's own paper carries on left and right, and the
   artwork fades into it instead of ending on an edge, so the hero reads as
   one sheet of paper rather than a picture placed on a background. The
   texture tiles at its native 640px — scaling it up is what made it look
   washed out, tiling a small crop is what made the repeat visible. */
@media (min-width: 2200px){
  .hero{
    background: #F6D3AF url('../img/paper-texture.webp') 0 0 repeat;
    background-size: 640px 640px;
  }
  .hero__pin{
    max-width: 2200px;
    margin-inline: auto;
    /* A radius reads as a UI card, and --sand would flash through the fade. */
    border-radius: 0;
    background: none;
  }
  /* Asymmetric on purpose: the left edge cuts through dense hatching, which
     dissolves convincingly over a long ramp, while the right edge only clips
     the tail tip, where a long fade would look airbrushed. Both widths scale
     with the gutter, so the fade starts at zero exactly at the breakpoint.
     The intermediate stops ease the ramp — a plain two-stop gradient leaves a
     visible band where it reaches full opacity. */
  .hero__media{
    --gutter: calc((100vw - 2200px) / 2);
    --fade-l: min(calc(var(--gutter) * .42), 260px);
    --fade-r: min(calc(var(--gutter) * .16), 96px);
    --hero-fade: linear-gradient(90deg,
      rgba(0,0,0,0)   0,
      rgba(0,0,0,.14) calc(var(--fade-l) * .30),
      rgba(0,0,0,.55) calc(var(--fade-l) * .62),
      rgba(0,0,0,.90) calc(var(--fade-l) * .85),
      rgba(0,0,0,1)   var(--fade-l),
      rgba(0,0,0,1)   calc(100% - var(--fade-r)),
      rgba(0,0,0,.88) calc(100% - var(--fade-r) * .70),
      rgba(0,0,0,.45) calc(100% - var(--fade-r) * .35),
      rgba(0,0,0,0)   100%);
    -webkit-mask-image: var(--hero-fade);
            mask-image: var(--hero-fade);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
  }
}
.hero__stage{
  position: absolute; inset:0;
}
/* Groups the image layers so the ultrawide edge fade can mask them without
   touching .hero__frame — masking the headline would drop it to greyscale
   antialiasing. No z-index: .hero__frame's z-index:5 keeps it on top. */
.hero__media{
  position: absolute; inset:0;
}
.hero__poster,
.hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  background-position: center;
  background-size: cover;
}
.hero__poster{ background-image: none; }
.hero__video{
  opacity: 0;
  transform: translateZ(0);
  transition: opacity .6s var(--ease-out);
}
.hero.video-ready .hero__video{ opacity: 1; }
.hero.video-failed .hero__video{ display: none; }

.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(48,56,66,.32) 0%, rgba(48,56,66,0) calc(var(--header-h) + 64px)),
    linear-gradient(90deg, rgba(48,56,66,.16) 0%, rgba(48,56,66,.02) 42%, rgba(48,56,66,0) 60%);
  pointer-events:none;
}

.hero__frame{
  position: relative;
  z-index: 5;
  height: 100%;
}
.hero__content{
  position: relative;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top: var(--header-h);
  max-width: 620px;
}
.hero__content::before{
  content:"";
  position:absolute;
  z-index:0;
  inset: -6% -30% -6% -8%;
  background: linear-gradient(100deg, rgba(250,243,232,0) 0%, rgba(250,243,232,.92) 7%, rgba(250,243,232,.88) 24%, rgba(250,243,232,.72) 42%, rgba(250,243,232,.5) 56%, rgba(250,243,232,.3) 68%, rgba(250,243,232,.14) 80%, rgba(250,243,232,.04) 91%, rgba(250,243,232,0) 100%);
  pointer-events:none;
}
.hero__content > *{ position:relative; z-index:1; }

.hero__kicker{
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--ink-70);
  margin: 0 0 18px;
  opacity: var(--kc, 0);
  transform: translateY(calc((1 - var(--kc, 0)) * 10px));
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}

.hero__headline{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.8rem, 7.2vw, 5.2rem);
  line-height: 1.06;
  letter-spacing: -.01em;
  margin: 0 0 28px;
  max-width: 13ch;
}
.hero__headline .w{
  display:inline-block;
  opacity: var(--kc, 0);
  transform: translateY(calc((1 - var(--kc, 0)) * 22px));
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
  transition-delay: var(--stagger, 0s);
}


.hero__sub{
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  color: var(--ink-70);
  max-width: 44ch;
  margin: 0 0 34px;
  opacity: var(--kc, 0);
  transform: translateY(calc((1 - var(--kc, 0)) * 14px));
  transition: opacity .6s var(--ease-out) .15s, transform .6s var(--ease-out) .15s;
}

.hero__cta-row{
  display:flex; align-items:center; gap: 22px; flex-wrap:wrap;
  opacity: var(--kc, 0);
  transform: translateY(calc((1 - var(--kc, 0)) * 14px));
  transition: opacity .6s var(--ease-out) .3s, transform .6s var(--ease-out) .3s;
}

@media (prefers-reduced-motion: reduce){
  .hero__kicker, .hero__headline .w, .hero__sub, .hero__cta-row{
    transition:none; opacity:1; transform:none;
  }
}

/* Auf querliegenden Handys ist der Viewport niedriger als die Mindesthöhe.
   Die 560px-Untergrenze schob den CTA unter die Falz; nur die Höhe zu lösen
   reichte nicht — bei zentriertem Inhalt lief die Kicker-Zeile dann in den
   Header und der CTA wurde vom overflow:hidden abgeschnitten. Deshalb hier
   zusätzlich von oben stapeln und die Typo auf die Höhe beziehen. */
@media (orientation: landscape) and (max-height: 560px){
  .hero__pin{ min-height: 0; }
  .hero__content{
    justify-content: flex-start;
    padding-top: calc(var(--header-h) + 14px);
  }
  .hero__kicker{ margin-bottom: 10px; }
  .hero__headline{
    font-size: clamp(1.9rem, 4.6vh, 2.6rem);
    margin-bottom: 14px;
    max-width: 20ch;
  }
  .hero__sub{ font-size: 1rem; margin-bottom: 18px; max-width: 42ch; }
}


/* Disable video on mobile, narrow portrait, and prefers-reduced-motion */
@media (max-width: 720px),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce){
  .hero__video{ display:none; }
}

/* =====================================================================
   Entrances (IntersectionObserver driven)
   ===================================================================== */
.in-up{
  opacity:0; transform: translateY(26px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.in.in-up{ opacity:1; transform:none; }

.stagger > *{ transition-delay: calc(var(--i,0) * 90ms); }

@media (prefers-reduced-motion: reduce){
  .in-up{ transition:none; opacity:1; transform:none; }
}

/* =====================================================================
   Entlastung
   ===================================================================== */
.relief-grid{
  display:grid; gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.relief-card{
  background: var(--paper-card);
  border: 1px solid var(--ink-14);
  border-radius: var(--radius);
  padding: 32px 28px;
}
.relief-card__num{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2rem;
  color: var(--sand-deep);
  font-weight: 600;
  margin-bottom: 20px;
  display:block;
}
.relief-card h3{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  margin: 0 0 12px;
  line-height:1.3;
  color: var(--ink);
}
.relief-card p{
  color: var(--ink-70);
  font-size: .98rem;
  margin:0;
}

/* =====================================================================
   Dein Ansatz
   ===================================================================== */
.approach{
  position:relative;
}
.approach-steps{
  display:grid; gap: 40px;
  grid-template-columns: repeat(3, 1fr);
  counter-reset: step;
}
@media (max-width: 860px){
  .approach-steps{ grid-template-columns:1fr; max-width:440px; margin-inline:auto; gap:56px; }
}
.approach-step{
  text-align:center;
}
.ink-connector{
  display:none;
  position:absolute;
  left:-40px; top:74px;
  width:40px; height:32px;
  overflow:visible;
  pointer-events:none;
}
.ink-connector .ink-path{
  fill:none; stroke: var(--ink-32); stroke-width:1.75; stroke-linecap:round;
  stroke-dasharray:80; stroke-dashoffset:80;
  transition: stroke-dashoffset .6s var(--ease-out) calc(var(--i,0) * 90ms);
}
.ink-connector .ink-path--bleed{
  stroke-width:5.5; opacity:.15; filter: blur(2px);
  transition: stroke-dashoffset .6s var(--ease-out) calc(var(--i,0) * 90ms),
              opacity .5s ease-out calc(var(--i,0) * 90ms + .3s);
}
.approach-step.in .ink-connector .ink-path{ stroke-dashoffset:0; }
.approach-step.in .ink-connector .ink-path--bleed{ stroke-dashoffset:0; opacity:0; }

@media (min-width: 861px){
  .approach-step{ position:relative; }
  .approach-step:not(:first-child) .ink-connector{ display:block; }
}
@media (prefers-reduced-motion: reduce){
  .ink-connector .ink-path{ transition:none; stroke-dashoffset:0; }
  .ink-connector .ink-path--bleed{ transition:none; stroke-dashoffset:0; opacity:0; }
}
.approach-step__img{
  width: 180px; height:180px;
  margin: 0 auto 28px;
  border-radius: 50%;
  overflow:hidden;
  background: var(--sand);
  border: 1px solid var(--ink-14);
}
.approach-step__img img{ width:100%; height:100%; object-fit:cover; }
.approach-step__eyebrow{
  font-weight:700; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--ink-50); margin-bottom:8px;
}
.approach-step h3{
  font-family: var(--font-display);
  font-weight: 600;
  font-size:1.45rem;
  margin:0 0 14px;
  color: var(--ink);
}
.approach-step p{
  color: var(--ink-70);
  font-size:.96rem;
  max-width: 32ch;
  margin-inline:auto;
}

/* =====================================================================
   Angebote
   ===================================================================== */
.offers-grid{
  display:grid; gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.offer-card{
  background: var(--paper);
  border: 1.5px solid var(--ink-14);
  border-radius: var(--radius);
  padding: 36px 32px;
  display:flex; flex-direction:column;
  transition: border-color .35s var(--ease-out), transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.offer-card:hover, .offer-card:focus-within{
  border-color: var(--ink-32);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -28px rgba(48,56,66,.4);
}
.offer-card__tag{
  font-weight:700; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--ink-50); margin-bottom:16px;
}
.offer-card h3{
  font-family: var(--font-display);
  font-weight: 600;
  font-size:1.75rem;
  margin:0 0 16px;
  color: var(--ink);
}
.offer-card p{
  color: var(--ink-70);
  margin:0 0 26px;
  flex-grow:1;
}
.offer-card .btn{ align-self:flex-start; }

/* =====================================================================
   Kompetenz
   ===================================================================== */
.competence{
  display:grid; gap: 56px;
  grid-template-columns: 1fr;
  align-items:center;
}
@media (min-width: 860px){
  .competence{ grid-template-columns: .8fr 1.2fr; }
}
.competence__portrait{
  aspect-ratio: 4/5;
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 380px;
}
.competence__portrait img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.competence__badge{
  display:inline-flex; align-items:center; gap:.6em;
  padding: .6em 1.1em;
  background: var(--sand);
  border-radius: 999px;
  font-weight:600; font-size:.9rem;
  margin-bottom: 20px;
}
.competence h2{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 3.5vw, 2.6rem);
  margin: 0 0 22px;
  max-width: 16ch;
}
.competence p{
  color: var(--ink-70);
  max-width: 56ch;
  margin: 0 0 16px;
}
.competence p.placeholder-note{
  font-size: .86rem;
  color: var(--ink-50);
  font-style: italic;
}

/* =====================================================================
   Wissen
   ===================================================================== */
.knowledge-grid{
  display:grid; gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.knowledge-card{
  text-decoration:none;
  color: var(--ink);
  display:block;
  border-radius: var(--radius);
  overflow:hidden;
  background: var(--paper-card);
  border: 1px solid var(--ink-14);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.knowledge-card:hover, .knowledge-card:focus-visible{
  transform: translateY(-5px);
  box-shadow: 0 24px 44px -30px rgba(48,56,66,.45);
}
.knowledge-card__img{
  aspect-ratio: 16/10;
  background: var(--sand);
  overflow:hidden;
}
.knowledge-card__img img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease-out); }
.knowledge-card:hover .knowledge-card__img img,
.knowledge-card:focus-visible .knowledge-card__img img{ transform: scale(1.04); }
.knowledge-card__body{ padding: 22px 24px 26px; }
.knowledge-card__cat{
  font-weight:700; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--ink-50); margin-bottom:10px;
}
.knowledge-card h3{
  font-family: var(--font-display);
  font-weight: 600;
  font-size:1.3rem;
  line-height:1.3;
  margin:0;
  color: var(--ink);
}

/* =====================================================================
   Abschluss / Booking
   ===================================================================== */
.closing{
  position:relative;
  overflow:hidden;
  color: var(--paper);
  background: var(--ink);
}
.closing__bg{
  position:absolute; inset:0;
  opacity:.28;
}
.closing__bg img{ width:100%; height:100%; object-fit:cover; object-position: 78% 30%; }
.closing__bg::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(100deg, rgba(48,56,66,1) 20%, rgba(48,56,66,.55) 62%, rgba(48,56,66,.15) 100%);
}
.closing__inner{ position:relative; z-index:2; max-width: 640px; }
.closing h2{
  font-family: var(--font-display);
  font-weight:500;
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height:1.15;
  margin: 0 0 20px;
}
.closing p{
  color: rgba(250,243,232,.82);
  font-size: 1.08rem;
  margin: 0 0 34px;
  max-width: 52ch;
}
.closing .btn--primary{ background: var(--sand); color: var(--ink); }
.closing .btn--primary:hover{ background:#ecd3ac; }

.closing__meta{
  margin-top: 34px;
  display:flex; gap: 28px; flex-wrap:wrap;
  font-size:.9rem;
  color: rgba(250,243,232,.7);
}
.closing__meta strong{ display:block; color: var(--paper); font-weight:600; margin-bottom:2px; }

/* =====================================================================
   Kontaktformular
   Steht im Abschluss-Abschnitt auf Tintenblau. Die Deckkraftwerte sind
   gegen die aufgehellte Feldfläche gerechnet, nicht gegen --ink:
   Rahmen 3:1, Platzhalter 4,5:1.
   ===================================================================== */
.contact-form{
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.contact-form__row{
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}
@media (max-width: 620px){
  .contact-form__row{ grid-template-columns: 1fr; }
}

.contact-form > .field{ width: 100%; }
.field{ display: flex; flex-direction: column; gap: 7px; }
.field label{
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(250,243,232,.88);
}
.field input,
.field textarea{
  font: inherit;
  font-size: 1rem;
  width: 100%;
  color: var(--paper);
  caret-color: var(--sand);
  background: rgba(250,243,232,.06);
  border: 1.5px solid rgba(250,243,232,.46);
  border-radius: var(--radius-sm);
  padding: .72em .9em;
  transition: border-color .3s var(--ease-out), background-color .3s var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.field textarea{ resize: vertical; min-height: 7em; }
.field input::placeholder,
.field textarea::placeholder{ color: rgba(250,243,232,.62); }
.field input:hover,
.field textarea:hover{ border-color: rgba(250,243,232,.7); }
.field input:focus,
.field textarea:focus{
  outline: none;
  border-color: var(--sand);
  background: rgba(250,243,232,.1);
}
/* Der globale Fokusring ist tintenblau und verschwindet auf dieser Fläche. */
.closing :focus-visible{ outline-color: var(--sand); }

.contact-form .btn--primary{ background: var(--sand); color: var(--ink); }
.contact-form .btn--primary:hover{ background: #ecd3ac; }
.contact-form .btn--primary:disabled{
  background: rgba(250,243,232,.28);
  color: rgba(250,243,232,.7);
  cursor: progress;
  transform: none;
}

/* Honeypot: für Menschen und Screenreader weg, für Bots ein Feld wie jedes
   andere. Kein display:none, das füllen manche Bots gezielt nicht aus. */
.visually-hidden-field{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.form-feedback{
  margin: 0;
  font-size: .94rem;
  min-height: 1.4em;
}
.form-feedback.is-success{ color: #A7C79B; }
.form-feedback.is-error{ color: #E8A08B; }

/* =====================================================================
   Footer
   ===================================================================== */
.site-footer{
  background: var(--paper-alt);
  border-top: 1px solid var(--ink-14);
  padding-block: 56px 32px;
}
.footer-grid{
  display:grid; gap: 40px;
  grid-template-columns: 1.4fr 1fr 1fr;
  margin-bottom: 40px;
}
@media (max-width: 720px){
  .footer-grid{ grid-template-columns: 1fr; gap: 32px; }
}
.footer-brand__mark{ height: 64px; width: auto; margin-bottom: 18px; }
.footer-brand .brand{ margin-bottom: 14px; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; }
.footer-brand p{ color: var(--ink-70); max-width: 34ch; font-size:.94rem; }
.footer-col h4{
  font-weight:700; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--ink-50); margin-bottom: 16px;
}
.footer-col ul{ display:flex; flex-direction:column; gap: 10px; }
.footer-col a{ text-decoration:none; font-size:.96rem; }
.footer-col a:hover{ text-decoration: underline; }
.footer-bottom{
  border-top: 1px solid var(--ink-14);
  padding-top: 26px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  font-size:.9rem; color: var(--ink-50);
}
.footer-bottom ul{ display:flex; gap:20px; flex-wrap:wrap; }
/* Rechtliche Links sind auf dem Handy die einzigen Ziele im Fuß-Abschluss —
   ohne eigene Trefferfläche liegen sie bei 20px Höhe. */
@media (pointer: coarse){
  .footer-bottom a{ display:inline-flex; align-items:center; min-height:44px; }
  .footer-bottom{ padding-bottom: 4px; }
}
.footer-bottom a{ text-decoration:none; }
.footer-bottom a:hover{ text-decoration:underline; }

/* =====================================================================
   Living element: soft breathing glow behind hero content edge
   ===================================================================== */
.hero__glow{
  position:absolute; right:-10%; top:50%; width:60%; aspect-ratio:1;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(250,243,232,.5), rgba(250,243,232,0) 70%);
  filter: blur(10px);
  pointer-events:none;
  animation: glowpulse 9s ease-in-out infinite;
  animation-delay: -3s;
}
@keyframes glowpulse{
  0%,100%{ opacity:.35; }
  50%{ opacity:.6; }
}
body.paused *, body.paused *::before, body.paused *::after{
  animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce){
  .hero__glow{ animation:none; opacity:.4; }
}