/* =====================================================================
   Geräterettung — Institut für Gute Laune
   Landingpage 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. Die einzige Farbe
   außerhalb des Logos steckt im Foto von Paul.

   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-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --size-h3: clamp(1.1875rem, 1.05rem + .5vw, 1.375rem);
  --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, .seite h2, .seite h3, .seite ol, .seite figure { margin: 0; }
.seite ol { padding: 0; }
.seite img { display: block; max-width: 100%; height: auto; border-radius: 0; }
.seite ::selection { background: var(--blau); color: var(--wand); }
.seite { caret-color: var(--pink); }

.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, .seite button:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

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

/* ---------- Überschriften ---------- */

.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 h2 {
  font-family: var(--font-titel);
  font-size: var(--size-h2);
  font-weight: 600; line-height: 1.15; letter-spacing: -0.005em;
  color: var(--blau);
  text-wrap: balance;
  hyphens: auto;
}
.seite h3 {
  font-family: var(--font-titel);
  font-size: var(--size-h3);
  font-weight: 600; line-height: 1.3;
  color: var(--tinte);
}

.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; }

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

.seite .knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  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 .knopf svg { flex: none; }

.seite .knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Die Nummer zum Abschreiben — nicht jeder mag den Knopf. */
.seite .nummer {
  margin-top: var(--normal);
  font-size: var(--size-small);
  color: var(--tinte-leise);
}
.seite .nummer a { font-weight: 700; white-space: nowrap; }

/* ---------- 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 ---------- */

.seite .anschlag {
  margin-top: var(--weit);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--weit);
  align-items: center;
}
.seite .anschlag .knopfreihe { margin-top: var(--weit); }

.seite .paul-foto { width: 100%; aspect-ratio: 4 / 5; }
.seite .paul-foto img { width: 100%; height: 100%; object-fit: cover; }

.seite figcaption { margin-top: var(--eng); font-size: var(--size-small); line-height: 1.45; color: var(--tinte-leise); }

/* ---------- Abschnitte ---------- */

.seite .abschnitt { margin-top: var(--raum); }

.seite .paar {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--normal) var(--weit);
  align-items: start;
}
.seite .paar h2 { max-width: 16ch; }

/* ---------- Die vier Schritte ---------- */

.seite .schritte { list-style: none; padding: 0; margin: 0; max-width: var(--mass-text); }
.seite .schritte li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--normal);
  padding-block: var(--normal);
  border-top: 1px solid var(--linie);
}
.seite .schritte li:last-child { border-bottom: 1px solid var(--linie); }
.seite .schritt-nr {
  font-family: var(--font-titel);
  font-weight: 600;
  font-size: 1.75rem;
  color: var(--blau);
  line-height: 1.2;
}
.seite .schritte h3 { margin-bottom: 6px; }
.seite .schritte p { color: var(--tinte); max-width: 52ch; }

/* ---------- Schluss ---------- */

.seite .schluss {
  margin-top: var(--raum);
  border-top: 1px solid var(--linie);
  padding-top: var(--raum);
  text-align: center;
}
.seite .schluss h2 { max-width: none; margin-inline: auto; }
.seite .schluss .lead { margin-inline: auto; }
.seite .schluss .knopfreihe { margin-top: var(--weit); justify-content: center; }
.seite .schluss-hinweis { margin-top: var(--normal); font-size: var(--size-small); color: var(--tinte-leise); }

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

.seite .fuss {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px var(--normal);
  padding-block: var(--weit);
  margin-top: var(--raum);
  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 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 .anschlag, .seite .paar { grid-template-columns: minmax(0, 1fr); }
  .seite h1 { max-width: none; }
  .seite .paar h2 { max-width: none; }
  /* Das Foto bleibt UNTER der Überschrift. Die Botschaft kommt zuerst,
     die Aufforderung als zweites - erst danach das Gesicht dazu. */
  .seite .anschlag figure { max-width: 320px; margin-inline: auto; }
}

@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); }
}