/* Design „Magazin" — Richtung 3 von 3 fuer fertige Hochzeitsseiten.

   Diese Datei ist die Vorlage, die Lukas am 11.09.2026 vorgegeben hat
   (Beispiel3.html), Zeichen fuer Zeichen uebernommen. Herausgeloest wurden nur
   die vier eingebetteten Schriften; sie stehen jetzt in schriften.css und
   im gemeinsamen Ordner schriften/.

   NICHT von Hand umschreiben. Kommt eine neue Fassung der Vorlage, wird
   diese Datei ersetzt, nicht nachgebessert — auch nicht um die Regeln
   gekuerzt, die bei dieser Koerperklasse gar nicht greifen. Was das
   Fundament daneben verstellt und wie die Farbwelt hereinkommt, steht in
   bruecke.css.

   Die Gestaltung haengt an der Koerperklasse „nachtblau"
   (siehe DESIGN_KOERPERKLASSE in scripts/hochzeit_vorlage.py). */

*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:#f8f9f4;color:#263124;font:16px/1.7 'Schibsted Grotesk',Arial,sans-serif;-webkit-font-smoothing:antialiased}h1,h2,h3,p,figure{margin:0}h1,h2,h3{line-height:1.08;letter-spacing:-.05em;font-weight:600}h1{font-size:clamp(60px,8vw,112px)}h2{font-size:clamp(34px,4.2vw,56px);margin-bottom:25px}h3{font-size:21px;letter-spacing:-.035em}p+p{margin-top:16px}a{color:inherit;text-underline-offset:4px}img{width:100%;display:block;object-fit:cover;height:auto}.huelle{width:min(1080px,calc(100% - 80px));margin:auto}.huelle--schmal{max-width:660px}.abschnitt{padding:85px 0}.abschnitt--flaeche{background:#e9eee3;margin:20px auto;border-radius:22px;max-width:1160px}.abschnitt--flaeche>.huelle{width:calc(100% - 80px)}.augenbraue,.kopf-vor{font-size:12px;color:#53664a;text-transform:uppercase;letter-spacing:.13em;margin-bottom:22px;font-weight:500}.mitte{text-align:center}.mitte>p{max-width:650px;margin-inline:auto}.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 23px;border-radius:30px;background:#293923;color:#fff;text-decoration:none;font-size:14px;line-height:1.3}.knopf:hover{background:#465c3c}.knopf--leer{background:transparent;border:1px solid #9baa91;color:#293923}.knopf--leer:hover{background:#e2e9dc}.kopfleiste{position:sticky;top:12px;z-index:10;width:min(1160px,calc(100% - 40px));margin:16px auto 0;padding:9px 18px 9px 25px;display:flex;align-items:center;gap:30px;background:#fcfdf9;border:1px solid #dce2d5;border-radius:40px}.kopfleiste a{text-decoration:none}.kopfleiste-marke{font-size:15px;font-weight:600;letter-spacing:-.04em}.kopfleiste-links{display:flex;gap:24px;margin-left:auto;font-size:13px}.kopfleiste-links a{display:flex;align-items:center;min-height:44px}.kopfleiste>.knopf{min-height:44px;font-size:12px;padding-inline:22px}.kopf{padding:60px 0 0}.kopf-und{color:#819572;font-weight:400}.kopf-zeile{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-top:26px;margin-bottom:32px}.kopf-datum{font-size:16px;font-weight:500}.kopf-ort{display:block;color:#66725e;font-size:14px;font-weight:400;margin-top:4px}.kopf-bild{overflow:hidden;border-radius:15px}.kopf-bild img{height:440px}.kopf-countdown{padding-top:24px}.countdown{display:flex;gap:0;border-bottom:1px solid #d4dccb;padding-bottom:24px}.countdown-teil{flex:1;display:flex;align-items:baseline;gap:12px;border-right:1px solid #d4dccb;padding-left:25px}.countdown-teil:first-child{padding-left:0}.countdown-teil:last-child{border:0}.countdown-zahl{font-size:34px;font-weight:500;letter-spacing:-.05em}.countdown-wort{font-size:12px;color:#5d6d52}.raster{display:grid;gap:60px;align-items:center}.raster--seite,.raster--2{grid-template-columns:1fr 1fr}.geschichte-text p{font-size:16px;color:#53604b}.geschichte-bild img{height:370px;border-radius:15px}.raster--auto{grid-template-columns:repeat(3,1fr);gap:24px;margin-top:35px;align-items:stretch}.karte{padding:25px 0;border-top:1px solid #abbba0}.karte h3{margin-bottom:12px}.karte p{font-size:14px;color:#526249}.karte a{display:inline-flex;align-items:center;min-height:44px}.karte p+p{margin-top:0}.ablauf{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin:35px 0 0;padding:0}.ablauf-punkt{padding:26px;background:#f8faf5;border-radius:10px}.ablauf-zeit{font-size:22px;color:#536e43;margin-bottom:20px;letter-spacing:-.04em}.ablauf-inhalt h3{font-size:19px;margin-bottom:10px}.ablauf-inhalt p{font-size:14px;color:#59664f}.location-adresse{font-size:19px;margin-bottom:25px}.location-karte{height:370px;border-radius:14px}.location-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:23px}.location-links .knopf{font-size:12px}#location .raster>div>p:not(.location-adresse){font-size:15px}#location .augenbraue{margin-bottom:17px}.faq-punkt{border-bottom:1px solid #bbc8b1;padding:10px 0}.faq-punkt summary{list-style:none;cursor:pointer;min-height:52px;display:flex;align-items:center;justify-content:space-between;font-size:16px;gap:20px}.faq-punkt summary:after{content:'+';font-size:22px;color:#647b55}.faq-punkt[open] summary:after{content:'−'}.faq-antwort{font-size:15px;color:#58684f;padding:0 25px 20px 0}.galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:35px}.galerie img{height:240px;border-radius:9px}.galerie-bild:first-child{grid-column:span 2}.galerie-bild:last-child{grid-column:span 2}.fuss{background:#293923;color:#f2f5ed;padding:60px 0 25px;margin:30px auto 0}.fuss-namen{font-size:40px;letter-spacing:-.05em;font-weight:600}.fuss-datum{font-size:14px;color:#d1dcc8}.fuss-links{display:flex;justify-content:center;gap:25px;margin-top:30px;font-size:13px}.fuss-links a{min-height:44px;display:flex;align-items:center}.fuss-quelle{font-size:12px;color:#ced9c4;margin-top:20px}.demohinweis{font-size:11px;text-align:center;max-width:750px;margin:35px auto 0;padding:0 20px;color:#ced9c4}.demoform{margin-top:28px}.demoform>summary{background:#293923;color:white;border-radius:30px;display:inline-flex;align-items:center;min-height:48px;padding:12px 25px;font-size:15px;cursor:pointer;list-style:none}.forminner{text-align:left;background:#f8faf5;border:1px solid #bdcbb2;border-radius:15px;padding:25px;margin-top:25px}.forminner label{display:block;margin-top:18px;font-size:15px}.forminner input:not([type=radio]),textarea{display:block;width:100%;background:white;border:1px solid #7d906f;border-radius:6px;padding:13px;margin-top:7px;font:16px/1.4 inherit;font-family:inherit;font-size:16px}.forminner fieldset{border:0;padding:20px 0 0;margin:0}.radio{display:flex!important;align-items:center;gap:12px;min-height:44px;margin-top:5px!important}.radio input{width:20px;height:20px}.demohint,.feld--hinweis{font-size:12px;color:#5b6a52;margin-top:20px}.sprunglink{position:absolute;left:-9999px}.sprunglink:focus{left:20px;top:10px;z-index:50;background:white;padding:15px}a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #4f693e;outline-offset:4px}.zier{display:none}@media(max-width:760px){.huelle{width:calc(100% - 40px)}.kopfleiste{top:8px;width:calc(100% - 24px);margin-top:10px;padding:7px 10px 7px 17px;gap:10px}.kopfleiste-links{display:none}.kopfleiste>.knopf{margin-left:auto}.kopfleiste-marke{font-size:14px}.kopf{padding-top:35px}h1{font-size:58px;letter-spacing:-.06em}h2{font-size:35px}.kopf-vor,.augenbraue{font-size:11px;margin-bottom:17px}.kopf-zeile{gap:15px;align-items:flex-start;margin:22px 0}.kopf-datum{font-size:14px}.kopf-ort{font-size:13px}.kopf-zeile .knopf{font-size:12px;padding:13px 17px}.kopf-bild img{height:280px}.countdown-teil{padding-left:14px;gap:5px;flex-direction:column}.countdown-zahl{font-size:30px}.countdown-wort{font-size:11px}.abschnitt{padding:52px 0}.abschnitt--flaeche{margin:10px 12px;border-radius:17px}.abschnitt--flaeche>.huelle{width:calc(100% - 36px)}.raster--seite,.raster--2,.raster--auto{grid-template-columns:1fr;gap:28px}.geschichte-bild img{height:260px}.ablauf{grid-template-columns:1fr;gap:12px;margin-top:28px}.ablauf-punkt{display:grid;grid-template-columns:60px 1fr;gap:15px;padding:20px}.ablauf-zeit{font-size:19px;margin:0}.ablauf-inhalt h3{font-size:19px}.location-karte{height:260px}.karte{padding:20px 0}.raster--auto{gap:5px;margin-top:25px}.galerie{grid-template-columns:1fr 1fr;gap:10px}.galerie img{height:190px}.galerie-bild:first-child,.galerie-bild:last-child{grid-column:span 2}.galerie-bild:first-child img,.galerie-bild:last-child img{height:240px}.fuss{padding-top:45px}.forminner{padding:20px}.faq-punkt summary{font-size:16px}.location-links{gap:10px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}.klar #geschichte{padding-top:105px}.klar .kopf h1{font-weight:650}.klar .kopf-bild img{object-position:center 57%}.klar #dresscode,.klar #geschenke{border-top:1px solid #d4dccb;margin-top:25px}.klar #rsvp h2{font-size:clamp(40px,5vw,68px)}@media(max-width:760px){.klar #geschichte{padding-top:55px}}body{background:var(--paper);color:var(--ink)}.kopfleiste{background:var(--paper);border-color:var(--line);border-radius:0;position:relative;top:0;padding:14px 0;width:min(1160px,calc(100% - 64px));margin-top:10px;border-width:0 0 1px;gap:30px}.kopfleiste>.knopf{color:var(--on);background:var(--ink)}.kopfleiste-marke{font-size:17px}.kopfleiste-links{font-size:12px}.knopf{background:var(--ink);color:var(--on);border-radius:3px;gap:25px}.knopf:hover{background:var(--accent);color:var(--on)}.knopf--leer{background:transparent;color:var(--ink);border-color:var(--line)}.knopf--leer:hover{background:var(--surface);color:var(--ink)}.huelle{max-width:1120px;width:calc(100% - 80px)}.kopf{padding-top:0}.kopf-vor,.augenbraue{color:var(--sub);font-size:11px;letter-spacing:.14em}.newfacts{display:grid;grid-template-columns:1.2fr 1fr .6fr;gap:20px;border-top:1px solid var(--line);padding-top:19px}.newfacts span{font-size:9px;letter-spacing:.13em;color:var(--sub)}.newfacts p{font-size:14px;margin-top:7px}.caption{display:flex;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:.03em;color:var(--sub);margin-top:13px}.abschnitt{padding-block:88px}.abschnitt--flaeche{background:var(--surface);border-radius:0;max-width:1200px;margin:0 auto}.abschnitt--flaeche>.huelle{max-width:1120px}.geschichte-text p,.ablauf-inhalt p,.karte p,.faq-antwort,.demohint,.feld--hinweis{color:var(--sub)}.geschichte-bild img,.location-karte{border-radius:0}.ablauf-punkt{background:var(--paper);border-radius:0}.ablauf-zeit{color:var(--accent)}.karte{border-color:var(--line)}.countdown{display:none}.fuss{background:var(--ink);color:var(--on)}.fuss-datum,.fuss-quelle,.demohinweis{color:var(--on)}.fuss-links{color:var(--on)}.faq-punkt{border-color:var(--line)}.faq-punkt summary:after{color:var(--sub)}.demoform>summary{background:var(--ink);color:var(--on);border-radius:3px;min-height:52px}.forminner{background:var(--paper);border-color:var(--line);border-radius:3px}.forminner input:not([type=radio]),textarea{border-color:var(--sub)}a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline-color:var(--accent)}#dresscode .huelle,#geschenke .huelle{max-width:660px}#dresscode h2,#geschenke h2{font-size:44px}.galerie img{border-radius:0}#rsvp{padding-block:80px}#rsvp h2{font-size:clamp(48px,5.6vw,78px)}.demoform .forminner{text-align:left}.newhero .knopf{font-size:13px}.topnote{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--sub)}@media(max-width:760px){.kopfleiste{width:calc(100% - 36px);padding:10px 0;margin-top:3px;position:sticky;top:0;gap:12px}.kopfleiste>.knopf{font-size:12px}.kopfleiste-marke{font-size:15px}.huelle{width:calc(100% - 40px)}.abschnitt{padding-block:52px}.abschnitt--flaeche{margin-inline:12px;border-radius:5px}.abschnitt--flaeche>.huelle{width:calc(100% - 36px)}.newfacts{gap:16px;grid-template-columns:1fr 1fr;padding-top:17px}.newfacts>div:last-child{display:none}.newfacts p{font-size:12px}.newfacts span{font-size:9px}.caption{font-size:9px}.caption span:last-child{display:none}#dresscode h2,#geschenke h2{font-size:35px}#rsvp{padding-block:55px}.knopf{min-height:48px}.newhero .knopf{font-size:13px}}body.nachtblau{--paper:#f2f5f8;--surface:#e4ebf1;--ink:#233a51;--on:#f2f5f8;--sub:#586e82;--line:#b3c2cf;--accent:#3c6082}.nachtblau .kopfleiste{border-color:#b3c2cf}.nachtblau .newhero{background:#233a51;color:#f2f5f8;margin-top:20px;padding:35px 0 0}.bluetop{display:flex;justify-content:space-between;gap:25px}.bluetop .topnote{color:#bed1e1}.bluehero h1{font-size:clamp(74px,10vw,142px);line-height:.99;font-weight:500;letter-spacing:-.07em;margin:38px 0}.bluehero h1>span{color:#adcade}.bluebottom{display:grid;grid-template-columns:1fr 1fr;gap:35px;margin-bottom:38px}.bluebottom p{font-size:15px;color:#d2dfe9}.bluebottom .bluenames{font-size:25px;color:#fff;letter-spacing:-.04em;margin-bottom:12px}.bluebottom>div:last-child{justify-self:end}.bluebottom .knopf{margin-top:20px;background:#cbdde9;color:#233a51;border-radius:30px}.bluephoto{display:grid;grid-template-columns:1.6fr .7fr;background:#d4e1eb;color:#233a51}.bluephoto img{height:340px;filter:saturate(.55)}.bluephotocaption{display:flex;flex-direction:column;justify-content:space-between;padding:30px}.bluephotocaption span{font-size:11px;letter-spacing:.04em}.bluephotocaption strong{font-weight:400;font-size:34px;letter-spacing:-.06em}.nachtblau h2{font-weight:500;font-size:clamp(36px,4.5vw,61px);letter-spacing:-.055em}.nachtblau #geschichte .raster{gap:80px}.nachtblau .geschichte-bild img{height:380px;filter:saturate(.65)}.nachtblau #ablauf .mitte{text-align:left}.nachtblau .ablauf{gap:0;border:1px solid var(--line)}.nachtblau .ablauf-punkt{background:transparent;padding:30px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.nachtblau .ablauf-punkt:nth-child(3n){border-right:0}.nachtblau .ablauf-punkt:nth-child(n+4){border-bottom:0}.nachtblau .ablauf-zeit{font-size:29px;letter-spacing:-.05em}.nachtblau .raster--auto{gap:0;border-top:1px solid var(--line)}.nachtblau .karte{border-top:0;border-right:1px solid var(--line);padding:28px}.nachtblau .karte:last-child{border-right:0}.nachtblau #rsvp{background:#233a51;color:#f2f5f8}.nachtblau #rsvp .augenbraue,.nachtblau #rsvp .feld--hinweis{color:#cbdbe7}.nachtblau #rsvp .demoform>summary{background:#cbdde9;color:#233a51;border-radius:30px}.nachtblau .forminner{color:#233a51}.nachtblau .galerie{gap:15px}.nachtblau .galerie img{filter:saturate(.7);height:250px}.nachtblau .fuss{background:#e4ebf1;color:#233a51}.nachtblau .fuss-datum,.nachtblau .fuss-quelle,.nachtblau .demohinweis,.nachtblau .fuss-links{color:#586e82}@media(max-width:760px){.nachtblau .newhero{margin-top:8px;padding-top:25px}.bluetop span:last-child{display:none}.bluehero h1{font-size:70px;margin:30px 0;line-height:1.02}.bluebottom{grid-template-columns:1fr;gap:24px;margin-bottom:28px}.bluebottom>div:last-child{justify-self:start}.bluebottom p{font-size:14px}.bluephoto{grid-template-columns:1fr}.bluephoto img{height:240px}.bluephotocaption{flex-direction:row;align-items:center;padding:18px;gap:15px}.bluephotocaption strong{font-size:25px}.bluephotocaption span:first-child{font-size:9px}.bluephotocaption span:last-child{display:none}.nachtblau #geschichte .raster{gap:25px}.nachtblau .geschichte-bild img{height:260px}.nachtblau .ablauf-punkt{padding:22px 18px;border-right:0!important;border-bottom:1px solid var(--line)!important}.nachtblau .ablauf-punkt:last-child{border-bottom:0!important}.nachtblau .ablauf-zeit{font-size:22px}.nachtblau .karte{border-right:0;border-bottom:1px solid var(--line);padding:25px 0}.nachtblau .karte:last-child{border-bottom:0}.nachtblau .galerie img{height:195px}}.guestmobilenav{display:none}.nachtblau .kopfleiste{position:sticky;top:0;z-index:30;background:#f2f5f8;padding-block:14px}.nachtblau .newhero{margin-top:0}.guestsummary{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:25px;padding:25px 0;margin-top:30px;margin-bottom:60px;border-bottom:1px solid #b3c2cf}.guestsummary>div{border-right:1px solid #b3c2cf;padding-right:20px}.guestsummary>div:last-child{border:0}.guestsummary span{display:block;font-size:10px;letter-spacing:.1em;color:#586e82;margin-bottom:8px}.guestsummary strong{font-size:16px;font-weight:500;letter-spacing:-.025em;display:block}.guestsummary small,.guestsummary a{display:block;font-size:12px;color:#586e82;margin-top:7px}.guestsummary a{min-height:32px;display:flex;align-items:center}.nachtblau .abschnitt{padding-block:65px}.nachtblau #ablauf h2{max-width:690px}.nachtblau #ablauf .ablauf{margin-top:30px}.guestfaqgrid{display:grid;grid-template-columns:1.4fr .75fr;gap:65px;align-items:start}.guestquestions .mitte{text-align:left}.guestquestions .mitte h2{font-size:clamp(34px,3.6vw,47px)}.guestflowers{margin:42px 0 0;position:sticky;top:100px}.guestflowers img{height:410px;width:100%;object-fit:cover;object-position:center bottom;border-radius:4px}.gueststory{padding-bottom:55px}.gueststory details{border-block:1px solid #b3c2cf;padding:15px 0}.gueststory summary{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:15px;min-height:48px;cursor:pointer;list-style:none}.gueststory summary::-webkit-details-marker{display:none}.gueststory summary span{font-size:24px}.gueststory details[open] summary span{transform:rotate(45deg)}.gueststory details>div{max-width:690px;padding:15px 0;font-size:15px;color:#586e82}.nachtblau #rsvp{margin-bottom:35px}.nachtblau #rsvp h2{font-size:clamp(39px,4.7vw,62px)}.nachtblau #rsvp .forminner{color:#233a51}.nachtblau .fuss{margin-top:0}.decorcredits{font-size:10px;text-align:center;padding:20px;color:#586e82}.nachtblau .faq-punkt{border-color:#b3c2cf}.nachtblau .faq-antwort{color:#586e82}html{scroll-padding-top:95px}@media(max-width:760px){.nachtblau .kopfleiste{display:none!important}.guestmobilenav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:sticky;top:0;z-index:40;gap:5px;background:#f2f5f8;border-bottom:1px solid #b3c2cf;padding:8px 12px}.guestmobilenav a{display:flex;align-items:center;justify-content:center;min-height:46px;min-width:0;padding:8px 4px;color:#233a51;text-decoration:none;font-size:13px;border-radius:5px}.guestmobilenav .mobilersvp{background:#cbdde9}.guestmobilenav a:focus-visible{outline:3px solid #3c6082;outline-offset:-2px}.newhero a[href="#rsvp"]{display:none}.bluebottom>div:last-child .knopf{margin:0}.guestsummary{grid-template-columns:1fr;gap:16px;margin-top:0;margin-bottom:35px;padding:22px 0}.guestsummary>div{border-right:0;border-bottom:1px solid #c9d4dd;padding-bottom:15px}.guestsummary>div:last-child{border:0;padding-bottom:0}.guestsummary a[href="#rsvp"]{display:none}.nachtblau .abschnitt{padding-block:45px}.guestfaqgrid{grid-template-columns:1fr;gap:25px}.guestflowers{position:static;margin:0}.guestflowers img{height:220px;object-position:center 78%}.gueststory{padding-bottom:40px}.gueststory summary{font-size:14px}.nachtblau #rsvp{margin-bottom:20px}html{scroll-padding-top:78px}}


/* BRUECKE — „Magazin"

   Lukas' Vorlage (Beispiel3.html) ist eine vollstaendige, eigenstaendige
   Gestaltung: sie bringt ihren eigenen Aufbau mit und kennt das Fundament
   nicht. `design.css` daneben ist Zeichen fuer Zeichen seine Datei und wird
   nicht angefasst. Was das Fundament trotzdem noch verstellt, steht hier —
   und nur das.

   `stil_kopieren()` haengt diese Datei beim Bauen hinten an `design.css` an;
   in der fertigen Gaesteseite bleibt es bei den vier bekannten Dateien. */

/* Das Fundament gibt jeder Huelle einen Innenrand (`--rand`, 48px). Lukas'
   Huelle hat keinen: sie regelt den Abstand allein ueber die Breite
   (`width: calc(100% - 80px)`). Bleiben beide stehen, wird jede Seite 96px
   schmaler als in seiner Vorlage. */
.huelle { padding-inline: 0; }

/* Druck. Das Fundament kennt die Klassennamen dieser Vorlage nicht: sein
   Druckblock blendet `.kopf-bild` aus, hier heisst das grosse Bild
   `.bluephoto`. Ohne diese Zeilen druckt der Gast eine ganzseitige dunkle
   Flaeche — das kostet eine Patrone und liest sich schlechter. */
@media print {
  .bluephoto { display: none !important; }
  .newhero, .bluehero, .bluetop, .bluebottom {
    background: #fff !important;
    color: #000 !important;
  }
  .bluehero { width: 100% !important; }
}

/* ------------------------------------------------------------------
   FARBWELT — seit dem 11.09.2026 laeuft „Magazin" durch alle sechs
   Farbwelten statt fest durch Nachtblau.

   Lukas' Datei traegt ihre Farben an zwei Stellen: als Variablen unter
   `body.nachtblau` und als feste Blautoene in den Regeln darunter. Beides
   wird hier umgehaengt — nicht dort geaendert. Die Klasse `nachtblau`
   bleibt am Koerper stehen, weil an ihr auch der Aufbau haengt (Raster
   im Ablauf, Karten, Kopfblock); sie bedeutet jetzt „Magazin", nicht
   „blau". Der tiefe Ton kommt aus der gewaehlten Welt.

   Die Zuordnung:
     Tiefer Block, Knopf, Fuss   --dunkel-grund
     Schrift darauf              --dunkel-tinte
     Heller Grund                --grund
     Abgesetzte Flaeche          --flaeche   (Lukas' Pastellton)
     Leise Schrift               --tinte-leise
     Linien                      --linie
     Akzent, Uhrzeit, Links      --akzent-dunkel  (4,5:1 geprueft)
   ------------------------------------------------------------------ */
body.nachtblau {
  --paper:   var(--grund);
  --surface: var(--flaeche);
  --ink:     var(--dunkel-grund);
  --on:      var(--dunkel-tinte);
  --sub:     var(--tinte-leise);
  --line:    var(--linie);
  --accent:  var(--akzent-dunkel);
}

/* Die fest eingetragenen Blautoene aus Lukas' Datei, Stelle fuer Stelle. */
.nachtblau .kopfleiste            { border-color: var(--linie); }
.nachtblau .newhero               { background: var(--dunkel-grund);
                                    color: var(--dunkel-tinte); }
.nachtblau .bluetop .topnote      { color: var(--dunkel-tinte); }
.nachtblau .bluehero h1 > span    { color: var(--akzent-hell); }
.nachtblau .bluebottom p          { color: var(--dunkel-tinte); }
.nachtblau .bluebottom .bluenames { color: var(--dunkel-tinte); }
.nachtblau .bluebottom .knopf     { background: var(--akzent-hell);
                                    color: var(--dunkel-grund); }
.nachtblau .bluephoto             { background: var(--flaeche);
                                    color: var(--dunkel-grund); }
.nachtblau #rsvp                  { background: var(--dunkel-grund);
                                    color: var(--dunkel-tinte); }
.nachtblau #rsvp .augenbraue,
.nachtblau #rsvp .feld--hinweis   { color: var(--dunkel-tinte); }
.nachtblau #rsvp .demoform > summary { background: var(--akzent-hell);
                                       color: var(--dunkel-grund); }
.nachtblau .forminner             { color: var(--dunkel-grund); }
.nachtblau .fuss                  { background: var(--flaeche);
                                    color: var(--dunkel-grund); }
.nachtblau .fuss-datum,
.nachtblau .fuss-quelle,
.nachtblau .demohinweis,
.nachtblau .fuss-links            { color: var(--tinte-leise); }

/* Die Bilder sind in Lukas' Vorlage entsaettigt, damit das Blau traegt.
   Bei den hellen Welten wuerde das die Seite ausbleichen — dort duerfen
   die Fotos ihre Farbe behalten. */
.nachtblau .bluephoto img,
.nachtblau .geschichte-bild img,
.nachtblau .galerie img { filter: saturate(.85); }

/* Der Zusage-Knopf steht im dunklen Block und ist im Original `--ink` auf
   `--ink` — also unsichtbar, sobald der Baumeister dort einen `.knopf` setzt
   statt Lukas' Beispiel-Aufklapper. Im Dunklen dreht er sich um. */
.nachtblau #rsvp .knopf        { background: var(--akzent-hell);
                                 color: var(--dunkel-grund); }
.nachtblau #rsvp .knopf:hover  { background: var(--akzent-schrift);
                                 color: var(--dunkel-grund); }
.nachtblau #rsvp .knopf--leer  { background: transparent;
                                 border-color: var(--akzent-hell);
                                 color: var(--dunkel-tinte); }

/* ------------------------------------------------------------------
   DIE VIER NEUEN BAUTEILE (11.09.2026)

   Lukas' neue Fassung von `Beispiel3.html` bringt vier Bauteile mit, die
   es vorher nicht gab: die Handy-Navigation, die Info-Leiste oben, das
   zweispaltige FAQ mit Blumenbild und „Unsere Geschichte" als Aufklapper.
   Sie tragen ihre Blautoene ebenfalls fest eingetragen — hier Stelle fuer
   Stelle auf die Farbwelt umgehaengt.
   ------------------------------------------------------------------ */

/* Die Kopfleiste klebt jetzt oben und hat einen eigenen Grund. */
.nachtblau .kopfleiste { background: var(--grund); }

/* Handy-Navigation. Sie ist am Schreibtisch ausgeblendet und erscheint
   erst unter 760px — die Farben gelten trotzdem hier, weil eine
   Medienabfrage die Genauigkeit nicht erhoeht. */
.nachtblau .guestmobilenav { background: var(--grund);
                             border-color: var(--linie); }
.nachtblau .guestmobilenav a { color: var(--dunkel-grund); }
.nachtblau .guestmobilenav .mobilersvp { background: var(--akzent-hell); }
.nachtblau .guestmobilenav a:focus-visible { outline-color: var(--akzent-dunkel); }

/* Info-Leiste oben: Datum, Ankunft, Antwortfrist. */
.nachtblau .guestsummary,
.nachtblau .guestsummary > div { border-color: var(--linie); }
.nachtblau .guestsummary span,
.nachtblau .guestsummary small,
.nachtblau .guestsummary a { color: var(--tinte-leise); }
.nachtblau .guestsummary strong { color: var(--tinte-stark); }

/* FAQ und der Aufklapper „Unsere Geschichte". */
.nachtblau .gueststory details { border-color: var(--linie); }
.nachtblau .gueststory summary,
.nachtblau .gueststory details > div { color: var(--tinte-leise); }

/* Das Blumenbild ist Schmuck, kein Foto des Paares — es nimmt dieselbe
   Entsaettigung wie die uebrigen Bilder dieser Richtung. */
.nachtblau .guestflowers img { filter: saturate(.85); }

/* Druck: das Blumenbild und die Handy-Navigation gehoeren nicht aufs
   Papier, die Info-Leiste wird einspaltig. `nav` blendet das Fundament
   schon aus. */
@media print {
  .guestflowers { display: none !important; }
  .guestsummary { grid-template-columns: 1fr !important; }
  .guestfaqgrid { grid-template-columns: 1fr !important; }
}