/* ==========================================================================
   Arkona Advisors — v16
   Umgesetzt nach dem Design-System des Designers (Stand 7.9.2026):
   elf Farbtoene, drei Schriftfamilien, keine Schatten, Bewegung nur als
   Farb- und Opazitaetswechsel. Quelle: design-system/design.md.
   ========================================================================== */

/* ---------- Schrift (selbst gehostet, alle drei unter OFL 1.1) ----------
   Outfit traegt Ueberschriften und Kicker und ist die Schrift der Wortmarke.
   Inter traegt den Fliesstext. Newsreader steht nur fuer Zitate und wird
   immer kursiv gesetzt; die aufrechte Fassung kommt nicht vor. */
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-Light.ttf') format('truetype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/Inter-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('../fonts/outfit-300.ttf') format('truetype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('../fonts/outfit-400.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('../fonts/outfit-500.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('../fonts/outfit-600.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('../fonts/outfit-700.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('../fonts/newsreader-italic-var.ttf') format('truetype'); font-style: italic; font-weight: 200 800; font-display: swap; }

/* ---------- Token ----------
   Die elf Toene stehen genau so im Design-System. Es kommt keiner dazu und
   keiner wird gemischt. Die alten Namen bleiben als Aliase bestehen, damit
   die Inline-Styles in den HTML-Dateien weiter greifen. */
:root {
  /* primaer */
  --anker: #450D13;        /* Absender, Flaeche */
  --anker-hell: #712129;   /* Tiefe, zweite Stufe */
  /* sekundaer */
  --sand-hell: #D6B79D;    /* zweiter heller Grund, Text auf Bordeaux */
  --sand: #C6A181;         /* Akzent auf dunklem Grund, Band, Korn */
  --sand-dunkel: #8C6A4B;  /* Akzent auf hellem Grund: Linie, Kicker, Ziffer */
  /* tertiaer */
  --papier: #F4F0E9;       /* Standardgrund */
  --stein: #D9CEC2;        /* Raster, Trennlinie */
  --stein-dunkel: #8A7F70; /* Sekundaerflaeche */
  --asche: #5F5452;        /* Sekundaertext */
  --tinte: #1A1013;        /* Haupttext */
  /* nur Daten, nie Schrift auf hellem Grund */
  --kueste: #7594A1;

  /* Aliase auf die alten Namen */
  --green: var(--anker);
  --moss: var(--anker-hell);
  --deep: var(--anker);    /* frueher ein eigener, dunklerer Ton — den gibt es nicht mehr */
  --ink: var(--tinte);
  --paper: var(--papier);
  --white: #FFFFFF;
  --stone: var(--stein);
  --stone-d: var(--stein-dunkel);
  --slate: var(--asche);
  --hair: rgba(26, 16, 19, .14);
  --hair-strong: rgba(26, 16, 19, .26);
  --hair-inv: rgba(244, 240, 233, .22);

  --display: 'Outfit', system-ui, sans-serif;   /* Ueberschriften, Kicker */
  --sans: 'Inter', 'Outfit', system-ui, sans-serif;
  --quote: 'Newsreader', Georgia, serif;        /* nur Zitat, immer kursiv */
  --pad: clamp(24px, 5vw, 76px);
  --radius: 4px;   /* Karte, Feld, Knopf */
  --radius-sm: 2px;
  /* Seitlicher Bleed der Listenzeilen: Trennlinie und Hover-Flaeche laufen um
     dieses Mass ueber den Text hinaus, der Text selbst bleibt an Ort und
     Stelle (Margin und Padding heben sich gegenseitig auf). Bleibt unter dem
     kleinsten Seitenrand (--pad, Minimum 24px), damit auf schmalen
     Bildschirmen kein Overflow entsteht. */
  --row-bleed: clamp(14px, 1.6vw, 20px);
}

/* ---------- Basis ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--sans); font-weight: 400;
  color: var(--ink); background: var(--paper);
  font-size: 17.5px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--sand); color: var(--anker); }
:focus-visible { outline: 2px solid var(--sand-dunkel); outline-offset: 2px; }

.skip { position: absolute; left: -999px; top: 12px; z-index: 200; background: var(--deep); color: #fff; padding: 10px 18px; font-size: 14px; }
.skip:focus { left: 12px; }

.container { max-width: 1300px; margin-inline: auto; padding-inline: var(--pad); }
.narrow { max-width: 940px; }

/* ---------- Typo-Bausteine ---------- */
/* Kicker: Outfit, Laufweite .08em nach Vorgabe. Die Vorgabe nennt als Farbe
   Sand dunkel, das ergibt auf Papier aber nur 4.32:1 und reicht damit fuer
   12 px nicht (AA braucht 4.5:1). Deshalb Bordeaux, 14.01:1. Mit dem
   Designer klaeren. */
.kicker {
  font-family: var(--display);
  font-size: 12px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--green);
}
.on-dark .kicker { color: var(--sand); }

.display {
  font-family: var(--display); font-weight: 400;
  letter-spacing: -.005em; line-height: 1.08;
}
h1.display { font-size: clamp(40px, 5.2vw, 76px); }
h2.display { font-size: clamp(29px, 3.2vw, 45px); line-height: 1.14; }
h3.display { font-size: clamp(23px, 2.2vw, 30px); line-height: 1.22; }

.prose { max-width: 66ch; }
.prose p { margin-bottom: 1.35em; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 600; }

.lede { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.6; color: var(--slate); max-width: 58ch; }
.on-dark .lede { color: rgba(244,240,233,.75); }

a.tlink {
  color: var(--green); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 5px;
  text-decoration-color: rgba(69,13,19,.35);
  transition: text-decoration-color .25s ease-out;
}
a.tlink:hover { text-decoration-color: var(--green); }
.on-dark a.tlink { color: var(--paper); text-decoration-color: rgba(198,161,129,.55); }
.on-dark a.tlink:hover { text-decoration-color: var(--sand); }

/* Platzhalter — bewusst sichtbar */
.ph {
  display: inline-block; background: rgba(217,206,194,.45);
  border: 1px dashed var(--stone-d); color: #6E6450;
  font-size: 13px; letter-spacing: .04em;
  padding: 2px 10px; border-radius: 2px;
}
.on-dark .ph { background: rgba(217,206,194,.14); color: var(--stone); }

/* ---------- Navigation ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 90; transition: background .3s ease-out, box-shadow .3s ease-out; }
.nav .container { display: flex; align-items: center; justify-content: space-between; padding-block: 20px; }
.nav .brand img { height: 40px; width: auto; }
.nav .brand .logo-green { display: none; }
.nav-links { display: flex; gap: 30px; }
.nav-links a {
  font-size: 14.5px; font-weight: 500; text-decoration: none;
  color: rgba(255,255,255,.88); padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease-out;
}
.nav-links a:hover { border-bottom-color: var(--sand); }
.nav-links a[aria-current="page"] { border-bottom-color: rgba(255,255,255,.6); }

.nav.solid, .nav.scrolled { background: var(--paper); box-shadow: 0 1px 0 var(--hair); }
.nav.solid .brand .logo-white, .nav.scrolled .brand .logo-white { display: none; }
.nav.solid .brand .logo-green, .nav.scrolled .brand .logo-green { display: block; }
.nav.solid .nav-links a, .nav.scrolled .nav-links a { color: var(--ink); }
.nav.solid .nav-links a:hover, .nav.scrolled .nav-links a:hover { border-bottom-color: var(--green); }
.nav.solid .nav-links a[aria-current="page"], .nav.scrolled .nav-links a[aria-current="page"] { border-bottom-color: var(--green); color: var(--green); }

.menu-btn {
  display: none; background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: #fff; padding: 8px 0;
}
.nav.solid .menu-btn, .nav.scrolled .menu-btn { color: var(--ink); }

.mobile-menu { display: none; position: fixed; inset: 0; z-index: 120; background: var(--green); padding: 30px var(--pad); }
.mobile-menu.open { display: flex; flex-direction: column; }
.mobile-menu .close-btn { align-self: flex-end; background: none; border: 0; color: rgba(255,255,255,.7); font-family: var(--sans); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; padding: 8px 0; }
.mobile-menu a { font-family: var(--display); font-size: 30px; color: #fff; text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--hair-inv); }

/* ---------- Hero (Startseite, Video) ---------- */
.hero-media {
  position: relative; min-height: 80svh;
  display: flex; align-items: flex-end;
  color: var(--paper); overflow: hidden;
  background: url('../assets/hero-bahnhof-poster.jpg') center 40% / cover no-repeat var(--green);
}
/* Zwei Videoelemente liegen uebereinander und tauschen die Deckkraft,
   damit der Wechsel zwischen den Motiven nicht schwarz aufblitzt.
   Nur Opazitaet, keine Bewegung — wie im Design-System vorgegeben. */
.hero-media video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%; display: block;
  opacity: 0; transition: opacity 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-media video:first-of-type { opacity: 1; }
.flat .hero-media video { transition: none; }
@media (prefers-reduced-motion: reduce) { .hero-media video { transition: none; } }
@media (prefers-reduced-motion: reduce) { .hero-media video { display: none; } }
.hero-grade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(53,10,15,.30) 0%, rgba(53,10,15,.10) 42%, rgba(45,8,13,.52) 78%, rgba(35,6,10,.80) 100%);
}
.hero-grade::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(69,13,19,.14); mix-blend-mode: multiply;
}
.hero-media .container { position: relative; z-index: 2; width: 100%; padding-bottom: 62px; }
.hero-media h1 { color: #fff; max-width: 15ch; }
.hero-media .lede { margin-top: 24px; color: rgba(244,240,233,.84); }
.hero-meta {
  margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--hair-inv);
  display: flex; gap: 14px 30px; flex-wrap: wrap;
  font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: rgba(244,240,233,.6);
}

/* ---------- Seitenkopf: typografisch (Work, People, Careers) ----------
   Ersetzt die generischen Panorama-Header. Die Bildwelt lebt jetzt dort,
   wo sie etwas erklärt, nicht als Dekoration über jeder Seite. */
.head-type {
  padding: clamp(140px, 17vh, 200px) 0 clamp(30px, 4vw, 52px);
  background: var(--paper);
}
.head-type .kicker { display: block; margin-bottom: 20px; }
.head-type h1 { color: var(--green); max-width: 17ch; }
.head-type .lede { margin-top: 22px; }
.head-type .rule {
  margin-top: clamp(30px, 4vw, 48px);
  border-top: 1px solid var(--hair-strong);
  padding-top: 16px;
  display: flex; gap: 14px 30px; flex-wrap: wrap;
  font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: var(--stone-d);
}

/* Doppelter Abstand vermeiden, wenn direkt eine Sektion folgt */
.head-type + .section { padding-top: clamp(34px, 4vw, 56px); }

/* ---------- Seitenkopf: Bild (Who we are, Contact) ---------- */
.page-head-media {
  position: relative; min-height: 62svh;
  display: flex; align-items: flex-end;
  color: var(--paper); overflow: hidden;
  background-size: cover; background-position: center 45%;
  background-color: var(--green);
}
.page-head-media::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(53,10,15,.26) 0%, rgba(53,10,15,.08) 45%, rgba(35,6,10,.80) 100%);
}
.page-head-media::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(69,13,19,.13); mix-blend-mode: multiply;
}
.page-head-media .container { position: relative; z-index: 2; width: 100%; padding-top: 150px; padding-bottom: 56px; }
.page-head-media h1 { color: #fff; max-width: 17ch; }
.page-head-media .lede { margin-top: 20px; color: rgba(244,240,233,.84); }
.page-head-media .head-meta {
  margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--hair-inv);
  display: flex; gap: 12px 28px; flex-wrap: wrap; max-width: 700px;
  font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: rgba(244,240,233,.62);
}
.page-head-media .head-meta a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(244,240,233,.3); }

/* ---------- Sektions-Rhythmus ---------- */
.section { padding-block: clamp(56px, 6.4vw, 96px); }
.section.tight { padding-block: clamp(44px, 5vw, 68px); }
.bg-white { background: var(--white); }
.bg-paper { background: var(--paper); }
.bg-deep { background: var(--green); color: var(--paper); }

.section-head { margin-bottom: clamp(26px, 3vw, 42px); }
.section-head .kicker { display: block; margin-bottom: 16px; }
.section-head h2 { color: var(--green); max-width: 22ch; }
.on-dark .section-head h2 { color: #fff; }
.section-head .lede { margin-top: 18px; }

/* Zweispalter für Fließtext */
.prose-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 72px); }
.prose-cols p { color: var(--slate); max-width: 56ch; }
.on-dark .prose-cols p { color: rgba(244,240,233,.78); }

/* Verankerte Kernaussage */
.pull {
  font-family: var(--display);
  font-size: clamp(24px, 2.7vw, 36px); line-height: 1.3;
  color: var(--green);
}
.on-dark .pull { color: var(--stone); }
.pull-band {
  margin-top: clamp(34px, 4.5vw, 56px); padding-top: clamp(22px, 3vw, 32px);
  border-top: 1px solid var(--hair-strong);
}

/* Zweispaltige Komposition: Aussage links, Erläuterung rechts */
.qa { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 3.6vw, 64px); align-items: start; }
.qa .q { font-family: var(--display); font-size: clamp(26px, 2.8vw, 38px); line-height: 1.16; color: var(--green); }
.on-dark .qa .q { color: #fff; }
.qa .a p { color: var(--slate); max-width: 58ch; }
.on-dark .qa .a p { color: rgba(244,240,233,.78); }

/* ---------- Aktenreiter ----------
   Sitzt auf der Oberkante einer Fläche. z-index ist zwingend: ohne ihn
   überdeckt ein nachfolgendes Bild den Reiter (Fehler in v8). */
.tabbed { position: relative; }
.tab {
  position: absolute; top: 0; left: clamp(18px, 2.4vw, 34px);
  transform: translateY(-50%);
  z-index: 4;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 2px; padding: 5px 13px;
  font-size: 11px; font-weight: 500; letter-spacing: .17em; text-transform: uppercase;
  color: var(--green); max-width: calc(100% - 44px);
}
.bg-white .tab { background: var(--white); }
.on-dark .tab, .bg-deep .tab { background: var(--green); border-color: rgba(244,240,233,.28); color: var(--paper); }

/* ---------- Leistungs-Panels ----------
   Flach, mit Haarlinie statt Schatten: weniger Karten-Look. */
.panel {
  background: var(--white);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: clamp(30px, 3.4vw, 48px) clamp(24px, 3.4vw, 52px);
}
.panel + .panel { margin-top: clamp(16px, 1.8vw, 24px); }
.bg-white .panel { background: var(--paper); }
.on-dark .panel, .bg-deep .panel { background: var(--deep); border-color: rgba(244,240,233,.12); }

/* ---------- Index-Liste (Sektoren, Fähigkeiten) ----------
   Editoriale Zeilen statt Kachelraster. */
.index-list { border-top: 1px solid var(--hair-strong); margin-inline: calc(-1 * var(--row-bleed)); padding-inline: var(--row-bleed); }
.index-row {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(12px, 3vw, 56px); align-items: baseline;
  padding-block: clamp(26px, 3vw, 38px);
  margin-inline: calc(-1 * var(--row-bleed)); padding-inline: var(--row-bleed);
  border-bottom: 1px solid var(--hair);
}
.index-row .i-name { font-family: var(--display); font-size: clamp(21px, 2vw, 27px); color: var(--green); }
.index-row .i-what { font-size: 15.5px; line-height: 1.55; color: var(--slate); }
.on-dark .index-row { border-color: var(--hair-inv); }
.on-dark .index-list { border-color: rgba(244,240,233,.4); }
.on-dark .index-row .i-name { color: #fff; }
.on-dark .index-row .i-what { color: rgba(244,240,233,.72); }

/* ---------- Dossier (Mandate) ---------- */
.dossier {
  background: var(--white);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
}
.dossier + .dossier { margin-top: clamp(22px, 2.6vw, 36px); }
.dossier .d-img { position: relative; min-height: 240px; overflow: hidden; border-radius: 3px 0 0 3px; }
.dossier .d-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); }
.dossier .d-img::after { content: ""; position: absolute; inset: 0; background: rgba(69,13,19,.14); mix-blend-mode: multiply; }
.dossier .d-body { padding: clamp(30px, 3.4vw, 50px) clamp(26px, 3.6vw, 56px); align-self: center; }
.dossier .d-body .v-lead { font-family: var(--display); font-size: clamp(23px, 2.1vw, 29px); line-height: 1.24; color: var(--green); margin-bottom: 12px; }
.dossier .d-body p:not(.v-lead) { color: var(--slate); max-width: 58ch; }
.dossier.flip { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.dossier.flip .d-img { order: 2; border-radius: 0 3px 3px 0; }
/* Ohne Bild: reine Textfläche */
.dossier.no-img { grid-template-columns: 1fr; }

.d-tags { margin-top: 20px; display: flex; gap: 8px; flex-wrap: wrap; }
.d-tags .tag {
  font-size: 11px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase;
  color: var(--slate); border: 1px solid var(--hair);
  padding: 5px 11px; border-radius: 2px;
}

/* ---------- Profile (People) ----------
   Editoriale Zeilen, kein Kachelraster, keine Senioritätsstufen. */
.profile-list { border-top: 1px solid var(--hair-strong); }
.profile-row {
  display: grid; grid-template-columns: 132px minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(20px, 3vw, 46px);
  padding: clamp(28px, 3.4vw, 46px) 0;
  border-bottom: 1px solid var(--hair);
  align-items: start;
}
.profile-row .p-img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; }
.profile-row .p-img.placeholder {
  background: var(--stone); opacity: .45;
  display: block; aspect-ratio: 1; border-radius: 2px;
}
.profile-row h3 { font-family: var(--display); font-weight: 500; font-size: clamp(22px, 2vw, 28px); line-height: 1.2; color: var(--green); }
.profile-row .role { margin-top: 6px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--stone-d); }
.profile-row .p-links { margin-top: 14px; display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; }
.profile-row .p-field { margin-bottom: 14px; }
.profile-row .p-field:last-child { margin-bottom: 0; }
.profile-row .p-label {
  display: block; font-size: 11px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--stone-d); margin-bottom: 5px;
}
.profile-row .p-field p { font-size: 15.5px; line-height: 1.55; color: var(--slate); }

/* ---------- Prinzipien / Dreierreihe ---------- */
/* Haarlinie ueber jeder Spalte: die drei Selbstverpflichtungen standen als
   blosse Textbloecke im Raum und wirkten neben den Bildsektionen unfertig.
   Die Linie gibt ihnen eine Kante, ohne eine Kachel daraus zu machen. */
.principles-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(30px, 4vw, 64px); }
.principles-row > * { border-top: 1px solid var(--hair-strong); padding-top: clamp(18px, 1.8vw, 26px); }
.principles-row h3 { font-family: var(--display); font-weight: 500; font-size: clamp(22px, 2vw, 28px); margin-bottom: 10px; color: var(--green); }
.on-dark .principles-row h3 { color: #fff; }
.principles-row p { font-size: 15.5px; color: var(--slate); }
.on-dark .principles-row p { color: rgba(244,240,233,.76); }

/* ---------- Engagement-Modelle ---------- */
.modes-list { border-top: 1px solid var(--hair-strong); }
.mode-row {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(12px, 3vw, 56px);
  padding: clamp(20px, 2.4vw, 30px) 0;
  border-bottom: 1px solid var(--hair);
}
.mode-row h3 { font-family: var(--display); font-weight: 500; font-size: clamp(20px, 1.9vw, 25px); color: var(--green); }
.mode-row p { font-size: 15.5px; color: var(--slate); max-width: 58ch; }

/* ---------- Bild mit Bildunterschrift (Plattenlogik) ---------- */
.plate { position: relative; }
.plate img { width: 100%; display: block; border-radius: 2px; }
.plate figcaption { margin-top: 12px; font-size: 13.5px; color: var(--slate); }

/* Bild läuft vertikal durch die Section (Büro) */
.split-tall { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.split-tall .st-copy { padding: clamp(64px, 8vw, 116px) clamp(28px, 5vw, 76px) clamp(64px, 8vw, 116px) var(--pad); max-width: 740px; justify-self: end; width: 100%; }
.split-tall .st-img img { width: 100%; height: auto; max-height: 86vh; object-fit: cover; object-position: center bottom; }

/* ---------- Leistungszeilen (Startseite) ----------
   Editoriale, klickbare Zeilen statt Box-Panels (v10, Inspo: Service-Listen
   der grossen Advisory-Haeuser). Ganze Zeile ist Link. */
.svc-list { border-top: 1px solid var(--hair-strong); }
.svc-row {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto;
  gap: clamp(14px, 3vw, 56px); align-items: center;
  padding: clamp(24px, 3vw, 40px) clamp(8px, 1vw, 16px);
  border-bottom: 1px solid var(--hair);
  text-decoration: none;
  transition: background .25s ease-out;
}
.svc-row:hover { background: var(--white); }
.svc-row .s-title { font-family: var(--display); font-weight: 500; font-size: clamp(24px, 2.4vw, 33px); line-height: 1.18; color: var(--green); }
.svc-row .s-desc { font-size: 15.5px; line-height: 1.55; color: var(--slate); max-width: 54ch; }
.svc-row .s-arrow { font-family: var(--display); font-size: 24px; color: var(--stone-d); transition: transform .25s ease-out, color .25s ease-out; }
.svc-row:hover .s-arrow { transform: translateX(6px); color: var(--green); }

/* ---------- Team-Karten (v10) ----------
   Fotos im Raster, Details aufklappbar. */
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px); }
.team-card { background: var(--white); border: 1px solid var(--hair); border-radius: var(--radius); overflow: hidden; }
.team-card .tc-img { position: relative; }
.team-card .tc-img img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.team-card .tc-body { padding: clamp(16px, 1.8vw, 24px) clamp(18px, 2vw, 26px) clamp(14px, 1.6vw, 20px); }
.team-card h3 { font-family: var(--display); font-weight: 500; font-size: clamp(20px, 1.8vw, 25px); line-height: 1.2; color: var(--green); }
.team-card .role { margin-top: 4px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--stone-d); }
.team-card .tc-links { margin-top: 10px; display: flex; gap: 14px; font-size: 13.5px; }
.team-card details { border-top: 1px solid var(--hair); margin-top: 12px; }
.team-card details summary {
  list-style: none; cursor: pointer; padding: 10px 0;
  font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--green);
  display: flex; align-items: center; justify-content: space-between;
}
.team-card details summary::-webkit-details-marker { display: none; }
.team-card details summary::after { content: "+"; font-family: var(--display); font-size: 19px; transition: transform .25s ease-out; }
.team-card details[open] summary::after { transform: rotate(45deg); }
.team-card .tc-detail { padding: 2px 0 12px; }
.team-card .tc-detail .p-label { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--stone-d); margin: 8px 0 3px; }
.team-card .tc-detail p { font-size: 14px; line-height: 1.55; color: var(--slate); }

/* ---------- Nächster Schritt (Conversion) ----------
   Jede Unterseite endet mit einem definierten Weiterweg. */
.next-step {
  border-top: 1px solid var(--hair-strong);
  padding-top: clamp(22px, 3vw, 34px);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px 40px; flex-wrap: wrap;
}
.next-step .ns-text { font-family: var(--display); font-size: clamp(20px, 2.1vw, 27px); color: var(--green); max-width: 34ch; }
.btn {
  display: inline-block; text-decoration: none;
  background: var(--green); color: var(--paper);
  font-size: 14.5px; font-weight: 500; letter-spacing: .04em;
  padding: 13px 26px; border-radius: 2px;
  transition: background .25s ease-out;
}
.btn:hover { background: var(--moss); }
.btn.ghost { background: none; color: var(--green); border: 1px solid var(--hair-strong); }
.btn.ghost:hover { background: var(--green); color: var(--paper); border-color: var(--green); }

/* ---------- Kontakt-Band ---------- */
.cta-min { background: var(--green); color: var(--paper); }
/* Zusaetzliche Haarlinie, wenn das Kontaktband direkt auf die Klienten-
   Sektion folgt (Expertise) — der Papier-Streifen allein war der Bitte nach
   einer klareren Kante noch zu leise. */
#clients + .cta-min { border-top: 1px solid var(--hair-inv); }
.cta-min .inner {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px 36px; flex-wrap: wrap; padding-block: clamp(30px, 3.6vw, 44px);
}
.cta-min .kicker { color: var(--sand); }
.cta-min a.mail { font-family: var(--display); font-size: clamp(20px, 2.2vw, 28px); color: #fff; text-decoration: none; border-bottom: 1px solid var(--hair-inv); padding-bottom: 4px; }
.cta-min a.mail:hover { border-color: var(--sand); }
.cta-min .aside { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(244,240,233,.58); }

/* Terrazzo-Signatur: schmales Band vor dem Footer */
.terrazzo-band { position: relative; height: clamp(64px, 7vw, 104px); background: url('../assets/terrazzo-bordeaux.jpg') center / cover; }
.terrazzo-band::after { content: ""; position: absolute; inset: 0; background: rgba(69,13,19,.08); mix-blend-mode: multiply; }

/* ---------- Footer ---------- */
.footer { background: var(--deep); color: rgba(244,240,233,.62); font-size: 14.5px; }
.footer .top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; padding-block: 68px 52px; }
/* Logo groesser, Tagline daneben entfallen (Martin im V4-Doc: "Claim
   streichen, Logo groesser"). */
.footer img { width: 132px; margin-bottom: 0; opacity: .92; }
.footer .col-title { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(244,240,233,.42); margin-bottom: 16px; }
.footer nav a, .footer .contact a { display: block; color: rgba(244,240,233,.72); text-decoration: none; padding: 5px 0; }
.footer nav a:hover, .footer .contact a:hover { color: #fff; }
.footer .bottom { border-top: 1px solid var(--hair-inv); padding-block: 22px; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: rgba(244,240,233,.45); }
.footer .bottom a { color: inherit; }

/* ---------- Rechtsseite ---------- */
.page-head { padding: clamp(140px, 17vh, 200px) 0 clamp(40px, 5vw, 70px); }
.page-head .kicker { display: block; margin-bottom: 18px; }
.page-head h1 { color: var(--green); max-width: 16ch; }

/* ---------- Reveal (ohne JS immer sichtbar) ---------- */
.reveal { opacity: 1; }
.js-ready .reveal { opacity: 0; transition: opacity .32s cubic-bezier(0.4, 0, 0.2, 1); }
.js-ready .reveal.in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js-ready .reveal { opacity: 1; transition: none; } }
.flat { scroll-behavior: auto; }
.flat .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.flat .hero-media { min-height: 620px; }
.flat .page-head-media { min-height: 560px; }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .nav-links { display: none; }
  .menu-btn { display: block; }
  /* Mindesthoehe der horizontalen Kleinfassung ist 32.6 px — 34 px bleibt darueber. */
  .nav .brand img { height: 34px; }
  .qa { grid-template-columns: 1fr; gap: 16px; }
  .prose-cols { grid-template-columns: 1fr; gap: 16px; }
  .principles-row { grid-template-columns: 1fr; gap: 30px; }
  .index-row { grid-template-columns: 1fr; gap: 6px; }
  .svc-row { grid-template-columns: 1fr auto; }
  .svc-row .s-desc { grid-column: 1 / -1; }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mode-row { grid-template-columns: 1fr; gap: 6px; }
  .profile-row { grid-template-columns: 108px 1fr; gap: 20px 24px; }
  .profile-row .p-fields { grid-column: 1 / -1; }
  .split-tall { grid-template-columns: 1fr; }
  .split-tall .st-img { order: -1; }
  .split-tall .st-img img { max-height: none; height: auto; }
  .split-tall .st-copy { padding-inline: var(--pad); }
  .dossier, .dossier.flip { grid-template-columns: 1fr; }
  .dossier .d-img, .dossier.flip .d-img {
    order: -1; position: relative; min-height: 0;
    border-radius: 3px 3px 0 0;
  }
  .dossier .d-img img { position: static; height: auto; aspect-ratio: 3 / 2; }
  .page-head-media { min-height: 54svh; }
  .footer .top { grid-template-columns: 1fr; gap: 34px; }
  .next-step { gap: 18px; }
}
@media (max-width: 640px) {
  .profile-row { grid-template-columns: 1fr; }
  .profile-row .p-img, .profile-row .p-img.placeholder { max-width: 132px; }
  .hero-media { min-height: 76svh; }
  .team-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   v14 — Kachelraster fuer Sektoren, Leistungen, Klienten, Cases
   ========================================================================== */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.tiles.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile {
  background: var(--white); border: 1px solid var(--hair); border-radius: var(--radius);
  padding: clamp(22px, 2.4vw, 32px);
  display: flex; flex-direction: column; gap: 10px;
}
.bg-white .tile { background: var(--papier); }
.tile h3 { font-family: var(--display); font-weight: 500; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.22; color: var(--anker); }
.tile p { font-size: 15px; line-height: 1.55; color: var(--asche); }
.tile .t-kicker { font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--stein-dunkel); }

/* Zentrierter Abschluss-Button einer Sektion */
.section-cta { margin-top: clamp(28px, 3.4vw, 44px); display: flex; justify-content: flex-start; }

/* Teaser-Kacheln der Startseite: fuehren auf je eine Unterseite */
.teasers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
.teaser {
  display: block; text-decoration: none;
  background: var(--white); border: 1px solid var(--hair); border-radius: var(--radius);
  overflow: hidden; transition: border-color .25s ease-out;
}
.teaser:hover { border-color: var(--anker-hell); }
.teaser .tz-img { position: relative; overflow: hidden; }
.teaser .tz-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.teaser .tz-img::after { content: ""; position: absolute; inset: 0; background: rgba(69,13,19,.12); mix-blend-mode: multiply; }
.teaser .tz-body { padding: clamp(20px, 2.2vw, 28px); }
.teaser h3 { font-family: var(--display); font-weight: 500; font-size: clamp(21px, 1.9vw, 26px); color: var(--anker); }
.teaser p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--asche); }
.teaser .tz-more { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--anker-hell); }
.teaser .tz-more span { transition: transform .25s ease-out; }
.teaser:hover .tz-more span { transform: translateX(5px); }

@media (max-width: 1020px) {
  .tiles, .tiles.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .tiles, .tiles.two { grid-template-columns: 1fr; }
  /* Erst hier eine Spalte. Vorher sprangen die Teaser schon bei 1020px um und
     wurden auf mittleren Breiten unverhaeltnismaessig gross. */
  .teasers { grid-template-columns: 1fr; }
  .teaser .tz-img img { aspect-ratio: 2 / 1; }
}

/* ==========================================================================
   v15 — reichere Sektionsformate
   Drei Bausteine gegen den zu gleichfoermigen Kachel-Rhythmus:
   .statement  = Text laeuft ueber einen Farbverlauf ins Bild (Aufmacher-Band)
   .accordion  = zweispaltige Ausklappliste fuer Leistungen
   .tiles.visual = Kacheln mit Bild
   ========================================================================== */

/* --- Aufmacher-Band: Bordeaux-Feld links, Bild blendet rechts auf --------- */
.statement { position: relative; overflow: hidden; background: var(--anker); color: var(--papier); }
.statement .sm-media {
  position: absolute; inset: 0 0 0 38%;
  background-size: cover; background-position: center;
}
/* Der Verlauf traegt den Effekt: links deckend, nach rechts gibt er das Bild
   frei. Die Stufen sind flacher als vorher gesetzt, weil das Bild selbst
   schon Bordeaux traegt (Wandobjekt, Sessel) — der Verlauf muss in dieses
   Rot hineinlaufen, nicht nur davor liegen, sonst stehen zwei Rottoene
   unverbunden nebeneinander. */
.statement .sm-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    var(--anker) 0%,
    rgba(69,13,19,.90) 22%,
    rgba(69,13,19,.58) 48%,
    rgba(69,13,19,.22) 75%,
    rgba(69,13,19,.12) 100%);
}
.statement > .container { position: relative; z-index: 1; padding-block: clamp(60px, 7vw, 104px); }
.statement .sm-inner { max-width: 45ch; }
.statement .kicker { color: var(--stein); }
.statement h2 { color: var(--papier); margin-top: 18px; }
.statement p { margin-top: 20px; font-size: clamp(15.5px, 1.25vw, 17.5px); line-height: 1.62; color: rgba(244,240,233,.82); }

/* CTA als anklickbare Kachel, gleiche Sprache wie die Teaser-Pfeile */
.sm-cta {
  margin-top: clamp(26px, 3vw, 38px);
  display: inline-flex; align-items: center; gap: 14px;
  padding: 15px 24px; border-radius: var(--radius);
  border: 1px solid rgba(244,240,233,.34); background: rgba(244,240,233,.05);
  color: var(--papier); text-decoration: none;
  font-size: 14.5px; font-weight: 500; letter-spacing: .03em;
  transition: background .25s ease-out, border-color .25s ease-out;
}
.sm-cta:hover { background: rgba(244,240,233,.12); border-color: rgba(244,240,233,.58); }
.sm-cta span { transition: transform .25s ease-out; }
.sm-cta:hover span { transform: translateX(5px); }

/* --- Ausklappliste, zwei Spalten ----------------------------------------- */
.accordion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(34px, 4.5vw, 76px); align-items: start; }
.ac-col > .ac-item:first-child { border-top: 1px solid var(--hair); }
.ac-item { border-bottom: 1px solid var(--hair); }
.ac-item > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: clamp(17px, 1.9vw, 23px) 0;
  font-weight: 500; font-size: clamp(15.5px, 1.3vw, 17.5px); line-height: 1.35;
  color: var(--anker); transition: color .2s ease-out;
}
.ac-item > summary::-webkit-details-marker { display: none; }
.ac-item > summary:hover { color: var(--anker-hell); }
/* Feste Breite, damit der Wechsel + / – die Zeile nicht verschiebt */
.ac-item > summary::after {
  content: "+"; flex: none; width: 18px; text-align: center;
  font-size: 21px; font-weight: 400; line-height: 1; color: var(--stein-dunkel);
  transition: color .2s ease-out;
}
.ac-item[open] > summary::after { content: "\2013"; color: var(--anker-hell); }
.ac-item .ac-body { padding-bottom: clamp(19px, 2.1vw, 26px); max-width: 54ch; }
.ac-item .ac-body p { font-size: 15.5px; line-height: 1.62; color: var(--asche); }

/* --- Kacheln mit Bild ----------------------------------------------------- */
/* Sechserraster: obere Reihe drei Kacheln, untere zwei breitere. Bricht das
   gleichfoermige Raster auf, ohne unregelmaessige Luecken zu lassen. */
/* Sechserraster, jede Kachel zwei Spalten breit: obere Reihe drei, untere zwei.
   Alle Kacheln gleich gross; die zweite Reihe rueckt eine Spalte ein und steht
   damit mittig unter der ersten. */
.tiles.visual { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tiles.visual > .tile { padding: 0; overflow: hidden; gap: 0; grid-column: span 2; }
/* Die zweite Reihe (Kachel 4 und 5) spannt je die halbe Breite. Vorher rueckte
   sie eine Spalte ein und stand zentriert-schmal zwischen zwei leeren
   Sechsteln — das las sich wie ein Rest, nicht wie Gestaltung. */
.tiles.visual > .tile:nth-child(4),
.tiles.visual > .tile:nth-child(5) { grid-column: span 3; }
.tile .t-img { position: relative; }
.tile .t-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
/* Bordeaux-Schleier vereinheitlicht Bilder unterschiedlicher Herkunft */
.tile .t-img::after { content: ""; position: absolute; inset: 0; background: rgba(69,13,19,.24); mix-blend-mode: multiply; }
.tile .t-body { padding: clamp(18px, 2vw, 26px); display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 1020px) {
  .tiles.visual { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles.visual > .tile,
  .tiles.visual > .tile:nth-child(4),
  .tiles.visual > .tile:nth-child(5) { grid-column: span 1; }
  .accordion { grid-template-columns: 1fr; gap: 0; }
  .ac-col:not(:first-child) > .ac-item:first-child { border-top: 0; }
  .statement .sm-media { inset: 0; }
  .statement .sm-media::after { background: linear-gradient(180deg, rgba(69,13,19,.74) 0%, rgba(69,13,19,.92) 100%); }
  .statement .sm-inner { max-width: none; }
}
@media (max-width: 640px) {
  .tiles.visual { grid-template-columns: 1fr; }
}

/* --- Sektoren: sechs gleich grosse Zellen ----------------------------------
   Die versetzte Anordnung wirkte "off" (Juni, 10.9.). Jetzt ein ruhiges
   3x2-Raster: Zelle 1 traegt Ueberschrift und Einleitung auf einer Bordeaux-
   Flaeche, die nach links aus dem Satzspiegel laeuft; die fuenf Sektoren
   fuellen den Rest. Sechs Zellen fuer sechs Inhalte — keine Luecke, kein
   Versatz, keine Rangfolge. Die Bauweise (Flaeche verlaesst den Rahmen)
   ist dieselbe wie bei den Kompositionen weiter unten und auf den anderen
   Seiten. */
#sectors { overflow: hidden; }
.sector-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(18px, 2.2vw, 34px); row-gap: clamp(34px, 4vw, 60px);
}
.sg-intro {
  position: relative; z-index: 0;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 14px;
  padding: clamp(28px, 3vw, 48px) clamp(24px, 2.6vw, 40px) clamp(28px, 3vw, 44px) 0;
}
.sg-intro::before {
  content: ""; position: absolute; z-index: -1;
  top: 0; bottom: 0; right: 0; left: -100vw;   /* #sectors kappt den Ueberstand */
  background: var(--anker);
}
.sg-intro .kicker { color: var(--sand); }
.sg-intro h2 { color: var(--papier); }
.sg-intro .lede { color: rgba(244,240,233,.78); font-size: clamp(16px, 1.25vw, 19px); }
.sg-item { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 96px; }
.sg-img { position: relative; overflow: hidden; background: var(--anker); }
.sg-img img {
  width: 100%; aspect-ratio: 5 / 4; object-fit: cover; display: block;
  transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sg-img::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(69,13,19,.2); mix-blend-mode: multiply;
  transition: background-color 260ms cubic-bezier(0.4,0,0.2,1);
}
.sg-item:hover .sg-img img { transform: scale(1.035); }
.sg-item:hover .sg-img::after { background: rgba(69,13,19,.06); }
.sg-item h3 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(19px, 1.65vw, 24px); line-height: 1.2; color: var(--anker);
  transition: color 260ms cubic-bezier(0.4,0,0.2,1);
}
.sg-item:hover h3 { color: var(--anker-hell); }
.sg-item p { font-size: 15px; line-height: 1.58; color: var(--asche); max-width: 38ch; }
@media (prefers-reduced-motion: reduce) {
  .sg-img img, .sg-img::after, .sg-item h3 { transition: none; }
  .sg-item:hover .sg-img img { transform: none; }
}
@media (max-width: 900px) {
  /* Zwei Spalten: sechs Zellen ergeben weiterhin ein volles Raster (3x2). */
  .sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .sector-grid { grid-template-columns: 1fr; }
  .sg-intro { padding-right: 0; }
}

/* --- Klienten: randlose Reihe hoher Bildlamellen --------------------------
   Zurueck zur Form, die getragen hat, nur groesser: fuenf hohe Lamellen ueber
   die volle Fensterbreite, alle gleich hoch.
   Kein Rahmen, keine Rundung, kein eigener Grund — was vorher wie ein
   Kachelraster las, ist jetzt ein durchgehender Fries.
   Der verknuepfte Fall steht wieder IM Bild: die Lamelle ist hoch genug, dass
   der ganze Text hineinpasst. Vorne Bild und Name, hinten der Fall; beide
   liegen deckungsgleich und blenden per Opazitaet gegeneinander um. */
.section-clients { padding-block: clamp(56px, 6.4vw, 96px) clamp(64px, 7vw, 104px); }
.client-fan {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(6px, .7vw, 12px);
  padding-inline: clamp(10px, 1.2vw, 20px);
  align-items: start;
}
.cf-slat {
  position: relative; overflow: hidden;
  height: clamp(420px, 46vw, 700px);
  background: var(--anker);
}
/* Kein Faecherversatz mehr (Juni, 10.9.): der Hoehenunterschied las sich
   wie eine Rangfolge. Alle fuenf Lamellen stehen gleich hoch nebeneinander. */
.cf-slat > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cf-slat::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(69,13,19,.08) 0%,
    rgba(69,13,19,.20) 42%,
    rgba(69,13,19,.66) 78%,
    rgba(69,13,19,.94) 100%);
  transition: opacity 260ms cubic-bezier(0.4,0,0.2,1);
}
.cf-slat:hover > img { transform: scale(1.04); }
.cf-slat:hover::after { opacity: .84; }

/* Vorderseite: Name und Hinweis, unten im Bild */
.cf-face {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 12px;
  padding: clamp(18px, 1.7vw, 28px);
  background: none; border: 0; font: inherit; color: inherit;
  text-align: left; cursor: pointer;
  transition: opacity 260ms cubic-bezier(0.4,0,0.2,1);
}
/* margin-top:auto statt justify-content:flex-end — sonst laeuft zu hoher
   Inhalt oben aus dem Kasten und ist nicht mehr erreichbar. So wird der
   Freiraum nach oben verteilt, solange welcher da ist, und der Ueberhang
   faellt nach unten in den scrollbaren Bereich. */
.cf-face > :first-child { margin-top: auto; }
.cf-slat.is-open .cf-face { opacity: 0; pointer-events: none; }
.cf-name {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(17px, 1.5vw, 23px); line-height: 1.18;
  color: var(--papier); text-wrap: balance;
}
/* Der Hinweis steht dauerhaft da, nicht erst bei Hover. */
.cf-hint {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 500; letter-spacing: .04em;
  color: rgba(214,183,157,.88);
  transition: color 220ms cubic-bezier(0.4,0,0.2,1);
}
.cf-slat:hover .cf-hint, .cf-face:focus-visible .cf-hint { color: var(--sand); }
.cf-plus {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border: 1px solid currentColor; border-radius: 50%;
  font-size: 11px; line-height: 1; flex: none;
}

/* Rueckseite: der verknuepfte Fall, deckungsgleich ueber dem Bild */
.cf-case {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(18px, 1.7vw, 28px);
  background: rgba(69,13,19,.95);
  opacity: 0; pointer-events: none; overflow-y: auto;
  transition: opacity 280ms cubic-bezier(0.4,0,0.2,1);
}
.cf-case > :first-child { margin-top: auto; }
.cf-slat.is-open .cf-case { opacity: 1; pointer-events: auto; }
.cf-case-kicker {
  font-family: var(--display); font-size: 10.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sand);
}
.cf-case h3 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(15px, 1.2vw, 18px); line-height: 1.24; color: var(--papier);
}
.cf-case p { font-size: 13px; line-height: 1.55; color: rgba(244,240,233,.84); }
.cf-back {
  align-self: flex-start; margin-top: 6px; padding: 0 0 3px;
  background: none; border: 0; border-bottom: 1px solid rgba(244,240,233,.4);
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: .04em; color: var(--papier); cursor: pointer;
  transition: border-color 220ms cubic-bezier(0.4,0,0.2,1);
}
.cf-back:hover { border-color: var(--sand); }

@media (prefers-reduced-motion: reduce) {
  .cf-slat > img, .cf-slat::after, .cf-face, .cf-case, .cf-hint, .cf-back { transition: none; }
  .cf-slat:hover > img { transform: none; }
}
@media (max-width: 980px) {
  /* Drei Lamellen, ohne Faecherversatz — bei fuenf waeren sie hier zu schmal
     fuer Name und Falltext. */
  .client-fan { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .cf-slat { height: clamp(330px, 46vw, 460px); }
}
@media (max-width: 620px) {
  /* Eine Spalte: bei zwei waeren die Lamellen rund 180px breit, der
     Falltext braeuchte dort 13 Zeilen und muesste gescrollt werden. */
  .client-fan { grid-template-columns: 1fr; gap: 10px; }
  .cf-slat { height: clamp(360px, 92vw, 440px); }
}

/* --- Referenzen als Dossier-Zeilen --------------------------------------- */
/* Das Ergebnis steht gross, die Klientenart leise daneben. Frueher war es
   umgekehrt und der Beleg verschwand im Kleingedruckten. */
.case-list { display: flex; flex-direction: column; }
.case-row {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(10px, 2.4vw, 48px); align-items: baseline;
  padding-block: clamp(26px, 3vw, 38px);
  margin-inline: calc(-1 * var(--row-bleed)); padding-inline: var(--row-bleed);
  border-top: 1px solid var(--hair);
}
.case-row:last-child { border-bottom: 1px solid var(--hair); }
.case-row .cs-client {
  font-family: var(--display);
  font-size: 12px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--asche);
  line-height: 1.5;
}
.case-row .cs-what {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(20px, 1.95vw, 27px); line-height: 1.3;
  color: var(--anker); max-width: 46ch;
}

@media (max-width: 860px) {
  .case-row { grid-template-columns: 1fr; gap: 8px; align-items: start; }
}

/* ==========================================================================
   v21 — Zeilen reagieren, Expertise bekommt eine durchgehende Logik
   ========================================================================== */

/* --- Hover auf Listenzeilen -----------------------------------------------
   Bewusst nur Farbe, kein Versatz und kein Schatten (Vorgabe Abschnitt 6:
   Uebergaenge wechseln nur Farbe und Opazitaet). Der Grund liegt exakt auf
   der Breite der Trennlinie, ohne Marke und ohne Kante — sonst entsteht der
   Eindruck eines Kastens, der ueber den Satzspiegel hinausragt.
   Kein Zeigerwechsel, wo nichts klickbar ist: das Feedback soll die Zeile
   greifbar machen, nicht einen Klick versprechen. */
.index-row, .cap-row, .case-row {
  transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.index-row:hover, .cap-row:hover, .case-row:hover {
  background: rgba(198,161,129,.13);   /* Sand, sehr leicht */
}
.index-row .i-name, .cap-row h3, .case-row .cs-what {
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.index-row:hover .i-name, .cap-row:hover h3,
.case-row:hover .cs-what { color: var(--anker-hell); }
@media (prefers-reduced-motion: reduce) {
  .index-row, .cap-row, .case-row { transition: none; }
}
/* Auf Touchgeraeten gibt es keinen Hover — dort bleibt die Zeile ruhig. */
@media (hover: none) {
  .index-row:hover, .cap-row:hover, .case-row:hover { background: none; }
}

/* --- Faehigkeiten: einspaltig, Beschreibung dauerhaft sichtbar ------------
   Vorher eine zweispaltige Ausklappliste, die pro Klick nur einen kurzen
   Absatz freigab. Die Beschreibung steht jetzt offen, der Vergleich zwischen
   den Feldern funktioniert wieder, und die Zeile fuehrt weiter zum Beleg. */
.cap-list { border-top: 1px solid var(--hair-strong); margin-inline: calc(-1 * var(--row-bleed)); padding-inline: var(--row-bleed); }
.cap-row {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(10px, 3vw, 56px); align-items: baseline;
  padding-block: clamp(26px, 3vw, 38px);
  margin-inline: calc(-1 * var(--row-bleed)); padding-inline: var(--row-bleed);
  border-bottom: 1px solid var(--hair);
  scroll-margin-top: 96px;
}
.cap-row h3 { font-family: var(--display); font-weight: 500; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.25; color: var(--anker); }
.cap-row p { font-size: 15.5px; line-height: 1.6; color: var(--asche); max-width: 56ch; }


/* --- Cases: Titel und Beitrag --------------------------------------------- */
.case-row { scroll-margin-top: 96px; }
.case-row .cs-title { font-family: var(--display); font-weight: 500; font-size: clamp(19px, 1.75vw, 24px); line-height: 1.25; color: var(--anker); }

@media (max-width: 860px) {
  .cap-row { grid-template-columns: 1fr; gap: 8px; align-items: start; }
}

/* Sektorkacheln sind jetzt Links auf die passende Stelle der Expertise-Seite.
   Hier ist ein Zeigerwechsel richtig, weil wirklich etwas passiert. */
.tiles.visual > a.tile { text-decoration: none; color: inherit; transition: border-color 200ms cubic-bezier(0.4,0,0.2,1); }
.tiles.visual > a.tile:hover { border-color: var(--anker-hell); }
.tiles.visual > a.tile .t-img::after { transition: background-color 200ms cubic-bezier(0.4,0,0.2,1); }
.tiles.visual > a.tile:hover .t-img::after { background: rgba(69,13,19,.10); }
.tiles.visual > a.tile h3 { transition: color 200ms cubic-bezier(0.4,0,0.2,1); }
.tiles.visual > a.tile:hover h3 { color: var(--anker-hell); }

/* Ein Text pro Profil (Juni, 15.9.): die Werdegang-Kurzzeile ueber dem
   Aufklapper ist entfallen, weil sie den Profiltext groesstenteils
   wiederholte. Es bleibt der aufklappbare Text. */

/* Sektorkacheln auf Expertise sind Sprungziele der Startseite. */
.tiles.visual > .tile[id] { scroll-margin-top: 96px; }

/* --- Kontakt-Band auf schmalen Displays -----------------------------------
   Auf 390px lagen Kicker und Adresse in einer Flex-Zeile; die Mailadresse
   passte nicht und lief rechts aus dem Bild. Untereinander, und die Adresse
   darf mitskalieren. */
@media (max-width: 620px) {
  .cta-min .inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cta-min a.mail { font-size: clamp(16px, 5.2vw, 22px); max-width: 100%; overflow-wrap: anywhere; }
}


/* ==========================================================================
   v32 — Kompositionen nach dem Vorbild von Schillings (Juni, 10.9.)
   Bisher trug nur die Sektorsektion die Bauweise, das wirkte zufaellig.
   Jetzt dieselbe Figur auf allen Seiten, je einmal: Text auf der einen,
   ein Motiv auf der anderen Seite, dahinter eine Farbflaeche, die oben und
   unten uebersteht und seitlich aus dem Satzspiegel laeuft. Die Motive sind
   eigene 3D-Renderings (Bruecke, Hebel, Schlussstein, Stufen).
   ========================================================================== */
.has-compose { overflow: hidden; }
.compose {
  display: grid; grid-template-columns: minmax(0, 7.5fr) minmax(0, 4.5fr);
  column-gap: clamp(36px, 5.5vw, 104px); row-gap: 48px; align-items: center;
}
.compose--img-left { grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr); }
/* Motiv + Farbflaeche ein Stueck kleiner (Juni, 14.9.): schmalere Media-Spalte
   und etwas weniger Ueberstand oben/unten. */
.cp-media { position: relative; margin: 0; padding-block: clamp(28px, 4.4vw, 68px); }
.cp-media img {
  position: relative; z-index: 1;
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;   /* Motive sind quadratisch */
}
.cp-media::before {
  content: ""; position: absolute; z-index: 0;
  top: 0; bottom: 0; left: 34%; right: -100vw;   /* .has-compose kappt */
  background: var(--anker);
}
.compose--img-left .cp-media::before { left: -100vw; right: 34%; }
.cp-media--sand::before { background: var(--sand); }
.cp-media--hell::before { background: var(--anker-hell); }

/* In der schmaleren Textspalte stehen Listen einspaltig — zweispaltig
   brach "Government relations & advocacy" hier in drei Zeilen. */
.compose .index-row { grid-template-columns: 1fr; gap: 4px; }
/* Cap-row ist normal zweispaltig (Titel/Text nebeneinander) — in der
   schmaleren Compose-Textspalte (Expertise "What we do", Juni 14.9.) wird
   das eng. Hier wie bei index-row einspaltig stapeln. */
.compose .cap-row { grid-template-columns: 1fr; gap: 6px; align-items: start; }
.compose .case-row { grid-template-columns: 1fr; gap: 8px; }
.compose .case-row .cs-what { font-size: clamp(17px, 1.45vw, 21px); max-width: none; }
.compose .qa { grid-template-columns: 1fr; gap: 22px; }

@media (max-width: 860px) {
  .compose, .compose--img-left { grid-template-columns: 1fr; }
  .compose--img-left .cp-media { order: 2; }
  .cp-media { padding-block: 28px; max-width: 560px; }
  .cp-media::before { left: 22%; }
  .compose--img-left .cp-media::before { left: 22%; right: -100vw; }
}

/* --- Capabilities (Expertise): grosse Zeilen auf getoentem Band -----------
   Nach Schillings' Expertise-Seite: dieselbe Liste, aber als Folge grosser
   Zeilen auf einem leicht dunkleren Band statt als enge Tabelle. */
.cap-band { background: color-mix(in srgb, var(--stein) 42%, var(--papier)); }
.cap-band .cap-list { border-top-color: rgba(26,16,19,.2); }
.cap-band .cap-row { padding-block: clamp(30px, 3.4vw, 46px); border-bottom-color: rgba(26,16,19,.14); }
.cap-band .cap-row h3 { font-weight: 400; font-size: clamp(24px, 2.5vw, 36px); line-height: 1.14; }
.cap-band .cap-row p { font-size: clamp(15.5px, 1.15vw, 17px); }


/* ==========================================================================
   v33 — Vereinheitlichung (Juni, 10.9.: "teils Schillings-maessig aufge-
   brochen, teils Tabellen, teils Kacheln — sehr durcheinander").
   Die Seite kennt ab jetzt nur noch fuenf Bauformen:
     1  Seitenkopf mit Bild (Startseite: Video)
     2  Komposition: Text + Motiv + auslaufende Farbflaeche — einmal je Seite
     3  Zeilen: typografische Liste, EIN Schriftbild ueberall
     4  Bildraster: Bild ohne Rahmen, Text darunter — Sektoren, Teaser, Team
     5  Band: volle Breite in Farbe — Why Arkona, Klienten-Fries, Kontakt
   Karten mit Rahmen und weissem Grund gibt es nicht mehr; der Grund ist
   ueberall Papier, das getoente Band (Capabilities) ist die einzige Ausnahme.
   ========================================================================== */

/* 3 — Zeilen: gleiche Titel- und Textgroesse in allen Listen */
.index-row .i-name, .cap-row h3, .case-row .cs-title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(21px, 2vw, 28px); line-height: 1.2; color: var(--anker);
}
.index-row .i-what, .cap-row p, .case-row .cs-what, .compose .case-row .cs-what {
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(15px, 1.1vw, 16.5px); line-height: 1.6; color: var(--asche); max-width: 56ch;
}
.cap-band .cap-row h3 { font-size: clamp(21px, 2vw, 28px); }

/* 4 — Bildraster: Teaser und Team ohne Karte, wie die Sektoren */
.teaser { background: none; border: 0; border-radius: 0; overflow: visible; }
.teaser .tz-img { background: var(--anker); }
.teaser .tz-img img { aspect-ratio: 5 / 4; transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1); }
.teaser .tz-img::after { background: rgba(69,13,19,.2); transition: background-color 260ms cubic-bezier(0.4,0,0.2,1); }
.teaser:hover .tz-img img { transform: scale(1.035); }
.teaser:hover .tz-img::after { background: rgba(69,13,19,.06); }
.teaser .tz-body { padding: 14px 0 0; }
.teaser h3 { font-size: clamp(19px, 1.65vw, 24px); line-height: 1.2; transition: color 260ms cubic-bezier(0.4,0,0.2,1); }
.teaser:hover h3 { color: var(--anker-hell); }
.team-card { background: none; border: 0; border-radius: 0; overflow: visible; }
.team-card .tc-body { padding: 14px 0 0; }

.sg-intro--sand::before { background: var(--sand); }
.sg-intro--sand .kicker { color: var(--anker); }
.sg-intro--sand h2 { color: var(--anker); }
.sg-intro--sand .lede { color: var(--tinte); }
@media (prefers-reduced-motion: reduce) {
  .teaser .tz-img img, .teaser .tz-img::after, .teaser h3 { transition: none; }
  .teaser:hover .tz-img img { transform: none; }
}