/* ==========================================================================
   JLB Landingpage
   Alle Klassennamen sind statisch. Dynamische Werte kommen ausschliesslich
   als Inline-Custom-Properties auf <body> (siehe inc/customizer.php),
   damit WP Rocket RUCSS keine Selektoren wegoptimiert.
   ========================================================================== */

/* --- Zain, lokal gehostet (DSGVO) --------------------------------------- */
@font-face {
  font-family: "Zain";
  src: url("../fonts/zain-bold-webfont.woff2") format("woff2"),
       url("../fonts/zain-bold-webfont.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zain";
  src: url("../fonts/zain-extrabold-webfont.woff2") format("woff2"),
       url("../fonts/zain-extrabold-webfont.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zain";
  src: url("../fonts/zain-regular-webfont.woff2") format("woff2"),
       url("../fonts/zain-regular-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Fallbacks. Die echten Werte setzt der Customizer inline auf <body>. */
  --jlb-verlauf-von: #741843;
  --jlb-verlauf-bis: #D67E6B;
  --jlb-cta: #FFF1E4;
  --jlb-cta-text: #5A1234;

  --jlb-papier: #FBF6F2;
  --jlb-tinte: #2B1420;
  --jlb-grau: #6E5A63;
  --jlb-hell: #FBE4D8;

  --jlb-display: "Zain", system-ui, -apple-system, "Segoe UI", sans-serif;
  --jlb-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --jlb-mass: min(1120px, 92vw);
  --jlb-radius: 14px;
}

body {
  background: var(--jlb-papier);
  color: var(--jlb-tinte);
  font-family: var(--jlb-body);
  font-size: clamp(1.05rem, .98rem + .35vw, 1.2rem);
  line-height: 1.6;
}

.jlb-h1, .jlb-h2, .jlb-h3 {
  font-family: var(--jlb-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.01em;
  margin: 0;
}
.jlb-wrap { width: var(--jlb-mass); margin-inline: auto; }
.jlb-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.jlb-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #fff; color: var(--jlb-tinte); padding: .8rem 1.2rem;
}
.jlb-skip:focus { left: 1rem; top: 1rem; }

/* --- Hero ---------------------------------------------------------------- */
.jlb-hero {
  background-image: linear-gradient(150deg, var(--jlb-verlauf-von) 0%, var(--jlb-verlauf-bis) 100%);
  color: #fff;
  padding: clamp(1.92rem, 1.2rem + 3vw, 3.6rem) 0 clamp(2.5rem, 2rem + 3vw, 4.5rem);
  position: relative;
  overflow: hidden;
}
.jlb-hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(80% 60% at 85% 10%, rgba(255,255,255,.14) 0%, transparent 60%);
  pointer-events: none;
}
.jlb-hero > .jlb-wrap { position: relative; z-index: 1; }

.jlb-marke {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: clamp(1.2rem, 2.5vw, 2rem);
  min-height: var(--jlb-logo-hoehe, 82px);
  align-items: flex-start;
}
/* Logoposition. Bewusst KEINE Modifier-Klasse: neue Klassennamen werden
   von WP Rockets "Used CSS" erst nach einem Rebuild erkannt und bis dahin
   weggeworfen. Die Ausrichtung kommt deshalb als Inline-Variable am
   Element - die Klassennamen hier bleiben stabil. */
.jlb-marke { justify-content: var(--jlb-marke-aus, center); }

.jlb-marke-logo {
  height: var(--jlb-logo-hoehe, 82px);
  width: auto;
  max-width: 60vw;
  object-fit: contain;
  order: var(--jlb-logo-order, 2);
  margin-left: var(--jlb-logo-schub, 0);
}
.jlb-marke-text {
  font-family: var(--jlb-display); font-weight: 700;
  font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.82);
  order: 1;
  margin-right: var(--jlb-text-schub, auto);
}

.jlb-hero-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 900px) {
  /* Zwei Zeilen: oben Headline und Logo nebeneinander, darunter laeuft der
     Textblock weiter, waehrend rechts der Kartenfaecher steht. */
  .jlb-hero-grid {
    grid-template-columns: 1.05fr .95fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "text marke"
      "text medien";
    align-items: start;
    column-gap: clamp(2rem, 4vw, 3.5rem);
    row-gap: clamp(1rem, 2vw, 2rem);
  }
  /* Auf das Hero-Grid beschraenkt. Unbeschraenkt trafen diese Regeln auch
     den Faecher in der Download-Box - dort gibt es keinen Bereich "medien",
     also legt der Browser implizite Gitterlinien an und schiebt das Element
     aus den definierten Spalten heraus. Weil der Faecher nur absolut
     positionierte Karten enthaelt, ist seine Eigenbreite null: die Karten
     zentrierten sich dann auf einem nullbreiten Punkt am rechten Rand. */
  .jlb-hero-grid > .jlb-hero-text { grid-area: text; }
  .jlb-hero-grid > .jlb-marke     { grid-area: marke; margin-bottom: 0; }
  .jlb-hero-grid > .jlb-faecher   { grid-area: medien; }
  .jlb-hero-grid > .jlb-hero-bild { grid-area: medien; }
}

.jlb-h1 { font-size: clamp(2.6rem, 1.7rem + 4.4vw, 4.6rem); text-wrap: balance; }
.jlb-h1-zwei { display: block; color: var(--jlb-cta); }
.jlb-subline {
  font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem);
  color: rgba(255,255,255,.9);
  max-width: 34ch; margin: 1.1rem 0 0;
}

/* --- Kartenfaecher ------------------------------------------------------- */
.jlb-faecher {
  position: relative;
  /* Die Groesse kommt aus Variablen, damit derselbe Faecher an mehreren
     Stellen in unterschiedlichem Massstab stehen kann - ohne neue
     Selektorkombinationen, die WP Rockets "Used CSS" wegwerfen wuerde. */
  height: var(--jlb-faecher-hoehe, clamp(300px, 58vw, 420px));
  display: flex; align-items: center; justify-content: center;
}
.jlb-karte {
  position: absolute;
  width: var(--jlb-karte-breite, clamp(150px, 34vw, 190px));
  aspect-ratio: 5 / 7;
  border-radius: var(--jlb-radius);
  padding: var(--jlb-karte-innen, 1rem .9rem);
  display: flex; flex-direction: column; justify-content: space-between;
  color: #fff;
  box-shadow: 0 18px 40px -12px rgba(50, 8, 28, .55);
  border: 2px solid rgba(255,255,255,.24);
  transform-origin: 50% 115%;
  transform: rotate(var(--jlb-dreh)) translateY(var(--jlb-hoch));
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.jlb-karte-nr {
  font-family: var(--jlb-display); font-weight: 800;
  font-size: var(--jlb-karte-nr-groesse, .95rem); letter-spacing: .1em; opacity: .78;
}
.jlb-karte-titel {
  font-family: var(--jlb-display); font-weight: 800;
  font-size: var(--jlb-karte-titel-groesse, clamp(1.25rem, 3.4vw, 1.5rem)); line-height: 1.05;
}
.jlb-karte-meta {
  font-size: var(--jlb-karte-meta-groesse, .82rem); line-height: 1.35; opacity: .92;
  border-top: 1px solid rgba(255,255,255,.32); padding-top: var(--jlb-karte-meta-abstand, .5rem);
}

.jlb-karte-1 { --jlb-dreh: -21deg;   --jlb-hoch: 14px; z-index: 1; }
.jlb-karte-2 { --jlb-dreh: -10.5deg; --jlb-hoch: 4px;  z-index: 2; }
.jlb-karte-3 { --jlb-dreh: 0deg;     --jlb-hoch: 0px;  z-index: 3; }
.jlb-karte-4 { --jlb-dreh: 10.5deg;  --jlb-hoch: 4px;  z-index: 2; }
.jlb-karte-5 { --jlb-dreh: 21deg;    --jlb-hoch: 14px; z-index: 1; }

.jlb-faecher:hover .jlb-karte,
.jlb-faecher:focus-within .jlb-karte {
  transform: rotate(calc(var(--jlb-dreh) * 1.22)) translateY(calc(var(--jlb-hoch) - 10px));
}
@media (prefers-reduced-motion: no-preference) {
  .jlb-karte { animation: jlb-auffaechern .7s cubic-bezier(.2,.8,.25,1) backwards; }
  .jlb-karte-1 { animation-delay: .05s; }
  .jlb-karte-2 { animation-delay: .13s; }
  .jlb-karte-3 { animation-delay: .21s; }
  .jlb-karte-4 { animation-delay: .29s; }
  .jlb-karte-5 { animation-delay: .37s; }
  @keyframes jlb-auffaechern {
    from { transform: rotate(0deg) translateY(34px); opacity: 0; }
    to   { transform: rotate(var(--jlb-dreh)) translateY(var(--jlb-hoch)); opacity: 1; }
  }
}
.jlb-faecher-label {
  position: absolute; bottom: -.5rem; left: 50%; transform: translateX(-50%);
  font-size: .85rem; color: rgba(255,255,255,.78); letter-spacing: .05em; white-space: nowrap;
}
.jlb-hero-bild {
  border-radius: var(--jlb-radius);
  box-shadow: 0 18px 40px -12px rgba(50, 8, 28, .55);
  width: 100%; height: auto;
}

/* --- Formular ------------------------------------------------------------ */
.jlb-formkasten {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--jlb-radius);
  padding: clamp(1.1rem, 1rem + 1vw, 1.6rem);
  margin-top: 1.8rem;
  max-width: 32rem;
  backdrop-filter: blur(6px);
}
.jlb-feld-label {
  display: block; font-weight: 600; font-size: .95rem;
  margin-bottom: .45rem; color: rgba(255,255,255,.95);
}
.jlb-feldreihe { display: grid; gap: .7rem; }
@media (min-width: 560px) { .jlb-feldreihe { grid-template-columns: 1fr auto; } }

.jlb-input {
  width: 100%; padding: .95rem 1rem; font: inherit; font-size: 1.05rem;
  border-radius: 10px; border: 2px solid rgba(255,255,255,.34);
  background: #fff; color: var(--jlb-tinte);
}
.jlb-input:focus-visible { outline: 3px solid var(--jlb-cta); outline-offset: 2px; }

.jlb-cta {
  font-family: var(--jlb-display); font-weight: 800;
  font-size: 1.25rem; letter-spacing: .01em;
  background: var(--jlb-cta); color: var(--jlb-cta-text);
  border: 0; border-radius: 10px;
  padding: .95rem 1.6rem; cursor: pointer; white-space: nowrap;
  box-shadow: 0 5px 0 -1px rgba(0,0,0,.28);
  transition: transform .12s ease, box-shadow .12s ease, filter .2s ease;
}
.jlb-cta:hover { filter: brightness(.96); }
.jlb-cta:active { transform: translateY(3px); box-shadow: 0 2px 0 -1px rgba(0,0,0,.28); }
.jlb-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.jlb-cta[disabled] { opacity: .65; cursor: progress; }

.jlb-einwilligung {
  display: flex; gap: .65rem; align-items: flex-start; margin-top: .9rem;
  font-size: .87rem; color: rgba(255,255,255,.86); line-height: 1.45;
}
.jlb-einwilligung input { margin-top: .25rem; width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.jlb-einwilligung a { color: var(--jlb-cta); }

.jlb-hp { position: absolute; left: -9999px; }

.jlb-meldung { font-size: .9rem; margin-top: .7rem; display: none; }
.jlb-meldung.jlb-an { display: block; }
.jlb-meldung-fehler { color: #FFD9CE; }

.jlb-danke {
  display: none;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.34);
  border-radius: var(--jlb-radius);
  padding: 1.3rem;
}
.jlb-danke.jlb-an { display: block; }
.jlb-danke .jlb-h3 { color: #fff; font-size: 1.5rem; margin-bottom: .5rem; }
.jlb-danke p { color: rgba(255,255,255,.9); font-size: 1rem; margin: 0; }

/* --- Vertrauensleiste ---------------------------------------------------- */
.jlb-vertrauen { background: var(--jlb-tinte); color: rgba(255,255,255,.78); padding: 1.1rem 0; font-size: .95rem; }
.jlb-vertrauen .jlb-wrap { display: flex; flex-wrap: wrap; gap: .6rem 2rem; justify-content: center; text-align: center; }
.jlb-vertrauen b { color: #fff; font-family: var(--jlb-display); font-weight: 800; font-size: 1.15rem; }

/* --- Abschnitte ---------------------------------------------------------- */
.jlb-block { padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0; }
.jlb-h2 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem); text-wrap: balance; max-width: 20ch; }
.jlb-vorspann { color: var(--jlb-grau); margin: .9rem 0 0; max-width: 55ch; }

.jlb-nutzen { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 1.1rem; }
@media (min-width: 780px) { .jlb-nutzen { grid-template-columns: 1fr 1fr; gap: 1.4rem 2.5rem; } }
.jlb-nutzen li {
  background: #fff; border-radius: var(--jlb-radius); padding: 1.3rem 1.4rem;
  border-left: 6px solid var(--jlb-akzent, var(--jlb-verlauf-von));
  box-shadow: 0 2px 10px -4px rgba(43, 20, 32, .18);
}
.jlb-nutzen .jlb-h3 { font-size: 1.35rem; margin-bottom: .4rem; }
.jlb-nutzen p { color: var(--jlb-grau); font-size: 1rem; margin: 0; }

/* --- Angebotsuebersicht -------------------------------------------------- */
.jlb-angebot { background: #fff; }
.jlb-angebot-grid { display: grid; gap: 2rem; margin-top: 2.5rem; align-items: start; }
@media (min-width: 900px) {
  .jlb-angebot-grid { grid-template-columns: 1.15fr 1fr; gap: 3.2rem; }
}
/* Ohne Screenshot steht die Liste allein - dann volle Breite statt halber. */
.jlb-angebot-spalte:only-child { grid-column: 1 / -1; }

.jlb-screenshot { margin: 0; }

/* Browserrahmen. Ein Screenshot ohne Rahmen wirkt wie ein loses Bild,
   mit Rahmen liest er sich sofort als "das ist die Website". */
.jlb-browser {
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(43, 20, 32, .12);
  box-shadow: 0 24px 50px -20px rgba(43, 20, 32, .42);
}
.jlb-browser-leiste {
  display: flex; align-items: center; gap: .45rem;
  padding: .6rem .8rem;
  background: linear-gradient(180deg, #F4EEF1 0%, #EAE1E6 100%);
  border-bottom: 1px solid rgba(43, 20, 32, .1);
}
.jlb-browser-punkt {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(43, 20, 32, .22); flex: 0 0 auto;
}
.jlb-browser-punkt:first-child { background: #D96A5B; }
.jlb-browser-punkt:nth-child(2) { background: #E0A94E; }
.jlb-browser-punkt:nth-child(3) { background: #6BB07A; }
.jlb-browser-url {
  margin-left: .6rem; flex: 1 1 auto;
  background: #fff; border-radius: 999px;
  padding: .25rem .8rem;
  font-size: .78rem; color: var(--jlb-grau);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jlb-screenshot-bild { width: 100%; height: auto; display: block; }
.jlb-screenshot-unterschrift {
  margin-top: .8rem; font-size: .85rem; color: var(--jlb-grau); text-align: center;
}

/* Angebotsliste */
.jlb-angebot-liste { list-style: none; padding: 0; margin: 0; }
.jlb-angebot-liste li {
  position: relative;
  padding-left: 2.4rem;
  padding-bottom: 1.4rem;
  margin-bottom: 0;
}
.jlb-angebot-liste li::before {
  content: "";
  position: absolute; left: 0; top: .25rem;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background-image: linear-gradient(150deg, var(--jlb-verlauf-von) 0%, var(--jlb-verlauf-bis) 100%);
}
/* Haken im Kreis, per Rahmen gezeichnet - kein Icon-Font noetig. */
.jlb-angebot-liste li::after {
  content: "";
  position: absolute; left: .48rem; top: .58rem;
  width: .34rem; height: .62rem;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* Verbindungslinie zwischen den Punkten. */
.jlb-angebot-liste li:not(:last-child) {
  background-image: linear-gradient(180deg, rgba(116, 24, 67, .18), rgba(116, 24, 67, .18));
  background-size: 2px calc(100% - 2rem);
  background-position: .69rem 2rem;
  background-repeat: no-repeat;
}
.jlb-angebot-liste strong {
  display: block;
  font-family: var(--jlb-display); font-weight: 800;
  font-size: 1.3rem; line-height: 1.1; letter-spacing: -.01em;
  margin-bottom: .25rem;
}
.jlb-angebot-liste p { color: var(--jlb-grau); font-size: 1rem; margin: 0; }

.jlb-angebot-link {
  display: inline-block; margin-top: .6rem;
  font-family: var(--jlb-display); font-weight: 700; font-size: 1.15rem;
  color: var(--jlb-verlauf-von);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.jlb-angebot-link:hover { color: var(--jlb-verlauf-bis); }

/* --- Person -------------------------------------------------------------- */
.jlb-person { background: var(--jlb-papier); }
.jlb-person-grid { display: grid; gap: 1.8rem; align-items: center; }
@media (min-width: 700px) { .jlb-person-grid { grid-template-columns: 180px 1fr; gap: 2.5rem; } }
.jlb-portrait {
  width: 180px; height: 180px; border-radius: 50%; object-fit: cover;
  border: 5px solid #fff; box-shadow: 0 10px 30px -12px rgba(43, 20, 32, .5);
}
.jlb-portrait-platzhalter {
  width: 180px; height: 180px; border-radius: 50%;
  background-image: linear-gradient(150deg, var(--jlb-verlauf-von) 0%, var(--jlb-verlauf-bis) 100%);
  display: grid; place-items: center; color: #fff;
  font-family: var(--jlb-display); font-weight: 800; font-size: 3rem;
  border: 5px solid #fff; box-shadow: 0 10px 30px -12px rgba(43, 20, 32, .5);
}
.jlb-person p { color: var(--jlb-grau); margin: 0 0 1.1rem; }
.jlb-person p strong { color: var(--jlb-tinte); }

/* --- Abschluss ----------------------------------------------------------- */
.jlb-schluss {
  background-image: linear-gradient(150deg, var(--jlb-verlauf-von) 0%, var(--jlb-verlauf-bis) 100%);
  color: #fff; text-align: center;
}
.jlb-schluss .jlb-h2 { margin-inline: auto; }
.jlb-schluss .jlb-vorspann { color: rgba(255,255,255,.9); margin-inline: auto; }
.jlb-schluss .jlb-formkasten { margin-inline: auto; text-align: start; }

/* --- Footer -------------------------------------------------------------- */
.jlb-footer { background: var(--jlb-tinte); color: rgba(255,255,255,.62); font-size: .85rem; padding: 2rem 0; text-align: center; }
.jlb-footer-links { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; justify-content: center; margin-bottom: .8rem; }
.jlb-footer a { color: rgba(255,255,255,.82); }
.jlb-footer a:hover { color: #fff; }

/* ==========================================================================
   MOBILE
   Die Seite ist mobil-zuerst gedacht: rund vier Fuenftel des Kampagnen-
   Traffics kommen vom Handy. Alles hier drunter korrigiert Stellen, an
   denen das Desktop-Layout auf schmalen Viewports nicht traegt.
   ========================================================================== */

/* Kein horizontales Wackeln, egal was ein einzelnes Element treibt. */
html, body { overflow-x: clip; }

/* Sanftes Scrollen zu den Formularen, aber nicht gegen den Nutzerwunsch. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
.jlb-formkasten { scroll-margin-top: 1.5rem; }

/* Safe Areas (Notch, Home-Indicator). */
.jlb-wrap {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* --- Bis 900px: Fliesstexte duerfen die volle Breite nutzen ------------- */
@media (max-width: 899px) {
  .jlb-subline { max-width: none; }
  .jlb-formkasten { max-width: none; }
  /* Gestapelt: Logo oben, dann Headline mit Formular, dann die Karten.
     Ebenfalls auf das Hero-Grid beschraenkt. */
  .jlb-hero-grid > .jlb-marke     { order: 0; }
  .jlb-hero-grid > .jlb-hero-text { order: 1; }
  .jlb-hero-grid > .jlb-faecher   { order: 2; }
  .jlb-hero-grid > .jlb-hero-bild { order: 2; }
  .jlb-hero-grid { gap: 1.6rem; }
}

/* --- Bis 700px: das eigentliche Handy-Layout ---------------------------- */
@media (max-width: 699px) {

  /* Der Hero war fuer Desktop bemessen. Mobil zaehlt jede Zeile
     oberhalb der Falz, deshalb weniger Luft und straffere Headline. */
  .jlb-hero { padding-top: 1.44rem; padding-bottom: 2.2rem; }
  .jlb-marke { margin-bottom: 1.4rem; gap: .7rem; min-height: var(--jlb-logo-mobil, 52px); }
  .jlb-marke-logo { height: var(--jlb-logo-mobil, 52px); max-width: 45vw; }
  .jlb-h1 { font-size: clamp(2.15rem, 1.2rem + 5.2vw, 2.9rem); line-height: 1.04; }
  .jlb-subline { font-size: 1.08rem; margin-top: .8rem; }
  .jlb-hero-grid { gap: 2rem; }

  /* Kartenfaecher: fuenf aufgefaecherte Karten brauchen mehr Breite,
     als ein Handy hat - die aeusseren beiden wurden bisher vom
     overflow des Heros abgeschnitten. Mobil zeigen wir drei Karten
     mit flacherem Winkel. Das passt bis hinunter zu 320px. */
  .jlb-karte-1, .jlb-karte-5 { display: none; }
  .jlb-karte-2 { --jlb-dreh: -10.5deg; --jlb-hoch: 5px; }
  .jlb-karte-4 { --jlb-dreh: 10.5deg;  --jlb-hoch: 5px; }
  .jlb-faecher {
    --jlb-faecher-hoehe: clamp(230px, 62vw, 300px);
    --jlb-karte-breite: min(36vw, 150px);
    --jlb-karte-innen: .8rem .75rem;
    --jlb-karte-titel-groesse: clamp(1.05rem, 3.8vw, 1.25rem);
    --jlb-karte-meta-groesse: .74rem;
    --jlb-karte-meta-abstand: .4rem;
  }

  /* Auf dem Handy gibt es keinen Hover - der Aufklapp-Effekt wuerde
     nur beim Antippen kurz zucken. */
  .jlb-faecher:hover .jlb-karte,
  .jlb-faecher:focus-within .jlb-karte {
    transform: rotate(var(--jlb-dreh)) translateY(var(--jlb-hoch));
  }

  .jlb-faecher-label {
    white-space: normal;
    text-align: center;
    width: 100%;
    bottom: -1.4rem;
    font-size: .8rem;
  }

  /* Formular: gestapelt braucht der Button die volle Breite,
     sonst wirkt er wie ein Nebenschauplatz. */
  .jlb-formkasten { padding: 1rem; }
  .jlb-cta { width: 100%; font-size: 1.15rem; padding: 1rem 1.2rem; }
  .jlb-input { padding: 1rem; }

  /* Tap-Ziel der Checkbox. 1,1rem ist mit dem Daumen kaum zu treffen -
     die Empfehlung liegt bei 24px, das Label faengt den Rest ab. */
  .jlb-einwilligung { gap: .8rem; padding: .3rem 0; }
  .jlb-einwilligung input { width: 24px; height: 24px; margin-top: .1rem; }

  /* Abschnitte */
  .jlb-block { padding: 2.6rem 0; }
  .jlb-h2 { font-size: clamp(1.65rem, 1.1rem + 3.2vw, 2.2rem); max-width: none; }
  .jlb-vorspann { max-width: none; }
  .jlb-nutzen { margin-top: 1.8rem; gap: .9rem; }
  .jlb-nutzen li { padding: 1.1rem 1.2rem; }
  .jlb-nutzen .jlb-h3 { font-size: 1.2rem; }

  .jlb-vertrauen { font-size: .9rem; }
  .jlb-vertrauen .jlb-wrap { gap: .5rem 1.2rem; }
  .jlb-vertrauen b { font-size: 1.05rem; }

  /* Angebotsuebersicht: Screenshot zuerst, dann die Liste. Der Blick
     soll die Seite sehen, bevor er die Aufzaehlung liest. */
  .jlb-angebot-grid { margin-top: 1.8rem; gap: 1.8rem; }
  .jlb-browser-leiste { padding: .45rem .6rem; gap: .35rem; }
  .jlb-browser-punkt { width: 8px; height: 8px; }
  .jlb-browser-url { font-size: .72rem; padding: .2rem .6rem; margin-left: .4rem; }
  .jlb-angebot-liste li { padding-left: 2.1rem; padding-bottom: 1.2rem; }
  .jlb-angebot-liste li::before { width: 1.35rem; height: 1.35rem; }
  .jlb-angebot-liste li::after { left: .42rem; top: .52rem; width: .3rem; height: .56rem; }
  .jlb-angebot-liste li:not(:last-child) { background-position: .61rem 1.8rem; background-size: 2px calc(100% - 1.8rem); }
  .jlb-angebot-liste strong { font-size: 1.15rem; }

  /* Person: Portrait mittig ueber den Text statt daneben. */
  .jlb-person-grid { justify-items: center; text-align: center; gap: 1.2rem; }
  .jlb-portrait, .jlb-portrait-platzhalter { width: 140px; height: 140px; }
  .jlb-portrait-platzhalter { font-size: 2.4rem; }

  /* Platz fuer die Sticky-Leiste, damit sie den Footer nicht verdeckt. */
  .jlb-footer {
    padding-bottom: calc(2rem + env(safe-area-inset-bottom) + 4.6rem);
  }
}

/* --- Bis 380px: sehr schmale Geraete ------------------------------------ */
@media (max-width: 379px) {
  .jlb-faecher {
    --jlb-karte-breite: min(40vw, 128px);
    --jlb-faecher-hoehe: clamp(210px, 66vw, 250px);
  }
  .jlb-h1 { font-size: 2rem; }
  .jlb-marke-text { font-size: .92rem; letter-spacing: .1em; }
  .jlb-vertrauen .jlb-wrap { flex-direction: column; gap: .35rem; }
}

/* --- Querformat auf niedrigen Geraeten ---------------------------------- */
@media (max-height: 480px) and (orientation: landscape) {
  .jlb-hero { padding-top: 1.2rem; padding-bottom: 1.6rem; }
  .jlb-faecher { --jlb-faecher-hoehe: 200px; }
  .jlb-marke { margin-bottom: .9rem; }
}

/* --- Sticky-CTA (nur mobil) --------------------------------------------- */
.jlb-sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: none;
  background-image: linear-gradient(150deg, var(--jlb-verlauf-von) 0%, var(--jlb-verlauf-bis) 100%);
  box-shadow: 0 -8px 24px -10px rgba(43, 20, 32, .55);
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  transform: translateY(110%);
  transition: transform .28s cubic-bezier(.2,.7,.3,1);
}
.jlb-sticky.jlb-sichtbar { transform: translateY(0); }
/* Die Klassenregel unten wuerde das UA-[hidden] sonst ueberstimmen. */
.jlb-sticky[hidden] { display: none !important; }
.jlb-sticky-inner {
  display: flex; align-items: center; gap: .9rem;
  max-width: 34rem; margin-inline: auto;
}
.jlb-sticky-hinweis {
  color: #fff; font-size: .88rem; line-height: 1.25; flex: 1 1 auto;
}
.jlb-sticky-cta { flex: 0 0 auto; width: auto; font-size: 1.05rem; padding: .8rem 1.3rem; }

@media (max-width: 699px) {
  .jlb-sticky { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .jlb-sticky { transition: none; }
}

/* --- Hover nur dort, wo es Hover gibt ----------------------------------- */
@media (hover: none) {
  .jlb-cta:hover { filter: none; }
  .jlb-footer a:hover { color: rgba(255,255,255,.82); }
}

/* ==========================================================================
   SCHLANKE FOLGESEITEN
   Postfach-Hinweis und DOI-Bestaetigung. Gleiche Huelle wie die
   Landingpage, aber nur ein Kasten mittig - hier soll nichts ablenken.
   ========================================================================== */

.jlb-schlank {
  background-image: linear-gradient(150deg, var(--jlb-verlauf-von) 0%, var(--jlb-verlauf-bis) 100%);
  color: #fff;
  /* min-height nur, wenn die Seite wirklich kurz ist. Mit Download und
     Teaser wuerde zentrierter Inhalt sonst seltsam in der Luft haengen. */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.2rem, .9rem + 1.8vw, 2.4rem) 0 0;
}
.jlb-schlank > .jlb-wrap:last-child { padding-bottom: clamp(2rem, 1.5rem + 3vw, 4rem); }
.jlb-schlank:has(.jlb-teaser) { justify-content: flex-start; }
.jlb-schlank > .jlb-wrap { width: min(50rem, 92vw); }

.jlb-schlank .jlb-marke { margin-bottom: clamp(.9rem, 1.8vw, 1.44rem); }

.jlb-schlank-kasten {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--jlb-radius);
  /* Flacher als zuvor: der Kasten bestaetigt nur, der Download darunter
     ist die eigentliche Handlung und soll den Blick bekommen. */
  padding: clamp(1.2rem, 1rem + 1vw, 1.8rem) clamp(1.3rem, 1rem + 1.6vw, 2.2rem);
  text-align: center;
  backdrop-filter: blur(6px);
}

.jlb-schlank-symbol {
  width: clamp(40px, 9vw, 52px);
  margin: 0 auto .7rem;
  color: var(--jlb-cta);
}
.jlb-schlank-symbol svg { width: 100%; height: auto; display: block; }

.jlb-schlank-titel {
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem);
  text-wrap: balance;
}

.jlb-schlank-text {
  margin-top: .8rem;
  font-size: clamp(1.05rem, 1rem + .25vw, 1.18rem);
  color: rgba(255, 255, 255, .9);
}
.jlb-schlank-text > * { margin-top: 1rem; }
.jlb-schlank-text > :first-child { margin-top: 0; }

/* Der Inhalt kommt aus dem Block-Editor. Die Kernbloecke bekommen hier
   ihre Optik, damit Daniel im Editor arbeiten kann statt in PHP. */
.jlb-schlank-text h2,
.jlb-schlank-text h3 {
  font-family: var(--jlb-display); font-weight: 800;
  line-height: 1.1; letter-spacing: -.01em; color: #fff;
}
.jlb-schlank-text h2 { font-size: 1.6rem; }
.jlb-schlank-text h3 { font-size: 1.3rem; }
.jlb-schlank-text a { color: var(--jlb-cta); }
.jlb-schlank-text strong { color: #fff; }
.jlb-schlank-text ul,
.jlb-schlank-text ol { text-align: start; padding-left: 1.3rem; }
.jlb-schlank-text li + li { margin-top: .4rem; }
.jlb-schlank-text img { border-radius: 10px; margin-inline: auto; }
.jlb-schlank-text hr {
  border: 0; height: 1px; background: rgba(255,255,255,.25); margin: 1.6rem 0;
}

/* Button-Block aus dem Editor bekommt die CTA-Optik der Landingpage. */
.jlb-schlank-text .wp-block-button__link {
  display: inline-block;
  font-family: var(--jlb-display); font-weight: 800; font-size: 1.2rem;
  background: var(--jlb-cta); color: var(--jlb-cta-text);
  border-radius: 10px; padding: .9rem 1.6rem;
  text-decoration: none;
  box-shadow: 0 5px 0 -1px rgba(0,0,0,.28);
}
.jlb-schlank-text .wp-block-button__link:hover { filter: brightness(.96); }
.jlb-schlank-text .wp-block-buttons { justify-content: center; display: flex; gap: .8rem; flex-wrap: wrap; }

/* Die Sticky-Leiste gehoert nur auf die Landingpage. */
.jlb-schlank ~ .jlb-sticky { display: none; }

@media (max-width: 699px) {
  .jlb-schlank { min-height: auto; padding: 1.8rem 0 2.4rem; }
  .jlb-schlank-kasten { padding: 1.4rem 1.2rem; }
  .jlb-schlank-text ul,
  .jlb-schlank-text ol { padding-left: 1.1rem; }
}

/* --- Download-Abschnitt -------------------------------------------------- */
.jlb-download {
  margin-top: 1.6rem;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--jlb-radius);
  padding: clamp(1.4rem, 1.1rem + 1.6vw, 2.2rem);
  text-align: center;
  backdrop-filter: blur(6px);
  position: relative;
  overflow: hidden;
}
/* Feiner Lichtschein oben links - hebt den Kasten vom Bestaetigungskasten ab,
   ohne eine zweite Farbe einzufuehren. */
.jlb-download::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(70% 60% at 20% 0%, rgba(255,255,255,.16) 0%, transparent 70%);
  pointer-events: none;
}
.jlb-download > * { position: relative; }

.jlb-download-inhalt { display: grid; gap: 1.4rem; align-items: center; }
@media (min-width: 820px) {
  /* Faecher rechts neben den Text. Erst ab hier ist die rechte Spalte
     breit genug - darunter stiesse der aufgefaecherte Stapel an. */
  .jlb-download-inhalt { grid-template-columns: 1.1fr .9fr; gap: 2rem; }
}
.jlb-download-kopf {
  display: flex; align-items: center; gap: 1rem;
  text-align: start;
  margin-bottom: 1rem;
}

.jlb-download-symbol {
  flex: 0 0 auto;
  width: clamp(42px, 9vw, 54px);
  color: var(--jlb-cta);
}
.jlb-download-symbol svg { width: 100%; height: auto; display: block; }

.jlb-download-titel {
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
  max-width: none;
  color: #fff;
}
.jlb-download-text {
  margin: .4rem 0 0;
  color: rgba(255,255,255,.88);
  font-size: 1rem;
}

.jlb-download-cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  text-decoration: none;
  width: 100%;
  max-width: 24rem;
}
.jlb-download-groesse {
  font-family: var(--jlb-body); font-weight: 400;
  font-size: .8rem; letter-spacing: .02em;
  opacity: .7;
}
.jlb-download-hinweis {
  margin: .9rem 0 0;
  font-size: .85rem;
  color: rgba(255,255,255,.72);
}

/* --- Breiter Blog-Teaser ------------------------------------------------- */
.jlb-teaser {
  background: var(--jlb-papier);
  color: var(--jlb-tinte);
  padding: clamp(2.4rem, 2rem + 3vw, 4.5rem) 0;
  margin-top: clamp(2.5rem, 2rem + 3vw, 4rem);
}
.jlb-teaser-wrap { width: min(1080px, 92vw); }

.jlb-teaser-kopf { text-align: center; }
.jlb-teaser-kopf .jlb-vorspann { margin-inline: auto; }
.jlb-teaser-bild {
  width: 100%;
  margin-top: 2rem;
  border-radius: var(--jlb-radius);
  box-shadow: 0 22px 45px -20px rgba(43, 20, 32, .45);
}
.jlb-teaser-titel {
  font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.8rem);
  max-width: 20ch;
  margin-inline: auto;
}
/* Module im gleichen Stil wie auf der Startseite: weisse Karte mit farbiger
   Kante. Bewusst dieselbe Klasse .jlb-nutzen, damit beide Stellen
   automatisch zusammenbleiben. */
.jlb-teaser-module { margin-top: 2.2rem; }
.jlb-teaser-fuss { text-align: center; margin: 2.2rem 0 0; }
.jlb-teaser-cta {
  display: inline-block;
  text-decoration: none;
  font-size: 1.3rem;
  padding: 1rem 2rem;
  background-image: linear-gradient(150deg, var(--jlb-verlauf-von) 0%, var(--jlb-verlauf-bis) 100%);
  background-color: transparent;
  color: #fff;
  box-shadow: 0 5px 0 -1px rgba(90, 18, 52, .5);
}

@media (max-width: 699px) {
  .jlb-download { padding: 1.2rem 1.1rem; }
  .jlb-download-kopf { gap: .8rem; margin-bottom: 1.1rem; }
  .jlb-download-cta { max-width: none; }
  .jlb-teaser { padding: 2.2rem 0; }
  .jlb-teaser-titel { max-width: none; }
  .jlb-teaser-module { margin-top: 1.6rem; }
  .jlb-teaser-bild { margin-top: 1.4rem; }
  .jlb-teaser-fuss { margin-top: 1.6rem; }
  .jlb-teaser-cta { width: 100%; text-align: center; font-size: 1.15rem; }
  .jlb-schlank { padding-top: 1.08rem; }
}

/* Verlinktes Teaser-Bild: der Screenshot fuehrt in den Blog. */
.jlb-teaser-bildlink { display: block; }
.jlb-teaser-bildlink .jlb-teaser-bild { transition: transform .25s ease, box-shadow .25s ease; }
.jlb-teaser-bildlink:hover .jlb-teaser-bild {
  transform: translateY(-3px);
  box-shadow: 0 28px 52px -20px rgba(43, 20, 32, .55);
}
.jlb-teaser-bildlink:focus-visible { outline: 3px solid var(--jlb-verlauf-von); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .jlb-teaser-bildlink .jlb-teaser-bild { transition: none; }
  .jlb-teaser-bildlink:hover .jlb-teaser-bild { transform: none; }
}