/* ==========================================================================
   FZ Communication AG — Stylesheet
   Phase 1: statisch, responsiv. Dieses Stylesheet wird in Phase 2
   unverändert ins WordPress-Theme übernommen.

   Aufbau
   01  Schriften (selbst gehostet, Variable Fonts)
   02  Design-Tokens (Farben hell/dunkel, Typo-Skala, Raster)
   03  Reset & Grundlagen
   04  Layout-Bausteine (Container, Section, Kicker)
   05  Navigation + Mobilmenü
   06  Hero
   07  Leistungen (Akkordeon)
   08  Referenzen (Karten + Detail-Overlay)
   09  Über uns + Team
   10  Testimonials
   11  Kontakt (Standorte, Karten, Formular)
   12  Footer
   13  Overlays (Remote-Support, Rechtstexte)
   14  Platzhalter-Markierungen
   15  Utilities, Fokus, Druck, Reduced Motion
   ========================================================================== */

/* ── 01  Schriften ─────────────────────────────────────────────────────────
   Variable Fonts: eine Datei deckt alle Schnitte ab. Kyrillisch, Griechisch
   und Vietnamesisch wurden entfernt (auf einer deutschen Seite nie geladen).
   latin-ext lädt der Browser dank unicode-range nur, wenn ein Zeichen
   daraus wirklich vorkommt.                                                */

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-tight-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-tight-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── 02  Design-Tokens ─────────────────────────────────────────────────── */

:root {
  /* Farben — exakt die Werte aus dem Prototyp (Hell-Variante) */
  --c-bg: #f5f3ee;
  --c-fg: #0c0c0c;
  --c-muted: #696560;
  --c-subtle: #8a8680;
  --c-line: #d8d5ce;
  --c-panel: #eae7df;
  --c-accent: #0766b1;
  --c-accent-fg: #fff;
  --c-scrim: rgba(0, 0, 0, .55);

  /* Schriftfamilien */
  --f-sans: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Fluide Typo-Skala.
     Die Prototyp-Grössen sind die Obergrenze und werden ab ~1370px erreicht.
     Laufweiten in em statt px, damit sie mit der Schriftgrösse skalieren. */
  --t-h1: clamp(2rem, 8.2vw, 6.5rem);          /*  32 → 104 px */
  --t-h2: clamp(1.5rem, 4vw, 3rem);            /*  24 →  48 px */
  --t-h2-lg: clamp(1.625rem, 4.6vw, 3.5rem);   /*  26 →  56 px */
  --t-h3: clamp(1.25rem, 2.4vw, 1.625rem);     /*  20 →  26 px */
  --t-h3-lg: clamp(1.375rem, 2.8vw, 2rem);     /*  22 →  32 px */
  --t-lead: clamp(1rem, 1.3vw, 1.25rem);       /*  16 →  20 px */
  --t-quote: clamp(1.125rem, 1.5vw, 1.375rem); /*  18 →  22 px */
  --t-stat: clamp(2rem, 3.4vw, 2.75rem);       /*  32 →  44 px */
  --t-body: 0.9375rem;                         /*  15 px */
  --t-small: 0.875rem;                         /*  14 px */
  --t-kicker: 0.75rem;                         /*  12 px */
  --t-micro: 0.6875rem;                        /*  11 px */

  /* Raster & Abstände */
  --pad-x: clamp(1.25rem, 5vw, 4.5rem);        /*  20 →  72 px */
  --sp-section: clamp(3.5rem, 7vw, 6.25rem);   /*  56 → 100 px */
  --gap-lg: clamp(2rem, 5vw, 5rem);            /*  32 →  80 px */
  --gap-md: clamp(1.25rem, 2.4vw, 2rem);       /*  20 →  32 px */
  --gap-sm: 1rem;
  --nav-h: 5.5rem;

  color-scheme: light;
}

/* Dunkel-Variante. Wird per data-theme gesetzt; beim ersten Besuch
   entscheidet das JS anhand von prefers-color-scheme. */
:root[data-theme='dark'] {
  --c-bg: #0c0c0c;
  --c-fg: #f2f0eb;
  --c-muted: #8a8680;
  --c-subtle: #6a6660;
  --c-line: #2a2a28;
  --c-panel: #151514;
  --c-accent: #0766b1;
  --c-accent-fg: #fff;
  --c-scrim: rgba(0, 0, 0, .7);
  color-scheme: dark;
}

/* ── 03  Reset & Grundlagen ────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Verhindert, dass Ankersprünge unter der fixierten Navigation landen */
  scroll-padding-top: var(--nav-h);
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-fg);
  font-family: var(--f-sans);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, p, blockquote, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

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

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

input, textarea, select { font: inherit; color: inherit; }

hr { border: 0; height: 1px; background: var(--c-line); margin: 2.5rem 0; }

/* ── 04  Layout-Bausteine ──────────────────────────────────────────────── */

.section {
  padding: var(--sp-section) var(--pad-x);
  border-bottom: 1px solid var(--c-line);
}
.section--flush { padding-left: 0; padding-right: 0; }
.section--flush > .section__head,
.section--flush > .section__note { padding-inline: var(--pad-x); }

/* Kopfzeile: schmale Kicker-Spalte links, Überschrift rechts */
.section__head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--gap-lg);
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3.75rem);
}
.section__head--even { grid-template-columns: 1fr 1fr; }

.kicker {
  font-family: var(--f-mono);
  font-size: var(--t-kicker);
  letter-spacing: .1667em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0;
}
.kicker--accent { color: var(--c-accent); }

.h2 {
  font-size: var(--t-h2);
  font-weight: 500;
  letter-spacing: -.031em;
  line-height: 1.1;
  max-width: 50ch;
}
.h2--lg {
  font-size: var(--t-h2-lg);
  letter-spacing: -.032em;
  line-height: 1.05;
}

.meta {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: .1364em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 1.125rem 1.75rem;
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid transparent;
  transition: background-color .18s, color .18s, border-color .18s;
  /* 48px Mindesthöhe für Touch */
  min-height: 3rem;
}
.btn--accent { background: var(--c-accent); color: var(--c-accent-fg); }
.btn--accent:hover { background: #05548f; }
.btn--outline { border-color: var(--c-fg); color: var(--c-fg); font-weight: 500; }
.btn--outline:hover { background: var(--c-fg); color: var(--c-bg); }
.btn--solid { background: var(--c-fg); color: var(--c-bg); }
.btn--solid:hover { background: var(--c-accent); color: var(--c-accent-fg); }
.btn--quiet { border-color: var(--c-line); color: var(--c-fg); font-weight: 500; }
.btn--quiet:hover { border-color: var(--c-fg); }
.btn--sm { padding: .75rem 1.25rem; font-size: var(--t-small); }

/* ── 04b  Logo (Variante „tagline") ───────────────────────────────────────
   Alle Grössen leiten sich aus --logo-h ab, damit das Logo an jeder
   Einsatzstelle nur über eine Zahl skaliert wird.
   Der Tagline-Text wird per text-align-last:justify auf die Breite der
   Wortmarke darüber gestreckt — so wie im Prototyp.                       */

.logo {
  --logo-h: 3rem;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--logo-h) * .16);
  line-height: 1;
}
.logo__mark {
  height: var(--logo-h);
  width: auto;
  flex-shrink: 0;
  color: var(--c-accent);
}
.logo__text {
  display: inline-flex;
  flex-direction: column;
  gap: calc(var(--logo-h) * .12);
  width: max-content;
}
.logo__name {
  font-size: calc(var(--logo-h) * .42);
  font-weight: 700;
  letter-spacing: -.024em;
  line-height: 1;
  color: var(--c-accent);
}
.logo__tag {
  font-family: var(--f-mono);
  font-size: calc(var(--logo-h) * .2);
  font-weight: 500;
  letter-spacing: .025em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--c-muted);
  width: 100%;
  white-space: nowrap;
  text-align: justify;
  text-align-last: justify;
}
.logo--footer .logo__name { color: var(--c-fg); }

/* ── 05  Navigation ───────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem var(--pad-x);
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}

.nav__logo { display: inline-flex; align-items: center; flex-shrink: 0; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  font-size: var(--t-small);
  color: var(--c-muted);
}
.nav__links a { transition: color .15s; }
.nav__links a:hover { color: var(--c-fg); }

.nav__actions { display: flex; align-items: center; gap: 1rem; }

/* Theme-Umschalter */
.theme-toggle {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  color: var(--c-fg);
  opacity: .75;
  transition: opacity .15s, border-color .15s;
  flex-shrink: 0;
}
.theme-toggle:hover { opacity: 1; border-color: var(--c-fg); }
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme='dark'] .theme-toggle .icon-moon { display: none; }
:root[data-theme='dark'] .theme-toggle .icon-sun { display: block; }

/* Burger */
.nav__burger {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid var(--c-line);
  color: var(--c-fg);
  flex-shrink: 0;
}
.nav__burger span {
  display: block;
  width: 1.125rem;
  height: 1px;
  background: currentColor;
  transition: transform .25s, opacity .2s;
}
.nav__burger span + span { margin-top: 5px; }

/* Mobilmenü: vollflächiges Overlay */
.mobilemenu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  padding: 1.25rem var(--pad-x) 2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-.75rem);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.mobilemenu[data-open='true'] {
  visibility: visible;
  opacity: 1;
  transform: none;
}
.mobilemenu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(1.5rem, 6vh, 3rem);
}
.mobilemenu__close {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border: 1px solid var(--c-line);
  font-size: 1.25rem; line-height: 1;
}
.mobilemenu__links {
  display: flex;
  flex-direction: column;
  gap: clamp(.75rem, 2.5vh, 1.25rem);
}
.mobilemenu__links a {
  font-size: clamp(1.75rem, 9vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.mobilemenu__foot {
  margin-top: auto;
  padding-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: .875rem;
}
.mobilemenu__tel {
  font-family: var(--f-mono);
  font-size: 1.125rem;
  letter-spacing: .02em;
}

/* ── 06  Hero ─────────────────────────────────────────────────────────── */

.hero {
  padding: clamp(3rem, 7vw, 7.5rem) var(--pad-x) clamp(4rem, 10vw, 10rem);
  border-bottom: 1px solid var(--c-line);
}
.hero__kicker { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.hero__title {
  font-size: var(--t-h1);
  font-weight: 500;
  letter-spacing: -.034em;
  line-height: .98;
  max-width: 20ch;
  text-wrap: balance;
}
.hero__title .is-quiet { color: var(--c-subtle); }
.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-lg);
  align-items: end;
  margin-top: clamp(2.5rem, 5vw, 5rem);
}
.hero__lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--c-muted);
  max-width: 34ch;
}
.hero__cta { display: flex; gap: 1.25rem; flex-wrap: wrap; }

/* ── 07  Leistungen ───────────────────────────────────────────────────── */

.svc { border-top: 1px solid var(--c-line); }
.svc:last-child { border-bottom: 1px solid var(--c-line); }

.svc__btn {
  width: 100%;
  display: grid;
  grid-template-columns: 6.25rem 1fr 2fr auto;
  gap: var(--gap-md);
  align-items: center;
  text-align: left;
  padding: clamp(1.5rem, 3vw, 2.25rem) var(--pad-x);
  transition: background-color .18s;
}
.svc__btn:hover { background: var(--c-panel); }
.svc[data-open='true'] .svc__btn { background: var(--c-panel); }

.svc__n {
  font-family: var(--f-mono);
  font-size: var(--t-kicker);
  letter-spacing: .1667em;
  color: var(--c-subtle);
}
.svc__name {
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: -.023em;
  line-height: 1.15;
}
.svc__teaser {
  font-size: var(--t-small);
  color: var(--c-muted);
  line-height: 1.55;
}
.svc__chev {
  font-size: 1.25rem;
  line-height: 1;
  color: var(--c-fg);
  transition: transform .25s, color .25s;
}
.svc[data-open='true'] .svc__chev {
  transform: rotate(90deg);
  color: var(--c-accent);
}

/* Aufklappbereich: Höhe animiert über grid-template-rows */
.svc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
  background: var(--c-panel);
}
.svc[data-open='true'] .svc__panel { grid-template-rows: 1fr; }
.svc__panel > div { overflow: hidden; }
.svc__body {
  padding: 0 var(--pad-x) clamp(1.75rem, 3vw, 2.5rem);
  display: grid;
  gap: var(--gap-md);
}
.svc__detail {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--c-fg);
  max-width: 62ch;
}
.svc__bullets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .625rem 1.5rem;
  max-width: 35rem;
}
.svc__bullets li {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: .0909em;
  text-transform: uppercase;
  color: var(--c-muted);
  padding-left: 1.125rem;
  position: relative;
}
.svc__bullets li::before {
  content: '·';
  position: absolute;
  left: .25rem;
  color: var(--c-accent);
}

/* ── 08  Referenzen ───────────────────────────────────────────────────── */

.section__note { margin-bottom: 1.5rem; }

.cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-sm);
}
.case {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  min-height: 23.75rem;
  padding: 2rem 1.75rem;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  text-align: left;
  transition: border-color .2s, transform .2s;
}
.case:hover { border-color: var(--c-accent); transform: translateY(-2px); }
.case__top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.case__title {
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: -.023em;
  line-height: 1.2;
  margin-bottom: 1rem;
}
.case__desc {
  font-size: var(--t-small);
  color: var(--c-muted);
  line-height: 1.6;
}
.case__foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.125rem;
  border-top: 1px solid var(--c-line);
  font-family: var(--f-mono);
  font-size: var(--t-kicker);
  color: var(--c-muted);
}
.case__foot strong { color: var(--c-fg); font-weight: 400; }

/* Detail-Overlay */
.case-detail__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-md);
  padding: 1.25rem 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  margin: 1.75rem 0;
}
.case-detail__stack { display: flex; flex-wrap: wrap; gap: .375rem; }
.case-detail__stack li {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  padding: .25rem .5rem;
  border: 1px solid var(--c-line);
  color: var(--c-muted);
}
.case-detail__block + .case-detail__block { margin-top: 1.75rem; }
.case-detail__block p {
  font-size: var(--t-small);
  line-height: 1.7;
  color: var(--c-fg);
  max-width: 68ch;
}

/* ── 09  Über uns + Team ──────────────────────────────────────────────── */

.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-lg);
  margin-bottom: var(--gap-lg);
}
.about__text { display: grid; gap: 1rem; }
.about__text p {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--c-muted);
  max-width: 46ch;
}
.about__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-sm);
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid var(--c-line);
}
.about__stat b {
  display: block;
  font-size: var(--t-stat);
  font-weight: 500;
  letter-spacing: -.034em;
  line-height: 1;
}
.about__stat span {
  display: block;
  margin-top: .375rem;
  font-size: var(--t-small);
  color: var(--c-muted);
}

.team {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--gap-sm);
  margin-top: 2.5rem;
}
.team__photo {
  aspect-ratio: 5 / 6;
  margin-bottom: 1rem;
  overflow: hidden;
  background: var(--c-panel);
}
.team__photo img { width: 100%; height: 100%; object-fit: cover; }
.team__name {
  font-size: var(--t-body);
  font-weight: 600;
  letter-spacing: -.013em;
}
.team__role {
  font-size: var(--t-small);
  color: var(--c-muted);
  line-height: 1.4;
  margin-top: .125rem;
}
.team__links {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  margin-top: .5rem;
}
.team__links a {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: .0909em;
  color: var(--c-muted);
  border-bottom: 1px solid var(--c-line);
}
.team__links a:hover { color: var(--c-fg); border-color: var(--c-accent); }

/* ── 10  Testimonials ────────────────────────────────────────────────── */

.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-lg);
}
.quote blockquote {
  font-size: var(--t-quote);
  font-weight: 500;
  letter-spacing: -.018em;
  line-height: 1.35;
  margin-bottom: 1.75rem;
}
.quote figcaption { font-size: var(--t-small); color: var(--c-muted); }
.quote figcaption .meta { display: block; margin-top: .375rem; }

/* ── 11  Kontakt ─────────────────────────────────────────────────────── */

.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-lg);
}
.contact__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-md);
  margin-bottom: 3rem;
}
.contact__fact dt {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: .1364em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: .5rem;
}
.contact__fact dd {
  margin: 0;
  font-size: var(--t-lead);
  font-weight: 500;
  line-height: 1.4;
}
.contact__fact dd small {
  display: block;
  font-size: var(--t-small);
  font-weight: 400;
  color: var(--c-muted);
}

.offices { display: grid; gap: var(--gap-sm); }
.office {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1.25rem;
  padding: 1.5rem;
  border: 1px solid var(--c-line);
}
.office__city {
  font-size: var(--t-quote);
  font-weight: 500;
  letter-spacing: -.023em;
  margin: .625rem 0 .75rem;
}
.office__addr {
  font-size: var(--t-small);
  color: var(--c-muted);
  line-height: 1.6;
}
.office__map {
  position: relative;
  overflow: hidden;
  background: var(--c-panel);
}
.office__maplink { display: block; position: relative; }
.office__maplink img {
  width: 100%;
  height: 100%;
  min-height: 12.5rem;
  object-fit: cover;
  object-position: center;
  transition: transform .3s ease, filter .2s;
}
.office__maplink:hover img { transform: scale(1.03); }

/* Marker: die Spitze sitzt genau auf der Bildmitte, also auf der Adresse.
   Geometrie: das 28px-Quadrat mit border-radius 50% 50% 50% 0 hat seine
   scharfe Ecke unten links; nach rotate(-45deg) zeigt sie senkrecht nach
   unten, 19.8px unterhalb des Quadratmittelpunkts. Der Versatz von -34px
   nach oben setzt die Spitze damit auf die Mitte.                          */
.map__pin { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.map__pin::before {
  content: '';
  position: absolute;
  left: -14px;
  top: -34px;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--c-accent);
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
:root[data-theme='dark'] .map__pin::before { border-color: #0c0c0c; }

.map__coords, .map__route, .map__attr {
  position: absolute;
  z-index: 2;
  font-family: var(--f-mono);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  color: var(--c-fg);
}
.map__coords {
  top: .5rem; left: .5rem;
  font-size: .5625rem; letter-spacing: .1em;
  padding: .25rem .5rem;
  white-space: nowrap;
}
.map__route {
  bottom: .5rem; left: .5rem;
  font-size: .625rem; letter-spacing: .08em;
  padding: .3125rem .625rem;
}
.office__maplink:hover .map__route { background: var(--c-accent); color: var(--c-accent-fg); border-color: var(--c-accent); }
.map__attr {
  bottom: .5rem; right: .5rem;
  font-size: .5625rem; letter-spacing: .04em;
  /* Innenabstand so gewählt, dass die Trefferfläche 24px erreicht (WCAG 2.5.8) */
  padding: .375rem .5rem;
  color: var(--c-muted);
}
.map__attr:hover { color: var(--c-fg); }

/* Formular */
.form-block {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--gap-lg);
  margin-top: var(--gap-lg);
  padding: clamp(1.5rem, 3.5vw, 3rem);
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  scroll-margin-top: var(--nav-h);
}
.form-block__title {
  font-size: var(--t-h3-lg);
  font-weight: 500;
  letter-spacing: -.031em;
  line-height: 1.1;
  margin: .75rem 0 1rem;
}
.form-block__note { font-size: var(--t-small); color: var(--c-muted); line-height: 1.6; }

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
.field label {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: .0909em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: .5rem;
}
.field input, .field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--c-line);
  padding: .625rem 0;
  font-size: var(--t-body);
  outline: none;
  border-radius: 0;
  transition: border-color .18s;
  /* 16px verhindert den Auto-Zoom von iOS Safari beim Fokus */
  font-size: max(1rem, var(--t-body));
}
.field input:focus, .field textarea:focus { border-color: var(--c-accent); }
.field textarea { resize: vertical; min-height: 5rem; }
.form__consent {
  display: flex;
  gap: .625rem;
  align-items: flex-start;
  margin: 1.5rem 0;
  font-size: var(--t-small);
  color: var(--c-muted);
  line-height: 1.5;
}
.form__consent input { margin-top: .2rem; width: 1rem; height: 1rem; flex-shrink: 0; }
.form__consent a { color: var(--c-accent); text-decoration: underline; }

/* ── 12  Footer ──────────────────────────────────────────────────────── */

.footer { padding: clamp(3rem, 5vw, 4.5rem) var(--pad-x) 2rem; }
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--gap-md);
  margin-bottom: clamp(2.5rem, 4vw, 3.75rem);
}
.footer__about {
  font-size: var(--t-small);
  color: var(--c-muted);
  line-height: 1.6;
  margin-top: 1.25rem;
  max-width: 34ch;
}
.footer__col h2 {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  font-weight: 400;
  letter-spacing: .1364em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 1rem;
}
.footer__col ul { display: flex; flex-direction: column; gap: .625rem; font-size: var(--t-small); }
.footer__col a:hover { color: var(--c-accent); }
.footer__bar {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  justify-content: space-between;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-line);
}

/* ── 13  Overlays ────────────────────────────────────────────────────── */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  padding: clamp(.75rem, 3vw, 1.5rem);
  background: var(--c-scrim);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, visibility .2s;
}
.overlay[data-open='true'] { opacity: 1; visibility: visible; }
.overlay--center { align-items: center; justify-content: center; }
.overlay--top { align-items: flex-start; justify-content: center; }

.dialog {
  position: relative;
  width: 100%;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  transform: translateY(.5rem);
  transition: transform .22s ease;
}
.overlay[data-open='true'] .dialog { transform: none; }
.dialog--sm { max-width: 32.5rem; padding: clamp(1.5rem, 4vw, 2.5rem); }
.dialog--lg { max-width: 60rem; }
.dialog--xl { max-width: 68rem; }

.dialog__title {
  font-size: var(--t-h3-lg);
  font-weight: 500;
  letter-spacing: -.031em;
  line-height: 1.1;
  margin: 1rem 0 1.25rem;
}
.dialog__note {
  background: var(--c-panel);
  padding: 1rem;
  margin-bottom: 1.5rem;
  font-size: var(--t-kicker);
  color: var(--c-muted);
  line-height: 1.5;
}
.dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: flex-end;
}

/* Kopfleiste mit Reitern (Referenz- und Rechts-Overlay) */
.dialog__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem clamp(1.25rem, 3vw, 3rem);
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}
.dialog__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(.75rem, 2vw, 1.5rem);
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: .1364em;
  text-transform: uppercase;
}
.dialog__tabs button {
  color: var(--c-muted);
  padding-bottom: .375rem;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.dialog__tabs button:hover { color: var(--c-fg); }
.dialog__tabs button[aria-selected='true'] {
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
}
.dialog__body { padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.25rem, 3vw, 3rem) 4rem; }

/* Rechtstexte */
.legal__head { margin-bottom: 1rem; }
.legal__kicker {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: .1818em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: .875rem;
}
.legal__title {
  font-size: var(--t-h2);
  font-weight: 500;
  letter-spacing: -.031em;
  line-height: 1.05;
  margin-bottom: .75rem;
}
.legal__stand {
  font-family: var(--f-mono);
  font-size: var(--t-kicker);
  letter-spacing: .0833em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.legal-doc h3 {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -.017em;
  line-height: 1.3;
  margin: 2.5rem 0 .875rem;
  scroll-margin-top: 6rem;
}
.legal-doc p, .legal-doc li {
  font-size: .90625rem;
  line-height: 1.7;
  max-width: 68ch;
}
.legal-doc p { margin-bottom: .875rem; }
.legal-doc ul { list-style: disc; padding-left: 1.25rem; margin-bottom: .875rem; }
.legal-doc li { margin-bottom: .375rem; }
.legal-doc a { color: var(--c-accent); text-decoration: underline; }
.legal-doc hr { max-width: 45rem; }

/* Eigenständige Rechtsseiten (ohne Overlay) */
.legal-page { padding: var(--sp-section) var(--pad-x) 6rem; }
.legal-page .legal-doc { max-width: 48rem; margin: 0 auto; }
.legal-page__back { display: inline-block; margin-bottom: 2rem; }

/* ── 14  Platzhalter ─────────────────────────────────────────────────── */

/* Sichtbar markiert, damit im Review nichts übersehen wird.
   In Phase 2 fällt diese Klasse weg, sobald echte Inhalte da sind. */
.ph {
  position: relative;
  outline: 1px dashed var(--c-accent);
  outline-offset: 2px;
}
.ph::after {
  content: 'PLATZHALTER';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  font-family: var(--f-mono);
  font-size: .5rem;
  letter-spacing: .1em;
  padding: .125rem .3125rem;
  background: var(--c-accent);
  color: #fff;
}
.ph--inline { outline-offset: 1px; }
.ph--inline::after { display: none; }
.ph-note {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: .05em;
  color: var(--c-accent);
}
.office__placeholder { display: grid; place-items: center; height: 100%; min-height: 12.5rem; }

/* ── 15  Utilities, Fokus, Druck ─────────────────────────────────────── */

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

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--pad-x);
  z-index: 100;
  padding: .75rem 1rem;
  background: var(--c-accent);
  color: #fff;
  font-size: var(--t-small);
}
.skip-link:focus { top: .5rem; }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.br-sm { display: none; }

@media print {
  .nav, .mobilemenu, .overlay, .theme-toggle, .office__map, .form-block { display: none !important; }
  body { background: #fff; color: #000; }
  .section { border: 0; page-break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .case:hover { transform: none; }
}

/* ==========================================================================
   BREAKPOINTS
   Desktop-Werte stehen oben, hier wird nach unten angepasst.
   1200 · Team von 6 auf 3 Spalten
   1024 · Navigation auf Burger, alle zweispaltigen Raster stapeln
    900 · Testimonials stapeln
    720 · Leistungszeile stapelt, Standortkarte stapelt
    560 · Team auf 2 Spalten, Formularzeile einspaltig
   ========================================================================== */

@media (max-width: 1200px) {
  .team { grid-template-columns: repeat(3, 1fr); row-gap: 2rem; }
}

@media (max-width: 1023px) {
  :root { --nav-h: 4.75rem; }

  .nav__links, .nav__actions .btn { display: none; }
  .nav__burger { display: grid; }

  .hero__title { max-width: 24ch; }
  /* Die harten Zeilenumbrüche der Desktop-Headline würden auf Mobile
     mitten im Wort brechen — dort wird natürlich umgebrochen. */
  .hero__title .br-lg { display: none; }
  .hero__grid { grid-template-columns: 1fr; align-items: start; }
  .hero__lead { max-width: 46ch; }

  .section__head,
  .section__head--even { grid-template-columns: 1fr; gap: 1rem; align-items: start; }
  .h2, .h2--lg { max-width: 34ch; }

  .about { grid-template-columns: 1fr; }
  .about__stats { margin-top: 2rem; padding-top: 2rem; }

  .cases { grid-template-columns: 1fr; }
  .case { min-height: 0; }

  .contact { grid-template-columns: 1fr; }
  .form-block { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; }
  .case-detail__grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

@media (max-width: 899px) {
  .quotes { grid-template-columns: 1fr; gap: 2.5rem; }
  .quote blockquote { margin-bottom: 1rem; }
}

@media (max-width: 719px) {
  /* Leistungszeile: Nummer und Titel in einer Zeile, Teaser darunter */
  .svc__btn {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      'n name chev'
      '.  teaser teaser';
    gap: .5rem 1rem;
    align-items: baseline;
  }
  .svc__n { grid-area: n; }
  .svc__name { grid-area: name; }
  .svc__teaser { grid-area: teaser; }
  .svc__chev { grid-area: chev; align-self: center; }
  .svc__bullets { grid-template-columns: 1fr; }

  .office { grid-template-columns: 1fr; }
  .office__map { min-height: 11rem; }
  .contact__facts { gap: 1.25rem; }

  .br-sm { display: inline; }
}

@media (max-width: 559px) {
  .team { grid-template-columns: repeat(2, 1fr); }
  .form__row { grid-template-columns: 1fr; }
  .about__stats { grid-template-columns: 1fr; gap: 1.25rem; }
  .about__stat { display: flex; align-items: baseline; gap: .75rem; }
  .about__stat span { margin-top: 0; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
  .contact__facts { grid-template-columns: 1fr 1fr; }
  .dialog__actions .btn { flex: 1 1 auto; }
}

/* Logo-Grössen je Einsatzstelle (nach den Breakpoints, damit sie greifen) */
.nav .logo { --logo-h: clamp(2.125rem, 6vw, 3rem); }
.mobilemenu .logo { --logo-h: 2.25rem; }
.footer .logo { --logo-h: clamp(2.25rem, 6vw, 3.25rem); }

/* ── 16  Touch-Ziele ────────────────────────────────────────────────────
   WCAG 2.5.8 (AA) verlangt mindestens 24×24 CSS-Pixel für Bedienelemente.
   Ausgenommen sind Links mitten im Satz — deren Höhe ist durch die
   Zeilenhöhe des umgebenden Textes gesetzt (Ausnahme „Inline").
   Betroffen waren: Navigationslinks (21px), LINKEDIN/WEBSITE in den
   Team-Karten (18px), Telefon und E-Mail im Kontaktblock (20px) sowie
   die Footer-Listen (21px).                                            */

.nav__links a,
.team__links a,
.footer__col a,
.footer__col button,
.contact__fact dd a,
.legal-page__back {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
}
/* Die Team-Links stehen nebeneinander — etwas Innenabstand verhindert,
   dass die Trefferflächen aneinanderkleben. */
.team__links a { padding-block: .1875rem; }
.dialog__tabs button { min-height: 1.5rem; }

/* ── 17  Korrekturen aus dem Bild-Review ───────────────────────────────────
   Gefunden beim Durchsehen der Screenshots, nicht durch die Messwerte.     */

/* (1) Die Leistungszeile steckt in einem <h3> (nötig für die
   Überschriftengliederung). Dessen Fettung schlug auf Nummer und Teaser
   durch, die im Entwurf normal gesetzt sind. */
.svc h3 {
  margin: 0;
  font-size: inherit;
  font-weight: 400;
}
.svc__n, .svc__teaser { font-weight: 400; }

/* (2) Titel und Beschreibung der Referenzkarten sind <span> (in einem
   <button> ist nur Phrasing-Content erlaubt) und liefen deshalb in einer
   Zeile zusammen. */
.case > span:not([class]) { display: block; }   /* nur der klassenlose Wrapper */
.case__title, .case__desc { display: block; }
.case__foot { display: flex; }                  /* nach dem Wrapper-Reset wieder setzen */

/* (3) Drei Elemente teilen sich die Kartenfläche: Koordinaten oben links,
   ROUTE unten links, das Leaflet-Copyright bleibt unten rechts. Vorher lag
   ROUTE auf dem Copyright, danach klemmte es die Koordinaten ein. */
.map__coords { top: .5rem; left: .5rem; right: auto; bottom: auto; white-space: nowrap; }
.map__route { top: auto; bottom: .5rem; left: .5rem; right: auto; }

/* (5) Kopfleiste der Dialoge: auf schmalen Schirmen umbrach sie in zwei
   Reihen und schob den Inhalt nach unten. */
@media (max-width: 719px) {
  .dialog__bar { flex-wrap: nowrap; gap: .75rem; align-items: flex-start; }
  .dialog__bar > .meta { font-size: .625rem; letter-spacing: .1em; }
  .hide-sm { display: none; }
}

/* ── 18  Kleine Hilfsklassen (ersetzen Inline-Styles) ─────────────────────── */
.quotes__kicker { margin-bottom: clamp(2rem, 4vw, 3rem); }
.contact__h2 { margin: 1.5rem 0 2rem; }
.field--last { margin-bottom: 1.5rem; }
.ph-note--block { display: block; margin-top: 1rem; }
.dialog__lead { margin-bottom: 1.5rem; }
.link-accent { color: var(--c-accent); text-decoration: underline; }