/* sonyaruben.de — Startseite "Editorial Licht"
   Produktions-Stylesheet, Quelle: design_handoff_startseite/README.md */

/* ---------- Fonts (selbst gehostet, OFL-Lizenzen in assets/fonts/) ---------- */
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:italic;font-weight:400;font-display:swap;
  src:url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:italic;font-weight:500;font-display:swap;
  src:url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Manrope Variable';
  font-style:normal;font-weight:200 800;font-display:swap;
  src:url("../fonts/manrope-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* westsyrischer stil (serto) - der schriftstil von sonyas gemeinde, nicht das
   klassische estrangela der normalen noto sans syriac */
@font-face{
  font-family:'Noto Sans Syriac Western';
  font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/noto-sans-syriac-western-syriac-400-normal.woff2") format("woff2");
  unicode-range:U+0303-0304,U+0307-0308,U+030A,U+0320,U+0323-0325,U+032D-032E,U+0330-0331,U+060C,U+061B-061C,U+061F,U+0621,U+0640,U+064B-0655,U+0660-066C,U+0670,U+0700-074F,U+0860-086A,U+1DF8,U+1DFA,U+200C-200F,U+25CC,U+2670-2671;
}

/* ---------- Tokens ---------- */
:root{
  --paper:#FDFBF7;        /* Seitenhintergrund, warmes Weiß */
  --paper-warm:#F8F1E6;   /* Buch-Band */
  --paper-band:#FBF5EC;   /* Download-Band */
  --ink:#2B2420;          /* Überschriften, fast-Schwarz warm */
  --text:#463C34;         /* Fließtext */
  --muted:#6D6259;        /* Nebentext, Captions (4.5:1 auf paper) */
  --hair:rgba(43,36,32,.14);
  --hair-strong:rgba(43,36,32,.25);
  --accent:#F2700C;       /* Sonyas Orange – nur groß/grafisch */
  --accent-text:#C25706;  /* abgetönt für Text & Buttons (Kontrast) */
  --accent-deep:#A84A04;  /* Hover */
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Manrope Variable','Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,Menlo,Consolas,monospace;
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:72px;--s7:120px;
  --pad-x:clamp(20px, 5vw, 72px);
  --measure:660px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--accent-text)}
a:hover{color:var(--accent)}
a:focus-visible,button:focus-visible,[role="slider"]:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:2px}
img{max-width:100%;height:auto}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.1;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:12px 20px;z-index:99}
.skip-link:focus{left:0;color:#fff}

/* ---------- Kopf ---------- */
.site-header{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;padding:var(--s3) var(--pad-x);border-bottom:1px solid var(--hair)}
.wordmark{display:inline-flex;align-items:center;min-height:44px;font-family:var(--serif);font-size:21px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;color:var(--ink);text-decoration:none}
.site-nav{display:flex;gap:clamp(16px,3vw,38px);align-items:center;flex-wrap:wrap}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.site-nav a:hover{color:var(--accent-text)}
.nav-cta{border:1px solid rgba(242,112,12,.5);border-radius:999px;padding:0 20px;color:var(--accent) !important}
.nav-cta:hover{border-color:var(--accent)}
.lang-toggle{letter-spacing:.2em !important;min-width:44px;justify-content:center}

/* ---------- Hero ---------- */
.hero{padding:clamp(56px,9vw,104px) var(--pad-x) clamp(76px,10.5vw,160px);text-align:center}
.kicker{font:600 12px/1.4 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--accent-text)}
.hero h1{font-size:clamp(44px,6vw,88px);margin:var(--s3) 0 20px;letter-spacing:.01em}
.hero .sub{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2vw,27px);line-height:1.45;color:var(--muted);max-width:720px;margin:0 auto}
.hero-figure{padding:0 var(--pad-x);margin:0;position:relative}
/* sonnenscheibe vom buchcover (sonyas favorit aus feedbackrunde 1):
   stellschrauben: groesse (width), ruhelage (translateY -28%), position (right).
   der scroll-aufgang laeuft ueber eine view-timeline (kein scroll-listener,
   chrome/edge; ohne support bleibt die sonne statisch) und beginnt erst, wenn
   die bildkante den viewport verlaesst - vorher kann die sonne die subline
   konstruktiv nicht erreichen (peek <= hero-padding - 16px) */
.hero-sun{position:absolute;z-index:0;right:calc(var(--pad-x) + 5%);top:0;width:clamp(140px,30vw,440px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 42% 38%,#FFA64D,var(--accent) 72%);transform:translateY(-28%)}
.hero-figure picture,.hero-figure figcaption{position:relative;z-index:1}
@supports (animation-timeline: view()) {
  .hero-figure{view-timeline-name:--hero-fig;view-timeline-axis:block}
  .hero-sun{animation:sun-rise linear both;animation-timeline:--hero-fig;animation-range:exit 0% exit 75%}
}
@keyframes sun-rise{
  from{transform:translateY(-28%)}
  to{transform:translateY(-66%)}
}
.hero-figure img{display:block;width:100%;height:clamp(300px,44vw,620px);object-fit:cover;object-position:50% 55%}
.hero-figure figcaption{display:flex;justify-content:space-between;gap:var(--s2);padding-top:14px;font:500 11px/1.4 var(--mono);letter-spacing:.06em;color:var(--muted)}

/* ---------- Sektionen allgemein ---------- */
.section-label{font:600 12px/1.4 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--accent-text)}
.rule{width:44px;height:1px;background:var(--hair-strong);margin-top:18px}

/* ---------- Über ---------- */
.about{display:grid;grid-template-columns:minmax(220px,360px) 1fr;gap:clamp(40px,6vw,80px);padding:clamp(64px,8vw,120px) var(--pad-x) clamp(60px,7vw,110px)}
.about-body{max-width:var(--measure)}
.about-body p{font:300 16.5px/1.9 var(--sans);color:var(--text);margin-bottom:26px}
.dropcap::first-letter{float:left;font-family:var(--serif);font-size:76px;line-height:.76;padding:10px 14px 0 0;color:var(--accent);font-weight:500}
.pull-quote{font-family:var(--serif);font-style:italic;font-size:clamp(24px,2.4vw,31px);line-height:1.4;color:var(--ink);margin:var(--s4) 0 14px}
.byline{font:500 12px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.byline a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hair-strong)}
.byline a:hover{color:var(--accent-text)}

/* ---------- Buch ---------- */
.book{background:var(--paper-warm);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:clamp(64px,8vw,110px) var(--pad-x);position:relative;overflow:hidden}
/* geisterwort in coverschrift, laeuft rechts unten aus dem band (langneutral:
   "chance" traegt DE- und EN-titel). stellschrauben: deckkraft (color alpha),
   groesse (font-size) */
.book-word{position:absolute;right:-.06em;bottom:-.24em;font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(150px,24vw,330px);line-height:1;color:rgba(242,112,12,.13);pointer-events:none;user-select:none;white-space:nowrap}
.book-grid{display:grid;grid-template-columns:300px 1fr;gap:clamp(40px,6.5vw,90px);align-items:center;max-width:1180px;margin:0 auto;position:relative;z-index:1}
.book h2{font-size:clamp(38px,3.8vw,52px);margin:20px 0 18px}
.meta{font:500 12.5px/1.6 var(--mono);letter-spacing:.04em;color:var(--muted);margin-bottom:24px}
.book-blurb{font:300 16px/1.85 var(--sans);color:var(--text);max-width:560px;margin-bottom:34px}
.shop-links{display:flex;flex-wrap:wrap;gap:12px;max-width:620px;padding:0;margin:0;list-style:none}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 24px;border-radius:999px;font:600 13.5px/1 var(--sans);text-decoration:none;transition:background .2s ease-out,color .2s ease-out,border-color .2s ease-out}
.btn-solid{background:var(--accent);color:#fff}
.btn-solid:hover{background:var(--accent-text);color:#fff}
.btn-ghost{border:1px solid var(--hair-strong);color:var(--ink);font-weight:500}
.btn-ghost:hover{border-color:var(--accent-text);color:var(--accent-text)}
.btn .ext{font-size:11px;color:inherit}
.btn-ghost .ext{color:var(--accent-text)}
.shop-note{font:400 12.5px/1.6 var(--sans);color:var(--muted);margin-top:18px}
/* Buchcover (Original-Scan) */
.cover{width:300px;height:456px;margin:0;border-radius:3px;overflow:hidden;background:#3A2430;box-shadow:0 30px 60px -20px rgba(70,35,5,.4),0 6px 16px rgba(70,35,5,.16)}
.cover img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- Verse (ohne JS statische Liste, mit JS Karussell) ---------- */
.verse{padding:clamp(80px,9.5vw,140px) var(--pad-x);text-align:center;position:relative}
/* unsichtbares handwerk: warmer licht-halo hinter dem vers, kein element.
   stellschraube: alpha (aktuell .06) */
.verse::before{content:"";position:absolute;left:50%;top:50%;width:min(720px,90vw);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(242,112,12,.06),rgba(242,112,12,0) 72%);pointer-events:none}
.verse-dots,.verse-row{position:relative}
/* punkte: ohne js nur der erste (deko wie im handoff), mit js einer je vers */
.verse-dots{display:flex;justify-content:center;margin-bottom:12px}
.dot-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer}
.dot-btn:first-child{display:inline-flex}
.js .dot-btn{display:inline-flex}
.dot-btn .dot{width:8px;height:8px;border-radius:50%;background:var(--hair-strong);transition:background .2s ease-out,transform .2s ease-out}
.dot-btn:hover .dot{background:var(--accent-text)}
.dot-btn[aria-current="true"] .dot{background:var(--accent);transform:scale(1.25)}
.verse-row{display:flex;align-items:center;justify-content:center;gap:clamp(8px,3vw,36px)}
.verse-stack{max-width:840px}
.verse-item{font-family:var(--serif);font-style:italic;font-size:clamp(26px,3vw,40px);line-height:1.45;color:var(--ink);margin:0}
.verse-item + .verse-item{margin-top:var(--s5)}
.verse cite{display:block;font:600 12px/1.4 var(--sans);font-style:normal;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-top:30px}
.js .verse-stack{display:grid;align-items:center}
.js .verse-item{grid-area:1/1;margin-top:0;opacity:0;visibility:hidden;transition:opacity .45s ease-out,visibility 0s linear .45s}
.js .verse-item.is-active{opacity:1;visibility:visible;transition:opacity .45s ease-out}
.verse-nav{width:44px;height:44px;flex:none;border:none;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:color .2s ease-out}
.verse-nav:hover{color:var(--accent-text)}

/* ---------- Downloads ---------- */
.downloads{background:var(--paper-band);border-top:1px solid var(--hair);padding:clamp(64px,8vw,100px) var(--pad-x)}
.downloads-inner{max-width:1180px;margin:0 auto}
.downloads-head{margin-bottom:48px}
.downloads-head h2{font-size:clamp(34px,3.4vw,48px);margin-top:18px}
.downloads-head .intro{font:300 15px/1.8 var(--sans);color:var(--text);max-width:560px;margin-top:18px}
.dl-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.dl-card{background:#fff;border:1px solid rgba(43,36,32,.12);border-radius:6px;padding:clamp(28px,3vw,44px);display:flex;flex-direction:column}
/* beide karten teilen dieselben gedachten linien: kopfzone fix 42px
   (hoehe der syriac-zeile), aktionen unten buendig via margin-top auto */
.dl-card .top{display:flex;justify-content:flex-end;align-items:center;gap:var(--s2);min-height:42px}
.syriac{font-family:'Noto Sans Syriac Western',var(--serif);font-size:26px;color:var(--accent-text);opacity:.85}
.dl-card h3{font-size:30px;font-weight:500;margin:24px 0 8px}
.dl-card .desc{font:400 14px/1.7 var(--sans);color:var(--muted);margin-bottom:30px}
.dl-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:auto}
.quiet-link{display:inline-flex;align-items:center;min-height:44px;font:500 13.5px/1 var(--sans);color:var(--text);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--hair-strong)}
.quiet-link:hover{color:var(--accent-text)}
.dl-footnote{text-align:center;font:400 13px/1.6 var(--sans);color:var(--muted);margin-top:34px}

/* ---------- Audio-Player (progressive enhancement) ----------
   ohne JS: natives <audio controls>; mit JS (html.js) eigenes UI */
.player{display:none;align-items:center;gap:16px;margin:22px 0 30px}
.js .player{display:flex}
.player-native{display:block;width:100%;margin:22px 0 30px}
.js .player-native{display:none}
.player .play{width:46px;height:46px;border-radius:50%;background:var(--accent);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;transition:background .2s ease-out}
.player .play:hover{background:var(--accent-text)}
.player .play .tri{width:0;height:0;border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.player .play .bars{display:none;width:12px;height:16px;border-left:4px solid #fff;border-right:4px solid #fff}
.player.playing .play .tri{display:none}
.player.playing .play .bars{display:block}
.player .track{flex:1}
.player .bar{height:3px;background:rgba(43,36,32,.15);border-radius:2px;position:relative;cursor:pointer;touch-action:none;padding:0}
.player .bar::before{content:"";position:absolute;inset:-21px 0}/* 45px Trefferfläche */
.player .fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent-text);border-radius:2px}
.player .time{display:flex;justify-content:space-between;font:500 11px/1 var(--mono);color:var(--muted);margin-top:9px}
/* fassungs-umschalter in der top-zone der audio-card. leise gehalten: die
   aktive fassung traegt paper-warm statt orange, damit die karte nur einen
   akzentfarbenen knopf behaelt */
.audio-variants{display:inline-flex;gap:3px;padding:3px;border:1px solid var(--hair-strong);border-radius:999px}
.audio-variants a{display:inline-flex;align-items:center;padding:7px 14px;border-radius:999px;font:500 12px/1 var(--sans);letter-spacing:.04em;color:var(--muted);text-decoration:none}
.audio-variants a:hover{color:var(--ink)}
.audio-variants a.is-on{background:var(--paper-warm);color:var(--ink)}

/* ---------- Charity ---------- */
.charity{padding:clamp(64px,8.5vw,120px) var(--pad-x)}
.charity-inner{display:grid;grid-template-columns:1fr 430px;gap:clamp(40px,6.5vw,90px);align-items:center;max-width:1180px;margin:0 auto}
.charity h2{font-size:clamp(38px,3.8vw,52px);line-height:1.12;margin:20px 0 22px}
.charity .body{font:300 16px/1.85 var(--sans);color:var(--text);max-width:540px;margin-bottom:36px}
.charity-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
/* margin:0 muss sein - der ua-default fuer <figure> ist "1em 40px" und haette
   das polaroid um 40px gegen den text der sektion versetzt (wie bei
   .hero-figure und .cover) */
.polaroid{justify-self:end;margin:0;background:#fff;border:1px solid rgba(43,36,32,.12);padding:16px 16px 20px;box-shadow:0 22px 44px -18px rgba(70,35,5,.28);transform:rotate(-1.6deg);max-width:412px}
.polaroid img{display:block;width:100%}
.polaroid figcaption{font:500 11px/1.5 var(--mono);letter-spacing:.06em;color:var(--muted);margin:14px 4px 0}

/* ---------- Unterricht (Abschluss der Seite, Anfrage auf lessons/unterricht.php) ---------- */
.lesson{background:var(--paper-warm);border-top:1px solid var(--hair);padding:clamp(64px,8vw,110px) var(--pad-x);text-align:center}
.lesson-inner{max-width:640px;margin:0 auto}
/* dieselbe serto-zeile wie in der download-karte, hier groesser als ruhiger
   auftakt. line-height traegt die vokalzeichen ueber und unter der grundlinie */
.lesson .syriac{font-size:clamp(28px,4vw,42px);line-height:1.7;margin-top:18px}
/* cormorant setzt ziffern per default als mediaevalziffern - dort liest sich
   "1:1" wie "i:i". lining-nums stellt die versalziffern her */
.lesson h2{font-size:clamp(32px,3.4vw,46px);line-height:1.18;margin:14px 0 20px;font-variant-numeric:lining-nums}
.lesson .body{font:300 16px/1.85 var(--sans);color:var(--text)}
/* preiszeile: dunkler und schwerer als der fliesstext, und sie sitzt dicht am
   button - preis und handlung sollen als eine einheit gelesen werden */
.lesson .price{font:600 18px/1.5 var(--sans);color:var(--ink);margin-top:30px}
/* die umsatzsteuer-angabe als eigene, leisere zeile darunter. kontrast von
   --muted auf --paper-warm ist 5,3:1, das traegt */
.lesson .vat{display:block;font:400 12.5px/1.6 var(--sans);color:var(--muted);margin-top:6px}
.lesson-actions{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:16px}
.lesson .note{font:400 12.5px/1.6 var(--sans);color:var(--muted);margin-top:26px}
/* "unverbindlich" neben dem button erbt .lesson .note, aber nicht dessen
   abstand nach oben - es sitzt in derselben zeile wie der button */
.lesson-actions .note{margin-top:0}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--hair);padding:var(--s5) var(--pad-x);display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap}
.site-footer .wordmark{font-size:17px;color:var(--text)}
.footer-nav{display:flex;gap:clamp(16px,3vw,32px);flex-wrap:wrap}
.footer-nav a{display:inline-flex;align-items:center;min-height:44px;font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.footer-nav a:hover{color:var(--accent-text)}
.copyright{font:400 12px/1.4 var(--sans);color:var(--muted)}

/* ---------- Impressum & Datenschutz ---------- */
.legal-main{max-width:760px;margin:0 auto;padding:clamp(48px,7vw,90px) var(--pad-x) clamp(64px,8vw,120px)}
.legal-main h1{font-size:clamp(38px,4.5vw,56px);margin:14px 0 0}
.legal-section{margin-top:clamp(48px,6vw,72px)}
.legal-section h2{font-size:clamp(28px,3vw,36px);margin-bottom:var(--s3)}
.legal-text h3{font:600 12px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text);margin:var(--s4) 0 10px}
.legal-text p{font:300 15.5px/1.8 var(--sans);color:var(--text);margin-bottom:12px}
.legal-text p.hint{font-size:12.5px;color:var(--muted)}
.legal-text a{color:var(--accent-text)}

/* ---------- Scroll-Reveal (progressive enhancement) ---------- */
.js-reveal .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease-out,transform .7s ease-out}
.js-reveal .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .js-reveal .reveal{opacity:1;transform:none}
  .hero-sun{animation:none !important;transform:translateY(-28%)}
}

/* ---------- Responsiv ---------- */
@media (max-width: 1000px){
  .about{grid-template-columns:1fr;gap:var(--s4)}
  .rule{margin-bottom:0}
  .book-grid{grid-template-columns:1fr;justify-items:center;text-align:left}
  .dl-grid{grid-template-columns:1fr}
  /* wie .book-grid: die bloecke stehen mittig, der text darin bleibt linksbuendig */
  .charity-inner{grid-template-columns:1fr;justify-items:center;text-align:left}
  .polaroid{justify-self:center}
}
@media (max-width: 640px){
  .hero-figure img{height:64vw}
  .site-header{justify-content:center}
  .cover{width:250px;height:380px}
  /* vers-zitat volle breite, beide pfeile darunter zentriert */
  .verse-row{flex-wrap:wrap;gap:4px}
  .verse-stack{flex:1 1 100%;order:-1}
  .verse-nav{margin-top:8px}
}