/* ============================================================
   LP "Website in 24 Stunden" (/website-24-stunden/)
   Wird NUR auf dieser Seite geladen (ent_assets() in functions.php).

   Zweck: zwei gezeichnete Website-Vorschauen, damit die Aktionsseite
   nicht aus vier gleich aussehenden Kartenwaenden besteht. Alles CSS,
   keine Bilddateien: bleibt scharf auf jedem Display, kostet keine
   Ladezeit und braucht keine KI-Kennzeichnung.

   Bausteine:
     .lp24-stage     Hero-Buehne: Browserfenster + Handy + zwei Chips
     .lp24-screens   grosse Vorschau "so ist die Seite aufgebaut"
     .lp24-nots      kompakte Ausschluss-Liste (statt dritter Kartenwand)
   Tokens kommen aus styles.css (--panel, --line, --grad, ...).
   ============================================================ */

/* ---- gemeinsame Fenster-Optik ---- */
.lp24-win{
  border:1px solid var(--line-2);border-radius:calc(var(--radius) * .8);overflow:hidden;
  background:var(--panel);
  box-shadow:0 40px 90px -34px rgba(0,0,0,.85);
}
.lp24-win-bar{
  display:flex;align-items:center;gap:6px;padding:0 14px;height:34px;
  background:color-mix(in oklab,var(--panel-2) 88%,var(--g1));
  border-bottom:1px solid var(--line);
}
.lp24-win-bar i{width:8px;height:8px;border-radius:50%;background:var(--line-2);flex:none;}
.lp24-win-bar i:first-child{background:color-mix(in oklab,var(--g3) 70%,var(--line-2));}
.lp24-win-url{
  margin-left:10px;height:16px;flex:1;max-width:230px;border-radius:99px;
  background:var(--bg);border:1px solid var(--line);
  display:flex;align-items:center;padding:0 9px;
  font-family:var(--eyebrow-font);font-size:9.5px;letter-spacing:.04em;color:var(--ink-3);
}
.lp24-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:11px;}
.lp24-screenband{
  border-radius:9px;background:var(--grad);position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;gap:8px;padding:0 16px;
}
.lp24-screenband b{display:block;height:12px;width:58%;border-radius:4px;background:rgba(4,18,26,.82);}
.lp24-screenband s{display:block;height:8px;width:38%;border-radius:4px;background:rgba(4,18,26,.45);}
.lp24-screenband em{position:absolute;right:14px;bottom:13px;height:22px;width:76px;border-radius:99px;background:rgba(4,18,26,.85);}
.lp24-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
.lp24-cards span{height:48px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);}
.lp24-lines{display:flex;flex-direction:column;gap:7px;}
.lp24-lines i{display:block;height:7px;border-radius:4px;background:var(--panel-2);}
.lp24-lines i:nth-child(2){width:78%;}
.lp24-lines i:nth-child(3){width:52%;}

/* ---- Hero-Buehne ---- */
.lp24-stage{position:relative;width:100%;max-width:520px;justify-self:end;padding:0 0 40px;}
.lp24-stage .lp24-win{margin-right:56px;}
.lp24-stage .lp24-screenband{height:96px;}
/* Handy: festes Geraete-Verhaeltnis statt einer Hoehe, die sich aus dem Inhalt
   ergibt. Vorher war das Verhaeltnis 1:1.57 und las sich als hochgezogenes Tablet.
   9:19.5 ist das Format aktueller Smartphones, damit ist sofort klar, was es ist. */
.lp24-phone{
  position:absolute;right:0;bottom:0;width:106px;padding:5px;border-radius:17px;
  background:var(--bg);border:1px solid var(--line-2);
  box-shadow:0 30px 60px -22px rgba(0,0,0,.9);
}
.lp24-phone-in{
  position:relative;border-radius:15px;overflow:hidden;background:var(--panel);
  aspect-ratio:9 / 19.5;display:flex;flex-direction:column;
}
/* angedeutete Kamerainsel, macht die Geraeteart eindeutig */
.lp24-phone-in::before{
  content:"";position:absolute;left:50%;top:5px;transform:translateX(-50%);
  width:28px;height:4px;border-radius:99px;background:var(--bg);z-index:2;
}
.lp24-phone-hero{flex:0 0 38%;background:var(--grad);}
.lp24-phone-body{flex:1;padding:9px;display:flex;flex-direction:column;gap:6px;}
.lp24-phone-body i{display:block;height:6px;border-radius:3px;background:var(--panel-2);}
.lp24-phone-body i:nth-child(2){width:68%;}
.lp24-phone-body i:nth-child(3){width:44%;}
.lp24-phone-body u{
  display:block;height:19px;border-radius:5px;margin-top:auto;
  background:color-mix(in oklab,var(--g2) 18%,var(--panel-2));border:1px solid var(--line-2);
}
.lp24-stage .chip{position:absolute;bottom:12%;left:-8%;}

/* Hero-Raster wie bei den anderen LPs (.lp-stage in visuals.css): breitere
   Textspalte, kleinere H1-Stufe, damit die Headline nicht funfzeilig wird. */
.hero:has(.lp24-stage) .hero-inner{grid-template-columns:1.35fr .85fr;gap:48px;}
.hero:has(.lp24-stage) h1{font-size:clamp(34px,3.5vw,54px);line-height:1.06;}

/* MOBIL, Footgun: overrides.css loest .hero-copy per display:contents auf und
   ordnet die Hero-Kinder ueber feste order-Werte (eyebrow 1, h1 2, stage 3,
   lede 4, cta 5). Alles ohne eigenen order-Wert landet auf 0 und rutscht damit
   VOR die Headline. Neue Hero-Elemente brauchen deshalb immer einen order-Wert. */
@media(max-width:1040px){
  /* gap MUSS hier mit zurueckgesetzt werden. Im Zweispalter sind 48px richtig,
     mobil addiert derselbe Wert sich auf jede Margin drauf: gemessen standen
     zwischen Eyebrow, Headline, Lede und Button durchgehend 70 bis 84px, also
     ueberall gleich viel. Kein Rhythmus, nur Leere. */
  .hero:has(.lp24-stage) .hero-inner{grid-template-columns:1fr;gap:0;}

  /* Rhythmus im Hero: Eyebrow klebt an der Headline, Headline und Lede gehoeren
     zusammen, vor dem Button und vor dem Mockup wird es luftiger. */
  .hero:has(.lp24-stage) .eyebrow{margin-bottom:14px;}
  .hero:has(.lp24-stage) h1{margin-bottom:18px;}
  .hero:has(.lp24-stage) .lede{margin-bottom:26px;}
  .hero:has(.lp24-stage) .hero-cta{margin-top:0;}
  /* Mockup NACH den Button: davor stand es zwischen Headline und Angebot und
     schob den CTA auf ~875px, also auf jedem gaengigen Handy unter die Falz
     (gemessen mit scripts/../falz-Test, 375 bis 430px Viewport). */
  .lp24-stage{order:6;justify-self:center;max-width:380px;margin:30px auto 0;padding-bottom:26px;}
  .lp24-stage .chip{left:-2%;}
  /* Mobil kommt der Button VOR die Haken-Zeile: sonst steht der Einstieg ins
     Angebot unter der Falz und man muss erst scrollen, um ihn zu sehen. */
  .hero:has(.lp24-stage) .hero-cta{order:5;margin-top:4px;}
  .hero:has(.lp24-stage) .lp24-fakten{order:7;margin:26px 0 0;}
  .lp24-hinweis{order:8;margin-top:18px;}
}
@media(max-width:520px){
  .lp24-stage .lp24-win{margin-right:40px;}
  .lp24-phone{width:88px;}
  .lp24-stage .chip{display:none;}
}

/* ---- grosse Vorschau: Aufbau der Seite ---- */
.lp24-screens{
  display:grid;grid-template-columns:1.35fr .65fr;gap:34px;align-items:center;margin-top:44px;
}
.lp24-screens .lp24-screenband{height:118px;}
.lp24-screens .lp24-body{padding:18px 18px 22px;gap:13px;}
.lp24-mark{
  display:flex;align-items:center;gap:10px;padding:11px 0;
  border-top:1px solid var(--line);
}
.lp24-mark:first-child{border-top:none;padding-top:0;}
.lp24-mark span{
  width:23px;height:23px;flex:none;border-radius:7px;display:grid;place-items:center;
  background:color-mix(in oklab,var(--g2) 16%,var(--panel));border:1px solid var(--line-2);
  font-family:var(--eyebrow-font);font-size:11px;color:var(--g2);
}
.lp24-mark b{font-family:var(--head-font);font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink);}
.lp24-mark em{font-style:normal;font-size:13.5px;color:var(--ink-3);margin-left:auto;text-align:right;}
@media(max-width:900px){
  .lp24-screens{grid-template-columns:1fr;gap:24px;}
}

/* ---- Ausschluesse: eine Zeile statt einer Kartenwand ---- */
.lp24-nots{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:30px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;}
.lp24-not{background:var(--bg);padding:22px 24px;display:flex;gap:13px;align-items:flex-start;}
.lp24-not svg{width:19px;height:19px;flex:none;margin-top:2px;stroke:var(--ink-3);fill:none;stroke-width:1.8;}
.lp24-not b{display:block;font-family:var(--head-font);font-size:16px;font-weight:600;letter-spacing:-.01em;margin-bottom:5px;color:var(--ink);}
.lp24-not p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-3);}
@media(max-width:820px){.lp24-nots{grid-template-columns:1fr;}}

/* ---- Preiszeile im Hero ---- */
.lp24-abschluss{padding-top:64px;}

/* Hoeheres Nachrichtenfeld: die Groesse des Feldes sagt dem Ausfuellenden,
   wie viel erwartet wird. Die 120px des Themes laden zu drei Zeilen ein. */
#briefing .field textarea{min-height:180px;}

/* Hilfetext ueber dem Nachrichtenfeld: sichtbar stehen lassen, nicht als
   Placeholder. Ein Placeholder verschwindet beim ersten Zeichen, genau dann,
   wenn die Checkliste gebraucht wird. */
.lp24-hilfe{
  margin:0 0 10px;font-size:13.5px;line-height:1.55;color:var(--ink-3);
  max-width:62ch;text-wrap:pretty;
}
.lp24-fakten{display:flex;flex-wrap:wrap;gap:10px 26px;margin:22px 0 30px;}
.lp24-hinweis{margin-top:20px;font-size:13.5px;line-height:1.55;color:var(--ink-3);max-width:56ch;}
.lp24-fakt{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--ink-2);}
.lp24-fakt svg{width:17px;height:17px;stroke:var(--g2);fill:none;stroke-width:2.2;flex:none;}

/* ---- Aufbau-Vorschau: fuenf nummerierte Abschnitte im Fenster ---- */
.lp24-sect{position:relative;padding-left:34px;}
.lp24-sect + .lp24-sect{margin-top:11px;}
.lp24-sect > b.nr{
  position:absolute;left:0;top:0;width:22px;height:22px;border-radius:7px;
  display:grid;place-items:center;font-family:var(--eyebrow-font);font-size:11px;
  color:var(--g2);background:color-mix(in oklab,var(--g2) 16%,var(--panel));border:1px solid var(--line-2);
}
.lp24-inner{border-radius:8px;background:var(--panel-2);border:1px solid var(--line);padding:11px 13px;}
.lp24-inner.hero{background:var(--grad);border-color:transparent;padding:16px 16px 18px;display:flex;flex-direction:column;gap:8px;}
.lp24-inner.hero i{display:block;height:11px;border-radius:4px;background:rgba(4,18,26,.82);width:62%;}
.lp24-inner.hero i.s{height:7px;width:40%;background:rgba(4,18,26,.45);}
.lp24-inner.hero u{display:block;height:20px;width:72px;border-radius:99px;background:rgba(4,18,26,.85);margin-top:4px;}
.lp24-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
.lp24-tiles span{height:40px;border-radius:6px;background:var(--panel);border:1px solid var(--line);}
.lp24-two{display:grid;grid-template-columns:1fr 1fr;gap:11px;align-items:center;}
.lp24-two .ph{height:44px;border-radius:6px;background:color-mix(in oklab,var(--g1) 12%,var(--panel));border:1px solid var(--line);}
.lp24-two .tx{display:flex;flex-direction:column;gap:6px;}
.lp24-two .tx i{display:block;height:6px;border-radius:3px;background:var(--panel);}
.lp24-two .tx i:nth-child(2){width:74%;}
.lp24-stars{display:flex;gap:9px;}
.lp24-stars span{flex:1;height:36px;border-radius:6px;background:var(--panel);border:1px solid var(--line);position:relative;}
.lp24-stars span::after{content:"";position:absolute;left:9px;top:9px;width:34px;height:5px;border-radius:3px;background:color-mix(in oklab,var(--g-warn,#E0B23A) 55%,transparent);}
.lp24-form{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.lp24-form i{display:block;height:22px;border-radius:5px;background:var(--panel);border:1px solid var(--line);}
.lp24-form i.wide{grid-column:1 / -1;height:30px;}
.lp24-form i.btn{grid-column:1 / -1;height:24px;width:96px;background:var(--grad);border-color:transparent;}

/* ---- Bildbaender mitten in der Seite ----
   ACHTUNG Namen: .lp24-band sind die grossen BILDBAENDER (zusammen mit .ref-band),
   .lp24-screenband ist der Gradient-Streifen INNERHALB der gezeichneten Mockups.
   Beide hiessen kurzzeitig gleich: dadurch erbte der Mockup-Streifen die min-height
   der Baender und stand als 320px hohe Flaeche im Hero.
   Nutzt .ref-band aus visuals.css (Motiv + Abdunkelung links + Auslauf nach unten).
   Dort ist oben Platz fuer die fixierte Nav eingerechnet, das brauchen Baender
   mitten im Text nicht. Motive sind KI-generiert und als solche gekennzeichnet. */
/* Hoehe MUSS mit der Fensterbreite wachsen. Bei fester Hoehe und object-fit:cover
   schrumpft der sichtbare Bildausschnitt mit jedem Pixel Fensterbreite: gemessen
   blieben bei 3440px noch 21 Prozent des Motivs uebrig, ein Streifen quer durchs
   Kinn. Der Deckel bei 640px haelt das Band auf Ultrawide trotzdem im Rahmen. */
.lp24-band{padding:0;min-height:clamp(320px,25vw,640px);}
.lp24-band .ref-band-bg img{object-position:70% 8%;}
/* Die Motive tragen links eine dunkle Vordergrundflaeche mit sichtbarer Kante.
   Der Standard-Verlauf von .ref-band endet zu frueh und laesst sie stehen, hier
   deckt er weiter nach rechts ab: Kante weg, Schrift traegt sicher. */
.lp24-band::after{
  background:
    linear-gradient(to right,
      var(--bg) 0%,
      color-mix(in oklab, var(--bg) 94%, transparent) 38%,
      color-mix(in oklab, var(--bg) 55%, transparent) 62%,
      color-mix(in oklab, var(--bg) 18%, transparent) 84%,
      transparent 100%),
    linear-gradient(to bottom,
      var(--bg) 0%,
      color-mix(in oklab, var(--bg) 52%, transparent) 13%,
      transparent 34%,
      transparent 62%,
      var(--bg) 100%);
}
.lp24-band .ref-band-text{max-width:min(100%,560px);}
.lp24-band .ref-band-text h2{margin-bottom:14px;font-size:clamp(28px,3.2vw,42px);}
.lp24-band .ref-band-text p{color:var(--ink-2);font-size:17px;line-height:1.6;max-width:46ch;}
.lp24-band .btn{margin-top:22px;}
/* Die Kennzeichnung laeuft im selben Raster wie der Seiteninhalt, nicht am
   Fensterrand: full-bleed positioniert sass sie auf einem Ultrawide ueber einen
   halben Meter neben dem Bild und war praktisch nicht auffindbar. */
.lp24-bildnote{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:3;margin:0;
  width:min(100%, var(--maxw, 1220px));padding-inline:32px;text-align:right;
  font-family:var(--eyebrow-font);font-size:10.5px;letter-spacing:.04em;
  color:color-mix(in oklab,var(--ink-3) 80%,transparent);
}
@media(max-width:760px){
  .lp24-band{min-height:0;padding:44px 0 48px;}
  .lp24-band .ref-band-bg img{object-position:74% center;}  /* schmal gibt es keinen vertikalen Ueberstand */
  /* Schmal liegt der Text zwangslaeufig auf dem Motiv: horizontale Abdunkelung
     bringt hier nichts, es braucht eine flaechige. Sonst steht die Headline auf
     Gesicht und Schuerze und wird unlesbar. */
  .lp24-band::after{
    background:
      linear-gradient(to bottom,
        var(--bg) 0%,
        color-mix(in oklab, var(--bg) 86%, transparent) 12%,
        color-mix(in oklab, var(--bg) 78%, transparent) 62%,
        var(--bg) 100%);
  }
  .lp24-bildnote{padding-inline:20px;text-align:left;bottom:12px;}
}

/* ---- Breite Schirme: Motiv ins Seitenraster boxen ----
   Full-bleed heisst auf einem Ultrawide, dass das Motiv am rechten Fensterrand
   klebt, weit weg vom Text, der bei --maxw zentriert steht. Ab 1600px sitzt das
   Bild deshalb in einer zentrierten Box von 1600px (Seiten-Container 1220px plus
   etwas Ueberstand, damit es ein Band bleibt und kein eingesetztes Foto). Beide
   Kanten laufen per Maske aus. Nebeneffekt, der den eigentlichen Fehler behebt:
   das Motiv waechst nicht mehr mit dem Fenster mit.
   Regel dahinter: rules/styles/layout.md, "Vollflaechige Bilder". */
@media (min-width:1600px){
  .lp24-band .ref-band-bg{
    left:50%;right:auto;transform:translateX(-50%);width:1600px;
    -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-image:linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  }
}

/* ---- Mobiler Seitenrhythmus ----
   Das Theme faehrt mobil 56px Sektions-Padding und 56px unter jedem
   Sektionskopf. Auf einer Aktionsseite, die aus vielen kurzen Bloecken besteht,
   summiert sich das zu Luecken von 130 bis 180px zwischen Textpassagen: der
   Leser scrollt durch Leere und verliert den Zusammenhang. Nur schmal, nur auf
   dieser Seite (das Stylesheet laedt nirgends sonst). */
@media (max-width:760px){
  .lp .section{padding:44px 0;}
  .lp .section-tight{padding:38px 0;}
  .lp .section-head{margin-bottom:30px;}
  .lp .section-head .sub{margin-top:14px;}
  .lp .proof-claim{margin-bottom:34px;}
  .lp .ref-band + .section{padding-top:44px;}
  /* Der Abschluss-CTA steht direkt hinter dem FAQ und braucht keine doppelte Luft.
     Das Padding stand vorher als inline-style im Partial und war damit von hier
     aus nicht erreichbar. */
  .lp .lp24-abschluss{padding-top:24px;padding-bottom:32px;}
  /* Hero laeuft direkt in die erste Sektion, der Sprung war 112px. */
  .lp .hero{padding-bottom:34px;}
  /* Kundenstimmen und Team liegen als zwei abgesetzte Baender hintereinander:
     zusammen ergab das eine Luecke von 291px zwischen zwei Textzeilen. */
  .lp .lp-team, .lp .lp-team + *{padding-top:36px;padding-bottom:36px;}
  .lp .lp-team-inner{gap:24px;}
}

/* Zahlungshinweis unter dem Ablauf. Bewusst als Fliesstext und nicht als
   weitere Karte: der Punkt soll gelesen und nicht ueberflogen werden. */
.lp24-zahlung{
  max-width:70ch;
  margin:28px auto 0;
  padding:18px 22px;
  border:1px solid var(--line-2);
  border-radius:var(--radius-sm);
  background:var(--panel);
  color:var(--ink-2);
  font-size:15.5px;
  line-height:1.62;
  text-wrap:pretty;
}
.lp24-zahlung strong{color:var(--ink);font-weight:600}
@media(max-width:560px){.lp24-zahlung{padding:16px 18px}}