/* =========================================================
   Vocatio Consulting GmbH — Stylesheet
   Warmes Editorial: Sandtöne, Terrakotta, Serife gegen Grotesk.
   Kontraste geprüft nach WCAG 2.2 AA.
   ========================================================= */

/* --- Schriften -------------------------------------------------
   Selbst gehostet (nie von Google-Servern laden: Performance + DSGVO).
   Die Dateien gehören nach assets/fonts/. Solange sie fehlen, greift
   der System-Fallback und die Seite bleibt vollständig lesbar.
---------------------------------------------------------------- */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-variable.woff2') format('woff2'),
       url('../fonts/fraunces-variable.ttf')   format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0100-017F, U+2013-2014, U+2018-201E,
                 U+2026, U+2039-203A, U+20AC, U+2122, U+2192;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-variable-italic.woff2') format('woff2'),
       url('../fonts/fraunces-variable-italic.ttf')   format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0100-017F, U+2013-2014, U+2018-201E,
                 U+2026, U+2039-203A, U+20AC, U+2122, U+2192;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/source-sans-3-variable.woff2') format('woff2'),
       url('../fonts/source-sans-3-variable.ttf')   format('truetype');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0100-017F, U+2013-2014, U+2018-201E,
                 U+2026, U+2039-203A, U+20AC, U+2122, U+2192;
}

/* --- Design-Token ---------------------------------------------- */
:root {
  --sand:        #fdf9f4;   /* heller Anker            */
  --sand-tief:   #f2e7dc;   /* warme Fläche            */
  --ink:         #2b2320;   /* Überschriften           */
  --ink-weich:   #3c312b;   /* Fließtext, dunkle Fläche*/
  --clay:        #b5613c;   /* Akzent, nur groß/dekorativ (4,2:1) */
  --clay-tief:   #9a4f2e;   /* Akzent für Text & Buttons  (5,7:1) */
  --salbei:      #4a6350;   /* zweiter Ton                (6,3:1) */
  --linie:       #2b232022; /* Haarlinie               */

  --serif:  'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --grotesk:'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --wrap: 1180px;
  --luft: clamp(72px, 9vw, 140px);   /* vertikaler Sektionsabstand */
  --radius: 4px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink-weich);
  font-family: var(--grotesk);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--serif);
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(42px, 7vw, 88px); letter-spacing: -0.03em; }
h2 { font-size: clamp(30px, 4.2vw, 52px); }
h3 { font-size: clamp(21px, 2.2vw, 28px); }

/* Fraunces ist eine Variable Font mit drei zusätzlichen Achsen:
   SOFT  rundet die Strichenden ab  (0 = scharf, 100 = sehr weich)
   WONK  aktiviert eigenwillige Glyphenformen (0 oder 1)
   opsz  optische Größe — vom Browser automatisch gesetzt
   Ein moderater SOFT-Wert gibt den warmen Ton, ohne weich zu wirken.
   wght bleibt bewusst ungenannt, damit font-weight weiter greift. */
h1, h2, h3,
.haltung-zitat p,
.person blockquote p,
.note-title,
.leistung-liste dt,
.footer-brand {
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 45, 'WONK' 0;
}

p { margin: 0 0 1.1em; max-width: 68ch; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: var(--luft) 0; }

/* --- Eintreten beim Scrollen -----------------------------------
   Das Attribut data-eintreten setzt ausschliesslich das Skript.
   Ohne JavaScript existiert dieser Zustand nicht und alles ist
   von Anfang an sichtbar. Bei reduzierter Bewegung greift die
   globale Regel weiter oben und blendet ohne Versatz ein.
---------------------------------------------------------------- */
[data-eintreten] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
[data-eintreten][data-sichtbar] {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  [data-eintreten] { opacity: 1; transform: none; }
}

/* --- Fokus: sichtbar, immer (WCAG 2.4.11) ---------------------- */
:focus-visible {
  outline: 3px solid var(--clay-tief);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 100;
  background: var(--ink);
  color: var(--sand);
  padding: 12px 20px;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; }

/* --- Bausteine ------------------------------------------------- */
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay-tief);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
}
.eyebrow::before {
  content: '';
  width: 34px;
  height: 1px;
  background: currentColor;
  flex: 0 0 auto;
}
.eyebrow-hell { color: var(--sand-tief); }

.lead { font-size: clamp(19px, 2vw, 23px); line-height: 1.55; }
.section-lead { font-size: 19px; max-width: 58ch; margin-bottom: 56px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;              /* > 24×24 CSS-Px (WCAG 2.5.8) */
  padding: 14px 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn-primary { background: var(--clay-tief); color: var(--sand); }
.btn-primary:hover { background: var(--ink); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--sand); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  color: var(--clay-tief);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.link-arrow::after { content: '\2192'; transition: transform 0.2s ease; }
.link-arrow:hover { color: var(--ink); }
.link-arrow:hover::after { transform: translateX(4px); }

.meta { font-size: 13px; font-weight: 400; opacity: 0.75; }

.frame { margin: 0; overflow: hidden; background: var(--sand-tief); }
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Portraet zieht beim Darueberfahren minimal heran — 3 Prozent,
   gerade genug, dass es lebt, ohne zu zappeln. */
.person:hover .frame img,
.person:focus-within .frame img { transform: scale(1.03); }

/* --- Kopfbereich ----------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fdf9f4f2;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
/* Sobald gescrollt wird, loest sich der Kopf sichtbar vom Inhalt ab. */
.site-header.kompakt {
  border-bottom-color: var(--linie);
  box-shadow: 0 10px 30px -24px #2b232099;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 84px;
  transition: min-height 0.3s ease;
}
.site-header.kompakt .header-inner { min-height: 68px; }

.brand { display: flex; align-items: center; }
.brand img {
  width: 220px;
  height: auto;
  transition: width 0.3s ease;
}
.site-header.kompakt .brand img { width: 185px; }

.nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  color: var(--ink-weich);
  text-decoration: none;
  font-weight: 500;
  border-radius: var(--radius);
}
.nav-list a:hover { color: var(--clay-tief); }

/* Der gerade betrachtete Abschnitt bekommt eine feine Unterstreichung.
   aria-current traegt dieselbe Information fuer Screenreader. */
.nav-list a[aria-current='true'] {
  color: var(--clay-tief);
  position: relative;
}
.nav-list a[aria-current='true']::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  animation: strich-ein 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes strich-ein {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}
.nav-cta[aria-current='true']::after { display: none; }

.nav-cta {
  background: var(--ink);
  color: var(--sand) !important;
  border-radius: 999px;
  padding: 0 22px !important;
}
.nav-cta:hover { background: var(--clay-tief); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle-bar {
  width: 18px; height: 2px; background: currentColor;
  box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor;
}

/* --- Hero ------------------------------------------------------ */
.hero {
  position: relative;
  z-index: 1;                     /* damit die Notiz ueber die naechste Sektion ragen darf */
  padding-bottom: 0;              /* das Bildband schliesst buendig ab */
  background:
    radial-gradient(58% 62% at 78% 12%, var(--sand-tief) 0%, #fdf9f400 72%),
    var(--sand);
}
.hero-copy { max-width: 880px; }
.hero-copy > :last-child { margin-bottom: 0; }
/* Das eine besondere Detail der Seite: nur dieses Wort bekommt WONK,
   die eigenwilligen Glyphenformen von Fraunces. Sparsam eingesetzt
   wirkt das wie eine Handschrift, überall verteilt wie eine Marotte. */
.hero h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--clay);
  font-variation-settings: 'SOFT' 70, 'WONK' 1;
}
.hero .lead { max-width: 34em; }

.actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 32px 0 0; }

.trust {
  list-style: none;
  margin: 36px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--linie);
  display: grid;
  gap: 10px 32px;
  font-size: 15px;
}
.trust li { position: relative; padding-left: 18px; }
.trust li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--clay-tief);
}

/* Bildband: laeuft von Kante zu Kante, unabhaengig von .wrap.
   Der Kontrast zwischen ruhiger Textspalte und breitem Bild traegt
   den Hero — deshalb bewusst randlos statt in den Satzspiegel gesperrt. */
.hero-band {
  position: relative;
  margin-top: clamp(48px, 6vw, 80px);
  width: 100%;
}
.hero-band picture { display: block; }
.hero-band img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 38%;
  background: var(--sand-tief);
}

.band-overlay { position: relative; }

.note {
  background: var(--sand);
  border: 1px solid var(--linie);
  border-radius: 14px;
  padding: 20px 22px;
  max-width: 340px;
  margin-top: -36px;
  position: relative;
  z-index: 2;
  box-shadow: 0 18px 40px -30px #2b2320b3;
}
.note-title { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--ink); margin-bottom: 4px; }
.note-title span { font-size: 14px; opacity: 0.7; }
.note p:last-child { font-size: 15px; margin: 0; }

/* --- Drei Wege -------------------------------------------------- */
/* =========================================================
   Drei Zielgruppen als aufklappbare Bereiche

   Bewusst mit <details>/<summary> gebaut statt mit einem
   Skript-Dialog: funktioniert ohne JavaScript, ist von Haus
   aus tastaturbedienbar, wird von Screenreadern als
   auf-/zuklappbar angesagt, und der Inhalt steht immer im
   Dokument — also auch fuer Suchmaschinen auffindbar.
   ========================================================= */
.wege { background: var(--sand-tief); }
.wege-liste { display: grid; gap: 20px; }

.weg {
  position: relative;
  background: var(--sand);
  border: 1px solid #2b232022;
  border-radius: 18px;
  overflow: hidden;
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}
.weg:hover { border-color: #2b232040; box-shadow: 0 24px 50px -44px #2b2320cc; }
.weg[open] {
  border-color: var(--clay-tief);
  box-shadow: 0 34px 70px -50px #2b2320cc;
}

.weg > summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 20px;
  padding: 26px clamp(20px, 3vw, 34px);
  cursor: pointer;
  list-style: none;              /* Standarddreieck weg */
}
.weg > summary::-webkit-details-marker { display: none; }
.weg > summary:focus-visible {
  outline: 3px solid var(--clay-tief);
  outline-offset: -3px;
  border-radius: 18px;
}

.weg-nr {
  font-family: var(--serif);
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1;
  color: #9a4f2e40;
  transition: color 0.35s ease;
}
.weg[open] .weg-nr,
.weg:hover .weg-nr { color: var(--clay-tief); }

.weg-kopf { display: grid; gap: 6px; }
.weg-titel {
  font-family: var(--serif);
  font-size: clamp(21px, 2.6vw, 30px);
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.weg-kurz { font-size: 16px; color: var(--ink-weich); max-width: 52ch; }

/* Plus, das sich beim Oeffnen zum Minus dreht */
.weg-zeichen {
  position: relative;
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid #2b232033;
  transition: background-color 0.35s ease, border-color 0.35s ease, transform 0.45s ease;
}
.weg-zeichen::before,
.weg-zeichen::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 15px; height: 2px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.35s ease;
}
.weg-zeichen::after { transform: translate(-50%, -50%) rotate(90deg); }
.weg[open] .weg-zeichen {
  background: var(--clay-tief);
  border-color: var(--clay-tief);
  transform: rotate(180deg);
}
.weg[open] .weg-zeichen::before,
.weg[open] .weg-zeichen::after { background: var(--sand); }
.weg[open] .weg-zeichen::after { transform: translate(-50%, -50%) rotate(0deg); }

.weg-inhalt {
  padding: 4px clamp(20px, 3vw, 34px) clamp(28px, 3.5vw, 40px);
  border-top: 1px solid #2b23201a;
  margin-top: 4px;
  animation: inhalt-auf 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes inhalt-auf {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
.weg-inhalt h3 { font-size: 21px; margin: 26px 0 10px; }
.weg-inhalt > .weg-spalten > div > h3:first-child { margin-top: 20px; }

.weg-spalten { display: grid; gap: 32px; }

.weg-neben {
  background: var(--sand-tief);
  border-radius: 14px;
  padding: 24px 26px;
  align-self: start;
}
.weg-neben h3 { margin-top: 0; font-size: 18px; }
.haken { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.haken li { position: relative; padding-left: 26px; font-size: 15px; }
.haken li::before {
  content: '';
  position: absolute;
  left: 2px; top: 7px;
  width: 9px; height: 5px;
  border-left: 2px solid var(--clay-tief);
  border-bottom: 2px solid var(--clay-tief);
  transform: rotate(-45deg);
}
.neben-links { margin: 0; line-height: 2.4; }

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

/* --- Haltung ---------------------------------------------------- */
.haltung-grid { display: grid; gap: 56px; align-items: start; }
.haltung-zitat blockquote {
  margin: 0;
  border-left: 2px solid var(--clay);
  padding-left: 28px;
}
.haltung-zitat p {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 34px);
  font-style: italic;
  line-height: 1.35;
  color: var(--ink);
}
.haltung-zitat footer { font-size: 15px; color: var(--salbei); font-weight: 600; }

.werte { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 14px; }
.werte li {
  position: relative;
  padding-left: 30px;
  border-bottom: 1px solid var(--linie);
  padding-bottom: 14px;
}
.werte li::before {
  content: '';
  position: absolute;
  left: 0; top: 11px;
  width: 16px; height: 1px;
  background: var(--clay-tief);
}

/* --- Leistungen ------------------------------------------------- */
.leistung-block { margin-top: 72px; }
.leistung-block h3 {
  border-bottom: 2px solid var(--ink);
  padding-bottom: 14px;
  margin-bottom: 24px;
}
.block-lead { font-size: 19px; color: var(--ink); }

.leistung-liste { margin: 0; display: grid; gap: 0; }
.leistung-liste > div {
  display: grid;
  gap: 6px 40px;
  padding: 22px 0;
  border-bottom: 1px solid var(--linie);
  transition: background-color 0.3s ease, padding-left 0.3s ease;
}
.leistung-liste > div:hover,
.leistung-liste > div:focus-within {
  background-color: #b5613c0d;
  padding-left: 16px;
}
.leistung-liste dt {
  font-family: var(--serif);
  font-size: 21px;
  color: var(--ink);
  transition: color 0.3s ease;
}
.leistung-liste > div:hover dt,
.leistung-liste > div:focus-within dt { color: var(--clay-tief); }
.leistung-liste dd { margin: 0; }
.leistung-liste dd, .leistung-liste p { max-width: 60ch; }

.downloads-titel { margin-top: 32px; font-weight: 700; color: var(--ink); }
.downloads { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.downloads a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--clay-tief);
  font-weight: 600;
}

/* --- Team ------------------------------------------------------- */
/* Geschaeftsfuehrung bewusst zurueckgenommen: runde Portraets in
   Netzwerk-Groesse, kurze Texte, beide gleich gewichtet. Die Seite
   soll die Coaches tragen, nicht die Leitung. */
.team { background: var(--sand-tief); }
.team-liste { display: grid; gap: 48px; margin-top: 48px; }
.person { display: grid; gap: 22px; align-items: start; }
.person-text > :last-child { margin-bottom: 0; }
.person h3 { font-size: clamp(21px, 2.2vw, 26px); margin-bottom: 2px; }
.person p { font-size: 16px; }
.person-satz {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink);
  margin-top: 14px;
}

.frame-rund {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  max-width: 190px;
}
.person-rolle {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--salbei);
  margin-top: -6px;
}
.person blockquote {
  margin: 0 0 20px;
  border-left: 2px solid var(--clay);
  padding-left: 20px;
}
.person blockquote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 6px;
}
.person blockquote footer { font-size: 14px; color: var(--salbei); font-weight: 600; }

/* --- Kompetenz-Netzwerk ------------------------------------------ */
.netz-zitat {
  margin: 0 0 56px;
  border-left: 2px solid var(--clay);
  padding-left: 26px;
  max-width: 46em;
}
.netz-zitat p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 2.2vw, 25px);
  line-height: 1.4;
  color: var(--ink);
}
.netz-zitat footer { font-size: 14px; color: var(--salbei); font-weight: 600; }

.netz-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 40px 32px;
}

.netz-person { display: grid; gap: 4px; align-content: start; }
.netz-person h3 { font-size: 20px; margin: 14px 0 2px; }

/* Bildplatz: Initialen liegen darunter und werden sichtbar,
   sobald ein Foto fehlt (das <img> entfernt sich dann selbst). */
.netz-bild {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(150deg, var(--sand-tief) 0%, #e3cdb8 100%);
  max-width: 190px;
}
.netz-initialen {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 500;
  color: #9a4f2e80;
  letter-spacing: 0.02em;
}
.netz-bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.netz-person:hover .netz-bild img { transform: scale(1.05); }

.netz-qual { font-size: 15px; margin-bottom: 6px; }
.netz-firma { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0; }
.netz-ort {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--salbei);
  margin-bottom: 8px;
}

/* --- Standorte -------------------------------------------------- */
.standort-liste {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  display: grid;
  gap: 32px;
}
.standort-liste li {
  border-top: 2px solid var(--ink);
  padding-top: 18px;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.standort-liste li:hover,
.standort-liste li:focus-within { transform: translateY(-6px); }
.standort-liste h3 { font-size: 21px; margin-bottom: 8px; }
.adresse { font-size: 16px; margin-bottom: 6px; }
.hinweis { font-size: 14px; color: var(--salbei); font-weight: 600; }

/* --- Kontakt ---------------------------------------------------- */
.kontakt { background: var(--ink-weich); color: var(--sand); }
.kontakt h2 { color: var(--sand); }
.kontakt-grid { display: grid; gap: 56px; align-items: start; }

.kontakt-liste { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 20px; }
.kontakt-liste li {
  display: grid;
  gap: 4px;
  border-top: 1px solid #fdf9f433;
  padding-top: 14px;
}
.kontakt-label {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sand-tief);
}
.kontakt-liste a {
  color: var(--sand);
  font-size: 19px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}
.kontakt-liste a:hover { color: var(--sand-tief); }
.kontakt :focus-visible { outline-color: var(--sand-tief); }

.kontakt-hinweis {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #fdf9f433;
  font-size: 15px;
  color: var(--sand-tief);
}
.kontakt-hinweis a { color: var(--sand); font-weight: 600; }

.kontakt-formular {
  background: var(--sand);
  color: var(--ink-weich);
  border-radius: 18px;
  padding: clamp(24px, 4vw, 40px);
}
.form-hinweis { font-size: 14px; color: var(--salbei); font-weight: 600; }

.feld-gruppe {
  border: 0;
  border-top: 1px solid #2b23201f;
  margin: 0 0 20px;
  padding: 18px 0 0;
}
.feld-gruppe legend {
  padding: 0;
  font-weight: 600;
  color: var(--ink);
  font-size: 15px;
  margin-bottom: 12px;
}

.feld-fehler {
  font-size: 15px;
  font-weight: 600;
  color: #a3261d;              /* 6,1:1 auf Sand — auch fuer Fliesstext ausreichend */
  margin: -8px 0 16px;
  padding-left: 22px;
  position: relative;
}
/* Der Fehler wird nicht nur rot markiert, sondern zusaetzlich mit einem
   Zeichen versehen — Farbe allein darf keine Information tragen. */
.feld-fehler::before {
  content: '!';
  position: absolute;
  left: 0; top: 1px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #a3261d;
  color: var(--sand);
  font-size: 11px;
  line-height: 16px;
  text-align: center;
}
.feld input[aria-invalid='true'] { border-color: #a3261d; border-width: 2px; }

/* Spam-Falle: aus dem Blickfeld genommen, ohne display:none — manche Bots
   ueberspringen Felder, die per display ausgeblendet sind. */
.vc-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.feld { display: grid; gap: 6px; margin-bottom: 20px; }
.feld label { font-weight: 600; color: var(--ink); font-size: 15px; }
.feld input, .feld textarea, .feld select {
  font: inherit;
  color: var(--ink-weich);
  background: #ffffff;
  border: 1px solid #2b232055;
  border-radius: var(--radius);
  padding: 12px 14px;
  min-height: 48px;
  width: 100%;
}
.feld textarea { min-height: 140px; resize: vertical; }
.feld-hilfe { font-size: 14px; color: var(--ink-weich); margin: -8px 0 20px; }

.feld-check {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px;
}
.feld-check input { width: 24px; height: 24px; min-height: 24px; margin-top: 2px; }
.feld-check label { font-weight: 400; font-size: 15px; line-height: 1.5; }
.feld-check a { color: var(--clay-tief); }

/* --- Fußbereich ------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: var(--sand-tief);
  padding: 56px 0;
  font-size: 15px;
}
.footer-grid { display: grid; gap: 32px; }
.footer-brand { font-family: var(--serif); font-size: 20px; color: var(--sand); margin-bottom: 8px; }
.site-footer p { margin: 0 0 4px; }
.footer-links, .footer-social ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.site-footer a {
  color: var(--sand-tief);
  display: inline-flex;
  align-items: center;
  min-height: 36px;
}
.site-footer a:hover { color: var(--sand); }
.site-footer :focus-visible { outline-color: var(--sand-tief); }
.siegel {
  width: 84px;
  height: auto;
  margin-top: 20px;
  background: var(--sand);
  border-radius: 8px;
  padding: 6px;
}

/* =========================================================
   Ab hier: größere Bildschirme
   ========================================================= */
@media (min-width: 700px) {
  .trust { grid-template-columns: 1fr 1fr; }
  .leistung-liste > div { grid-template-columns: 260px 1fr; }
  .standort-liste { grid-template-columns: repeat(2, 1fr); }
  .netz-liste { grid-template-columns: repeat(2, 1fr); }
  .team-liste { grid-template-columns: 1fr 1fr; gap: 56px; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}

@media (min-width: 900px) {
  .weg-spalten { grid-template-columns: 1.35fr 0.65fr; gap: 48px; }
  .netz-liste { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 700px) {
  .hero-band img { aspect-ratio: 2.85 / 1; object-position: center 42%; }
  .band-overlay {
    position: absolute;
    left: 0; right: 0;
    bottom: 0;
    pointer-events: none;
  }
  .note {
    pointer-events: auto;
    margin-top: 0;
    transform: translateY(38%);
    max-width: 330px;
  }
}

@media (min-width: 960px) {
  .haltung-grid { grid-template-columns: 0.85fr 1.15fr; gap: 72px; }
  .standort-liste { grid-template-columns: repeat(4, 1fr); }
  .netz-liste { grid-template-columns: repeat(4, 1fr); }
  .kontakt-grid { grid-template-columns: 1fr 1fr; gap: 72px; }
}

@media (max-width: 959px) {
  .nav-toggle { display: inline-flex; }
  #hauptnavigation {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--sand);
    border-bottom: 1px solid var(--linie);
    padding: 12px 24px 20px;
  }
  #hauptnavigation.nav-offen { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-list a { min-height: 52px; padding: 0 4px; }
  .nav-cta { justify-content: center; margin-top: 8px; }
  .site-header { position: relative; }
}

/* =========================================================
   Textseiten: Impressum, Datenschutz, Barrierefreiheit
   Eine einzige Textkolumne, ruhig gesetzt, gut lesbar.
   ========================================================= */
.doc { padding: clamp(48px, 6vw, 88px) 0 var(--luft); }
.doc-wrap { max-width: 760px; }

.brotkrumen { margin-bottom: 32px; }
.brotkrumen ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  font-size: 14px;
}
.brotkrumen li + li::before {
  content: '\203A';
  margin-right: 10px;
  color: var(--salbei);
}
.brotkrumen a {
  color: var(--clay-tief);
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}
.brotkrumen [aria-current='page'] {
  color: var(--ink-weich);
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

.doc h1 { font-size: clamp(36px, 5vw, 58px); margin-bottom: 28px; }
.doc h2 {
  font-size: clamp(22px, 2.6vw, 28px);
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--linie);
}
.doc .lead { margin-bottom: 40px; }
.doc a { color: var(--clay-tief); }

.doc ul, .doc ol { margin: 0 0 1.2em; padding-left: 22px; }
.doc li { margin-bottom: 8px; max-width: 66ch; }

.inhaltsverzeichnis {
  background: var(--sand-tief);
  border-radius: 14px;
  padding: 24px 28px;
  margin-bottom: 8px;
}
.inhaltsverzeichnis h2 {
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--grotesk);
  border: 0;
  margin: 0 0 12px;
  padding: 0;
}
.inhaltsverzeichnis ol { margin: 0; }
.inhaltsverzeichnis a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
}

/* Hinweis auf Angaben, die noch vom Kunden zu ergänzen sind.
   Vor dem Livegang müssen alle .platzhalter verschwunden sein. */
.platzhalter {
  background: #b5613c1a;
  border-left: 3px solid var(--clay-tief);
  padding: 14px 18px;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 15px;
}
.platzhalter::before {
  content: 'Noch zu ergänzen: ';
  font-weight: 700;
  color: var(--clay-tief);
}

.stand {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--linie);
  font-size: 14px;
  color: var(--salbei);
  font-weight: 600;
}

/* --- Druck ------------------------------------------------------ */
@media print {
  .site-header, .nav-toggle, .skip-link, .kontakt-formular { display: none; }
  body { background: #fff; color: #000; font-size: 12pt; }
  a::after { content: ' (' attr(href) ')'; font-size: 10pt; }
}