/* 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 img.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; }
}