/* Ratgeber: eigenes kleines Stylesheet, damit die Artikel ohne JavaScript und
   ohne das große Startseiten-Bundle laden. Farben, Schrift und Formen wie auf
   der Startseite (tailwind.config.js, src/index.css): dunkle Bühne oben mit
   Raster und rotem Schein, darunter eine helle Leseseite. */

@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url(/fonts/inter-400-latin.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url(/fonts/inter-600-latin.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 700; font-display: swap; src: url(/fonts/inter-700-latin.woff2) format('woff2'); }

:root {
  --tinte: #0E1424;
  --grau: #5B6475;
  --hell: #F6F6F3;
  --nacht: #0A0F1A;
  --kachel: #121826;
  /* Signalrot wie Flyer und App. --rot-tief für Links auf hellem Grund,
     --rot-satt für Knöpfe mit weißer Schrift, --rot-hell auf dunklem Grund. */
  --rot: #E0384A;
  --rot-satt: #D42F40;
  --rot-tief: #B82536;
  --rot-hell: #FF5C6C;
  --linie: rgba(14, 20, 36, 0.1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--nacht); }
body {
  margin: 0; background: var(--hell); color: var(--tinte); overflow-x: clip;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', Inter, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased; line-height: 1.6;
}
a { color: var(--rot-tief); }
img { max-width: 100%; height: auto; }

.rahmen { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.schmal { max-width: 760px; }
@media (min-width: 640px) { .rahmen { padding: 0 32px; } }

/* Kopf: Glas wie die Navigation der Startseite */
.kopf { position: sticky; top: 0; z-index: 10; background: rgba(10, 15, 26, 0.94); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; font-size: 18px; letter-spacing: -0.02em; }
.marke img { border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
.marke b { font-weight: 600; }
.marke i { font-style: normal; font-weight: 600; background: linear-gradient(90deg, #FF6B6B, #E0384A); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kopf nav { display: flex; align-items: center; gap: 28px; font-size: 14px; }
.kopf nav a { color: rgba(255, 255, 255, 0.75); text-decoration: none; transition: color 0.2s; }
.kopf nav a:hover { color: #fff; }
.nur-breit { display: none; }
@media (min-width: 720px) { .nur-breit { display: inline; } }

.knopf, .kopf nav a.knopf { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 9px 20px; background: var(--rot-satt); color: #fff; text-decoration: none; font-weight: 500; font-size: 15px; transition: background 0.2s, transform 0.1s; }
.knopf:hover { background: var(--rot-tief); }
.knopf:active { transform: scale(0.98); }
.knopf-rand { display: inline-flex; align-items: center; border-radius: 999px; padding: 9px 20px; color: var(--rot-hell); text-decoration: none; font-weight: 500; font-size: 15px; box-shadow: inset 0 0 0 1px rgba(255, 92, 108, 0.7); transition: background 0.2s, color 0.2s; }
.knopf-rand:hover { background: var(--rot-satt); color: #fff; }

/* Bühne: der dunkle Einstieg oben, wie der Hero der Startseite */
.buehne { position: relative; overflow: hidden; background: var(--nacht); color: #fff; }
.buehne::before { content: ''; position: absolute; right: -25%; top: -40%; width: 900px; height: 900px; border-radius: 50%; background: radial-gradient(circle, rgba(224, 56, 74, 0.26) 0%, rgba(150, 30, 50, 0.1) 40%, transparent 66%); pointer-events: none; }
.raster-bild {
  position: absolute; inset: 0; opacity: 0.5; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 70% 30%, black 10%, transparent 68%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 30%, black 10%, transparent 68%);
}
.buehne-innen { position: relative; padding-top: 28px; padding-bottom: 56px; }
.buehne-gross .buehne-innen { padding-bottom: 88px; }
@media (min-width: 640px) { .buehne-innen { padding-top: 36px; padding-bottom: 72px; } .buehne-gross .buehne-innen { padding-bottom: 120px; } }

/* Zurück-Knopf: gut zu treffen, auch mit dem Daumen */
.zurueck { display: inline-flex; align-items: center; gap: 4px; padding: 8px 16px 8px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.85); font-size: 14px; font-weight: 500; text-decoration: none; transition: background 0.2s, color 0.2s; }
.zurueck:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.pfad { margin-bottom: 36px; }

.augenbraue { color: var(--rot); font-weight: 600; font-size: 15px; margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.augenbraue::before { content: ''; width: 0.5em; height: 0.5em; border-radius: 99px; background: currentColor; flex-shrink: 0; }
h1 { font-size: clamp(2.1rem, 6vw, 4rem); line-height: 1.05; letter-spacing: -0.035em; font-weight: 600; margin: 10px 0 0; }
article h1 { font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.08; }
.verlauf-metall { background: linear-gradient(180deg, #ffffff 0%, #d2d5db 55%, #9a9ea6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.verlauf-rot { background: linear-gradient(100deg, #FF7468 0%, #F5505F 35%, #E0384A 70%, #D42F40 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vorspann { color: #8790A0; font-size: clamp(1.1rem, 1.9vw, 1.4rem); line-height: 1.4; font-weight: 600; letter-spacing: -0.022em; margin: 22px 0 0; max-width: 680px; }
.vorspann b { color: #fff; font-weight: 600; }
.buehne .meta { color: rgba(255, 255, 255, 0.55); margin: 18px 0 0; }

/* Übersicht */
.liste { padding: 56px 0 72px; }
@media (min-width: 640px) { .liste { padding: 72px 0 96px; } }
.karten { display: grid; gap: 16px; }
@media (min-width: 720px) { .karten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .karten { grid-template-columns: repeat(3, 1fr); } }
.karte { display: flex; flex-direction: column; gap: 10px; background: #fff; border-radius: 28px; padding: 28px; text-decoration: none; color: var(--tinte); transition: transform 0.25s, box-shadow 0.25s; }
.karte:hover { transform: translateY(-3px); box-shadow: 0 22px 50px -24px rgba(0, 0, 0, 0.3); }
.karte h3 { margin: 0; font-size: 21px; line-height: 1.25; letter-spacing: -0.022em; font-weight: 600; }
.karte p { margin: 0; color: var(--grau); font-size: 15px; line-height: 1.5; }
.karte .meta { margin-top: auto; padding-top: 10px; font-size: 13px; color: var(--grau); display: flex; align-items: center; gap: 4px; }
.karte .weiter { margin-left: auto; color: var(--rot-tief); font-weight: 600; font-size: 14px; }
.kat { font-size: 13px; font-weight: 600; color: var(--rot-tief); }
.leer { color: var(--grau); }

/* Artikel */
.meta { color: var(--grau); font-size: 14px; }
.text { font-size: 18px; line-height: 1.7; padding-top: 48px; color: #2A3142; }
.text > p:first-child { font-size: 20px; line-height: 1.6; color: var(--tinte); }
.text strong { color: var(--tinte); }
.text h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); letter-spacing: -0.025em; line-height: 1.15; margin: 56px 0 14px; color: var(--tinte); font-weight: 600; }
.text h3 { font-size: 1.2rem; margin: 32px 0 8px; color: var(--tinte); }
.text p, .text ul, .text ol { margin: 0 0 18px; }
.text ul, .text ol { padding-left: 22px; }
.text li { margin-bottom: 8px; }
.text li::marker { color: var(--rot); font-weight: 600; }
.text blockquote { margin: 28px 0; padding: 20px 24px; background: #fff; border-radius: 22px; box-shadow: inset 4px 0 0 var(--rot); }
.text blockquote p:last-child { margin: 0; }
.text table { width: 100%; border-collapse: collapse; font-size: 16px; margin: 28px 0; display: block; overflow-x: auto; background: #fff; border-radius: 22px; padding: 6px 8px; }
.text th, .text td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.text tr:last-child td { border-bottom: 0; }
.text th { font-weight: 600; color: var(--tinte); }
.text code { background: #ECECE6; padding: 1px 6px; border-radius: 6px; font-size: 0.9em; }
.text em { color: var(--grau); }

.autor { display: flex; gap: 16px; align-items: flex-start; margin: 48px 0 0; padding: 24px; background: #fff; border-radius: 28px; }
.autor img { border-radius: 14px; flex: none; }
.autor p { margin: 4px 0 0; color: var(--grau); font-size: 15px; line-height: 1.5; }

/* Dunkle Kachel wie „Pilotprogramm“ auf der Startseite */
.hinweis-box { margin: 40px 0 0; padding: 36px 28px; border-radius: 28px; background: var(--kachel); color: #fff; background-image: radial-gradient(120% 120% at 100% 0%, rgba(224, 56, 74, 0.32), transparent 60%), radial-gradient(90% 90% at 0% 100%, rgba(40, 72, 140, 0.3), transparent 60%); }
@media (min-width: 640px) { .hinweis-box { padding: 48px; } }
.hinweis-box h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.025em; line-height: 1.15; font-weight: 600; }
.hinweis-box p { color: rgba(255, 255, 255, 0.7); max-width: 600px; }
.hinweis-box .knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }

.weitere { padding-top: 48px; }
.weitere h2 { font-size: 24px; letter-spacing: -0.02em; }
.weitere .karte { margin-bottom: 12px; }

/* Zurück-Knöpfe am Ende des Artikels, auf heller Fläche */
.unten-zurueck { display: flex; flex-wrap: wrap; gap: 10px; padding: 32px 0 72px; margin: 0; }
.unten-zurueck .zurueck { background: #fff; color: var(--tinte); box-shadow: inset 0 0 0 1px var(--linie); }
.unten-zurueck .zurueck:hover { background: #ECECE6; }

/* Fuß wie auf der Startseite */
.fuss { border-top: 1px solid var(--linie); padding: 28px 0 36px; font-size: 12px; color: rgba(0, 0, 0, 0.55); background: var(--hell); }
.fuss-innen { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 720px) { .fuss-innen { flex-direction: row; align-items: center; justify-content: space-between; } }
.fuss p { margin: 0; }
.fuss-marke { display: flex; align-items: center; gap: 8px; }
.fuss-marke img { border-radius: 6px; }
.fuss-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.fuss a { color: inherit; text-decoration: none; }
.fuss a:hover { text-decoration: underline; }

/* Schmale Handys: Wortmarke und Knopf passen sonst nicht nebeneinander. */
@media (max-width: 400px) {
  .marke { font-size: 16px; gap: 9px; }
  .marke img { width: 30px; height: 30px; }
  .kopf nav a.knopf { padding: 7px 14px; font-size: 14px; }
}