/* Seite zum TÜV-Prüfzeichen.
 *
 * Nur das, was das Webflow-CSS nicht hergibt.
 *
 * KEINE abgesetzten Abschnittsfarben: Die Website hat durchgehend einen
 * Hintergrund, keine einzige Seite wechselt zwischen Schwarz und einem
 * zweiten Ton. Getrennt wird hier ueber Abstand, Linien und Typo.
 */

/* Abstand zwischen den Bloecken statt Farbwechsel. */
.tuev__block { margin-top: 5rem; }
@media (min-width: 768px) { .tuev__block { margin-top: 7rem; } }

/* ---- Auftakt: Aussage links, Pruefzeichen rechts ---- */
.tuev__auftakt { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 992px) {
  .tuev__auftakt { grid-template-columns: 1.3fr 1fr; gap: 4rem; align-items: center; }
}

.tuev__lead {
  max-width: 34em;
  margin: 1rem 0 0;
  font-size: 1.15rem;
  line-height: 1.6;
  color: #c9ced6;
}
.tuev__lead strong { color: #fff; }

.tuev__eckdaten {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem 2.5rem;
  margin: 1.75rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid #262b33;
}
.tuev__eckdaten dt {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #767f8c;
}
.tuev__eckdaten dd {
  margin: .3rem 0 0;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

/* Pruefzeichen. Mindestbreite rund 280 px, sonst sind ID und QR-Code nicht
 * mehr lesbar und das Zeichen verliert seinen Zweck. */
.tuev__siegel { margin: 0; }
.tuev__siegel img {
  display: block;
  width: 100%;
  min-width: 280px;
  max-width: 440px;
  height: auto;
}
.tuev__siegel figcaption { margin-top: .8rem; max-width: 440px; font-size: .82rem; }
.tuev__siegel figcaption a { color: var(--main-red); text-decoration: underline; }

/* ---- Geprueft: nummerierte Zeilen mit Trennlinie, keine Kacheln ---- */
.tuev__vorsatz {
  max-width: 44em;
  margin-top: 1rem;
  line-height: 1.65;
  color: #c9ced6;
}

.tuev__liste {
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
  border-top: 1px solid #262b33;
}
.tuev__punkt {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid #262b33;
}
@media (min-width: 768px) {
  .tuev__punkt { grid-template-columns: 6rem 1fr; gap: 2rem; }
}
.tuev__nummer {
  padding-top: .15rem;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  color: var(--main-red);
}
.tuev__punkt-titel { margin: 0 0 .35rem; font-size: 1.1rem; line-height: 1.3; }
.tuev__punkt p { margin: 0; color: #a2abb8; line-height: 1.6; }

/* ---- Drei Stellen im Film ---- */
.tuev__spalten { display: grid; gap: 2rem; margin-top: 2.25rem; }
@media (min-width: 768px) {
  .tuev__spalten { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}
.tuev__spalte { border-top: 2px solid var(--main-red); padding-top: 1.1rem; }
.tuev__spalte-titel { margin: 0 0 .5rem; font-size: 1.05rem; }
.tuev__spalte p { margin: 0; color: #a2abb8; line-height: 1.6; }

/* ---- Nutzen und Portrait ---- */
.tuev__nutzen-raster { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 992px) {
  .tuev__nutzen-raster { grid-template-columns: 1.15fr 1fr; gap: 4rem; }
}
.tuev__nutzen { list-style: none; margin: 1.75rem 0 0; padding: 0; }
.tuev__nutzen li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .9rem;
  line-height: 1.6;
  color: #c9ced6;
}
.tuev__nutzen li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .6rem;
  height: 2px;
  background: var(--main-red);
}
.tuev__hinweis { margin-top: 1.5rem; font-size: .92rem; color: #8c94a1; }
.tuev__hinweis a { color: var(--main-red); text-decoration: underline; }

.tuev__portraet { margin: 0; }
.tuev__portraet img { display: block; width: 100%; height: auto; border-radius: 10px; }
.tuev__portraet figcaption {
  margin-top: .8rem;
  font-size: .82rem;
  line-height: 1.5;
  color: #8c94a1;
}

/* ---- Klarstellung ---- */
.tuev__klarstellung {
  max-width: 46em;
  padding: .25rem 0 .25rem 1.75rem;
  border-left: 3px solid var(--main-red);
}
.tuev__klarstellung-titel { margin: 0 0 .9rem; font-size: 1.25rem; line-height: 1.3; }
.tuev__klarstellung p { margin: 0 0 1rem; line-height: 1.7; color: #a2abb8; }
.tuev__klarstellung p:last-child { margin-bottom: 0; }

.tuev__schluss { max-width: 42em; }
.tuev__schluss p { margin: 1rem 0 2rem; line-height: 1.65; color: #c9ced6; }

@media (max-width: 420px) {
  .tuev__siegel img { min-width: 0; }
}

/* ---- Aufklappbare Fragen ----
 * Gleiche Klassen wie das FAQ-Modul der Startseite, damit Rahmen, Abstaende
 * und Schrift von dort kommen. Nur das Auf- und Zuklappen ist eigenes Werk,
 * siehe /tuev/aufklappen.js.
 *
 * Die Bewegung laeuft ueber grid-template-rows von 0fr auf 1fr. Das ist der
 * einzige Weg, eine unbekannte Hoehe ohne JavaScript-Rechnerei weich zu
 * animieren: height:auto laesst sich nicht uebergangsweise darstellen.
 */
.faq1_answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s ease;
}
/* Abstand und Polsterung des direkten Kindes bleiben beim Zuklappen stehen:
 * Das Raster zieht nur die Hoehe auf null, Innenabstaende zaehlen weiter.
 * Deshalb beides auf null und den Abstand eine Ebene tiefer legen, dort
 * wird er mit abgeschnitten. */
.faq1_answer > * { min-height: 0; overflow: hidden; margin: 0; padding: 0; }
.faq1_answer p { margin: 0 0 1.25rem; }
.faq_accordion.ist-offen > .faq1_answer { grid-template-rows: 1fr; }

.faq1_icon-wrapper svg { transition: transform .32s ease; }
.faq_accordion.ist-offen .faq1_icon-wrapper svg { transform: rotate(180deg); }

.faq1_question:focus-visible {
  outline: 2px solid var(--main-red);
  outline-offset: 2px;
}

/* Ohne JavaScript bleibt alles offen statt unerreichbar zu sein. */
@media (prefers-reduced-motion: reduce) {
  .faq1_answer { transition: none; }
}

/* ---- Kopfbereich auf schmalen Bildschirmen ----
 * Die Ueberschrift enthaelt mit "Verkaufspsychologie" ein Wort, das bei
 * 375 px Bildschirmbreite allein 393 px misst und die Seite waagerecht
 * ueberlaufen laesst. Die uebrigen Seiten haben hier kurze Woerter wie
 * "Karriere", deshalb faellt es nur auf dieser Seite auf.
 * Zwei Massnahmen: Silbentrennung erlauben (die Seite ist auf de-DE
 * gesetzt, damit trennt der Browser korrekt) und die Schrift kleiner.
 */
.section_blog-header .blog-header_intro-wrapper { max-width: 100%; }
.section_blog-header h1 {
  max-width: 100%;
  hyphens: auto;
  overflow-wrap: break-word;
}
@media (max-width: 767px) {
  .section_blog-header h1 { font-size: 2.1rem; }
}
@media (max-width: 479px) {
  .section_blog-header h1 { font-size: 1.9rem; }
}