/* hochzeitsfotograf-daenemark.de – nur was über die gemeinsamen Bausteine hinausgeht */

.ratgeber{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,44px) clamp(28px,4vw,64px);margin:0;padding:0;list-style:none;counter-reset:r}
.ratgeber li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 18px;align-content:start;counter-increment:r}
.ratgeber li::before{content:counter(r);grid-row:span 2;font-family:var(--titel);font-size:40px;line-height:1;color:var(--gold)}
.ratgeber h3{font-size:25px}
.ratgeber p{color:var(--leise)}
.ratgeber-hinweis{margin-top:clamp(28px,3vw,40px);font-size:14px;color:var(--leise);max-width:46em}

.orte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px clamp(24px,3vw,40px);margin:0;padding:0;list-style:none}
.orte li{display:grid;gap:6px;align-content:start;border-top:1px solid var(--linie);padding-top:14px}
.orte h3{font-size:24px}
.orte p{color:var(--leise);font-size:.95em;line-height:1.5}

.fragen{display:grid;max-width:820px}
.fragen details{border-top:1px solid var(--linie)}
.fragen details:last-child{border-bottom:1px solid var(--linie)}
.fragen summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding-block:18px;font-weight:500}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";color:var(--gold);font-size:20px;line-height:1;transition:transform .2s}
.fragen details[open] summary::after{transform:rotate(45deg)}
.fragen details p{color:var(--leise);padding-bottom:18px;max-width:40em}

@media (max-width:820px){
  .ratgeber{grid-template-columns:1fr}
  .orte{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .orte{grid-template-columns:1fr}
}
.schritte--vier{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.schritte--vier{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.schritte--vier{grid-template-columns:1fr}}

/*
  Postkarte (seit 19.10.2026)
  Fotos als Abzüge mit weißem Rand, ein Stempel, Ortsangaben wie auf der Rückseite einer Karte.
  Kühles Hellgrau statt Creme, Cormorant gerade statt kursiv-golden, eckige Knöpfe, ein Stempelrot.
*/
:root{
  --papier:#e6eaec;
  --karte:#ffffff;
  --tinte:#1b1f22;
  --leise:#4a5258;
  --gold:#b0352a;
  --gold-hell:#f4e4e0;
  --linie:rgba(27,31,34,.14);
  --ecke:0px;
  --schrift-karte:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --schatten:0 14px 30px rgba(20,30,40,.16),0 2px 6px rgba(20,30,40,.08);
}
body{background:var(--papier)}
.oben{background:var(--papier)}
.abschnitt--weiss{background:#eef1f2}

/* Titel gerade, die Betonung leiser statt golden-kursiv */
h1 em,h2 em{font-style:normal;color:var(--leise)}
.oberzeile{font-family:var(--schrift-karte);font-weight:500;letter-spacing:.08em;font-size:11.5px}

/* Knöpfe eckig wie ein Etikett */
.knopf{border-radius:0;letter-spacing:.04em}

/* Einstieg: zwei Abzüge und ein Stempel statt eines gerahmten Fotos */
.c-karten{position:relative;height:clamp(460px,calc(100vh - 260px),760px)}
.einstieg .abzug{position:absolute;margin:0;overflow:visible;border-radius:0;background:#fff;padding:12px 12px 44px;box-shadow:var(--schatten)}
.abzug img{display:block;width:100%;height:100%;object-fit:cover}
.abzug figcaption{position:absolute;left:14px;bottom:15px;font:500 11.5px/1 var(--schrift-karte);letter-spacing:.08em;text-transform:uppercase;color:#6b737a}
.einstieg .abzug--gross{width:62%;height:84%;left:6%;top:3%;transform:rotate(-2.5deg)}
.abzug--gross img{object-position:center 62%}
.einstieg .abzug--klein{width:46%;height:36%;right:2%;bottom:2%;transform:rotate(3.5deg)}
.c-stempel{position:absolute;right:8%;top:10%;z-index:2;width:min(150px,24%);aspect-ratio:1;border:3px solid var(--gold);border-radius:50%;color:var(--gold);display:grid;place-items:center;text-align:center;font:700 13px/1.25 var(--text);letter-spacing:.12em;text-transform:uppercase;transform:rotate(12deg);opacity:.85;box-shadow:inset 0 0 0 5px var(--papier),inset 0 0 0 6px var(--gold)}

/* Hochzeiten als Abzüge, abwechselnd leicht gedreht */
.hochzeit__bilder{background:#fff;border-radius:0;box-shadow:0 0 0 10px #fff,0 16px 34px rgba(20,30,40,.18),0 3px 8px rgba(20,30,40,.1);overflow:hidden;transition:transform .4s ease}
.hochzeiten{row-gap:clamp(48px,5vw,72px);column-gap:clamp(36px,4vw,56px)}
.hochzeit{gap:24px}
.hochzeit__bilder img{border-radius:0}
.hochzeit:nth-child(odd) .hochzeit__bilder{transform:rotate(-.8deg)}
.hochzeit:nth-child(even) .hochzeit__bilder{transform:rotate(.8deg)}
.hochzeit .hochzeit__bilder:hover{transform:rotate(0) translateY(-3px)}
.hochzeit__bilder:hover img{transform:none}
.hochzeit__zahl{border-radius:0;font-family:var(--schrift-karte);font-weight:500;letter-spacing:.06em;background:#fff}
.hochzeit .meta{font-family:var(--schrift-karte);letter-spacing:.08em;text-transform:uppercase;font-size:11.5px}

/* Pakete wie Karteikarten */
.paket{background:var(--karte);border-radius:0}
.paket--empfohlen{border-color:var(--tinte);box-shadow:var(--schatten)}
.paket .marker{border-radius:0;background:var(--gold);color:#fff;font-family:var(--schrift-karte);font-weight:500}
.paket li::before{border-color:var(--tinte)}
.zusatz,.zusatz img{border-radius:0}

/* Zahlen in Ablauf und Ratgeber im Stempelrot, Orte mit Kartenschrift */
.ratgeber li::before,.schritt b{color:var(--gold)}
.orte h3{font-size:22px}
.fragen summary::after{color:var(--gold)}

/* Über mich: flächig auf weißem Band, das Foto als Abzug, der Knopf unter dem Text */
.abschnitt--weiss:has(.ich){background:#fff}
.ich{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"bild text" "bild knopf";column-gap:clamp(32px,6vw,96px);row-gap:28px;align-items:end;border:0;border-radius:0;padding:0;background:none}
.ich img{grid-area:bild;align-self:center;width:100%;height:auto;aspect-ratio:4/3;border-radius:0;background:#fff;padding:12px 12px 40px;box-shadow:var(--schatten);transform:rotate(-1.5deg)}
.ich > div:not(.ich__knopf){grid-area:text;align-self:end}
.ich h2{font-size:clamp(32px,3.4vw,46px);font-weight:500;margin-bottom:14px}
.ich p{font-size:18px;line-height:1.65;max-width:34em}
.ich__knopf{grid-area:knopf;align-self:start;justify-items:start}
@media (max-width:820px){
  .ich{grid-template-columns:1fr;grid-template-areas:"bild" "text" "knopf"}
  .ich img{width:100%;height:auto;max-width:520px}
}

@media (prefers-reduced-motion:reduce){.hochzeit__bilder{transition:none}}
@media (max-width:820px){
  .c-karten{height:auto;aspect-ratio:1/1.1}
  .einstieg .abzug{padding:8px 8px 34px}
  .abzug figcaption{left:10px;bottom:11px;font-size:10px}
  .c-stempel{font-size:10px;border-width:2px}
}

/* Logo groß, wie ein Siegel auf der Karte */
.leiste{align-items:flex-start}
.marke img{width:176px;height:176px;filter:drop-shadow(0 6px 14px rgba(20,30,40,.18))}
@media (max-width:820px){.marke img{width:112px;height:112px}}

/* Ortsseite mit nur einer Hochzeit: die Karte halb so breit */
#hochzeiten .hochzeiten:has(> .hochzeit:only-child){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}

/* Weitere Standesämter: Links zwischen den Ortsseiten */
.weitere-orte{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.weitere-orte a{display:inline-block;padding:9px 14px;border:1px solid var(--linie);background:var(--karte);text-decoration:none;color:var(--tinte);font-family:var(--titel);font-size:20px}
.weitere-orte a:hover{border-color:var(--tinte)}
.orte h3 a{color:inherit;text-decoration-thickness:1px;text-underline-offset:4px}