/* ===========================================================================
   INVISOCOM – Stylesheet
   1  Schriften
   2  Farben und Maße
   3  Grundlagen
   4  Typografie
   5  Kopf- und Fußzeile
   6  Flächen und Raster
   7  Bilder
   8  Hero
   9  Ecosystem
   10 Bausteine
   11 Formular
   12 Entwurfsmodus
   13 Bewegung
   =========================================================================== */

/* 1  Schriften ------------------------------------------------------------ */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/cormorant-300-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/cormorant-300-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/cormorant-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/cormorant-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/cormorant-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/cormorant-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/inter-300-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/inter-300-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/inter-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/inter-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/inter-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/inter-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/inter-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/inter-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 2  Farben und Maße ------------------------------------------------------ */

:root {
  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Grundpalette – Navy, Anthrazit, warmes Weiß, Messing als Akzent */
  --navy-900: #0a1624;
  --navy-800: #0e1d2e;
  --navy-700: #15293f;
  --anthrazit: #191d23;

  --grund: #faf8f4;
  --grund-2: #f2eee7;
  --grund-3: #e7e2d9;
  --schrift: #12181f;
  --schrift-leise: #5c6774;
  --linie: rgba(18, 24, 31, .15);
  --linie-zart: rgba(18, 24, 31, .08);
  --akzent: #8a6834;
  --akzent-klar: #a8845a;

  /* Flächen, die immer dunkel bleiben (Hero, Ecosystem, Zwischenbilder) */
  --dunkel: var(--navy-900);
  --dunkel-2: var(--navy-800);
  --auf-dunkel: #eeebe4;
  --auf-dunkel-leise: #9aa6b4;
  --linie-dunkel: rgba(238, 235, 228, .18);

  --wrap: 1280px;
  --luft: clamp(1.25rem, 5vw, 3.5rem);
  --sektion: clamp(4.5rem, 10vw, 9rem);
  --radius: 2px;

  --t-display: clamp(2.5rem, 5.6vw, 5rem);
  --t-h1: clamp(2.15rem, 4.4vw, 3.7rem);
  --t-h2: clamp(1.85rem, 3.2vw, 2.7rem);
  --t-h3: clamp(1.3rem, 1.9vw, 1.7rem);
  --t-lead: clamp(1.08rem, 1.5vw, 1.32rem);

  --ease: cubic-bezier(.22, .61, .36, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grund: #0a1624;
    --grund-2: #0e1d2e;
    --grund-3: #15293f;
    --schrift: #eeebe4;
    --schrift-leise: #9aa6b4;
    --linie: rgba(238, 235, 228, .18);
    --linie-zart: rgba(238, 235, 228, .09);
    --akzent: #c9a46a;
    --akzent-klar: #d8b87f;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --grund: #0a1624;
  --grund-2: #0e1d2e;
  --grund-3: #15293f;
  --schrift: #eeebe4;
  --schrift-leise: #9aa6b4;
  --linie: rgba(238, 235, 228, .18);
  --linie-zart: rgba(238, 235, 228, .09);
  --akzent: #c9a46a;
  --akzent-klar: #d8b87f;
  color-scheme: dark;
}

/* 3  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(--schrift);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg { max-width: 100%; }
img { height: auto; }
picture { display: contents; }   /* sonst greifen height/object-fit am <img> nicht */

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-color: var(--akzent); }

:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--dunkel); color: var(--auf-dunkel);
  padding: .7rem 1.1rem; font-size: .9rem; transition: top .18s var(--ease);
}
.skip-link:focus { top: 1rem; }

.wrap {
  width: 100%; max-width: var(--wrap);
  margin-inline: auto; padding-inline: var(--luft);
}
.wrap--eng { max-width: 940px; }

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

/* 4  Typografie ----------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.006em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); font-weight: 300; }
h2 { font-size: var(--t-h2); font-weight: 300; }
h3 { font-size: var(--t-h3); font-weight: 500; line-height: 1.22; }
h4 { font-size: 1.06rem; font-family: var(--sans); font-weight: 600;
     letter-spacing: -.01em; line-height: 1.4; }

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

.display {
  font-family: var(--display); font-weight: 300;
  font-size: var(--t-display); line-height: 1.02;
  letter-spacing: -.012em; margin: 0; max-width: 16ch;
}
.lead {
  font-size: var(--t-lead); line-height: 1.6;
  color: var(--schrift-leise); font-weight: 300;
  max-width: 54ch;
}
.fliesstext { max-width: 62ch; }
.fliesstext--weit { max-width: 72ch; }

.eyebrow {
  display: flex; align-items: baseline; gap: .8rem;
  font-family: var(--sans); font-size: .705rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--schrift-leise); margin: 0 0 1.5rem;
}
.eyebrow__nr {
  font-variant-numeric: tabular-nums; color: var(--akzent);
  letter-spacing: .1em;
}
.eyebrow::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: var(--linie-zart); max-width: 5rem;
}

.zitat {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.5rem, 3vw, 2.35rem); line-height: 1.3;
  letter-spacing: -.008em; margin: 0; text-wrap: balance;
}
.zitat__quelle {
  display: block; margin-top: 1.4rem;
  font-family: var(--sans); font-size: .78rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--schrift-leise);
}

.klein {
  font-size: .855rem; line-height: 1.62; color: var(--schrift-leise);
}

/* 5  Kopf- und Fußzeile --------------------------------------------------- */

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  transition: background .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header__inner {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 78px;
}
.site-header[data-solid="true"] {
  background: color-mix(in srgb, var(--grund) 92%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom-color: var(--linie-zart);
}

/* Über einem Hero liegt die Kopfzeile auf dem Bild – dort immer helle Schrift */
body[data-hero-header="true"] .site-header:not([data-solid="true"]) {
  color: var(--auf-dunkel);
}

.logo { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }

/* Die Wortmarke ist eine Maske, keine Bilddatei: Die Farbe kommt aus
   currentColor. Dadurch folgt sie der Schriftfarbe ihrer Umgebung – über dem
   Hero hell, in der deckenden Kopfzeile je nach Farbschema, im Fußbereich
   hell. Es gibt nichts umzuschalten und damit auch nichts, was gleichzeitig
   sichtbar sein könnte. */
.logo__marke {
  display: block;
  width: 166px; height: 27px;          /* Seitenverhältnis 590 : 96 */
  background-color: currentColor;
  -webkit-mask: url("../img/logo-maske.png") no-repeat center / contain;
  mask: url("../img/logo-maske.png") no-repeat center / contain;
}
@media (max-width: 480px) { .logo__marke { width: 141px; height: 23px; } }
.logo__marke--klein { width: 160px; height: 26px; }

.nav { margin-left: auto; }
.nav__list {
  display: flex; align-items: center; gap: clamp(.9rem, 2.2vw, 2rem);
  list-style: none; margin: 0; padding: 0;
}
.nav__link {
  font-size: .795rem; font-weight: 500; letter-spacing: .105em;
  text-transform: uppercase; text-decoration: none;
  padding: .45rem 0; position: relative; white-space: nowrap;
  opacity: .82; transition: opacity .2s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: .12rem;
  height: 1px; background: var(--akzent); transition: right .3s var(--ease);
}
.nav__link:hover { opacity: 1; }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { right: 0; }
.nav__link[aria-current="page"] { opacity: 1; }

.kopf-aktionen { display: flex; align-items: center; gap: .55rem; flex: 0 0 auto; }

.nav__mobil-extra { display: none; }

.sprache {
  display: flex; align-items: center; gap: .3rem;
  font-size: .73rem; font-weight: 500; letter-spacing: .1em;
}
.sprache__aktiv { opacity: 1; }
.sprache__link {
  opacity: .5; text-decoration: none;
  transition: opacity .2s var(--ease), color .2s var(--ease);
}
.sprache__link:hover, .sprache__link:focus-visible {
  opacity: 1; color: var(--akzent);
}
.sprache__trenner { opacity: .3; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; padding: 0;
  background: none; border: 1px solid var(--linie-zart); border-radius: 50%;
  color: inherit; cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.icon-btn:hover { border-color: var(--akzent); }
.icon-btn svg { width: 17px; height: 17px; }
body[data-hero-header="true"] .site-header:not([data-solid="true"]) .icon-btn {
  border-color: rgba(255, 255, 255, .28);
}

.icon-sun { display: none; }
:root[data-theme="dark"] .icon-sun { display: block; }
:root[data-theme="dark"] .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-sun { display: block; }
  :root:not([data-theme="light"]) .icon-moon { display: none; }
}

.kopf-cta {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .775rem; font-weight: 500; letter-spacing: .105em;
  text-transform: uppercase; text-decoration: none;
  padding: .62rem 1.15rem; border: 1px solid currentColor;
  transition: background .22s var(--ease), color .22s var(--ease);
}
.kopf-cta:hover { background: var(--akzent); border-color: var(--akzent); color: #fff; }

.menue-btn { display: none; }
.menue-btn .icon-close { display: none; }
.menue-btn[aria-expanded="true"] .icon-close { display: block; }
.menue-btn[aria-expanded="true"] .icon-menu { display: none; }

@media (max-width: 900px) {
  .menue-btn { display: inline-grid; }
  .kopf-cta, .sprache { display: none; }
  /* Das Vollbildmenü ist positioniert und würde sonst Logo und
     Schließen-Knopf überdecken – beide gehören darüber. */
  .logo, .kopf-aktionen { position: relative; z-index: 1; }
  .nav {
    position: fixed; inset: 0; margin: 0;
    background: var(--dunkel); color: var(--auf-dunkel);
    display: grid; place-items: center;
    opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s;
  }
  .nav[data-offen="true"] { opacity: 1; visibility: visible; }
  .nav__list { flex-direction: column; gap: 1.6rem; text-align: center; }
  .nav__link { font-size: 1.05rem; letter-spacing: .14em; }
  .nav__mobil-extra {
    margin-top: 1.2rem; padding-top: 1.6rem;
    border-top: 1px solid var(--linie-dunkel);
    display: flex; flex-direction: column; gap: 1rem; align-items: center;
  }
}

.site-footer {
  background: var(--dunkel); color: var(--auf-dunkel);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.25rem;
}
.site-footer a { color: inherit; }
.footer__oben {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--linie-dunkel);
}
@media (max-width: 760px) { .footer__oben { grid-template-columns: 1fr; } }
.footer__marke .logo__marke { width: 160px; height: 26px; }
.footer__claim {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.3rem, 2.4vw, 1.85rem); line-height: 1.24;
  margin: 1.5rem 0 0; max-width: 20ch;
}
.footer__spalten {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem;
}
.footer__spalte h2 {
  font-family: var(--sans); font-size: .705rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--auf-dunkel-leise); margin: 0 0 1.1rem;
}
.footer__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer__liste a { font-size: .93rem; text-decoration: none; opacity: .88; }
.footer__liste a:hover { opacity: 1; text-decoration: underline; }
.footer__unten {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: center; justify-content: space-between;
  padding-top: 1.75rem; font-size: .8rem; color: var(--auf-dunkel-leise);
}
.footer__rechtslinks { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.footer__rechtslinks a { text-decoration: none; }
.footer__rechtslinks a:hover { text-decoration: underline; }
.footer__social {
  display: inline-flex; align-items: center; gap: .5rem;
  text-decoration: none; font-size: .85rem;
}
.footer__social svg { width: 16px; height: 16px; }

/* 6  Flächen und Raster --------------------------------------------------- */

.sektion { padding-block: var(--sektion); position: relative; }
.sektion--eng { padding-block: clamp(3rem, 6vw, 5rem); }
.sektion--grund2 { background: var(--grund-2); }
.sektion--dunkel {
  background: var(--dunkel); color: var(--auf-dunkel);
  --schrift-leise: var(--auf-dunkel-leise);
  --linie: var(--linie-dunkel);
  --linie-zart: rgba(238, 235, 228, .1);
  /* Diese Flächen sind in beiden Farbschemata dunkel. Deshalb hier fest der
     hellere Messington – sonst wirkte der Akzent im hellen Schema matt. */
  --akzent-klar: #d8b87f;
  --akzent: var(--akzent-klar);
}
.sektion--linie-oben { border-top: 1px solid var(--linie-zart); }

.sektionskopf { max-width: 60ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sektionskopf--breit { max-width: 78ch; }

/* Zwei Spalten, bewusst asymmetrisch (Ausführungsplanung Abschnitt 12) */
.duo {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
.duo--versetzt { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
.duo--textlinks { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
@media (max-width: 880px) { .duo, .duo--versetzt, .duo--textlinks { grid-template-columns: 1fr; } }

.duo__tief { padding-top: clamp(1.5rem, 5vw, 4.5rem); }

.raster { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.raster--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

.mt-s { margin-top: 1.25rem; }
.mt-m { margin-top: 2rem; }
.mt-l { margin-top: clamp(2.5rem, 5vw, 4rem); }

.btn-reihe { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: center; }

.btn {
  display: inline-flex; align-items: center; gap: .65rem;
  font-family: var(--sans); font-size: .81rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  padding: .92rem 1.6rem; border: 1px solid var(--schrift);
  background: var(--schrift); color: var(--grund);
  transition: background .22s var(--ease), border-color .22s var(--ease),
              color .22s var(--ease);
}
.btn svg { width: 16px; height: 16px; transition: transform .28s var(--ease); }
.btn:hover { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.btn:hover svg { transform: translateX(4px); }
.btn--leise {
  background: none; color: inherit; border-color: var(--linie);
}
.btn--leise:hover { background: none; color: var(--akzent); border-color: var(--akzent); }

/* Textlink mit wachsender Unterlinie */
.textlink {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .81rem; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none;
  padding-bottom: .35rem; border-bottom: 1px solid var(--linie);
  transition: border-color .22s var(--ease), color .22s var(--ease);
}
.textlink svg { width: 15px; height: 15px; transition: transform .28s var(--ease); }
.textlink:hover { color: var(--akzent); border-color: var(--akzent); }
.textlink:hover svg { transform: translateX(4px); }

/* 7  Bilder --------------------------------------------------------------- */

.bild { position: relative; overflow: hidden; background: var(--grund-3); }
.bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bild--16x9 { aspect-ratio: 16 / 9; }
.bild--21x9 { aspect-ratio: 21 / 9; }
.bild--3x2  { aspect-ratio: 3 / 2; }
.bild--4x5  { aspect-ratio: 4 / 5; }
.bild--1x1  { aspect-ratio: 1 / 1; }
.bild--hoch { aspect-ratio: 5 / 7; }

/* Bildausschnitt je Motiv einzeln festlegen – nie dem Standard vertrauen */
.pos-oben img    { object-position: 50% 22%; }
.pos-mitte img   { object-position: 50% 50%; }
.pos-unten img   { object-position: 50% 74%; }
.pos-links img   { object-position: 28% 50%; }
.pos-rechts img  { object-position: 72% 50%; }
.pos-kopf img    { object-position: 50% 30%; }

.vollbreite {
  position: relative;
  width: 100vw; margin-left: calc(50% - 50vw);
}
/* Ein 21:9-Band ist auf dem Handy nur noch ein Strich. Dort wird daraus ein
   Hochformat, das die Situation noch zeigt. */
@media (max-width: 760px) {
  .vollbreite .bild--21x9 { aspect-ratio: 4 / 3; }
  .vollbreite .bild--16x9 { aspect-ratio: 4 / 3; }
}

.bildmeta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem .9rem;
  margin: .95rem 0 0; font-size: .705rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--schrift-leise);
}
.bildmeta__ort { font-weight: 500; color: var(--akzent); }
.bildmeta__thema { font-style: normal; }

/* Zwei Bilder, das kleinere überlappt das große (Editorial-Crop) */
.bildpaar { position: relative; }
.bildpaar__detail {
  position: absolute; right: -1rem; bottom: -2.5rem;
  width: min(42%, 15rem);
  border: 6px solid var(--grund);
  box-shadow: 0 18px 45px rgba(10, 22, 36, .22);
}
.sektion--dunkel .bildpaar__detail { border-color: var(--dunkel); }
@media (max-width: 640px) {
  .bildpaar__detail { position: static; width: 62%; margin: -2.5rem 0 0 auto;
                      display: block; }
}

/* 8  Hero ----------------------------------------------------------------- */

.hero {
  position: relative; isolation: isolate;
  min-height: min(92svh, 860px);
  display: flex; align-items: flex-end;
  color: var(--auf-dunkel);
  background: var(--navy-900);
  padding-block: 8rem clamp(3rem, 7vw, 5rem);
  overflow: hidden;
}
.hero--kompakt { min-height: min(62svh, 560px); }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__schleier {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(6, 14, 24, .88) 0%, rgba(6, 14, 24, .5) 38%,
                    rgba(6, 14, 24, .12) 68%, rgba(6, 14, 24, .34) 100%),
    linear-gradient(to right, rgba(6, 14, 24, .74) 0%, rgba(6, 14, 24, .58) 30%,
                    rgba(6, 14, 24, .14) 62%, rgba(6, 14, 24, 0) 100%);
}
.hero__schleier--stark {
  background:
    linear-gradient(to top, rgba(6, 14, 24, .95) 0%, rgba(6, 14, 24, .78) 40%,
                    rgba(6, 14, 24, .5) 100%),
    linear-gradient(to right, rgba(6, 14, 24, .74) 0%, rgba(6, 14, 24, .34) 60%,
                    rgba(6, 14, 24, .18) 100%);
}
.hero__inner { max-width: min(100%, 44rem); }
.hero__inner--weit { max-width: min(100%, 52rem); }
.hero .eyebrow { color: rgba(238, 235, 228, .78); }
.hero .eyebrow::after { background: rgba(238, 235, 228, .25); }
.hero .eyebrow__nr { color: var(--akzent-klar); }
.hero__titel {
  font-family: var(--display); font-weight: 300;
  font-size: var(--t-display); line-height: 1.03;
  letter-spacing: -.014em; margin: 0;
  max-width: 17ch;   /* ch gilt hier für die Serifenschrift – drei Zeilen */
}
.hero__dach {
  margin: 1.6rem 0 0; max-width: 30ch;
  font-size: clamp(1rem, 1.4vw, 1.18rem); font-weight: 300;
  line-height: 1.55; color: rgba(238, 235, 228, .85);
}
.hero__aktionen { margin-top: clamp(2rem, 4vw, 2.75rem); }
.hero .btn {
  background: var(--auf-dunkel); border-color: var(--auf-dunkel); color: var(--navy-900);
}
.hero .btn:hover { background: var(--akzent-klar); border-color: var(--akzent-klar); color: var(--navy-900); }
.hero .btn--leise {
  background: none; color: var(--auf-dunkel); border-color: rgba(238, 235, 228, .38);
}
.hero .btn--leise:hover { border-color: var(--akzent-klar); color: var(--akzent-klar); }

.hero__fuss {
  position: absolute; left: 0; right: 0; bottom: 1.4rem;
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1rem; pointer-events: none;
}
.hero__fuss .wrap {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
}
.hero__orte {
  margin: 0; font-size: .705rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(238, 235, 228, .7);
}
.hero__fuss .bildmeta { margin: 0; color: rgba(238, 235, 228, .7); }
.hero__fuss .bildmeta__ort { color: var(--akzent-klar); }
@media (max-width: 700px) {
  .hero__fuss .wrap { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .hero { min-height: min(94svh, 760px); padding-block: 7rem 4.5rem; }
  .hero__titel { font-size: clamp(2.3rem, 10vw, 3.2rem); max-width: 13ch; }
  .hero__dach { font-size: 1rem; max-width: 34ch; }
  /* Der Hochformat-Ausschnitt muss die Menschen zeigen, nicht die Architektur. */
  /* Der eigene Hochformat-Ausschnitt braucht keine Verschiebung mehr. */
  .hero__media img { object-position: 50% 50%; }
  .hero__schleier {
    background:
      linear-gradient(to top, rgba(6, 14, 24, .9) 0%, rgba(6, 14, 24, .62) 44%,
                      rgba(6, 14, 24, .3) 80%, rgba(6, 14, 24, .46) 100%);
  }
  .hero__aktionen .btn { width: 100%; justify-content: space-between; }
}

.hero__runter {
  position: absolute; right: var(--luft); top: 50%;
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size: .68rem; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(238, 235, 228, .6); text-decoration: none;
  display: inline-flex; align-items: center; gap: .8rem;
}
.hero__runter::after {
  content: ""; width: 1px; height: 3.5rem;
  background: linear-gradient(to bottom, var(--akzent-klar), transparent);
}
@media (max-width: 900px) { .hero__runter { display: none; } }

/* 9  Ecosystem ------------------------------------------------------------ */

/* Netzwerkgrafik statt Organigramm. Die Bewegung hat drei Ebenen: die Bahnen
   zeichnen sich einmalig beim Scrollen, Lichtpunkte fließen dauerhaft nach
   außen (SMIL, siehe build.py), und Kern wie Knoten atmen in einem langsamen
   eigenen Takt. Unterschiedliche Periodenlängen sorgen dafür, dass sich nie
   ein sichtbarer Gleichschritt einstellt. */

.ecosystem { position: relative; }
.ecosystem__figur {
  display: block; width: 100%; height: auto;
  color: var(--akzent-klar);        /* speist currentColor in Verläufen */
  overflow: visible;
}

.ecosystem__buehne {
  opacity: 0; transition: opacity 1.2s var(--ease);
}
.ecosystem.is-in .ecosystem__buehne { opacity: 1; }

/* --- Halo hinter dem Kern --- */
.ecosystem__halo { transform-origin: center; }
.ecosystem.is-in.is-sichtbar .ecosystem__halo {
  animation: eco-halo 9s ease-in-out infinite;
}
@keyframes eco-halo {
  0%, 100% { opacity: .6; transform: scale(.9); }
  50%      { opacity: 1;  transform: scale(1.05); }
}

/* --- Bahnen --- */
/* Die Gruppen tragen den Weichzeichner-Filter; hier nur der Vollständigkeit
   halber, damit jede benutzte Klasse auch eine Regel hat. */
.ecosystem__bahnen, .ecosystem__funken, .ecosystem__kern { pointer-events: none; }

.ecosystem__bahn {
  fill: none; stroke-width: 1.5; stroke-linecap: round;
  stroke-dasharray: var(--laenge); stroke-dashoffset: var(--laenge);
  transition: stroke-dashoffset 1.6s var(--ease) var(--eco-zeichnen, 0s);
}
.ecosystem.is-in .ecosystem__bahn { stroke-dashoffset: 0; }

/* --- Lichtpunkte auf den Bahnen --- */
.ecosystem__funke {
  fill: var(--akzent-klar);
  opacity: 0; transition: opacity 1s var(--ease) 1.1s;
}
.ecosystem.is-in .ecosystem__funke { opacity: .95; }

/* --- Knotenpunkte --- */
.ecosystem__knoten { transform-origin: center; }
.ecosystem.is-in.is-sichtbar .ecosystem__knoten {
  animation: eco-schweben 11s ease-in-out infinite var(--eco-versatz, 0s);
}
/* Sehr kleine Amplitude: Es soll leben, nicht wackeln. */
@keyframes eco-schweben {
  0%, 100% { transform: translate(0, 0); }
  33%      { transform: translate(2px, -4px); }
  66%      { transform: translate(-2px, 3px); }
}

.ecosystem__punkt {
  fill: var(--akzent-klar);
  transition: r .35s var(--ease);
}
/* Feiner Ring um den Punkt – gibt ihm Kante, ohne ihn schwer zu machen. */
.ecosystem__punkt-rand {
  fill: none; stroke: var(--akzent-klar); stroke-width: 1; opacity: .45;
  transition: opacity .35s var(--ease), r .35s var(--ease);
}
.ecosystem__knoten:hover .ecosystem__punkt-rand { opacity: 1; r: 13; }
.ecosystem__aura {
  fill: var(--akzent-klar); opacity: .13;
  transition: opacity .35s var(--ease);
}
/* Ring, der vom Punkt nach außen läuft und verblasst – wie ein Signal. */
.ecosystem__welle {
  fill: none; stroke: var(--akzent-klar); stroke-width: 1.2;
  transform-origin: center; transform-box: fill-box;
  opacity: 0;
}
.ecosystem.is-in.is-sichtbar .ecosystem__welle {
  animation: eco-welle 5.4s cubic-bezier(.2, .6, .3, 1) infinite var(--eco-versatz, 0s);
}
@keyframes eco-welle {
  0%       { transform: scale(.55); opacity: 0; }
  14%      { opacity: .75; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}

/* --- Beschriftungen --- */
.ecosystem__label {
  opacity: 0; transform: translateY(8px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(.9s + var(--eco-zeichnen, 0s));
}
.ecosystem.is-in .ecosystem__label { opacity: 1; transform: none; }
.ecosystem__label-titel {
  fill: var(--auf-dunkel); font-family: var(--sans); font-size: 15px;
  font-weight: 600; letter-spacing: -.1px;
}
.ecosystem__label-sub {
  fill: var(--auf-dunkel-leise); font-family: var(--sans); font-size: 11.5px;
  font-weight: 400; letter-spacing: .3px;
}

/* --- Kern --- */
.ecosystem__kern-flaeche { fill: var(--dunkel-2); }
.ecosystem__kern-rand {
  fill: none; stroke: var(--akzent-klar); stroke-width: 1; opacity: .55;
}
/* Zwei Ringe laufen versetzt nach außen – der Puls des Zentrums. */
.ecosystem__kern-welle {
  fill: none; stroke: var(--akzent-klar); stroke-width: 1;
  transform-origin: center; transform-box: fill-box; opacity: 0;
}
.ecosystem.is-in.is-sichtbar .ecosystem__kern-welle {
  animation: eco-kernwelle 6.5s cubic-bezier(.25, .7, .3, 1) infinite;
}
.ecosystem__kern-welle--2 { animation-delay: 3.25s !important; }
@keyframes eco-kernwelle {
  0%        { transform: scale(1); opacity: .5; }
  75%, 100% { transform: scale(2.35); opacity: 0; }
}
.ecosystem__kern-text {
  fill: var(--auf-dunkel); font-family: var(--sans); font-size: 17px;
  font-weight: 600; letter-spacing: 2.2px; text-anchor: middle;
}
.ecosystem__kern-sub {
  fill: var(--akzent-klar); font-family: var(--sans); font-size: 10px;
  font-weight: 500; letter-spacing: 1.1px; text-anchor: middle;
}

/* --- Interaktion --- */
.ecosystem__knoten:hover .ecosystem__punkt { r: 9; }
.ecosystem__knoten:hover .ecosystem__aura { opacity: .3; }

/* Versatz je Verbindung. Die Klasse .eco-N hängt an Bahn, Knoten und Label –
   nth-of-type wäre hier falsch, weil es im SVG den Elementtyp zählt. */
.eco-1 { --eco-versatz: 0s;    --eco-zeichnen: 0s; }
.eco-2 { --eco-versatz: -.9s;  --eco-zeichnen: .1s; }
.eco-3 { --eco-versatz: -1.8s; --eco-zeichnen: .2s; }
.eco-4 { --eco-versatz: -2.7s; --eco-zeichnen: .3s; }
.eco-5 { --eco-versatz: -3.6s; --eco-zeichnen: .4s; }
.eco-6 { --eco-versatz: -4.5s; --eco-zeichnen: .5s; }

@media (max-width: 900px) { .ecosystem { display: none; } }

/* Mobile Fassung: dieselbe Aussage als vertikale Liste */
.ecosystem-liste { display: none; }
@media (max-width: 900px) {
  .ecosystem-liste { display: block; }
}
.raster .ecosystem-liste__items,
.duo .ecosystem-liste__items { padding-left: 0; }
.raster .ecosystem-liste__items::before,
.duo .ecosystem-liste__items::before { display: none; }
.raster .ecosystem-liste__items li::before,
.duo .ecosystem-liste__items li::before { display: none; }

.ecosystem-liste__mitte {
  text-align: center; padding-bottom: 2.25rem; margin-bottom: 2.25rem;
  border-bottom: 1px solid var(--linie);
}
.ecosystem-liste__mitte strong {
  display: block; font-size: 1.06rem; font-weight: 600; letter-spacing: .2em;
}
.ecosystem-liste__mitte span {
  display: block; margin-top: .55rem; font-size: .72rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--akzent);
}
.ecosystem-liste__items {
  list-style: none; margin: 0; padding: 0 0 0 1.85rem;
  display: grid; gap: 0; position: relative;
}
/* Eine durchlaufende Linie mit Knotenpunkten – dieselbe Aussage wie die
   Verbindungslinien der Grafik, nur vertikal. */
.ecosystem-liste__items::before {
  content: ""; position: absolute; left: .32rem; top: .5rem; bottom: .5rem;
  width: 1px;
  background: linear-gradient(to bottom, var(--akzent), var(--linie-zart));
}
.ecosystem-liste__items li {
  padding: 1.35rem 0; border-bottom: 1px solid var(--linie-zart);
  display: grid; gap: .4rem; position: relative;
}
.ecosystem-liste__items li::before {
  content: ""; position: absolute; left: -1.63rem; top: 1.85rem;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--akzent);
}
.ecosystem-liste__items li:last-child { border-bottom: 0; }
.ecosystem-liste__nr {
  font-size: .68rem; font-weight: 500; letter-spacing: .18em;
  color: var(--akzent); font-variant-numeric: tabular-nums;
}
.ecosystem-liste__items h3 { margin: 0; font-size: 1.12rem; }
.ecosystem-liste__items p { margin: 0; font-size: .855rem; color: var(--schrift-leise); }

/* 10  Bausteine ----------------------------------------------------------- */

/* Nummerierte Leistungsfelder */
.feld {
  padding-top: 1.6rem; border-top: 1px solid var(--linie);
  display: grid; gap: .9rem; align-content: start;
}
.feld__nr {
  font-family: var(--sans); font-size: .705rem; font-weight: 500;
  letter-spacing: .2em; color: var(--akzent);
  font-variant-numeric: tabular-nums;
}
.feld h3 { margin: 0; }
.feld__liste {
  list-style: none; margin: .35rem 0 0; padding: 0;
  display: grid; gap: .5rem; font-size: .9rem; color: var(--schrift-leise);
}
.feld__liste li { padding-left: 1.05rem; position: relative; }
.feld__liste li::before {
  content: ""; position: absolute; left: 0; top: .66em;
  width: 5px; height: 1px; background: var(--akzent);
}

/* Prozess als waagerechte Linie (How We Work) */
.prozess {
  display: grid; gap: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--linie);
}
@media (max-width: 900px) { .prozess { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .prozess { grid-template-columns: 1fr; } }
.prozess__schritt {
  padding: 1.75rem 1.5rem 1.9rem 0; position: relative;
}
.prozess__schritt::before {
  content: ""; position: absolute; left: 0; top: -1px;
  width: 9px; height: 1px; background: var(--akzent);
}
.prozess__nr {
  display: block; font-size: .705rem; font-weight: 500; letter-spacing: .2em;
  color: var(--akzent); font-variant-numeric: tabular-nums; margin-bottom: .7rem;
}
.prozess__schritt h3 { margin: 0 0 .5rem; font-size: 1.16rem; }
.prozess__schritt p { margin: 0; font-size: .875rem; color: var(--schrift-leise); }

/* Sector-Panel: großes Bild, daneben Text (Ausführungsplanung Abschnitt 19) */
.panel {
  display: grid; gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: center;
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
  border-top: 1px solid var(--linie);
}
.panel:first-of-type { border-top: 0; }
.panel--gedreht > .panel__medium { order: 2; }
/* Panel ohne Bildmaterial: einspaltig statt mit leerer Spalte. */
.panel--ohne-bild { grid-template-columns: minmax(0, 1fr); }
.panel--ohne-bild > .panel__medium { display: none; }
.panel--ohne-bild .panel__satz,
.panel--ohne-bild .panel__stichworte { max-width: 62ch; }
@media (max-width: 880px) {
  .panel { grid-template-columns: 1fr; }
  .panel--gedreht > .panel__medium { order: 0; }
}
.panel__nr {
  font-family: var(--display); font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 300; line-height: 1; color: var(--akzent);
  opacity: .55; display: block; margin-bottom: .5rem;
}
.panel__satz {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.35;
  color: var(--schrift-leise); margin: 0 0 1.25rem; max-width: 34ch;
}
.panel__stichworte {
  list-style: none; margin: 1.25rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.panel__stichworte li {
  font-size: .755rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--schrift-leise);
  padding: .4rem .75rem; border: 1px solid var(--linie-zart);
}

/* Cases: großes Bild, große Nummer, Sektor, Leitsatz, dann das Datenblatt.
   Die Seiten wechseln sich ab, damit beim Scrollen ein Rhythmus entsteht. */
.case {
  display: grid; gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
  border-top: 1px solid var(--linie);
}
.case:nth-of-type(even) > .case__medium { order: 2; }
@media (max-width: 880px) {
  .case { grid-template-columns: 1fr; }
  .case:nth-of-type(even) > .case__medium { order: 0; }
}
.case__text { align-self: center; }
.case__nr {
  display: flex; align-items: baseline; gap: .9rem; margin: 0 0 .6rem;
  font-family: var(--display); font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: 300; line-height: 1; color: var(--akzent);
}
.case__nr span {
  font-family: var(--sans); font-size: .705rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--schrift-leise);
}
.case h2 { margin: 0 0 .5rem; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.case__claim {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem); line-height: 1.35;
  color: var(--schrift-leise); margin: 0; max-width: 34ch;
}

/* Kurzfassung der Cases auf der Startseite */
.fallliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.fallliste li {
  display: grid; gap: .3rem .9rem; align-items: baseline;
  grid-template-columns: auto 1fr;
  padding: 1.15rem 0; border-bottom: 1px solid var(--linie-zart);
}
.fallliste li:last-child { border-bottom: 0; }
.fallliste__nr {
  font-size: .705rem; font-weight: 500; letter-spacing: .18em;
  color: var(--akzent); font-variant-numeric: tabular-nums;
  grid-row: span 2;
}
.fallliste__sektor {
  font-size: .705rem; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--schrift-leise);
}
.fallliste__satz {
  grid-column: 2; font-family: var(--display); font-weight: 300;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.3;
}

/* Karte für Netzwerkbereiche, Insights, Cases */
.karte {
  display: grid; gap: .75rem; align-content: start;
  padding-top: 1.5rem; border-top: 1px solid var(--linie);
}
.karte h3 { margin: 0; }
.karte p { margin: 0; font-size: .9rem; color: var(--schrift-leise); }
.karte__marke {
  font-size: .705rem; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--akzent);
}

/* Formatbeschreibung als Datenblatt (Abschnitt 25) */
.formatblatt {
  display: grid; gap: 0; border-top: 1px solid var(--linie);
}
.formatblatt__zeile {
  display: grid; grid-template-columns: minmax(7rem, 13rem) minmax(0, 1fr);
  gap: 1rem clamp(1rem, 3vw, 2.5rem);
  padding: 1rem 0; border-bottom: 1px solid var(--linie-zart);
}
@media (max-width: 560px) { .formatblatt__zeile { grid-template-columns: 1fr; gap: .25rem; } }
.formatblatt__marke {
  font-size: .705rem; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--schrift-leise); padding-top: .25rem;
}
.formatblatt__wert { margin: 0; font-size: 1rem; }

/* Große Aussage zwischen zwei Bildern */
.aussage {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.8rem, 4.4vw, 3.6rem); line-height: 1.12;
  letter-spacing: -.012em; margin: 0; max-width: 20ch;
}
.aussage em { font-style: italic; color: var(--akzent); }

.kennzahl { display: grid; gap: .3rem; }
.kennzahl__wert {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; letter-spacing: -.02em;
}
.kennzahl__text { font-size: .82rem; color: var(--schrift-leise); letter-spacing: .04em; }

/* Kontaktzeile */
.kontaktliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.kontaktliste li { display: flex; gap: .85rem; align-items: flex-start; }
.kontaktliste svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: .28rem; color: var(--akzent); }
.kontaktliste a { text-decoration: none; }
.kontaktliste a:hover { text-decoration: underline; }
.kontaktliste__marke {
  display: block; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--schrift-leise); margin-bottom: .2rem;
}

/* Rechtstexte */
.rechtstext { max-width: 72ch; }
.rechtstext h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-top: 2.75rem; }
.rechtstext h3 { font-size: 1.1rem; margin-top: 1.9rem; }
.rechtstext ul { padding-left: 1.2rem; }
.rechtstext li { margin-bottom: .45rem; }
.rechtstext address { font-style: normal; }

/* 11  Formular ------------------------------------------------------------ */

.formular { display: grid; gap: 1.5rem; }
.formular__reihe {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.feldgruppe { display: grid; gap: .5rem; }
.feldgruppe label {
  font-size: .705rem; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--schrift-leise);
}
.feldgruppe input, .feldgruppe textarea {
  font-family: var(--sans); font-size: 1rem; color: var(--schrift);
  background: none; border: 0; border-bottom: 1px solid var(--linie);
  padding: .7rem 0; width: 100%; border-radius: 0;
  transition: border-color .22s var(--ease);
}
.feldgruppe textarea { resize: vertical; min-height: 7.5rem; line-height: 1.6; }
.feldgruppe input:focus, .feldgruppe textarea:focus {
  outline: none; border-bottom-color: var(--akzent);
}
.feldgruppe input:focus-visible, .feldgruppe textarea:focus-visible {
  outline: 2px solid var(--akzent); outline-offset: 4px;
}
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.meldung {
  padding: 1rem 1.25rem; border-left: 2px solid var(--akzent);
  background: var(--grund-2); font-size: .92rem;
}
.meldung--fehler { border-left-color: #a8342b; }

/* 12  Entwurfsmodus ------------------------------------------------------- */

.notiz {
  display: flex; gap: .9rem; align-items: flex-start;
  margin: 2rem 0; padding: 1rem 1.25rem;
  border: 1px dashed var(--akzent); background: color-mix(in srgb, var(--akzent) 7%, transparent);
  font-size: .875rem; line-height: 1.6;
}
.notiz svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: .18rem; color: var(--akzent); }
.notiz p { margin: 0; }

.platzhalter {
  display: grid; place-content: center; justify-items: center; gap: .6rem;
  padding: 2rem; text-align: center;
  border: 1px dashed var(--linie); background: var(--grund-2);
  color: var(--schrift-leise);
}
.platzhalter svg { width: 30px; height: 30px; opacity: .55; }
.platzhalter__label {
  margin: 0; font-size: .74rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
}
.platzhalter__hint { margin: 0; font-size: .82rem; max-width: 42ch; line-height: 1.55; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--3x2  { aspect-ratio: 3 / 2; }
.media--4x5  { aspect-ratio: 4 / 5; }
.media--21x9 { aspect-ratio: 21 / 9; }

.rechte-badge {
  position: absolute; left: .75rem; top: .75rem; z-index: 3;
  pointer-events: none;
  margin: 0; display: inline-flex; align-items: center; gap: .5rem;
  padding: .3rem .6rem; background: rgba(10, 22, 36, .84);
  color: #f0ede6; font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; border: 1px dashed rgba(201, 164, 106, .8);
}
.rechte-badge span { color: #d8b87f; font-weight: 600; }
.hero__media .rechte-badge { left: auto; right: .75rem; top: auto; bottom: 4.5rem; }
@media (max-width: 700px) {
  .hero__media .rechte-badge { left: .75rem; right: auto; top: 5.2rem; bottom: auto; }
}

/* 13  Bewegung ------------------------------------------------------------ */

/* Ausgeblendet wird nur, wenn main.js tatsächlich läuft und die Elemente
   später auch wieder einblenden kann. Bleibt das Skript aus – blockiert,
   fehlerhaft, langsames Netz –, steht der Inhalt einfach da. */
.js-reveal .reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.js-reveal .reveal.is-in { opacity: 1; transform: none; }
.js-reveal .reveal[data-verzug="1"] { transition-delay: .09s; }
.js-reveal .reveal[data-verzug="2"] { transition-delay: .18s; }
.js-reveal .reveal[data-verzug="3"] { transition-delay: .27s; }
.js-reveal .reveal[data-verzug="4"] { transition-delay: .36s; }

/* Sehr langsamer Ken-Burns auf Hero-Bildern */
.js-reveal .hero__media img { transform: scale(1.04); transition: transform 14s linear; }
.js-reveal .hero.is-in .hero__media img { transform: scale(1); }

/* Ohne Skript fehlt --laenge; dann stehen die Bahnen einfach fertig da. */
html.no-js .ecosystem__bahn { stroke-dasharray: none; stroke-dashoffset: 0; }
html.no-js .ecosystem__buehne,
html.no-js .ecosystem__label,
html.no-js .ecosystem__funke { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
  .js-reveal .hero__media img,
  .js-reveal .hero.is-in .hero__media img { transform: none; transition: none; }
  .ecosystem__bahn { stroke-dashoffset: 0; transition: none; }
  .ecosystem__buehne, .ecosystem__label { opacity: 1; transform: none; transition: none; }
  .ecosystem__halo, .ecosystem__knoten, .ecosystem__welle,
  .ecosystem__kern-welle { animation: none !important; }
  .ecosystem__halo { opacity: .8; }
  .ecosystem__welle, .ecosystem__kern-welle { opacity: 0; }
  .btn svg, .textlink svg { transition: none; }
}