/* ============================================================
   HERO Startseite — Bauart Zusage, freigegeben 10.09.2026.
   Alle Farben, Radien, Schatten und Buttons aus den CI-Tokens
   in style.css. Keine eigenen Hex-Werte ausser Transparenzen.
   ============================================================ */

/* ---------- gemeinsam ---------- */
.hx { position: relative; overflow: hidden; padding: clamp(2.75rem, 6.5vw, 4.5rem) 0; }
.hx-title {
  display: inline-block; font-family: var(--font-body); font-size: .8rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-dark-2);
  background: var(--color-light-3); padding: .35rem .75rem; border-radius: 999px; margin: 0 0 1.1rem;
}
.hx-hook {
  font-family: var(--font-headline); font-size: clamp(2rem, 4.2vw, 3.3rem); line-height: 1.12;
  color: var(--color-dark-1); margin: 0 0 1.1rem; max-width: none;
}
/* Jeder der drei Saetze steht in einer eigenen Zeile -- das ist der Dreiklang der
   Marke. Als Fliesstext brachen sie mitten im Satz um ("Bei Google / gefunden."). */
.hx-hook__z { display: block; white-space: nowrap; }
/* Zwischen 768 und 1100 px brach "Ohne Anzeigenbudget." in zwei Zeilen und liess
   "Ohne" allein stehen. Statt den Umbruch zu erlauben, wird die Schrift dort so
   bemessen, dass jede der drei Zeilen ganz bleibt. */
@media (min-width: 768px) and (max-width: 1100px) {
  .hx-hook { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
}
.hx-hook .hook-accent { color: var(--color-dark-2); }
.hx-sub { font-size: 1.08rem; color: var(--color-muted); margin: 0 0 1.5rem; max-width: 46ch; line-height: 1.5; }
.hx-ki { font-size: 1rem; font-weight: 600; color: var(--color-muted); margin: 1.1rem 0 0; padding-left: 2.4rem; }
.hx-kanal .hx-ki { color: var(--color-neon-1); }
.hx-cta { margin: 1.8rem 0 1.15rem; }
.hx-cta .btn-large { min-height: 48px; display: inline-flex; align-items: center; }

/* Kennzahlfelder — Schnitt wie auf den Leistungsseiten */
.hx-marken { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.hx-marken li {
  background: var(--color-light-3); border-radius: var(--radius); padding: .8rem .9rem;
  border: 2px solid var(--color-dark-1); box-shadow: 0 3px 0 var(--color-dark-1);
}
.hx-marken li strong { display: block; font-family: var(--font-headline); font-size: 1.35rem; color: var(--color-dark-1); line-height: 1.1; white-space: nowrap; }
.hx-marken li span { display: block; font-size: .78rem; color: var(--color-muted); margin-top: .3rem; line-height: 1.35; }
.hx-marken li.hx-marke--garantie { background: var(--color-dark-1); border-color: var(--color-dark-1); }
.hx-marke--garantie a { display: block; text-decoration: none; min-height: 44px; }
.hx-marken li.hx-marke--garantie strong { color: var(--color-neon-1); }
.hx-marken li.hx-marke--garantie span { color: var(--color-light-2); }
.hx-marke--garantie a:hover strong { text-decoration: underline; text-underline-offset: 3px; }

/* Bewertungs-Pill */
.hx-pill {
  display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
  background: var(--color-bg); border: 2px solid var(--color-dark-1); border-radius: 999px;
  padding: .45rem .9rem; box-shadow: var(--shadow-sm); min-height: 44px;
}
.hx-stars { color: #F5A623; letter-spacing: 1px; font-size: .9rem; }
.hx-pill { max-width: 100%; flex-wrap: wrap; }
.hx-pill__meta { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--color-dark-1); }
@media (min-width: 360px) { .hx-pill__meta { white-space: nowrap; } }
.hx-pill__meta strong { font-size: .95rem; }

/* ============================================================
   D — ZUSAGE (Bild links, Siegel auf der Kante)
   ============================================================ */
.hx-zusage__grid { display: grid; grid-template-columns: .84fr 1.16fr; gap: 3.75rem; align-items: center; }
.hx-zusage__bild { position: relative; aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: visible; }
.hx-zusage__bild > img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); background: var(--color-light-2); }
.hx-zusage__siegel-link { position: absolute; right: -34px; bottom: 22px; display: block; line-height: 0; border-radius: 50%; }
.hx-siegel { width: 150px; height: 150px; display: block; filter: drop-shadow(0 8px 18px rgba(13,43,26,.28)); }
.hx-siegel__haken { stroke-dasharray: 62; stroke-dashoffset: 62; animation: hxHaken .7s ease .45s forwards; }
@keyframes hxHaken { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .hx-siegel__haken { animation: none; stroke-dashoffset: 0; } }
.hx-zusage__bgmobil { display: none; }
/* Bullets tragen das Ergebnis. Marken-Rampe mit Haekchen wie auf der Live-Seite. */
.hx-bullets { list-style: none; margin: 1.9rem 0 0; padding: 0; display: grid; gap: 1.05rem; max-width: 52ch; }
/* Kein flex auf dem li: sonst wird <strong> ein eigenes Flex-Item und der Rest des
   Satzes rutscht in eine zweite Spalte -- die zweite Zeile begann dann mit einem
   Komma. Haekchen absolut, Text fliesst normal. */
.hx-bullets li { position: relative; padding-left: 2.4rem; font-size: 1.02rem; line-height: 1.5; color: var(--color-text); }
.hx-bullets li strong { color: var(--color-dark-1); }
.hx-bullets li::before {
  content: ""; position: absolute; left: 0; top: .1rem; width: 26px; height: 26px;
  background-color: var(--color-neon-1);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D2B1A' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 13 10 18 19 7'/></svg>");
  background-position: center; background-repeat: no-repeat; background-size: 70%;
  border-radius: 7px; border: 2px solid var(--color-dark-1); box-shadow: 0 2px 0 var(--color-dark-1);
}

/* Garantie: schmale Zeile statt Kasten. Sie sichert das Ergebnis ab, sie ist nicht das Ergebnis. */
.hx-zusage__zeile {
  display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: 1.8rem 0 0; padding: .75rem 1.05rem; text-decoration: none;
  background: var(--color-light-3); border-left: 4px solid var(--color-neon-1);
  border-radius: 0 var(--radius) var(--radius) 0; min-height: 44px; max-width: 52ch;
}
.hx-zusage__wort { font-family: var(--font-body); font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-dark-2); }
.hx-zusage__satz { font-size: .92rem; color: var(--color-text); }
.hx-zusage__pfeil { color: var(--color-dark-2); font-weight: 700; }
.hx-zusage__zeile:hover .hx-zusage__satz { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   MOBIL
   ============================================================ */
@media (max-width: 767px) {
  /* Falz-Budget: der CTA muss oberhalb von 90 % des ersten Bildschirms beginnen
     (760 px bei 844). Gemessen lag er bei 880 px -- die Abstaende sind deshalb
     mobil gestrafft, die Reihenfolge bleibt wie freigegeben. */
  .hx { padding: 1.25rem 0 1.5rem; }
  .hx-title { margin-bottom: .7rem; }
  .hx-hook { margin-bottom: .8rem; }
  .hx-bullets { margin-top: 1.1rem !important; gap: .7rem !important; }
  .hx-bullets li { padding-left: 2.2rem; line-height: 1.4; }
  .hx-bullets li::before { width: 22px; height: 22px; }
  .hx-cta { margin: .9rem 0 .9rem; }
  .hx-zusage__bild { margin-bottom: 0 !important; }
  /* Falz-Budget (Adrian, 10.09.2026): drei Wege gemeinsam, damit der CTA mobil
     oberhalb von 90 % des ersten Bildschirms beginnt. Desktop bleibt unveraendert. */
  .hx-text { display: flex; flex-direction: column; }
  .hx-title  { order: 1; }
  .hx-hook   { order: 2; }
  .hx-bullets{ order: 3; }
  .hx-cta    { order: 4; }
  .hx-pill   { order: 5; margin-top: 1rem; }   /* Weg 1: Pill unter den CTA */
  .hx-ki     { order: 6; margin-top: .9rem; padding-left: 0; font-size: .95rem; }  /* Weg 3 */
  .hx-zusage__zeile { order: 7; }
  .hx-zusage__bild { width: 110px; height: 110px; }        /* Weg 2 */
  .hx-zusage__siegel-link { right: -38px; bottom: -4px; }
  .hx-siegel { width: 84px; height: 84px; }
  /* Mobil so gross wie moeglich, aber klein genug, dass jeder der drei Saetze in
     EINE Zeile passt -- "Ohne Anzeigenbudget." hat nur zwei Woerter, ein Umbruch
     laesst "Ohne" allein stehen. Untergrenze fuer den Blickfang ist 26 px. */
  .hx-hook { font-size: clamp(1.65rem, 7.1vw, 2.3rem); max-width: none; }
  .hx-hook__z { white-space: nowrap; }
  .hx-title { font-size: .72rem; }
  .hx-sub { font-size: 1rem; max-width: none; margin-bottom: 1.1rem; }
  .hx-marken { grid-template-columns: 1fr; gap: .5rem; }
  .hx-marken li { display: flex; align-items: baseline; gap: .6rem; padding: .55rem .75rem; }
  .hx-marken li strong { font-size: 1.05rem; }
  .hx-marken li span { margin-top: 0; font-size: .8rem; }
  .hx-marke--garantie a { display: flex; align-items: baseline; gap: .6rem; }
  .hx-cta { margin: 1.1rem 0 .8rem; }
  .hx-cta .btn-large { width: 100%; justify-content: center; }

  /* B — Muster 4: Belege angeschnitten als Scroll-Anreiz */
  .hx-beweis__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .hx-belege {
    grid-auto-flow: column; grid-auto-columns: 74%; gap: .75rem;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -1rem; padding: .25rem 1rem .75rem;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .hx-belege::-webkit-scrollbar { display: none; }
  .hx-beleg { scroll-snap-align: start; margin: 0 !important; }
  .hx-beleg__flaeche { aspect-ratio: 3 / 1; }
  .hx-beleg figcaption { padding: .45rem .7rem .55rem; font-size: .74rem; }
  .hx-beleg__label { padding: .25rem .7rem; font-size: .7rem; }

  /* C — Belege unter den Text, volle Breite */
  .hx-kanal__inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .hx-kbeleg figcaption { font-size: .78rem; }

  /* D — Muster 6: Portrait-Medaillon, Siegel daneben */
  .hx-zusage__grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .hx-zusage__bild {
    order: -1; aspect-ratio: auto; width: 150px; height: 150px;
    border-radius: 50%; overflow: visible; margin-bottom: .25rem;
  }
  .hx-zusage__bild > img { border-radius: 50%; aspect-ratio: 1/1; box-shadow: var(--shadow-md); }
  .hx-zusage__siegel-link { right: -46px; bottom: -6px; }
  .hx-siegel { width: 116px; height: 116px; }
  .hx-bullets { font-size: .97rem; max-width: none; margin-top: 1.5rem; gap: .9rem; }
  .hx-zusage__zeile { max-width: none; width: 100%; }
}

/* Unter 360 px passt die laengste Hook-Zeile auch bei 26 px nicht mehr in den
   Container und blaeht die Textspalte ueber den Rand. Dort ist ein Umbruch das
   kleinere Uebel. Eigener Block am Dateiende: ein zusaetzliches } mitten im
   767px-Block hatte dessen Rest herausgerissen, das Siegel ragte danach mobil
   ueber den Rand. */
@media (max-width: 359px) {
  .hx-hook__z { white-space: normal; }
}

/* ============================================================
   KUNDENSTIMME — einzelnes Zitat mit Beleg (Birgit Schmitz)
   Steht frueh auf der Seite, wo sonst 700 Woerter ohne
   menschliche Stimme liefen.
   ============================================================ */
.stimme-section { background: var(--color-light-3); }
.stimme { margin: 0; display: grid; grid-template-columns: auto 1fr auto; gap: 2.25rem; align-items: center; }
.stimme__foto { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; border: 3px solid var(--color-bg); box-shadow: var(--shadow-md); }
.stimme__text { margin: 0; }
.stimme__text p { font-size: 1.22rem; line-height: 1.5; color: var(--color-dark-1); margin: 0 0 .9rem; max-width: 46ch; }
.stimme__text cite { font-style: normal; display: flex; flex-direction: column; gap: .1rem; }
.stimme__text cite strong { color: var(--color-dark-1); font-size: .98rem; }
.stimme__text cite span { color: var(--color-muted); font-size: .88rem; }
.stimme__beleg { display: grid; gap: .5rem; max-width: 380px; }
.stimme__beleg img { width: 100%; height: auto; border-radius: var(--radius); border: 2px solid var(--color-dark-1); box-shadow: var(--shadow-sm); display: block; }
.stimme__beleg span { font-size: .76rem; color: var(--color-muted); line-height: 1.4; }
@media (max-width: 1023px) {
  .stimme { grid-template-columns: auto 1fr; gap: 1.5rem; }
  .stimme__beleg { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 767px) {
  .stimme { grid-template-columns: 1fr; gap: 1.1rem; }
  .stimme__foto { width: 96px; height: 96px; }
  .stimme__text p { font-size: 1.08rem; max-width: none; }
}

/* ============================================================
   LOGO-LAUFBAND — Kundenlogos wandern endlos durch
   Der Track enthaelt dieselben Logos zweimal; bei -50 % ist die
   zweite Haelfte exakt dort, wo die erste startete -- deshalb
   springt nichts. Die Kopie ist aria-hidden, sonst liest ein
   Screenreader jedes Logo doppelt.
   ============================================================ */
.logo-band { display: flex; gap: 3rem; 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); }
.logo-spur { display: flex; align-items: center; gap: 3rem; flex: 0 0 auto; animation: logoLauf 34s linear infinite; }
.logo-band:hover .logo-spur { animation-play-state: paused; }
@keyframes logoLauf { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 3rem)); } }
/* Kacheln bleiben wie bisher: farbig, weisser Grund, Rahmen. Nur die
   Anordnung wird zum Laufband -- kein Graustufen-Look, den es vorher nicht gab.
   Apollo hat ein feines Punktmuster, das unter grayscale fast verschwindet. */
.logo-band .client-tile { flex: 0 0 auto; width: 190px; min-height: 96px; }
.logo-band .client-tile img { max-height: 56px; }
@media (prefers-reduced-motion: reduce) {
  /* flex-wrap muss auf die SPUR, nicht auf das Band: nach dem Ausblenden der Kopie
     hat das Band nur noch ein Kind, dort greift wrap nicht. Vorher lief die Spur in
     voller Breite (1618 px) aus dem Container, auf 390 px war ein Logo sichtbar. */
  .logo-band { display: block; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .logo-band [aria-hidden="true"] { display: none; }
  .logo-spur { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; }
}
@media (max-width: 767px) {
  .logo-band, .logo-spur { gap: 2rem; }
  @keyframes logoLauf { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 2rem)); } }
}

/* Portrait der Kundenstimme deutlich groesser (Adrian, 10.09.2026) */
.stimme__foto { width: 200px; height: 200px; }
@media (max-width: 767px) { .stimme__foto { width: 148px; height: 148px; } }

/* cite sitzt jetzt in der figcaption (geo-026), damit ein Parser Name und Beruf
   nicht als Teil des Zitats liest. KEIN grid-row hier: das hat die Zitat-Spalte
   auf 133 px gequetscht (gemessen 1440 px). */
.stimme__beleg cite { font-style: normal; display: flex; flex-direction: column; gap: .1rem; order: -1; margin-bottom: .35rem; }
.stimme__beleg cite strong { color: var(--color-dark-1); font-size: .98rem; }
.stimme__beleg cite span { color: var(--color-muted); font-size: .88rem; }