@font-face{font-family:Archivo;src:url('fonts/Archivo-variabel.ttf') format('truetype');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
:root{--deep:#0f1813;--green:#1e2e25;--sand:#ebe2d3;--cream:#f1e9dc;--gold:#b6a27a;--dark-gold:#72613e;--ink:#1c1716;--gutter:clamp(28px,4.3vw,80px)}
*{box-sizing:border-box}
html{background:var(--deep);scroll-behavior:auto;scrollbar-color:var(--gold) var(--deep)}
body{margin:0;color:var(--cream);font-family:Archivo,sans-serif;font-variation-settings:'wdth' 100,'wght' 350;font-weight:350;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:1px solid currentColor;outline-offset:7px}
::selection{color:var(--sand);background:var(--dark-gold)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link{position:fixed;z-index:30;top:12px;left:12px;padding:14px 20px;background:var(--sand);color:var(--ink);transform:translateY(-200%)}
.skip-link:focus{transform:none}
.journey{height:420svh;position:relative}
.stage{height:100svh;position:sticky;top:0;overflow:clip;isolation:isolate}
.masthead{position:absolute;z-index:8;top:0;left:0;right:0;padding:36px var(--gutter);display:flex;align-items:center;justify-content:space-between;color:var(--gold)}
.wordmark{font-family:Archivo,sans-serif;font-variation-settings:'wdth' 125,'wght' 400;font-size:clamp(16px,1.45vw,23px);letter-spacing:.06em;white-space:nowrap}
.wordmark-dot{padding-left:2px}
.craft-label{font-size:12px;letter-spacing:.045em}
.hero{position:absolute;inset:0;background:var(--deep);overflow:hidden}
.table-scene{position:absolute;transform-origin:56.5% 65.5%;will-change:transform}
.desk{display:block;width:100%;height:100%}
.desk-seal{position:absolute;inset:0;width:100%;height:100%;clip-path:ellipse(4.3% 3.3% at 39.2% 84.4%);pointer-events:none}
.film-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0}
.film-poster{position:absolute;inset:0;width:100%;height:100%}
.film-ready .film-poster{display:none}
.smoke{position:absolute;width:13.16%;height:44.63%;left:78.1%;top:19.3%;transform-origin:51.7% 97.2%;opacity:.40;animation:smoke-sway 7s -3s linear infinite alternate;mix-blend-mode:screen}
.smoke img{width:100%;height:100%;object-fit:fill;display:block}
.smoke canvas{display:none;position:absolute;inset:0;width:100%;height:100%}
.smoke.has-flow{animation:none;opacity:.40}
.smoke.has-flow img{visibility:hidden}
.smoke.has-flow canvas{display:block}
@keyframes smoke-sway{0%{transform:skewX(-5deg) scaleX(.92)}50%{transform:skewX(3deg) scaleX(1.04)}100%{transform:skewX(-2deg) scaleX(.95)}}
.paused .smoke{animation-play-state:paused}
.hero-copy{position:absolute;left:var(--gutter);top:29%;will-change:transform,opacity}
.eyebrow{margin:0 0 24px;font-size:11px;letter-spacing:.12em;color:var(--gold)}
h1{font-family:Archivo,sans-serif;font-variation-settings:'wdth' 125,'wght' 300;font-weight:300;font-size:clamp(46px,5.6vw,86px);letter-spacing:-.055em;line-height:1.03;margin:0}
h1 em{font:inherit;font-style:normal;line-height:1.22}
.hero-bottom{position:absolute;left:var(--gutter);right:var(--gutter);bottom:34px;display:flex;align-items:center;justify-content:space-between;color:var(--cream)}
.discover{display:flex;align-items:center;gap:20px;font-size:12px;letter-spacing:.02em;min-height:44px}
.discover span{display:inline-grid;place-items:center;width:34px;height:34px;border:1px solid #b6a27a77;border-radius:50%;font-size:17px;transition:transform .25s}
.discover:hover span{transform:translateY(3px)}
.motion-button{cursor:pointer;background:none;border:0;color:var(--cream);padding:10px 0 10px 10px;min-width:44px;min-height:44px;display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.035em}
.motion-symbol{font-size:13px}
.message{position:absolute;inset:0;background:var(--sand);color:var(--dark-gold);transform:translateY(103%);outline:none}
.message-edge{position:absolute;left:0;right:0;top:0;height:2px;background:var(--gold)}
.message-inner{position:absolute;left:50%;top:50%;width:min(980px,83vw,calc(1250px * var(--dichte,1) - 270px));transform:translate(-50%,-50%)}
.writing{display:block;width:100%;height:auto;overflow:visible}
.signoff{position:absolute;top:85%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:24px;white-space:nowrap}
.message-caption{position:relative;text-align:left;margin:0;opacity:0;color:var(--ink);font-size:clamp(14px,1.1vw,16px);line-height:1.75;font-weight:350;letter-spacing:.005em}
.message-caption span{font:inherit}
.seal-position{--seal-size:72px;position:relative;width:var(--seal-size);height:72px;flex:none}
.signature{position:absolute;left:50%;top:50%;width:var(--seal-size);height:var(--seal-size);transform:translate(-50%,-50%);opacity:0;pointer-events:none}
.wax-seal{display:block;width:100%;height:100%}
.seal-stamp{position:absolute;left:50%;top:50%;width:calc(var(--seal-size) * 1.4);height:calc(var(--seal-size) * 1.4);pointer-events:none;opacity:0;transform-origin:50% 50%}
.seal-stamp img{width:100%;height:100%;display:block}
.message-bottom{position:absolute;bottom:42px;left:var(--gutter);right:var(--gutter);display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.06em;opacity:.75}
.message-bottom span:first-child{font-family:Archivo,sans-serif;font-variation-settings:'wdth' 125,'wght' 400;font-size:9px;letter-spacing:.08em}
.replay{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);padding:10px;font-size:12px;opacity:0;visibility:hidden}
.replay span{margin-left:10px}
.quill{position:absolute;top:0;left:0;width:1672px;height:941px;z-index:6;pointer-events:none;transform-origin:0 0;will-change:transform}
.quill img{display:block;width:100%;height:100%}
.quill-dock,.quill-dock-front{position:absolute;left:0;top:0;z-index:5;pointer-events:none;opacity:0;transform-origin:0 0}
.quill-dock img,.quill-dock-front img{display:block;width:100%;height:auto}
.quill-dock-front{z-index:7;clip-path:inset(20.6% 0 0 0)}
.bottle-front,.holder-front{position:absolute;z-index:7;pointer-events:none;transform-origin:56.5% 65.5%}
.bottle-front{clip-path:url(#bottle-front-clip)}
.holder-front{clip-path:url(#holder-front-clip)}
.bottle-front img,.holder-front img{display:block;width:100%;height:100%}
.clip-definitions{position:absolute;pointer-events:none}
.progress{position:absolute;z-index:10;right:0;top:0;width:2px;height:100%;background:#b6a27a22;pointer-events:none}
.progress span{display:block;width:100%;height:100%;background:var(--gold);transform-origin:50% 0;transform:scaleY(0)}
@media(min-width:1800px){.hero-copy{top:32%}}
@media(max-width:700px){
  .journey{height:420svh}
  .masthead{padding:26px var(--gutter)}
  .wordmark{font-size:16px}
  .craft-label{display:none}
  .hero-copy{top:17%;right:var(--gutter)}
  .eyebrow{font-size:10.5px;letter-spacing:.015em;margin-bottom:18px}
  h1{font-size:clamp(43px,11.9vw,70px);line-height:1.04;letter-spacing:-.05em}
  h1 br{display:none}
  h1 em{display:block;font-size:1.1em}
  .hero-bottom{bottom:22px}
  .motion-label{display:none}
  .motion-button{display:flex}
  .message-inner{width:91vw;top:48%}
  .signoff{top:112%;gap:12px}.message-caption{font-size:14px;line-height:1.8}.seal-position{--seal-size:52px;height:64px}
  .message-bottom{bottom:86px;justify-content:center}
  .message-bottom span:last-child{display:none}
  .replay{bottom:27px}
  .smoke{opacity:.35}
  /* Die dunkle Wand des Fotos geht nahtlos in den Hintergrund über, keine Bildkante (Ilja 29.9.) */
  .table-scene::after{content:'';position:absolute;left:0;right:0;top:0;height:38%;background:linear-gradient(var(--deep),#0f181300);pointer-events:none}
}
@media(max-height:550px) and (min-width:701px){.masthead{padding-top:20px}.hero-copy{top:25%}h1{font-size:52px}.message-inner{width:min(700px,70vw)}.message-caption{top:78%;font-size:14px}.message-bottom{bottom:24px}}
@media(prefers-reduced-motion:reduce){.discover span{transition:none}}

/* Fotografische Rauchbewegung und Glut laufen unabhängig vom Scrollstand. */
.smoke-film{position:absolute;left:63.674%;top:16.667%;width:36.326%;height:79.63%;pointer-events:none;opacity:0}
.smoke-source{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.real-smoke .smoke-film{opacity:1}
.real-smoke .smoke{display:none}
.stamp-3d{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.has-3d-stamp .seal-stamp{visibility:hidden}
.signoff{gap:28px;top:88%}
.message-caption{font-size:17px;line-height:1.7;letter-spacing:.008em}
.message-caption span{display:inline-block;margin-top:3px;font-weight:450}
@media(max-width:700px){.signoff{top:116%;gap:14px}.message-caption{font-size:13px;line-height:1.75}.message-caption span{font-weight:450}}

/* Botschaft: Die zweite Stimme unter der Handschrift. Versalzeile, Leitsatz kursiv, Federzug, großes Siegel. */
@media(min-width:701px){.message-inner{top:45%}}
.signoff{top:91%;gap:46px;align-items:center}
.message-caption{display:grid;justify-items:start;gap:9px;color:var(--green)}
.message-caption .caption-lead,.message-caption .caption-key{display:block;margin:0}
.message-caption .caption-lead{font-family:Archivo,sans-serif;font-variation-settings:'wdth' 125,'wght' 450;font-size:11px;line-height:1.4;letter-spacing:.26em;text-transform:uppercase;color:var(--dark-gold)}
.message-caption .caption-key{font:italic 400 clamp(30px,2.9vw,44px)/1.08 'Luxus Serif',Georgia,serif;letter-spacing:-.02em;color:var(--green)}
.caption-stroke{display:block;width:100%;max-width:340px;height:auto;margin-top:4px}
.seal-position{--seal-size:132px;height:132px}
/* Ein ruhiger Hinweis zum Weiterscrollen, mittig. */
.next-chapter{left:50%;right:auto;transform:translateX(-50%);flex-direction:column;gap:12px;white-space:nowrap;font-family:Archivo,sans-serif;font-variation-settings:'wdth' 125,'wght' 450;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--dark-gold)}
.next-chapter span{display:block;width:1px;height:40px;font-size:0;background:linear-gradient(var(--dark-gold),#72613e00);transform-origin:top;animation:weiter 2.6s cubic-bezier(.45,0,.2,1) infinite}
@keyframes weiter{0%{transform:scaleY(0);opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
@media(max-width:700px){
 .signoff{top:110%;flex-direction:column;gap:20px}.message-caption{justify-items:center;text-align:center}
 .message-caption .caption-lead{font-size:9px;letter-spacing:.16em}.message-caption .caption-key{font-size:30px}.caption-stroke{max-width:230px}
 .seal-position{--seal-size:92px;height:92px}
}
@media(prefers-reduced-motion:reduce){.next-chapter span{animation:none}}
/* Kopfleiste: Logo, kurzes Menü, Anfrage in Gold. Die Logofassung wechselt mit dem Untergrund, nie über vererbte Farbe. */
.brand-link{display:flex;align-items:center}.brand-link img{display:none;width:auto}
.brand-link .logo-quer{height:38px}.brand-link .logo-zeichen{height:34px}
.masthead:not([data-surface="paper"]) .logo-quer.logo-auf-dunkel,.masthead[data-surface="paper"] .logo-quer.logo-auf-hell{display:block}
/* Das Menü ist ein Inhaltsverzeichnis: römische Kapitelziffern, Einträge in der zweiten Stimme (Source Serif kursiv).
   Das Kapitel, in dem man liest, unterstreicht der Federzug aus dem Logo-Paket. */
.masthead-nav{display:flex;align-items:center;gap:38px}
.masthead-nav a{position:relative;display:flex;align-items:baseline;gap:9px;padding:14px 0 13px;font:italic 400 16px/1 'Luxus Serif',Georgia,serif;letter-spacing:.005em;color:inherit;text-decoration:none}
.masthead-nav b{font-family:Archivo,sans-serif;font-variation-settings:'wdth' 125,'wght' 500;font-size:8.5px;font-style:normal;font-weight:500;letter-spacing:.14em;opacity:.7;transform:translateY(-1px)}
.masthead-nav a:after{content:'';position:absolute;left:-2px;right:-4px;bottom:2px;height:7px;background:url(assets/logo/federzug-linie-altgold.svg) left center/100% 100% no-repeat;clip-path:inset(0 100% 0 0);transition:clip-path 700ms cubic-bezier(.45,0,.2,1)}
.masthead[data-surface="paper"] .masthead-nav a:after{background-image:url(assets/logo/federzug-linie-gruen.svg)}
.masthead-nav a:is(:hover,:focus-visible,[aria-current]):after{clip-path:inset(0 0 0 0)}
.masthead-nav a:focus-visible{outline:none}
/* Liegt die Kopfleiste auf einer Fläche, schließt sie eine feine Goldlinie ab. */
.masthead:is([data-reading="true"],[data-contact="true"],[data-value="true"],[data-surface="film"]){box-shadow:inset 0 -1px 0 #b6a27a4d}
.menu-button{display:none;pointer-events:auto;flex:none;width:44px;height:44px;padding:0;border:0;background:none;color:inherit;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:7px}
.menu-button i{display:block;width:24px;height:1px;background:currentColor}
@media(max-width:939px){.masthead-nav{display:none}.menu-button{display:flex}.masthead .apply-link{margin-left:auto}}
/* Kleine Laptop-Fenster ab 940 px (Ilja 29.9., Fenster um 1000 px): Menü bleibt sichtbar, Logo und Anfrageknopf etwas kleiner */
@media(min-width:940px) and (max-width:1099px){.masthead-nav{gap:14px}.masthead-nav a{font-size:13.5px}.masthead-nav b{display:none}.masthead-actions{gap:12px}.brand-link .logo-quer{height:30px}.masthead .apply-link{gap:12px;padding:0 14px 0 16px}.lang-link{letter-spacing:.16em}}
/* Laptop-Breiten (Ilja 29.9., MacBook 14 mit größerer Schrift): Menü bleibt sichtbar, kompakter und ohne Ziffern */
@media(min-width:1100px) and (max-width:1240px){.masthead-nav{gap:20px}.masthead-nav a{font-size:14.5px}.masthead-nav b{display:none}.masthead-actions{gap:14px}}
/* Handy: Wortmarke neben dem Zeichen (Ilja 29.9.). Dafür wandert EN ins Menü, Anfragen bleibt sichtbar.
   Höhe aus dem freien Platz: Bildschirm minus Ränder, Anfragen und Menüknopf, geteilt durch das Seitenverhältnis 5,6. */
@media(max-width:700px){
 .brand-link .logo-zeichen{display:none!important}
 .brand-link .logo-quer{height:clamp(21px,calc((100vw - 236px) / 5.6),30px)}
 .masthead .lang-link{display:none}
}
/* Sprachumschalter neben dem Anfrageknopf */
.masthead-actions{display:flex;align-items:center;gap:26px}
.lang-link{padding:12px 2px;font:500 10.5px/1 Archivo,sans-serif;font-variation-settings:'wdth' 125,'wght' 500;letter-spacing:.22em;color:inherit;text-decoration:none;opacity:.78;transition:opacity 300ms}
.lang-link:is(:hover,:focus-visible){opacity:1}
@media(max-width:939px){.masthead-actions{margin-left:auto}}
@media(min-width:1241px) and (max-width:1340px){.masthead-nav{gap:26px}.masthead-actions{gap:20px}}
@media(max-width:700px){.masthead-actions{gap:14px}}
/* Englisch (Feedback 28.9.): der Leitsatz ist der Gedanke des Besuchers, die Versalzeile steht als Versprechen unter der Federzug-Linie. */
/* Englisch: Versalzeile als Versprechen unter der Federlinie (Claudia). Deutsch: Einleitung über dem Leitsatz (Ilja 29.9.). */
html[lang="en"] .message-caption .caption-lead{order:3;margin-top:4px}
/* Niedrige Laptop-Fenster: der Scroll-Hinweis wird kürzer, damit er nie in Leitsatz und Federlinie läuft */
@media(min-width:701px) and (max-height:700px){.next-chapter{gap:6px}.next-chapter span{height:16px}}
@media(min-width:701px) and (max-height:600px){.next-chapter span{display:none}}

/* Symbolvorrat (Windrose) ohne Inline-Stil, wegen der CSP der Live-Seite (29.9.) */
.svg-vorrat{position:absolute;width:0;height:0;overflow:hidden}
/* Feiner Pfeil als SVG statt ↗ (auf dem iPhone ein blaues Emoji-Kästchen, Ilja 29.9.) */
.pfeil{display:inline-block;width:.8em;height:.8em;vertical-align:-.05em;overflow:visible}
/* Fünfter Menüpunkt „Ressourcen“ (Ilja 5.11.): engere Abstände, damit das Menü in einer Zeile bleibt. Unter 1120 Pixeln das Menü fürs Handy. */
@media(min-width:1341px) and (max-width:1499px){.masthead-nav{gap:24px}}
@media(min-width:1241px) and (max-width:1340px){.masthead-nav{gap:20px}.masthead-nav b{display:none}}
@media(min-width:1120px) and (max-width:1240px){.masthead-nav{gap:15px}.masthead-nav a{font-size:14px}}
@media(min-width:1120px) and (max-width:1160px){.masthead-nav{gap:11px}}
@media(max-width:1119px){.masthead-nav{display:none}.menu-button{display:flex}.masthead .apply-link{margin-left:auto}.masthead-actions{margin-left:auto}}