/* ============================================================
   Institut ANWA — Designsystem
   Dunkelblau & Weiß · eine Schriftfamilie: Helvetica
   Überschriften Versal · nur die Vereinsfarben, keine Zusatzfarben
   ============================================================ */

/* ---------- Farben und Maße ---------- */
:root {
  --navy:        #1a365d;   /* ANWA Navy, Corporate-Design-Manual */
  --navy-tief:   #12263f;
  --blau:        #2b6cb0;   /* ANWA Blau, Corporate-Design-Manual */
  --blau-hell:   #e7eef7;
  --text:        #2d3748;   /* Slate, Corporate-Design-Manual */
  --text-leise:  #5a6b80;
  --weiss:       #ffffff;
  --grund:       #ffffff;
  --hell:        #eff4fa;   /* heller Blauton für abwechselnde Flächen */
  --linie:       rgba(26, 54, 93, 0.15);

  /* Einziger Akzent: ANWA Blau */
  --akzent:      #2b6cb0;

  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --breit:  78rem;
  --lesen:  40rem;
  --luft:   clamp(4rem, 8vw, 8rem);
  --rand:   clamp(1.25rem, 5vw, 3.5rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--sans);
  font-size: clamp(1.0625rem, 0.98rem + 0.28vw, 1.1875rem);
  line-height: 1.66;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--navy); color: var(--weiss); }

/* ---------- Typografie ---------- */
h1, h2, h3, .versal {
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0;
  hyphens: none;
}

h1 {
  font-size: clamp(2.3rem, 1rem + 5.6vw, 4.9rem);
  line-height: 1.04;
  letter-spacing: 0.004em;
  word-spacing: 0.05em;
}
h2 {
  font-size: clamp(1.55rem, 0.9rem + 2.4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: 0.012em;
}
h3 {
  font-size: clamp(1.1rem, 0.92rem + 0.7vw, 1.4rem);
  line-height: 1.24;
  letter-spacing: 0.035em;
}

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: var(--blau); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: var(--navy); }
strong { font-weight: 700; }

.kicker {
  font-size: 0.76rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--akzent); margin: 0 0 1rem; display: block;
}
.vorspann {
  font-size: clamp(1.18rem, 1rem + 0.7vw, 1.45rem);
  line-height: 1.5; color: var(--navy); font-weight: 400;
}
.leise { color: var(--text-leise); }
.linie { border: 0; border-top: 1px solid var(--linie); margin: 0; }

/* ---------- Gerüst ---------- */
.huelle { max-width: var(--breit); margin-inline: auto; padding-inline: var(--rand); }
.lesespalte { max-width: var(--lesen); }
section { padding-block: var(--luft); }

.feld-blau  { background: var(--navy); color: rgba(255,255,255,0.88); }
.feld-blau h1, .feld-blau h2, .feld-blau h3 { color: var(--weiss); }
.feld-blau .kicker { color: #8fb8e4; }
.feld-blau a { color: var(--weiss); }
.feld-blau a.knopf--hell { color: var(--navy); }
.feld-blau a.knopf--hell:hover { color: var(--weiss); }
.feld-hell  { background: var(--hell); }
.feld-weiss { background: var(--weiss); }

.sprungmarke {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: 0.9rem 1.4rem; font-size: 0.9rem;
}
.sprungmarke:focus { left: 0; }

:where(a, button, input, textarea, summary):focus-visible {
  outline: 3px solid var(--blau); outline-offset: 3px; border-radius: 2px;
}

/* ---------- Kopfzeile ---------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  /* Kein backdrop-filter: er würde das ausklappbare Menü in die Kopfzeile einsperren. */
  background: rgba(255,255,255,0.96);
  border-bottom: 1px solid var(--linie);
}

/* ---------- Startseite: Kopfzeile erscheint erst beim Scrollen ----------
   Das Titelbild soll ungestört wirken. Die Kopfzeile liegt deshalb dort als
   schwebende Leiste über dem Inhalt (nicht klebend) und fährt von oben herein,
   sobald jemand scrollt. Ohne JavaScript bleibt alles beim Alten — die Regeln
   hängen an .js, das ganz oben im Dokument gesetzt wird. */
.js .startseite .kopf {
  position: fixed; left: 0; right: 0; top: 0;
  transform: translateY(-100%); opacity: 0; pointer-events: none;
  transition: transform .45s cubic-bezier(.2,.7,.3,1), opacity .3s ease;
}
/* :focus-within holt die Leiste auch für alle herein, die mit der Tastatur
   navigieren — sonst wäre das Menü für sie unerreichbar. */
.js .startseite.gescrollt .kopf,
.js .startseite.tastatur .kopf,
.js .startseite .kopf:focus-within {
  transform: none; opacity: 1; pointer-events: auto;
}
/* Sprungziele nicht unter die schwebende Leiste rutschen lassen */
.js .startseite [id] { scroll-margin-top: 5rem; }

/* ---------- Hinweis zum Weiterscrollen ---------- */
.scrollhinweis {
  /* Bewusst im normalen Textfluss statt absolut positioniert: So kann er auf
     keiner Bildschirmbreite über den Knöpfen darüber liegen. */
  position: relative; z-index: 2;
  margin: clamp(2.6rem, 6vw, 4.2rem) auto 0; width: max-content;
  display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(255,255,255,0.7);
  transition: opacity .4s ease, transform .4s ease;
}
.gescrollt .scrollhinweis { opacity: 0; transform: translateY(0.8rem); }
.scrollhinweis__bahn {
  position: relative; width: 1px; height: clamp(2.4rem, 5vw, 3.4rem);
  background: rgba(255,255,255,0.25); overflow: hidden;
}
.scrollhinweis__bahn::after {
  content: ''; position: absolute; left: 0; width: 1px; height: 42%;
  background: #fff; animation: rutschen 2.1s cubic-bezier(.45,0,.2,1) infinite;
}
@keyframes rutschen {
  0%   { top: -42%; opacity: 0; }
  22%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
/* Ab Tabletbreite bekommt der Titelbereich die Proportion des Bildes: Die Höhe
   folgt der Breite, statt mit dem Text zu wachsen. Dadurch bleibt das Motiv
   ganz im Bild und die Schrift steht auf der ruhigen linken Seite. */
@media (min-width: 62rem) {
  .startseite .titel {
    display: grid; align-content: center; position: relative;
    min-height: min(70vh, 44vw);
    padding-block: clamp(2rem, 4vw, 3rem);
  }
  /* Der Scroll-Hinweis liegt hier außerhalb des Textflusses. Im Fluss machte er
     den Titelbereich 124 Pixel höher — und jede zusätzliche Höhe beschneidet
     das breite Bild weiter. */
  .startseite .scrollhinweis {
    position: absolute; left: auto; right: var(--rand);
    bottom: clamp(0.9rem, 2vw, 1.6rem);
    transform: none; margin: 0;
  }
  .startseite.gescrollt .scrollhinweis { transform: translateY(0.8rem); }
}

/* ---------- Titelbild auf schmalen Bildschirmen ----------
   Als Hintergrund hinter dem Text geht das Motiv verloren: Der Textblock ist am
   Handy rund 700 Pixel hoch, das Bild aber breit. Gemessen waren nur 23 % des
   Bildes zu sehen, 4,2-fach vergrößert — vom Tauziehen blieben Finger übrig.
   Deshalb bekommt das Bild hier eine eigene Fläche im richtigen Seitenverhältnis
   und der Text steht darunter auf Dunkelblau. So ist das Motiv erkennbar und die
   Schrift ohne Schleier lesbar. */
@media (max-width: 46rem) {
  .startseite .titel { padding-top: 0; }
  .startseite .titel__bild {
    position: relative; inset: auto; z-index: 0;
    aspect-ratio: 16 / 7;
    margin-bottom: clamp(1.7rem, 5vw, 2.6rem);
  }
  .startseite .titel__bild img { height: 100%; object-position: center 50%; }
  .startseite .titel::after { display: none; }
}

/* Auf schmalen Bildschirmen ist der Titelbereich hoch. Damit der Hinweis nicht
   unter die Kante rutscht, wird oben Platz gespart — die Kopfzeile ist dort
   ohnehin ausgeblendet — und der Hinweis selbst kompakter gesetzt. */
@media (max-width: 46rem) {
  .startseite .titel { padding-top: 2rem; }
  .scrollhinweis { margin-top: 1.5rem; gap: 0.5rem; }
  .scrollhinweis__bahn { height: 1.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .js .startseite .kopf { transition: none; }
  .scrollhinweis { transition: none; }
  .scrollhinweis__bahn::after { animation: none; top: 29%; }
}
.kopf__inner {
  max-width: var(--breit); margin-inline: auto; padding: 0.8rem var(--rand);
  display: flex; align-items: center; gap: 1.5rem;
}
.kopf__logo { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; margin-right: auto; }
.kopf__logo img { width: 40px; height: auto; }
.kopf__wortmarke {
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.84rem; color: var(--navy); line-height: 1.25;
}
.kopf__wortmarke span {
  display: block; font-weight: 400; font-size: 0.6rem;
  letter-spacing: 0.1em; color: var(--text-leise);
}

.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a {
  font-size: 0.85rem; font-weight: 500; letter-spacing: 0.055em;
  color: var(--navy); text-decoration: none;
  padding-block: 0.4rem; border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--blau); }
.nav a.knopf { color: var(--weiss); border-bottom: 2px solid var(--navy); }
.nav a.knopf:hover { color: var(--weiss); border-bottom-color: var(--blau); }
.nav-schalter { display: none; }

/* ---------- Schaltflächen ---------- */
.knopf {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.88rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.95rem 1.7rem; border: 2px solid var(--navy);
  background: var(--navy); color: var(--weiss); text-decoration: none; cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
}
.knopf:hover { background: var(--blau); border-color: var(--blau); color: #fff; transform: translateY(-2px); }
.knopf--offen { background: transparent; color: var(--navy); }
.knopf--offen:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.knopf--hell { background: var(--weiss); border-color: var(--weiss); color: var(--navy); }
.knopf--hell:hover { background: transparent; color: var(--weiss); border-color: var(--weiss); }
.knopf--klein { padding: 0.6rem 1.1rem; font-size: 0.76rem; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 0.9rem 1.1rem; align-items: center; }

.weiter {
  font-size: 0.83rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--navy); text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.5rem;
  border-bottom: 2px solid var(--akzent); padding-bottom: 0.28rem;
}
.weiter::after { content: '→'; transition: transform .2s ease; }
.weiter:hover::after { transform: translateX(5px); }
.feld-blau .weiter { color: #fff; border-bottom-color: rgba(255,255,255,0.55); }

/* ---------- Titelbereich mit Bild ---------- */
.titel {
  position: relative; isolation: isolate; color: #fff;
  /* Flach halten: Je höher dieser Bereich im Verhältnis zu seiner Breite ist,
     desto stärker wird das breite Titelbild beschnitten. Bei 904 Pixel Höhe auf
     488 Breite waren nur 23 % des Bildes zu sehen — das Motiv war nicht mehr
     erkennbar. */
  padding-block: clamp(2.6rem, 6vw, 5rem) clamp(2.2rem, 4.5vw, 3.75rem);
  background: var(--navy);
}
.titel__bild { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.titel__bild img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
/* Startseite: Das Titelbild ist so aufgebaut, dass die linke Hälfte ruhig ist
   (unscharfe Wiese) und rechts die Hände am Seil liegen. Gemessen: links ist die
   Bildunruhe 2,9, in der Mitte und rechts 4,1 bis 5,0. Das Bild bringt sein
   Freifeld für die Schrift also selbst mit — es darf nur nicht weggeschnitten
   werden. Deshalb bekommt der Titelbereich unten eine Mindesthöhe, die sich nach
   der Breite richtet, statt beliebig mit dem Text zu wachsen. */
.startseite .titel__bild img { object-position: 58% 50%; }
.titel::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  /* Die Abdeckung folgt der Form des Textes statt einfach von links nach rechts
     zu verlaufen. Der frühere gerade Verlauf wurde genau dort hell, wo die
     breiten Überschriften noch hinreichen — er musste deshalb überall dunkel
     bleiben und das Bild war praktisch unsichtbar.

     Drei Profile, weil der Text je nach Bildschirmbreite unterschiedlich viel
     Platz einnimmt: Am Handy füllt er fast alles, am Rechner nur die linke
     Hälfte — dort darf am meisten Bild durch.

     Nachgerechnet für alle 14 Kopfbilder und vier Bildschirmbreiten.
     Grenzwerte: Überschrift 3,0 · Fließtext 4,5.
     Handy   Überschrift 13,01 · Fließtext 6,59
     Tablet  Überschrift  4,47 · Fließtext 4,95
     Rechner Überschrift  3,84 · Fließtext 9,00
     Wird ein Kopfbild getauscht, gehört das neu gemessen. */
  background: radial-gradient(122% 54% at 47% 41%,
      rgba(12,30,55,0.95) 0%,
      rgba(12,30,55,0.91) 72%,
      rgba(12,30,55,0.50) 89%,
      rgba(12,30,55,0.16) 100%);
}
@media (min-width: 48rem) {
  .titel::after {
    background: radial-gradient(108% 56% at 21% 45%,
        rgba(12,30,55,0.95) 0%,
        rgba(12,30,55,0.92) 72%,
        rgba(12,30,55,0.48) 92%,
        rgba(12,30,55,0.15) 100%);
  }
}
@media (min-width: 62rem) {
  .titel::after {
    background: radial-gradient(98% 58% at 9.5% 46%,
        rgba(12,30,55,0.94) 0%,
        rgba(12,30,55,0.91) 67%,
        rgba(12,30,55,0.44) 90%,
        rgba(12,30,55,0.10) 98%,
        rgba(12,30,55,0.03) 100%);
  }
}
.titel h1 { color: #fff; max-width: 17ch; }
/* Auf der Startseite darf die Überschrift breiter laufen: Bei 17 Zeichen bricht
   sie vierzeilig, der Titelbereich wird dadurch hoch — und je höher er ist,
   desto stärker beschneidet er das breite Titelbild. */
@media (min-width: 46rem) { .startseite .titel h1 { max-width: 24ch; } }
@media (min-width: 62rem) {
  .startseite .titel__unter { max-width: 40rem; }
  .startseite .titel__text { max-width: 42rem; }
}
.titel__marke {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: #9fc4ec; display: flex; align-items: center; gap: 1rem;
  margin-bottom: clamp(1.5rem, 4vw, 2.6rem); max-width: 46rem;
}
.titel__marke::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.3); }
.titel__unter {
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.9rem); font-weight: 400;
  letter-spacing: 0.02em; color: #cfe1f5; margin-top: 1.1rem;
}
.titel__text { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); max-width: 34rem; color: rgba(255,255,255,0.9); }
.titel__aktion { margin-top: clamp(1.9rem, 4vw, 2.6rem); }

/* ---------- Projektzeilen ---------- */
.projekt {
  display: grid; gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: 1fr; align-items: center;
  padding-block: clamp(2.25rem, 4.5vw, 3.75rem);
  border-top: 1px solid var(--linie);
}
.projekt:first-of-type { border-top: 0; padding-top: 0; }
@media (min-width: 62rem) {
  .projekt { grid-template-columns: 1fr 1.02fr; }
  .projekt--gedreht .projekt__bild { order: 2; }
}
.projekt__bild { position: relative; overflow: hidden; background: var(--blau-hell); box-shadow: 0 0 0 1px var(--linie); }
.projekt__bild img { width: 100%; transition: transform .7s cubic-bezier(.2,.7,.3,1); }
.projekt:hover .projekt__bild img { transform: scale(1.035); }
.projekt__zahl {
  font-weight: 700; font-size: 0.74rem; letter-spacing: 0.2em;
  color: var(--akzent); display: inline-flex; align-items: center; gap: 0.7rem; margin-bottom: 0.9rem;
}
.projekt__zahl::before { content: ''; width: 2.2rem; height: 3px; background: var(--akzent); }
.projekt h3 { margin-bottom: 0.9rem; }
.projekt__text { max-width: 34rem; }
.projekt__mehr { margin-top: 1.5rem; }

/* ---------- Kacheln ---------- */
.raster {
  display: grid; gap: 1px; background: var(--linie);
  border: 1px solid var(--linie); margin-top: clamp(2rem, 4.5vw, 3.25rem);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .raster--drei { grid-template-columns: repeat(3, 1fr); } }
.kachel {
  background: var(--weiss); padding: clamp(1.5rem, 2.8vw, 2.25rem);
  display: flex; flex-direction: column; gap: 0.7rem;
  text-decoration: none; color: inherit; transition: background .2s ease, border-color .2s ease;
  border-top: 4px solid transparent;
}
a.kachel:hover { background: var(--blau-hell); border-top-color: var(--akzent); }
/* Die Spendenkachel ist ein Formular, sieht aber aus wie jede andere Kachel. */
.kachel--spende { margin: 0; }
.kachel--spende:hover { background: var(--blau-hell); border-top-color: var(--akzent); }
button.kachel__weiter {
  border: 0; background: none; padding: 0.5rem 0 0; margin-top: auto;
  font-family: inherit; text-align: left; cursor: pointer;
}
button.kachel__weiter:hover { text-decoration: underline; }
.kachel h3 { font-size: 1rem; letter-spacing: 0.04em; }
.kachel p { font-size: 0.98rem; line-height: 1.55; color: var(--text-leise); margin: 0; }
.kachel__weiter {
  margin-top: auto; padding-top: 0.5rem;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--akzent);
}

/* ---------- Zitat ---------- */
.zitat { max-width: 44rem; margin-inline: auto; text-align: center; }
.zitat blockquote {
  margin: 0; font-size: clamp(1.3rem, 1rem + 1.4vw, 2.05rem);
  line-height: 1.34; font-weight: 700; letter-spacing: 0.005em; color: var(--navy);
}
.feld-blau .zitat blockquote { color: #fff; }
.zitat figcaption {
  margin-top: 1.5rem; font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--akzent);
}
.feld-blau .zitat figcaption { color: #8fb8e4; }

/* ---------- Gesprächsangebot ---------- */
.angebot { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: 1fr; }
@media (min-width: 58rem) { .angebot { grid-template-columns: 1.05fr 0.95fr; align-items: start; } }
.angebot__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.angebot__liste li { display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: baseline; }
.angebot__liste li::before { content: ''; width: 0.5rem; height: 0.5rem; background: #8fb8e4; transform: translateY(-0.15rem); }
.hinweis {
  font-size: 0.98rem; line-height: 1.55; color: rgba(255,255,255,0.72);
  border-left: 3px solid #8fb8e4; padding-left: 1.05rem; margin-top: 1.9rem;
}

/* ---------- Mitwirken ---------- */
.saeulen { display: grid; gap: clamp(1.5rem, 3.5vw, 2.75rem); grid-template-columns: 1fr; margin-top: clamp(2rem, 4.5vw, 3.25rem); }
@media (min-width: 52rem) { .saeulen { grid-template-columns: repeat(2, 1fr); } }
.saeule { background: var(--weiss); border-top: 4px solid var(--navy); padding: clamp(1.6rem, 3vw, 2.4rem); }
.saeule h3 { margin-bottom: 0.7rem; }
.saeule__preis { font-weight: 700; font-size: 1.02rem; letter-spacing: 0.05em; color: var(--akzent); margin-bottom: 0.9rem; }

/* ---------- Formular ---------- */
.anmeldung { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 58rem) { .anmeldung { grid-template-columns: 1fr 1fr; } }
.formular {
  display: grid; gap: 1rem; max-width: 32rem;
  background: var(--weiss); padding: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 4px solid var(--blau);
}
.feld { display: grid; gap: 0.4rem; }
.feld label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); }
.feld input[type="text"], .feld input[type="email"] {
  font-family: var(--sans); font-size: 1rem; padding: 0.8rem 0.95rem;
  border: 1px solid var(--linie); background: var(--grund); color: var(--text); border-radius: 0;
}
.feld input:focus { border-color: var(--blau); background: #fff; }
.zustimmung { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; font-size: 0.95rem; line-height: 1.45; }
.zustimmung input { margin-top: 0.3rem; width: 1.05rem; height: 1.05rem; accent-color: var(--navy); }
.honigtopf { position: absolute; left: -9999px; }

/* ---------- Zierband ---------- */
.geflecht { display: block; width: 100%; opacity: 0.45; }

/* ---------- Fußzeile ---------- */
.fuss { background: var(--navy-tief); color: rgba(255,255,255,0.75); padding-block: clamp(3.25rem, 6vw, 5rem) 2.25rem; font-size: 0.97rem; }
.fuss a { color: rgba(255,255,255,0.88); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.25); }
.fuss a:hover { color: #fff; border-bottom-color: #fff; }
.fuss__raster { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 46rem) { .fuss__raster { grid-template-columns: 1.4fr 1fr 1fr; } }
.fuss__titel { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; color: #fff; margin-bottom: 1rem; }
.fuss__logo { width: 52px; margin-bottom: 1.15rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.fuss__schluss {
  margin-top: clamp(2.25rem, 4.5vw, 3.5rem); padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,0.16);
  display: flex; flex-wrap: wrap; gap: 0.7rem 2rem; justify-content: space-between;
  font-size: 0.9rem; color: rgba(255,255,255,0.58);
}

/* ---------- Sanftes Erscheinen ---------- */
.js .auftritt { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.js .auftritt.da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .auftritt { opacity: 1; transform: none; transition: none; }
  .projekt__bild img, .knopf, .weiter::after { transition: none !important; }
}

/* ---------- Handy: Menü ---------- */
@media (max-width: 61.99rem) {
  .nav-schalter {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    background: none; border: 0; color: var(--navy); cursor: pointer; padding: 0.5rem 0;
    font-family: var(--sans);
  }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(21rem, 86vw);
    background: var(--navy); flex-direction: column; align-items: flex-start;
    justify-content: center; gap: 1.4rem; padding: 2rem var(--rand);
    transform: translateX(100%); transition: transform .32s cubic-bezier(.4,0,.2,1); z-index: 60;
  }
  .nav[data-offen="true"] { transform: none; }
  .nav a { color: #fff; font-size: 1.1rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
  .nav a.knopf { border-color: #fff; background: #fff; color: var(--navy); }
  .nav a.knopf:hover { background: transparent; color: #fff; }
  .nav__schliessen {
    position: absolute; top: 1.1rem; right: var(--rand);
    background: none; border: 0; color: #fff; font-size: 1.9rem; line-height: 1; cursor: pointer;
  }
  .titel__bild img { object-position: center 30%; }
}
@media (min-width: 62rem) { .nav__schliessen { display: none; } }

/* ---------- Schritte / Pflichtpunkte ---------- */
.schritte { counter-reset: schritt; display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); margin-top: clamp(2rem,4.5vw,3rem); list-style: none; padding: 0; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .schritte { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .schritte { grid-template-columns: repeat(4, 1fr); } }
.schritte li {
  counter-increment: schritt; background: var(--weiss);
  padding: clamp(1.4rem, 2.6vw, 1.9rem); display: grid; gap: 0.5rem; align-content: start;
}
.schritte li::before {
  content: counter(schritt, decimal-leading-zero);
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.18em; color: var(--akzent);
}
.schritte b { display: block; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.035em; color: var(--navy); }
.schritte span { font-size: 0.97rem; line-height: 1.55; color: var(--text-leise); }

/* ---------- Fakten ---------- */
.fakten { display: grid; gap: clamp(1.25rem,3vw,2.5rem); grid-template-columns: 1fr; margin-top: clamp(2rem,4vw,2.75rem); }
@media (min-width: 46rem) { .fakten { grid-template-columns: repeat(3, 1fr); } }
.fakt { border-top: 3px solid var(--akzent); padding-top: 1rem; }
.fakt b { display: block; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 700; color: var(--navy); line-height: 1.05; letter-spacing: 0.005em; }
.fakt span { display: block; margin-top: 0.5rem; font-size: 0.97rem; color: var(--text-leise); line-height: 1.5; }

/* ---------- Weitere Projekte (kompakt) ---------- */
.mini-raster { display: grid; gap: clamp(1.25rem,3vw,2rem); grid-template-columns: 1fr; margin-top: clamp(2rem,4.5vw,3rem); }
@media (min-width: 48rem) { .mini-raster { grid-template-columns: repeat(3, 1fr); } }
.mini { display: block; text-decoration: none; color: inherit; background: var(--weiss); box-shadow: 0 0 0 1px var(--linie); transition: transform .2s ease, box-shadow .2s ease; }
.mini:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--akzent); }
/* Die Kacheln zeigen Fotos und flache Grafiken nebeneinander. Damit alle
   vier gleich hoch bleiben, bekommen sie ein gemeinsames Seitenverhältnis;
   die Fotos werden dafür beschnitten, die Grafiken bleiben vollständig. */
.mini img { width: 100%; display: block; aspect-ratio: 520 / 293; object-fit: cover; }
.mini__text { padding: clamp(1.1rem,2.2vw,1.5rem); }
.mini__zahl { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--akzent); display: block; margin-bottom: 0.5rem; }
.mini h3 { font-size: 0.98rem; letter-spacing: 0.04em; margin-bottom: 0.45rem; }
.mini p { font-size: 0.94rem; line-height: 1.5; color: var(--text-leise); margin: 0; }

/* ---------- Zweispalter mit Bild ---------- */
.duo { display: grid; gap: clamp(1.75rem,4vw,3.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 58rem) { .duo { grid-template-columns: 0.9fr 1.1fr; } }
.duo__bild { box-shadow: 0 0 0 1px var(--linie); overflow: hidden; }

/* Zeilenumbrüche in Überschriften nur auf breiten Bildschirmen */
.nurgross { display: none; }
@media (min-width: 46rem) { .nurgross { display: inline; } }

/* ---------- Zahlen-Grafiken ---------- */
.zahlen { display: grid; gap: clamp(1.5rem,3.5vw,2.75rem); grid-template-columns: 1fr; margin-top: clamp(2.25rem,5vw,3.5rem); align-items: center; }
@media (min-width: 44rem) { .zahlen { grid-template-columns: repeat(2, 1fr); } }
.zahl { background: var(--weiss); box-shadow: 0 0 0 1px var(--linie); padding: clamp(1.5rem,3vw,2.25rem); display: flex; align-items: center; justify-content: center; min-height: 11rem; }
.zahl img { width: 100%; height: auto; max-height: 15rem; object-fit: contain; }
.zahl--breit { grid-column: 1 / -1; }
.zahl--hoch img { max-height: 21rem; }

/* ---------- Vorteile ---------- */
.vorteile { display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); margin-top: clamp(2rem,4.5vw,3rem); grid-template-columns: 1fr; }
@media (min-width: 44rem) { .vorteile { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .vorteile { grid-template-columns: repeat(4, 1fr); } }
.vorteil { background: var(--weiss); padding: clamp(1.5rem,2.8vw,2.1rem); display: grid; gap: 0.6rem; align-content: start; }
.vorteil b { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--navy); }
.vorteil span { font-size: 0.97rem; line-height: 1.55; color: var(--text-leise); }
.vorteil::before { content: ''; width: 2.2rem; height: 3px; background: var(--akzent); }

/* ---------- Befunde: Zahl als echter Text, Grafik als Illustration ---------- */
.befunde {
  display: grid; gap: 1px; background: var(--linie);
  border: 1px solid var(--linie); margin-top: clamp(2.25rem,5vw,3.25rem);
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) { .befunde { grid-template-columns: repeat(2, 1fr); } }

.befund {
  background: var(--weiss); padding: clamp(1.75rem,3.2vw,2.5rem);
  display: grid; gap: 0.85rem; align-content: start;
  grid-template-rows: auto auto auto 1fr;
}
.befund__bild { height: 6.5rem; display: flex; align-items: center; }
.befund__bild img { height: 100%; width: auto; max-width: 100%; }
.befund__bild--weit img { height: auto; width: 100%; max-height: 6.5rem; object-fit: contain; object-position: left center; }
.befund__zahl {
  font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem); font-weight: 700;
  line-height: 0.95; letter-spacing: -0.01em; color: var(--navy);
  display: block;
}
.befund__satz { font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.15rem); line-height: 1.5; color: var(--text); margin: 0; }
.befund__quelle {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-leise); margin: 0; align-self: end;
}
/* Karten ohne Illustration: die Zahl selbst wird zum Bild */
.befund--zahl .befund__zahl { font-size: clamp(3.4rem, 2rem + 5vw, 6.4rem); }
.befund--zahl { align-content: center; }

/* ---------- Der Wendepunkt ---------- */
.wende { display: grid; gap: clamp(1.75rem,4vw,3.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 52rem) { .wende { grid-template-columns: 14rem 1fr; } }
.wende__bild img { width: 100%; max-width: 14rem; height: auto; }
.wende__zahl {
  font-size: clamp(3.2rem, 2rem + 4.6vw, 5.6rem); font-weight: 700; line-height: 0.95;
  letter-spacing: -0.01em; color: var(--navy); display: block; margin-bottom: 0.6rem;
}

/* ---------- Titelbereich der Unterseiten (flacher als die Startseite) ---------- */
.titel--seite { padding-block: clamp(3.5rem, 9vw, 7rem) clamp(2.75rem, 6vw, 5rem); }
.titel--seite h1 { max-width: 20ch; }

/* ---------- Stimmen ---------- */
.stimmen { display: grid; gap: clamp(1.5rem,3.5vw,2.5rem); grid-template-columns: 1fr; margin-top: clamp(2.25rem,5vw,3.25rem); }
@media (min-width: 52rem) { .stimmen { grid-template-columns: repeat(3, 1fr); } }
.stimme { background: transparent; padding: 0 0 0 clamp(1.1rem,2.6vw,1.8rem); display: grid; gap: clamp(0.9rem,2vw,1.3rem); align-content: start; }
.stimme blockquote { margin: 0; border: 0; padding: 0; font-size: 1.04rem; line-height: 1.55; color: var(--text); }
.stimme figcaption { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--akzent); }
.stimme figcaption span { display: block; font-weight: 400; letter-spacing: 0.05em; color: var(--text-leise); margin-top: 0.25rem; }

/* ---------- Drei Spalten mit Text ---------- */
.spalten { display: grid; gap: clamp(1.5rem,3.5vw,2.75rem); grid-template-columns: 1fr; margin-top: clamp(2rem,4.5vw,3rem); }
@media (min-width: 46rem) { .spalten--zwei { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 52rem) { .spalten--drei { grid-template-columns: repeat(3,1fr); } }
.spalte { border-top: 3px solid var(--akzent); padding-top: 1.1rem; }
.spalte h3 { margin-bottom: 0.6rem; }
.spalte p { font-size: 1rem; line-height: 1.55; color: var(--text-leise); margin: 0; }


/* ---------- Raster ohne Lücken -----------------------------------------
   Statt einer grauen Fläche hinter dem Raster bekommt jede Karte ihre eigene
   Umrandung. Ist die letzte Reihe nicht voll, bleibt dort einfach nichts —
   kein grauer Kasten.
----------------------------------------------------------------------- */
.schritte, .befunde, .raster, .vorteile { background: transparent; border: 0; }
.schritte > li, .befunde > .befund, .raster > .kachel, .vorteile > .vorteil {
  box-shadow: 0 0 0 1px var(--linie);
}

/* ---------- Rechtstexte ---------- */
.rechtstext { max-width: 46rem; }
.rechtstext h2 { font-size: clamp(1.2rem,1rem+1vw,1.6rem); margin-top: clamp(2.5rem,5vw,3.5rem); margin-bottom: 0.9rem; }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext h3 { font-size: clamp(0.95rem,0.9rem+0.3vw,1.08rem); margin-top: 1.9rem; margin-bottom: 0.5rem; color: var(--blau); }
.rechtstext p { font-size: 1rem; line-height: 1.68; margin-bottom: 1rem; }
.hinweis-kasten { border-left: 3px solid var(--blau); padding: 0.9rem 0 0.9rem 1.1rem; background: var(--hell); margin-top: 2rem; }

/* ---------- Formularergänzungen ---------- */
.feld textarea {
  font-family: var(--sans); font-size: 1rem; padding: 0.8rem 0.95rem;
  border: 1px solid var(--linie); background: var(--grund); color: var(--text);
  border-radius: 0; resize: vertical; min-height: 7rem;
}
.feld textarea:focus { border-color: var(--blau); background: #fff; }
.feld__hinweis { font-size: 0.85rem; color: var(--text-leise); }

/* ---------- Riesiges Logo als Hintergrund (Kontaktseite) ---------- */
.titel--logo { background: var(--navy); overflow: hidden; }
.titel--logo::after { display: none; }
.titel__zeichen {
  position: absolute; z-index: -1; pointer-events: none; user-select: none;
  right: -24%; top: 50%; transform: translateY(-50%);
  width: min(52rem, 82vw); height: auto; opacity: 0.085;
}
@media (max-width: 61.99rem) {
  .titel__zeichen { right: -44%; opacity: 0.07; width: min(40rem, 112vw); }
}


/* ---------- Riesiger Schriftzug in der Fußzeile ---------- */
.fuss { position: relative; overflow: hidden; }
.fuss > .huelle { position: relative; z-index: 1; }
.fuss__zeichen {
  position: absolute; left: 50%; bottom: -0.30em; transform: translateX(-50%);
  font-family: var(--sans); font-weight: 700; letter-spacing: 0.02em;
  font-size: clamp(9rem, 31vw, 27rem); line-height: 0.78; white-space: nowrap;
  color: #ffffff; opacity: 0.05; pointer-events: none; user-select: none; z-index: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .fuss__zeichen { transition: opacity .4s ease; }
}

/* ---------- Diagramme ----------
   Die SVGs stehen direkt im Dokument, nicht als Bilddatei: So bleiben ihre
   Zahlen echter Text — lesbar für Suchmaschinen, Vorleseprogramme und alle,
   die die Schrift vergrößern. */
.diagramm__rahmen {
  margin: clamp(2.2rem, 4.5vw, 3.4rem) 0 0;
  padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1rem, 2.5vw, 2rem);
  background: var(--weiss); box-shadow: 0 0 0 1px var(--linie);
}
.feld-hell .diagramm__rahmen { background: var(--weiss); }
.diagramm { display: block; width: 100%; height: auto; }
/* Ein SVG wird mitskaliert: Was am Rechner 12 Pixel misst, wäre am Handy noch
   vier. Deshalb zwei Fassungen mit unterschiedlich großem Koordinatensystem —
   hier wird die passende gezeigt. */
.diagramm--breit  { display: none; }
.diagramm--schmal { display: block; }
@media (min-width: 46rem) {
  .diagramm--breit  { display: block; }
  .diagramm--schmal { display: none; }
}
.diagramm__rahmen figcaption {
  margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--linie);
  font-size: 0.78rem; line-height: 1.5; color: var(--text-leise);
}

/* Die Zahlen zum Aufklappen — für alle, die das Diagramm nicht sehen können */
.zahlenwerk { margin-top: 1.6rem; }
.zahlenwerk summary {
  cursor: pointer; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--akzent); padding: 0.4rem 0;
}
.zahlenwerk summary:hover { text-decoration: underline; }
.zahlenwerk table {
  width: 100%; max-width: 26rem; margin-top: 1rem;
  border-collapse: collapse; font-size: 0.94rem; font-variant-numeric: tabular-nums;
}
.zahlenwerk caption {
  caption-side: bottom; margin-top: 0.9rem; font-size: 0.78rem;
  line-height: 1.5; color: var(--text-leise); text-align: left;
}
.zahlenwerk th, .zahlenwerk td { padding: 0.45rem 0.9rem 0.45rem 0; text-align: left; }
.zahlenwerk td { text-align: right; padding-right: 0; }
.zahlenwerk thead th {
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-leise); border-bottom: 1px solid var(--linie);
}
.zahlenwerk thead th:last-child { text-align: right; }
.zahlenwerk tbody th { font-weight: 400; color: var(--text-leise); }
.zahlenwerk tbody tr + tr th, .zahlenwerk tbody tr + tr td { border-top: 1px solid var(--linie); }


/* ============================================================================
   DESIGNRICHTUNG 06 — MUTIGE TYPOGRAFIE
   ----------------------------------------------------------------------------
   Die Schrift trägt den Auftritt, nicht der Rahmen. Große, schwere Versalien
   gegen ruhigen Fließtext, viel Weißraum, feine Linien zur Gliederung und ein
   einziger Farbakzent.

   Bewusst NICHT: harte versetzte Schatten, dicke Kanten, Kästchen um jedes
   Element. Das war die vorige Fassung. Solche Rahmen nehmen der Schrift genau
   die Fläche weg, aus der sie ihre Wirkung zieht — und sie lassen eine Seite
   voll aussehen, ohne dass mehr darauf steht.

   Die Regel für alles hier: Wenn ein Element ohne Linie auskommt, bekommt es
   keine. Wenn es eine braucht, ist sie ein Haar dünn.
   ========================================================================== */

/* ---------- Kopfbereich: glatte Fläche mit Netzgrafik ---------- */
.titel {
  background: var(--navy-tief);
  border-bottom: 0;
}
@media (min-width: 62rem) {
  .startseite .titel { min-height: min(66vh, 40vw); }
  .titel--seite { min-height: min(42vh, 26vw); }
}
.titel::after { content: none; }          /* keine ovalen Verläufe */

/* Das Netz füllt den Kopfbereich und liegt hinter allem. Lesbar bleibt die
   Schrift, weil das Netz nach links hin ruhiger wird — das steckt in der
   Grafik, nicht in einem Schleier darüber. */
.titel__netz { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.titel__netz img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: right center;
}
@media (max-width: 46rem) {
  .startseite .titel { padding-top: clamp(2.2rem, 7vw, 3.4rem); }
  /* Am Handy nimmt die Schrift die ganze Breite ein, das Netz liegt also
     zwangsläufig darunter. Ausschnitt und Deckkraft sind nachgerechnet: So
     bleibt der schlechteste Kontrast bei 5,5 : 1, nötig sind 4,5 : 1. */
  .titel__netz img { object-position: 60% center; opacity: 0.7; }
}

/* ---------- Typografie: der eigentliche Auftritt ---------- */
h1, h2, .versal { letter-spacing: -0.028em; }
h1 { font-size: clamp(2.6rem, 1rem + 7vw, 6.4rem); line-height: 0.93; }
h2 { font-size: clamp(1.9rem, 0.9rem + 3.6vw, 3.9rem); line-height: 0.98; }
h3 { font-size: clamp(1.1rem, 0.94rem + 0.6vw, 1.35rem); letter-spacing: 0.01em; }
.titel__unter { font-size: clamp(1.3rem, 1rem + 1.35vw, 2.2rem); line-height: 1.32; }
.befund__zahl { font-size: clamp(3.1rem, 1.8rem + 4.4vw, 5.6rem); letter-spacing: -0.04em; }
.befund--zahl .befund__zahl { font-size: clamp(3.9rem, 2rem + 6vw, 7.6rem); }

/* Der Größensprung zwischen Überschrift und Fließtext macht die Spannung.
   Also bleibt der Fließtext bewusst schlicht und normal stark. */
.vorspann { font-weight: 400; }

/* ---------- Weißraum ---------- */
:root { --luft: clamp(4.5rem, 10vw, 10rem); }

/* ---------- Karten: keine Kästen, nur eine Linie oben ---------- */
.kachel, .befund, .mini, .diagramm__rahmen, .projekt__bild, .duo__bild,
.schaubild, .stimme {
  box-shadow: none !important;
  border: 0;
}
.kachel, .befund, .mini {
  border-top: 2px solid var(--navy);
  padding-inline: 0;
  background: transparent;
}
.diagramm__rahmen, .projekt__bild, .duo__bild {
  border: 1px solid var(--linie);
}
/* Luft statt Trennlinien zwischen den Karten */
.raster, .befunde, .vorteile, .schritte {
  background: transparent; border: 0;
  gap: clamp(1.75rem, 4vw, 3.25rem);
}
.raster > .kachel, .befunde > .befund, .vorteile > .vorteil, .schritte > li {
  box-shadow: none;
}
.schritte > li { background: transparent; padding-inline: 0; border-top: 2px solid var(--navy); }

a.kachel { transition: color .18s ease, border-color .18s ease; }
a.kachel:hover { background: transparent; border-top-color: var(--blau); transform: none; }
.kachel__weiter { color: var(--navy); }
a.kachel:hover .kachel__weiter { color: var(--blau); }

/* ---------- Knöpfe: Fläche, keine Schatten ---------- */
.knopf {
  border: 1px solid var(--navy); border-radius: 0; box-shadow: none;
  font-size: 0.85rem; letter-spacing: 0.1em; padding: 1.05rem 2.1rem;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.knopf:hover  { transform: none; box-shadow: none; }
.knopf:active { transform: none; box-shadow: none; }
.knopf--hell  { border-color: var(--weiss); box-shadow: none; }
.knopf--hell:hover { box-shadow: none; }
.feld-blau .knopf--hell, .titel .knopf--hell { box-shadow: none; }
.nav a.knopf { box-shadow: none; padding: 0.7rem 1.25rem; }
.knopf--klein { padding: 0.6rem 1.15rem; }

/* ---------- Abschnittsmarke: kleine Versalien, kein Block ---------- */
.kicker {
  display: block; padding: 0; background: none; border: 0;
  color: var(--akzent) !important;
  font-size: 0.74rem; letter-spacing: 0.22em; margin-bottom: 0.9rem;
}
.feld-blau .kicker, .titel .kicker { background: none; color: #8fb8e4 !important; }
.titel__marke { color: rgba(255,255,255,0.72); }

/* ---------- Feine Linien gliedern ---------- */
/* Statt eines dicken Balkens vor der Überschrift eine Haarlinie darüber.
   Sie läuft nur ein Stück weit — ein Schlussstrich über die ganze Breite
   würde den Abschnitt abtrennen statt ihn anzukündigen. */
section > .huelle > .kicker { padding-top: 1.4rem; border-top: 1px solid var(--linie); }
section > .huelle > h2 { border-left: 0; padding-left: 0; margin-left: 0; }
.feld-blau > .huelle > .kicker { border-top-color: rgba(255,255,255,0.22); }

.spalte { border-top: 1px solid var(--linie); padding-top: 1.1rem; }
.abschnitt-linie, .rechtstext h2 { border-top-width: 1px; }
blockquote { border-left: 2px solid var(--blau); padding-left: clamp(1rem,2.2vw,1.5rem); }
.zitat blockquote { border-left: 0; padding-left: 0; }      /* mittig gesetzt, da stört eine Linie links */
.stimme { border-left: 3px solid var(--blau); }
.stimme blockquote { border-left: 0; padding-left: 0; }     /* die Linie trägt die Figur, nicht das Zitat */
.zahlenwerk summary { border: 1px solid var(--linie); padding: 0.5rem 0.8rem; display: inline-block; }

/* ---------- Kopfzeile ---------- */
.kopf { border-bottom: 1px solid var(--linie); }

/* Bei dieser Schriftgröße läuft die Überschrift sonst bis in die Netzzone.
   Sie bricht jetzt früher um und bleibt links. */
@media (min-width: 62rem) { .startseite .titel h1 { max-width: 16ch; } }

/* Kurzer Kopfbereich für Rechtstexte und Funktionsseiten — dieselbe Fläche
   und dieselbe Netzgrafik wie überall, nur flacher. */
.titel--knapp { padding-block: clamp(2.4rem, 5vw, 4rem) clamp(2rem, 4vw, 3.2rem); }
@media (min-width: 62rem) { .titel--knapp { min-height: min(30vh, 19vw); } }
.titel--knapp h1 { max-width: 22ch; }
.titel--knapp .titel__unter { color: rgba(255,255,255,0.86); }


/* ==========================================================================
   MUTIGE TYPOGRAFIE
   Große Aussagen tragen die Fläche, nicht Bilder. Weißraum, feine Linien,
   ein einziger Farbakzent auf dem Satzzeichen. Die Schrift ist das
   Gestaltungselement — deshalb steht sie als echter Text in der Seite und
   nicht als Grafik: sie bleibt lesbar, wächst mit und lässt sich suchen.
   ========================================================================== */

.aussage { padding-block: clamp(3.4rem, 8vw, 7rem); }
.aussage .huelle { display: grid; gap: clamp(1.6rem, 3.5vw, 2.6rem); }

/* Die feine Linie gliedert, ohne zu trennen — sie läuft nicht über die
   ganze Breite, das wirkt sonst wie ein Schlussstrich. */
.aussage__linie {
  width: min(100%, 18rem); height: 2px; background: var(--navy);
}

.aussage__satz {
  margin: 0;
  font-size: clamp(2.05rem, 0.6rem + 6.4vw, 5.4rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--navy);
  max-width: 19ch;
  text-wrap: balance;
}

/* Der einzige Farbakzent. Mehr braucht es nicht — die Schrift ist schon laut. */
.aussage__akzent { color: var(--blau); }

.aussage__quelle {
  margin: 0; font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-leise);
}

/* Auf dunklem Grund dreht sich die Farbgebung um */
.feld-navy .aussage__satz, .aussage.feld-navy .aussage__satz { color: var(--weiss); }
.feld-navy .aussage__linie { background: var(--blau); }
.feld-navy .aussage__quelle { color: rgba(255,255,255,0.7); }

/* ---------- Trennband für kurze Seiten ---------- */
.trenner { padding-block: clamp(2.2rem, 5vw, 3.6rem); }
.trenner__reihe { display: flex; align-items: center; gap: 0.7rem; }
.trenner__marke {
  width: 11px; height: 11px; flex: 0 0 auto;
  box-shadow: inset 0 0 0 2px var(--navy);
}
.trenner__marke--voll { background: var(--blau); box-shadow: none; }
/* Die Linie füllt den Rest der Zeile aus */
.trenner__reihe::after {
  content: ''; flex: 1 1 auto; height: 1px; background: var(--linie);
}

/* ---------- Rahmen für die Schaubilder ---------- */
.schaubild { margin: clamp(2rem, 4.5vw, 3.2rem) 0 0; }
.schaubild svg { display: block; width: 100%; height: auto; }
.schaubild__unter {
  margin: 1rem 0 0; font-size: 0.9rem; color: var(--text-leise); max-width: 62ch;
}
/* Breite und schmale Fassung — ein Schaubild, das auf 1200 px gut aussieht,
   hat am Handy 5-Punkt-Schrift. Deshalb gibt es zwei. */
.schaubild .nurbreit { display: none; }
.schaubild .nurschmal { display: block; }
@media (min-width: 46rem) {
  .schaubild .nurbreit { display: block; }
  .schaubild .nurschmal { display: none; }
}

/* ---------- Ablauf: die Liste selbst wird zur Grafik ----------------------
   Wo eine Reihenfolge wirklich besteht, trägt die Schrittnummer die Fläche:
   groß, blau, als geometrisches Element. Keine zweite Grafik daneben, die
   dasselbe noch einmal sagt. Bewusst ohne Pfeile — bei drei Spaltenbreiten
   bricht die Reihe an wechselnden Stellen um, und ein Pfeil zeigte dann ins
   Leere. Die Nummer stimmt immer.
   ----------------------------------------------------------------------- */
.schritte--ablauf > li {
  position: relative;
  box-shadow: none;
  border-top: 2px solid var(--blau);
  padding-top: clamp(1.1rem, 2.2vw, 1.5rem);
  gap: 0.35rem;
}
.schritte--ablauf > li::before {
  content: counter(schritt);
  font-size: clamp(2.5rem, 1rem + 3.2vw, 4rem);
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: -0.045em;
  color: var(--blau);
}
.schritte--ablauf b { margin-top: 0.4rem; }

/* Kleine geometrische Marken und eine Haarlinie — mehr braucht es nicht */
.trenner__marke { width: 11px; height: 11px; box-shadow: inset 0 0 0 2px var(--navy); }
.trenner__reihe { gap: 0.7rem; }
.trenner__reihe::after { height: 1px; opacity: 1; background: var(--linie); }

/* ---------- Seitliches Scrollen am Handy verhindern ----------------------
   Das geschlossene Menü parkt rechts außerhalb des Bildschirms. Ohne diese
   Zeile kann man die Seite am Handy seitwärts schieben und sieht den
   ausgeparkten Vorhang. 'clip' statt 'hidden', weil 'hidden' einen eigenen
   Scrollbereich erzeugt und damit position:sticky in der Kopfzeile bricht.
   ----------------------------------------------------------------------- */
html, body { overflow-x: clip; }

/* ---------- Das Handbuch ----------
   Der Umschlag steht hochkant neben dem Text. Er bekommt keine Kante und
   keinen Schatten — nur eine Haarlinie, damit er sich vom hellen Grund löst. */
.duo--buch { align-items: center; }
@media (min-width: 58rem) { .duo--buch { grid-template-columns: 0.55fr 1.45fr; } }
.buch__deckel img {
  display: block; width: 100%; height: auto;
  max-width: 19rem; box-shadow: 0 0 0 1px var(--linie);
}

/* ---------- Zwei Formate je Kachel ----------
   Die Kachel ist dann kein Verweis mehr, sondern trägt zwei. Sonst klickt man
   in den einen Link, während man den anderen wollte. */
.kachel--zwei { display: flex; flex-direction: column; gap: 0.7rem; }
.kachel__formate {
  margin: auto 0 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem;
  padding-top: 0.6rem;
}
.kachel__formate a {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--navy); text-decoration: none;
  border-bottom: 1px solid var(--akzent); padding-bottom: 0.2rem;
}
.kachel__formate a:hover { color: var(--blau); }

/* ---------- Stimmen mit Portrait ----------
   Hillinger, Ivić und Klein sind die stärkste Empfehlung des Instituts.
   Drei schmale Spalten werden ihnen nicht gerecht: Hier steht eine Stimme je
   Zeile, das Bild groß links, das Zitat in größerer Schrift rechts daneben. */
.stimmen--gross { grid-template-columns: 1fr; gap: clamp(2.5rem,5vw,4rem); }
.stimmen--gross blockquote { font-size: clamp(1.1rem,0.95rem + 0.7vw,1.5rem); line-height: 1.45; }
.stimme__wer { display: grid; gap: 0.85rem; justify-items: start; align-content: start; }
.stimme__name { display: block; }
.stimme__kopf {
  width: clamp(104px,30vw,200px); aspect-ratio: 1;
  object-fit: cover; display: block;
  box-shadow: 0 0 0 1px var(--linie);
}
/* Der Name trägt hier das Gewicht — er ist das Argument. Deshalb größer,
   in Navy und über der Rolle, die zurücktritt. */
.stimmen--gross .stimme__name { font-size: 0.92rem; letter-spacing: 0.09em; color: var(--navy); line-height: 1.35; }
.stimmen--gross .stimme__name span { font-size: 0.74rem; font-weight: 400; letter-spacing: 0.07em; color: var(--text-leise); margin-top: 0.35rem; }

@media (min-width: 44rem) {
  .stimmen--gross .stimme {
    grid-template-columns: clamp(130px,17vw,200px) 1fr;
    column-gap: clamp(1.6rem,3.5vw,2.75rem);
    align-items: start;
  }
  .stimmen--gross .stimme__kopf { width: 100%; }
}