/* ════════════════════════════════════════════════════════════════════════════
   bericht.css — Advertorial-Berichtsseiten (/gastro/bericht_DDMMYYYY/)

   Diese Seiten sind KEINE Landingpages. Sie sind das Klickziel von Anzeigen im
   Advertorial-Format und muessen sich wie ein Artikel lesen — heller Grund,
   Serifen-Ueberschriften, 680 px Lesebreite, keine Verkaufselemente. Erst der
   Angebotskasten am Ende darf wie eine Landingpage aussehen; dieser Stilbruch
   ist beabsichtigt und markiert die Grenze zwischen Bericht und Werbung.

   ⚠ Diese Datei laeuft NUR zusammen mit `lp.css`, die zuerst eingebunden wird.
   Von dort kommen: der Grund-Reset, die Schrift Archivo (@font-face,
   selbstgehostet), das komplette Formular-Aussehen (.formcard, .field,
   .field__err, .is-hidden, .hp, .spinner, .form-success, .progress__step), das
   Einwilligungs-Banner, das funnel.js zur Laufzeit einhaengt, und der Footer.
   Ohne lp.css stuende das Formular als unformatierte Liste da und der
   Consent-Dialog als Textwand.

   Was hier steht, ist die helle Gegenschicht dazu: lp.css faerbt `body` dunkel
   (--color-brand), diese Datei dreht das fuer `.bericht` um.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Roboto Slab, selbst gehostet ────────────────────────────────────────────
   ⚠ NICHT über Google Fonts einbinden. Die eigene Datenschutzerklärung sagt in
   § 4 wörtlich: „Es erfolgt kein Verbindungsaufbau zu Google Fonts oder zu
   sonstigen Servern von Google." Ein `<link>` auf fonts.googleapis.com machte
   diesen Satz falsch — und zwar vor jeder Einwilligung, weil Schriften nicht
   hinter dem Consent-Banner liegen.

   Roboto Slab v36 ist eine variable Schrift: EINE Datei je Zeichensatz deckt
   400 und 700 ab (beide Downloads von Google waren byte-gleich, gegengeprüft
   per md5). Die Vorlage lädt die Latin-Datei per `preload` vor — damit ist der
   Tausch beim `swap` praktisch unsichtbar, ohne dass hier erfundene
   Metrik-Korrekturen für einen Ersatz stehen müssten.
   Lizenz: Apache 2.0 (Google Fonts), Selbst-Hosting ausdrücklich erlaubt. */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/kampagne/fonts/roboto-slab-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: 'Roboto Slab';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/kampagne/fonts/roboto-slab-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;
}

.bericht {
  /* Palette aus dem Briefing. Bewusst eigene Namen: Die Tokens von lp.css
     bleiben unangetastet, damit das Formular und der Footer weiter aussehen
     wie ueberall sonst. */
  --br-ink: #362023;
  --br-bg: #faf8f6;
  --br-mint: #d0f4ea;
  --br-muted: #646e68;
  --br-akzent: #c06e52;
  /* ⚠ #c06e52 auf #faf8f6 sind 3,5:1 — genug fuer grosse Flaechen und
     Knopfgrund, zu wenig fuer Text (AA verlangt 4,5:1). Kleintext und
     Links nehmen deshalb die abgedunkelte Fassung. */
  --br-akzent-text: #9a4f36;
  --br-rose: #d3ab9e;
  --br-linie: #e8e0dc;

  --br-lese: 680px;

  --font-serif: 'Roboto Slab', Georgia, 'Times New Roman', serif;

  background: var(--br-bg);
  color: var(--br-ink);
  font-size: 18px;
  line-height: 1.7;
}
@media (min-width: 700px) { .bericht { font-size: 19px; } }

/* Der Lesekanal. Alles Redaktionelle laeuft durch ihn — nur der
   Angebotskasten und der Footer duerfen breiter werden. */
.br-wrap { max-width: var(--br-lese); margin-inline: auto; padding-inline: 20px; }

.bericht h1, .bericht h2, .bericht h3 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-wrap: balance;
  color: var(--br-ink);
}
/* ⚠ Diese zwei Regeln gelten NUR im Lesekanal. `.bericht p` und `.bericht a`
   haetten die Spezifitaet (0,1,1) und schluegen damit jede Ein-Klassen-Regel aus
   lp.css: die Fehlerzeile `.field__err` bekaeme 14 px totes Polster in jedem
   der acht Felder, die Links im Consent-Banner und in der DSGVO-Zeile wuerden
   umgefaerbt, und `.br-btn` (0,1,0) verloere seine weisse Schrift gegen den
   Terracotta-Grund — der zweite CTA-Knopf waere unlesbar. */
.br-wrap p, .br-text p, .br-angebot__kopf p, .br-faq .br-antwort { margin: 0 0 1.15em; }
.br-wrap p a, .br-text p a, .br-angebot__kopf p a, .br-faq .br-antwort a,
.br-garantie a, .br-werk a {
  color: var(--br-akzent-text); text-underline-offset: 3px;
}

/* ── 1. Kennzeichnung ────────────────────────────────────────────────────────
   „ANZEIGE" muss ohne Scrollen sichtbar sein und darf nicht in Grau auf Grau
   verschwinden: In Oesterreich ist als Information getarnte Werbung nach UWG
   (Anhang Z 11) eine per se unlautere Geschaeftspraktik, und § 26 MedienG
   verlangt die Kennzeichnung entgeltlicher Einschaltungen. Deshalb Vollton auf
   Vollton, nicht als zarte Zeile am Rand. */
.br-kennz {
  background: var(--br-ink);
  color: #fff;
  padding: 8px 0;
}
.br-kennz__inner {
  max-width: var(--br-lese); margin-inline: auto; padding-inline: 20px;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
}
/* Wer „werk." ist, gehoert dorthin, wo „Anzeige" steht — nicht ans Seitenende.
   Der Kopf traegt die Marke im Layout eines Presseorgans; die Aufloesung muss
   im selben Blick liegen, sonst wirkt sie wie ein fremder Absender. */
.br-kennz__von { letter-spacing: .08em; font-weight: 500; opacity: .85; }

.br-kopf { border-bottom: 1px solid var(--br-linie); padding: 14px 0; }
.br-kopf__inner {
  max-width: var(--br-lese); margin-inline: auto; padding-inline: 20px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 14px; color: var(--br-muted);
}
.br-marke {
  font-family: var(--font-serif); font-weight: 700; font-size: 22px;
  color: var(--br-ink); letter-spacing: -.02em;
}
.br-kopf__punkt { color: var(--br-rose); }

/* ── 2. Titel ─────────────────────────────────────────────────────────────── */
.br-titel { padding: clamp(28px, 6vw, 52px) 0 0; }
.br-dach {
  font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--br-akzent-text); margin: 0 0 12px;
}
.br-h1 { font-size: clamp(30px, 6.2vw, 46px); margin: 0 0 16px; }
.br-sub { font-size: clamp(18px, 2.4vw, 21px); color: var(--br-muted); margin: 0; line-height: 1.55; }

/* ── 3. Aufmacher ─────────────────────────────────────────────────────────── */
/* ⚠ `margin: X 0 0` haette das `margin-inline: auto` von `.br-wrap`
   zurueckgesetzt — der Aufmacher stand dann linksbuendig neben einer mittigen
   Textspalte. Nur die obere Kante setzen, den Rest in Ruhe lassen. */
.br-aufmacher { margin-block-start: clamp(24px, 5vw, 40px); }
.br-aufmacher img, .br-bild img { border-radius: 10px; width: 100%; }
.br-bildtext { font-size: 14px; color: var(--br-muted); margin: 10px 0 0; line-height: 1.5; }
/* Platzhalter, solange kein Motiv geliefert ist — er soll auffallen, nicht
   sich einfuegen: eine leere graue Flaeche waere im Zweifel unbemerkt live. */
.br-platzhalter {
  border: 2px dashed var(--br-akzent);
  background: repeating-linear-gradient(45deg, #fff, #fff 10px, #fdf3ef 10px, #fdf3ef 20px);
  border-radius: 10px; aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--br-akzent-text); font-weight: 700; font-size: 15px; padding: 20px;
}

/* ── 4.–9. Fliesstext ─────────────────────────────────────────────────────── */
.br-text { padding: clamp(24px, 5vw, 40px) 0 0; }
.br-text h2 { font-size: clamp(23px, 3.6vw, 30px); margin: clamp(28px, 5vw, 44px) 0 14px; }
.br-lead p:first-child { font-size: 1.08em; }
/* Die Illustrationen sind quadratische 1024er. Ueber die volle Lesebreite
   gelegt nahmen sie mehr Hoehe ein als der Absatz daneben Text hat — auf dem
   Telefon schob das jeden Abschnitt um eine Bildschirmhoehe auseinander.
   Deshalb gedeckelt und mittig. */
.br-bild { margin: clamp(22px, 4vw, 34px) auto; max-width: 320px; }
@media (max-width: 619px) { .br-bild { max-width: 220px; } }

/* ── 5. Datenteil ─────────────────────────────────────────────────────────── */
.br-zahlen {
  display: grid; grid-template-columns: 1fr; gap: 14px;
  margin: clamp(22px, 4vw, 32px) 0;
}
@media (min-width: 620px) { .br-zahlen { grid-template-columns: 1fr 1fr; } }
.br-zahl {
  background: #fff; border: 1px solid var(--br-linie); border-radius: 12px;
  padding: 20px;
}
.br-zahl__wert {
  font-family: var(--font-serif); font-weight: 700; font-size: 30px; line-height: 1.1;
  color: var(--br-ink); margin: 0 0 8px;
}
.br-zahl__text { font-size: 15px; line-height: 1.5; margin: 0 0 10px; color: var(--br-ink); }
.br-zahl__quelle { font-size: 12px; color: var(--br-muted); margin: 0; }
/* Solange die Zahl ein Platzhalter ist, muss sie als solcher ins Auge springen. */
.br-zahl--offen { border-color: var(--br-akzent); border-style: dashed; background: #fdf3ef; }
.br-zahl--offen .br-zahl__wert, .br-zahl--offen .br-zahl__quelle { color: var(--br-akzent-text); }
.br-fazit {
  border-left: 3px solid var(--br-rose); padding-left: 16px;
  font-size: 1.02em; color: var(--br-ink); margin: 0 0 1.15em;
}

/* ── Bild neben Text ─────────────────────────────────────────────────────────
   Ein Bild UNTER dem Absatz reisst den Lesefluss auseinander: Der Blick faellt
   auf die Illustration, kommt zurueck, sucht die naechste Zeile. Nebeneinander
   bleibt der Text durchgehend lesbar, das Bild begleitet ihn.

   Unter 620 px stapelt es sich wieder — nebeneinander waeren beide zu schmal. */
.br-duo { display: grid; gap: clamp(16px, 3vw, 28px); align-items: center; }
@media (min-width: 620px) {
  .br-duo { grid-template-columns: 1fr 200px; }
  .br-duo--links { grid-template-columns: 200px 1fr; }
  .br-duo--links .br-duo__text { order: 2; }
  .br-duo__bild { margin: 0; max-width: 200px; }
}
.br-duo__text > :last-child { margin-bottom: 0; }

/* ── 8. Schritte ──────────────────────────────────────────────────────────── */
.br-schritt { margin: clamp(24px, 4vw, 36px) 0; }
.br-schritt__nr {
  font-family: var(--font-serif); font-weight: 700; font-size: 14px;
  color: var(--br-akzent-text); letter-spacing: .12em; text-transform: uppercase;
  margin: 0 0 6px;
}
.br-schritt h3 { font-size: clamp(19px, 2.6vw, 22px); margin: 0 0 8px; }

/* ── 9. Garantie ──────────────────────────────────────────────────────────── */
.br-garantie {
  background: var(--br-mint); border-radius: 14px;
  padding: clamp(20px, 4vw, 30px);
  margin: clamp(24px, 4vw, 36px) 0;
}
.br-garantie h2 { margin-top: 0; }
.br-garantie p:last-child { margin-bottom: 0; }

/* ── 10. Beweis ───────────────────────────────────────────────────────────── */
.br-zitat {
  font-family: var(--font-serif); font-size: clamp(20px, 3vw, 25px); line-height: 1.45;
  border-left: 4px solid var(--br-akzent); padding-left: 20px; margin: 0 0 24px;
}
/* ── Bewertungen als Laufband ────────────────────────────────────────────────
   Dieselbe Technik wie beim Presse-Streifen und aus demselben Grund: zwei
   identische Reihen, `@keyframes` verschiebt um genau 50 %. Der Abstand haengt
   an `margin-right` der Karte, NICHT an `gap` des Flex-Containers — sonst sitzt
   zwischen der letzten Karte der ersten Reihe und der ersten der zweiten eine
   zusaetzliche Luecke, und die Schleife springt bei jedem Durchlauf.

   Das Laufband darf ueber die Lesebreite hinaus: Es ist keine Textspalte,
   sondern ein Band. Weiche Kanten links und rechts zeigen, dass es weitergeht. */
.br-reviews {
  margin: 0 0 20px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.br-reviews__spur { display: flex; width: max-content; animation: br-lauf 90s linear infinite; }
.br-reviews__reihe { display: flex; }
@keyframes br-lauf { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.br-reviews:hover .br-reviews__spur { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .br-reviews { -webkit-mask-image: none; mask-image: none; }
  .br-reviews__spur { animation: none; width: 100%; flex-wrap: wrap; }
  .br-reviews__reihe[aria-hidden="true"] { display: none; }
  .br-review { margin-right: 0; }
}
.br-review {
  background: #fff; border: 1px solid var(--br-linie); border-radius: 12px; padding: 18px;
  font-size: 15px; line-height: 1.55;
  flex: none; width: 300px; margin-right: 16px;
  display: flex; flex-direction: column;
}
.br-review__sterne { color: #f5b50c; letter-spacing: 2px; margin: 0 0 8px; }
.br-review__wer { font-size: 13px; color: var(--br-muted); margin: auto 0 0; padding-top: 10px; }
.br-review__wer strong { color: var(--br-ink); display: block; font-weight: 700; }
.br-rating { font-size: 14px; color: var(--br-muted); margin: 0; }

/* Der „Gesehen auf"-Streifen kommt aus _presse.php und ist fuer dunklen Grund
   gebaut (weisser Filter). Hier laeuft er auf hellem Grund — also invertiert. */
/* ⚠ Der Grund MUSS mit umgestellt werden. lp.css setzt `.presse { background:
   var(--color-brand) }` — dunkelbraun. Wer nur den Filter dreht, bekommt acht
   schwarze Logos auf dunkelbraunem Grund: der Streifen sieht aus, als waere er
   nicht geladen. */
.bericht .presse { background: transparent; padding: clamp(20px, 4vw, 30px) 0; }
.bericht .presse__label { color: var(--br-muted); }
.bericht .presse__logo { filter: grayscale(1) brightness(0); opacity: .5; }

/* ── 11. Der Bruch ────────────────────────────────────────────────────────────
   Ab hier darf es wie eine Landingpage aussehen. Die Kante ist Absicht: Der
   Leser soll merken, dass der Bericht zu Ende ist und ein Angebot beginnt. */
.br-angebot {
  background: var(--br-mint);
  margin-top: clamp(36px, 7vw, 64px);
  padding: clamp(30px, 6vw, 56px) 0 clamp(36px, 6vw, 60px);
  border-top: 3px solid var(--br-ink);
}
.br-angebot__kopf { max-width: var(--br-lese); margin-inline: auto; padding-inline: 20px; }
.br-angebot h2 { font-size: clamp(24px, 4vw, 32px); margin: 0 0 14px; }
.br-angebot__satz { font-family: var(--font-serif); font-size: clamp(19px, 2.6vw, 22px); margin: 0 0 14px; }
.br-angebot__form { margin-top: clamp(22px, 4vw, 32px); }
/* Der Knopf des Formulars traegt in lp.css das Signalrot der LPs. Auf dieser
   Seite ist die Akzentfarbe Terracotta — geaendert wird nur die Farbe, nicht
   das Verhalten. */
.bericht .btn-red { background: var(--br-akzent); }
.bericht .btn-red:hover { box-shadow: 0 10px 26px rgba(192,110,82,.32); }
/* Die Karte steht auf Mint, nicht auf Dunkel — der schwere Schatten von lp.css
   waere hier ein Fleck. */
.bericht .formcard { box-shadow: 0 14px 34px rgba(54,32,35,.12); background: #fff; }

/* ── 12. FAQ ──────────────────────────────────────────────────────────────── */
.br-faq { padding: clamp(30px, 6vw, 52px) 0 0; }
.br-faq details {
  border-bottom: 1px solid var(--br-linie);
  padding: 4px 0;
}
.br-faq summary {
  cursor: pointer; list-style: none; padding: 14px 0;
  font-weight: 700; font-family: var(--font-serif); font-size: 17px;
  display: flex; justify-content: space-between; gap: 14px; align-items: flex-start;
}
.br-faq summary::-webkit-details-marker { display: none; }
.br-faq summary::after { content: '+'; color: var(--br-akzent-text); font-size: 22px; line-height: 1; flex: none; }
.br-faq details[open] summary::after { content: '–'; }
.br-faq .br-antwort { padding: 0 0 16px; font-size: 16px; color: var(--br-muted); }

/* ── 13. Zweiter CTA ──────────────────────────────────────────────────────── */
.br-cta2 { padding: clamp(30px, 5vw, 44px) 0; text-align: center; }
.br-cta2 p { font-family: var(--font-serif); font-size: clamp(19px, 2.6vw, 23px); margin: 0 0 18px; }
.bericht .br-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--br-akzent); color: #fff; text-decoration: none;
  border-radius: 999px; padding: 15px 28px; font-weight: 700; font-size: 17px;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.bericht .br-btn:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(192,110,82,.3); }

/* ── Footer ───────────────────────────────────────────────────────────────── */
/* Der Footer ist zeichengleich mit dem von /gastro/ und bringt sein eigenes,
   dunkles Aussehen aus lp.css mit. Er bleibt dunkel — er ist das Seitenende. */
.br-werk {
  font-size: 13px; line-height: 1.55; color: var(--br-muted);
  max-width: var(--br-lese); margin: 0 auto; padding: 22px 20px 0; text-align: center;
}

/* ── Sticky-CTA ───────────────────────────────────────────────────────────────
   Das einzige Verkaufselement, das im redaktionellen Teil erscheinen darf —
   und nur auf dem Telefon, ab 30 % Scrolltiefe. Auf dem Schreibtisch ist der
   Bericht ohnehin in einem Zug lesbar. */
.br-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--br-ink); padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  transform: translateY(110%); transition: transform .25s ease;
  box-shadow: 0 -8px 24px rgba(54,32,35,.18);
}
.br-sticky.is-an { transform: translateY(0); }
.br-sticky a {
  display: flex; align-items: center; justify-content: center;
  background: var(--br-akzent); color: #fff; text-decoration: none;
  border-radius: 999px; padding: 13px 20px; font-weight: 700; font-size: 16px;
}
/* „nur mobil" heisst Zeigegeraet, nicht Fensterbreite: Ein schmales
   Desktop-Fenster ist kein Telefon. Beide Bedingungen zusammen treffen genau
   die Geraete, auf denen der Bericht nicht in einem Zug lesbar ist. */
@media (min-width: 768px), (hover: hover) and (pointer: fine) {
  .br-sticky { display: none; }
}
/* Solange die Leiste erscheinen kann, braucht das Seitenende Platz darunter —
   sonst deckt sie den Absendeknopf und den Footer zu. */
@media (max-width: 767px) { .bericht { padding-bottom: 84px; } }
@media (prefers-reduced-motion: reduce) { .br-sticky { transition: none; } }

/* ── Der Verweis im Fliesstext ───────────────────────────────────────────────
   Ein Knopf mitten im Bericht waere ein Verkaufselement und damit im
   redaktionellen Teil verboten. Ein Verweis im Satz ist keiner: Er liest sich
   wie eine Quellenangabe, fuehrt aber zum Formular. Deshalb dieselbe Auszeichnung
   wie ein normaler Link, nur etwas fester. */
.br-inline {
  color: var(--br-akzent-text); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.br-inline:hover { text-decoration-thickness: 2px; }

/* Der Presse-Streifen erscheint zweimal: einmal gleich unter dem Kopf als
   Vertrauenszeile, einmal im Beweisteil. Oben schmaler. */
.br-presse-oben .presse { padding: 14px 0 4px; }

/* Quellenangabe in der Zahlenkachel: klein, aber anklickbar — eine Zahl ohne
   nachpruefbare Quelle ist auf einer Werbeseite eine Behauptung. */
.br-zahl__quelle a { color: inherit; text-underline-offset: 2px; }
.br-zahl__quelle a:hover { color: var(--br-akzent-text); }