/* Seitenspezifische Regeln fuer die Startseite.
   Gemeinsame Muster stehen in bausteine.css. */

/* 1. Hero (Vorlage-Abschnitte 2 und 3) ------------------------------------ */

/* Eine Bilddatei statt der zwei Sektionen der Live-Seite: mobil steht das Bild
   ueber dem Text (order), ab Tablet rechts daneben. */
.hero__innen {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

.hero__bild {
  order: -1;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
}

/* Der Maklerclaim traegt die Marke und steht deshalb im CI-Blau. Bewusst
   --primaer (#0077b6) und kein helleres Blau: Auf der Hero-Flaeche haelt der
   Primaerton 3,40:1. Gerechnet ist das gegen die tatsaechlich gerenderte Flaeche —
   --flaeche-blau ist color-mix(--primaer 20%, transparent) UEBER dem Seitengrund
   --flaeche-hell, komponiert also rgb(184, 221, 240); dieselbe Rechenart wie in
   bausteine.css:82-86. Die Regel traegt damit allein wegen der Grosstext-Grenze
   von 3:1 (clamp ab 2rem, font-weight 700) — fuer Fliesstext waere sie zu wenig,
   und die Reserve betraegt 0,4 und nicht die 1,4, die die frueher hier stehende
   Zahl 4,43:1 nahelegte (die gilt auf reinem #e6f7ff, nicht auf der Blauflaeche).
   Ein Hellblau wie #90e0ef faellt hier klar durch. */
.hero__text h1 {
  color: var(--primaer);
}

/* Mobil steht der Hero-Text unter dem Bild und fuellt die ganze Breite —
   zentriert steht er als geschlossener Block unter dem mittig sitzenden Bild
   statt linksbuendig daneben zu haengen. Vorgabe aus Ticket 197dea4c Punkt 6
   (Melder Chris): Auf dem Handy soll die ganze Startseite einheitlich zentriert
   sein. Ab Tablet steht der Text neben dem Bild und bekommt seine Buendigkeit im
   768er-Block zurueck — wie schon bei .vorstellung__text. */
.hero__text {
  text-align: center;
}

/* margin-inline mobil, weil die 46ch ab rund 510px Fensterbreite greifen: Ohne
   die Zeile stuende der Absatz dort linksbuendig unter der zentrierten
   Ueberschrift. Auf Desktop bindet die Breite ebenfalls (473 von 560px) — dort
   nimmt der 768er-Block die Zentrierung wieder zurueck. Gleiches Muster wie
   .sektion__unterzeile in bausteine.css. */
.hero__unterzeile {
  margin-top: 1rem;
  max-width: 46ch;
  margin-inline: auto;
}

/* Die Knopfreihe ist ein Flexcontainer — text-align der Elternbox greift hier
   nicht, sie braucht ihre eigene mobile Zentrierung. */
.hero__aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.75rem;
}

/* 2. Trust-Leiste (Vorlage-Abschnitt 4) ----------------------------------- */

.trust__eintrag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.trust__symbol {
  width: 40px;
  height: 40px;
  color: var(--primaer);
}

/* Kennzahlen sind Beschriftungen, keine Abschnittstitel — die H2-Grundgroesse
   waere hier zu laut. Die Ebene h2 steht aus der Ueberschriftenhierarchie
   (der Abschnitt hat keine eigene Ueberschrift), die Groesse aus dem Design. */
.trust__eintrag h2 {
  font-size: 1rem;
}

.trust__text {
  color: var(--text-gedaempft);
  font-size: 0.9375rem;
}

/* 3. Partnerlogos (Vorlage-Abschnitt 5) ----------------------------------- */

/* Laufband aus DREI identischen Saetzen, reines CSS. Die Spur wandert um genau
   eine Satzbreite (-100%/3) — in diesem Moment steht Satz zwei dort, wo Satz eins
   begonnen hat, und der Ruecksprung auf 0 ist unsichtbar. Damit das Drittel exakt
   aufgeht, muessen alle Saetze gleich breit sein: Deshalb traegt JEDER Satz das
   padding-right, nicht nur ein Abstand zwischen zweien.

   Warum drei Saetze und nicht zwei: Bei zwei Saetzen deckt zur Nahtzeit nur noch
   ein einziger Satz den Container. Ein Satz ist mit den fuenf Partnerlogos rund
   820 px breit, der Container auf Desktop rund 1160 px — am rechten Bandrand lief
   dadurch einmal pro Umlauf eine Luecke auf. Mit drei Saetzen liegen dort immer
   zwei. DICHT BLEIBT DIE KONSTRUKTION, SOLANGE Containerbreite <= 2 x Satzbreite.
   Wer Logos entfernt oder den Container verbreitert, prueft das nach — sonst
   kommt die Luecke zurueck (die Belegbilder zeigen sie nicht, animations:
   'disabled' friert das Band auf translateX(0) ein). */
.logoband {
  overflow: hidden;
}

.logoband__spur {
  display: flex;
  width: max-content;
  animation: logoband-lauf 40s linear infinite;
}

.logoband__satz {
  display: flex;
  flex: none;
  align-items: center;
  gap: 2.5rem;
  padding-right: 2.5rem;
}

.logoband img {
  height: 40px;
  width: auto;
}

@keyframes logoband-lauf {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% / 3)); }
}

/* Zum Lesen anhalten, solange der Zeiger auf dem Band steht. Ein echter
   Stopp-Knopf (WCAG 2.2.2) braeuchte JavaScript und bleibt offener Punkt. */
.logoband:hover .logoband__spur {
  animation-play-state: paused;
}

/* Wer Bewegung abbestellt hat, bekommt die statische Reihe von frueher: keine
   Animation, ein Satz, umbrechend und zentriert. Der Geschwister-Selektor unten
   trifft Satz zwei UND Satz drei — jeder von beiden hat einen logoband__satz
   direkt vor sich. */
@media (prefers-reduced-motion: reduce) {
  .logoband__spur {
    display: block;
    width: auto;
    animation: none;
  }

  .logoband__satz {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 2.5rem;
    padding-right: 0;
  }

  .logoband__satz + .logoband__satz {
    display: none;
  }
}

/* 4. Wer ist Check4Vet (Vorlage-Abschnitt 6) ------------------------------ */

.vorstellung {
  display: grid;
  gap: 2rem;
  align-items: center;
}

/* Mobil steht der Textblock unter dem Video und fuellt die ganze Breite —
   linksbuendig wirkt er dort abgerissen. Ab Tablet steht er neben dem Video und
   bekommt seine Buendigkeit im 768er-Block zurueck (mobile-first, derselbe
   Umschaltpunkt wie das Raster darueber).

   Zentriert wird bewusst der GANZE Block, Ueberschrift und Fliesstext: Das ist die
   woertliche Vorgabe aus Ticket 3f3d807d Punkt 2 (Melder Chris), nicht eine
   Auslegung des Plans. Der Einwand aus dem Review (WR-12) — zentrierter
   mehrzeiliger Fliesstext flattert auf 360px an beiden Raendern und liest sich
   schlechter — steht als Entscheidungspunkt bei Chris; bis dahin bleibt es bei der
   Ticket-Vorgabe. Wer sie auf die Ueberschrift verengen will, aendert diese Regel
   auf ".vorstellung__text h2" und passt den 768er-Block mit an. */
.vorstellung__text {
  text-align: center;
}

.vorstellung__text > * + * {
  margin-top: 1rem;
}

.video {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  background: var(--weiss);
}

/* 5. Versicherungsfinder-Aufruf (Vorlage-Abschnitt 7) --------------------- */

.finder-aufruf {
  margin-top: 2rem;
  text-align: center;
}

/* 6. Zwei Wege (Vorlage-Abschnitt 8) -------------------------------------- */

/* Die Live-Seite gibt den beiden Etiketten unterschiedliche Farben (links hell
   mit blauer Schrift, rechts gefuellt) — beide Wege sind laut Vorlage
   gleichwertig, also tragen sie hier dasselbe Band. */
.karte__label {
  align-self: stretch;
  background: var(--primaer);
  color: var(--weiss);
  font-family: var(--schrift-headline);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border-radius: 999px;
}

.weg__bild {
  width: 220px;
  max-width: 100%;
  margin-inline: auto;
}

/* Mobil liegen die beiden Karten untereinander und ihr ganzer Inhalt steht
   zentriert (Ticket 197dea4c Punkt 6) — Etikett, Ueberschrift, Fliesstext und
   Knopf, unter dem ohnehin mittig sitzenden runden Bild. Bis dahin war nur der
   Knopf zentriert, der Rest linksbuendig; genau diese Mischung hat der Melder
   beanstandet. Ab Tablet zurueck auf links (768er-Block). */
.weg {
  text-align: center;
}

/* Ausnahme innerhalb der Karte: Die Hakenliste bleibt linksbuendig. Ihr Haken
   haengt absolut am linken Rand des Listenpunkts (bausteine.css) — bei
   zentriertem Text stuende er weit vor dem ersten Wort, und die mehrzeiligen
   Punkte wuerden zusaetzlich an beiden Raendern flattern. */
.weg .liste-haken {
  text-align: left;
}

/* Bei ungleich langen Texten stehen die beiden Knoepfe sonst auf
   verschiedenen Hoehen. Die Zentrierung kommt seit Ticket 197dea4c aus .weg
   (mobil) — hier steht nur noch die Hoehenangleichung. */
.weg__aktion {
  margin-top: auto;
  padding-top: 0.5rem;
}

/* 7. Kernprodukte (Vorlage-Abschnitt 9) ----------------------------------- */

/* Die Gegenregel gegen Weiss auf Weiss in den Karten des Verlaufsabschnitts steht
   seit dem Review in bausteine.css, direkt neben der Regel, die sie aufhebt —
   sonst haette jede weitere Seite mit .sektion--verlauf unlesbare Karten. */

.produkt {
  align-items: center;
  text-align: center;
}

.produkt__symbol {
  width: 96px;
  height: auto;
}

/* 8. In 3 Schritten (Vorlage-Abschnitt 10) -------------------------------- */

.schritt {
  align-items: center;
  text-align: center;
}

.schritt__nummer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primaer);
  color: var(--weiss);
  font-family: var(--schrift-headline);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
}

/* 9. Kundenstimmen (Vorlage-Abschnitt 11) --------------------------------- */

.stimme {
  align-items: center;
  text-align: center;
}

.sterne {
  color: var(--primaer);
  letter-spacing: 0.15em;
}

.stimme__bild {
  width: 96px;
}

.stimme__name {
  font-family: var(--schrift-headline);
  font-weight: 700;
}

.stimme__rolle {
  color: var(--text-gedaempft);
  font-size: 0.9375rem;
  margin-top: -0.75rem;
}

.stimme blockquote {
  font-style: italic;
}

.stimme__ergebnis {
  margin-top: auto;
  color: var(--primaer);
  font-weight: 600;
  font-size: 0.9375rem;
}

/* 10. Terminblock mit Schnellkontakt (Vorlage-Abschnitt 12) --------------- */

/* Mobil liegen Buchungsflaeche und Schnellkontakt untereinander und stehen
   zentriert (Ticket 197dea4c Punkt 6): Einwilligungshinweis, Ueberschriften,
   die beiden Anschriften, Kontakt- und Oeffnungszeiten. Ab Tablet zurueck auf
   links (768er-Block). Das eingebettete Buchungswidget bleibt unberuehrt — es
   liegt in einem eigenen Dokument und bringt sein Layout selbst mit. */
.termin__raster .karte {
  text-align: center;
}

/* Der Browser stellt address kursiv — hier ist es eine Anschrift, kein Zitat. */
.kontakt address {
  font-style: normal;
}

/* Flexcontainer wie .hero__aktionen: mittig auf dem Handy, ab Tablet links. */
.kontakt__aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

/* 11. Haeufige Fragen (Vorlage-Abschnitt 13) ------------------------------ */

.faq {
  max-width: 900px;
  margin-inline: auto;
}

.faq__eintrag {
  border-bottom: 1px solid var(--linie);
}

.faq__eintrag summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0.5rem;
  cursor: pointer;
}

/* display:flex nimmt dem summary den Standardmarker — ohne Ersatz sieht die Zeile
   nicht aufklappbar aus. Der Chevron rechts ist eine gedrehte Ecke aus zwei
   Rahmenlinien, wie in der Vorlage, und braucht keinen Icon-Font. */
.faq__eintrag summary::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--primaer);
  border-bottom: 2px solid var(--primaer);
  transform: translateY(-2px) rotate(45deg);
}

.faq__eintrag[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.faq__eintrag summary:focus-visible {
  outline: 3px solid var(--primaer);
  outline-offset: 2px;
}

/* Die Frage ist eine Ueberschrift, aber die Zeile darf beim Aufklappen nicht
   springen — deshalb ohne eigenen Aussenabstand und mit Textgewicht der Zeile. */
.faq__eintrag summary h3 {
  display: inline;
  font-size: 1rem;
}

.faq__eintrag > p {
  padding-bottom: 1rem;
  color: var(--text-gedaempft);
}

.faq__aktion {
  margin-top: 2rem;
  text-align: center;
}

/* 12. Ab Tablet ----------------------------------------------------------- */

@media (min-width: 768px) {
  .hero__innen {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }

  .hero__bild {
    order: 0;
    max-width: none;
  }

  .vorstellung {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }

  /* Saemtliche Zentrierungen dieser Seite gelten nur auf schmalen Geraeten:
     Ab Tablet steht neben jedem dieser Bloecke etwas anderes (Bild, zweite
     Karte, Buchungsflaeche), und zentrierter Text zwischen zwei Spalten liest
     sich schlechter als linksbuendiger. Der Desktop bleibt damit unveraendert. */
  .hero__text,
  .vorstellung__text,
  .weg,
  .termin__raster .karte {
    text-align: left;
  }

  .hero__unterzeile {
    margin-inline: 0;
  }

  .hero__aktionen,
  .kontakt__aktionen {
    justify-content: flex-start;
  }

  /* Buchungsflaeche links doppelt so breit wie der Schnellkontakt rechts. */
  .termin__raster {
    grid-template-columns: 2fr 1fr;
    align-items: start;
  }
}