/* ==========================================================================
   Taumberger Treuhand — main.css
   Design-Tokens 1:1 aus Figma («Design V4 Home», node 4067-1030)
   ========================================================================== */

/* --- Schriften -----------------------------------------------------------
   Lege deine 2 Font-Dateien in  assets/fonts/  ab und benenne sie so:
     • Fliesstext/Sans   →  sans.woff2   (oder sans.woff / sans.ttf / sans.otf)
     • Display/Serif     →  serif.woff2  (oder serif.woff / serif.ttf / serif.otf)
   Der Browser nimmt automatisch das erste vorhandene Format (woff2 bevorzugt).
   Solange keine Datei da ist, greifen die Fallback-Fonts aus den Tokens.
   Mehrere Strichstärken? → weitere @font-face-Blöcke mit gleichem
   font-family, aber eigenem font-weight (z. B. 300 / 500) ergänzen.
   Details siehe assets/fonts/README.md
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "Site Sans";
  src: url("../fonts/HelveticaNowText-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Site Sans Light";
  src: url("../fonts/HelveticaNowText-Thin.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Site Serif";
  src: url("../fonts/SFT%20Schrifted%20Serif%20Display%20Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Farben (Figma-Variablen) */
  --c-dark: #1e1f26;
  /* Accent Dark  */
  --c-light: #f5f9ff;
  /* Accent Light */
  --c-bright: #364089;
  /* Accent Bright */
  --c-cream: #FBF8F2;
  /* Button-Hover-Füllung (aus Design) */
  --c-black: #000000;
  --c-white: #ffffff;

  /* Schriftfamilien (Lizenz-Font zuerst, dann Fallback-Stack) */
  --font-sans: "Site Sans", "Helvetica Now Text", Arial, Helvetica, sans-serif;
  --font-sans-light: "Site Sans Light", "Helvetica Now Text", Arial, Helvetica, sans-serif;
  --font-serif: "Site Serif", "SFT Schrifted Serif D", Georgia, "Times New Roman", serif;

  /* Schriftgrössen (Figma-Skala, responsiv skaliert) */
  --fs-small: 1rem;
  /* 16 — Very Small */
  --fs-body: 1.25rem;
  /* 20 — Body       */
  --fs-big: clamp(1.75rem, 3.5vw, 2.5rem);
  /* 40 — Big        */
  --fs-large: clamp(2.5rem, 5.5vw, 5rem);
  /* 80 — Large      */
  --fs-xl: clamp(3rem, 7vw, 6.25rem);
  /* 100 — Very Large*/
  --fs-display: clamp(4rem, 13vw, 12.5rem);
  /* 200 — Huge Expressive */

  /* Layout */
  --page-pad: clamp(1.25rem, 5.2vw, 6.25rem);
  /* 100px @1920 */
  --maxw: 1720px;
  /* Content-Breite (1920 - 2×100) */
  --gap-cols: clamp(2rem, 5vw, 4rem);
  /* einheitlicher Abstand Bild ↔ Text (About/Kontakt/Immobilien) */

  /* Sonstiges */
  --nav-h: 5rem;
}

/* --- Reset / Base -------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--c-black);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 300;
}

/* Wiederverwendbarer Content-Container */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

.container__title {
  padding-bottom: clamp(3rem, 8vw, 150px);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   Header / Nav-Top
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background .3s ease, box-shadow .3s ease;
}

/* Beim Scrollen: Frosted-Glass-Hintergrund, damit Logo/Burger sichtbar bleiben */
.site-header[data-scrolled="true"] {
  background: rgba(30, 31, 38, 0.7);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  box-shadow: 0 1px 3px rgba(30, 31, 38, 0.1);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-logo img {
  height: 1.9rem;
  width: auto;
}

/* Burger-Button */
.nav-toggle {
  --burger-w: 34px;
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  width: var(--burger-w);
  height: 24px;
  padding: 0;
  position: relative;
}

.nav-toggle span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--c-white);
  transition: transform .3s ease, opacity .3s ease;
}

.nav-toggle span:nth-child(1) {
  top: 3px;
}

.nav-toggle span:nth-child(2) {
  top: 11px;
}

.nav-toggle span:nth-child(3) {
  top: 19px;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Navigations-Panel (offener Zustand) — Frosted-Glass oben */
.nav-panel {
  position: fixed;
  top: clamp(0.75rem, 1.2vw, 20px);
  inset-inline: clamp(0.75rem, 3.65vw, 70px);
  z-index: 30;
  padding: clamp(1.1rem, 1.8vw, 1.6rem) clamp(1.25rem, 2.3vw, 1.9rem) clamp(1.5rem, 2.4vw, 2rem);
  border-radius: 10px;
  background: rgba(30, 31, 38, 0.7);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  box-shadow: 0 1px 3px rgba(30, 31, 38, 0.1);
  color: var(--c-white);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
}

.nav-panel[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-panel__top {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-panel__logo img {
  height: 2.1rem;
  width: auto;
  display: block;
}

.nav-panel__tagline {
  flex: 1;
  margin: 0;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.6);
}

.nav-panel__close {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--c-white);
  cursor: pointer;
  padding: .4rem;
  margin-right: -.4rem;   /* Padding ausgleichen → X bündig zum Rand wie Logo links */
  line-height: 0;
  border-radius: 8px;
  transition: background .2s ease;
}

.nav-panel__close:hover {
  background: rgba(0, 0, 0, 0.25);
}

.nav-panel__nav {
  list-style: none;
  margin: clamp(1.25rem, 2.2vw, 2rem) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;   /* Desktop: Links horizontal mittig im Nav-Panel */
  gap: clamp(0.75rem, 1.8vw, 2.25rem);
}

.nav-panel__nav a {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: var(--fs-big);
  line-height: 1;
  color: var(--c-white);
  padding: .15em .5em;
  border-radius: 10px;
  transition: background .2s ease;
}

.nav-panel__nav a:hover {
  background: rgba(0, 0, 0, 0.25);
}

@media (max-width: 700px) {
  .nav-panel__tagline {
    display: none;
  }
}

/* ==========================================================================
   Hero — scroll-gekoppelte Animation (ohne Scroll-Pinning)
   --fade  : 1 → 0   Hero-Text blendet aus
   --crop  : 0 → 1   Bild wird von allen Seiten eingezogen
   --name  : 0 → 1   Name fliegt aus dem unteren Drittel in die Mitte
   Werte werden von main.js aus der Scroll-Position gesetzt.
   ========================================================================== */
.hero {
  --fade: 1;
  --crop: 0;
  --name: 0;
  position: relative;
  height: 260svh;
  /* Scroll-Track: mehr Höhe = langsamer/mehr Scroll pro Fortschritt */
  background: var(--c-dark);
  color: var(--c-white);
}

/* Bleibt im Blick, während der Track durchscrollt — kein Scroll-Hijacking */
.hero__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
  /* Eigener dunkler Untergrund: der Name invertiert immer gegen echte Farbe,
     auch wo das Bild bereits weggeschnitten ist (sonst Blend gegen „nichts" = weiss). */
  background: var(--c-dark);
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Endzustand: zentriertes 2/3-Hochformat (Höhe 78svh, Breite = 2/3 davon = 52svh).
     Der Rahmen bleibt mittig; der Bildinhalt selbst wird gepant (siehe img unten). */
  clip-path: inset(calc(var(--crop) * 11svh) calc(var(--crop) * max(0px, (100vw - 52svh) / 2)) round calc(var(--crop) * 12px));
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Kein Pan: Der Bildausschnitt bleibt beim Zuschneiden zentriert (Wunsch Kunde). */
}

/* Abdunkler (Figma «dimmer») */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30, 31, 38, .55) 0%, rgba(30, 31, 38, .35) 40%, rgba(30, 31, 38, .65) 100%);
}

/* Fallback ohne Bild */
.hero--no-image .hero__media {
  background: radial-gradient(120% 120% at 30% 20%, #2b2d38 0%, var(--c-dark) 70%);
}

.hero__inner {
  position: relative;
  z-index: 10;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-end;             /* Text + Scroll-Hinweis unten auf gleicher Höhe */
  justify-content: space-between;
  gap: 1.5rem 2rem;
  /* Inhalt in die untere Hälfte, unten ausgerichtet (max. bis zur Mitte) */
  padding-block: max(calc(var(--nav-h) + 2rem), 50svh) clamp(2rem, 5vw, 4rem);
  opacity: var(--fade);
}

.hero__content {
  max-width: 75%;   /* Überschrift max. 75% → rechts bleibt Platz für den Scroll-Hinweis */
}

/* Titel + Untertitel gleich gross wie die Section-Überschriften (90px).
   Beide auf kleinen Screens responsiv (siehe responsive.css). */
.hero__title {
  font-size: 90px;
  font-weight: 200;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-family: var(--font-serif);
}

.hero__subtitle {
  font-size: 90px;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: rgba(255, 255, 255, .9);
  font-family: var(--font-sans-light);
  margin: .35rem 0 0;               /* gleicher Abstand wie in den Sektionsköpfen */
}

.hero__scroll {
  align-self: flex-end;
  font-size: var(--fs-small);
  letter-spacing: .02em;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: rgba(255, 255, 255, .85);
}

.hero__scroll::after {
  content: "";
  width: 1px;
  height: 2.5rem;
  background: currentColor;
  opacity: .6;
}

/* Name, der einfliegt — reines Weiss über dem Bild (kein Blend/Invert, Wunsch Kunde) */
.hero__name-wrap {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding-inline: var(--page-pad);
  pointer-events: none;
}

.hero__name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.75rem, 7.5vw, 8rem);   /* 128px, gleich wie die Expertise-Begriffe */
  line-height: .9;
  text-align: center;
  color: var(--c-white);
  opacity: var(--name);
  /* Fliegt von rechts (60vw) herein; sitzt fix im unteren Drittel (+17vh ab Mitte). */
  transform: translate(calc((1 - var(--name)) * 60vw), 17vh);
}

@media (max-width: 640px) {
  .hero__scroll {
    align-self: flex-start;
  }
}

/* Bewegung reduzieren: statischer Endzustand (gerahmtes Bild + Name), kein Scrubbing */
@media (prefers-reduced-motion: reduce) {
  .hero {
    height: 100svh;
    --fade: 0;
    --crop: 1;
    --name: 1;
  }

  .hero__sticky {
    position: static;
  }

  .hero__name {
    transform: translateY(17vh);
  }
}

/* ==========================================================================
   Gemeinsame Sektions-Bausteine
   ========================================================================== */
.section {
  padding-block: clamp(3.5rem, 9vw, 8rem);
}

/* Anker-Sprünge unter dem fixierten Header positionieren */
section[id] {
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}

.section--dark {
  background: var(--c-dark);
  color: var(--c-white);
}

.section--dark a {
  color: var(--c-white);
}

/* Entrance-Animation (gestaffelt): die Blöcke (.reveal-item) eines Abschnitts steigen
   nacheinander sanft ein. JS setzt --ri (Index) je Block und schaltet .is-revealed.
   Nur mit JS + keine Reduced-Motion; sonst normal sichtbar. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal].reveal-armed .reveal-item {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .7s ease, transform .8s cubic-bezier(.16, 1, .3, 1);
    transition-delay: calc(var(--ri, 0) * 0.11s);
  }

  [data-reveal].reveal-armed.is-revealed .reveal-item {
    opacity: 1;
    transform: none;
  }
}

.eyebrow {
  font-family: var(--font-serif);
  font-size: 90px;
  font-weight: 500;
  letter-spacing: .04em;
  opacity: .8;
  margin: 0 0 1rem;
}

.section__head {
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.section__title {
  font-family: var(--font-serif);
  font-size: 90px;
  font-weight: 300;
  line-height: 1.05;
}

.section__subtitle {
  font-size: 90px;
  font-weight: 300;
  line-height: 100%;
  opacity: .7;
  margin: .35rem 0 0;
  font-family: var(--font-sans-light);
}

.display {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -0.01em;
}

/* Buttons & Links */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 1.1rem 1.6rem;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: var(--fs-small);
  letter-spacing: .02em;
  color: var(--c-white);
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);   /* Drop Shadow (aus Design) */
  /* Hover-Füllung: cremefarbene Fläche wischt von links über den dunklen Grund */
  background:
    linear-gradient(var(--c-cream) 0 0) left center / 0% 100% no-repeat,
    var(--c-dark);
  transition: background-size .45s cubic-bezier(.16, 1, .3, 1), color .4s ease;
}

.btn:hover,
.btn:focus-visible {
  color: var(--c-dark);
  background-size: 100% 100%;
}

/* Führender Chevron (nur Spitze, gleiche SVG-Form): kommt beim Hover von links */
.btn::before {
  content: "";
  display: inline-block;
  flex: none;
  width: .55em;
  height: .8em;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  margin-right: 0;
  transform: translateX(-.3em);
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2012'%3E%3Cpath%20d='M4%202.6L9.6%206L4%209.4'%20fill='none'%20stroke='black'%20stroke-width='1.4'%20stroke-linecap='square'%20stroke-linejoin='miter'/%3E%3C/svg%3E") left center / .55em .55em no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2012'%3E%3Cpath%20d='M4%202.6L9.6%206L4%209.4'%20fill='none'%20stroke='black'%20stroke-width='1.4'%20stroke-linecap='square'%20stroke-linejoin='miter'/%3E%3C/svg%3E") left center / .55em .55em no-repeat;
  transition: max-width .4s cubic-bezier(.16, 1, .3, 1), opacity .3s ease,
    transform .4s ease, margin-right .4s ease;
}

.btn:hover::before,
.btn:focus-visible::before {
  max-width: .55em;
  opacity: 1;
  margin-right: .5em;
  transform: translateX(0);
}

/* Nachlaufender Vollpfeil (gleiche SVG-Form): normal sichtbar, blendet beim Hover aus */
.btn::after {
  content: "";
  display: inline-block;
  flex: none;
  width: 1.4em;
  height: .8em;
  max-width: 1.4em;
  overflow: hidden;
  opacity: 1;
  margin-left: .55em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2012'%3E%3Cpath%20d='M1%206H23M17.4%202.6L23%206L17.4%209.4'%20fill='none'%20stroke='black'%20stroke-width='1.4'%20stroke-linecap='square'%20stroke-linejoin='miter'/%3E%3C/svg%3E") left center / 1.4em .7em no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2012'%3E%3Cpath%20d='M1%206H23M17.4%202.6L23%206L17.4%209.4'%20fill='none'%20stroke='black'%20stroke-width='1.4'%20stroke-linecap='square'%20stroke-linejoin='miter'/%3E%3C/svg%3E") left center / 1.4em .7em no-repeat;
  transition: max-width .4s cubic-bezier(.16, 1, .3, 1), opacity .3s ease,
    margin-left .4s ease;
}

.btn:hover::after,
.btn:focus-visible::after {
  max-width: 0;
  opacity: 0;
  margin-left: 0;
}

.link-arrow {
  position: relative;
  display: inline-block;
  font-size: var(--fs-small);
  letter-spacing: .02em;
  color: inherit;
  padding-bottom: .8em;           /* Platz für den Pfeil unter dem Text */
  padding-left: 0;
  opacity: .85;
  transition: opacity .3s ease, padding-left .45s cubic-bezier(.16, 1, .3, 1);
}

.link-arrow:hover,
.link-arrow:focus-visible {
  opacity: 1;
  padding-left: 1.5em;            /* macht Platz für den Pfeil vor dem Wort */
}

/* Normal: langer Linien-Pfeil unter dem Text (so breit wie der Link).
   Linie (Verlauf) + Spitze (SVG) als Mask → currentColor, keine Verzerrung. */
.link-arrow::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .05em;
  height: .6em;
  background-color: currentColor;
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2012'%3E%3Cpath%20d='M4%202.6L9.6%206L4%209.4'%20fill='none'%20stroke='black'%20stroke-width='1.4'%20stroke-linecap='square'%20stroke-linejoin='miter'/%3E%3C/svg%3E") right center / .8em .8em no-repeat,
    linear-gradient(#000 0 0) left center / calc(100% - .38em) 1.5px no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2012'%3E%3Cpath%20d='M4%202.6L9.6%206L4%209.4'%20fill='none'%20stroke='black'%20stroke-width='1.4'%20stroke-linecap='square'%20stroke-linejoin='miter'/%3E%3C/svg%3E") right center / .8em .8em no-repeat,
    linear-gradient(#000 0 0) left center / calc(100% - .38em) 1.5px no-repeat;
  transform-origin: left center;
  transition: opacity .3s ease, transform .4s ease;
}

.link-arrow:hover::after,
.link-arrow:focus-visible::after {
  opacity: 0;
  transform: scaleX(.2);
}

/* Hover: Vollpfeil (gleiche SVG-Form) rückt an den Anfang des Wortes (davor) */
.link-arrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  width: 1.3em;
  height: .8em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2012'%3E%3Cpath%20d='M1%206H23M17.4%202.6L23%206L17.4%209.4'%20fill='none'%20stroke='black'%20stroke-width='1.4'%20stroke-linecap='square'%20stroke-linejoin='miter'/%3E%3C/svg%3E") left center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2012'%3E%3Cpath%20d='M1%206H23M17.4%202.6L23%206L17.4%209.4'%20fill='none'%20stroke='black'%20stroke-width='1.4'%20stroke-linecap='square'%20stroke-linejoin='miter'/%3E%3C/svg%3E") left center / contain no-repeat;
  opacity: 0;
  transform: translateX(-.5em);
  transition: opacity .3s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
}

.link-arrow:hover::before,
.link-arrow:focus-visible::before {
  opacity: 1;
  transform: translateX(0);
}

/* Bild-Platzhalter */
.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 8rem;
  border: 1px dashed currentColor;
  border-radius: 6px;
  background: rgba(127, 127, 127, .12);
  font-size: var(--fs-small);
  opacity: .55;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.ph--portrait {
  aspect-ratio: 3/4;
}

.ph--wide {
  aspect-ratio: 3/2;
}

/* Karten-Grids */
.cards {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.cards--2 {
  grid-template-columns: repeat(2, 1fr);
}

.cards--3 {
  grid-template-columns: repeat(3, 1fr);

}

@media (max-width: 900px) {
  .cards--3 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 700px) {
  .cards--2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .cards--3 {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Expertise / Services
   ========================================================================== */
.expertise .cards {
  padding-left: 33%;
  gap: 3rem;
}

.expertise__words {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Endlage: alle Wörter zentriert */
  gap: 0.15em;
  /* etwas Luft → nie überlappend */
}

.expertise__word {
  font-family: var(--font-serif);
  /* So gross wie möglich, aber das längste Wort («Unternehmensberatung»)
     passt auf eine Zeile — responsiv über die Bildschirmbreite. */
  font-size: clamp(1.75rem, 7.5vw, 8rem);
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.02;
  text-align: center;
  opacity: .95;
}

/* Sticky-Stage: Ausschnitt bleibt stehen, Inhalt vertikal + horizontal zentriert */
.expertise__stage-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  text-align: center;
}

.expertise__cards {
  padding-block: clamp(2rem, 5vw, 4rem) clamp(3.5rem, 9vw, 8rem);
}

/* Scroll-Animation aktiv (nur mit JS + keine Reduced-Motion):
   Track gibt Scroll-Weg, Inner pinnt, Wörter fliegen von rechts (via --p, gestaffelt über --i). */
.expertise.is-scrollanim .expertise__stage {
  height: 220svh;
}

.expertise.is-scrollanim .expertise__stage-inner {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  /* fliegende Wörter clippen */
}

.expertise.is-scrollanim .expertise__word {
  --wi: clamp(0, calc((var(--p, 0) - var(--i) * 0.16) / 0.5), 1);
  opacity: var(--wi);
  /* Start: von rechts, Y nur leicht Richtung Mitte (nahe der Zielhöhe → kein Überlappen).
     Ende: an ihrem Platz (translate 0) — horizontal UND vertikal bewegt. */
  transform: translate(calc((1 - var(--wi)) * 40vw),
      calc((1 - var(--wi)) * (1.5 - var(--i)) * 0.4em));
  /* Sanftes Ease-out (glättet die scroll-getriebenen Schritte). */
  transition: transform .6s cubic-bezier(.16, 1, .3, 1), opacity .5s ease;
}

#expertise p.eyebrow {
  font-size: 25px;
}

.card__icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--c-bright);
  margin-bottom: 1.25rem;
}

/* Hochgeladenes Icon: echtes Bild statt Platzhalter-Quadrat */
.card__icon--img {
  border-radius: 0;
  background: transparent;
  object-fit: contain;
}

.card__title {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  font-weight: 500;
  margin-bottom: .6rem;
}

.card__text {
  font-size: var(--fs-body);
  opacity: .8;
  margin-bottom: 1.25rem;
  line-height: 1.6;
}

.card__list {
  margin: 0;
  padding: 0;
  list-style: none;

  font-size: 16px;
  color: rgba(255, 255, 255, .5);   /* etwas ausgegraut */
}

.card__list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .4rem;
  line-height: 1.5;
}

.card__list li::before {
  content: "→";
  position: absolute;
  left: 0;
  opacity: .8;
}

/* ==========================================================================
   Über mich
   ========================================================================== */
.about {
  position: relative;
}

.about__grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--gap-cols);
  align-items: center;
  padding-block: clamp(3.5rem, 9vw, 8rem);
}

.about__media-holder {
  position: static;
  /* reserviert nur den Platz; Figur bezieht sich auf .about__sticky */
}

.about__media {
  margin: 0;
}

.about__media img,
.about__media .ph {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.about__body {
  position: relative;
  /* Bezugspunkt für offsetLeft/offsetTop der Wörter */
  font-family: var(--font-serif);   /* andere Schrift als der übrige Fliesstext */
  font-size: var(--fs-body);
  line-height: 1.7;
  margin: 0 0 2rem;
}

/* „Über mich"-Titel gleich gross wie die Service-Karten-Titel (.card__title) */
.about .eyebrow {
  font-size: var(--fs-body);
}

/* Aufhell-Effekt: Wörter von leicht transparent → weiss (Basis, auch ohne JS sichtbar). */
.reveal-word {
  opacity: .92;
}

/* --- Scroll-Animation aktiv (nur mit JS + keine Reduced-Motion) ---------- */
.about.is-scrollanim .about__track {
  height: 230svh;
  /* Scroll-Weg: Reveal + Bild-Zoom */
}

.about.is-scrollanim .about__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Vollbild-Zoom auf Viewport clippen */
}

.about.is-scrollanim .about__grid {
  padding-block: 0;
  width: 100%;
}

/* Phase A: Text hellt zeilenweise (schräge Front) auf — p 0…0.35 */
.about.is-scrollanim .reveal-word {
  --t: clamp(0, calc((var(--p, 0) / 0.35 - var(--o, 0)) / 0.12), 1);
  opacity: calc(0.22 + 0.78 * var(--t));
  transition: opacity .45s ease;
}

/* Phase B: Bild wächst als echte Box (scharf, object-fit cover) bis Vollbild — p 0.45…0.95.
   Position/Grösse werden aus den Zellwerten (--cx/--cy/--cw/--ch aus main.js) und --z gelerpt.
   Bezugsrahmen ist .about__sticky (bei Pin = Viewport → 100 % = Vollbild). */
.about.is-scrollanim .about__media-holder {
  aspect-ratio: var(--about-ar, 16 / 9);
  /* hält den Platz, wenn die Figur absolut wird */
}

.about.is-scrollanim .about__media {
  --z: clamp(0, calc((var(--p, 0) - 0.45) / 0.5), 1);
  position: absolute;
  z-index: 40;
  overflow: hidden;
  border-radius: calc((1 - var(--z)) * 8px);
  left: calc(var(--cx, 0px) * (1 - var(--z)));
  top: calc(var(--cy, 0px) * (1 - var(--z)));
  width: calc(var(--cw, 100%) + (100% - var(--cw, 100%)) * var(--z));
  height: calc(var(--ch, 100%) + (100% - var(--ch, 100%)) * var(--z));
}

.about.is-scrollanim .about__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

@media (max-width: 800px) {
  .about__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Team
   ========================================================================== */
.team .cards {
  padding-left: 25%;
}


.team-card__photo {
  aspect-ratio: 2/3;
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 1.25rem;
}

.team-card__name {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  font-weight: 500;
  margin-bottom: .2rem;
}

.team-card__role {
  font-size: var(--fs-small);
  opacity: .65;
  margin: 0 0 1rem;
}

.team-card__contact {
  font-size: var(--fs-small);
  line-height: 1.7;
  margin: 0;
}

.team-card__contact a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.team-card__linkedin {
  display: inline-block;
  margin-top: .35rem;
}

/* ==========================================================================
   Kontakt
   ========================================================================== */
.contact {
  background: var(--c-white);
}

.contact__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--gap-cols);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.field__label {
  display: none;
}

.field input,
.field textarea {
  font: inherit;
  font-size: var(--fs-small);
  padding: 1rem 1.25rem;
  border: 0;
  border-radius: 10px;
  background: var(--c-light);
  color: inherit;
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(30, 31, 38, .45);
}

.field input:focus,
.field textarea:focus {
  outline: 2px solid var(--c-bright);
  outline-offset: 1px;
}

.contact-form .btn {
  align-self: flex-end;
  padding: 15px 120px;
}

.form-note {
  padding: .9rem 1.1rem;
  border-radius: 6px;
  font-size: var(--fs-small);
}

.form-note--error {
  background: #fbeaea;
  color: #a32020;
}

/* Erfolgsmeldung — gefülltes Panel im Button-Stil (dunkel, 10px Radius) */
.form-success {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.75rem 1.5rem;
  border-radius: 10px;
  background: var(--c-dark);
  color: var(--c-white);
  animation: form-success-in .55s cubic-bezier(.16, 1, .3, 1) both;
}

.form-success__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
}

.form-success__icon svg {
  width: 22px;
  height: 22px;
}

.form-success__text {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.5;
}

@keyframes form-success-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .form-success { animation: none; }
}

.contact__aside {
  gap: 3rem;
  display: flex;
  flex-direction: column;
}

.contact__address {
  font-style: normal;
  line-height: 1.7;
  margin-bottom: 2rem;
  display: flex;
  gap: 3rem;
}

.contact__address a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact__media {
  margin: 0;
}

.contact__media img,
.contact__media .ph {
  width: 100%;
  border-radius: 8px;
}

@media (max-width: 800px) {
  .contact__grid {
    grid-template-columns: 1fr;
  }

  .field-row {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Immobilien
   ========================================================================== */
.immo__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-cols);
  align-items: center;
}

.immo__body {
  font-size: var(--fs-body);
  line-height: 1.7;
  opacity: .85;
  margin: 1.5rem 0 2rem;
}

.immo__media {
  margin: 0;   /* Browser-Default-Margin der <figure> entfernen → volle Spaltenbreite */
}

.immo__media img,
.immo__media .ph {
  width: 100%;
  border-radius: 8px;
}

@media (max-width: 800px) {
  .immo__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  padding-block: 75px 50px;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;   /* Spalten über die volle Breite verteilen */
  gap: 2rem 3rem;
  font-size: var(--fs-body);
  line-height: 1.6;
  padding-bottom: clamp(4rem, 12vw, 9rem);
}

.footer-col {
  flex: 0 0 auto;   /* nur so breit wie der Inhalt */
}

.footer-col {
  font-style: normal;
}

.footer-col a {
  text-decoration: none;
}

.footer-col a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-brand {
  display: flex;
  justify-content: center;
}

.footer-logo {
  height: clamp(2.5rem, 5vw, 3.5rem);
  width: auto;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: var(--fs-small);
  color: #707070;
}

.footer-copy {
  color: #707070;
}

.footer-cert {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
}

.footer-cert__label {
  color: #707070;
}

.footer-cert__img {
  width: 140px;
  height: auto;
}

@media (max-width: 800px) {
  .footer-top {
    justify-content: flex-start;   /* beim Umbrechen links ausrichten statt spreizen */
  }
}

@media (max-width: 480px) {
  /* Footer als EINE Spalte mit frei sortierbaren Elementen: footer-top/-bottom
     auflösen (display: contents), damit alle Kinder direkte Flex-Items des
     Containers werden und per order sortierbar sind (Container-Grenzen fallen weg). */
  .site-footer > .container {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }
  .footer-top,
  .footer-bottom { display: contents; }

  /* Reihenfolge oben → unten:
     Adresse · Telefon/E-Mail · Badge · Impressum/Datenschutz · Logo · Copyright */
  .footer-top address.footer-col { order: 1; }   /* Adresse */
  .footer-top div.footer-col     { order: 2; }   /* Telefon/E-Mail */
  .footer-cert                   { order: 3; }   /* TREUHAND-SUISSE-Badge */
  .footer-legal-nav              { order: 4; }   /* Impressum/Datenschutz */
  .footer-brand                  { order: 5; }   /* Logo */
  .footer-copy                   { order: 6; }   /* Copyright (zuunterst) */

  .footer-brand { justify-content: flex-start; }
  .footer-cert  { align-items: flex-start; }
}

/* ==========================================================================
   Unterseiten (Impressum / Datenschutz)
   ========================================================================== */

/* Auf hellen Unterseiten sitzt der Header nicht über einem dunklen Hero —
   damit das weisse Logo sichtbar bleibt, dort dauerhaft dunkler Hintergrund. */
body.is-subpage .site-header {
  background: rgba(30, 31, 38, 0.85);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  box-shadow: 0 1px 3px rgba(30, 31, 38, 0.1);
}

.legal {
  padding-top: calc(var(--nav-h) + clamp(3rem, 8vw, 6rem));
  padding-bottom: clamp(4rem, 10vw, 8rem);
  background: var(--c-white);
}

.legal__title {
  font-family: var(--font-serif);
  font-size: var(--fs-large);
  margin-bottom: 1rem;
}

.legal__intro {
  color: #707070;
  font-size: var(--fs-small);
  margin: 0 0 clamp(2.5rem, 6vw, 4rem);
}

.legal__body {
  max-width: 72ch;
  line-height: 1.7;
}

.legal__body h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-big);
  margin: clamp(2.5rem, 6vw, 3.5rem) 0 1rem;
}

.legal__body h3 {
  font-size: 1.35rem;
  font-weight: 400;
  margin: 2rem 0 .5rem;
}

.legal__body p {
  margin: 0 0 1.25rem;
}

.legal__body ul,
.legal__body ol {
  margin: 0 0 1.25rem;
  padding-left: 1.5rem;
}

.legal__body li {
  margin-bottom: .4rem;
}

.legal__body a {
  color: var(--c-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal__body blockquote {
  margin: 0 0 1.25rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--c-bright);
  background: var(--c-light);
  color: #4a4a4a;
}