/* Dummy der neuen Hauptseite meadow-production.de.
   Zweck: Aufbau und Texte prüfen. Schriften und Farben wie leistungen.meadow-production.de,
   aber bewusst als einfaches Fließlayout. Das feine Cassis-Layout kommt erst nach Freigabe. */
:root{
  --ink:#3D3733; --paper:#FFFFFF; --stone:#F7F5F3; --rule:rgba(61,55,51,.18);
  --serif:'Cormorant Garamond','Cormorant',Garamond,'Times New Roman',serif;
  --sans:'Work Sans','Helvetica Neue',Arial,sans-serif;
}
*{ box-sizing:border-box; }
html{ background:var(--paper); scroll-behavior:smooth; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:24px; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
h1,h2,h3,p{ margin:0; font-weight:400; }
a{ color:inherit; text-decoration:none; }
a:focus-visible,button:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
img{ display:block; max-width:100%; }
[hidden]{ display:none !important; }

/* Hinweisband Dummy + markierte Lücken */
.dummy-band{ background:#b98a2a; color:#fff; text-align:center; font-size:12px; letter-spacing:1.2px; text-transform:uppercase; padding:6px 12px; }
.fehlt{ background:#fdf0cf; outline:1px dashed #b98a2a; padding:0 4px; }

/* Kopf */
.kopf{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96); border-bottom:1px solid var(--rule); backdrop-filter:blur(6px); }
.kopf .innen{ position:relative; max-width:1320px; margin:0 auto; padding:0 32px; height:78px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.marke{ font-family:var(--serif); font-weight:300; font-size:24px; letter-spacing:1.4px; text-transform:uppercase; white-space:nowrap; }
.menue{ display:flex; align-items:center; gap:34px; }
.menue > a, .menue .dd > a{ font-size:13px; letter-spacing:1.95px; text-transform:uppercase; padding:6px 0; border-bottom:1px solid transparent; }
.menue > a:hover, .menue .dd > a:hover, .menue a.an{ border-bottom-color:var(--ink); }
.menue .knopf{ background:var(--ink); color:#fff; padding:12px 22px; font-size:11px; letter-spacing:1.65px; border:0; }
.dd{ position:relative; }
.dd > a::after{ content:" ▾"; font-size:10px; }
.dd .liste{ position:absolute; left:-22px; top:100%; min-width:230px; background:#fff; border:1px solid var(--rule); padding:10px 0; display:none; box-shadow:0 12px 30px rgba(0,0,0,.08); }
.dd:hover .liste, .dd:focus-within .liste{ display:block; }
.dd .liste a{ display:block; padding:10px 22px; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; }
.dd .liste a:hover{ background:var(--stone); }
.burger{ display:none; background:none; border:0; font:inherit; font-size:12px; letter-spacing:1.8px; text-transform:uppercase; color:var(--ink); padding:10px 0; cursor:pointer; }

/* Grundbausteine */
.wrap{ max-width:1140px; margin:0 auto; padding:0 32px; }
.schmal{ max-width:720px; margin:0 auto; }
.sec{ padding:110px 0; }
.sec.stone{ background:var(--stone); }
.c{ text-align:center; }
.lab{ font-size:13px; line-height:19.5px; letter-spacing:1.95px; text-transform:uppercase; }
.kursiv{ font-family:var(--serif); font-style:italic; font-size:34px; line-height:38px; }
.h-gross{ font-family:var(--serif); font-weight:300; font-size:clamp(40px,5vw,72px); line-height:1.03; hyphens:auto; letter-spacing:3px; text-transform:uppercase; text-wrap:balance; }
.h-mittel{ font-family:var(--serif); font-weight:300; font-size:44px; line-height:48px; letter-spacing:1.6px; text-transform:uppercase; text-wrap:balance; }
.h-klein{ font-family:var(--serif); font-weight:300; font-size:28px; line-height:32px; letter-spacing:1.2px; text-transform:uppercase; }
.kopfblock{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; margin-bottom:56px; }
.kopfblock p{ max-width:640px; }
.text p + p{ margin-top:16px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; min-width:200px; height:48px; padding:0 26px; background:var(--ink); color:#fff; font-size:11px; letter-spacing:1.65px; text-transform:uppercase; border:0; cursor:pointer; font-family:var(--sans); }
.btn.hell{ background:transparent; color:var(--ink); border:1px solid var(--ink); }
.btnreihe{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:34px; }
.ulink{ border-bottom:1px solid var(--ink); padding-bottom:3px; font-size:13px; letter-spacing:1.95px; text-transform:uppercase; }

/* Titelbild */
.hero{ position:relative; min-height:78vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:110px 24px; overflow:hidden; }
.hero .bg{ position:absolute; inset:0; }
.hero .bg img{ width:100%; height:100%; object-fit:cover; }
.hero.dunkel .bg::after{ content:""; position:absolute; inset:0; background:rgba(40,34,30,.38); }
.hero.dunkel{ color:#fff; }
.hero.dunkel .btn{ background:#fff; color:var(--ink); }
.hero.hell .bg{ opacity:.26; }
.hero > *:not(.bg){ position:relative; }
.hero .kursiv{ margin-bottom:10px; }
.hero h1{ font-family:var(--serif); font-weight:300; font-size:clamp(44px,5.4vw,84px); line-height:1.05; hyphens:manual; max-width:1200px !important; text-transform:uppercase; text-wrap:balance; max-width:1100px; }
.hero .unter{ margin-top:22px; font-size:15px; letter-spacing:2.25px; text-transform:uppercase; }
.hero.klein{ min-height:56vh; }

/* Zwei Spalten Bild + Text */
.zwei{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.zwei.umg > :first-child{ order:2; }
.zwei .bild{ aspect-ratio:4/5; overflow:hidden; }
.zwei .bild img{ width:100%; height:100%; object-fit:cover; }
.zwei .text{ display:flex; flex-direction:column; gap:16px; }
.zwei .text .btn, .zwei .text .ulink{ align-self:flex-start; margin-top:10px; }

/* Vorteile / Schritte */
.raster3{ display:grid; grid-template-columns:repeat(3,1fr); gap:48px; }
.raster4{ display:grid; grid-template-columns:repeat(4,1fr); gap:36px; }
.punkt .nr{ font-family:var(--serif); font-style:italic; font-size:34px; line-height:36px; margin-bottom:12px; }
.punkt h3{ font-family:var(--serif); font-weight:300; font-size:26px; line-height:30px; letter-spacing:1px; text-transform:uppercase; margin-bottom:10px; }

/* Pakete */
.pakete{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px; }
.paket{ background:var(--paper); border:1px solid var(--rule); padding:34px 28px 30px; display:flex; flex-direction:column; gap:10px; position:relative; }
.sec:not(.stone) .paket{ background:var(--stone); border-color:transparent; }
.paket.top{ background:var(--ink) !important; color:#fff; }
.paket .band{ position:absolute; top:-12px; left:28px; background:#b98a2a; color:#fff; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; padding:3px 10px; }
.paket h3{ font-family:var(--serif); font-weight:300; font-size:30px; line-height:32px; letter-spacing:1.2px; text-transform:uppercase; }
.paket .preis{ font-family:var(--serif); font-weight:300; font-size:42px; line-height:46px; }
.paket ul{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:15px; line-height:22px; flex:1; }
.paket li{ position:relative; padding-left:18px; }
.paket li::before{ content:""; position:absolute; left:0; top:9px; width:5px; height:5px; border-radius:50%; background:currentColor; }
.paket .btn{ margin-top:18px; align-self:flex-start; }
.paket.top .btn{ background:#fff; color:var(--ink); }
.hinweis{ margin-top:34px; text-align:center; font-family:var(--serif); font-style:italic; font-size:22px; line-height:28px; }

/* Übersicht Leistungen */
.bereich{ display:grid; grid-template-columns:380px 1fr; gap:56px; padding:70px 0; border-top:1px solid var(--rule); }
.bereich:first-child{ border-top:0; }
.bereich .bild{ aspect-ratio:4/5; overflow:hidden; }
.bereich .bild img{ width:100%; height:100%; object-fit:cover; }
.bereich .inhalt{ display:flex; flex-direction:column; gap:14px; }
.preisliste{ margin:10px 0 6px; border-top:1px solid var(--rule); }
.preisliste div{ display:flex; justify-content:space-between; gap:20px; padding:14px 0; border-bottom:1px solid var(--rule); }
.preisliste b{ font-weight:400; }
.preisliste span{ font-family:var(--serif); font-size:24px; white-space:nowrap; }
.preisliste small{ display:block; font-size:13px; opacity:.7; }
.bereich .btn{ align-self:flex-start; margin-top:8px; }

/* Kacheln */
.kacheln{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:28px; }
.kachel{ display:block; }
.kachel .img{ aspect-ratio:4/5; overflow:hidden; background:#ddd; position:relative; }
.kachel.quer .img{ aspect-ratio:3/2; }
.kachel .img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.kachel:hover .img img{ transform:scale(1.04); }
.kachel .cap{ margin-top:14px; text-align:center; }
.kachel .cap b{ display:block; font-weight:300; font-family:var(--serif); font-size:26px; line-height:30px; letter-spacing:1.2px; text-transform:uppercase; }
.kachel .cap span{ display:block; margin-top:4px; font-size:12px; letter-spacing:1.8px; text-transform:uppercase; opacity:.75; }

/* Video (lädt YouTube erst nach Klick) */
.video{ position:relative; aspect-ratio:16/9; background:#222 center/cover no-repeat; cursor:pointer; overflow:hidden; }
.video::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.18); }
.video .play{ position:absolute; left:50%; top:50%; width:78px; height:78px; margin:-39px 0 0 -39px; border-radius:50%; background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center; }
.video .play::after{ content:""; margin-left:5px; border-left:22px solid var(--ink); border-top:13px solid transparent; border-bottom:13px solid transparent; }
.video .titel{ position:absolute; left:18px; bottom:16px; color:#fff; font-size:12px; letter-spacing:1.8px; text-transform:uppercase; text-shadow:0 1px 6px rgba(0,0,0,.5); }
.video .dsgvo{ position:absolute; right:14px; bottom:14px; color:#fff; font-size:11px; opacity:.85; max-width:300px; text-align:right; }
.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.videos2{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }

/* Stimmen */
.google{ display:inline-flex; align-items:center; gap:10px; border:1px solid var(--rule); padding:10px 18px; background:#fff; font-size:13px; letter-spacing:1.2px; text-transform:uppercase; }
.google .sterne{ color:#b98a2a; letter-spacing:2px; font-size:16px; }
.stimmen{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.stimme{ background:#fff; padding:34px 30px; display:flex; flex-direction:column; gap:14px; }
.stimme q{ font-family:var(--serif); font-style:italic; font-size:23px; line-height:30px; quotes:"„" "“"; }
.stimme .wer{ font-size:12px; letter-spacing:1.8px; text-transform:uppercase; opacity:.8; margin-top:auto; }

/* FAQ */
.faq{ border-top:1px solid var(--rule); max-width:900px; margin:0 auto; }
.faq details{ border-bottom:1px solid var(--rule); }
.faq summary{ list-style:none; cursor:pointer; padding:24px 48px 24px 0; position:relative; font-family:var(--serif); font-style:italic; font-size:28px; line-height:32px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%); font-style:normal; font-size:32px; font-weight:300; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ padding:0 0 26px; max-width:760px; }

/* Band „Auch für euch da" */
.auch .kachel .img{ aspect-ratio:1/1; }

/* Galerie */
.galerie{ columns:3; column-gap:18px; }
.galerie img{ width:100%; margin-bottom:18px; break-inside:avoid; }

/* Anfrage */
.cta{ text-align:center; }
.cta .h-gross{ margin:12px 0 20px; }
.cta p{ max-width:560px; margin:0 auto; }
.formular{ display:grid; grid-template-columns:1fr 1fr; gap:18px 22px; }
.formular label{ display:flex; flex-direction:column; gap:6px; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; }
.formular .ganz{ grid-column:1/-1; }
.formular input, .formular select, .formular textarea{ font:inherit; font-size:16px; letter-spacing:0; text-transform:none; color:var(--ink); padding:13px 14px; border:1px solid var(--rule); background:#fff; border-radius:0; }
.formular textarea{ min-height:150px; resize:vertical; }
.formular .wahl{ display:flex; flex-wrap:wrap; gap:10px 22px; text-transform:none; letter-spacing:0; font-size:15px; }
.formular .wahl label{ flex-direction:row; align-items:center; gap:8px; text-transform:none; letter-spacing:0; font-size:15px; }
.formular .klein{ font-size:13px; text-transform:none; letter-spacing:0; opacity:.75; }
.anfrage-seite{ display:grid; grid-template-columns:1.6fr 1fr; gap:64px; align-items:start; }
.kontaktbox{ background:var(--stone); padding:34px 30px; display:flex; flex-direction:column; gap:14px; }
.kontaktbox .btn{ align-self:flex-start; }

/* Fuß */
.fuss{ background:var(--ink); color:#fff; padding:80px 0 40px; }
.fuss .spalten{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.fuss h4{ margin:0 0 14px; font-weight:400; font-size:12px; letter-spacing:1.8px; text-transform:uppercase; opacity:.7; }
.fuss a{ display:block; padding:4px 0; font-size:15px; }
.fuss .marke{ font-size:26px; margin-bottom:12px; display:block; }
.fuss .unten{ margin-top:56px; padding-top:22px; border-top:1px solid rgba(255,255,255,.2); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:13px; opacity:.75; }
.fuss .unten a{ display:inline; padding:0; font-size:13px; margin-left:18px; }

/* Einblenden */
html.js .rv{ opacity:0; transform:translateY(20px); transition:opacity .8s ease, transform .8s ease; }
html.js .rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ html.js .rv{ opacity:1; transform:none; transition:none; } }

/* Handy */
@media (max-width: 900px){
  .raster4{ grid-template-columns:1fr 1fr; }
  .stimmen{ grid-template-columns:1fr; }
  .bereich{ grid-template-columns:1fr; gap:28px; }
  .bereich .bild{ aspect-ratio:3/2; }
  .fuss .spalten{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 759px){
  .kopf .innen{ padding:0 20px; height:64px; }
  .marke{ font-size:19px; }
  .burger{ display:block; }
  .menue{ display:none; position:absolute; top:64px; left:0; right:0; background:#fff; border-bottom:1px solid var(--rule); flex-direction:column; align-items:stretch; gap:0; padding:8px 28px 22px; }
  .menue.offen{ display:flex; }
  .menue > a, .menue .dd > a{ padding:14px 0; border-bottom:1px solid var(--rule); }
  .dd > a::after{ content:""; }
  .dd .liste{ position:static; display:block; border:0; box-shadow:none; padding:0 0 6px 16px; min-width:0; }
  .dd .liste a{ padding:10px 0; font-size:12px; }
  .menue .knopf{ margin-top:16px; text-align:center; padding:14px; }
  .wrap{ padding:0 28px; }
  .sec{ padding:64px 0; }
  .hero{ min-height:72vh; padding:84px 24px; }
  .hero h1{ font-size:44px; line-height:48px; hyphens:auto; }
  .hero .unter{ font-size:12px; letter-spacing:1.8px; }
  .h-gross{ font-size:40px; line-height:44px; letter-spacing:2px; }
  .h-mittel{ font-size:30px; line-height:34px; }
  .kursiv{ font-size:26px; line-height:30px; }
  .zwei, .zwei.umg{ grid-template-columns:1fr; gap:34px; }
  .zwei.umg > :first-child{ order:0; }
  .zwei .text h2, .zwei .text .lab, .zwei .text .kursiv{ text-align:center; }
  .zwei .text .btn, .zwei .text .ulink{ align-self:center; }
  .raster3, .raster4{ grid-template-columns:1fr; gap:34px; }
  .punkt{ text-align:center; }
  .punkt p{ text-align:left; }
  .videos2{ grid-template-columns:1fr; }
  .galerie{ columns:2; column-gap:10px; }
  .galerie img{ margin-bottom:10px; }
  .faq summary{ font-size:22px; line-height:27px; padding:18px 40px 18px 0; }
  .formular{ grid-template-columns:1fr; }
  .anfrage-seite{ grid-template-columns:1fr; gap:40px; }
  .btn{ width:100%; }
  .paket .btn, .bereich .btn, .kontaktbox .btn{ width:100%; }
  .fuss .spalten{ grid-template-columns:1fr; }
  .fuss .unten a{ margin:0 18px 0 0; }
  .video .dsgvo{ display:none; }
}

/* ── Ergänzungen nach Vorbild julyandcan.com ── */
/* Titelbild mit Video (Bild als Platzhalter, bis der Clip da ist) */
.hero video{ width:100%; height:100%; object-fit:cover; }
.hero .clip-hinweis{ position:absolute; right:18px; bottom:16px; font-size:11px; letter-spacing:1px; }
/* Fotos: ruhige Mosaik-Galerie */
.mosaik{ columns:3; column-gap:22px; }
.mosaik a{ display:block; margin-bottom:22px; break-inside:avoid; cursor:zoom-in; }
.mosaik img{ width:100%; transition:opacity .3s ease; }
.mosaik a:hover img{ opacity:.88; }
.bildstreifen{ display:grid; grid-template-columns:1fr 1.25fr 1fr; gap:22px; align-items:center; }
.bildstreifen img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.bildstreifen img.mitte{ aspect-ratio:4/5.6; }
.leuchte{ position:fixed; inset:0; z-index:200; background:rgba(28,24,22,.94); display:flex; align-items:center; justify-content:center; padding:30px; cursor:zoom-out; }
.leuchte img{ max-width:100%; max-height:100%; object-fit:contain; }
/* Filme: untereinander, Name darüber */
.filmliste{ max-width:1000px; margin:0 auto; display:flex; flex-direction:column; gap:90px; }
.filmliste .film h2{ font-family:var(--serif); font-style:italic; font-size:40px; line-height:44px; text-align:center; margin-bottom:6px; }
.filmliste .film p.lab{ text-align:center; margin-bottom:22px; opacity:.75; }
/* Über uns: zwei Bilder nebeneinander, Text darunter */
.ueber-kopf{ text-align:center; margin-bottom:50px; }
.ueber-kopf .kursiv{ font-size:40px; line-height:44px; }
.bildpaar{ display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:900px; margin:0 auto 60px; }
.bildpaar img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.unterschrift{ font-family:var(--serif); font-style:italic; font-size:34px; margin-top:26px; text-align:center; }
.ort-zeile{ display:flex; justify-content:center; gap:40px; flex-wrap:wrap; font-family:var(--serif); font-style:italic; font-size:28px; }
@media (max-width: 759px){
  .mosaik{ columns:2; column-gap:10px; }
  .mosaik a{ margin-bottom:10px; }
  .bildstreifen{ grid-template-columns:1fr 1fr; gap:10px; }
  .bildstreifen .rand-2{ display:none; }
  .filmliste{ gap:56px; }
  .filmliste .film h2{ font-size:30px; line-height:34px; }
  .bildpaar{ gap:10px; margin-bottom:36px; }
  .ort-zeile{ font-size:22px; gap:6px 24px; }
  .ueber-kopf .kursiv{ font-size:28px; line-height:32px; }
}

/* Vorteile auf der Startseite: Überschriften einzeilig, damit die vier Spalten gleich wirken */
@media (min-width: 900px){ .raster4.gleich .punkt h3{ font-size:23px; letter-spacing:.5px; white-space:nowrap; } }

/* Pakete: Details zum Aufklappen */
#pakete .pakete{ align-items:start; }
#pakete .paket ul{ flex:none; }
#pakete .paket .btn{ margin-top:auto; }
#pakete .paket details.mehr{ margin-bottom:18px; }
.paket details.mehr{ margin-top:4px; }
.paket details.mehr summary{ list-style:none; cursor:pointer; font-size:11px; letter-spacing:1.65px; text-transform:uppercase; padding:8px 0; border-bottom:1px solid currentColor; display:inline-block; opacity:.85; }
.paket details.mehr summary::-webkit-details-marker{ display:none; }
.paket details.mehr summary::after{ content:" ▾"; }
.paket details.mehr[open] summary::after{ content:" ▴"; }
.paket details.mehr ul{ margin-top:12px; }

/* Film oder Trailer: Vergleich mit Randnotizen (nur breiter Desktop) */
.vergleich{ position:relative; max-width:820px; margin:0 auto; }
.vergleich .pakete{ grid-template-columns:1fr 1fr; }
.vergleich .paket > p:not(.lab){ font-size:15px; line-height:23px; }
.notiz{ display:none; position:absolute; top:34px; width:170px; font-family:var(--serif); font-style:italic; font-size:22px; line-height:24px; }
.notiz svg{ display:block; width:120px; height:64px; margin-top:4px; }
.notiz.links{ left:-196px; text-align:right; }
.notiz.links svg{ margin-left:auto; margin-right:-27px; }
.notiz.rechts{ right:-196px; }
.notiz.rechts svg{ margin-left:-27px; }
@media (min-width: 1240px){ .notiz{ display:block; } }
@media (max-width: 759px){ .vergleich .pakete{ grid-template-columns:1fr; } }

/* Ablauf im Stil der Preisliste: Schritte links, Foto rechts bleibt beim Scrollen stehen */
.sec.ablauf{ padding:0; background:var(--paper); }
.ablauf-innen{ display:grid; grid-template-columns:1fr 1fr; min-height:100vh; }
.ablauf-text{ padding:120px 70px 120px max(32px, calc((100vw - 1140px) / 2 + 32px)); }
.ablauf-text .h-gross{ margin:14px 0 60px; }
.schritte{ list-style:none; margin:0; padding:0 0 0 46px; border-left:1px solid var(--rule); display:flex; flex-direction:column; gap:54px; max-width:520px; }
.schritte li{ position:relative; }
.schritte li::before{ content:""; position:absolute; left:-51px; top:12px; width:9px; height:9px; border-radius:50%; background:var(--ink); }
.schritte .nr{ font-size:13px; letter-spacing:1.95px; }
.schritte h3{ font-family:var(--serif); font-size:40px; line-height:44px; margin:6px 0 12px; }
.schritte h3 i{ font-style:italic; }
.schritte h3 b{ font-weight:400; text-transform:uppercase; letter-spacing:1px; }
.ablauf-bild{ background:var(--stone); padding:60px; }
.ablauf-bild .klebt{ position:sticky; top:110px; height:calc(100vh - 170px); min-height:520px; }
.ablauf-bild img{ width:100%; height:100%; object-fit:cover; }
@media (max-width: 900px){
  .ablauf-innen{ grid-template-columns:1fr; min-height:0; }
  .ablauf-bild{ order:-1; padding:0; }
  .ablauf-bild .klebt{ position:static; height:auto; min-height:0; aspect-ratio:3/2; }
  .ablauf-text{ padding:60px 28px; }
  .ablauf-text .lab, .ablauf-text .h-gross{ text-align:center; }
  .ablauf-text .h-gross{ margin-bottom:40px; }
  .schritte{ padding-left:28px; gap:38px; }
  .schritte li::before{ left:-33px; }
  .schritte h3{ font-size:30px; line-height:34px; }
}

/* Stimmen als Karussell: Desktop drei sichtbar, Handy eine, wischen oder Pfeile */
.karussell{ position:relative; }
.kband{ display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 56px) / 3); gap:28px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:4px; }
.kband::-webkit-scrollbar{ display:none; }
.stimme-karte{ margin:0; scroll-snap-align:start; background:var(--stone); display:flex; flex-direction:column; }
.sec.stone .stimme-karte{ background:#fff; }
.stimme-karte img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.stimme-karte blockquote{ margin:0; padding:26px 26px 10px; display:flex; flex-direction:column; gap:12px; flex:1; }
.stimme-karte q{ font-family:var(--serif); font-style:italic; font-size:23px; line-height:29px; quotes:"„" "“"; }
.stimme-karte p{ font-size:15px; line-height:22px; }
.stimme-karte figcaption{ padding:6px 26px 26px; font-size:12px; letter-spacing:1.8px; text-transform:uppercase; opacity:.8; }
.kpfeil{ position:absolute; top:calc(50% - 24px); width:48px; height:48px; border-radius:50%; border:1px solid var(--rule); background:#fff; color:var(--ink); font-family:var(--serif); font-size:30px; line-height:1; cursor:pointer; z-index:2; display:flex; align-items:center; justify-content:center; padding-bottom:4px; }
.kpfeil.zurueck{ left:-64px; } .kpfeil.weiter{ right:-64px; }
.kpfeil[disabled]{ opacity:.3; cursor:default; }
@media (max-width: 1260px){ .kpfeil.zurueck{ left:-12px; } .kpfeil.weiter{ right:-12px; } }
@media (max-width: 759px){ .kband{ grid-auto-columns:86%; gap:14px; } .kpfeil{ display:none; } }

/* Galerie im festen Raster: Reihenfolge Zeile für Zeile steuerbar (Farbverlauf, Schwarzweiß dazwischen) */
.mosaik.raster{ columns:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.mosaik.raster a{ margin:0; }
.mosaik.raster img{ aspect-ratio:4/5; object-fit:cover; height:auto; }
@media (max-width: 759px){ .mosaik.raster{ grid-template-columns:repeat(2,1fr); gap:8px; } }

/* Mosaik mit Quer- und Hochformaten: pro Reihe zwei Paare, alle Bilder einer Reihe gleich hoch */
.mosaik.reihen{ columns:auto; display:flex; flex-direction:column; gap:14px; }
.mosaik.reihen .reihe{ display:flex; gap:14px; }
.mosaik.reihen .paar{ display:flex; gap:14px; flex:var(--r) 1 14px; min-width:0; }
.mosaik.reihen a{ flex:var(--r) 1 0; min-width:0; margin:0; }
.mosaik.reihen img{ width:100%; height:auto; aspect-ratio:var(--r); object-fit:cover; display:block; }
@media (max-width: 759px){
  .mosaik.reihen, .mosaik.reihen .reihe, .mosaik.reihen .paar{ gap:8px; }
  .mosaik.reihen .reihe{ flex-direction:column; }
  .mosaik.reihen .paar{ flex:none; }
}

/* Große Galerie: je Reihe ein Quer- und ein Hochformat, gleich hoch, Seiten wechseln */
.mosaik.gross{ columns:auto; display:flex; flex-direction:column; gap:22px; }
.mosaik.gross .reihe{ display:flex; gap:22px; }
.mosaik.gross a{ flex:var(--r) 1 0; min-width:0; margin:0; }
.mosaik.gross img{ width:100%; height:auto; aspect-ratio:var(--r); object-fit:cover; display:block; }
@media (max-width: 759px){ .mosaik.gross, .mosaik.gross .reihe{ gap:10px; } .mosaik.gross .reihe{ flex-direction:column; } .mosaik.gross a{ flex:none; } }

/* Galerie wie julyandcan Stories: drei Spalten, gleiches Hochformat, groß mit viel Luft */
.mosaik.stories{ columns:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:34px; }
.mosaik.stories a{ margin:0; }
.mosaik.stories img{ width:100%; aspect-ratio:2/3; object-fit:cover; display:block; }
@media (max-width: 759px){ .mosaik.stories{ grid-template-columns:1fr; gap:14px; } .mosaik.stories img{ aspect-ratio:4/5; } }

/* Editor: Bildausschnitt und Zoom aus dem Bearbeiten-Modus (--origin, --zoom); Rahmen schneidet das vergrößerte Bild ab */
img[data-bild]{ transform:scale(var(--zoom,1)); transform-origin:var(--origin,50% 50%); }
.rahmen{ overflow:hidden; }
span.rahmen{ display:block; }
.kachel:hover .img img[data-bild]{ transform:scale(calc(var(--zoom,1) * 1.04)); }
.hero.dunkel .bg::after{ pointer-events:none; }
/* Galerie mit festen Spalten (Familie): Reihenfolge je Spalte bleibt, wie sie ist */
.galerie-spalten{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start; }
.galerie-spalten .spalte{ display:flex; flex-direction:column; gap:18px; }
.galerie-spalten img{ width:100%; display:block; }
@media (max-width: 759px){ .galerie-spalten{ grid-template-columns:1fr 1fr; gap:10px; } .galerie-spalten .spalte{ gap:10px; } .galerie-spalten .spalte:last-child{ grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; } }
/* Mittlere Spalte endet auf gleicher Höhe wie die anderen: sie zählt nicht zur Zeilenhöhe, das letzte Bild füllt den Rest und wird unten beschnitten */
@media (min-width: 760px){
  .galerie-spalten{ align-items:stretch; }
  .galerie-spalten .spalte:nth-child(2){ height:0; min-height:100%; }
  .galerie-spalten .spalte:nth-child(2) > .rahmen:last-child{ flex:1 1 0; min-height:0; }
  .galerie-spalten .spalte:nth-child(2) > .rahmen:last-child img{ height:100%; object-fit:cover; object-position:50% 30%; }
}
/* Eigene Videos (selbst gehostet, laden erst beim Abspielen) */
.eigenvideo{ margin:0; }
.eigenvideo video{ width:100%; aspect-ratio:16/9; display:block; background:#000; object-fit:cover; }
.eigenvideo figcaption{ margin-top:12px; text-align:center; font-family:var(--serif); font-style:italic; font-size:20px; line-height:26px; }
/* Fotos-Seite: Galerie fast über die volle Breite (Vorbild niciweddingphotography.com), drei Spalten, Original-Seitenverhältnis */
.galerie-voll{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; width:calc(100vw - 10.6vw); margin-left:calc(50% - 50vw + 5.3vw); align-items:start; }
.galerie-voll .spalte{ display:flex; flex-direction:column; gap:32px; }
.galerie-voll a{ display:block; cursor:zoom-in; }
.galerie-voll img{ width:100%; height:auto; display:block; }
@media (max-width: 759px){ .galerie-voll{ grid-template-columns:1fr; gap:12px; width:auto; margin-left:0; } .galerie-voll .spalte{ gap:12px; } }
/* Instagram-Streifen: waagerecht scrollbar, Format 4:5, Pfeile am Desktop */
.streifen-rahmen{ position:relative; }
.ig-streifen{ display:grid; grid-auto-flow:column; grid-auto-columns:clamp(220px, 21vw, 300px); gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:0 5.3vw 6px; scrollbar-width:none; scroll-padding-left:5.3vw; }
.ig-streifen::-webkit-scrollbar{ display:none; }
.ig-streifen a{ scroll-snap-align:start; position:relative; display:block; overflow:hidden; }
.ig-streifen img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; transition:transform .5s ease; }
.ig-streifen a:hover img{ transform:scale(1.04); }
.ig-streifen a::after{ content:""; position:absolute; inset:0; background:rgba(61,55,51,0); transition:background .3s ease; }
.ig-streifen a:hover::after{ background:rgba(61,55,51,.18); }
.streifen-rahmen .kpfeil.zurueck{ left:2vw; } .streifen-rahmen .kpfeil.weiter{ right:2vw; }
.ig-abschnitt .btnreihe{ margin-top:38px; }
.ig-knopf{ gap:10px; }
.ig-knopf svg{ width:18px; height:18px; fill:currentColor; }
@media (max-width: 759px){ .ig-streifen{ grid-auto-columns:62%; gap:10px; padding:0 28px 6px; scroll-padding-left:28px; } .streifen-rahmen .kpfeil{ display:none; } }
@media (max-width: 759px){ .ig-abschnitt .h-mittel{ font-size:24px; line-height:30px; letter-spacing:.5px; overflow-wrap:anywhere; } }
html.mb-aktiv:not(.mb-vorschau) .ig-streifen a::after{ pointer-events:none; }


/* Vimeo: Vorschaubild im echten Filmformat, eigener Play-Knopf, keine Vimeo-Leiste bis zum Start */
.video.vimeo{ background:#1c1916 center/cover no-repeat; cursor:pointer; }
.video.vimeo::before{ background:rgba(0,0,0,.12); transition:background .3s ease; }
.video.vimeo:hover::before{ background:rgba(0,0,0,.22); }
.video.vimeo .play{ transition:transform .3s ease; }
.video.vimeo:hover .play{ transform:scale(1.06); }
.video.vimeo.laeuft{ cursor:auto; }
.video.vimeo.laeuft::before{ display:none; }

/* Anfrageformular: Pflichtfeld-Hinweise, Honigtopf, Sendefehler */
.formular [hidden]{ display:none !important; }
.formular .fehlertext{ display:none; color:#9b2c1f; font-size:13px; letter-spacing:0; text-transform:none; }
.formular .feld-fehler .fehlertext{ display:block; }
.formular .feld-fehler input, .formular .feld-fehler select{ border-color:#9b2c1f; }
.formular .honig{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.formular .sendefehler{ background:#f6e7e3; padding:14px 16px; font-size:15px; }
.formular button:disabled{ opacity:.6; cursor:wait; }
.formular input:disabled{ opacity:.45; }

/* Ergebnisseiten (danke, belegt, sonntag) */
.ergebnis{ min-height:62vh; display:flex; align-items:center; text-align:center; }
.ergebnis .wrap{ max-width:820px; }
.ergebnis p{ max-width:560px; margin-left:auto; margin-right:auto; }
.ergebnis p + p{ margin-top:14px; }
.ergebnis .btnreihe{ justify-content:center; }
.kollegen{ display:grid; gap:16px; margin:40px auto 0; max-width:640px; text-align:left; }
.kollege{ background:var(--stone, #efebe4); padding:24px 26px; display:flex; flex-direction:column; gap:8px; }
.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; }

/* Gründe wie auf der Landingpage: dunkler Abschnitt, Kärtchen im Wechsel links und rechts */
.dunkel-sec{ background:var(--ink); color:#fff; }
.dunkel-sec .lab{ color:#fff; opacity:.75; }
.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; }
.grund .gnr{ font-family:var(--serif); font-style:italic; font-size:54px; line-height:48px; opacity:.35; margin:0; }
.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; }
@media (max-width:759px){
  .grund{ width:88%; padding:26px 24px 24px; }
  .gruppe{ gap:28px; }
  .grund h3{ font-size:23px; line-height:27px; }
}
/* Bild über die volle Breite zwischen zwei Abschnitten */
.bildband .rahmen{ height:clamp(260px, 52vw, 640px); }
.bildband img{ width:100%; height:100%; object-fit:cover; object-position:50% 55%; display:block; }