/* ══════════════════════════════════════════════════════════════════
   Erfahrungs-Portal auf marketplaybook.de
   Magazin-Optik: Papier statt Produkt, Serifen im Fliesstext, gedeckte
   Farben. Wer bei einer "Erfahrungen"-Suche auf einer Verkaufsseite
   landet, springt ab — deshalb sieht dieser Bereich bewusst nicht aus
   wie die Startseite.

   Diese Datei ist vom Tailwind-Bundle der Startseite vollstaendig
   getrennt. Portal und Startseite teilen sich nur die Domain.
   ══════════════════════════════════════════════════════════════════ */

/* ── Schriften, lokal ausgeliefert ────────────────────────────────
   Keine Verbindung zu fonts.googleapis.com oder fonts.gstatic.com.
   Die Referenzseiten laden vom Google-CDN und erzwingen sich damit in
   Deutschland ein Cookie-Banner. Das uebernehmen wir nicht.
   ─────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 700; /* Variable Font, deckt alle Schnitte ab */
  font-display: swap;
  src: url("/fonts/source-serif-4-var.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: "Barlow"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/fonts/barlow-400.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("/fonts/barlow-500.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/fonts/barlow-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("/fonts/barlow-700.woff2") format("woff2");
}

/* ── Palette ──────────────────────────────────────────────────────
   Gedeckt, Papier-Anmutung, keine Signalfarben. Das Cremeweiss
   (--paper-2) statt reinem Grau ist der Unterschied zwischen Magazin
   und SaaS-Landingpage — ein Grauton allein wirkt technisch.
   ─────────────────────────────────────────────────────────────── */

:root {
  --ink:       #1c2024;  /* Fliesstext */
  --ink-soft:  #34383d;  /* sekundaerer Text, Vorspann */
  --muted:     #6c7178;  /* Bildunterschriften, Meta-Zeilen */
  --paper:     #ffffff;  /* Hintergrund */
  --paper-2:   #f6f5f1;  /* Kaesten, cremig */
  --paper-3:   #edebe3;  /* Faktenbox */
  --line:      #e0ddd2;  /* Trennlinien */
  --line-2:    #cfcbbd;  /* Rahmen im Hover */
  --brand:     #0f3b5f;  /* Portal-Header, Akzent */
  --brand-soft:#e8eef3;  /* Akzentflaeche */
  --pos:       #2d5a3d;  /* "passt fuer" */
  --neg:       #8c2424;  /* "passt nicht" */
  --warn:      #a85c1f;  /* Hinweise, Platzhalter */
  --internal:  #1a3a8a;  /* Hinweis-Banner */

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --breit: 1140px;  /* Header und Fuss */
  --spalte: 760px;  /* Artikeltext — breiter liest sich wie Marketing */
}

/* ── Grundlagen ───────────────────────────────────────────────── */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }

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

/* Der Aussenrahmen fuer Kopf und Fuss. */
.wrap { max-width: var(--breit); margin: 0 auto; padding: 0 24px; }

/* ── Hinweis-Banner ───────────────────────────────────────────────
   Pflicht auf jeder Seite, § 5a Abs. 4 UWG folgend in FLIESSTEXT-
   groesse und nicht ausgegraut. Ein kleingedruckter Hinweis erfuellt
   den Zweck nicht — er soll gelesen werden, nicht abgehakt.
   ─────────────────────────────────────────────────────────────── */

.notice-banner {
  background: var(--brand-soft);
  border-left: 3px solid var(--internal);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
}
.notice-banner .wrap { padding-top: 14px; padding-bottom: 14px; }

/* ── Schmaler Portal-Balken ─────────────────────────────────────── */

.portal-bar {
  background: var(--brand);
  color: #dbe4ec;
  font-family: var(--sans);
  font-size: 13px;
}
.portal-bar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 9px; padding-bottom: 9px; flex-wrap: wrap;
}
.portal-bar a { color: #dbe4ec; text-decoration: none; }
.portal-bar a:hover { color: #ffffff; text-decoration: underline; }
.portal-bar nav { display: flex; gap: 18px; }
.portal-bar .portal-name { font-weight: 600; letter-spacing: .01em; }

/* ── Haupt-Kopf ─────────────────────────────────────────────────── */

.site-header { background: var(--paper); border-bottom: 1px solid var(--line); }
.site-header .wrap { padding-top: 26px; padding-bottom: 22px; }
.site-header .wordmark {
  font-family: var(--serif); font-size: 1.7rem; font-weight: 600;
  letter-spacing: -.01em; margin: 0; color: var(--ink);
}
.site-header .wordmark a { color: inherit; text-decoration: none; }
.site-header .tagline {
  font-family: var(--sans); font-size: 13px; color: var(--muted);
  margin: 5px 0 0; letter-spacing: .02em;
}

/* ── Breadcrumb ─────────────────────────────────────────────────── */

.breadcrumb {
  font-family: var(--sans); font-size: 13px; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.breadcrumb .wrap { padding-top: 10px; padding-bottom: 10px; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand); text-decoration: underline; }
.breadcrumb .sep { padding: 0 7px; color: var(--line-2); }

/* ── Artikelspalte ──────────────────────────────────────────────── */

.article {
  max-width: var(--spalte);
  margin: 0 auto;
  padding: 40px 24px 64px;
}
.article p { margin: 0 0 1.15em; }

.kicker {
  font-family: var(--sans); font-size: .74rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--brand);
  margin: 0 0 12px;
}

.article h1 {
  font-family: var(--serif); font-size: 2.1rem; line-height: 1.2;
  font-weight: 600; letter-spacing: -.015em; margin: 0 0 18px;
}
.article h2 {
  font-family: var(--serif); font-size: 1.5rem; line-height: 1.3;
  font-weight: 600; margin: 2.2em 0 .55em;
}
.article h3 {
  font-family: var(--serif); font-size: 1.18rem; line-height: 1.35;
  font-weight: 600; margin: 1.7em 0 .4em;
}

/* Kleines Versal-Label ueber jeder H2. Gliedert den Text optisch, ohne
   eine Rangordnung zu behaupten, die es nicht gibt. */
.section-eyebrow {
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--brand);
  margin: 2.4em 0 -.3em;
}
.section-eyebrow + h2 { margin-top: .35em; }

.lede {
  font-size: 1.15rem; line-height: 1.55; color: var(--ink-soft);
  margin: 0 0 1.4em;
}

.byline {
  font-family: var(--sans); font-size: 13px; color: var(--muted);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 10px 0; margin: 0 0 28px;
}

figure { margin: 28px 0; }
figcaption {
  font-family: var(--sans); font-size: 13px; color: var(--muted);
  line-height: 1.45; margin-top: 8px;
}

/* ── Faktenbox ──────────────────────────────────────────────────── */

.data-box {
  background: var(--paper-3); border: 1px solid var(--line);
  padding: 22px 24px; margin: 30px 0;
}
.data-box h2, .data-box h3 {
  font-family: var(--sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--brand);
  margin: 0 0 14px;
}
.data-box dl { margin: 0; }
.data-box .row {
  display: grid; grid-template-columns: 170px 1fr; gap: 16px;
  padding: 9px 0; border-top: 1px solid var(--line);
}
.data-box .row:first-of-type { border-top: 0; padding-top: 0; }
.data-box dt {
  font-family: var(--sans); font-size: .84rem; font-weight: 600;
  color: var(--ink-soft); line-height: 1.5; margin: 0;
}
.data-box dd { margin: 0; font-size: .97rem; line-height: 1.5; }

/* ── Kernaussagen-Kasten ──────────────────────────────────────────
   Ersetzt den Bewertungskasten der Referenzseiten. Dort steht eine
   Note wie 4,5/5. Wir haben keine erhobene Zahlenbasis, also gibt es
   auch keine Note — eine erfundene waere genau der Punkt, an dem die
   Seite angreifbar wuerde.
   ─────────────────────────────────────────────────────────────── */

.summary-box {
  background: var(--paper-2); border: 1px solid var(--line);
  padding: 22px 24px; margin: 30px 0;
}
.summary-box h2 {
  font-family: var(--sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--brand);
  margin: 0 0 10px;
}
.summary-box .basis {
  font-family: var(--sans); font-size: .86rem; color: var(--muted);
  margin: 0 0 14px; line-height: 1.5;
}
.summary-box ul { margin: 0; padding-left: 20px; }
.summary-box li { margin-bottom: .5em; }

/* ── Zitat-Block ──────────────────────────────────────────────────
   Angelegt, aber vorerst UNGENUTZT. Es liegen keine Teilnehmerstimmen
   mit Freigabe vor. Wer diesen Baustein benutzt, braucht je Zitat:
   Vorname, Alter, Zeitraum und eine schriftliche Freigabe — und keine
   Gewinnzahlen. Erhielt jemand eine Gegenleistung, muss das direkt am
   Zitat stehen.
   ─────────────────────────────────────────────────────────────── */

.quote-box {
  border-left: 3px solid var(--brand); padding: 4px 0 4px 20px;
  margin: 28px 0; font-size: 1.05rem;
}
.quote-box p { margin: 0 0 .6em; }
.quote-box .attribution {
  font-family: var(--sans); font-size: .84rem; color: var(--muted);
  margin: 0;
}

/* ── Fuer wen / fuer wen nicht ──────────────────────────────────── */

.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 30px 0; }
.proscons > div { border: 1px solid var(--line); padding: 20px; background: var(--paper-2); }
.proscons .pro { border-top: 3px solid var(--pos); }
.proscons .con { border-top: 3px solid var(--neg); }
.proscons h3 {
  font-family: var(--sans); font-size: .86rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; margin: 0 0 12px;
}
.proscons .pro h3 { color: var(--pos); }
.proscons .con h3 { color: var(--neg); }
.proscons ul { margin: 0; padding-left: 18px; font-size: .97rem; }
.proscons li { margin-bottom: .55em; line-height: 1.5; }

/* ── Einordnung am Ende ─────────────────────────────────────────── */

.verdict-box {
  border: 1px solid var(--line-2); background: var(--paper-2);
  padding: 24px 26px; margin: 34px 0;
}
.verdict-box h2 {
  font-family: var(--sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--brand);
  margin: 0 0 12px;
}
.verdict-box p:last-child { margin-bottom: 0; }

/* ── Hinweiskasten im Fliesstext ────────────────────────────────── */

.note {
  border-left: 3px solid var(--warn); background: var(--paper-2);
  padding: 16px 20px; margin: 26px 0; font-size: .97rem;
}
.note p:last-child { margin-bottom: 0; }

/* ── FAQ ────────────────────────────────────────────────────────── */

.faq-item { border-top: 1px solid var(--line); padding: 18px 0; }
.faq-item:last-of-type { border-bottom: 1px solid var(--line); }
.faq-item h3 {
  font-family: var(--sans); font-size: 1rem; font-weight: 600;
  margin: 0 0 .45em; line-height: 1.45;
}
.faq-item p { margin: 0; font-size: .99rem; }

/* ── Magazin-Karten ───────────────────────────────────────────────
   Einspaltig auch auf dem Desktop. Ein Kachelraster laesst die Seite
   wie einen Shop aussehen; eine Liste liest sich wie ein Heft.
   ─────────────────────────────────────────────────────────────── */

.card-list { display: flex; flex-direction: column; gap: 16px; margin: 28px 0; }
.card {
  border: 1px solid var(--line); border-radius: 4px; padding: 24px;
  transition: border-color .15s ease;
}
.card:hover { border-color: var(--line-2); }
.card .label {
  font-family: var(--sans); font-size: .7rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--brand);
  margin: 0 0 8px;
}
.card h2, .card h3 {
  font-family: var(--serif); font-size: 1.28rem; font-weight: 600;
  line-height: 1.3; margin: 0 0 8px;
}
.card h2 a, .card h3 a { color: var(--ink); text-decoration: none; }
.card h2 a:hover, .card h3 a:hover { color: var(--brand); text-decoration: underline; }
.card p { margin: 0; color: var(--muted); font-size: .97rem; line-height: 1.5; }

.meta-line {
  font-family: var(--sans); font-size: 13px; color: var(--muted);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 10px 0; margin: 0 0 8px;
}

/* ── Platzhalter ──────────────────────────────────────────────────
   Sichtbar markiert, damit niemand sie uebersieht. Sie sperren den
   Livegang, nicht den Bau.
   ─────────────────────────────────────────────────────────────── */

.ph {
  background: rgba(168, 92, 31, .15); color: var(--warn);
  font-family: var(--sans); font-size: .88em; font-weight: 600;
  padding: 1px 6px; border-radius: 3px;
}

/* ── Fuss ───────────────────────────────────────────────────────── */

.site-footer {
  background: var(--paper-2); border-top: 1px solid var(--line);
  font-family: var(--sans); font-size: .9rem; color: var(--ink-soft);
  margin-top: 20px;
}
.site-footer .wrap { padding-top: 34px; padding-bottom: 40px; }
.site-footer .risiko {
  border-left: 3px solid var(--warn); padding: 0 0 0 16px;
  margin: 0 0 26px; max-width: 760px; line-height: 1.55;
}
.site-footer .cols {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  border-top: 1px solid var(--line); padding-top: 22px;
}
.site-footer h2 {
  font-size: .74rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 10px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 7px; }
.site-footer a { color: var(--ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--brand); text-decoration: underline; }
.site-footer .impressum-zeile {
  margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .84rem;
}

/* ── Mobil ──────────────────────────────────────────────────────── */

@media (max-width: 700px) {
  body { font-size: 16.5px; }
  .wrap { padding: 0 20px; }
  .article { padding: 30px 20px 48px; }
  .article h1 { font-size: 1.72rem; }
  .article h2 { font-size: 1.32rem; }
  .data-box .row { grid-template-columns: 1fr; gap: 2px; }
  .proscons { grid-template-columns: 1fr; }
  .site-footer .cols { grid-template-columns: 1fr; }
  .portal-bar .wrap { flex-direction: column; align-items: flex-start; gap: 8px; }
  .portal-bar nav { flex-wrap: wrap; gap: 14px; }
}