/* Bausteine für peerdicken.com und hochzeitsfotograf-daenemark.de: Einstieg, Bereiche, Pakete, Ablauf, Bewertungen, Hochzeitskarten. Startseite = Entwurf B „Angebot zuerst“ (15.10.2026) */

.oben{border-bottom:1px solid var(--linie)}
.einstieg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center;padding-block:clamp(32px,4vw,64px)}
.einstieg .text{display:grid;gap:24px}
/* Bild füllt seine Spalte bis zum rechten Rand und passt in die Fensterhöhe */
.einstieg figure{width:100%;height:clamp(440px,calc(100vh - 300px),880px);overflow:hidden;border-radius:var(--ecke)}
.einstieg figure img{width:100%;height:100%;object-fit:cover}
.fakten{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;color:var(--leise);padding:0;margin:0;list-style:none}
.fakten li::before{content:"✓";color:var(--gold);font-weight:700;margin-right:7px}

/* Vier Bereiche */
.bereiche{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.bereich{background:var(--karte);border:1px solid var(--linie);border-radius:var(--ecke);overflow:hidden;display:grid;grid-template-rows:auto 1fr;text-decoration:none;transition:box-shadow .3s,transform .3s;scroll-margin-top:24px}
.bereich:hover{box-shadow:0 18px 40px -22px rgba(26,22,15,.35);transform:translateY(-2px)}
.bereich figure{aspect-ratio:4/3;overflow:hidden}
.bereich figure img{width:100%;height:100%;object-fit:cover}
.bereich .inhalt{padding:20px 20px 22px;display:grid;gap:10px;align-content:start}
.bereich h3{font-size:28px}
.bereich p{font-size:.92em;color:var(--leise);line-height:1.5}
.bereich .zeile{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid var(--linie)}
.bereich .weiter{font-size:13.5px;font-weight:600;color:var(--gold)}

/* Pakete Hochzeit */
.pakete{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.paket{border:1px solid var(--linie);border-radius:var(--ecke);padding:26px 24px;display:grid;gap:14px;align-content:start;background:var(--papier)}
.paket--empfohlen{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset;background:var(--karte)}
.paket .marker{justify-self:start;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:var(--gold-hell);color:#5b4420;border-radius:999px;padding:4px 10px}
.paket h3{font-size:27px}
.paket .preis{font-size:22px}
.paket ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:.95em}
.paket li{padding-left:22px;position:relative}
.paket li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:5px;border-left:1.6px solid var(--gold);border-bottom:1.6px solid var(--gold);transform:rotate(-45deg)}
.paket .knopf{justify-self:start;margin-top:6px}

/* Ablauf */
.schritte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);padding:0;margin:0;list-style:none}
.schritt{display:grid;gap:10px;align-content:start;border-top:1px solid var(--tinte);padding-top:18px}
.schritt b{font-family:var(--titel);font-size:44px;font-weight:500;color:var(--gold);line-height:1}
.schritt h3{font-size:26px}
.schritt p{color:var(--leise)}

/* Bewertungen */
.bewertungen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.bewertung{background:var(--karte);border:1px solid var(--linie);border-radius:var(--ecke);padding:24px;display:grid;gap:14px;align-content:start}
.bewertung blockquote{margin:0}

/* Über mich */
.ich{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:28px;align-items:center;border:1px solid var(--linie);border-radius:var(--ecke);padding:22px;background:var(--karte);scroll-margin-top:24px}
.ich img{width:132px;height:132px;object-fit:cover;border-radius:50%}
.ich p{color:var(--leise);max-width:40em}
.ich h2{font-size:30px;font-weight:600;margin-bottom:6px}
.ich__knopf{display:grid;gap:8px;justify-items:center}
.ich__knopf small{font-size:13px;color:var(--leise)}

@media (max-width:980px){
  .bereiche{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .einstieg{grid-template-columns:1fr}
  .einstieg figure{height:auto;aspect-ratio:4/3}
  .pakete,.schritte,.bewertungen{grid-template-columns:1fr}
  .ich{grid-template-columns:auto minmax(0,1fr)}
  .ich .knopf,.ich__knopf{grid-column:1/-1;justify-self:start;justify-items:start}
  .ich img{width:84px;height:84px}
}
@media (max-width:560px){
  .bereiche{grid-template-columns:1fr}
}

/* ---------- Unterseiten (Hochzeit, Event, Porträt, Team) ---------- */
.menue a[aria-current="page"]{color:var(--tinte);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:6px}
.einstieg--quer figure{height:auto;aspect-ratio:4/3}
.einstieg .preis{font-size:16px}
.pakete--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pakete--4{grid-template-columns:repeat(2,minmax(0,1fr))}
.paket .kurz{color:var(--leise);font-size:.95em;line-height:1.5}
.paket .zeile{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.preishinweis{margin-top:18px;font-size:13.5px;color:var(--leise)}

.zusaetze{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px;margin:0;padding:0;list-style:none}
.zusatz{background:var(--karte);border:1px solid var(--linie);border-radius:var(--ecke);padding:18px 20px;display:grid;gap:6px;align-content:start}
.zusatz strong{font-weight:600}
.zusatz span{color:var(--leise);font-size:.93em;line-height:1.5}
.zusatz .preis{margin-top:4px}
.zusatz--bild{overflow:hidden;padding-top:0}
.zusatz--bild img{width:calc(100% + 40px);max-width:none;margin:0 -20px 10px;aspect-ratio:4/3;object-fit:cover}

.bilder{columns:3 280px;column-gap:14px}
.bilder img{width:100%;margin-bottom:14px;border-radius:4px;break-inside:avoid}

.wissen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:clamp(20px,3vw,40px);margin:0;padding:0;list-style:none}
.wissen li{display:grid;gap:8px;align-content:start;border-top:1px solid var(--linie);padding-top:16px}
.wissen h3{font-size:24px}
.wissen p{color:var(--leise)}

.schluss{text-align:center}
.schluss .innen{display:grid;gap:20px;justify-items:center}
.schluss p{color:var(--leise);max-width:32em}

@media (max-width:820px){
  .pakete--2,.pakete--4{grid-template-columns:1fr}
}
@media (max-width:560px){
  .bilder{columns:2;column-gap:10px}
  .bilder img{margin-bottom:10px}
}

/* ---------- Über mich ---------- */
.geschichten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,28px)}
.geschichte{display:grid;gap:10px;align-content:start;text-decoration:none}
.geschichte figure{aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:var(--gold-hell)}
.geschichte figure img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.geschichte:hover figure img{transform:scale(1.025)}
.geschichte .ohne-bild{display:grid;place-items:center}
.geschichte .ohne-bild span{font-family:var(--titel);font-style:italic;font-size:44px;color:var(--gold)}
.geschichte .meta{font-size:13px;color:var(--leise)}
.geschichte h3{font-size:clamp(22px,2vw,26px)}
.geschichte:hover h3{color:var(--gold)}
.mehr{font-size:14.5px;font-weight:600;text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:2px}

/* Fließtext (Über mich) */
.beitrag__text{max-width:680px;display:grid;gap:18px;font-size:17px;line-height:1.7}
.beitrag__text h2,.beitrag__text h3{font-size:clamp(26px,2.6vw,32px);font-weight:600;margin-top:18px}
.beitrag__text ul,.beitrag__text ol{margin:0;padding-left:22px;display:grid;gap:6px}
.beitrag__text a{text-decoration-color:var(--gold);text-underline-offset:3px}
.zweispaltig{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:start}
.kopf-links{display:grid;gap:10px;position:sticky;top:24px}
.steckbrief{margin:0;display:grid}
.steckbrief div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:16px;padding-block:12px;border-top:1px solid var(--linie)}
.steckbrief dt{font-size:13.5px;font-weight:600;color:var(--leise)}
.steckbrief dd{margin:0}
.unterschrift{width:170px;opacity:.85}
.wissen h3 a{text-decoration:none}
.wissen h3 a:hover{color:var(--gold)}

@media (max-width:820px){
  .geschichten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zweispaltig{grid-template-columns:1fr}
  .kopf-links{position:static}
}
@media (max-width:560px){
  .geschichten{grid-template-columns:1fr}
  .steckbrief div{grid-template-columns:1fr;gap:2px}
}
.kopf-links h2{hyphens:auto;overflow-wrap:break-word}

/* ---------- Hochzeitskarten (erzeugt von werkzeug/hochzeiten.py) ---------- */
.hochzeiten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3vw,44px) clamp(18px,2.4vw,32px)}
.hochzeit{display:grid;gap:16px;align-content:start;scroll-margin-top:24px}
.hochzeit__bilder{position:relative;display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:6px;aspect-ratio:3/2;padding:0;border:0;background:none;cursor:zoom-in;border-radius:4px;overflow:hidden}
.hochzeit__bilder img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.hochzeit__bilder img:first-child{grid-row:span 2}
.hochzeit__bilder:hover img{transform:scale(1.02)}
.hochzeit__bilder:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.hochzeit__zahl{position:absolute;right:10px;bottom:10px;font-size:12.5px;font-weight:600;background:rgba(250,249,247,.92);color:var(--tinte);border-radius:999px;padding:5px 11px}
.hochzeit__text{display:grid;gap:6px;align-content:start}
.hochzeit .meta{font-size:13px;color:var(--leise)}
.hochzeit h3{font-size:clamp(26px,2.4vw,32px)}
.hochzeit p{color:var(--leise);max-width:36em}
.hochzeit blockquote{margin:6px 0 0;display:grid;gap:8px}
.hochzeit blockquote p{font-family:var(--titel);font-size:21px;line-height:1.35;color:var(--tinte)}
.hochzeit blockquote footer{font-size:13.5px;color:var(--leise)}
.hochzeit blockquote footer::before{content:"— "}

.galerie{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#111;color:#f3f1ec}
.galerie::backdrop{background:#111}
.galerie[open]{display:grid;grid-template-rows:auto minmax(0,1fr)}
.galerie__kopf{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px max(16px,env(safe-area-inset-left)) 12px 20px;font-size:14px}
.galerie__zu{border:0;background:none;color:inherit;font-size:22px;width:44px;height:44px;cursor:pointer}
.galerie__band{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.galerie__band::-webkit-scrollbar{display:none}
.galerie__band img{flex:0 0 100%;width:100%;height:100%;object-fit:contain;scroll-snap-align:center;padding:0 0 20px}
.galerie__pfeil{position:absolute;top:50%;transform:translateY(-50%);border:0;background:rgba(0,0,0,.35);color:#fff;font-size:34px;line-height:1;width:48px;height:64px;cursor:pointer;border-radius:4px}
.galerie__pfeil--zurueck{left:12px}
.galerie__pfeil--vor{right:12px}

@media (min-width:1500px){
  .hochzeiten{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:820px){
  .hochzeiten{grid-template-columns:1fr}
}
@media (hover:none){
  .galerie__pfeil{display:none}
}

/* ---------- Impressum und Datenschutz ---------- */
.recht{max-width:calc(46em + 2*var(--rand));margin-inline:0;display:grid;gap:14px;padding-bottom:24px}
.recht h1{font-size:clamp(40px,5vw,60px);margin-bottom:8px}
.recht h2{font-family:var(--text);font-size:15px;font-weight:600;letter-spacing:.02em;margin-top:18px}
.recht p{color:var(--leise);line-height:1.65}
.recht a{text-decoration-color:var(--gold);text-underline-offset:3px}
.recht__stand{font-size:13.5px}