/* Theaterpack – Landingpage /firmenfeier (Sie-Form), Stand 23.09.2026
   Ergänzt css/style.css (Grundwerte, Schriften, .foto, .knopf, .nav, .b8-Formular, Footer).
   Grundlage: freigegebene Mockups in mockups-firma/ (c + Chips aus b, b2-a, b3-b, b4-a, v-a, b57-b, b7-b),
   Krimi-Auswahl nach mockups-stuecke/c, Galerie nach mockups-block6-8/6b.
   Alle Regeln sind auf body.lp bzw. lp-Klassen begrenzt, die Startseite bleibt unberührt. */

/* hidden-Attribut hat immer Vorrang (Rechner ohne JS) */
.lp [hidden]{display:none!important}

/* Sichtbar markierter Platzhalter – vor Livegang im Kundentermin klären */
.lp .ph{color:var(--gelb);border-bottom:1px dashed var(--gelb)}

/* Knappheitshinweis mit gelbem Punkt */
.lp .hinweis{font-size:14px;color:var(--text-leise);margin-top:14px;display:flex;gap:8px;align-items:center;justify-content:center;text-align:left}
.lp .hinweis::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gelb);flex:none}

/* gemeinsamer Block-Rahmen und Überschriften (wie Mockups) */
.lp-blk{padding:clamp(56px,9vw,110px) var(--rand);max-width:1160px;margin:0 auto}
.lp-blk.eng{padding:clamp(48px,7vw,90px) var(--rand)}
.lp-blk h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.4vw,52px);line-height:1.1;margin-bottom:14px;text-wrap:balance}
.lp-blk.eng h2{font-size:clamp(30px,4vw,46px)}
.lp-blk .lead{color:var(--text-leise);max-width:36em;font-size:18px;margin-bottom:34px}
.lp-blk .kl{display:block;font:600 12px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gelb)}

/* ================= Block 1 · Hero (Variante C + Häkchen aus B) ================= */
.lp-hero{position:relative}
.lp-hero .foto{height:min(56svh,540px)}
.lp-hero .foto::before{background:linear-gradient(to bottom,rgba(20,18,16,0) 55%,rgba(20,18,16,1) 100%)}
.lp-hero .foto img{object-position:30% 40%}
.lp-hero-text{padding:8px var(--rand) 56px;max-width:820px;margin:-40px auto 0;position:relative;z-index:5;text-align:center}
.lp-hero h1{font:600 13px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gelb);margin-bottom:14px;font-variation-settings:normal}
.lp-hero .gross{font-family:var(--serif);font-weight:var(--h-gewicht);font-variation-settings:var(--h-fvs);letter-spacing:var(--h-lauf);line-height:1.08;
  font-size:clamp(40px,6.4vw,76px);text-wrap:balance}
.lp-hero .unter{color:var(--text-leise);font-size:clamp(17px,1.6vw,19px);max-width:34em;margin:16px auto 22px;text-wrap:pretty}
.hero-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 26px;list-style:none}
.hero-chips li{border:1px solid var(--linie);border-radius:999px;padding:7px 14px;font-size:14px;line-height:1.4;color:var(--text)}
.hero-chips li::before{content:"✓ ";color:var(--gelb)}

/* Handy hochkant: Knopf muss ohne Scrollen sichtbar sein (360–430 × ~740) → Foto flacher, Abstände knapper */
@media (max-width:760px){
  /* 07.10.2026 Hero-Fix: Foto beginnt UNTER der Kopfleiste (80 px = 2×18 Innenabstand + 44 Knopf), Fotohöhe um dieselben 80 px knapper, damit der Knopf weiter ohne Scrollen sichtbar bleibt */
  .lp-hero{padding-top:80px}
  .lp-hero .foto{height:clamp(180px,calc(100svh - 550px),330px)}
  .lp-hero .foto img{object-position:30% 30%}
  .lp-hero-text{margin-top:-30px;padding-bottom:44px}
  .lp-hero h1{font-size:12px;letter-spacing:.12em;margin-bottom:8px}
  .lp-hero .gross{font-size:clamp(33px,9.4vw,40px)}
  .lp-hero .unter{font-size:16px;line-height:1.5;margin:10px auto 14px}
  .hero-chips{gap:6px;margin-bottom:16px}
  .hero-chips li{font-size:13px;padding:4px 11px}
  .lp .hinweis{font-size:13px}
}
/* Handy quer (z. B. 844 × 390): Foto links, Text rechts */
@media (orientation:landscape) and (max-height:520px){
  .lp-hero{display:grid;grid-template-columns:40% 1fr;min-height:100svh;padding-top:80px} /* 07.10.2026 Hero-Fix: Foto unter der Kopfleiste */
  .lp-hero .foto{height:auto;min-height:100%}
  .lp-hero .foto::before{background:linear-gradient(to right,rgba(20,18,16,0) 60%,rgba(20,18,16,1) 100%)}
  .lp-hero-text{margin:0;padding:8px var(--rand) 16px 18px;align-self:center}
  .lp-hero h1{font-size:11px;margin-bottom:6px}
  .lp-hero .gross{font-size:30px}
  .lp-hero .unter{font-size:15px;line-height:1.45;margin:8px auto 10px}
  .hero-chips{gap:6px;margin-bottom:12px}
  .hero-chips li{font-size:12.5px;padding:3px 10px}
  .lp-hero .knopf{min-height:46px;padding:10px 22px}
  .lp .lp-hero .hinweis{margin-top:8px;font-size:13px}
}

/* ================= Block 2 · Erlebnis (Zeitleiste) ================= */
.gang .wann{font:600 12px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gelb)}
.gang h3{font-family:var(--serif);font-weight:400;font-size:26px;margin:6px 0 8px}
.gang p{color:var(--text-leise)}
.leiste{position:relative;display:grid;gap:34px;padding-left:44px;max-width:640px}
.leiste::before{content:"";position:absolute;left:13px;top:8px;bottom:8px;width:1px;background:linear-gradient(var(--gelb),rgba(232,176,74,.1))}
.leiste .gang{position:relative}
.leiste .gang::before{content:"";position:absolute;left:-38px;top:3px;width:15px;height:15px;border-radius:50%;background:var(--bg);border:2px solid var(--gelb)}

/* ================= Block 3 · Krimi-Auswahl (Startseite Block 4 „Leitstück“: .stuecke/.stueck/.leit aus style.css) ================= */
.lp-krimis{padding-top:clamp(24px,4vw,48px);padding-bottom:clamp(24px,4vw,40px)}
/* Desktop: Text liegt links auf dem Foto → SoKo-Foto nach rechts rücken und links weich ausblenden, damit der Text keine Gesichter verdeckt */
@media (min-width:900px){
  .lp-krimis .leit .foto img{left:auto;right:0;width:74%;object-position:75% 30%!important;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 30%);mask-image:linear-gradient(to right,transparent 0,#000 30%)}
}
.krimi-drei{display:grid;grid-template-columns:1fr;gap:40px}
.krimi-drei .foto{aspect-ratio:3/2}
.krimi-drei .text{padding-top:16px}
.krimi-drei .titel{font-size:calc(28px * var(--h-k))}
.krimi-drei .satz{font-size:16px}
@media (min-width:760px){
  .krimi-drei{grid-template-columns:repeat(3,1fr);gap:28px}
  .krimi-drei .foto{aspect-ratio:4/3}
  .krimi-drei .titel{font-size:calc(clamp(26px,2.4vw,32px) * var(--h-k))}
}
@media (min-width:900px){.krimi-drei{max-width:900px;margin-left:auto;margin-right:auto}}

/* ================= Block 4 · Galerie (Startseite Block 6 Mosaik, mockups-block6-8/6b: 1 groß + 5 klein) ================= */
.lp-galerie{padding:clamp(40px,6vw,64px) 0 clamp(56px,8vw,88px)}
.lp-galerie .block-kopf{padding-bottom:36px}
.galerie-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-width:940px;margin:0 auto;padding:0 var(--rand)}
.galerie-raster .foto{aspect-ratio:1/1;border-radius:2px}
.galerie-raster .gross{grid-column:1 / span 2;grid-row:1 / span 2;aspect-ratio:auto}
@media (min-width:760px){.galerie-raster{gap:12px}}

/* ================= Block 5 · Anlässe (Weihnachten vorn) ================= */
.gross-k{background:linear-gradient(135deg,rgba(232,176,74,.16),rgba(232,176,74,.03));border:1px solid rgba(232,176,74,.45);border-radius:20px;padding:30px 28px;margin-bottom:14px}
.gross-k b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.6vw,42px);margin:6px 0}
.gross-k p{color:var(--text-leise)}
.anlass-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.anlass-chips div{background:var(--feld);border:1px solid var(--linie);border-radius:16px;padding:18px}
.anlass-chips b{font-family:var(--serif);font-weight:400;font-size:21px;display:block;margin-bottom:4px}
.anlass-chips span{color:var(--text-leise);font-size:15px}
@media (max-width:800px){.anlass-chips{grid-template-columns:1fr 1fr}}

/* ================= Block 6 · Wertschätzung ================= */
.drei{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:10px}
.drei .n{border-top:2px solid var(--gelb);padding-top:16px}
.drei .n b{font-family:var(--serif);font-weight:400;font-size:22px;display:block;margin-bottom:6px}
.drei .n p{color:var(--text-leise)}
@media (max-width:800px){.drei{grid-template-columns:1fr;gap:22px}}

/* ================= Block 7 · Vergleich (mockups-firma/v-a.html, Zwei Karten; Präfix vgl-) ================= */
.lp-blk.vgl{max-width:1100px}
.lp-blk.vgl .kl{margin-bottom:10px}
.vgl-spalten{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vgl-karte{border-radius:20px;padding:28px 26px}
.lp .vgl-karte h3{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.2;margin-bottom:16px}
.vgl-karte ul{list-style:none;display:grid;gap:14px}
.vgl-karte li{display:flex;gap:12px;align-items:flex-start}
.vgl-karte li::before{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;margin-top:1px}
.vgl-ueblich{background:#1a1816;border:1px solid var(--linie);color:var(--text-leise)}
.vgl-ueblich li::before{content:"✕";background:#2c2824;color:#8c8278}
.vgl-theaterpack{background:linear-gradient(160deg,rgba(232,176,74,.14),rgba(232,176,74,.03));border:1px solid rgba(232,176,74,.55)}
.lp .vgl-theaterpack h3{color:var(--gelb)}
.vgl-theaterpack li::before{content:"✓";background:var(--gelb);color:#1b1712}
@media (max-width:760px){.vgl-spalten{grid-template-columns:1fr}}

/* ================= Block 8 · Anfrage-Band (dezent, kein Vollgelb) ================= */
.lp-band{padding:0 var(--rand)}
.lp-band-innen{max-width:900px;margin:0 auto;padding:clamp(34px,5vw,52px) 0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);
  display:flex;flex-direction:column;align-items:center;text-align:center}
.lp-band-satz{font-family:var(--serif);font-weight:400;font-variation-settings:var(--h-fvs);letter-spacing:var(--h-lauf);
  font-size:clamp(24px,3vw,34px);line-height:1.2;text-wrap:balance;margin-bottom:20px}
.lp .lp-band .hinweis{margin-top:14px}

/* ================= Block 9 · Datenblatt hell ================= */
.blatt{background:#EFE8DC;color:#1b1712;border-radius:22px;padding:clamp(26px,4vw,48px);max-width:900px;margin:0 auto}
.lp-blk .blatt h2{color:#1b1712;margin-bottom:26px}
.lp-blk .blatt .kl{color:#8a5a12;margin-bottom:10px}
.lp .blatt .ph{color:#8a5a12;border-color:#8a5a12}
.zeile{display:grid;grid-template-columns:180px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid rgba(27,23,18,.14)}
.zeile b{font-weight:600}
.blatt h3{font-family:var(--serif);font-weight:400;font-size:26px;margin:34px 0 8px}
.blatt ol{padding-left:22px}
.blatt ol li{padding:8px 0}
.blatt ol li b{display:block}
@media (max-width:700px){.zeile{grid-template-columns:1fr;gap:2px}}

/* ================= Block 10 · Preisrechner (zwei Spalten) ================= */
.lp-blk .rechner-kopf h2{margin-bottom:10px}
.lp-blk .rechner-kopf .kl{margin-bottom:8px}
.lp-blk .rechner-kopf .lead{margin-bottom:28px}
.rechner{background:var(--feld);border:1px solid var(--linie);border-radius:22px}
.rechner-zwei{display:grid;grid-template-columns:1.2fr 1fr;gap:0;padding:0;overflow:hidden}
.rechner-zwei .links{padding:clamp(20px,3.5vw,36px)}
.rechner .frage{border:0;margin:0 0 26px;min-width:0;padding:0}
.rechner .frage label[for],.rechner .frage legend{font-weight:600;display:block;margin-bottom:10px;padding:0}
.rechner .zahl{font-family:var(--serif);font-size:34px;margin-bottom:6px}
.rechner .zahl span{color:var(--gelb)}
.rechner input[type=range]{width:100%;accent-color:var(--gelb);height:44px;cursor:pointer}
.wahl{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wahl label{cursor:pointer;position:relative;display:block}
.wahl input{position:absolute;opacity:0}
.wahl span{display:block;height:100%;border:1px solid var(--linie);border-radius:14px;padding:14px 16px;min-height:64px}
.wahl small{display:block;color:var(--text-leise);font-size:14px}
.wahl input:checked+span{border-color:var(--gelb);background:rgba(232,176,74,.08)}
.wahl input:focus-visible+span{outline:2px solid var(--gelb)}
.schalter{display:flex;align-items:center;gap:12px;cursor:pointer;min-height:44px;position:relative}
.schalter input{position:absolute;opacity:0}
.sw{width:46px;height:26px;border-radius:99px;background:#3a342d;position:relative;flex:none;transition:.2s}
.sw::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:var(--text);transition:.2s}
.schalter input:checked+.sw{background:var(--gelb)}
.schalter input:checked+.sw::after{left:23px;background:#1b1712}
.schalter input:focus-visible+.sw{outline:2px solid var(--gelb);outline-offset:3px}
.rechner .aus{opacity:.35}
.rechner .aus .schalter{cursor:not-allowed}
.rechner-zwei .erg{background:#26211b;padding:clamp(20px,3.5vw,36px);display:flex;flex-direction:column;justify-content:center}
.erg .kl{margin-bottom:8px}
.gesamt{white-space:nowrap;font-family:var(--serif);font-size:clamp(32px,4.6vw,48px);line-height:1.1}
.pp{color:var(--gelb);font-weight:600;margin:6px 0 4px}
.was{color:var(--text-leise);font-size:15px;margin-bottom:20px}
.erg .knopf{width:100%}
.fein{font-size:13px;color:var(--text-leise);margin-top:12px}
.rechner-ohne-js{background:var(--feld);border:1px solid var(--linie);border-radius:22px;padding:clamp(20px,3.5vw,36px);font-size:18px}
@media (max-width:800px){.rechner-zwei{grid-template-columns:1fr}}
@media (max-width:380px){.gesamt{font-size:29px}.lp .hinweis{font-size:12.5px;gap:6px}}

/* ================= Block 12 · Häufige Fragen ================= */
.faq{max-width:1160px}
.faq details,.faq .lead{max-width:820px}
.faq .lead{margin-bottom:26px}
.faq details{border-top:1px solid var(--linie)}
.faq details:last-of-type{border-bottom:1px solid var(--linie)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:64px;padding:14px 0;
  font-family:var(--serif);font-weight:400;font-variation-settings:var(--h-fvs);font-size:clamp(20px,2vw,23px);line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:32px;height:32px;border:1px solid rgba(232,176,74,.55);border-radius:50%;
  color:var(--gelb);font:400 22px/1 var(--sans);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--gelb)}
.faq .antwort{padding:0 50px 22px 0;color:var(--text-leise)}
@media (max-width:560px){.faq .antwort{padding-right:0}}

/* ================= Block 11 · Anfrage (Formular aus style.css, .b8) ================= */
.lp .b8 .block-kopf .hinweis{margin-top:14px;font-size:14px;text-wrap:wrap;max-width:none}

/* =====================================================================
   DESKTOP-/TABLET-UMBAU 23.09.2026 (Handy < 760 px bleibt unverändert)
   Ein Raster für alle Blöcke: Inhaltsbreite max. 1200 px, gleiche Seitenränder (--rand),
   gemeinsame linke Kante, Überschriften linksbündig (Ausnahme: Anfrage-Band zentriert).
   Tablet = 760–1099 px, Desktop = ab 1100 px.
   ===================================================================== */
@media (min-width:760px){
  .lp{--wrap:calc(1200px + 2 * var(--rand))}

  /* gemeinsamer Container */
  .lp .lp-blk,.lp .lp-blk.eng,.lp .lp-blk.vgl,.lp .faq,.lp .stuecke,.lp .lp-galerie,.lp .b8{
    max-width:var(--wrap);margin-left:auto;margin-right:auto;padding-left:var(--rand);padding-right:var(--rand)}

  /* einheitliche Abschnittsköpfe: linksbündig, gleiche Größe */
  .lp-blk h2,.lp-blk.eng h2,.lp .stuecke-kopf h2,.lp .lp-galerie .block-kopf h2,.lp .b8 .block-kopf h2{
    font-size:clamp(34px,3.8vw,52px);line-height:1.1;letter-spacing:var(--h-lauf)}
  .lp .stuecke-kopf,.lp .lp-galerie .block-kopf,.lp .b8 .block-kopf{text-align:left;padding-left:0;padding-right:0}
  .lp .stuecke-kopf .strich{margin:18px 0 16px}
  .lp .lp-galerie .block-kopf .strich,.lp .b8 .block-kopf .strich{margin:18px 0 0}
  .lp .stuecke-kopf p,.lp .lp-galerie .block-kopf p,.lp .b8 .block-kopf p{margin-left:0;margin-right:0;max-width:36em;text-wrap:pretty}
  .lp .b8 .block-kopf .hinweis{justify-content:flex-start}
  .lp .b8 .block-kopf h2{margin-top:10px}

  /* ---------- Drei Gänge: links Kopf, rechts Zeitleiste ---------- */
  .gaenge{display:grid;grid-template-columns:5fr 7fr;gap:0 clamp(40px,6vw,96px);align-items:start}
  .gaenge .leiste{max-width:none;padding-top:10px}
  .gaenge .lp-kopf{position:sticky;top:40px}
  .gang h3{font-size:clamp(26px,2.2vw,30px)}

  /* ---------- Dinnerkrimis ---------- */
  .lp .stuecke.lp-krimis{padding-top:clamp(40px,6vw,72px)}
  .lp .lp-krimis .leit,.lp .krimi-drei{max-width:none}

  /* ---------- Galerie: Mosaik über volle Breite ---------- */
  .lp .lp-galerie{padding-top:clamp(48px,7vw,88px)}
  .lp .lp-galerie .galerie-raster{max-width:none;padding:0;grid-auto-rows:clamp(150px,15.5vw,224px)}
  .lp .galerie-raster .foto{aspect-ratio:auto}

  /* ---------- Vergleich ---------- */
  .vgl-karte{padding:34px 32px}

  /* ---------- Anfrage (Tablet): Formular an der gemeinsamen linken Kante ---------- */
  .lp .b8 .schmal{max-width:640px;margin:0;padding:0}
  .lp .b8 .oder{text-align:left}
  .lp .b8 .zwei.eins{margin:0}

  /* ---------- Anfrage-Band: volle Breite, zentriert ---------- */
  .lp-band-innen{max-width:1200px}

  /* ---------- Datenblatt: Kasten volle Breite ---------- */
  .blatt{max-width:none}

  /* ---------- Footer: gleiche Kante wie die Blöcke ---------- */
  .lp .fuss .innen{max-width:var(--wrap)}
}

/* Hero Tablet/Desktop – nicht bei Handy quer (≤ 520 px hoch), das behält sein eigenes Layout (Foto links, Text rechts) */
@media (min-width:760px) and (min-height:521px){
  /* ---------- Hero: Vollbild, Text links unten auf dem Foto ---------- */
  .lp-hero{min-height:min(100svh,900px);display:flex;align-items:flex-end}
  .lp-hero .foto{position:absolute;inset:0;height:auto;background:var(--bg)}
  .lp-hero .foto img{object-position:30% 30%}
  .lp-hero .foto::before{background:
    linear-gradient(to right,rgba(20,18,16,.92) 0,rgba(20,18,16,.72) 32%,rgba(20,18,16,.2) 58%,rgba(20,18,16,0) 72%),
    linear-gradient(to top,rgba(20,18,16,1) 0,rgba(20,18,16,.7) 22%,rgba(20,18,16,0) 55%),
    linear-gradient(to bottom,rgba(20,18,16,.55) 0,rgba(20,18,16,0) 18%),
    linear-gradient(rgba(232,176,74,.10),rgba(120,60,20,.10))}
  .lp-hero-text{width:100%;max-width:var(--wrap);margin:0 auto;padding:140px var(--rand) clamp(56px,9vh,104px);text-align:left}
  .lp-hero-text > *{max-width:620px}
  .lp-hero h1{font-size:14px;margin-bottom:16px}
  .lp-hero .gross{font-size:clamp(48px,5.6vw,80px);line-height:1.04}
  .lp-hero .unter{margin:20px 0 24px;font-size:clamp(18px,1.5vw,20px)}
  .hero-chips{justify-content:flex-start}
  .lp .lp-hero .hinweis{justify-content:flex-start}

}

/* ================= Desktop ab 1100 px ================= */
@media (min-width:1100px){
  body.lp{font-size:18px}
  .lp-blk .lead,.lp .stuecke-kopf p,.lp .lp-galerie .block-kopf p,.lp .b8 .block-kopf p{font-size:20px;line-height:1.55}
  .lp-blk .lead{margin-bottom:40px}

  /* Dinnerkrimis: SoKo 2/3 Breite, Text rechts daneben; darunter drei Stücke über volle Breite */
  .lp .lp-krimis .leit{max-width:none;grid-template-columns:2fr 1fr;gap:0 clamp(36px,4vw,56px);align-items:center;margin-bottom:64px}
  .lp .lp-krimis .leit .foto{grid-column:1;grid-row:1;aspect-ratio:3/2;max-width:1000px}
  .lp .lp-krimis .leit .foto img{left:0;right:auto;width:100%;object-position:60% 30%!important;-webkit-mask-image:none;mask-image:none}
  .lp .lp-krimis .leit .foto::before{background:radial-gradient(ellipse 80% 78% at 50% 45%,rgba(20,18,16,0) 50%,rgba(20,18,16,.45) 82%,rgba(20,18,16,.85) 100%),
    linear-gradient(rgba(232,176,74,.10),rgba(120,60,20,.10))}
  .lp .lp-krimis .leit .text{grid-column:2;grid-row:1;padding:0;max-width:none}
  .lp .lp-krimis .leit .titel{font-size:calc(clamp(48px,4.4vw,64px) * var(--h-k))}
  .lp .krimi-drei{max-width:none;gap:clamp(28px,3vw,40px)}
  .lp .krimi-drei .foto{aspect-ratio:3/2}
  .lp .krimi-drei .satz{font-size:17px}

  /* Galerie: 1 groß (2/3) + 2 rechts, darunter 3 – Gesamthöhe ca. 650–700 px */
  .galerie-raster{gap:14px}

  /* Anlässe / Wertschätzung */
  .gross-k{padding:36px 40px;margin-bottom:16px}
  .anlass-chips{gap:16px}
  .anlass-chips div{padding:22px 24px}
  .anlass-chips b{font-size:24px}
  .anlass-chips span{font-size:16px}
  .drei{gap:40px}
  .drei .n b{font-size:26px}

  /* Vergleich */
  .vgl-spalten{gap:24px}
  .vgl-karte{padding:40px 40px}
  .lp .vgl-karte h3{font-size:30px;margin-bottom:22px}
  .vgl-karte ul{gap:16px}

  /* Anfrage-Band */
  .lp-band-satz{font-size:clamp(34px,3vw,42px)}

  /* Datenblatt: links „Auf einen Blick“, rechts „So läuft es ab“ */
  .blatt{display:grid;grid-template-columns:7fr 5fr;gap:0 clamp(40px,5vw,72px);padding:56px 60px}
  .blatt h3{margin-top:28px;font-size:30px}
  .zeile{grid-template-columns:170px 1fr}
  .blatt ol li{padding:10px 0}

  /* Preisrechner: breiter und größer */
  .rechner-zwei{grid-template-columns:1.25fr 1fr}
  .rechner-zwei .links,.rechner-zwei .erg{padding:48px 52px}
  .rechner .zahl{font-size:40px}
  .gesamt{font-size:clamp(44px,3.8vw,56px)}
  .wahl span{padding:16px 18px;min-height:72px}

  /* Anfrage: links Kopf + „Lieber per E-Mail“, rechts Formular */
  .lp .b8{display:grid;grid-template-columns:5fr 6fr;grid-template-rows:auto auto 1fr;gap:0 clamp(48px,6vw,96px);align-items:start;padding-top:clamp(80px,8vw,120px);padding-bottom:clamp(80px,8vw,120px)}
  .lp .b8 .block-kopf{grid-column:1;grid-row:1;padding-bottom:0}
  .lp .b8 .schmal{display:contents}
  .lp .b8 .formular{grid-column:2;grid-row:1 / span 3;background:var(--feld);border:1px solid var(--linie);border-radius:22px;padding:44px 48px}
  .lp .b8 .oder{grid-column:1;grid-row:2;text-align:left;margin:44px 0 14px}
  .lp .b8 .zwei.eins{grid-column:1;grid-row:3;margin:0;max-width:360px;width:100%}
  .lp .b8 .feld input,.lp .b8 .feld textarea{background:var(--bg)}

  /* Häufige Fragen: links Kopf, rechts Akkordeon */
  .lp .faq{display:grid;grid-template-columns:5fr 7fr;gap:0 clamp(40px,6vw,96px);align-items:start}
  .faq .lp-kopf{position:sticky;top:40px}
  .faq .faq-liste details{max-width:none}
  .faq summary{font-size:24px;min-height:72px}

  /* Footer */
  .lp .fuss .innen{padding-top:56px;padding-bottom:40px}
}

/* Navigation an derselben Kante wie die Blöcke (breite Bildschirme) */
@media (min-width:760px){.lp .nav{padding-left:max(var(--rand),calc(50% - 600px));padding-right:max(var(--rand),calc(50% - 600px))}}

/* Hero ab 900 px (nicht Handy quer): Foto rechts, links weich ins Dunkel –
   Oma und Gäste bleiben neben dem Text sichtbar */
@media (min-width:900px) and (min-height:521px){
  /* Hero: Foto rechts, links weich ins Dunkel – Oma und Gäste bleiben neben dem Text sichtbar */
  .lp-hero .foto img{left:auto;right:0;width:74%;object-position:35% 30%;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 30%);mask-image:linear-gradient(to right,transparent 0,#000 30%)}
  .lp-hero .foto::before{background:
    linear-gradient(to right,rgba(20,18,16,.85) 0,rgba(20,18,16,.55) 30%,rgba(20,18,16,0) 52%),
    linear-gradient(to top,rgba(20,18,16,1) 0,rgba(20,18,16,.55) 18%,rgba(20,18,16,0) 42%),
    linear-gradient(to bottom,rgba(20,18,16,.55) 0,rgba(20,18,16,0) 18%),
    radial-gradient(ellipse 70% 80% at 62% 42%,rgba(20,18,16,0) 55%,rgba(20,18,16,.45) 100%),
    linear-gradient(rgba(232,176,74,.10),rgba(120,60,20,.10))}

}

/* ================= Block 3 · Zwei Dinnerkrimis (Kundentermin 24.09.2026) =================
   Nur noch Mafia al dente + Die Torte in der Themse: Handy untereinander, ab 760 px nebeneinander. */
@media (min-width:760px){
  .lp .krimi-zwei{grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,40px)}
  .lp .krimi-zwei .foto{aspect-ratio:3/2}
}
@media (min-width:900px) and (max-width:1099px){.lp .krimi-zwei{max-width:900px}}