/* =====================================================================
   Zusammenarbeit — Institut für Gute Laune
   Seite nach dem System „Weiße Wand, bunte Menschen".

   Institutsblau für alles Große, Tinte für den Fließtext, Pink nur bei
   Hover und Tastaturfokus. Radius 0, keine Schatten, keine Flächen —
   getrennt wird durch Weißraum und Haarlinien.

   Diese Seite hat kein Bild außer dem Logo. Das ist Absicht: Der Text ist
   kurz und spricht Organisationen an. Ein Foto wäre Dekoration, und
   Dekoration kostet Ladezeit.

   Alles hängt unter der Wurzelklasse .seite, damit weder Astra noch
   Elementor hineinregieren.
   ===================================================================== */

/* ---------- Schriften ----------
   Faustina 600 und Karla 400/700 liegen daneben in fonts/. Es wird kein
   fremder Server aufgerufen — weder Google noch sonst jemand. Das ist die
   Nachlade-Regel aus DESIGN.md und Voraussetzung dafür, dass Cookie-Hinweis
   und Datenschutzerklärung stimmen.
   Jeweils latin und latin-ext, kein Vietnamesisch, kein Kyrillisch. */

@font-face {
  font-family: 'Karla'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/Karla-400-normal-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/Karla-400-normal-latin-ext.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: 'Karla'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/Karla-700-normal-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/Karla-700-normal-latin-ext.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: 'Faustina'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/Faustina-600-normal-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Faustina'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/Faustina-600-normal-latin-ext.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;
}

/* ---------- Tokens ---------- */

.seite {
  --wand: #ffffff;
  --blau: #202a8c;            /* Institutsblau: alles Große */
  --blau-tief: #171f6b;       /* nur Hover des Knopfs */
  --tinte: #201e1d;           /* Fließtext */
  --tinte-leise: #6b6257;
  --linie: rgba(32, 42, 140, 0.18);
  --pink: #e0479b;            /* nur bei Berührung */

  --font: 'Karla', 'Helvetica Neue', Arial, sans-serif;
  --font-titel: 'Faustina', Georgia, serif;

  --size-display: clamp(1.9rem, 1.15rem + 3.1vw, 3rem);
  --size-lead: clamp(1.1875rem, 1.05rem + .6vw, 1.4375rem);
  --size-body: clamp(1.0625rem, 1rem + .2vw, 1.1875rem);
  --size-small: 0.875rem;
  --size-label: 0.75rem;

  --mass-text: 62ch;
  --mass-lead: 50ch;

  --eng: 8px;
  --normal: 24px;
  --weit: 56px;
  --raum: 96px;

  --breite: 1080px;
  --rand: 24px;

  background: var(--wand);
  color: var(--tinte);
  font-family: var(--font);
  font-size: var(--size-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- Grundlagen ---------- */

.seite *, .seite *::before, .seite *::after { box-sizing: border-box; }
.seite p, .seite h1 { margin: 0; }
.seite img { display: block; max-width: 100%; height: auto; border-radius: 0; }
.seite ::selection { background: var(--blau); color: var(--wand); }

.seite a { color: var(--blau); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; transition: color .15s ease; }
.seite a:hover { color: var(--pink); }
.seite a:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

.seite .huelle { max-width: var(--breite); margin: 0 auto; padding-inline: var(--rand); }

/* ---------- Überschrift und Text ---------- */

.seite h1 {
  font-family: var(--font-titel);
  font-size: var(--size-display);
  font-weight: 600; line-height: 1.1; letter-spacing: -0.015em;
  max-width: 19ch;
  color: var(--blau);
  text-wrap: balance;
  hyphens: auto;
}

.seite .eyebrow {
  font-family: var(--font);
  font-weight: 700;
  font-size: var(--size-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blau);
  margin-bottom: var(--eng);
}

.seite .lead { font-size: var(--size-lead); line-height: 1.5; max-width: var(--mass-lead); text-wrap: pretty; margin-top: var(--normal); }
.seite .text { max-width: var(--mass-text); text-wrap: pretty; margin-top: var(--normal); }

/* ---------- Knopf ---------- */

.seite .knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0.8em 1.7em;
  background: var(--blau); color: var(--wand);
  font-family: var(--font); font-weight: 700; font-size: 1.0625rem; line-height: 1.3;
  border: 1px solid var(--blau); border-radius: 0;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.seite .knopf:hover { background: var(--blau-tief); border-color: var(--blau-tief); color: var(--wand); }

.seite .knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: var(--weit); }

/* ---------- Kopf ---------- */

.seite .kopf {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px var(--normal);
  padding-block: 20px;
  border-bottom: 1px solid var(--linie);
}
.seite .marke { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.seite .marke img { width: 44px; height: auto; }
.seite .marke-text { font-family: var(--font); font-weight: 700; color: var(--tinte); font-size: var(--size-small); line-height: 1.2; }
.seite .marke-text span { display: block; color: var(--tinte-leise); font-weight: 400; }
.seite .kopf nav { font-size: var(--size-small); }
.seite .kopf nav a { text-decoration: none; }

/* ---------- Anschlag ----------
   Nur ein Block, einspaltig. Der Text ist kurz; eine zweite Spalte hätte
   nichts zu tragen. */

.seite .anschlag { margin-top: var(--weit); padding-bottom: var(--raum); }

/* ---------- Fuß ---------- */

.seite .fuss {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px var(--normal);
  padding-block: var(--weit);
  border-top: 1px solid var(--linie);
  font-size: var(--size-small);
  color: var(--tinte-leise);
}
.seite .fuss-marke { display: flex; align-items: center; gap: 10px; }
.seite .fuss-marke img { width: 30px; height: auto; }
.seite .fuss nav { display: flex; flex-wrap: wrap; gap: 6px var(--normal); }
.seite .fuss a { color: var(--tinte-leise); text-decoration: none; }
.seite .fuss a:hover { color: var(--pink); }

/* ---------- Schmale Geräte ---------- */

@media (max-width: 860px) {
  .seite { --raum: 64px; --weit: 36px; }
  .seite h1 { max-width: none; }
}

@media (max-width: 560px) {
  .seite { --rand: 20px; }
  .seite .knopfreihe .knopf { width: 100%; }
}

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

/* ---------- Druck ---------- */

@media print {
  .seite { --raum: 32px; --weit: 20px; }
  .seite .kopf, .seite .fuss nav { display: none; }
  .seite a { text-decoration: none; color: var(--tinte); }
}