:root{--paper:#f1ede2;--ink:#283423;--olive:#536044;--sage:#dce1d2;--rule:rgba(40,52,35,.22)}
.light{background:var(--paper);color:var(--ink)}
.wrap{width:min(1280px,100% - 112px);margin:auto}
.wrap h2{font-size:clamp(46px,5.6vw,88px);line-height:.98;letter-spacing:-.045em;margin:0;font-weight:400}
.wrap h2 em{font-weight:400;color:var(--olive)}
.wrap p{font-size:16px;line-height:1.65}
.wrap h3{font-size:36px;font-weight:400;letter-spacing:-.025em}
.wrap a{color:inherit}
.section-label{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--rule);padding-top:19px;margin-bottom:52px;font:500 11px/1.5 Karla,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.eyebrow{font:500 11px/1.5 Karla,sans-serif!important;letter-spacing:.15em;text-transform:uppercase}
.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.skip:focus{position:fixed;top:10px;left:10px;background:var(--paper);color:var(--ink);padding:12px;z-index:100}
button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:wait}
/* ══ Aufklapper sichtbar machen ═══════════════════════════════════════
   05.09.2026: Matze hat erst nach Stunden gemerkt, dass sich „Die Olive
   ganz aus der Nähe" antippen lässt. Was klickbar ist, muss man sehen.
   Deshalb: gerahmte Zeile, runde Schaltfläche mit + bzw. −, und darunter
   in klein, was passiert. Das Zeichen wechselt über content — NICHT über
   ein transform, sonst zeichnet iOS die Schrift wieder als Bild.       */
details > summary{cursor:pointer;list-style:none}
details > summary::-webkit-details-marker{display:none}
.sum-text{display:block}
.sum-titel{display:block}
.sum-hinweis{display:block;margin-top:5px;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;opacity:.72}
.sum-hinweis::after{content:'Antippen zum Aufklappen'}
details[open] .sum-hinweis::after{content:'Antippen zum Zuklappen'}
.sum-zeichen{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;
  border-radius:50%;border:1px solid currentColor;font-size:16px;line-height:1}
.sum-zeichen::after{content:'+'}
details[open] .sum-zeichen::after{content:'\2212'}

.extra-film{border-top:1px solid var(--rule);font-size:12px}
.extra-film summary{display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin:16px 0 6px;padding:15px 18px;color:var(--gold);
  border:1px solid #a28e5966;transition:background .25s,border-color .25s}
.extra-film summary:hover,.extra-film summary:focus-visible{background:#a28e5914;border-color:#a28e59}
.extra-film .sum-titel{font-size:13px}

#recht details{width:100%}
#recht summary{display:flex;align-items:center;justify-content:space-between;gap:18px;
  width:100%;max-width:340px;padding:13px 16px;border:1px solid var(--rule);
  transition:background .25s}
#recht summary:hover,#recht summary:focus-visible{background:#ffffff14}
#recht .sum-titel{font-size:12px}
#recht .sum-zeichen{width:26px;height:26px;font-size:14px}

/* Die Monatsreiter sahen aus wie blosse Beschriftungen. */
.tab-hinweis{margin:0 0 10px;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--olive);opacity:.75}
.season-tabs button{cursor:pointer}
.season-tabs button::before{content:'';position:absolute;left:0;right:15px;bottom:-1px;
  height:1px;background:currentColor;opacity:.35}
.season-tabs button[aria-selected=true]::before{opacity:0}

/* Die Kapitelleiste laesst sich auf dem Handy schieben. Damit das
   angeschnittene letzte Wort nicht wie ein Fehler aussieht, liegt am
   rechten Rand eine Blende — ein schlichtes Kaestchen mit Verlauf,
   KEINE Maske und kein Filter: sonst zeichnet iOS die Schrift als Bild. */
.nav-blende{display:none;position:absolute;top:1px;bottom:1px;width:34px;
  pointer-events:none;background:linear-gradient(90deg,rgba(241,237,226,0),#f1ede2 78%)}
.chapter-nav{position:sticky;top:0;z-index:30;background:#f1ede2;color:var(--ink);display:flex;align-items:center;justify-content:space-between;padding:16px 4%;gap:28px;border-bottom:1px solid var(--rule);}
.chapter-nav a{color:inherit;text-decoration:none}.brand{font:500 34px/.8 Cormorant,serif;letter-spacing:-2px;display:block}.brand span{font:500 8px/1.2 Karla,sans-serif;letter-spacing:2px;display:block;margin:8px 0 0 3px}
.nav-links{display:flex;align-items:center;gap:32px;font-size:12px}.nav-links a{position:relative;padding:8px 0}.nav-links a::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}.nav-links a:hover::after,.nav-links a[aria-current]::after{transform:scaleX(1)}
#motion{border:1px solid var(--rule);background:transparent;color:inherit;border-radius:50%;width:34px;height:34px;font-size:12px;flex-shrink:0}
main section[id],main div[id],main figure[id]{scroll-margin-top:110px}
.origin{padding:75px 0 0}.origin-heading{display:grid;grid-template-columns:1.3fr 1fr;gap:8%;align-items:end;margin-bottom:52px}.intro{max-width:400px}.intro p:first-child{font-size:20px;line-height:1.5}.intro strong{font-weight:500}.text-link{font-size:12px;text-transform:uppercase;letter-spacing:.05em;text-decoration:none;display:inline-flex;gap:28px;border-bottom:1px solid var(--ink);padding-bottom:7px}
.landscape{display:grid;grid-template-columns:1.75fr 1fr;gap:36px;align-items:stretch}.grove{position:relative;overflow:hidden;min-height:420px}.grove>img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform 1s}.grove:hover>img{transform:scale(1.025)}.grove::after{content:'';position:absolute;inset:40% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.6));pointer-events:none}.grove figcaption{position:absolute;z-index:1;bottom:24px;left:24px;right:24px;display:flex;justify-content:space-between;gap:20px;font-size:11px;color:white}
.island{padding:25px 30px 0;background:#e7e8dc;display:flex;flex-direction:column}.island .eyebrow{margin:0}#map{height:220px;margin:5px auto 0;width:100%;max-width:330px}#map svg{width:100%;height:100%;overflow:visible}.map-outline{fill:#d1d7c5;stroke:#68715a;stroke-width:1.5;vector-effect:non-scaling-stroke}.map-point{fill:#526044}.map-ring{fill:none;stroke:#526044;stroke-width:2;vector-effect:non-scaling-stroke;animation:map-pulse 3s ease-out infinite;transform-origin:896.4px 398.9px}@keyframes map-pulse{0%{transform:scale(.5);opacity:1}100%{transform:scale(2);opacity:0}}.map-caption{display:flex;justify-content:space-between;font-size:12px!important;margin-bottom:24px}.map-caption span{font-style:italic}.local-time{margin-top:auto;border-top:1px solid var(--rule);padding:16px 0 18px;display:grid;grid-template-columns:1fr 1fr;align-items:center;font-size:11px}.local-time time{font:400 34px/1 Cormorant,serif;text-align:right}.local-time>div{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;margin-top:13px;font-size:10px}.local-time b{font-weight:500}
.principles{display:flex;justify-content:space-between;gap:16px;padding:28px 0 32px;border-bottom:1px solid var(--rule);font:400 clamp(20px,2.5vw,32px)/1.2 Cormorant,serif}.principles i{font-style:normal;font-size:24px;vertical-align:middle;margin-right:8px;color:var(--olive)}
.making{padding:80px 0 90px}.making .section-label{border:0;padding-top:0;margin-bottom:40px}.making-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:45px}.making-heading h2{font-size:clamp(40px,4.4vw,64px)}.making-heading>p{max-width:320px;margin:0}.process-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px}.picture{height:330px;position:relative;overflow:hidden}.picture img{width:100%;height:100%;object-fit:cover;transition:transform 1s}.picture:hover img{transform:scale(1.035)}#hand .picture img{object-position:50% 75%;transform:scale(1.25)}#hand .picture:hover img{transform:scale(1.29)}.picture-number{position:absolute;top:18px;left:18px;font-size:12px;border:1px solid rgba(255,255,255,.65);color:white;border-radius:50%;display:grid;place-items:center;width:34px;height:34px;background:#28342355}.process-grid figcaption{display:flex;justify-content:space-between;gap:20px;align-items:baseline;margin-top:20px}.process-grid h3{font-size:30px;margin:0}.process-grid p{font-size:12px;margin:0}.oil-pass{margin-top:54px;padding-top:35px;border-top:1px solid var(--rule);display:grid;grid-template-columns:1fr 2fr;gap:40px}.oil-pass h3{font-size:42px;line-height:1}.oil-pass dl>div{display:grid;grid-template-columns:130px 1fr;gap:20px;border-bottom:1px solid var(--rule);padding:10px 0;font-size:13px;line-height:1.5}.oil-pass dt{color:var(--olive)}.oil-pass dd{margin:0}
.cinema{background:#100f0a;color:var(--paper);padding:70px 0 45px;overflow:hidden;--rule:#d7ba7540}.cinema .section-label{color:var(--gold);margin-bottom:32px}.cinema-grid{display:grid;grid-template-columns:1fr 1.15fr;align-items:center;gap:40px}.cinema-copy{position:relative;z-index:2}.cinema .eyebrow{color:var(--gold);margin-bottom:26px}.cinema h2{font-size:clamp(54px,6vw,88px);margin-bottom:28px}.cinema h2 em{color:var(--gold)}.cinema-copy>p{color:#b6b1a1}.play-button{display:flex;gap:22px;align-items:center;border:0;background:transparent;color:var(--paper);padding:0;font-size:14px;margin:30px 0 14px}.play-button>span{display:grid;place-items:center;border:1px solid #a28e59;border-radius:50%;width:55px;height:55px;font-size:12px;transition:background .3s,color .3s}.play-button:hover>span{background:var(--gold);color:#100f0a}.film-note{font-size:11px!important;color:#a7a18e!important}.film-stage{position:relative;aspect-ratio:1;margin:38px 0;isolation:isolate}.film-window{position:absolute;inset:6%;border-radius:50%;overflow:hidden;background:#070703;box-shadow:0 0 90px #b2993620}.film-window video{height:100%;width:100%;object-fit:cover;object-position:50% 55%;filter:saturate(.9);}.film-window video::-webkit-media-controls{border-radius:0}.film-window video[controls]{border-radius:50%}.orbit{position:absolute;inset:0;border:1px solid #a28e5950;border-radius:50%;transform:rotate(-22deg)}.orbit::after{content:'';position:absolute;right:13%;top:13%;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 20px #d7ba7540}.orbit span{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);background:#100f0a;padding:0 16px;font-size:9px;letter-spacing:.16em;white-space:nowrap}.film-coordinate{position:absolute;bottom:0;right:0;font-size:9px;line-height:1.5;letter-spacing:.1em;color:#a7a18e}.film-controls{display:grid;grid-template-columns:160px 1fr 130px;gap:25px;align-items:center;margin-top:25px;font-size:11px}.film-controls output{text-align:right;font-variant-numeric:tabular-nums}.film-controls input,.olive-study input{accent-color:var(--gold);width:100%;height:30px;cursor:ew-resize}.scrub-hint{font-size:11px!important;color:#b6b1a1;margin:10px 0 25px 185px}.extra-film{border-top:1px solid var(--rule);font-size:12px}.olive-study{max-width:760px;margin:0 auto 20px}.olive-study img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}.olive-study label{display:block;margin-top:16px;font-size:12px;color:#b6b1a1}
.year{padding:75px 0}.jahr-kopf{display:grid;grid-template-columns:1.3fr 1fr;gap:8%;align-items:end;margin-bottom:34px}.jahr-kopf p{max-width:400px;margin:0;font-size:15px}.jahr-grid{display:grid;grid-template-columns:minmax(150px,.8fr) 2fr;gap:7%;align-items:start}.year h2{font-size:clamp(48px,5.2vw,76px)}.harvest{margin-top:25px;font-size:11px!important;display:flex;gap:6px;align-items:center}.harvest b{font-weight:500}.live-dot{height:6px;width:6px;background:#697f43;border-radius:50%;display:inline-block;margin-right:5px}.season-dial{max-width:230px;margin:0}.season-dial svg{width:100%;height:auto;overflow:visible}.season-dial circle{fill:none;stroke:#a3ac96;stroke-width:1}.season-dial .dial-track{stroke-dasharray:1 10;stroke-width:7}.season-dial text{text-anchor:middle;fill:var(--olive);font:10px Karla,sans-serif;letter-spacing:2px}.season-dial #dial-month{font:400 15px Karla,sans-serif;letter-spacing:2.5px;fill:var(--ink)}#dial-hand{transform-origin:150px 150px;transition:transform 1s cubic-bezier(.2,.7,.2,1)}#dial-hand path{stroke:#536044;stroke-width:1}#dial-hand circle{fill:var(--olive);stroke:none}.season-tabs{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--rule)}.season-tabs button{border:0;background:none;color:var(--olive);font-size:12px;padding:12px 15px 12px 0;margin-right:15px;position:relative}.season-tabs button[aria-selected=true]{color:var(--ink)}.season-tabs button[aria-selected=true]::after{position:absolute;bottom:-1px;left:0;right:15px;height:2px;background:var(--olive);content:''}.season-panels{min-height:225px;padding-top:45px}.season-bild{margin:26px 0 0;max-width:520px}.season-bild img{width:100%;height:auto;display:block;border:1px solid var(--rule)}.season-bild figcaption{padding-top:9px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--olive)}.season{margin-bottom:35px}.season[hidden]{display:none}.season .eyebrow{margin-bottom:20px}.season h3{font-size:44px;line-height:1.1;margin-bottom:20px}.season>p{max-width:410px;min-height:3.3em}.year-note{border-top:1px solid var(--rule);padding-top:20px;font-size:12px!important;color:var(--olive);max-width:420px}
.gift{background:#283423;color:var(--paper);padding:65px 0 30px;--rule:#f1ede233}.gift .section-label{color:#cbd2c0}.gift-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:12%;align-items:center}.gift h2{font-size:clamp(44px,4.7vw,70px);line-height:1.08}.gift h2 em{color:#c7ceac}.gift-message{max-width:330px}.gift-star{font-size:70px;line-height:1;color:#c7ceac;display:block;margin-bottom:30px}.gift-message p{font-size:18px}.thanks{margin-top:25px;display:flex;justify-content:space-between;align-items:center;font-size:13px;text-decoration:none;border-bottom:1px solid #c7ceac;padding:15px 0}.thanks span{font-size:25px;transition:transform .3s}.thanks:hover span{transform:translate(3px,-3px)}#finale{border-top:1px solid var(--rule);margin-top:65px;padding:40px 0;display:grid;grid-template-columns:1fr 1fr auto;gap:40px;align-items:center}.footer-brand{text-decoration:none;font:400 90px/.7 Cormorant,serif;letter-spacing:-5px;width:max-content}.footer-brand span{font:400 8px/1.5 Karla,sans-serif;letter-spacing:2px;display:block;margin:22px 0 0 6px}#finale strong{font-size:13px;font-weight:500}#finale p{font-size:12px;margin:8px 0}#finale>div>a,.back-top{font-size:11px;text-decoration:none;border-bottom:1px solid #c7ceac80}.copyright{display:flex;justify-content:space-between;gap:20px;font-size:10px;padding-top:18px;border-top:1px solid var(--rule);color:#bfc7b4}#recht{margin-top:16px;display:flex;gap:26px;flex-wrap:wrap;font-size:11px}#recht .rtext{max-width:760px;margin:24px 0;padding:22px 0;border-top:1px solid var(--rule)}#recht .rtext h3{font-size:23px;margin-top:24px}#recht .rtext p,#recht .rtext li{font-size:13px}#recht .rtext ul{padding-left:18px}.offen{color:#eed49b}
@media(min-width:900px){.picture,.grove{clip-path:inset(var(--reveal,0%) 0 0 0);transition:clip-path .9s cubic-bezier(.2,.7,.2,1)}.picture.pending,.grove.pending{--reveal:18%}}
@media(max-width:1050px){.season h3{min-height:2.2em}.jahr-grid{gap:6%}.jahr-kopf{gap:5%}.wrap{width:calc(100% - 64px)}.nav-links{gap:20px}.origin-heading{gap:5%}.landscape{gap:22px}.island{padding:22px 20px 0}.local-time>div{font-size:9px;flex-wrap:wrap}.process-grid figcaption{display:block}.process-grid p{margin-top:8px}.film-controls{grid-template-columns:120px 1fr 100px}.scrub-hint{margin-left:145px}}
@media(max-width:720px){.wrap{width:calc(100% - 40px)}.chapter-nav{padding:13px 20px;gap:18px}.brand{font-size:29px}.brand span{font-size:6px;letter-spacing:1.6px}.nav-links{overflow:auto;scrollbar-width:none;gap:22px;flex:1;font-size:11px;white-space:nowrap;padding-right:30px}.nav-blende{display:block;right:68px}.nav-links::-webkit-scrollbar{display:none}#motion{width:30px;height:30px}.section-label{font-size:9px;margin-bottom:35px;gap:15px}.section-label>span:last-child{text-align:right}.origin{padding-top:45px}.origin-heading{display:block;margin-bottom:32px}.origin-heading h2{font-size:58px}.intro{margin-top:28px;max-width:480px}.intro p:first-child{font-size:18px}.intro p{font-size:14px}.landscape{grid-template-columns:1fr;gap:0}.grove{min-height:330px}.grove figcaption{font-size:10px;bottom:18px;left:18px;right:18px}.island{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;padding:22px 20px 8px;position:relative}.island .eyebrow{grid-column:1/-1}#map{height:155px;grid-row:2/4;margin-top:12px}.map-caption{display:none}.local-time{border:0;grid-column:2;display:block;margin:auto 0;font-size:10px}.local-time time{display:block;text-align:left;font-size:42px;margin:8px 0}.local-time>div{display:grid;gap:6px;font-size:9px}.principles{font-size:21px;padding:24px 0}.principles i{display:none}.making{padding:45px 0 50px}.making-heading{display:block;margin-bottom:30px}.making-heading h2{font-size:43px}.making-heading p{font-size:14px;margin-top:25px}.process-grid{gap:18px}.picture{height:230px}.process-grid h3{font-size:25px}.process-grid p{font-size:12px;line-height:1.5}.picture-number{left:12px;top:12px;width:28px;height:28px;font-size:10px}.oil-pass{grid-template-columns:1fr;gap:8px;margin-top:35px;padding-top:28px}.oil-pass h3{font-size:34px}.oil-pass h3 br{display:none}.oil-pass dl>div{font-size:12px;grid-template-columns:92px 1fr;gap:14px}.cinema{padding:45px 0 25px}.cinema-grid{grid-template-columns:1fr;gap:5px}.cinema h2{font-size:62px;line-height:.95}.cinema h2 em br{display:none}.cinema-copy>p{font-size:14px}.cinema .eyebrow{margin-bottom:18px}.film-stage{width:min(100%,420px);margin:15px auto 20px;grid-row:2}.play-button{margin-top:20px}.film-controls{grid-template-columns:1fr 100px;gap:6px 15px;margin-top:12px}.film-controls input{grid-row:2;grid-column:1/-1}.film-controls output{grid-column:2;grid-row:1}.scrub-hint{margin:6px 0 24px;font-size:10px!important}.year{padding:45px 0}.jahr-kopf{display:block;margin-bottom:26px}.jahr-kopf p{margin-top:20px;font-size:14px}.jahr-grid{grid-template-columns:1fr;gap:26px}.year h2{font-size:48px}.season-dial{width:120px;margin:0 auto 0 0}.season-tabs{justify-content:space-between}.season-tabs button{font-size:11px;padding-right:8px;margin-right:5px}.season-tabs button::before,.season-tabs button[aria-selected=true]::after{right:2px}.tab-hinweis{font-size:9px;margin-bottom:8px}.season-panels{padding-top:28px;min-height:195px}.season-bild{margin-top:20px;max-width:100%}.season h3{font-size:38px}.season{margin-bottom:20px}.season>p{font-size:15px;min-height:5em}.gift{padding:45px 0 25px}.gift-grid{grid-template-columns:1fr;gap:30px}.gift h2{font-size:45px}.gift-message{max-width:100%;display:grid;grid-template-columns:50px 1fr;gap:0 20px}.gift-star{font-size:48px;grid-row:1/4;margin:0}.gift-message p{font-size:16px}.gift-message .thanks{grid-column:2;margin-top:0}.gift-message p:nth-of-type(2){font-size:14px}#finale{margin-top:45px;padding:30px 0;grid-template-columns:1fr 1.2fr;gap:28px 18px}#finale .footer-brand{grid-column:1/-1}.footer-brand{font-size:58px;letter-spacing:-3px}.footer-brand span{font-size:6px;letter-spacing:1.6px;margin-left:4px}#finale .back-top{grid-column:1/-1;width:max-content}.copyright{font-size:9px}.copyright span:last-child{display:none}#recht{gap:14px;margin-top:18px}}
@media(max-width:380px){.footer-brand{font-size:50px}.origin-heading h2{font-size:50px}.process-grid{grid-template-columns:1fr}.picture{height:250px}.process-grid figcaption{display:flex}.principles{font-size:18px}.gift h2{font-size:40px}.season-tabs button{font-size:10px;margin-right:0}.year h2{font-size:42px}.season-dial{width:105px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.picture.pending,.grove.pending{--reveal:0%}}
html.motion-paused{scroll-behavior:auto}.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation:none!important;transition:none!important}.motion-paused .pending{--reveal:0%}

/* ══ Der Ort ═══════════════════════════════════════════════════════════
   Port Verd selbst — Bucht, Boot, Strand, Nacht. Eine waagerechte
   Bildstrecke, die am Handy gewischt und am Rechner gescrollt wird.
   Bewusst mit echten Fotos der Höcks statt Stimmungsbildern.          */
.ortsteil{background:var(--ink);color:var(--paper);padding:86px 0 78px;
     --rule:rgba(241,237,226,.22)}
.ortsteil .section-label{color:#cbd2c0}
.ortsteil-kopf{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;
          align-items:end;margin:30px 0 42px}
.ortsteil-kopf h2{font-size:clamp(2.1rem,4.6vw,3.9rem);line-height:1.04;
             letter-spacing:-.02em;margin:0}
.ortsteil-kopf h2 em{font-style:italic;color:#cbb173}
.ortsteil-kopf p{margin:0;font-size:1.02rem;line-height:1.65;color:#cfd6c6;max-width:46ch}
.ortsteil-strecke{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
             padding-bottom:16px;scrollbar-width:thin;
             scrollbar-color:rgba(241,237,226,.4) transparent}
.ortsteil-strecke figure{flex:0 0 min(560px,80%);scroll-snap-align:start;margin:0;min-width:0}
.ortsteil-strecke img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;
                 filter:saturate(.92) contrast(1.02)}
.ortsteil-strecke figcaption{padding-top:11px;font-size:.86rem;line-height:1.5;color:#b9c2ad}
.ortsteil-strecke:focus-visible{outline:2px solid #cbb173;outline-offset:6px}
.ortsteil-hinweis{margin:14px 0 0;font-size:.74rem;letter-spacing:.14em;
             text-transform:uppercase;color:#93a088}
@media(min-width:900px){.ortsteil-hinweis{display:none}}
@media(max-width:700px){
  .ortsteil{padding:56px 0 50px}
  .ortsteil-kopf{grid-template-columns:1fr;gap:18px;margin:22px 0 26px}
  .ortsteil-strecke figure{flex-basis:86%}
  .ortsteil-strecke{gap:14px}
}

/* ══ Kräutersalz ═══════════════════════════════════════════════════════
   Höcks zweites Geschenk. Bewusst schmal und ruhig: Es soll dem Öl nicht
   die Bühne nehmen, aber es soll dastehen — er hat ausdrücklich darum
   gebeten. Inhalt bleibt knapp, solange wir Kräuter und Herkunft nicht
   vom Kunden bestätigt haben.                                          */
.salz{background:var(--sage);color:var(--ink);padding:74px 0 70px;
      --rule:rgba(40,52,35,.24)}
.salz-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;
           align-items:start;margin-top:30px}
.salz-text h2{font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.05;
              letter-spacing:-.02em;margin:0 0 20px}
.salz-text h2 em{font-style:italic;color:var(--olive)}
.salz-text p{margin:0 0 14px;font-size:1.02rem;line-height:1.68;max-width:48ch}
.salz-nach{font-style:italic;color:var(--olive)}
.salz-marken{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:0}
.salz-marken li{display:flex;gap:18px;align-items:center;padding:17px 0;
                border-top:1px solid var(--rule);font-size:.98rem}
.salz-marken li:last-child{border-bottom:1px solid var(--rule)}
.salz-icon{flex:0 0 auto;width:34px;height:34px;color:var(--olive)}
.salz-marken li>span{line-height:1.4}
@media(max-width:700px){
  .salz{padding:52px 0 48px}
  .salz-grid{grid-template-columns:1fr;gap:26px;margin-top:22px}
}

/* Pfeile als Schriftzeichen, nicht als Emoji — sonst malt iOS ein blaues
   Kästchen. Zusammen mit dem Variantenselektor U+FE0E im HTML. */
body{font-variant-emoji:text}

/* Das neue Monogramm: N und H an einem Olivenzweig. Es ersetzt den
   Ornamentkranz aus der Canva-Vorlage — dieselbe Aussage in einem Zeichen,
   das auch bei 40 px noch lesbar ist. */
.footer-brand.mit-zeichen{display:block;width:min(190px,42vw);line-height:0}
.footer-brand.mit-zeichen img{width:100%;height:auto;display:block}
@media(max-width:700px){.footer-brand.mit-zeichen{width:150px;margin-bottom:6px}}

/* ══ Das Etikett ═══════════════════════════════════════════════════════
   Der Kern der Seite ist: Dieses Öl wird verschenkt, nicht verkauft. Also
   darf der Besucher sehen, wie SEIN Etikett aussähe. Kein Shop-Baustein,
   sondern der Geschenkgedanke zum Anfassen. Alles läuft im Browser,
   nichts wird gesendet oder gespeichert.                                */
.etikett{background:var(--paper);color:var(--ink);padding:80px 0 84px}
.etikett-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;
              align-items:center;margin-top:32px}
.etikett-text h2{font-size:clamp(2rem,4.4vw,3.5rem);line-height:1.05;
                 letter-spacing:-.02em;margin:0 0 18px}
.etikett-text h2 em{font-style:italic;color:var(--olive)}
.etikett-text>p{margin:0 0 26px;font-size:1.02rem;line-height:1.68;max-width:46ch}
.etikett-eingabe{display:block}
.etikett-eingabe span{display:block;font-size:.72rem;letter-spacing:.15em;
                      text-transform:uppercase;color:var(--olive);margin-bottom:10px}
.etikett-eingabe input{width:100%;max-width:420px;font:inherit;font-size:1.35rem;
  padding:12px 2px;background:transparent;border:0;border-bottom:1px solid var(--ink);
  color:var(--ink);border-radius:0;-webkit-appearance:none}
.etikett-eingabe input:focus{outline:0;border-bottom-width:2px}
.etikett-eingabe input::placeholder{color:#9aa48f}
.etikett-hinweis{margin:12px 0 0;font-size:.82rem;color:#6c7862}

/* Die Flasche: echtes Glas statt Kasten. Der Körper ist gezeichnet, damit
   das Etikett darüber echter Text bleiben kann — auf einem Foto liesse sich
   der Name des Beschenkten nicht einsetzen. Lichtkante links, weicher
   Reflex rechts, Schatten am Boden: daran erkennt das Auge Glas. */
.flasche{margin:0;display:grid;justify-items:center;gap:16px}
.flasche-buehne{position:relative;width:clamp(146px,42vw,178px)}
.flasche-buehne .glas{display:block;width:100%;height:auto;
  filter:drop-shadow(0 22px 30px rgba(30,40,25,.30))}
/* Das Etikett sitzt auf dem Glas wie echtes Papier: eigene Container-Einheit,
   damit die Schrift immer im Verhältnis zum Etikett steht — nicht zur Flasche.
   Die beiden Verläufe legen die Rundung der Flasche über das Papier. */
.flasche-schild{position:absolute;left:12.5%;right:12.5%;top:55.5%;bottom:22.5%;
  container-type:inline-size;
  background:
    linear-gradient(90deg,rgba(40,46,32,.34) 0%,rgba(40,46,32,.10) 9%,
      rgba(255,255,255,.16) 26%,rgba(255,255,255,0) 48%,
      rgba(40,46,32,.07) 76%,rgba(40,46,32,.26) 100%),
    #efe9dc;
  color:#39412e;padding:8% 9% 7.5%;text-align:center;
  display:flex;flex-direction:column;justify-content:center;
  box-shadow:0 2px 9px rgba(0,0,0,.30),inset 0 0 0 1px rgba(57,65,46,.08);
  border-radius:2px}
.flasche figcaption{font-size:.8rem;color:#6c7862}
@media(max-width:700px){
  .etikett{padding:56px 0 58px}
  .etikett-grid{grid-template-columns:1fr;gap:38px;margin-top:24px}
  .flasche-glas{padding:44px 0 26px}
}
@media(prefers-reduced-motion:reduce){.flasche-schild .schild-name{transition:none}}

/* ══ Der Anflug ════════════════════════════════════════════════════════
   Vom Weltall bis in die Reihen — mit dem ECHTEN Umriss Mallorcas, nicht
   mit geratener Geografie. Die Bewegung entsteht durch Verschieben des
   Der Anflug ist der Film selbst: Tiefflug über die Insel bis in den Hain.
   Die Wegmarken darüber sagen, wo man gerade ist.                      */
.anflug{background:#05070c;color:#e8e4d8;padding:84px 0 76px;
        --rule:rgba(232,228,216,.2)}
.anflug .section-label{color:#95a8b8}
.anflug-kopf{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;
             align-items:end;margin:28px 0 34px}
.anflug-kopf h2{font-size:clamp(2.1rem,4.6vw,3.8rem);line-height:1.04;
                letter-spacing:-.02em;margin:0}
.anflug-kopf h2 em{font-style:italic;color:#cbb173}
.anflug-kopf p{margin:0;font-size:1rem;line-height:1.65;color:#a8b6c0;max-width:42ch}
/* Die Wegmarken sagen, wo man im Anflug ist — die letzte ist das Ziel. */
.wegmarken{list-style:none;display:flex;flex-wrap:wrap;gap:10px 0;
  margin:0;padding:0;border-top:1px solid rgba(232,228,216,.16);
  border-bottom:1px solid rgba(232,228,216,.16)}
.wegmarken li{flex:1 1 25%;padding:13px 14px 12px;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#7f92a2;
  border-left:1px solid rgba(232,228,216,.12)}
.wegmarken li:first-child{border-left:0}
.wegmarken li[aria-current]{color:#cbb173}
@media(max-width:700px){
  .anflug{padding:56px 0 52px}
  .anflug-kopf{grid-template-columns:1fr;gap:16px;margin:22px 0 22px}
  .wegmarken li{flex:1 1 50%;padding:11px 12px;font-size:.66rem}
  .wegmarken li:nth-child(3){border-left:0}
}

/* Der Film schliesst den Anflug ab: die Karte bringt einen bis zur Küste,
   der Film die letzten Meter. Er lädt erst auf Knopfdruck (preload=none) —
   knapp ein Megabyte soll niemand ungefragt bezahlen. */
.ankunft{margin:26px 0 0;position:relative}
.ankunft video{width:100%;height:auto;display:block;background:#0a1016}
/* Zentriert über Flexbox statt über translateX(-50%): ein stehendes
   transform würde iOS die Knopfschrift als Bitmap zeichnen lassen. */
.ankunft-knopf{position:absolute;inset:0;margin:auto;width:max-content;height:max-content;
  font:inherit;font-size:.88rem;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(5,7,12,.72);color:#e8e4d8;border:1px solid rgba(232,228,216,.5);
  padding:14px 26px;cursor:pointer;min-height:48px;display:inline-flex;align-items:center;gap:10px}
.ankunft-knopf:hover{background:rgba(5,7,12,.9)}
.ankunft-knopf[aria-pressed=true]{opacity:0;pointer-events:none;transition:opacity .5s}
.ankunft figcaption{margin-top:11px;font-size:.82rem;color:#8fa3b3}
@media(prefers-reduced-motion:reduce){.ankunft-knopf{transition:none}}

/* Das Etikett auf der Flasche. Die Schriftgrössen sind in cqw angegeben —
   Prozent der Flaschenbreite — damit das Schild bei jeder Bildschirmgrösse
   dieselben Verhältnisse behält. Davor jeweils ein rem-Wert als Rückfall
   für Browser, die Container-Masse noch nicht kennen. */
.flasche-schild .schild-oben{margin:0;font-size:.38rem;font-size:5.5cqw;letter-spacing:.2em;
  text-transform:uppercase;color:#7c8568;line-height:1.3}
.flasche-schild .schild-marke{margin:3% 0 1%;font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.8rem;font-size:11.4cqw;letter-spacing:.09em;line-height:1.1}
.flasche-schild .schild-nr{margin:0;font-size:.45rem;font-size:6.5cqw;letter-spacing:.15em;
  color:#8b6f3d;line-height:1.2}
.flasche-schild .schild-linie{height:1px;background:#39412e2e;margin:3.5% 0}
.flasche-schild .schild-fuer{margin:0;font-size:.36rem;font-size:5.3cqw;letter-spacing:.22em;
  text-transform:uppercase;color:#7c8568;line-height:1.3}
.flasche-schild .schild-name{margin:2% 0 0;font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.73rem;font-size:10.4cqw;line-height:1.16;min-height:1.2em;
  overflow-wrap:anywhere;transition:opacity .3s}
.flasche-schild .schild-name.leer{color:#a3ab95;font-style:italic}
.flasche-schild .schild-fuss{margin:0;font-size:.35rem;font-size:4.9cqw;line-height:1.5;
  letter-spacing:.04em;color:#7c8568}
.flasche figcaption{font-size:.8rem;color:#6c7862}
@media(prefers-reduced-motion:reduce){.flasche-schild .schild-name{transition:none}}

/* Der Ort: Höcks Zusatzzeile unter der Überschrift. */
.ortsteil-zusatz{display:block;font-style:italic;color:#cbb173;
  font-size:.62em;line-height:1.25;margin-top:.28em}

/* Woher der Name kommt — Höck wollte das deutlicher sehen. */
.namensherkunft{margin-top:26px;padding-top:20px;border-top:1px solid var(--rule);
  font-size:15px;line-height:1.6}
.namensherkunft .nh b{color:#c7ceac;font-weight:600;letter-spacing:.02em}
.namensherkunft strong{font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.4em;font-weight:500;letter-spacing:.03em;color:#c7ceac}

/* Das bestehende NaHe-Logo im Fuss statt des gezeichneten Monogramms. */
#finale .footer-brand img{width:min(190px,42vw);height:auto;display:block}

/* ══ Die gezeichnete Insel ════════════════════════════════════════════
   06.09.2026: Höck wollte statt der schlichten Umrisskarte eine
   beschriftete Zeichnung und hat eine Vorlage mitgeschickt. Auf breiten
   Schirmen steht sie ganz im Bild, auf dem Handy lässt sie sich seitlich
   schieben — kleiner rechnen würde die Beschriftung unlesbar machen. */
/* EIN ORT, EIN URSPRUNG — Foto, Karte und Ortszeit sind ein Block.
   Die Karte rechnet sich auf jede Breite herunter; nur auf dem Handy
   bleibt eine Mindestbreite, sonst waere die Beschriftung unlesbar. */
.ursprung{margin:44px 0 0;padding:0;border:1px solid var(--rule);background:#efe9dc}
.karte-rolle{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin}
.karte-rolle:focus-visible{outline:2px solid var(--olive);outline-offset:-2px}
.karte-svg{display:block;height:auto;width:100%;
  --tinte:#2b3326;--grund:#efe9dc;background:#efe9dc}
.karte-svg text{fill:var(--tinte);paint-order:stroke;stroke:var(--grund);
  stroke-width:7px;stroke-linejoin:round}
.karte-svg .ort{font-size:21px;letter-spacing:2.8px}
.karte-svg .name{font-size:44px;font-weight:500;stroke-width:9px}
.karte-svg .unter{font-size:17px;letter-spacing:3px}
/* Die kurze Beschriftung direkt am Punkt gilt nur fuer schmale
   Schirme; auf breiten steht dort der ausgeschriebene Ruf. */
.karte-svg .ruf-schmal{display:none}
.karte-fuss{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  gap:10px 30px;padding:15px 26px 17px;border-top:1px solid var(--rule)}
.karte-fuss-titel{font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--olive)}
.karte-zeit{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 26px;font-size:11px;letter-spacing:.04em}
.karte-zeit time{font:400 26px/1 Cormorant,serif;margin-left:8px;vertical-align:-2px}
.karte-zeit b{font-weight:500}
/* 08.09.2026: Der Hinweis stand in #6c7862 auf #efe9dc — gemessen 3,86:1 bei
   12 px, zulaessig sind 4,5:1. Seit der Verlauf am Kartenrand weg ist, ist
   dieser Satz der einzige Hinweis darauf, dass die Karte weitergeht; er muss
   also sicher lesbar sein. #57624e ergibt 5,32:1.
   08.09.2026, von Matze gemeldet: Der Hinweis stand rechts und zeigte mit
   einem Pfeil nach RECHTS — dort liegen aber nur 14 px verborgen. Die
   verdeckte Haelfte der Insel (Palma, Soller, der Westen) liegt LINKS,
   175 px weit. Wer dem Pfeil folgte, bewegte nichts. Pfeil und Text zeigen
   jetzt nach links, und der Hinweis steht auf derselben Seite. */
.ursprung figcaption{display:flex;justify-content:flex-start;padding:0;font-size:.78rem;letter-spacing:.06em;color:#57624e}
.karte-wisch{display:none}
@media(max-width:720px){
  .ursprung{margin-top:34px}

  /* ────────────────────────────────────────────────────────────────
     08.09.2026, abends, von Dr. Höck gemeldet: „Man sieht nicht das
     ganze Bild auf dem Mobile. Der Westen fehlt."

     Er hat recht, und die bisherigen zwei Anläufe haben am falschen
     Ende geschraubt. Die Karte stand in einem waagrecht scrollenden
     Rahmen mit min-width:540px und startete auf Port Verd zentriert –
     rund 175 px der Insel lagen links ausserhalb: Palma, Sóller, die
     ganze Tramuntana. Erst lag dort ein Verlauf drueber, dann zeigte
     der Wischhinweis in die falsche Richtung, dann in die richtige.
     Keiner dieser Anlaeufe hat das Problem geloest, denn das Problem
     war nie der Hinweis, sondern dass ueberhaupt geschoben werden
     musste. Ein Kunde soll seine Insel sehen, nicht danach suchen.

     Jetzt: kein Rollrahmen, keine Mindestbreite, kein Hinweis. Die
     ganze Insel steht im Bild. Damit sie dabei nicht zum Briefmarken-
     format schrumpft, wird auf dem Handy ein engerer Ausschnitt
     gezeichnet (per data-viewbox-schmal, gesetzt in experience.js):
     Das leere Meer rechts faellt weg, und mit ihm die Zierzeichen und
     der weit rechts liegende Ruf „Port Verd", der stattdessen als
     kurze Beschriftung direkt am Punkt steht – genau wie ARTÀ und
     MANACOR. Die Beschriftung wird groesser gezeichnet, weil der
     Massstab kleiner ist.
     ──────────────────────────────────────────────────────────────── */
  .karte-rolle{overflow:visible}
  .karte-svg{min-width:0;width:100%}
  .karte-svg .zier{display:none}
  .karte-svg .ruf-breit{display:none}
  .karte-svg .ruf-schmal{display:block}
  .karte-svg .ort{font-size:30px;letter-spacing:2px}
  .karte-svg .unter{font-size:27px;letter-spacing:2px}
  .karte-svg .name{font-size:58px}
  .karte-svg text{stroke-width:9px}
  .karte-svg .name{stroke-width:11px}

  /* ────────────────────────────────────────────────────────────────
     Ebenfalls von Dr. Höck: „Die Schrift ist beim Sonnenuntergang
     versetzt." Auch das stimmte. .karte-zeit war ein Flexkasten mit
     Umbruch: Uhrzeit und Sonnenaufgang passten nebeneinander, der
     Sonnenuntergang rutschte allein in die zweite Zeile und stand
     dort linksbuendig unter einem rechtsbuendigen Nachbarn. Das sah
     nach Fehler aus, weil es einer war.
     Auf dem Handy jetzt ein festes Raster: die Uhrzeit ueber die
     ganze Breite, darunter Aufgang und Untergang nebeneinander –
     zwei gleich breite Spalten, gleiche Grundlinie, keine Ausreisser.
     ──────────────────────────────────────────────────────────────── */
  .karte-fuss{padding:14px 18px 16px;gap:10px 18px;
    flex-direction:column;align-items:stretch}
  .karte-zeit{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;
    align-items:baseline;width:100%}
  .karte-zeit > span:first-child{grid-column:1 / -1}
  .karte-zeit > span{display:flex;align-items:baseline;gap:6px;min-width:0}
  .ursprung figcaption{display:none}
}

/* Ganz schmale Schirme (iPhone SE, 375 px): Der 720er-Block weiter oben
   greift hier ebenfalls und stand spaeter in der Datei — deshalb steht diese
   Feineinstellung am Ende. Nur die Beschriftung wird noch eine Spur groesser
   gezeichnet; eine Mindestbreite gibt es seit dem 08.09. abends nicht mehr,
   die hat die halbe Insel aus dem Bild geschoben. */
@media(max-width:380px){
  .karte-svg .ort{font-size:33px}
  .karte-svg .unter{font-size:30px}
  .karte-svg .name{font-size:62px}
}

/* ────────────────────────────────────────────────────────────────
   08.09.2026 — Trefferflaechen auf dem Handy
   Nachtlauf ueber /, /impressum.html und /datenschutz.html auf vier
   Geraeten: mehrere Knoepfe und Links waren kleiner als die 44 px,
   die Apple und die Barrierefreiheits-Richtlinie (WCAG 2.5.8) als
   Mindestmass fuer einen Finger vorgeben. Gemessen auf dem
   iPhone 14 Pro: Wortmarke 38, Navigation 35, Pause-Knopf 30,
   Jahreszeiten-Reiter 43, E-Mail im Fuss 14, „Zurueck zum Anfang" 20.
   Repariert ueber unsichtbare ::after-Flaechen, damit sich am Aussehen
   und am Umbruch nichts aendert — nur der Finger trifft besser.
   Ausgenommen bleiben E-Mail-Links, die mitten in einem Satz stehen
   (Impressum, Datenschutz): Die duerfen laut Richtlinie klein sein,
   und eine Flaeche darueber wuerde den Text daneben verdecken. */
/* E-Mail und „Zurueck zum Anfang" im Fuss stehen allein auf ihrer Zeile
   und waren mit 14 bzw. 20 px auch mit der Maus zu klein — die gelten
   deshalb auf jeder Breite. */
#finale>div>a,.back-top{position:relative}
#finale>div>a::after,.back-top::after{
  content:'';position:absolute;left:0;right:0;
  top:50%;transform:translateY(-50%);
  min-height:44px;height:100%}
#finale>div>a::after{top:-8px;transform:none}
/* Auch das iPad ist ein Fingergeraet, faellt aber nicht unter 720 px —
   deshalb zusaetzlich ueber die Zeigerart geprueft. */
@media(max-width:720px),(pointer:coarse){
  /* Wortmarke und Navigation bekommen echte Polsterung statt einer Flaeche
     darueber: Die Navigationsleiste ist auf dem Handy waagrecht scrollbar,
     und ein scrollender Rahmen schneidet auch senkrecht ab — eine
     Flaeche, die oben und unten heraussteht, waere dort wirkungslos.
     Polsterung macht den Link selbst hoch, und der Rahmen waechst mit. */
  .nav-links a{padding:13px 0}
  /* Der feine Strich unter dem gerade gelesenen Abschnitt haengt am unteren
     Rand des Links — durch die Polsterung muss er um genau diese 13 px
     wieder heraufgeholt werden, sonst rutscht er vom Wort weg. */
  .nav-links a::after{bottom:13px}
  /* Der Pause-Knopf steht frei am Rand, dort ist eine unsichtbare Flaeche
     das mildeste Mittel — sie laesst den Knopf aussehen wie bisher. */
  #motion{position:relative}
  #motion::after{content:'';position:absolute;left:-7px;right:-7px;
    top:50%;transform:translateY(-50%);min-width:44px;min-height:44px}
}
/* Nur auf dem Handy: Dort ist die Wortmarke kleiner gesetzt (38 px) und
   braucht ebenfalls Polsterung. Damit die Leiste trotzdem genau so hoch
   bleibt wie bisher, kommt an ihr so viel weg, wie an den Links
   dazukommt — 13 → 10 px. Auf dem iPad ist die Wortmarke schon 45 px
   hoch, dort bleibt alles wie es war. */
@media(max-width:720px){
  .brand{padding:3px 0}
  .chapter-nav{padding-top:10px;padding-bottom:10px}
  /* Die Jahreszeiten-Reiter fehlte genau 1 px. Statt einer Flaeche
     darueber reicht hier echte Polsterung — sie aendert die Zeile um
     2 px, was im Umbruch nicht auffaellt. */
  .season-tabs button{padding-top:14px;padding-bottom:14px}
}