/* One material and one deformation for a leaf, both at rest and in flight. */
.guestbook:not(.is-near) .guestbook__stage::before,
.guestbook:not(.is-near) .guestbook__sheet { background-image:none !important; }
.guestbook { padding-block:var(--sektion-abstand); background:var(--color-cream); row-gap:var(--space-lg); scroll-margin-top:7rem; }
.guestbook__heading { grid-column:inhalt-start / span 6; }
.guestbook__heading .label { color:var(--color-gold-text); margin-bottom:var(--space-md); }
.guestbook__heading h2 { max-width:22ch; margin:0; font:500 2.7rem/1.15 var(--font-display); letter-spacing:-.035em; text-wrap:balance; }
.guestbook__heading em { color:var(--color-burgundy); display:block; }
.guestbook__intro { grid-column:8 / inhalt-ende; align-self:end; }
.guestbook__intro p { max-width:38ch; color:var(--color-ink-soft); line-height:1.7; margin:0 0 1rem; }
.guestbook__google { position:relative; display:inline-block; color:var(--color-burgundy); text-decoration:none; }
.guestbook__google::after { content:''; position:absolute; left:0; right:0; bottom:-.15em; height:1px; background:currentColor; clip-path:inset(0); transition:clip-path 180ms var(--ease-out); pointer-events:none; }
@media(hover:hover) and (pointer:fine) { .guestbook__google:hover::after { clip-path:inset(0 0 0 100%); } }
.guestbook[data-hover="mouse"] .guestbook__google:hover::after { clip-path:inset(0 0 0 100%); }
.guestbook__google:focus-visible::after { transition:none; }
@media(prefers-reduced-motion:reduce) { .guestbook__google::after { transition:none; } }
.guestbook__filter-defs { position:absolute; pointer-events:none; overflow:hidden; }
.guestbook__stage { --book-grow:0px; --book-type-width:min(1280px,calc(100cqw - var(--book-grow))); grid-column:inhalt-start / inhalt-ende; width:min(100%,1400px); justify-self:center; position:relative; aspect-ratio:1860/730; margin-block:1rem 3rem; isolation:isolate; container-type:inline-size; }
.guestbook__stage::before { content:''; position:absolute; z-index:0; left:0; top:-9.58904%; width:100%; height:109.58904%; background:url('../images/guestbook/journal-ci-final.webp') center/100% 100% no-repeat; pointer-events:none; }
.guestbook__book { position:absolute; inset:4.5% 2.5% 8%; z-index:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:minmax(0,1fr); perspective:1800px; touch-action:pan-y; }
.guestbook__page { position:relative; display:flex; align-items:center; min-width:0; height:100%; padding:20px 12%; color:var(--color-ink); background:none; overflow:visible; z-index:1; filter:none; }
.guestbook__page[data-paper="b"] { filter:none; }
.guestbook__page[hidden] { display:none; }
/* The ribbon never changes layer or position. Subsequent left leaves settle
   ABOVE it; the original first leaf always stays BELOW it. */
.guestbook__page--over-ribbon { z-index:4; }
.guestbook__ribbon { position:absolute; z-index:3; left:calc(50% - 60px); top:-16px; width:auto; max-width:none; height:calc(100% + 90px); object-fit:contain; transform:rotate(-.4deg) skewY(8deg); transform-origin:top center; pointer-events:none; filter:drop-shadow(2px 2px 2px #40201938); }
/* Mask only the material INSIDE the deforming leaf, not the filtered output. */
.guestbook__sheet { position:absolute; inset:0; pointer-events:none; background:#eee1ca url('../images/guestbook/journal-bogen-blatt-v2-links.webp') center/100% 140%; -webkit-mask:url('../images/guestbook/seitenkante-a.svg') center/100% 100% no-repeat; mask:url('../images/guestbook/seitenkante-a.svg') center/100% 100% no-repeat; }
.guestbook__page[data-paper="b"] .guestbook__sheet { background-image:url('../images/guestbook/journal-bogen-blatt-v2-rechts.webp'); -webkit-mask-image:url('../images/guestbook/seitenkante-b.svg'); mask-image:url('../images/guestbook/seitenkante-b.svg'); }
.guestbook__sheet::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent 80%,#67421c09 94%,#4d2e162e); }
.guestbook__page[data-paper="b"] .guestbook__sheet::after { transform:scaleX(-1); }
.guestbook__entry { position:relative; z-index:1; width:100%; }
.guestbook__stars { margin:0 0 1rem; color:var(--color-gold-text); font-size:.75rem; letter-spacing:.18em; }
.guestbook__entry blockquote { margin:0; }
.guestbook__entry blockquote p { position:relative; margin:0; font:400 clamp(1rem,calc(var(--book-type-width) * .02),1.25rem)/1.6 var(--font-display); max-width:28ch; text-wrap:pretty; }
.guestbook__entry blockquote p::before { content:'„'; position:absolute; right:100%; }
.guestbook__entry blockquote p::after { content:'“'; }
.guestbook__page:lang(en) blockquote p::before { content:'“'; }
.guestbook__page:lang(en) blockquote p::after { content:'”'; }
.guestbook__signature { margin:1rem 0 0; color:var(--color-burgundy); font:400 clamp(1.5rem,calc(var(--book-type-width) * .03),2rem)/1.3 var(--font-script); }
.guestbook__bottom { grid-column:inhalt-start / inhalt-ende; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1rem; width:100%; justify-self:center; }
.guestbook__note { max-width:48ch; margin:0; font-size:.75rem; line-height:1.6; color:var(--color-ink-soft); }
.guestbook__controls { display:flex; align-items:center; gap:.6rem; }
.guestbook__controls[hidden],.guestbook__hint { display:none; }
.guestbook__controls button { width:48px; height:48px; border:0; background:transparent; color:var(--color-burgundy); font:400 1.6rem var(--font-body); cursor:pointer; border-radius:50%; }
.guestbook__controls button:disabled { opacity:.3; cursor:default; }
.guestbook__position { min-width:7.5rem; text-align:center; font-size:.75rem; font-variant-numeric:tabular-nums; color:var(--color-ink-soft); }
.guestbook :is(a,button):focus-visible { outline:2px solid var(--color-burgundy); outline-offset:4px; }
.guestbook__book:focus-visible { outline:none; }
.guestbook__stage:has(.guestbook__book:focus-visible) { outline:2px solid var(--color-burgundy); outline-offset:8px; }
.guestbook__colophon .guestbook__entry { text-align:center; }
.guestbook__logo { display:block; width:clamp(155px,20cqw,230px); max-width:80%; height:auto; margin:0 auto; }
.guestbook__colophon h3 { font:500 1.5rem var(--font-display); color:var(--color-burgundy); margin:1rem 0 .6rem; }
.guestbook__colophon p { font-size:.9rem; color:var(--color-ink-soft); }
.guestbook__colophon .guestbook__endmark { font:400 3rem var(--font-script); color:var(--color-burgundy); margin:0; }
.guestbook__colophon .guestbook__closing { margin:1rem 0; color:var(--color-ink); font:400 clamp(1.5rem,calc(var(--book-type-width) * .026),1.875rem)/1.5 var(--font-script); }
.guestbook__colophon .btn { font-size:.65rem; padding:.65rem .75rem; white-space:normal; }
/* Arrow hover is handled by the shared color wave in style.css. */
@media(min-width:1600px) {
 .guestbook { grid-template-rows:auto auto 1fr auto; column-gap:var(--space-lg); }
 .guestbook__heading { grid-column:inhalt-start / span 4; grid-row:1; align-self:end; }
 .guestbook__intro { grid-column:inhalt-start / span 4; grid-row:2; align-self:start; }
 .guestbook__intro p { max-width:34ch; }
 .guestbook__stage { --book-grow:clamp(1.5rem,3vw,3rem); width:min(calc(100% + var(--book-grow)),1400px); justify-self:start; grid-column:6 / inhalt-ende; grid-row:1 / 4; margin-top:0; margin-bottom:1.5rem; align-self:center; }
 .guestbook__bottom { grid-column:6 / inhalt-ende; grid-row:4; width:min(calc(100% + clamp(1.5rem,3vw,3rem)),1400px); justify-self:start; }
 .guestbook__heading h2 { font-size:2.5rem; }
}
@media(min-width:901px) and (max-width:1599px) {
 .guestbook__stage { --book-grow:clamp(1.5rem,4vw,4rem); width:calc(100% + var(--book-grow)); max-width:calc(100vw - 2rem); margin-top:3rem; }
 .guestbook__bottom { width:calc(100% + clamp(1.5rem,4vw,4rem)); max-width:calc(100vw - 2rem); }
}
@media(max-width:900px) {
 .guestbook { padding-block:2.5rem 2rem; }
 .guestbook__heading,.guestbook__intro { grid-column:inhalt-start / inhalt-ende; }
 .guestbook__heading h2 { font-size:2.2rem; }
 .guestbook__stage { grid-column:voll-start / voll-ende; width:100%; aspect-ratio:1122/1402; min-height:0; max-width:500px; justify-self:start; margin-top:-1rem; margin-bottom:0; transform:none; }
 .guestbook__stage::before { top:0; height:100%; background-image:url('../images/guestbook/journal-mobile-right-v4.webp'); background-size:100% 100%; background-position:left center; }
 .guestbook__book { inset:4.5% 5% 8%; grid-template-columns:minmax(0,1fr); }
 .guestbook__page[data-paper] { filter:none; }
 .guestbook__page[data-paper] .guestbook__sheet { background-image:url('../images/guestbook/journal-bogen-blatt-v2-links.webp'); -webkit-mask-image:url('../images/guestbook/seitenkante-a.svg'); mask-image:url('../images/guestbook/seitenkante-a.svg'); }
 .guestbook__page[data-paper="b"] .guestbook__sheet::after { transform:none; }
 .guestbook__ribbon { left:6px; top:-22px; height:calc(100% + 105px); }
 .guestbook__entry blockquote p { font-size:clamp(.9rem,4.2vw,1.05rem); line-height:1.45; }
 .guestbook__signature { font-size:clamp(1.25rem,6vw,1.5rem); margin-top:.75rem; }
 .guestbook__stars { margin-bottom:.75rem; }
 .guestbook__colophon h3 { font-size:1.25rem; margin:.6rem 0 .4rem; }
 .guestbook__colophon .guestbook__endmark { font-size:2.4rem; }
 .guestbook__colophon .guestbook__closing { font-size:1.1rem; margin:.8rem 0; }
 .guestbook__colophon .btn { font-size:.65rem; padding:.6rem; }
 .guestbook__bottom { flex-direction:column-reverse; margin-top:-1rem; }
 .guestbook__note { text-align:center; }
}
.guestbook:not(.is-enhanced) .guestbook__stage { aspect-ratio:auto; }
.guestbook:not(.is-enhanced) .guestbook__stage::before,.guestbook:not(.is-enhanced) .guestbook__ribbon { display:none; }
.guestbook:not(.is-enhanced) .guestbook__book { position:relative; inset:auto; grid-auto-rows:auto; }
.guestbook:not(.is-enhanced) .guestbook__page { filter:none; padding:2rem; }
/* The two transparent GPU surfaces are the physical sheets. The semantic
   articles remain available to assistive technology and retain real links. */
.guestbook.is-loading .guestbook__book { visibility:hidden; }
.guestbook.is-canvas .guestbook__book { inset:0; perspective:none; }
.guestbook__surface { position:absolute; left:0; width:100%; max-width:none; pointer-events:none; }
.guestbook__surface--base { z-index:1; }
.guestbook__surface--top { z-index:5; }
.guestbook__hint-trigger { position:absolute; right:4%; bottom:8%; width:1px; height:1px; pointer-events:none; }
.guestbook.is-canvas .guestbook__page { position:absolute; margin:0; filter:none; z-index:6; pointer-events:none; background:none; }
.guestbook.is-canvas .guestbook__sheet { display:none; }
.guestbook.is-canvas .guestbook__entry > p,
.guestbook.is-canvas .guestbook__entry > img,
.guestbook.is-canvas .guestbook__entry h3,
.guestbook.is-canvas .guestbook__entry blockquote { opacity:0; }
.guestbook.is-canvas .guestbook__entry a { pointer-events:auto; transform-origin:center; color:transparent !important; border-color:transparent !important; background:transparent !important; }
.guestbook.is-canvas .guestbook__ribbon { top:calc(4.5% - 25px); height:calc(87.5% + 90px); }
.guestbook__inspector { position:fixed; left:16px; bottom:16px; z-index:10000; background:white; padding:8px; display:flex; gap:8px; border:1px solid var(--color-burgundy); }
@media(max-width:900px) {
 .guestbook.is-canvas .guestbook__stage::before { top:0; height:100%; background-image:url('../images/guestbook/journal-mobile-right-v4.webp'); background-size:100% 100%; background-position:left center; background-size:100% 100%; background-position:left center; }
 .guestbook.is-canvas .guestbook__ribbon { left:calc(11.14082% - 46px); top:calc(9% - 14px); height:calc(84% + 60px); translate:-14px 0; }
}

/* Only the curved canvas draws the button; the DOM link is its hit area. */
.guestbook.is-canvas .guestbook__entry a::before,
.guestbook.is-canvas .guestbook__entry a::after { content:none !important; }
.guestbook.is-canvas .guestbook__entry a { box-shadow:none !important; }

@media(max-width:380px) {
 .guestbook__entry blockquote p { font-size:.875rem; line-height:1.35; }
 .guestbook__signature { font-size:1.25rem; line-height:1.2; margin-top:.5rem; }
 .guestbook__stars { margin-bottom:.5rem; }
}
