/* =========================================================
   GRUNDLAGEN — Reset, Schriften, Variablen, Basiselemente
   ========================================================= */

/* =========================
   1. RESET
========================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =========================
   2. SCHRIFTEN
========================= */
/* JetBrains Mono wie auf der Visitenkarte:
   Light 300 = Fließtext, Medium 500 = h2 und Untertitel im h1, SemiBold 600 = h1 */
@font-face {
  font-family: 'jetbrains';
  src: url('/statisch/schriften/JetBrainsMono-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'jetbrains';
  src: url('/statisch/schriften/JetBrainsMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'jetbrains';
  src: url('/statisch/schriften/JetBrainsMono-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* =========================
   3. VARIABLEN
========================= */
:root {
  /* Farben */
  --color-text: #1e293b;
  --color-heading: #1e1e1e;
  --color-bg: #ffffff;
  --color-accent: #f0e3ea;
  --color-light: #f4f4f5;
  --color-shadow: rgba(0,0,0,0.1);
  --color-box: #f7f7f7;
  --color-muted: #666;
  --color-link: #555;
  --color-star: #fcbc05;
  --color-dark: #1e1e1e;

  /* Markenfarben (Logo 2.0 / Visitenkarte) */
  --brand-blau: #009bdb;
  --brand-rosa: #ea80cf;
  /* etwas dunkler für Schrift, damit der Kontrast auf Weiß reicht */
  --brand-blau-text: #0a86c0;
  --brand-rosa-text: #b5609f;
  --brand-wabern-dauer: 8s;

  /* Abstand zwischen den großen Abschnitten (ab Tablet größer, siehe responsiv.css) */
  --abschnitt-abstand: 80px;

  /* Typografie */
  --font-heading: 'jetbrains', ui-monospace, monospace;
  --font-body: 'jetbrains', ui-monospace, monospace;
  --h1-size: 3rem;
  --h2-size: 2.2rem;
  --h3-size: 1rem;
  --h1-weight: 600;
  --h2-weight: 500;
  --h3-weight: 600;

  /* Layout & Abstände */
  --max-width: 1100px;
  --container-padding: 1rem;
  --text-align: center;

  /* Schatten & Effekte */
  --shadow-light: 0 2px 5px var(--color-shadow);
  --inner-shadow-light: inset 0 2px 6px rgba(0,0,0,0.08);

  /* UI */
  --radius: 8px;
  --transition-fast: 0.3s ease;
}

/* =========================
   4. BASIS
========================= */
body {
  font-family: var(--font-body);
  font-weight: 300; /* Light für den ganzen Fließtext */
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text);
  max-width: 100%;
  background-color: var(--color-box); /* vorher doppelt gesetzt — dieser Wert gewann */
}

p {
  max-width: 90ch;
}

/* Die drei Kartentypen der Seite */
.innerbox {
  background: var(--color-bg);
  padding: 2rem 1rem;
  border-radius: var(--radius);
  box-shadow: var(--inner-shadow-light);
  margin: 1rem;
}

.outbox {
  background: var(--color-bg);
  padding: 2rem 1rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-light);
  margin: 1rem;
}

.outbox-rectangle {
  background: var(--color-bg);
  padding: 1rem 1rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-light);
  margin: 1rem;
}

/* =========================
   5. BILDER — globale Basis (mobile first)
   Komponentenspezifische Bildgrößen: stil.css → "Bilder & Medien"
========================= */
img,
picture img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
}

.spine-image img {
  max-width: 90px;
  margin: 0 auto;
}

.finance picture img,
.reviews img,
.ablauf-picture img,
.quellen-picture img {
  margin-bottom: 50px;
}

/* =========================
   6. TYPOGRAFIE
========================= */
h1, h2, h3 {
  color: var(--color-heading);
  margin: 1rem 0;
  /* lange Wörter wie „Datenschutzerklärung“ auf dem Handy trennen statt überlaufen */
  overflow-wrap: break-word;
  hyphens: auto;
}

h1 {
  font-family: var(--font-heading);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
}

h2 {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  padding: 0.4em 0.8em;
  text-align: center;
  font-family: var(--font-heading);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  color: var(--color-heading);
  background: var(--color-bg);
  margin: 1.3rem auto;
  box-shadow: var(--shadow-light);
  border-radius: var(--radius);
  transition: all var(--transition-fast);
}

h3 {
  font-family: var(--font-body);
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
}