/* Landingpage hochzeit.meadow-production.de: Ergänzungen zu stil.css (Cassis-Grundlage der Hauptseite) */
.kopf .innen{ height:64px; padding:0 24px; }
.kopf .marke{ font-size:20px; }
.kopf .knopf{ background:var(--ink); color:#fff; padding:11px 18px; font-size:11px; letter-spacing:1.65px; text-transform:uppercase; white-space:nowrap; }

/* Titelbild: Handy zuerst */
.hero{ min-height:calc(100svh - 64px); padding:72px 24px 64px; }
.hero h1{ font-size:clamp(40px,8.4vw,84px); line-height:1.04; }
.hero .bg img{ object-position:33% 40%; }
.hero .versprechen{ margin-top:18px; max-width:440px; font-size:15px; line-height:23px; }
.hero .btnreihe{ margin-top:30px; }
.hero .btn{ min-width:280px; height:54px; font-size:12px; }

/* Preisanker */
.anker{ padding:34px 0; text-align:center; }
.anker .lab{ font-size:14px; letter-spacing:2.2px; }
.anker small{ display:block; margin-top:8px; font-size:13px; opacity:.72; }

/* Formular */
.anfrage{ padding:96px 0; }
.anfrage .kopfblock{ margin-bottom:38px; }
.anfrage .formular{ max-width:760px; margin:0 auto; }
.formular .wahl.radio label{ border:1px solid var(--rule); background:#fff; padding:11px 16px; cursor:pointer; }
.formular .wahl.radio input{ position:absolute; opacity:0; pointer-events:none; }
.formular .wahl.radio label:has(input:checked){ background:var(--ink); color:#fff; border-color:var(--ink); }
.formular .wahl.radio label:has(input:focus-visible){ outline:2px solid var(--ink); outline-offset:2px; }
.formular .offen{ flex-direction:row; align-items:center; gap:8px; text-transform:none; letter-spacing:0; font-size:15px; margin-top:2px; }
.formular .offen input{ width:18px; height:18px; padding:0; }
.formular input:disabled{ background:var(--stone); opacity:.6; }
.formular .fehler{ color:#8a2a1f; font-size:14px; text-transform:none; letter-spacing:0; display:none; }
.formular .feld-fehler input, .formular .feld-fehler .wahl{ border-color:#8a2a1f; }
.formular .feld-fehler .fehler{ display:block; }
.formular .senden{ grid-column:1/-1; display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:8px; }
.formular .senden .btn{ min-width:300px; height:56px; font-size:12px; }
.formular .senden .klein{ text-align:center; max-width:520px; }
.formular .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.sendefehler{ grid-column:1/-1; background:#fdf0ee; border:1px solid #d9a9a2; padding:16px 18px; font-size:15px; display:none; }
.sendefehler a{ text-decoration:underline; }

/* Ergebnisseiten */
.ergebnis{ min-height:calc(100svh - 64px); display:flex; align-items:center; padding:80px 0; }
.ergebnis .wrap{ max-width:820px; text-align:center; }
.ergebnis h1{ margin:14px 0 22px; }
.ergebnis p{ max-width:560px; margin:0 auto; }
.ergebnis p + p{ margin-top:14px; }
.kollegen{ display:grid; gap:16px; margin:40px auto 0; max-width:640px; text-align:left; }
.kollege{ background:var(--stone); padding:24px 26px; display:flex; flex-direction:column; gap:8px; }
.kollege .lab{ opacity:.75; }
.kollege b{ font-family:var(--serif); font-weight:300; font-size:28px; line-height:32px; letter-spacing:1px; text-transform:uppercase; }
.kollege .ulink{ align-self:flex-start; margin-top:6px; }
.mailhinweis{ margin-top:34px !important; font-size:14px; opacity:.75; }

/* Mitlaufender Button, nur Handy */
.klebe{ display:none; }
@media (max-width:759px){
  .klebe:not([hidden]){ display:flex; position:fixed; left:14px; right:14px; bottom:14px; z-index:40; height:52px; align-items:center; justify-content:center; background:var(--ink); color:#fff; font-size:12px; letter-spacing:1.65px; text-transform:uppercase; box-shadow:0 6px 22px rgba(0,0,0,.22); }
  .fuss.schlank{ padding-bottom:84px; }
}

/* Fuß, schlank */
.fuss.schlank{ padding:44px 0 34px; }
.fuss.schlank .zeile{ display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:center; font-size:13px; }
.fuss.schlank .zeile a{ display:inline; padding:0; font-size:13px; text-decoration:underline; text-underline-offset:3px; }
.fuss.schlank .kleinzeile{ text-align:center; margin-top:18px; font-size:12px; opacity:.65; }

@media (max-width:759px){
  .kopf .innen{ padding:0 16px; gap:10px; }
  .kopf .marke{ font-size:15px; letter-spacing:.8px; }
  .kopf .knopf{ padding:9px 10px; font-size:9px; letter-spacing:.9px; line-height:12px; text-align:center; }
  .hero{ padding:56px 22px 52px; }
  .hero .btn{ width:100%; min-width:0; }
  .anfrage{ padding:64px 0; }
  .formular .senden .btn{ width:100%; min-width:0; }
  .kollege b{ font-size:24px; }
}

/* Vorteile: kompakte Kacheln, mittig */
.vorteile{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.vorteil{ background:#fff; text-align:center; padding:30px 24px 28px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.vorteil .ico{ width:46px; height:46px; border-radius:50%; border:1px solid var(--ink); display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-style:italic; font-size:24px; line-height:1; }
.vorteil h3{ font-family:var(--serif); font-weight:300; font-size:24px; line-height:28px; letter-spacing:1px; text-transform:uppercase; }
.vorteil p{ font-size:15px; line-height:22px; max-width:300px; }

/* Stimmen: Karten zum Wischen. Nächste Karte schaut heraus, aktive Karte ist groß und hell. */
.stimmen-sec .wrap{ max-width:none; padding:0; }
.stimmen-sec .kopfblock{ padding:0 28px; }
.karussell{ position:relative; }
.spur{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; touch-action:pan-x pan-y; padding:8px calc(50% - min(36vw,200px)) 22px; cursor:grab; align-items:stretch; }
.spur.zieht{ cursor:grabbing; scroll-snap-type:none; }
.spur::-webkit-scrollbar{ display:none; }
.folie{ flex:0 0 min(72vw,400px); scroll-snap-align:center; scroll-snap-stop:always; background:var(--stone); display:flex; flex-direction:column; transform:scale(.95); opacity:.6; transition:transform .35s cubic-bezier(.22,1,.36,1), opacity .35s ease, box-shadow .35s ease; user-select:none; -webkit-user-select:none; }
.folie.aktiv{ transform:none; opacity:1; box-shadow:0 14px 34px rgba(61,55,51,.16); }
.folie .foto{ aspect-ratio:4/3; overflow:hidden; background:#ddd; }
.folie .foto img{ width:100%; height:100%; object-fit:cover; pointer-events:none; -webkit-user-drag:none; }
.folie .inhalt{ padding:20px 20px 22px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; flex:1; }
.folie q{ font-family:var(--serif); font-style:italic; font-size:21px; line-height:26px; quotes:"\201E" "\201C"; }
.folie p{ font-size:14px; line-height:21px; }
.folie .wer{ font-size:12px; letter-spacing:1.8px; text-transform:uppercase; opacity:.85; margin-top:auto; padding-top:4px; }
.steuer{ display:flex; align-items:center; justify-content:center; gap:22px; margin-top:4px; }
.pfeil{ width:60px; height:60px; border-radius:50%; border:1px solid var(--ink); background:#fff; color:var(--ink); font-size:34px; line-height:1; padding:0 0 5px; cursor:pointer; font-family:var(--serif); -webkit-tap-highlight-color:transparent; transition:transform .12s ease-out, background .12s ease-out; }
.pfeil:active{ transform:scale(.92); background:var(--ink); color:#fff; }
.punkte{ display:flex; gap:12px; }
.punkte i{ width:9px; height:9px; border-radius:50%; background:var(--rule); transition:background .25s ease, transform .25s ease; }
.punkte i.an{ background:var(--ink); transform:scale(1.3); }
@media (prefers-reduced-motion: reduce){ .folie{ transition:none; } }

/* Ablauf: lockere Schritte, Zahlen mittig, dünne Linie dazwischen */
.schritte{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.schritt{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; position:relative; }
.kreis{ width:54px; height:54px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-style:italic; font-size:28px; line-height:1; }
.schritt h3{ font-family:var(--serif); font-weight:300; font-size:26px; line-height:30px; letter-spacing:1px; text-transform:uppercase; margin-top:6px; }
.schritt p{ font-size:15px; line-height:22px; max-width:300px; }


@media (max-width:759px){
  .sec{ padding:52px 0; }
  .kopfblock{ margin-bottom:34px; }
  .vorteile{ grid-template-columns:1fr; gap:14px; }
  .schritte{ grid-template-columns:1fr; gap:0; }
  .schritt{ padding-bottom:34px; }
  .schritt:not(:last-child)::after{ content:""; position:absolute; left:50%; bottom:6px; height:22px; border-left:1px dashed var(--ink); opacity:.5; }
  .zwei .text p{ text-align:center; }
}
@media (max-width:759px){
  .vorteil{ padding:22px 20px 20px; gap:6px; }
  .vorteil .ico{ width:38px; height:38px; font-size:20px; }
  .vorteil h3{ font-size:21px; line-height:25px; }
  .vorteil p{ font-size:14px; line-height:20px; }
  .vorteile{ gap:10px; }
}

/* Beweiszeile, Preise, zweistufiges Formular */
.beweis{ padding:22px 0; text-align:center; }
.beweis .lab{ font-size:12.5px; letter-spacing:1.9px; line-height:20px; }
.vorteil{ background:var(--stone); }
.stimmen-sec .folie{ background:#fff; }
.preiskarten{ display:grid; grid-template-columns:repeat(2,minmax(0,260px)); gap:20px; justify-content:center; }
.preiskarte{ background:var(--stone); text-align:center; padding:30px 20px 26px; display:flex; flex-direction:column; gap:6px; }
.preiskarte .preis{ font-family:var(--serif); font-weight:300; font-size:38px; line-height:42px; }
.preiskarte .klein{ font-size:13px; opacity:.7; }
.preisnote{ text-align:center; max-width:520px; margin:26px auto 0; font-size:14px; line-height:21px; opacity:.8; }
.weiterzeile{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:6px; }
.weiterzeile .btn{ min-width:300px; height:56px; font-size:12px; }
.weiterzeile .klein{ text-align:center; }
.schritt2{ grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:18px 22px; animation:einblenden .45s cubic-bezier(.22,1,.36,1); }
.schritt2[hidden]{ display:none; }
@keyframes einblenden{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .schritt2{ animation:none; } }
@media (max-width:759px){
  .preiskarten{ grid-template-columns:1fr 1fr; gap:12px; }
  .preiskarte{ padding:24px 12px 20px; }
  .preiskarte .preis{ font-size:30px; line-height:34px; }
  .weiterzeile .btn{ width:100%; min-width:0; }
  .schritt2{ grid-template-columns:1fr; }
}
@media (max-width:759px){
  .hero h1{ font-size:33px; line-height:38px; hyphens:manual; letter-spacing:1px; }
}

/* Titelbild dunkler, damit Text und Button immer lesbar sind */
.hero.dunkel .bg::after{ background:linear-gradient(rgba(28,23,20,.50), rgba(28,23,20,.66)); }
.hero h1, .hero .kursiv, .hero .unter, .hero .versprechen{ text-shadow:0 1px 14px rgba(0,0,0,.35); }

/* Gründe: schwarzer Abschnitt, Kärtchen im Wechsel links und rechts, viel Luft */
.dunkel-sec{ background:var(--ink); color:#fff; }
.gruppe{ display:flex; flex-direction:column; gap:34px; max-width:760px; margin:0 auto; }
.grund{ background:#fff; color:var(--ink); padding:30px 30px 28px; width:min(100%,520px); display:flex; flex-direction:column; gap:8px; }
.grund.links{ align-self:flex-start; text-align:left; }
.grund.rechts{ align-self:flex-end; text-align:right; align-items:flex-end; }
.gnr{ font-family:var(--serif); font-style:italic; font-size:54px; line-height:48px; opacity:.35; }
.grund h3{ font-family:var(--serif); font-weight:300; font-size:27px; line-height:31px; letter-spacing:.8px; text-transform:uppercase; }
.grund p{ font-size:15px; line-height:23px; }
.dunkel-sec .btn{ background:#fff; color:var(--ink); }
.dunkel-sec .btnreihe{ margin-top:48px; }
@media (max-width:759px){
  .grund{ width:88%; padding:26px 24px 24px; }
  .gruppe{ gap:28px; }
  .grund h3{ font-size:23px; line-height:27px; }
}
.preise .h-gross{ margin:4px 0 6px; }

/* Titelbild schlicht: Überschrift, eine Zeile, ein Button. Kopfzeile am Handy nur mit Marke. */
.hero .unter{ margin-top:16px; }
.hero .btnreihe{ margin-top:34px; }
@media (max-width:759px){
  .kopf .knopf{ display:none; }
  .kopf .innen{ justify-content:center; }
  .kopf .marke{ font-size:17px; letter-spacing:1.2px; }
  .hero h1{ font-size:32px; line-height:38px; }
  .hero .unter{ font-size:12px; letter-spacing:2px; }
}

/* Beruhigungsblock unter dem Ablauf */
.ohnedruck{ background:#fff; max-width:640px; margin:46px auto 0; padding:34px 30px 30px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px; }
.ohnedruck h3{ font-family:var(--serif); font-weight:300; font-size:28px; line-height:33px; letter-spacing:.8px; text-transform:uppercase; text-wrap:balance; }
.ohnedruck p{ font-size:15px; line-height:23px; }
.ohnedruck .lab{ opacity:.75; }
@media (max-width:759px){ .ohnedruck{ margin-top:30px; padding:28px 22px 24px; } .ohnedruck h3{ font-size:23px; line-height:27px; } }

/* Bilderband: wischbarer Fotostreifen, ohne Text */
.bilderband{ padding:44px 0; background:#fff; }
.streifen{ display:flex; align-items:flex-start; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding:0 28px; scroll-padding:0 28px; cursor:grab; }
.streifen::-webkit-scrollbar{ display:none; }
.streifen a{ display:block; flex:0 0 auto; position:relative; scroll-snap-align:start; }
.streifen img{ display:block; width:min(62vw,340px); height:auto; aspect-ratio:4/5; object-fit:cover; user-select:none; -webkit-user-drag:none; background:#e8e4e0; }
.streifen.zieht{ cursor:grabbing; scroll-snap-type:none; }
@media (min-width:760px){ .streifen{ padding:0 max(32px, calc(50% - 570px)); scroll-padding:0 32px; } }

/* Bearbeiten-Modus (?bearbeiten): Zoom/Ausschnitt für austauschbare Bilder, Fotostreifen als Raster */
img[data-bild]{ transform:scale(var(--zoom,1)); transform-origin:var(--origin,50% 50%); }
html.mb-aktiv .streifen{ flex-wrap:wrap; overflow:visible; scroll-snap-type:none; padding:0 14px; cursor:default; gap:8px; }
html.mb-aktiv .streifen img{ width:150px; }
html.mb-aktiv .bilderband{ padding:30px 0 90px; }