/* ============================================================
   Wind & Site GmbH – Stylesheet

   Farben und Formen folgen dem Corporate Design des Unternehmens,
   damit Website und Anwendungen als ein Auftritt gelesen werden.
   Herkunft der Tokens: siehe README.

     – Türkis #1D9E8E und Lila #6B3FA0 als Markenfarben
     – 3px-Verlaufslinie Türkis→Lila unter dem Header
     – türkises Quadrat vor der Wortmarke, Wortmarke in Lila
     – Lila für Auszeichnungen (Kicker, Labels, Tabellenköpfe)
     – Türkis für Aktionen, Lila als Sekundäraktion
     – linke Randmarkierung bei Hinweisblöcken
     – leicht türkis getönte Flächen, Radien 6–8px (Bilder 16px)

   1. Design-Tokens   2. Reset   3. Layout   4. Komponenten
   5. Seitenbausteine 6. Responsive
   ============================================================ */

/* ---------- 1. Design-Tokens ---------- */
:root {
  /* ====== Corporate Design (identisch zur internen Anwendung) ====== */
  --ws-tuerkis: #1D9E8E;
  --ws-lila:    #6B3FA0;

  /* Türkis-Ableitungen */
  --accent:        var(--ws-tuerkis);
  --accent-ink:    #178476;                  /* Flächen mit weißer Schrift (AA) */
  --accent-dark:   #12695E;                  /* Hover/Active */
  --accent-soft:   rgba(29, 158, 142, 0.10);
  --accent-softer: rgba(29, 158, 142, 0.05);
  --accent-line:   rgba(29, 158, 142, 0.30);
  --accent-ring:   rgba(29, 158, 142, 0.22); /* Fokus-Ring */

  /* Lila-Ableitungen */
  --accent2:       var(--ws-lila);
  --accent2-dark:  #56317F;
  --accent2-soft:  rgba(107, 63, 160, 0.10);
  --accent2-line:  rgba(107, 63, 160, 0.30);

  /* Neutrale Flächen, leicht türkis getönt */
  --fg:            #16302C;
  --muted:         #5A7873;
  --bg:            #F3F8F7;
  --card:          #FFFFFF;
  --surface:       #EDF5F4;
  --surface-2:     #F7FBFA;
  --border:        #DCE8E6;
  --border-strong: #C4D8D4;

  /* ====== Nur für die Website: dunkle Flächen und helle Akzente.
     Aus --fg abgeleitet, damit sie in der Familie bleiben. ====== */
  --deep:        #0F2621;   /* Hero, CTA, Footer */
  --deep-2:      #143029;
  --on-deep:     rgba(255, 255, 255, 0.82);
  --on-deep-dim: rgba(255, 255, 255, 0.58);
  --tuerkis-hell: #4FCBB9;  /* Türkis auf dunklem Grund */
  --lila-hell:    #B79BDD;  /* Lila auf dunklem Grund */

  --grad: linear-gradient(90deg, var(--ws-tuerkis) 0%, var(--ws-lila) 100%);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --radius:    8px;
  --radius-sm: 6px;
  --radius-bild: 16px;                       /* Bilder runder als Karten */
  --shadow-sm: 0 1px 2px rgba(22, 48, 44, .05), 0 3px 10px rgba(22, 48, 44, .05);
  --shadow-md: 0 8px 26px rgba(22, 48, 44, .10);

  --container: 1100px;
  --gutter: 24px;
  --section-y: clamp(56px, 7vw, 96px);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent-ring); }
img, svg { max-width: 100%; display: block; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { color: var(--accent-dark); text-decoration: underline; }
h1, h2, h3 { color: var(--fg); line-height: 1.22; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 4.6vw, 3rem); font-weight: 650; letter-spacing: -.015em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 600; letter-spacing: -.01em; }
h3 { font-size: 1.12rem; font-weight: 600; }
p { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--deep); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ---------- 3. Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--soft { background: var(--surface-2); border-block: 1px solid var(--border); }
.section__head { max-width: 700px; margin-bottom: 44px; }
.center { text-align: center; }

/* Kicker: uppercase in Lila – dasselbe Auszeichnungsmuster wie die
   Tabellenköpfe der internen Anwendung. */
.kicker {
  font-size: .8rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent2); margin: 0 0 .7em;
}
.kicker a { color: inherit; }
.lead { font-size: 1.1rem; color: var(--muted); }
/* Slogan auf hellem Grund – dieselbe Aussage wie im Kopf der
   Gutachten-Seite, deshalb auch hier etwas kräftiger als Fließtext. */
.lead--slogan { color: var(--fg); font-weight: 500; font-size: clamp(1.1rem, 1.8vw, 1.25rem); }


/* ---------- 4. Komponenten ---------- */
/* Buttons wie in der internen Anwendung: Türkis gefüllt für die Hauptaktion,
   Lila als Umriss für die Nebenaktion. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .6rem 1.1rem; border: 1px solid var(--accent-ink); border-radius: var(--radius-sm);
  background: var(--accent-ink); color: #fff;
  font: inherit; font-size: .97rem; font-weight: 500; cursor: pointer; text-decoration: none;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; text-decoration: none; }
.btn--primary { /* Standard, hier nur zur Lesbarkeit im Markup */ }
.btn--secondary { background: var(--card); color: var(--accent2); border-color: var(--accent2-line); }
.btn--secondary:hover { background: var(--accent2); border-color: var(--accent2); color: #fff; }
/* Auf dunklem Grund: heller Umriss */
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .7); color: #fff; }
.btn--sm { padding: .42rem .85rem; font-size: .92rem; }
.btn--block { width: 100%; }

.icon { width: 22px; height: 22px; }

/* Header – mit der Verlaufslinie als Signatur */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .2s;
}
.header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: var(--grad);
}
.header.is-scrolled { box-shadow: 0 2px 12px rgba(22, 48, 44, .06); }
.header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 66px; gap: 20px; }

/* Wortmarke: freigestellte Bildmarke des Logos, daneben der Name.
   Farbaufteilung wie im Logo – Name in Türkis, Rechtsform in Lila. */
.logo { display: inline-flex; align-items: center; gap: .6rem; }
.logo:hover { text-decoration: none; }
.logo__marke { height: 34px; width: auto; flex-shrink: 0; }
.logo__text { font-weight: 600; font-size: 1.15rem; letter-spacing: .01em; color: var(--accent-ink); }
.logo__suffix { font-weight: 600; font-size: .8rem; color: var(--accent2); margin-left: 6px; letter-spacing: .02em; }
.logo:hover .logo__text { color: var(--accent-dark); }

.nav__list { display: flex; align-items: center; gap: .25rem; }
.nav__list a { padding: .45rem .75rem; border-radius: var(--radius-sm); color: var(--muted); font-size: .97rem; }
.nav__list a:hover { color: var(--accent-ink); background: var(--accent-soft); text-decoration: none; }
.nav__list a[aria-current] { color: var(--accent2); font-weight: 600; }
.nav__list .btn { color: #fff; }
.nav__list .btn[aria-current] { color: #fff; }

.nav-toggle {
  display: none; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card); cursor: pointer; padding: 0; place-items: center; gap: 5px;
  /* Vorsorglich: .header__inner ist ein Flex-Container, und die Wortmarke
     daneben kann nicht schrumpfen — "Wind & Site" ist mit
     geschuetzten Leerzeichen gesetzt, ihre min-content-Breite ist eine harte
     Untergrenze. Geriete die Zeile je unter Druck, waere der Knopf das
     Einzige, was nachgibt, und die Navigation waere auf dem Telefon
     verschwunden. Gemessen bei 390px passt alles (Marke 199px, Knopf 40px),
     der Fall tritt derzeit also nicht ein. */
  flex-shrink: 0;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--fg); border-radius: 2px; }

/* Hero */
.hero { position: relative; color: #fff; overflow: hidden; background: var(--deep); }
.hero__bg { position: absolute; inset: 0; }
.hero__bg::before,
.hero__bg::after { content: ""; position: absolute; border-radius: 50%; filter: blur(100px); }
.hero__bg::before { width: 620px; height: 620px; background: var(--ws-tuerkis); opacity: .42; top: -240px; right: -110px; }
.hero__bg::after  { width: 540px; height: 540px; background: var(--ws-lila);   opacity: .46; bottom: -250px; left: -130px; }
/* Text links, Bild rechts. Das Bild ist freigestellt und steht ohne Rahmen
   direkt auf der dunklen Flaeche. */
.hero__inner {
  position: relative; padding-block: clamp(64px, 8vw, 112px);
  display: grid; grid-template-columns: 1fr 420px;
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
.hero__spalte { max-width: 620px; }
.hero__bild { width: 100%; height: auto; }
.hero__title { color: #fff; margin-bottom: .5em; line-height: 1.12; }
.hero__text { font-size: 1.15rem; color: var(--on-deep); max-width: 620px; }
/* Ueberschrift und Vorspann sind zeilenweise gesetzt – jeder Eintrag aus
   site.yaml steht fuer sich. */
.hero__zeile { display: block; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

/* Karten */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.card {
  display: flex; flex-direction: column; padding: 1.4rem 1.4rem 1.2rem;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  color: inherit; transition: border-color .12s, box-shadow .12s;
}
.card:hover { border-color: var(--accent-line); box-shadow: var(--shadow-sm); text-decoration: none; }
.card__icon {
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 1rem;
  border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-ink);
}
.card:hover .card__icon { background: var(--accent-ink); color: #fff; }
.card__title { margin-bottom: .35em; color: var(--fg); }
.card__text { color: var(--muted); font-size: .95rem; flex: 1; }
.card__more { font-size: .92rem; color: var(--accent-ink); margin-top: 1rem; font-weight: 500; }

/* Hervorgehobener Block: Arbeitsweise / Planungsoberflaeche.
   Traegt die Verlaufslinie als Oberkante – dasselbe Signaturelement wie
   der Header – und steht damit sichtbar vor den vier Gutachten. */
.featured { background: var(--surface); border-bottom: 1px solid var(--border); padding-block: clamp(36px, 5vw, 64px); }
.featured__card {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.15fr 1fr;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.featured__card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--grad);
}
.featured__main { padding: clamp(24px, 3.5vw, 40px); }
.featured__label {
  display: flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent2); margin: 0 0 1rem;
}
.featured__icon {
  display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0;
  border-radius: var(--radius-sm); background: var(--accent2-soft); color: var(--accent2);
}
.featured__icon .icon { width: 17px; height: 17px; }
.featured__title { margin-bottom: .3em; }
.featured__claim { font-size: 1.12rem; font-weight: 500; color: var(--accent-ink); margin-bottom: 1rem; }
.featured__teaser { color: var(--fg); }
.featured__text { color: var(--muted); font-size: .97rem; margin-bottom: 1.6rem; }

.featured__side {
  padding: clamp(24px, 3.5vw, 40px);
  background: var(--surface-2); border-left: 1px solid var(--border);
}
.featured__side-head {
  font-size: .8rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent2); margin: 0 0 1rem;
}
.featured__side .checklist li { font-size: .95rem; }

/* Kompakte Variante auf der Startseite: quer über die Kartenreihe,
   Verlauf an der linken Kante. */
.featured-card {
  position: relative; overflow: hidden;
  display: flex; gap: 1.2rem; align-items: flex-start;
  padding: 1.5rem 1.5rem 1.4rem 1.7rem; margin-bottom: 16px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  color: inherit; transition: border-color .12s, box-shadow .12s;
}
.featured-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--ws-tuerkis) 0%, var(--ws-lila) 100%);
}
.featured-card:hover { border-color: var(--accent-line); box-shadow: var(--shadow-sm); text-decoration: none; }
.featured-card__icon {
  display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0;
  border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-ink);
}
.featured-card:hover .featured-card__icon { background: var(--accent-ink); color: #fff; }
.featured-card__icon .icon { width: 24px; height: 24px; }
.featured-card__body { min-width: 0; }
.featured-card__label {
  font-size: .78rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent2); margin: 0 0 .35em;
}
.featured-card__title { margin-bottom: .2em; }
.featured-card__claim { color: var(--accent-ink); font-weight: 500; font-size: .98rem; margin-bottom: .5em; }
.featured-card__text { color: var(--muted); font-size: .95rem; margin-bottom: 0; }
.featured-card .card__more { display: inline-block; margin-top: .9rem; }

/* Schmales Band mit der Zwischenüberschrift über den vier Gutachten */
.section-label { padding-block: clamp(32px, 4vw, 52px) 0; }
.section-label .kicker { margin: 0; }

/* Untertitel der Gutachten – der formale Begriff unter dem kurzen Namen */
.service__untertitel { color: var(--accent2); font-weight: 500; font-size: .97rem; margin: -.2em 0 .8em; }
.card__untertitel { color: var(--accent2); font-size: .88rem; margin: -.15em 0 .6em; }

/* Split + Features */
.split { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 60px); align-items: start; }
.features { display: grid; gap: 10px; }
/* Linke Randmarkierung in Lila – wie die Hinweisbänder der internen Anwendung */
.feature {
  padding: 1rem 1.2rem; background: var(--card);
  border: 1px solid var(--border); border-left: 3px solid var(--ws-lila);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.feature__title { margin-bottom: .25em; font-size: 1rem; }
.feature__text { margin: 0; color: var(--muted); font-size: .95rem; }

/* Seitenkopf */
.page-head { background: var(--deep); color: #fff; padding-block: clamp(48px, 7vw, 84px); }
.page-head h1 { color: #fff; }
.page-head__text { font-size: 1.08rem; color: var(--on-deep); max-width: 620px; }
/* Slogan statt Fließtext: kürzer, etwas größer, ohne Fettung –
   er trägt die Aussage, nicht die Erklärung. */
.page-head__slogan {
  font-size: clamp(1.15rem, 2.2vw, 1.35rem); font-weight: 500; line-height: 1.5;
  color: #fff; max-width: 660px; margin-bottom: 0;
}

.page-head__meta { color: var(--on-deep-dim); font-size: .94rem; margin: 0; }
.hero .kicker,
.page-head .kicker { color: var(--lila-hell); }
.page-head .kicker a { color: var(--lila-hell); }

/* Ankernavigation – Reiterleiste analog zu den Varianten-Reitern */
.anchors { background: var(--surface); border-bottom: 1px solid var(--border); }
.anchors__inner { display: flex; gap: 2px; overflow-x: auto; padding-block: 10px; scrollbar-width: none; }
.anchors__inner::-webkit-scrollbar { display: none; }
.anchors a {
  white-space: nowrap; padding: .4rem .85rem; border-radius: var(--radius-sm);
  font-size: .92rem; font-weight: 500; color: var(--muted);
}
.anchors a:hover { background: var(--accent-soft); color: var(--accent-ink); text-decoration: none; }

/* Leistungs-Abschnitte */
.service { padding-block: clamp(44px, 6vw, 76px); }
.service--soft { background: var(--surface-2); border-block: 1px solid var(--border); }
.service__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.service__icon {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 1.1rem;
  border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-ink);
}
.service__icon .icon { width: 24px; height: 24px; }

/* Bild neben dem Text; die Seite wechselt von Abschnitt zu Abschnitt. */
.service__inner { align-items: center; }
.service__inner--gedreht .service__text { order: 2; }
.service__inner--gedreht .service__bild { order: 1; }
.service__text .checklist { margin-top: 1.4rem; }

.service__bild { margin: 0; }
.service__bild img {
  width: 100%; height: auto; display: block;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-bild);
}
.service__bild figcaption {
  margin-top: .7rem; padding-left: .9rem;
  border-left: 3px solid var(--ws-lila);
  font-size: .88rem; color: var(--muted); line-height: 1.5;
}

.checklist { display: grid; gap: 10px; }
.checklist li { position: relative; padding-left: 1.75rem; }
.checklist li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--ws-tuerkis);
}

/* Breites Bildband, z. B. unter dem Kopf von /ueber-uns/ */
.bildband { padding-block: clamp(28px, 4vw, 44px) 0; }
.bildband__figur { margin: 0; }
.bildband__figur img,
.team-bild img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--border); border-radius: var(--radius-bild);
}
.bildband__figur figcaption,
.team-bild figcaption {
  margin-top: .7rem; padding-left: .9rem;
  border-left: 3px solid var(--ws-lila);
  font-size: .9rem; color: var(--muted); line-height: 1.5;
}

/* Team */
/* Foto unter der Ueberschrift "Die Menschen dahinter". Gleiche Optik wie das
   Bildband, sitzt aber im Abschnitt und haelt Abstand zu den Karten. */
.team-bild { margin: 0 0 clamp(20px, 3vw, 32px); }
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.team-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
.team-card__photo {
  width: 68px; height: 68px; border-radius: var(--radius); margin-bottom: 1.1rem;
  display: grid; place-items: center; background: var(--grad); color: #fff;
  font-size: 1.5rem; font-weight: 650; overflow: hidden;
}
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card__name { margin-bottom: .1em; }
.team-card__role { color: var(--accent2); font-weight: 500; font-size: .92rem; margin-bottom: .8em; }
.team-card__text { color: var(--muted); font-size: .95rem; margin: 0; }

/* Beiträge */
.posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.post-card { padding: 1.5rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.post-card__date { font-size: .84rem; color: var(--muted); margin-bottom: .5em; }
.post-card__title { font-size: 1.15rem; margin-bottom: .4em; }
.post-card__title a { color: var(--fg); }
.post-card__title a:hover { color: var(--accent-ink); text-decoration: none; }
.post-card__teaser { color: var(--muted); font-size: .95rem; }
.post-card__more { font-size: .92rem; font-weight: 500; }

/* ---------- Blog: Liste der Einblicke ----------
   Zeilen statt Kacheln – ein Beitrag soll wie ein Beitrag lesbar sein
   und nicht wie eine Produktkarte. */
.beitraege { display: grid; gap: 20px; }
.beitrag {
  display: grid; grid-template-columns: 280px 1fr; gap: clamp(20px, 3vw, 32px);
  align-items: start;
  padding-bottom: 20px; border-bottom: 1px solid var(--border);
}
.beitrag:last-child { border-bottom: 0; padding-bottom: 0; }
.beitrag:only-child { grid-template-columns: 340px 1fr; }

.beitrag__bild {
  display: block; overflow: hidden;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-bild);
}
.beitrag__bild img {
  width: 100%; height: 190px; object-fit: contain; object-position: center;
  padding: 10px; background: var(--card);
}
.beitrag__datum { font-size: .85rem; color: var(--muted); margin: 0 0 .45em; }
.beitrag__titel { font-size: clamp(1.25rem, 2.2vw, 1.5rem); margin-bottom: .4em; }
.beitrag__titel a { color: var(--fg); }
.beitrag__titel a:hover { color: var(--accent-ink); text-decoration: none; }
.beitrag__teaser { color: var(--muted); margin-bottom: .8rem; }
.beitrag__mehr { font-size: .95rem; font-weight: 500; }

/* ---------- Blog: einzelner Beitrag ---------- */
.page-head--article .kicker a { text-decoration: none; }
.page-head--article .kicker a:hover { text-decoration: underline; }

.prose--artikel { font-size: 1.04rem; }
.prose--artikel h2 {
  margin-top: 2.4em; font-size: 1.45rem;
  padding-top: 1.2rem; border-top: 1px solid var(--border);
}
.prose--artikel h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose--artikel h3 { margin-top: 1.8em; font-size: 1.12rem; color: var(--accent2); }
.prose--artikel p { margin-bottom: 1.15rem; }

/* Abbildung im Beitrag. Das Diagramm hat einen transparenten Hintergrund,
   deshalb steht es auf weisser Flaeche mit Innenabstand. */
.figur { margin: 2rem 0 2.2rem; }
.figur img {
  width: 100%; height: auto;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-bild);
  padding: clamp(10px, 2vw, 20px);
}
.figur figcaption {
  margin-top: .7rem; padding-left: .9rem;
  border-left: 3px solid var(--ws-lila);
  font-size: .9rem; color: var(--muted); line-height: 1.5;
}

.beitrag-footer { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; }
.beitrag-footer__text { margin: 0; color: var(--muted); font-size: .96rem; }

/* Fließtext */
.prose { max-width: 740px; }
.prose--narrow { max-width: 700px; }
.prose h2 { margin-top: 2em; font-size: 1.3rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.6em; }
.prose ul { list-style: disc; padding-left: 1.3em; margin-bottom: 1rem; }
.prose li { margin-bottom: .35em; }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.4rem; font-size: .95rem; background: var(--card); }
.prose th, .prose td { text-align: left; padding: .65rem .85rem; border-bottom: 1px solid var(--border); }
/* Tabellenkopf wie in der internen Anwendung: klein, uppercase, in Lila */
.prose th {
  background: var(--surface); font-size: .85rem; text-transform: uppercase;
  letter-spacing: .03em; color: var(--accent2);
}
.prose blockquote {
  margin: 1.5rem 0; padding: 0 0 0 1rem;
  border-left: 3px solid var(--ws-lila); color: var(--muted);
}
.prose__note {
  margin-top: 2.5rem; padding: 1rem 1.2rem;
  border: 1px solid var(--border); border-left: 4px solid var(--ws-lila);
  background: var(--accent2-soft); border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .92rem; color: var(--muted);
}

/* Kontakt */
/* Einspaltig und mittig. Bis zum 04.09.2026 standen hier zwei Spalten, rechts
   ein Formular; das ist entfallen (siehe templates/kontakt.html). Ein einzelnes
   Kind in einem 1fr-1.15fr-Raster waere links kleben geblieben und haette wie
   ein Fehler ausgesehen. */
.contact { max-width: 34rem; margin-inline: auto; text-align: center; }
/* Die Spalten des Rasters mittig setzen, aber die Beschriftungen darin links
   lassen - zentrierte dt/dd-Paare franst an beiden Raendern aus. */
.contact__list { display: grid; grid-template-columns: 100px 1fr; gap: 10px 16px; margin: 1.4rem 0; justify-content: center; text-align: left; }
.contact__list dt { font-weight: 600; color: var(--fg); font-size: .95rem; }
.contact__list dd { margin: 0; }
.contact__note { color: var(--muted); font-size: .94rem; }

/* Mittig als Block, linksbuendig in den Zeilen: `max-width: max-content` laesst
   die Liste nur so breit werden wie ihr laengster Punkt, `margin-inline: auto`
   setzt sie mittig, `text-align: left` holt die Zeilen darin nach links —
   vier zentrierte Aufzaehlungspunkte fransen an beiden Raendern aus.

   `max-width` und nicht `width`: ein `width: max-content` wuerde auf schmalen
   Telefonen ueber den Rand hinauslaufen, statt umzubrechen. Bei 390px bricht
   der laengste Punkt hier korrekt auf zwei Zeilen um. */
.contact__liste {
  max-width: max-content; margin: .6rem auto 0; text-align: left;
  list-style: none; padding: 0;
}
.contact__liste li {
  position: relative; padding-left: 1.35rem; margin-bottom: .45rem;
  font-size: .94rem; color: var(--muted);
}
/* Das kleine tuerkise Quadrat ist dasselbe Erkennungszeichen wie vor der
   Wortmarke im Kopf — deshalb ein Quadrat mit leicht gerundeter Ecke und
   nicht der runde Standardpunkt. */
.contact__liste li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--accent);
}

/* Derzeit ungenutzt: die Seite hat kein Formular (siehe
   templates/kontakt.html). Die Regeln bleiben stehen, weil sie den Kartenlook
   und die Feldgestaltung beschreiben, die es wieder braucht, sobald einmal ein
   Formular mit echtem Serverempfang dazukommt. */
.form { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); }
.form h2 { font-size: 1.25rem; margin-bottom: 1em; }
.form__row { display: grid; gap: 5px; margin-bottom: 14px; }
.form__row label { font-weight: 500; font-size: .92rem; color: var(--fg); }
.form input, .form select, .form textarea {
  font: inherit; font-size: .95rem; padding: .45rem .7rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card); color: var(--fg); width: 100%;
}
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring);
}
.form textarea { resize: vertical; }
.form__check { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--muted); margin-bottom: 20px; }
.form__check input { width: auto; margin-top: 3px; }

/* CTA */
.cta { background: var(--deep); color: #fff; position: relative; overflow: hidden; }
.cta::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--grad); z-index: 2;
}
.cta::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(620px 280px at 12% 115%, rgba(29, 158, 142, .32), transparent 65%),
              radial-gradient(560px 280px at 88% -15%, rgba(107, 63, 160, .38), transparent 65%);
}
.cta__inner { position: relative; z-index: 1; padding-block: clamp(48px, 6vw, 80px); text-align: center; max-width: 620px; margin-inline: auto; }
.cta__title { color: #fff; }
.cta__text { color: var(--on-deep); font-size: 1.05rem; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }

/* Footer */
.footer { background: var(--deep-2); color: var(--on-deep-dim); font-size: .94rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; padding-block: 48px 32px; }
.footer__name { color: #fff; font-weight: 600; font-size: 1.08rem; margin-bottom: .2em; display: inline-flex; align-items: center; gap: .55rem; }
.footer__name::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--ws-tuerkis); }
.footer__claim { color: var(--on-deep-dim); margin: 0; max-width: 250px; }
.footer__head {
  color: var(--lila-hell); font-weight: 600; font-size: .82rem;
  letter-spacing: .05em; text-transform: uppercase; margin-bottom: .9em;
}
.footer__list { display: grid; gap: 8px; }
.footer__list a { color: var(--on-deep); }
.footer__list a:hover { color: #fff; }
.footer__bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding-block: 18px; }
.footer__bottom p { margin: 0; font-size: .86rem; color: var(--on-deep-dim); }

/* ---------- 6. Responsive ---------- */
@media (max-width: 900px) {
  /* .contact stand hier mit in der Liste, ist aber kein Raster mehr. */
  .split, .service__inner, .featured__card,
  .hero__inner { grid-template-columns: 1fr; }
  .hero__bild { max-width: 380px; }
  .service__inner--gedreht .service__text,
  .service__inner--gedreht .service__bild { order: 0; }
  .beitrag, .beitrag:only-child { grid-template-columns: 1fr; }
  .beitrag__bild img { height: 200px; }
  .featured__side { border-left: 0; border-top: 1px solid var(--border); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 780px) {
  .header__inner { position: relative; }
  .nav-toggle { display: grid; }
  .nav {
    position: absolute; left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1); top: calc(100% + 3px);
    background: var(--card); border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    display: none; padding: 10px var(--gutter) 18px;
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__list a { padding: .7rem .75rem; }
  .nav__list .btn { margin-top: 8px; justify-content: center; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .footer__grid { grid-template-columns: 1fr; gap: 24px; }
  /* Einspaltig ist die 100px-Beschriftungsspalte weg, und mit ihr der Grund
     fuer die Linksbuendigkeit: die Spalte fuellt jetzt die ganze Breite und
     stand als einziger Block linksbuendig in einer sonst mittigen Seite. */
  .contact__list { grid-template-columns: 1fr; gap: 2px 0; text-align: center; }
  .contact__list dd { margin-bottom: 12px; }
  .hero__actions .btn, .cta__actions .btn { flex: 1 1 100%; }
  .featured-card { flex-direction: column; gap: .9rem; }
}

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