/* Von Janet bereitgestellte Hochzeitsschrift. Lizenz fuer Webeinbettung vor der Veroeffentlichung pruefen. */

.home{--stage-size:100svh;--header-size:124px}
.home .masthead{z-index:3}
.home .landing-hero{height:calc(var(--stage-size) - var(--header-size));min-height:0;max-height:none;position:relative;z-index:0;isolation:auto;overflow:visible;background:transparent}
.home .landing-hero::after{content:none}
.hero-still{position:fixed;top:0;left:0;width:100%;height:var(--stage-size);overflow:hidden;background:var(--paper);pointer-events:none;z-index:0}
.hero-photo{position:absolute;right:0;bottom:0;width:auto;max-width:none;height:min(calc((var(--stage-size) - var(--header-size) - 24px)*1.24),calc(110vw * 1370 / 2400));object-fit:contain;mask-image:linear-gradient(90deg,transparent,#000 10%);transform:none}
/* Die Leseflaeche zieht sich beim Scrollen zurueck und gibt das Foto frei,
   sobald der Text den Bildschirm verlaesst. */
.hero-reading-light{position:absolute;inset:0;background:linear-gradient(90deg,#f1f2ec5c,#f1f2ecd9 27%,#f1f2ecb3 46%,transparent 62%);mask-image:linear-gradient(transparent 15%,#000 34%,#000 57%,transparent 77%);opacity:calc(2.2 - var(--hero-p,0)*2.2)}
/* Der Text sitzt in der ruhigen linken Bildhaelfte, linksbuendig an einer
   Kante, statt mittig ueber dem Paar zu schwimmen. */
.home .landing-copy{position:relative;z-index:1;left:0;width:min(760px,42vw);max-width:none;margin:0 0 0 clamp(48px,16vw,300px);padding:clamp(26px,7svh,84px) 0 0;text-align:left;transform:none}
.home .landing-copy h1{font-size:inherit;line-height:1;font-weight:400;letter-spacing:0;text-wrap:initial}
/* Beim Scrollen bleibt nur die Handschrift stehen. Versalzeile, Fliesstext
   und Schaltflaeche verblassen und scrollen normal weg. Kein Einblenden,
   kein Scroll-Hijacking, keine kuenstliche Scrollstrecke. */
.home-uppercase{display:inline-block;max-width:100%;font-family:'Barlow Condensed',Arial,sans-serif;font-size:clamp(21px,2.25vw,42px);font-weight:400;line-height:1.4;text-transform:uppercase;letter-spacing:.12em;white-space:normal;text-wrap:balance;opacity:calc(1 - var(--hero-p,0)*2.4);transform:translate3d(0,calc(var(--hero-p,0)*0.75*(var(--stage-size) - var(--header-size))),0) scale(calc(1 + var(--hero-p,0)*0.04));transform-origin:left center;will-change:opacity,transform}
.home-handwritten{display:inline-block;max-width:100%;font:400 clamp(110px,12vw,240px)/0.95 'Beauty Handwriting',cursive;letter-spacing:0;white-space:nowrap;margin-top:4px;opacity:calc(1.9 - var(--hero-p,0)*2.4);transform:translate3d(0,calc(var(--hero-p,0)*0.75*(var(--stage-size) - var(--header-size))),0) scale(calc(1 + var(--hero-p,0)*0.17));transform-origin:left center;will-change:opacity,transform}
.home .landing-copy p{font-size:18px;line-height:1.65;max-width:420px;margin:20px 0 0;text-wrap:pretty;opacity:calc(1 - var(--hero-p,0)*2.6);transform:translate3d(0,calc(var(--hero-p,0)*0.75*(var(--stage-size) - var(--header-size))),0);will-change:opacity,transform}
.home .landing-copy .text-link{margin-top:26px;min-height:50px;font-size:15px;background:#263c30;color:#f1f2ec;border:0;padding-inline:22px;opacity:calc(1 - var(--hero-p,0)*2.6);transform:translate3d(0,calc(var(--hero-p,0)*0.75*(var(--stage-size) - var(--header-size))),0);will-change:opacity,transform}
.home .landing-copy .text-link:hover{background:#3e5645;text-decoration:none}
.home .hero-caption{z-index:1;right:32px;bottom:20px}
.home-content{position:relative;z-index:2;background:var(--paper);box-shadow:0 -15px 42px #263c300c}
@media(min-width:1920px){.home .landing-copy{width:min(860px,48vw);padding-top:clamp(45px,8svh,120px)}.home .landing-copy p{font-size:18px;max-width:500px}}
@media(max-width:950px){
 .home{--stage-size:max(100svh,900px)}
 .home .landing-copy{left:0;width:auto;margin-inline:5vw;padding-top:25px;text-align:center;transform:none}
 .home-uppercase{font-size:clamp(20px,3vw,26px);line-height:1.55;letter-spacing:.12em;max-width:none;margin-inline:auto;opacity:calc(1 - var(--hero-p,0)*2.4);transform:translate3d(0,calc(var(--hero-p,0)*0.75*(var(--stage-size) - var(--header-size))),0)}
 .home-handwritten{font-size:clamp(86px,13vw,112px);line-height:1.05;transform:translate3d(0,calc(var(--hero-p,0)*0.75*(var(--stage-size) - var(--header-size))),0) scale(calc(1 + var(--hero-p,0)*0.12));transform-origin:center}
 .home .landing-copy p{margin-inline:auto;transform:translate3d(0,calc(var(--hero-p,0)*0.75*(var(--stage-size) - var(--header-size))),0)}
 .hero-photo{height:min(calc(var(--stage-size)*.60),calc(170vw * 1370 / 2400))}
 .hero-reading-light{display:none}
}
@media(max-width:650px){
 .home{--stage-size:max(100svh,700px)}
 .home .landing-copy{position:relative;width:auto;margin-inline:4vw;padding-top:16px;transform:none}
 .home-uppercase{font-size:clamp(15px,4.5vw,21px);line-height:1.6;letter-spacing:.10em;transform:translate3d(0,calc(var(--hero-p,0)*0.75*(var(--stage-size) - var(--header-size))),0)}
 .home-handwritten{font-size:clamp(52px,16vw,94px);line-height:1.05;margin-top:10px;transform:translate3d(0,calc(var(--hero-p,0)*0.75*(var(--stage-size) - var(--header-size))),0) scale(calc(1 + var(--hero-p,0)*0.10));transform-origin:center}
 .home .landing-copy p{font-size:14px;line-height:1.6;max-width:310px;margin-top:12px;transform:translate3d(0,calc(var(--hero-p,0)*0.75*(var(--stage-size) - var(--header-size))),0)}
 .home .landing-copy .text-link{position:absolute;top:calc(var(--stage-size) - var(--header-size) - 78px);left:50%;width:max-content;max-width:calc(100% - 12px);font-size:14px;margin:0;min-height:50px;transform:translateX(-50%);opacity:1;will-change:auto;z-index:2}
 .hero-photo{height:min(calc(var(--stage-size)*.60),calc(210vw * 1370 / 2400));mask-image:none}
 .home .hero-caption{display:none}
}
/* Native touch scrolling owns the text position. Counter-scrolling and scaling
   glyphs from JS can lag the compositor and shimmer on mobile screens. */
@media(max-width:950px){
 .home .home-uppercase,.home .home-handwritten,.home .landing-copy p{transform:none;opacity:1;will-change:auto}
 .home .landing-copy .text-link{opacity:1;will-change:auto}
}
@media(min-width:651px) and (max-width:950px){.home .landing-copy .text-link{transform:none}}
@media(prefers-reduced-motion:reduce){
 .hero-still{position:absolute;top:calc(-1*var(--header-size))}
 .home .landing-copy,
 .home-uppercase,
 .home-handwritten,
 .home .landing-copy p,
 .home .landing-copy .text-link,
 .home-handwritten,
 .home-uppercase,
 .home .landing-copy p{transform:none!important;opacity:1!important}
 .hero-reading-light{opacity:1}
}
@media(max-width:650px) and (prefers-reduced-motion:reduce){.home .landing-copy .text-link{transform:translateX(-50%)!important}}

/* ---------- Ergaenzte Abschnitte der Startseite ---------- */
/* Rhythmus, Farben und Typografie folgen den vorhandenen Abschnitten. */

.home-content > section{padding-inline:9%}

.strip{padding-block:clamp(72px,9vw,132px)}
.strip-intro{max-width:760px;margin-bottom:clamp(32px,4vw,56px)}
.strip-intro h2{margin:0 0 18px}
.strip-intro p{max-width:56ch;font-size:17px;line-height:1.65}
.strip-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(150px,15vw,240px);gap:clamp(12px,1.4vw,22px)}
.strip-item{grid-column:span 2;margin:0}
.strip-item.strip-wide{grid-column:span 4}
.strip-item.strip-tall{grid-row:span 2}
.strip-item img{width:100%;height:100%;object-fit:cover;display:block}

.audience{padding-block:clamp(72px,9vw,132px)}
.audience h2{margin:0 0 clamp(28px,3.4vw,48px)}
.audience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,56px)}
.audience-grid h3{font-family:'Barlow Condensed',Arial,sans-serif;font-weight:500;font-size:clamp(23px,1.9vw,30px);line-height:1.2;margin:0 0 12px}
.audience-grid p{font-size:16px;line-height:1.7;margin:0;max-width:42ch}

.included{padding-block:clamp(72px,9vw,132px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,110px);align-items:start}
.included-copy h2{margin:0 0 18px}
.included-copy p{font-size:17px;line-height:1.65;max-width:48ch}
.included-list{list-style:none;margin:0;padding:0}
.included-list li{padding:20px 0;border-top:1px solid #cdd2c6}
.included-list li:last-child{border-bottom:1px solid #cdd2c6}
.included-list strong{display:block;font-weight:600;font-size:17px;line-height:1.4;margin-bottom:5px}
.included-list span{display:block;font-size:15px;line-height:1.6;opacity:.82}

.faq{padding-block:clamp(72px,9vw,132px)}
.faq h2{margin:0 0 clamp(24px,3vw,44px)}
.faq-list{max-width:860px}
.faq-item{border-top:1px solid #cdd2c6}
.faq-item:last-child{border-bottom:1px solid #cdd2c6}
.faq-item > summary{cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;font-size:clamp(17px,1.4vw,21px);line-height:1.4;min-height:44px}
.faq-item > summary::-webkit-details-marker{display:none}
.faq-item > summary::after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:24px;line-height:1}
.faq-item[open] > summary::after{content:"\2013"}
.faq-item > summary:hover{text-decoration:underline;text-underline-offset:5px}
.faq-item p{margin:0 0 24px;max-width:64ch;font-size:16px;line-height:1.7}

@media(max-width:950px){
 .strip-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(130px,19vw,210px)}
 .strip-item,.strip-item.strip-wide{grid-column:span 2}
 .strip-item.strip-tall{grid-row:span 1}
 .audience-grid{grid-template-columns:1fr;gap:32px}
 .included{grid-template-columns:1fr;gap:36px}
}
@media(max-width:650px){
 .home-content > section{padding-inline:5%}
 .strip-grid{grid-template-columns:1fr 1fr;grid-auto-rows:clamp(110px,30vw,170px);gap:10px}
 .strip-item,.strip-item.strip-wide{grid-column:span 1}
 .strip-item.strip-wide{grid-column:span 2}
 .strip-intro p,.included-copy p{font-size:16px}
 .faq-item > summary{font-size:16px;padding-right:38px}
}

/* Lange deutsche Komposita duerfen in den neuen Abschnitten umbrechen,
   sonst sprengen sie auf schmalen Smartphones das Raster. */
.strip-intro,.audience-grid > div,.included-copy,.included-list,.faq-list{min-width:0}
.strip-intro h2,.audience h2,.audience-grid h3,.included-copy h2,.faq h2,
.included-list strong,.faq-item > summary{overflow-wrap:break-word;hyphens:auto}

/* Startseite: Bildfolgen und farbige Handschrift, 16.09.2026. */
.home{--home-berry:#85465f;--home-rose:#ece2e4;--home-sage:#e4e6da;--home-space:clamp(64px,7vw,112px)}
.home-content>section:not(.contact){padding-block:var(--home-space)}
.home-content h2{font-size:clamp(38px,4.1vw,64px);line-height:1.14;letter-spacing:-.025em;text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
.home-content h3{font:400 clamp(25px,2.1vw,32px)/1.2 'Barlow Condensed',Arial,sans-serif;letter-spacing:-.01em;text-wrap:balance}
.home-content .heading-hand{display:inline-block;max-width:100%;font-family:'Beauty Handwriting',cursive;font-weight:400;font-size:1.32em;line-height:.98;letter-spacing:0;color:var(--home-berry);white-space:nowrap;hyphens:none;padding:.08em .06em .08em 0}
.home-content p{font-size:16px;line-height:1.75;text-wrap:pretty;max-width:58ch}
.home-content figure{margin:0}
.home-content figure img{display:block;width:100%;height:auto;max-height:none;object-fit:contain}
.home-content figcaption{font-size:13px;line-height:1.55}
.home-content .text-link{font-size:15px;min-height:46px;line-height:1.5;max-width:100%;white-space:normal;text-underline-offset:5px}
.home-content a:focus-visible,.home-content summary:focus-visible{outline:3px solid var(--home-berry);outline-offset:5px}
.home-content .contact a:focus-visible,.home-content .contact summary:focus-visible{outline-color:var(--paper)}
.home-content ::selection{background:#85465f;color:#fff}
.home-about{grid-template-columns:1fr 1.05fr;gap:clamp(40px,7vw,110px)}
.home-about .about-images{width:100%;max-width:560px;justify-self:center;display:grid;grid-template-columns:1fr .34fr;align-items:start}
.home-about .about-portrait{width:100%;max-width:440px;grid-column:1/2;grid-row:1/2;align-self:start}
.home-about .about-portrait img{aspect-ratio:auto}
.equipment-photo{grid-column:1/-1;width:60%;justify-self:end;margin-top:24px!important}
.equipment-photo img{width:100%;height:auto;display:block}
.equipment-photo figcaption{padding-top:10px}
.home-about .about-copy{max-width:550px;min-width:0}
.home-about h2{margin:0 0 24px}
.home-about p+p{margin-top:16px}
.home-about .text-link{margin-top:12px}
.home-approach{display:grid;grid-template-columns:1.15fr 1fr;gap:0 clamp(32px,5vw,80px);background:var(--home-sage);align-items:start}
.approach-heading{grid-column:1/-1;margin-bottom:40px}
.approach-heading h2{margin:0}
.approach-heading>p{margin:0;max-width:42ch}
/* Beide Fotos liegen in einem gemeinsamen Rahmen. Das Hochformat ist
   absolut zum grossen Foto positioniert, nicht zur Rasterzeile. Vorher hing
   es am unteren Rand der Zeile, deren Hoehe der Textblock bestimmt: Bei
   breiten Fenstern lag es komplett auf dem grossen Foto, bei schmalen rutschte
   es bis zu 1180 Pixel darunter weg. So bleibt die Ueberlappung bei jeder
   Breite gleich, naemlich 42 Prozent der Hochformathoehe.
   Das Polster unten reserviert den Ueberhang: 58% Breite mal Seitenverhaeltnis
   1.5 mal 58% Verschiebung sind rund 50% der Rahmenbreite. */
/* Polster fuer den Ueberhang: 46% Breite mal Seitenverhaeltnis 1.5 mal die
   82 Prozent, die unter dem grossen Foto haengen, ergibt 56.6% der Breite. */
.approach-photos{grid-column:1/2;grid-row:2;align-self:start;position:relative;padding-bottom:56.6%}
.approach-photo{margin:0;position:relative}
.approach-copy{grid-column:2/3;grid-row:2;margin:72px 0 0 -140px;padding:clamp(28px,3vw,40px);position:relative;z-index:1;background:var(--home-rose)}
.approach-copy p{margin:0 0 16px}
/* Rechter Abstand statt linker, damit die Links beim Umbruch in schmalen
   Spalten linksbuendig untereinander stehen statt eingerueckt. */
.approach-copy .text-link{margin-right:clamp(18px,2vw,34px)}
/* Zweites Bild unter das grosse, rechtsbuendig. Es fuellt die Flaeche unter
   der Fotospalte und schliesst an die untere Kante des Textblocks an. */
/* Hochformat, das nach oben in die Zeile darueber ragt. Die drei Bloecke
   greifen dadurch ineinander: grosses Foto, Textflaeche, Hochformat.
   Die Textflaeche liegt oben (z-index 1), damit nichts unleserlich wird. */
/* top:100% ist die Unterkante des grossen Fotos. translateY(-42%) zieht das
   Hochformat um 42 Prozent seiner eigenen Hoehe darueber, also immer gleich
   weit, unabhaengig davon wie hoch der Textblock daneben geworden ist. */
/* Nur ein schmaler Streifen ueberlappt; das Hochformat haengt zu 82 Prozent
   unter dem grossen Foto, damit dessen Motiv sichtbar bleibt. Es sitzt rechts
   der Mitte und schiebt sich mit der rechten Kante unter die Textflaeche.
   Der Papierrand mit weichem Schatten ist derselbe wie bei den Abzuegen auf
   der Ueber-mich-Seite und setzt das Bild vom grossen Foto ab.
   z-index 0 laesst das Hochformat ueber dem grossen Foto liegen, aber unter
   der Textflaeche (z-index 1). Gemessen beruehren sich die beiden nirgends,
   und falls doch einmal, bleibt der Text lesbar. */
.approach-photo-second{position:absolute;left:38%;top:100%;width:46%;margin:0;transform:translateY(-18%);z-index:0;
 background:#fffef9;padding:10px;box-shadow:0 14px 30px #263c3026,0 2px 5px #263c3014}
.approach-photo-second img{width:100%;height:auto;display:block}
/* Jede Zeile koppelt ein Bild an seinen Text. Dadurch stehen Bild und
   Ueberschrift immer auf derselben Hoehe, und alle drei Fotos sind exakt
   gleich gross: Sie liegen alle im Verhaeltnis 3:2 und fuellen dieselbe Spalte. */
.home-celebrations{display:block}
.celebrations-heading{margin:0 0 clamp(32px,4vw,56px)}
.celebrations-line-two{display:inline-block;margin-left:clamp(32px,5vw,110px)}
.celebration-row{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,7vw,110px);align-items:center}
.celebration-row+.celebration-row{margin-top:clamp(40px,5vw,80px)}
.celebration-row figure{width:100%;margin:0}
.celebration-row figure img{width:100%;height:auto;display:block}
.celebration-row article{min-width:0}
.celebration-row h3{margin:0 0 10px}
.celebration-row p{margin:0}
.celebration-row .text-link{margin-top:4px}
/* Bewusst anderes Schema als die uebrigen Abschnitte: Ueberschrift oben,
   Bild ueber die volle Breite, Text darunter in zwei Spalten. Vorher stand
   das Foto klein neben einer schmalen Textspalte. */
.home-content>.home-day{display:block;padding-inline:5%;background:#263c30;color:var(--paper)}
/* Beide Schluesselwoerter in der Handschrift, leicht verschiedene Toene:
   das erste im Rosa des Abschnitts, das zweite waermer Richtung Abendlicht. */
.home-day .heading-hand{color:#edbed0}
.home-day .heading-hand.hand-warm{color:#f6d9b8}
.home-day>img{display:block;width:100%;height:auto;max-height:none;object-fit:contain}
.home-day>div{min-width:0}
/* Hier bewusst Outfit statt Barlow Condensed: Die breitere Schrift traegt
   die volle Abschnittsbreite besser als die schmale Versalienschrift. */
.home-day h2{font-family:Outfit,Arial,sans-serif;font-weight:300;letter-spacing:-.01em;font-size:clamp(32px,3.9vw,62px);line-height:1.12;margin:0 0 clamp(28px,3vw,44px);max-width:22ch}
.day-line-two{display:inline-block;margin-left:clamp(32px,5vw,110px)}
.home-day>img{border-radius:0}
.day-text{display:block;margin-top:clamp(28px,3vw,44px)}
.day-text p+p{margin-top:16px}
.home-day p{margin:0;max-width:none}
.home-day .button{margin-top:clamp(24px,3vw,40px)}
.home-day .button{background:var(--paper);color:#263c30;font-size:15px;min-height:50px;text-align:center;white-space:normal}
.home-day .button:hover{background:#dfe5d9}
.home-day .button:focus-visible{outline-color:var(--paper)}
.home-section-heading{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center;margin-bottom:40px}
.home-section-heading h2{margin:0}
.home-section-heading p{margin:0}
.home-story-grid{display:grid;grid-template-columns:.74fr 1.26fr;gap:clamp(28px,6vw,96px);align-items:center}
.home-story{display:block;text-decoration:none;min-width:0}
.home-story-lake{max-width:380px}
.home-story-mountains{padding-top:50px}
.home-story figcaption{padding-top:18px}
.home-story h3{margin:0 0 6px}
.home-story p{margin:0;font-size:14px}
.home-story figcaption span{display:inline-block;padding-block:12px 4px;font-size:14px;text-decoration:underline;text-underline-offset:5px}
.home-story:hover figcaption span{text-decoration-thickness:2px}
.home-included{background:var(--home-sage);gap:8%}
.home-included .included-copy h2{margin:0 0 24px}
.home-included .included-copy p{margin:0 0 16px}
.home-included .included-list li{border-color:#bcc6b5;padding:18px 0}
.home-included .included-list li:first-child{border-top:0;padding-top:0}
.home-included .included-list span{opacity:1;font-size:15px}
.home-photobooth{display:grid;grid-template-columns:1fr 1.15fr;gap:7%;align-items:center;background:var(--home-rose)}
.photobooth-copy{min-width:0}
.photobooth-copy h2{margin:0 0 24px}
/* Ein einzelnes kurzes Wort in der zweiten Zeile wirkt links verloren.
   Der Einzug rueckt es unter die Mitte der ersten Zeile. */
.heading-hand.hand-indent{margin-left:clamp(30px,5vw,86px)}
.photobooth-copy p{margin:0 0 16px}
.photobooth-images{display:grid;grid-template-columns:1fr .2fr;gap:24px 0}
.photobooth-images figure:first-child{grid-column:1/3;width:88%}
.photobooth-images figure:last-child{grid-column:1/3;justify-self:end;width:65%}
.home-planning{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:start}
.home-planning h2{margin:0}
.home-planning p{margin:0 0 16px}
.planning-links{display:flex;align-items:start;flex-direction:column;gap:4px}
.home-faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:8%;background:#e9ece3}
.home-faq h2{margin:0 0 24px}
.home-faq>div>p{max-width:35ch;margin:0}
.home-faq .faq-item>summary{font-size:17px;padding-block:20px}
.home-faq .faq-item>p{font-size:15px;padding-right:16px}
.home-faq .faq-item>summary::before,.home-faq .faq-item>summary::after{content:'';position:absolute;right:12px;top:50%;width:14px;height:2px;background:currentColor;transform:translateY(-50%)}
.home-faq .faq-item>summary::after{transform:translateY(-50%) rotate(90deg)}
.home-faq .faq-item[open]>summary::after{transform:translateY(-50%)}
@media(min-width:1800px){
 .home-content>section:not(.contact){padding-inline:max(9%,calc((100% - 1440px)/2))}
 .home-content>.home-day{padding-inline:max(5%,calc((100% - 1600px)/2))}
}
@media(max-width:1100px){
 .home-content>section:not(.contact){padding-inline:6%}
 .home-about{gap:40px}
 .celebration-row{gap:40px}
 .approach-copy{margin:30px 0 0 -50px;padding:26px}
 .day-text{grid-template-columns:1fr;gap:18px}
 .home-section-heading .heading-hand{font-size:1.15em}
}
@media(max-width:760px){
 .home-content>section:not(.contact){padding-inline:6%;padding-block:60px}
 .home-content h2{font-size:clamp(36px,7.5vw,52px)}
 .home-content p{font-size:16px}
 .home-about{display:grid;grid-template-columns:1fr;gap:36px}
 .home-about .about-images{grid-template-columns:1fr .65fr;align-items:center;max-width:470px}
 .home-about .about-portrait{max-width:260px}
 .home-about .equipment-photo{grid-column:2;grid-row:1;width:100%;margin-top:90px!important;margin-left:-16px!important;z-index:1}
 
 
 .equipment-photo figcaption{font-size:12px}
 .home-about .about-copy{max-width:100%}
 .home-approach,.approach-heading{display:block}
 .approach-heading{margin-bottom:28px}
 .approach-heading p{margin-top:20px}
 .approach-copy{margin:0;padding:22px;background:var(--home-rose)}
 /* Ohne Ueberlappung braucht es weder negativen Rand noch Zusatzpolster. */
 .home-approach{padding-bottom:var(--home-space)}
 .approach-photos{padding-bottom:0}
 .approach-photo-second{position:static;left:auto;width:100%;margin:18px 0 0;transform:none;padding:8px}
 .celebration-row{grid-template-columns:1fr;gap:20px}
 .celebration-row+.celebration-row{margin-top:40px}
 .home-content>.home-day{display:block}
 .home-day>img{margin-bottom:32px;max-height:none}
 .home-day h2{font-size:clamp(36px,7.5vw,52px)}
 .home-section-heading{grid-template-columns:1fr;gap:24px;margin-bottom:32px}
 .home-section-heading .heading-hand{font-size:1.25em}
 .home-story-grid{gap:28px;grid-template-columns:.9fr 1.1fr;align-items:start}
 .home-story-mountains{padding-top:72px}
 .home-story h3{font-size:26px}
 .home-included,.home-photobooth,.home-planning,.home-faq{grid-template-columns:1fr;gap:32px}
 .photobooth-images{grid-template-columns:1fr 1fr;gap:16px;align-items:start}
 .photobooth-images figure:first-child,.photobooth-images figure:last-child{grid-column:auto;width:100%}
 .photobooth-images figure:last-child{margin-top:32px}
 .home-faq>div>p{max-width:58ch}
}
@media(max-width:420px){
 .home-content h2{font-size:36px}
 .home-content .heading-hand{font-size:1.22em}
 .home-about .about-images{grid-template-columns:1fr .65fr}
 .home-about .about-portrait figcaption{font-size:12px}
 
 
 
 .home-story-grid{grid-template-columns:1fr;gap:36px}
 .home-story-lake{width:78%}
 .home-story-mountains{padding-top:0}
 .home-story h3{font-size:28px}
 .home-content .text-link{font-size:14px}
}

/* Links im Fliesstext hatten nur eine Unterstreichung und exakt die Textfarbe.
   Der Beerenton hebt sie ab und haelt auf allen hellen Flaechen mindestens
   5,4:1 Kontrast (Rose 5,45, Salbei 5,47, Papier 6,14). Der Kontaktabschnitt
   auf dunklem Grund ist ausgenommen, dort waere Beere zu dunkel. */
.home-content p a:not(.text-link):not(.button),
.home-content dd a:not(.text-link):not(.button),
.home-content li a:not(.text-link):not(.button){color:var(--home-berry);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.home-content p a:not(.text-link):not(.button):hover,
.home-content dd a:not(.text-link):not(.button):hover,
.home-content li a:not(.text-link):not(.button):hover{text-decoration-thickness:2px}
.home-content .contact p a:not(.text-link):not(.button){color:inherit}
/* "Hey!" als Auftakt ueber der geraden Zeile, ohne zusaetzlichen Umbruch. */
.home-about h2 .heading-hand.hand-lead{display:block;margin:0;line-height:1}