/* Design „Sommer" — Richtung 1 von 3 fuer fertige Hochzeitsseiten. Diese Datei ist die Vorlage, die Lukas am 11.09.2026 vorgegeben hat (Beispiel1.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 „modern-moment sky" (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:#fdfdfb;color:#252927}.kopfleiste{background:#fdfdfb;border:0;border-bottom:1px solid #dce0db;border-radius:0;position:relative;top:0;margin:0 auto;padding:20px 0;width:min(1160px,calc(100% - 64px));gap:28px}.kopfleiste-marke{font-size:17px;letter-spacing:-.05em}.kopfleiste-links{font-size:12px}.kopfleiste>.knopf{background:#f4e9a8;color:#252927;border-radius:30px}.knopf{background:#282e29;color:#fff;border-radius:30px;gap:20px;font-size:13px}.knopf:hover{background:#464e43}.knopf--leer{background:transparent;color:#282e29;border:1px solid #aeb7aa}.knopf--leer:hover{background:#f1f3ed;color:#282e29}.huelle{width:min(1120px,calc(100% - 80px))}.kopf-vor,.augenbraue{color:#606a5e;font-size:11px;letter-spacing:.13em}.newhero{padding-top:0}.newhero h1{font-family:'Schibsted Grotesk',Arial,sans-serif;font-weight:600;letter-spacing:-.075em;line-height:1.01}.newhero img{object-fit:cover}.newhero p{color:#5c665a}.modernlabel{font-size:11px;letter-spacing:.08em;text-transform:uppercase}.moderncta{display:flex;align-items:center;gap:25px;margin-top:27px}.moderncta>span{font-size:12px;line-height:1.6;color:#606a5e}.abschnitt{padding-block:85px}.abschnitt--flaeche{background:#f1f3ef;border-radius:18px;max-width:1200px;margin:0 auto}.abschnitt--flaeche>.huelle{width:calc(100% - 80px)}h2{font-family:'Schibsted Grotesk',Arial,sans-serif;font-size:clamp(35px,4.1vw,57px);font-weight:500;letter-spacing:-.055em}h3{font-weight:500}.geschichte-bild img,.location-karte{border-radius:10px}.geschichte-text p,.ablauf-inhalt p,.karte p,.faq-antwort{color:#5b6557}.ablauf-punkt{background:#fff;border-radius:8px}.ablauf-zeit{color:#343d30}.karte{border-color:#cbd3c4}.faq-punkt{border-color:#d3d9cf}.faq-punkt summary:after{color:#626d5b}.fuss{background:#eef1eb;color:#252927}.fuss-datum,.fuss-quelle,.demohinweis{color:#616c59}.fuss-links{color:#30392b}.fuss-namen{font-family:'Schibsted Grotesk',Arial,sans-serif;font-size:45px}.galerie img{border-radius:9px}.demoform>summary{background:#f4e9a8;color:#252927;border-radius:30px;min-height:52px}.forminner{background:#fff;border-color:#c9d0c1}.demohint,.feld--hinweis{color:#606a5e}.countdown{display:none}.moderncaption{display:flex;justify-content:space-between;font-size:10px;color:#63705c;gap:20px;margin-top:12px}.newhero .knopf{background:#f4e9a8;color:#252927}.newhero .knopf:hover,.demoform>summary:hover{background:#e9db8f}.newhero .buttertag{display:inline-block;background:#f8f0c6;padding:6px 10px;border-radius:5px;color:#50583e;font-size:10px;letter-spacing:.08em}.modernfacts{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.modernfacts>div>span{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#63705c}.modernfacts p{font-size:15px;margin-top:5px;color:#252927}.forminner input:not([type=radio]),textarea{border-color:#86937d}a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline-color:#526546}@media(max-width:760px){.huelle{width:calc(100% - 40px)}.kopfleiste{width:calc(100% - 36px);padding:12px 0;position:sticky;top:0;gap:12px}.kopfleiste-marke{font-size:15px}.kopfleiste>.knopf{font-size:12px}.abschnitt{padding-block:52px}.abschnitt--flaeche{margin-inline:12px;border-radius:12px}.abschnitt--flaeche>.huelle{width:calc(100% - 36px)}.moderncta{gap:18px}.moderncta>span{font-size:11px}.modernfacts{gap:14px}.modernfacts p{font-size:12px}.modernfacts>div>span{font-size:9px}.moderncaption{font-size:9px}.moderncaption span:last-child{display:none}.newhero .knopf{font-size:13px;min-height:48px}h2{font-size:35px}.fuss-namen{font-size:39px}}body.modern-moment{background:#fcfcfa}.momenthero{display:grid;grid-template-columns:1fr 1.05fr;gap:75px;align-items:center;padding-top:48px}.momentcopy h1{font-size:clamp(70px,7.7vw,109px);margin:25px 0;line-height:.98}.momentcopy h1>span{color:#9aa594;font-weight:400}.momentintro{font-size:17px;line-height:1.7}.momentdate{margin-top:28px;border-top:1px solid #d9dfd4;padding-top:18px}.momentdate>span{font-size:18px;font-weight:500;letter-spacing:-.03em}.momentdate p{font-size:13px;margin-top:6px}.momentphoto{position:relative;padding-bottom:20px}.momentphoto>img{height:580px;border-radius:12px;object-position:63% center}.momentstamp{position:absolute;bottom:0;left:-26px;padding:18px 25px;background:#f6edb8;display:flex;flex-direction:column;align-items:center;border-radius:8px;min-width:120px}.momentstamp span{font-size:9px;letter-spacing:.13em}.momentstamp strong{font-size:34px;letter-spacing:-.06em;font-weight:500;line-height:1.4}.momentstrip{display:flex;justify-content:space-between;gap:20px;border-block:1px solid #d9dfd4;padding-block:20px;margin-top:42px;font-size:12px;color:#66715f}.modern-moment #geschichte .raster{grid-template-columns:1fr 1fr;gap:85px}.modern-moment .geschichte-bild{order:-1}.modern-moment .geschichte-bild img{height:410px}.modern-moment #ablauf{background:#f4f5f1}.modern-moment #ablauf>.huelle{display:grid;grid-template-columns:1fr 1.3fr;gap:75px}.modern-moment #ablauf .mitte{text-align:left;align-self:start}.modern-moment .ablauf{display:block;margin:0;border-left:1px solid #bcc7b1;padding-left:30px}.modern-moment .ablauf-punkt{background:transparent;display:grid;grid-template-columns:70px 1fr;gap:20px;padding:0 0 30px;position:relative}.modern-moment .ablauf-punkt:before{content:'';position:absolute;width:10px;height:10px;background:#e9da83;outline:1px solid #9f955e;border:2px solid #f4f5f1;border-radius:50%;left:-35px;top:8px}.modern-moment .ablauf-punkt:last-child{padding-bottom:0}.modern-moment .ablauf-zeit{font-size:21px}.modern-moment .ablauf-inhalt h3{font-size:20px}.modern-moment .karte{background:#fcfdf9;border:1px solid #d7ded1;border-radius:9px;padding:24px}.modern-moment #rsvp{background:#f7f7f1;border-top:3px solid #f2e6a2;border-radius:10px}.modern-moment .galerie{grid-template-columns:1.1fr .9fr 1fr;gap:14px}.modern-moment .galerie-bild:first-child{grid-column:span 2;grid-row:span 2}.modern-moment .galerie-bild:first-child img{height:494px}.modern-moment .galerie-bild:last-child{grid-column:span 2}.modern-moment .galerie img{height:240px}.modern-moment .faq-punkt{padding-inline:12px}.modern-moment .faq-punkt[open]{background:#f1f3ed}@media(max-width:760px){.momenthero{grid-template-columns:1fr;gap:32px;padding-top:30px}.momentcopy h1{font-size:72px;line-height:1.01;margin:23px 0}.momentcopy h1 br{display:none}.momentintro{font-size:16px}.momentdate{margin-top:22px}.momentphoto>img{height:340px}.momentstamp{left:15px;min-width:105px;padding:14px 20px}.momentstamp strong{font-size:30px}.momentstrip{font-size:10px;gap:15px;margin-top:25px}.momentstrip span:last-child{display:none}.modern-moment #geschichte .raster{grid-template-columns:1fr;gap:27px}.modern-moment .geschichte-bild{order:0}.modern-moment .geschichte-bild img{height:280px}.modern-moment #ablauf>.huelle{display:block}.modern-moment .ablauf{margin-top:30px}.modern-moment .ablauf-punkt{grid-template-columns:56px 1fr;gap:15px}.modern-moment .galerie{grid-template-columns:1fr 1fr;gap:10px}.modern-moment .galerie-bild:first-child{grid-row:auto}.modern-moment .galerie-bild:first-child img{height:280px}.modern-moment .galerie img{height:190px}}body{background:#fdfcf8}.kopfleiste{background:#fdfcf8}.studioline>p{font-size:18px;line-height:1.75;color:#59634f}.modern-moment .momentintro{line-height:1.8;color:#59634f}.modern-studio .studiopic img{filter:saturate(.94)}.modern-moment .momentphoto>img{filter:saturate(.94)}.closinglove{font-size:20px;line-height:1.65;color:#55614c;margin:0 auto 30px;max-width:500px;letter-spacing:-.03em}.modern-studio #rsvp,.modern-moment #rsvp{background:#f8f6ec;border-top:3px solid #f2e6a2}.modern-studio #rsvp h2,.modern-moment #rsvp h2{font-weight:500;letter-spacing:-.05em}.modern-studio .studiotop .modernlabel:first-child{background:#faf1c9;padding:6px 10px;border-radius:4px;color:#5c634a}.studiotop{align-items:center}.modern-moment .momentstrip{color:#6d715f;font-size:12px}.modern-moment .momentcopy .buttertag{line-height:1.6;max-width:100%}.fuss{background:#f0f3eb}.fuss-namen{margin-top:12px}@media(max-width:760px){.studioline>p{font-size:16px}.modern-studio .studiotop .modernlabel:first-child{font-size:9px;max-width:210px}.modern-studio .studiotop .modernlabel:last-child{font-size:9px}.modern-moment .momentcopy .buttertag{font-size:9px}.closinglove{font-size:18px;padding-inline:10px}.modern-moment .momentstrip{font-size:11px}.modern-moment .momentintro{font-size:16px}}body{background:#fdfdfc;color:#283334}.kopfleiste{background:#fdfdfc;border-color:#d9e1e0}.kopfleiste>.knopf{background:var(--accent);color:#283334}.newhero .knopf,.demoform>summary{background:var(--accent);color:#283334}.knopf:hover,.newhero .knopf:hover{background:var(--second);color:#283334}.kopf-vor,.augenbraue{color:#5a6969}.knopf--leer{color:#283334;border-color:#afc0be}.pastelcta{display:flex;align-items:center;gap:20px;margin-top:27px}.pastelcta>span{font-size:11px;color:#596969;line-height:1.6}.newhero h1{font-weight:600;letter-spacing:-.07em}.pastelkicker{font-size:11px;text-transform:uppercase;letter-spacing:.11em;color:#536363}.pasteldate{font-size:14px;color:#425556;margin-top:22px;line-height:1.7}.pastellead{font-size:17px;line-height:1.8;max-width:420px;color:#596969}.abschnitt--flaeche{background:#f3f6f5}.geschichte-text p,.ablauf-inhalt p,.karte p,.faq-antwort{color:#586868}.modern-moment #rsvp{background:#f6f7f4;border-top-color:var(--accent)}.modern-moment #ablauf{background:#f3f6f5}.modern-moment .ablauf-punkt:before{background:var(--accent);outline-color:#7a9491;border-color:#f3f6f5}.modern-moment .ablauf{border-color:#adc0be}.modern-moment .karte{border-color:#d7e2df;background:#fdfefd}.modern-moment .faq-punkt[open]{background:#f0f5f3}.fuss{background:#f0f5f3}.fuss-datum,.fuss-quelle,.demohinweis,.closinglove{color:#596969}.eventnote{display:flex;justify-content:space-between;font-size:10px;color:#667575;gap:20px;margin-top:13px}.pastelphoto img{width:100%;object-fit:cover}.datechip{background:var(--second);padding:19px 24px;border-radius:8px;display:flex;flex-direction:column;align-items:center;color:#283334}.datechip span{font-size:9px;letter-spacing:.12em}.datechip strong{font-size:34px;font-weight:500;letter-spacing:-.06em;line-height:1.5}.pastelbar{display:flex;justify-content:space-between;gap:20px;padding:19px 0;border-block:1px solid #d9e2df;margin-top:36px;font-size:12px;color:#5c6c6b}.modern-moment .momentstrip{display:none}a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline-color:#405e5c}@media(max-width:760px){.pastellead{font-size:16px}.pastelkicker{font-size:10px}.pastelcta{gap:16px}.pastelcta>span{font-size:10px}.pastelbar{font-size:10px;gap:15px;margin-top:26px}.pastelbar span:last-child{display:none}.eventnote{font-size:9px}.eventnote span:last-child{display:none}}body{--accent:#BBE8FD;--second:#BBF2CD}.skyhero{display:grid;grid-template-columns:1fr 1.05fr;gap:75px;align-items:center;padding-top:48px}.skyhero h1{font-size:clamp(70px,7.8vw,110px);line-height:.99;margin:25px 0}.skyhero h1 span{color:#829da1;font-weight:400}.skyphoto{position:relative;padding:20px 0 25px 20px;background:linear-gradient(90deg,#f0f8fb 75%,transparent 75%);border-radius:15px}.skyphoto img{height:555px;border-radius:11px}.skyphoto .datechip{position:absolute;left:-8px;bottom:0}.skybar{display:flex;justify-content:space-between;gap:20px;padding:20px 26px;background:#eef8f2;border-radius:9px;margin-top:38px;font-size:12px;color:#526663}.sky #geschichte .augenbraue{border-left:4px solid #BBE8FD;padding-left:12px}.sky #ablauf{background:#f0f7fa}.sky #rsvp{border-color:#BBF2CD}.sky .galerie img{border-radius:12px}@media(max-width:760px){.skyhero{grid-template-columns:1fr;gap:30px;padding-top:28px}.skyhero h1{font-size:69px}.skyhero h1 br{display:none}.skyphoto img{height:335px}.skyphoto{padding:14px 0 20px 14px}.skyphoto .datechip{left:0}.skybar{font-size:10px;padding:17px;gap:15px;margin-top:25px}.skybar span:last-child{display:none}}body{background:#fdfdfc!important;color:#303436}body .kopfleiste{background:#fdfdfc!important}.newhero .knopf,.kopfleiste>.knopf,.demoform>summary,.datechip,.peachbadge,.momentstamp,.lilacbadge,.lilacmessage,.lilacfacts,.buttertag{background:var(--accent)!important;color:#303436!important;border-color:transparent!important}.newhero .knopf:hover,.knopf:hover{background:var(--accent)!important;color:#303436!important;filter:brightness(.96)}.skyphoto{background:#f6f6f4!important}.skybar,.peachscene aside,.lilacmessage{background:#f7f7f5!important;border-top:3px solid var(--accent)!important}.peachscene aside>p,.lilacmessage>p,.lilacmessage>span{color:#50575b!important}.abschnitt--flaeche,body.modern-moment #ablauf,body.modern-moment #rsvp,body .fuss,body .faq-punkt[open]{background:#f5f6f4!important}.modern-moment #rsvp{border-color:var(--accent)!important}.modern-moment .ablauf-punkt:before{background:var(--accent)!important;outline-color:#929b9b;border-color:#f5f6f4!important}.newhero h1 span{color:#8f979b!important}.newhero img{object-position:50% 28%!important;filter:none!important}.curatedgallery{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:35px;align-items:start}.curatedgallery figure{margin:0}.curatedgallery img{width:100%;height:460px;object-fit:cover;border-radius:10px}.curatedgallery figure:first-child img{object-position:center 23%}.curatedgallery figure:last-child{padding-top:65px}.curatedgallery figure:last-child img{height:340px;object-position:center}.curatedgallery figcaption{font-size:13px;color:#626b70;margin-top:12px}.stocknote{font-size:11px;color:#697277;text-align:center;margin-top:24px}.storyquote{background:#f6f6f3;border-left:4px solid var(--accent);padding:45px;align-self:center;order:-1}.storyquote p{font-size:clamp(27px,3vw,41px);line-height:1.35;letter-spacing:-.05em;color:#424d52}.storyquote span{display:block;margin-top:25px;font-size:12px;color:#697277}.sky #geschichte .augenbraue,.lilac #geschichte .augenbraue{border-color:var(--accent)!important}.skyphoto .datechip{background:var(--accent)!important}.curatedcredits{font-size:10px;color:#626d72;text-align:center;padding:20px}.curatedcredits a{text-decoration:underline}.lilacbadge{background:var(--accent)!important}.lilacmessage{background:#f7f7f5!important}.skybar{color:#5b6468}.modern-moment .karte{background:#fff!important;border-color:#d9dede}@media(max-width:760px){.curatedgallery{gap:14px;grid-template-columns:1fr 1fr}.curatedgallery img{height:270px}.curatedgallery figure:last-child{padding-top:35px}.curatedgallery figure:last-child img{height:220px}.curatedgallery figcaption{font-size:11px}.storyquote{order:0;padding:27px}.storyquote p{font-size:28px}.stocknote{font-size:10px}}body{--accent:#BBE8FD!important;--second:#BBE8FD!important}.newhero img{object-position:50% 39%!important}.curatedgallery figure:first-child img{object-position:50% 38%!important}.curatedgallery figure:last-child img{object-position:50% 55%!important}.decorfloral{position:relative;margin:0;align-self:center;order:-1;overflow:hidden;border-radius:12px;background:#f3f1ec}.decorfloral img{width:100%;height:430px;object-fit:cover;object-position:center 78%}.decorfloral figcaption{position:absolute;top:27px;right:25px;left:25px;text-align:right;font-size:19px;line-height:1.45;letter-spacing:-.03em;color:#424540}.curatedgallery .tabledecor{object-position:center!important}.decorcredits{text-align:center;padding:0 20px 25px;font-size:10px;color:#647173}.decorcredits a{text-decoration:underline}@media(max-width:760px){.decorfloral{order:0}.decorfloral img{height:325px}.decorfloral figcaption{font-size:16px;top:22px;right:20px;left:20px}.curatedgallery .tabledecor{height:270px!important;object-position:55% center!important}}.kopfleiste{position:sticky!important;top:0!important;z-index:30;background:#fdfdfc!important}.skyhero{padding-top:38px;padding-bottom:28px}.skyphoto img{height:475px}.skyphoto .datechip{bottom:5px}.guestsummary{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:25px;border-block:1px solid #d8e1e2;padding:22px 0;margin-top:18px;margin-bottom:65px}.guestsummary>div{border-right:1px solid #d8e1e2;padding-right:20px}.guestsummary>div:last-child{border:0}.guestsummary span{display:block;font-size:10px;letter-spacing:.12em;color:#657376;margin-bottom:8px}.guestsummary strong{display:block;font-size:16px;font-weight:500;letter-spacing:-.025em}.guestsummary small,.guestsummary a{display:block;font-size:12px;color:#657376;margin-top:7px}.guestsummary a{min-height:30px;color:#344e57}.abschnitt{padding-block:65px}#ablauf>.huelle{grid-template-columns:1fr 1.25fr;gap:65px}#ablauf h2{font-size:clamp(36px,4.2vw,55px)}#location .location-karte{height:330px}.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:45px 0 0;position:sticky;top:105px}.guestflowers img{width:100%;height:410px;object-fit:cover;object-position:center bottom;border-radius:10px}.gueststory{padding:0 0 55px}.gueststory details{border-block:1px solid #d8e1e2;padding:15px 0}.gueststory summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:48px;font-size:15px;color:#4f656a}.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:12px 0 20px;font-size:15px;color:#5c6d6e}.gueststory p+p{margin-top:14px}#rsvp{margin-bottom:35px}#rsvp h2{font-size:clamp(39px,4.7vw,62px)}.fuss{margin-top:0}.fuss .closinglove{font-size:18px;margin-bottom:22px}.guestquestions .faq-punkt summary{font-size:16px}.stocknote{display:none}@media(max-width:760px){.skyhero{padding-top:27px;padding-bottom:0}.skyphoto img{height:320px}.guestsummary{grid-template-columns:1fr;margin-top:28px;margin-bottom:35px;gap:16px;padding:20px 0}.guestsummary>div{border-right:0;border-bottom:1px solid #e2e7e8;padding-bottom:15px}.guestsummary>div:last-child{border:0;padding-bottom:0}.guestsummary strong{font-size:16px}.guestsummary span{font-size:10px}.guestsummary a{min-height:44px;display:flex;align-items:center;margin-top:0}.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}.gueststory details>div{font-size:15px}.skyhero h1{font-size:65px}#location .location-karte{height:260px}}.guestmobilenav{display:none}@media(max-width:760px){html{scroll-padding-top:78px}.kopfleiste{display:none!important}.guestmobilenav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:sticky;top:0;z-index:40;gap:5px;width:100%;padding:8px 12px;background:#fdfdfc;border-bottom:1px solid #d9e1e2}.guestmobilenav a{display:flex;align-items:center;justify-content:center;min-width:0;min-height:46px;padding:8px 4px;font-size:13px;line-height:1.3;color:#303436;text-decoration:none;border-radius:7px}.guestmobilenav a:hover{background:#eef1ef}.guestmobilenav .mobilersvp{background:var(--accent,#BBE8FD)}.guestmobilenav a:focus-visible{outline:3px solid #405e5c;outline-offset:-2px}.newhero a[href="#rsvp"]{display:none!important}.pastelcta{margin-top:14px}.pastelcta>span{font-size:12px}.chaptercopy>small{margin-top:15px}.guestsummary a[href="#rsvp"]{display:none}.guestsummary>div:last-child strong:after{content:' · Antwortfrist';font-size:12px;font-weight:400;color:#657376}} @media(max-width:360px){.guestmobilenav{padding-inline:6px;gap:3px}.guestmobilenav a{font-size:12px}}.newhero .skyphoto img{object-position:50% 61%!important}@media(max-width:760px){.newhero .skyphoto img{object-position:50% 58%!important}} /* BRUECKE — „Sommer" Lukas' Vorlage (Beispiel1.html, Koerperklasse `modern-moment sky`) 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 und wie die Farbwelt hereinkommt, 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 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. Der Druckblock des Fundaments kennt `.kopf-bild`; hier heisst das grosse Bild `.skyphoto`. Ohne diese Zeilen druckt der Gast eine ganzseitige Flaeche mit Farbverlauf. `nav` blendet das Fundament schon aus, damit sind Kopfleiste und Handy-Navigation erledigt. */ @media print { .skyphoto, .guestflowers { display: none !important; } .skyhero { display: block !important; } .newhero { background: #fff !important; color: #000 !important; } .guestsummary { grid-template-columns: 1fr !important; } } /* ------------------------------------------------------------------ FARBWELT Lukas' Datei traegt ihre Farben an drei Stellen: in den Variablen `--accent` und `--second` am Koerper, in einem Schwung `!important`- Regeln fuer die Variante „sky" und als feste Werte in den Regeln darunter. Alles drei wird hier umgehaengt — nicht dort geaendert. Die Klassen `modern-moment sky` bleiben am Koerper stehen, weil an ihnen auch der Aufbau haengt; sie bedeuten jetzt „Sommer", nicht „Himmelblau". Der Pastellton kommt aus der gewaehlten Welt. Die Zuordnung: Grund der Seite --grund Zarte Baender (Abschnitte) --zart (Mischung, siehe unten) Akzent: Knopf, Datumsschild --flaeche (Lukas' Pastellton) Schrift darauf --tinte Fliesstext --tinte Leise Schrift --tinte-leise Linien --linie / --linie-stark Links, Ring --akzent-dunkel ------------------------------------------------------------------ */ /* `--zart` ist das kaum sichtbare Band zwischen den Abschnitten. In Lukas' Vorlage ist es ein Hauch Grau (#f5f6f4); hier ein Hauch der Farbwelt. Der Ruecksprung ohne `color-mix` ist der helle Grund — dann verschwindet das Band, statt falsch zu sein. */ body.sky { --zart: var(--grund); } @supports (background: color-mix(in srgb, red 10%, blue)) { body.sky { --zart: color-mix(in srgb, var(--flaeche) 30%, var(--grund)); } } /* Lukas setzt seine beiden Variablen mit `!important` am nackten `body`. Eine Klasse mehr sticht das, und diese Datei kommt spaeter. */ body.sky { --accent: var(--flaeche) !important; --second: var(--flaeche) !important; } /* Grund und Schrift. */ body.sky, body.sky .kopfleiste, body.sky .guestmobilenav { background: var(--grund) !important; } body.sky { color: var(--tinte) !important; } .sky .kopfleiste, .sky .guestmobilenav, .sky .guestsummary, .sky .guestsummary > div, .sky .gueststory details, .sky .faq-punkt, .sky .karte, .sky .forminner { border-color: var(--linie) !important; } /* Die zarten Baender. */ .sky .abschnitt--flaeche, body.modern-moment.sky #ablauf, body.modern-moment.sky #rsvp, body.sky .fuss, body.sky .faq-punkt[open], body.sky .skyphoto { background: var(--zart) !important; } /* Der Farbverlauf hinter dem Kopfbild ist in Lukas' Datei ein fester Blauton. Er liegt ueber der Flaeche, deshalb muss er mit. */ body.sky .skyphoto { background-image: linear-gradient(90deg, var(--flaeche) 75%, transparent 75%) !important; } /* Knopf, Datumsschild, Zusage-Knopf am Handy: Lukas' Pastellton. */ .sky .knopf, .sky .kopfleiste > .knopf, .sky .datechip, .sky .guestmobilenav .mobilersvp { background: var(--flaeche) !important; color: var(--tinte) !important; } .sky .knopf:hover, .sky .kopfleiste > .knopf:hover { background: var(--linie) !important; } .sky .knopf--leer { background: transparent !important; border-color: var(--linie-stark) !important; color: var(--tinte) !important; } .sky .knopf--leer:hover { background: var(--zart) !important; } /* Leise Schrift, ueberall wo Lukas ein gedaempftes Grau gesetzt hat. */ .sky .augenbraue, .sky .kopf-vor, .sky .pastelkicker, .sky .pastellead, .sky .pasteldate, .sky .pastelcta > span, .sky .newhero p, .sky .geschichte-text p, .sky .ablauf-inhalt p, .sky .karte p, .sky .faq-antwort, .sky .faq-punkt summary:after, .sky .guestsummary span, .sky .guestsummary small, .sky .gueststory summary, .sky .gueststory details > div, .sky .fuss-datum, .sky .fuss-quelle, .sky .feld--hinweis { color: var(--tinte-leise) !important; } .sky .skyhero h1 span, .sky .newhero h1 span { color: var(--tinte-leise) !important; } .sky .fuss, .sky .fuss-links, .sky .guestmobilenav a { color: var(--tinte) !important; } .sky .guestsummary a { color: var(--akzent-dunkel) !important; } /* Karten und Formularfelder stehen auf dem hellen Grund. */ .sky .karte, .sky .forminner, .sky .ablauf-punkt { background: var(--grund) !important; } .sky .forminner input:not([type=radio]), .sky .forminner textarea { border-color: var(--feld-rand) !important; } /* Der Zeitstrahl im Ablauf: Linie und Punkt. Der Punkt ist in Lukas' Datei ein Butterton aus einer anderen Variante — hier der Akzent. */ .sky .ablauf { border-color: var(--linie-stark) !important; } .sky .ablauf-punkt:before { background: var(--akzent) !important; outline-color: var(--linie-stark) !important; border-color: var(--zart) !important; } .sky .ablauf-zeit { color: var(--akzent-dunkel) !important; } body.modern-moment.sky #rsvp { border-color: var(--akzent) !important; } /* Der Tastatur-Ring. Muss sichtbar bleiben, sonst faellt die Bedienung ohne Maus aus. */ .sky a:focus-visible, .sky summary:focus-visible, .sky input:focus-visible, .sky textarea:focus-visible { outline-color: var(--akzent) !important; }