/* mehr gefunden — Startseite: der Held von /gratis-check, zweimal (Alexander, 30.09.2026).

   Oben steht die Überschrift A, unten die Überschrift B. Beide Blöcke erzeugt
   lp_held.py aus gratis-check.html; die Regeln für Überschrift, Feld, Knopf und
   Schritt 2 kommen unverändert aus css/gratischeck.css. Diese Datei fasst dort
   nichts an. Sie holt nur nach, was die Checkseite über <body class="gc"> und
   ihren eigenen Aufbau bekommt und die Startseite nicht hat:

   - Grundfarbe, Schrift und Zeilenhöhe des Bands (body.gc gibt es hier nicht)
   - Abstand wie ein Abschnitt der Startseite statt Platz für den Checkseiten-Kopf
   - am Handy kein Held über die volle Bildschirmhöhe
   - Links unterstrichen (style.css nimmt jeden Link die Unterstreichung)
   - style.css setzt word-spacing auf jede h2; die Überschrift bleibt bei normal
   - Strich zeichnet sich erst, wenn die Überschrift im Bild ist (js/lp-held.js
     setzt html.lp-held-js und dem Band die Klasse ist-im-bild)
   - Puls am Knopf wie im Held, ebenfalls erst im Bild

   Die Klasse .gc trägt nur der Formularbereich (.gc-aktion), nicht das Band:
   So greifen die Regeln „.gc h2“ und „.gc a“ aus gratischeck.css nicht auf die
   Überschrift und die Zeilen unter dem Formular. */

/* ---------- Band ---------- */
.lp-held {
  background: var(--gc-grund);
  color: var(--gc-text);
  font-family: var(--gc-schrift-text);
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
/* Abstand wie bei einem Abschnitt der Startseite. Gleiche Spezifität wie
   .gc-held in gratischeck.css plus die eigene Klasse, gilt auch unter 640 px. */
.lp-held.gc-held {
  padding-block: clamp(3.5rem, 9vw, 6.5rem);
  border-bottom: 0;
}
.lp-held :where(a) { text-decoration: underline; text-underline-offset: .18em; }
.lp-held :focus-visible { outline: 3px solid var(--gc-gruen); outline-offset: 3px; border-radius: 4px; }

/* Am Handy hat der Held der Checkseite Höhe für einen ganzen Bildschirm.
   Auf der Startseite ist er ein Abschnitt unter anderen: wie ab 640 px,
   ohne Umschlag und ohne Füllelemente. */
@media (max-width: 639px) {
  .lp-held .gc-held__kern { display: contents; }
  .lp-held .gc-held__kern::before,
  .lp-held .gc-held__kern::after { content: none; }
}

/* style.css setzt word-spacing: .10em auf jede h2. Die Überschrift des Helds
   ist auf der Checkseite ohne diesen Zusatz gestaltet (Balken, Umbruch). */
.lp-held .gc-held__titel { word-spacing: normal; }

/* ---------- Bewegung erst im Bild ----------
   Grundzustand aus gratischeck.css: Der Strich zeichnet sich ab dem Laden
   (Klasse gc-js). Auf der Startseite liegt der Block weit unten; deshalb hält
   diese Regel die Animation an, bis js/lp-held.js „ist-im-bild“ setzt. Fehlt
   die Datei, fehlt auch die Klasse lp-held-js, und der Strich läuft wie auf der
   Checkseite. Bei „Bewegung reduzieren“ gibt es keine Animation (gratischeck.css),
   die Regel hat dann nichts zu halten. */
html.lp-held-js .lp-held:not(.ist-im-bild) .gc-strich path { animation-play-state: paused; }

/* Puls und Pfeil am Knopf „Jetzt prüfen“: Werte wie im Held der Checkseite
   (gratischeck.css, Regeln für data-gc-ort="hero"), die Keyframes gc-puls und gc-pfeil
   kommen von dort. Erst im Bild und nach dem Aufbau des Blocks (1,7 s), Ruhe bei Hover,
   Tastaturfokus und sobald das Formular den Fokus hat, bei „Bewegung reduzieren“ gar nicht. */
@media (prefers-reduced-motion: no-preference) {
  .gc-js .lp-held.ist-im-bild .gc-form .gc-weiter { animation: gc-puls 2s ease-in-out 1.7s infinite; }
  .gc-js .lp-held.ist-im-bild .gc-form .gc-weiter svg { animation: gc-pfeil 2s ease-in-out 1.7s infinite; }
  .gc-js .lp-held.ist-im-bild .gc-form .gc-weiter:hover,
  .gc-js .lp-held.ist-im-bild .gc-form .gc-weiter:focus-visible,
  .gc-js .lp-held.ist-im-bild .gc-form:focus-within .gc-weiter,
  .gc-js .lp-held.ist-im-bild .gc-form .gc-weiter:hover svg,
  .gc-js .lp-held.ist-im-bild .gc-form .gc-weiter:focus-visible svg,
  .gc-js .lp-held.ist-im-bild .gc-form:focus-within .gc-weiter svg { animation: none; }
}

/* ---------- Aufbau im Bild ----------
   Wie auf der Checkseite baut sich der Block nach und nach auf (Keyframes gc-hoch und
   gc-wisch aus gratischeck.css), aber erst, wenn er ins Bild kommt: js/lp-held.js setzt dann
   lp-rv auf dem Band (etwas früher als ist-im-bild, damit auch ein Sprung zum Anker #kontakt
   nie ein verstecktes Formular zeigt). Bis dahin steht alles unsichtbar bereit, nur mit
   html.lp-held-js und nur ohne „Bewegung reduzieren“. Fehlt das Skript oder scheitert die
   Beobachtung, bekommt jedes Band lp-rv und steht sofort da. */
@media (prefers-reduced-motion: no-preference) {
  html.lp-held-js .lp-held:not(.lp-rv) :is(.gc-held__zielgruppe, .gc-held__titel, .gc-aktion, .gc-rahmen,
    .gc-ki__satz, .gc-ki__zusatz, .gc-ki__marken li, .lp-held__gruss, .lp-held__direkt) { opacity: 0; }
  html.lp-held-js .lp-held:not(.lp-rv) .gc-kasten { clip-path: inset(-200% 100% -200% 0%); }

  html.lp-held-js .lp-held.lp-rv .gc-held__zielgruppe { animation: gc-hoch .7s var(--gc-ease) backwards; }
  html.lp-held-js .lp-held.lp-rv .gc-held__titel { animation: gc-hoch .85s var(--gc-ease) .12s backwards; }
  html.lp-held-js .lp-held.lp-rv .gc-kasten { animation: gc-wisch .75s cubic-bezier(.65, .05, .25, 1) .5s backwards; }
  html.lp-held-js .lp-held.lp-rv .gc-aktion { animation: gc-hoch .8s var(--gc-ease) .8s backwards; }
  html.lp-held-js .lp-held.lp-rv .gc-rahmen { animation: gc-hoch .7s var(--gc-ease) 1s backwards; }
  html.lp-held-js .lp-held.lp-rv :is(.gc-ki__satz, .gc-ki__zusatz) { animation: gc-hoch .7s var(--gc-ease) 1.1s backwards; }
  html.lp-held-js .lp-held.lp-rv .gc-ki__marken li { animation: gc-hoch .55s var(--gc-ease) 1.25s backwards; }
  html.lp-held-js .lp-held.lp-rv .gc-ki__marken li:nth-child(2) { animation-delay: 1.33s; }
  html.lp-held-js .lp-held.lp-rv .gc-ki__marken li:nth-child(3) { animation-delay: 1.41s; }
  html.lp-held-js .lp-held.lp-rv .gc-ki__marken li:nth-child(n+4) { animation-delay: 1.49s; }
  html.lp-held-js .lp-held.lp-rv .lp-held__gruss { animation: gc-hoch .7s var(--gc-ease) backwards; }
  html.lp-held-js .lp-held.lp-rv .lp-held__direkt { animation: gc-hoch .7s var(--gc-ease) 1.3s backwards; }
}
@media print {
  html.lp-held-js .lp-held:not(.lp-rv) * { opacity: 1 !important; clip-path: none !important; }
}

/* ---------- Zeilen um den Block ---------- */
/* Grußzeile der Kaltmail „Für <Firma> in <Ort>“ (js/widgets.js, bleibt verborgen,
   solange die Adresse keinen Parameter firma trägt) */
.lp-held__gruss {
  max-width: var(--gc-breite); margin: 0 auto clamp(1.2rem, 3vw, 1.8rem); padding-inline: var(--gc-rand);
  font: 500 .82rem/1.4 var(--gc-schrift-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--gc-gruen); text-align: center;
}
.lp-held__gruss[hidden] { display: none; }

/* „Lieber direkt schreiben?“ unter dem unteren Block: der Weg ohne Formular */
.lp-held__direkt {
  max-width: var(--gc-breite); margin: clamp(1.6rem, 4vw, 2.4rem) auto 0; padding-inline: var(--gc-rand);
  font-size: .95rem; line-height: 1.5; color: var(--gc-text-2); text-align: center;
}
.lp-held__direkt a { color: var(--gc-text); overflow-wrap: anywhere; }
.lp-held__direkt a:hover { color: var(--gc-gruen); }

/* ---------- Schalter: KI-Zeile ----------
   Steht MIT_KI_ZEILE in lp_held.py auf True, erscheint die Zeile mit den vier
   Zeichen unter dem Block. Ihre Zeichenregeln hängen in gratischeck.css an .gc
   und greifen im Band nicht; hier dieselben Werte. Bei False bleibt das ohne Wirkung. */
.lp-held .gc-ki__zeichen { width: 18px; height: 18px; flex: none; filter: brightness(0) invert(1); opacity: .95; }
.lp-held .gc-ki__marke--doku .gc-ki__zeichen { opacity: .62; }
@media (max-width: 360px) {
  .lp-held .gc-ki__zeichen { width: 14px; height: 14px; }
}