/* Luxus Websites · Zwischenseite (27.9.2026). Farben und Schriften nach Entscheidung 10. */

@font-face { font-family: "Archivo Breit"; src: url(/schriften/archivo-breit.woff2) format("woff2"); font-weight: 300 600; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url(/schriften/source-serif-4.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url(/schriften/source-serif-4-kursiv.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url(/schriften/hanken-grotesk.woff2) format("woff2"); font-weight: 400 500; font-display: swap; }

:root {
  --tief: #0f1813; --gruen: #1e2e25; --sand: #ebe2d3; --hell: #f1e9dc; --gold: #b6a27a; --gold-hell: #cdbb90; --gold-s: #72613e; --tinte: #1c1716;
  --breit: "Archivo Breit", Helvetica, Arial, sans-serif; --serif: "Source Serif 4", Georgia, serif; --text: "Hanken Grotesk", Helvetica, Arial, sans-serif;
  --rand: clamp(20px, 4.6vw, 72px); --weich: cubic-bezier(.22, .8, .2, 1); --welle: clamp(34px, 5.6vw, 90px);
  --tex-korn: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --tex-papier: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .33  0 0 0 0 .2  .5 0 0 0 -.16'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>");
}

* { box-sizing: border-box; margin: 0; }
html { background: var(--tief); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-family: var(--text); font-size: 17px; line-height: 1.6; color: var(--hell); background: var(--tief); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.rahmen { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 var(--rand); }
.zeile { font-family: var(--breit); font-weight: 600; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.monogramm { width: 46px; height: 46px; }

/* Kopfleiste: Monogramm links, Sprache und Kontakt rechts */
.kopf-nav { display: flex; align-items: center; gap: clamp(20px, 3vw, 36px); }
.kopf-link { font-family: var(--breit); font-weight: 600; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; text-decoration: none; padding: 8px 0 5px; border-bottom: 1px solid var(--gold); transition: color .4s; }
.kopf-link:hover { color: var(--gold-hell); }
.sprache { border-bottom-color: transparent; color: #cfc5b4; }

/* 1 · Auftritt: Schreibtisch mit rauchender Zigarre, Text oben auf der grünen Wand */
.auftritt { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate; background: #0a100b; } /* = Wandfarbe im Bild */
.ebene { position: absolute; inset: 0; pointer-events: none; }
.g-bild img, .g-bild video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.g-bild video { animation: film-ein 1.6s ease .5s both; } /* der Rauch blendet über das Standbild ein */
@keyframes film-ein { from { opacity: 0; } }
.g-korn { opacity: .07; background-image: var(--tex-korn); mix-blend-mode: overlay; }
.g-schatten { background: linear-gradient(180deg, rgba(8, 13, 11, .62) 0%, rgba(8, 13, 11, .26) 32%, rgba(8, 13, 11, 0) 54%), linear-gradient(90deg, rgba(8, 13, 11, .42), rgba(8, 13, 11, 0) 62%); }

.kopf { position: absolute; top: 0; left: 0; right: 0; z-index: 3; }
.kopf .rahmen { height: 92px; display: flex; align-items: center; justify-content: space-between; }

/* Text senkrecht mittig auf der dunklen Wand: Sie endet an der Tischkante, bei 57,4 % der Bildhöhe (Bild füllt die Breite oder die Höhe) */
.a-inhalt { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-top: 92px; padding-bottom: max(24vw, 42.6vh); padding-bottom: max(24vw, 42.6svh); }
.a-h1 { margin-top: 18px; font-family: var(--breit); font-weight: 300; text-transform: uppercase; letter-spacing: .05em; line-height: .96; font-size: clamp(40px, 6.3vw, 108px); } /* zweizeilig, endet vor der Feder */
.maske { display: block; overflow: hidden; padding-bottom: .05em; }
.maske > span { display: block; animation: hoch 1.3s cubic-bezier(.16, 1, .3, 1) .2s both; }
.maske + .maske > span { animation-delay: .32s; }
@keyframes hoch { from { transform: translateY(105%); } }
.a-satz { margin-top: .7em; max-width: 30em; font-family: var(--serif); font-style: italic; line-height: 1.22; color: #efe5d2; font-size: clamp(21px, 2.1vw, 32px); }
.a-zeile, .a-satz { animation: auf 1.2s var(--weich) both; }
.a-zeile { animation-delay: .1s; } .a-satz { animation-delay: .8s; }
@keyframes auf { from { opacity: 0; transform: translateY(16px); } }

/* Hochformat: Text oben auf der Wand, darunter Tintenfass, Feder und rauchende Zigarre */
@media (max-aspect-ratio: 3/4) {
  .g-bild { top: auto; height: min(58%, calc(100vw * 941 / 922)); }
  .a-inhalt { padding-bottom: min(58svh, calc(100vw * 941 / 922)); } /* Text mittig zwischen Kopfleiste und Bild */
  .g-bild::after { content: ""; position: absolute; inset: 0 0 auto; height: 18%; background: linear-gradient(#0a100b, rgba(10, 16, 11, 0)); }
  .g-schatten { background: none; }
}

/* Schmale Bildschirme: Wortmarke auf zwei Zeilen, so breit wie möglich */
@media (max-width: 520px) {
  .a-h1 { font-size: 12vw; }
  .a-zeile { font-size: 10px; letter-spacing: .18em; }
}

/* 2 · Für wen: Register auf Papier, harte Kante mit Goldlinie */
.welten { color: var(--tinte); background-color: var(--sand); background-image: var(--tex-papier); border-top: 1px solid var(--gold); padding: clamp(64px, 10vh, 112px) 0 calc(clamp(64px, 10vh, 112px) + var(--welle)); }
.welten .zeile { color: var(--gold-s); }
.w-titel { margin-top: 16px; font-family: var(--breit); font-weight: 300; text-transform: uppercase; letter-spacing: .035em; line-height: 1.08; font-size: clamp(26px, 3.2vw, 48px); }
.w-einleitung { margin-top: 16px; max-width: 36em; font-family: var(--serif); font-style: italic; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; color: #4a4038; }
.register { list-style: none; padding: 0; margin-top: clamp(30px, 5vh, 52px); display: grid; grid-template-columns: repeat(2, 1fr); column-gap: clamp(32px, 5vw, 88px); border-top: 1px solid rgba(114, 97, 62, .34); counter-reset: welt; }
.register li { display: grid; grid-template-columns: 3.4em 1fr; align-content: start; padding: 17px 0 19px; border-bottom: 1px solid rgba(114, 97, 62, .34); counter-increment: welt; }
.register li::before { content: counter(welt, decimal-leading-zero); grid-row: 1 / 3; font-family: var(--breit); font-weight: 500; font-size: 12px; letter-spacing: .2em; color: var(--gold-s); padding-top: .3em; }
.register h3 { font-family: var(--breit); font-weight: 500; font-size: clamp(12.5px, .95vw, 14.5px); letter-spacing: .14em; text-transform: uppercase; line-height: 1.4; }
.register p { margin-top: 5px; font-size: 15.5px; line-height: 1.5; color: #5a5047; }
.partner { margin-top: 26px; font-family: var(--serif); font-style: italic; font-size: clamp(18px, 1.4vw, 21px); color: #4a4038; }
@media (max-width: 760px) { .register { grid-template-columns: 1fr; } }

/* 3 · Kontakt: weiche Welle mit feiner Goldlinie */
.kontakt { position: relative; background: var(--tief); }
.welle { position: absolute; left: 0; bottom: calc(100% - 1px); width: 100%; height: var(--welle); overflow: visible; }
.welle .flaeche { fill: var(--tief); }
.welle .linie { fill: none; stroke: var(--gold); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.k-innen { padding: clamp(48px, 8vh, 88px) 0 clamp(64px, 10vh, 104px); }
.k-titel { margin-top: 18px; max-width: 16em; font-family: var(--serif); font-style: italic; font-weight: 400; line-height: 1.12; color: #efe5d2; font-size: clamp(30px, 4vw, 60px); }
.k-text { margin-top: 20px; max-width: 32em; color: #d3cabb; }
.k-mail { display: inline-block; margin-top: 30px; font-family: var(--breit); font-weight: 300; letter-spacing: .02em; line-height: 1.25; text-decoration: none; font-size: clamp(19px, 3vw, 42px); padding-bottom: 8px; border-bottom: 1px solid var(--gold); transition: color .4s, border-color .4s; }
.k-mail:hover { color: var(--gold-hell); border-color: var(--gold-hell); }

.fuss { border-top: 1px solid rgba(182, 162, 122, .26); font-size: 13.5px; color: #a1978a; }
.fuss .rahmen { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 32px; padding-top: 28px; padding-bottom: 32px; }
.fuss a { color: #d3cabb; text-decoration: none; transition: color .3s; }
.fuss a:hover { color: var(--gold-hell); }

/* Rechtsseiten: Papier, ruhig lesbar */
.recht { color: var(--tinte); background-color: var(--sand); background-image: var(--tex-papier); line-height: 1.7; }
.recht a { text-decoration-color: rgba(114, 97, 62, .5); text-underline-offset: 3px; }
.recht a:hover { text-decoration-color: var(--gold-s); }
.recht .kopf-link { color: var(--hell); }
.r-kopf { background: var(--tief); color: var(--hell); border-bottom: 1px solid rgba(182, 162, 122, .4); }
.r-kopf .rahmen { height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.r-marke { display: flex; align-items: center; gap: 14px; font-family: var(--breit); font-weight: 600; font-size: 12px; letter-spacing: .34em; text-transform: uppercase; text-decoration: none; }
.r-marke .monogramm { width: 38px; height: 38px; }
.r-inhalt { max-width: 800px; margin: 0 auto; padding: clamp(56px, 10vh, 104px) clamp(20px, 5vw, 40px) 88px; }
.r-inhalt .zeile { color: var(--gold-s); }
.r-inhalt h1 { margin-top: 14px; font-family: var(--breit); font-weight: 300; text-transform: uppercase; letter-spacing: .04em; line-height: 1.1; font-size: clamp(28px, 4.2vw, 48px); hyphens: auto; }
.r-inhalt h2 { margin-top: 46px; padding-top: 22px; border-top: 1px solid rgba(114, 97, 62, .3); font-family: var(--breit); font-weight: 600; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; }
.r-inhalt h3 { margin-top: 22px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 19px; }
.r-inhalt p, .r-inhalt ul { margin-top: 12px; }
.r-inhalt ul { padding-left: 20px; }
.r-inhalt li { margin-top: 6px; }
.einleitung { margin-top: 18px; font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.5; color: #4a4038; }
.anschrift { margin-top: 30px; padding: 26px 30px; font-family: var(--serif); font-size: 20px; line-height: 1.55; background: rgba(255, 255, 255, .45); border-left: 2px solid var(--gold); }
.hinweis { margin-top: 40px; font-size: 14px; font-style: italic; color: #6d645a; }
.recht .fuss { background: var(--tief); }
@media (max-width: 520px) { .r-marke { letter-spacing: .22em; font-size: 11px; } .r-kopf .rahmen { gap: 14px; } }

/* 404 */
.fehler { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 40px var(--rand); }
.fehler .monogramm { width: 64px; height: 64px; margin: 0 auto; }
.fehler h1 { margin-top: 30px; font-family: var(--breit); font-weight: 300; text-transform: uppercase; letter-spacing: .05em; font-size: clamp(24px, 3.4vw, 40px); line-height: 1.15; }
.fehler p { margin-top: 14px; font-family: var(--serif); font-style: italic; font-size: 20px; color: #d3cabb; }
.fehler .kopf-nav { justify-content: center; margin-top: 34px; }

/* Bewegung reduzieren: kein Film, alles steht ruhig und fertig da */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .g-bild video { display: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}