/* =========================================================
   HARMONI - Webauftritt des Interreg-Projekts INTGR2200497
   Gemeinsames Stylesheet fuer alle Seiten und alle Sprachen

   Schriften: IBM Plex Sans und IBM Plex Mono, SIL Open Font
   License 1.1, selbst gehostet. Es werden keine externen
   Dienste eingebunden - siehe README.
   ========================================================= */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("schriften/ibm-plex-sans-latin-400.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: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("schriften/ibm-plex-sans-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("schriften/ibm-plex-sans-latin-500.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: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("schriften/ibm-plex-sans-latin-ext-500.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("schriften/ibm-plex-sans-latin-600.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: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("schriften/ibm-plex-sans-latin-ext-600.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("schriften/ibm-plex-mono-latin-400.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: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("schriften/ibm-plex-mono-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("schriften/ibm-plex-mono-latin-500.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: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("schriften/ibm-plex-mono-latin-ext-500.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("schriften/source-serif-4-latin-400.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: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("schriften/source-serif-4-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("schriften/source-serif-4-latin-600.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: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("schriften/source-serif-4-latin-ext-600.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* =========================================================
   Farben

   Die Palette ist nicht frei gewaehlt. Der Kommunikations-
   leitfaden des Programms (Fassung 13.11.2024, Kapitel VI)
   schreibt Reflex Blue und Hellblau als Hauptfarben aller
   Kommunikationsmittel vor; Gelb ist nur als Akzent erlaubt.
   Dazu kommt die feste Farbe der Prioritaetsachse 2
   "Eine sozialere Grossregion" - #DA5C57 - unter der HARMONI
   laeuft. Der Leitfaden erlaubt ausdruecklich, den Projekt-
   namen in der Farbe des thematischen Ziels zu setzen.
   Bitte diese sechs Werte nicht veraendern.

   Kein Dunkelmodus: das Interreg-Logo ist in der Vollfarb-
   version auf weissem oder hellem Grund zu zeigen. Ein
   dunkles Schema wuerde die weisse Logofassung erfordern
   und die Pflicht unnoetig gefaehrden.
   ========================================================= */
:root {
  --reflex:       #003399;  /* Reflex Blue, Grundfarbe des Programms */
  --reflex-dunkel:#002875;
  --reflex-wash:  #E9ECFA;
  --hellblau:     #9FAAEE;
  --achse2:       #DA5C57;  /* Prioritaetsachse 2, Projektfarbe */
  --achse2-ink:   #A63A36;  /* dieselbe Farbe, abgedunkelt fuer Text */
  --achse2-wash:  #FBEDEC;
  --gelb:         #FFCC00;  /* EU-Gelb, nur als Akzent */

  --papier:       #FFFFFF;
  --grund:        #F6F7FB;
  --flaeche:      #EDF0F9;
  --ink:          #10162E;
  --ink-soft:     #4E5878;
  --linie:        #D9DEEE;
  --linie-stark:  #7F8BB8;  /* 3,3:1 auf Weiss - WCAG 1.4.11 fuer Rahmen und die Pflicht-Trennlinie */
  --fokus:        #A63A36;

  /* Hoechste zulaessige Hoehe fuer JEDES fremde Logo auf der Seite.

     Leitfaden Kapitel II: "Werden neben dem Emblem weitere Logos
     dargestellt, so muss das Emblem mindestens genauso hoch bzw. breit
     wie das groesste der anderen Logos sein."

     Im Interreg-Logo (1903x574 px) nimmt das EU-Emblem 291x194 px ein,
     also 33,8 % der Bildhoehe. Bei einer Logobreite W ist die Bildhoehe
     W*574/1903, die Emblemhoehe also 0,1019*W. Daraus die Regel:

         Interreg-Logobreite >= 9,81 x Partnerlogohoehe

     Hier: Logo 16 rem breit -> Emblem 1,63 rem hoch -> Partnerlogos
     1,5 rem. Wer diesen Wert erhoeht, muss das Interreg-Logo im
     gleichen Verhaeltnis mitwachsen lassen. */
  --partnerlogo-h: 1.5rem;

  --ff-display: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --ff-body: "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --ff-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --maxw: 74rem;
  --gutter: clamp(1.1rem, 4vw, 3rem);
  --measure: 80ch;
  /* Hinweis- und Foerderkaesten laufen etwas breiter als der
     Fliesstext, damit sie sich abheben - aber nicht ueber die
     ganze Seite, sonst werden die Zeilen zu lang. */
  --kasten: 92ch;

  --step--1: clamp(0.8rem, 0.78rem + 0.12vw, 0.875rem);
  --step-0:  clamp(1rem, 0.97rem + 0.18vw, 1.07rem);
  --step-1:  clamp(1.14rem, 1.08rem + 0.3vw, 1.3rem);
  --step-2:  clamp(1.38rem, 1.24rem + 0.66vw, 1.8rem);
  --step-3:  clamp(1.75rem, 1.48rem + 1.3vw, 2.5rem);
  --step-4:  clamp(2.2rem, 1.7rem + 2.4vw, 3.6rem);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); }

p, ul, ol, figure, table { margin: 0; }

a { color: var(--reflex); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--reflex-dunkel); }

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

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

code, .mono { font-family: var(--ff-mono); font-size: 0.9em; }
/* --ff-mono steht bewusst NUR noch hier: fuer technische
   Zeichenketten wie Adressen von Instanzen oder https://.
   Alles andere - Etiketten, Kennungen, Tabellenkoepfe - laeuft in
   der Grotesk, damit im Bild nur zwei Schriften stehen. */

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.prosa { max-width: var(--measure); }

/* Nur fuer Screenreader */
.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.skip {
  position: absolute; left: 0; top: 0; z-index: 60;
  transform: translateY(-120%);
  background: var(--reflex); color: #fff;
  padding: 0.6rem 1rem; text-decoration: none;
}
.skip:focus { transform: translateY(0); }

.eyebrow {
  font-family: var(--ff-display);
  font-size: var(--step-1);
  font-style: italic;
  font-weight: 400;
  line-height: 1.25;
  color: var(--achse2-ink);
}
/* In der Fusszeile und an Datenzeilen bleibt das kleine Monolabel. */
.fuss .eyebrow,
.fuss__spalte h3 {
  font-family: var(--ff-body);
  font-size: var(--step--1);
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* =========================================================
   Kopfzeile - die publizitaetskritische Stelle

   Drei Regeln des Leitfadens greifen hier gleichzeitig:
   1. Das Interreg-Logo muss beim Aufruf ohne Scrollen
      sichtbar sein (Kapitel III, Internetseiten).
   2. Der Projektname darf nie ueber dem Interreg-Logo
      stehen, beide werden durch eine duenne gerade Linie
      getrennt (Kapitel V).
   3. Das EU-Emblem muss mindestens so hoch bzw. breit sein
      wie das groesste andere Logo der Seite (Kapitel II).
      Deshalb sind Partnerlogos im Fuss auf --partnerlogo-h
      begrenzt.

   Die Kopfzeile bleibt reinweiss, damit das Logo nie auf
   farbigem Grund oder einem Bild liegt.
   ========================================================= */
/* Die Kopfzeile bleibt beim Scrollen stehen. Das ist nicht nur
   Bequemlichkeit: der Leitfaden verlangt, dass das Interreg-Logo beim
   Aufruf ohne Scrollen sichtbar ist - so bleibt es durchgehend sichtbar.

   Das Logo wird dabei bewusst NICHT verkleinert. Die Groessenregel
   koppelt die Hoehe der Partnerlogos an die Logobreite (siehe Rechnung
   ueber --partnerlogo-h); ein schrumpfendes Logo wuerde die Regel im
   gescrollten Zustand verletzen.

   Auf sehr flachen Fenstern wird die Fixierung abgeschaltet, damit vom
   Inhalt noch etwas uebrig bleibt. */
.kopf {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--papier);
  border-bottom: 1px solid var(--linie);
}
@media (max-height: 34rem) {
  .kopf { position: static; }
}

/* Sprungziele nicht unter die fixierte Kopfzeile rutschen lassen */
[id] { scroll-margin-top: 12rem; }
@media (max-height: 34rem) {
  [id] { scroll-margin-top: 1rem; }
}
.kopf__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 1.5rem;
  padding-block: 1.1rem 0;
}

/* Die Sperrmarke: Interreg-Logo, Trennlinie und Projektname stehen als
   eine Zeichnung nebeneinander. Der Leitfaden erlaubt die waagerechte
   Anordnung ausdruecklich (Kapitel V), verlangt dafuer aber eine duenne
   gerade Linie dazwischen, Mindestraender von einer Emblembreite auf
   beiden Seiten der Linie und den Namen mit der Grundlinie auf der
   Grundlinie der Interreg-Buchstaben. Genau das steckt in der Datei -
   alle Masze sind in logo/werkzeug/sperrmarke.py am gelieferten Logo
   nachgemessen, nicht geschaetzt. Deshalb steht hier nur noch, wie
   breit die Zeichnung sein soll; an den Verhaeltnissen darin ist
   nichts mehr einzustellen.

   29rem ist so gewaehlt, dass der Interreg-Teil darin so gross bleibt
   wie das fruehere Einzellogo mit 16rem: der sichtbare Block misst
   0,549 der Gesamtbreite. */
.marke { display: flex; align-items: flex-start; }
.marke__bild { display: block; }
.marke__bild img {
  display: block;
  width: 29rem;
  max-width: 100%;
  height: auto;
}

/* Schmale Fenster: dieselbe Marke uebereinander. Auch diese Anordnung
   gibt der Leitfaden vor, und sie bleibt lesbar, wo die breite Fassung
   zu einem Strich zusammenschrumpfen wuerde. */
@media (max-width: 46rem) {
  .marke__bild img { width: 15rem; }
}

/* Sehr schmale Fenster: dort greift max-width, die Marke wird also
   kleiner. Damit das EU-Emblem das groesste Logo bleibt, sinkt die
   erlaubte Hoehe der Partnerlogos mit. */
@media (max-width: 22rem) {
  :root { --partnerlogo-h: 1.2rem; }
}

/* Sprachumschalter an fester Stelle, auf jeder Breite sichtbar */
.sprachen {
  margin-left: auto;
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--ff-body);
  font-size: var(--step--1);
}
.sprachen a { color: var(--reflex); text-decoration: none; border-bottom: 1px solid transparent; }
.sprachen a:hover { border-bottom-color: var(--reflex); }
.sprachen__aktiv { color: var(--ink); font-weight: 500; }
.sprachen__trenner { color: var(--linie-stark); }

.nav__toggle {
  align-self: flex-start;
  font: inherit;
  font-size: var(--step--1);
  font-family: var(--ff-body);
  background: var(--papier);
  color: var(--ink);
  border: 1px solid var(--linie-stark);
  border-radius: 3px;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
}

.nav {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.4rem;
  margin-top: 1rem;
  border-top: 1px solid var(--linie);
  padding-top: 0.5rem;
}
.nav a {
  padding: 0.45rem 0;
  font-size: var(--step--1);
  text-decoration: none;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--achse2); }
/* nav.js macht den Knopf sichtbar und haengt .nav--collapsible an die
   Navigation. Ab wann eingeklappt wird, entscheidet aber das
   Stylesheet - sonst waere die Navigation auch auf breiten Fenstern
   hinter dem Knopf versteckt. */
.nav__toggle { display: none; }

@media (max-width: 62rem) {
  .nav__toggle { display: inline-block; }
  .nav--collapsible {
    display: none;
    flex-direction: column;
    gap: 0;
    margin-top: 0.9rem;
    border-top: 1px solid var(--linie);
  }
  .nav--collapsible.is-open { display: flex; }
  .nav--collapsible a {
    padding-block: 0.7rem;
    padding-left: 0.6rem;
    border-bottom: 1px solid var(--linie);
    border-left: 2px solid transparent;
  }
  .nav--collapsible a[aria-current="page"] {
    border-bottom-color: var(--linie);
    border-left-color: var(--achse2);
  }
}

/* ---------- Seitenkopf ---------- */
.seitenkopf { background: var(--papier); border-bottom: 1px solid var(--linie); }
.seitenkopf__inner { padding-block: clamp(2rem, 5vw, 3.6rem); display: flex; flex-direction: column; gap: 0.9rem; }
.seitenkopf h1 { max-width: 34ch; }
.lede { font-size: var(--step-2); line-height: 1.4; max-width: 52ch; }
.seitenkopf p:not(.lede):not(.eyebrow):not(.foerderzeile) { max-width: var(--measure); color: var(--ink-soft); }

/* Foerderzeile: Pflichtangabe, deshalb im ersten Bildschirm */
.foerderzeile {
  background: var(--reflex-wash);
  border-left: 3px solid var(--reflex);
  padding: 0.9rem 1.15rem;
  font-size: var(--step-0);
  line-height: 1.55;
  max-width: var(--kasten);
}
.foerderzeile b { color: var(--reflex-dunkel); }

/* ---------- Abschnitte ---------- */
.abschnitt { padding-block: clamp(2rem, 5vw, 3.4rem); border-top: 1px solid var(--linie); }
.abschnitt:first-child { border-top: 0; }
.stapel { display: flex; flex-direction: column; gap: 1.1rem; }

/* ---------- Karten ---------- */
.karten { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); }
.karte {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: 4px;
  padding: 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.karte h3 { color: var(--reflex); }
.karte p { font-size: var(--step--1); line-height: 1.55; color: var(--ink-soft); }
.karte__mehr { margin-top: auto; font-size: var(--step--1); font-weight: 500; }

/* Karte als Ganzes anklickbar, ohne die Verschachtelung von Links */
a.karte { text-decoration: none; color: inherit; }
a.karte:hover { border-color: var(--linie-stark); background: var(--papier); }
a.karte:hover h3 { color: var(--reflex-dunkel); }
a.karte .karte__mehr { color: var(--reflex); }

/* ---------- Zahlen ---------- */
.zahlen {
  list-style: none; padding: 0;
  display: grid; gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
  border-radius: 4px;
  overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.zahlen li { background: var(--papier); padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.15rem; }
.zahlen b { font-size: var(--step-1); font-weight: 600; font-variant-numeric: tabular-nums; }
.zahlen span { font-size: var(--step--1); line-height: 1.4; color: var(--ink-soft); }

/* ---------- Standorte ---------- */
.standorte {
  list-style: none; padding: 0;
  display: grid; gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
  border-radius: 4px;
  overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.standorte li { background: var(--papier); padding: 0.95rem 1rem; display: flex; flex-direction: column; gap: 0.3rem; }
/* Partnerlogo am Stuetzpunkt. Hoehe kommt aus dem globalen Token,
   damit die Groessenregel nicht versehentlich gebrochen wird. */
.standorte img, .standort-logo {
  display: block;
  /* align-self ist noetig: in einer Flex-Spalte wuerde das Bild sonst
     auf die Spaltenbreite gestreckt und das Logo verzerrt. */
  align-self: flex-start;
  height: var(--partnerlogo-h);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.standort-logo { margin-bottom: 0.5rem; }
.standorte .land { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--achse2-ink); }
.standorte b { font-size: var(--step-0); }
.standorte span { font-size: var(--step--1); line-height: 1.45; color: var(--ink-soft); }

/* ---------- Ausstattungskatalog ----------
   Was steht an welchem Standort. Gleiche Anmutung wie die
   Stuetzpunktliste, aber mit Zustandskennzeichnung. */
.ausstattung {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
  border-radius: 4px;
  overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.ausstattung li {
  background: var(--papier);
  padding: 0.95rem 1rem;
  display: flex; flex-direction: column; gap: 0.3rem;
}
.ausstattung__ort {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--achse2-ink);
}
.ausstattung b { font-size: var(--step-0); }
.ausstattung li > span:not([class]) {
  font-size: var(--step--1); line-height: 1.45; color: var(--ink-soft);
}
.ausstattung__status {
  align-self: flex-start;
  margin-top: 0.15rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 0.12rem 0.5rem; border-radius: 999px;
}
.ausstattung__status--da {
  background: var(--reflex-wash); color: var(--reflex-dunkel);
  border: 1px solid color-mix(in srgb, var(--reflex) 30%, transparent);
}
.ausstattung__status--offen {
  background: var(--flaeche); color: var(--ink-soft);
  border: 1px solid var(--linie-stark);
}

/* ---------- Termin-Kacheln ---------- */
.termine {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.termin {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--achse2);
  border-radius: 4px;
  padding: 1rem 1.1rem;
  display: flex; flex-direction: column; gap: 0.35rem;
}
.termin__datum {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--achse2-ink);
  font-variant-numeric: tabular-nums;
}
.termin b { font-size: var(--step-1); }
.termin > span:not([class]) {
  font-size: var(--step--1); line-height: 1.5; color: var(--ink-soft);
}
.termin__angaben {
  margin-top: auto; padding-top: 0.4rem;
  border-top: 1px solid var(--linie);
  font-size: var(--step--1); color: var(--ink-soft);
}

/* ---------- Hinweiskaesten ---------- */
/* Hinweiskasten laeuft ueber die volle Spaltenbreite. */
.hinweis {
  background: var(--reflex-wash);
  border-left: 3px solid var(--reflex);
  padding: 0.9rem 1.15rem;
  font-size: var(--step-0);
  line-height: 1.6;
  max-width: var(--kasten);
}
.leer {
  background: var(--flaeche);
  border: 1px dashed var(--linie-stark);
  border-radius: 4px;
  padding: 1.1rem 1.2rem;
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: var(--kasten);
}

ul.liste { padding-left: 1.15rem; display: flex; flex-direction: column; gap: 0.4rem; }
ul.liste li::marker { color: var(--achse2); }

/* ---------- Tabellen ---------- */
.tabelle { overflow-x: auto; border: 1px solid var(--linie); border-radius: 4px; background: var(--papier); }
.tabelle table { border-collapse: collapse; width: 100%; font-size: var(--step--1); min-width: 34rem; }
.tabelle th, .tabelle td {
  text-align: left;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
  line-height: 1.45;
}
.tabelle thead th {
  background: var(--flaeche);
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.tabelle tbody tr:last-child td { border-bottom: 0; }
.tabelle .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* =========================================================
   Fusszeile

   Traegt zwei Pflichtangaben: die Kurzbeschreibung des
   Vorhabens mit der Hoehe der Unterstuetzung und den Link
   zur Programmwebseite (Leitfaden Kapitel III).
   Partnerlogos sind in der Hoehe begrenzt, damit das
   EU-Emblem in der Kopfzeile das groesste Logo bleibt.
   ========================================================= */
.fuss {
  background: var(--papier);
  border-top: 1px solid var(--linie);
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.fuss__inner { padding-block: 2rem 2.5rem; display: flex; flex-direction: column; gap: 1.6rem; }
.fuss h2 { font-size: var(--step-1); }
.fuss p { font-size: var(--step--1); line-height: 1.6; color: var(--ink-soft); max-width: 92ch; }
/* "Ueber das Vorhaben": zwei Spalten auf breiten Fenstern. Nur die
   Zeilenlaenge zu vergroessern wuerde den Text schlechter lesbar
   machen; zwei Spalten nutzen die Breite und halten die Zeilen kurz. */
@media (min-width: 62rem) {
  .fuss__vorhaben { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 3rem; }
  .fuss__vorhaben h2 { grid-column: 1 / -1; }
  .fuss__vorhaben p { max-width: none; }
  .fuss__vorhaben p:last-child { grid-column: 1 / -1; }
}
.fuss__spalte { display: flex; flex-direction: column; gap: 0.4rem; }
.fuss__spalte h3 { font-size: var(--step--1); font-family: var(--ff-body); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.fuss__spalte a { font-size: var(--step--1); }
.fuss__recht { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: var(--step--1); border-top: 1px solid var(--linie); padding-top: 1rem; }

/* ---------- Externe Links ---------- */
a[target="_blank"]::after {
  content: "";
  display: inline-block;
  width: 0.72em; height: 0.72em;
  margin-left: 0.28em;
  background: currentColor;
  -webkit-mask: var(--ext-icon) no-repeat center / contain;
  mask: var(--ext-icon) no-repeat center / contain;
}
:root {
  --ext-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.4l-9.3 9.3-1.4-1.4L17.6 5H14V3z'/%3E%3Cpath d='M19 19H5V5h6V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-6h-2v6z'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}