@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: light;
  --papier: #faf8f4;
  --tinte: #17130d;
  --grau: #5f574a;
  --linie: #ddd6c9;
  --nacht: #120c07;
  --hell: #f3eee4;
  --hell-2: #b7ad9a;
  --gold: #c9a96a;
  --gold-tief: #7c5f28;
  --serif: "Newsreader", ui-serif, Georgia, serif;
  --sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --rand: clamp(20px, 6vw, 96px);
  --breite: 1280px;
}

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--papier); color: var(--tinte); font: 400 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold-tief); outline-offset: 3px; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.015em; }
.marke { font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-tief); }

/* Start */
.start { background: var(--nacht); color: var(--hell); }
.kopf { max-width: var(--breite); margin-inline: auto; padding: 20px var(--rand); display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 14px; }
.kopf a { text-decoration: none; display: inline-block; padding-block: 6px; }
.kopf a:hover { color: var(--gold); }
.kopf div { display: flex; gap: clamp(16px, 2.6vw, 36px); }
.kopf-name { font-family: var(--serif); font-size: 19px; }
.start-raster { max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: end; }
.start-text { padding-bottom: clamp(48px, 10vh, 112px); }
h1 { font-size: clamp(56px, 7.4vw, 112px); line-height: 1; }
.titel { font-family: var(--serif); font-size: clamp(25px, 2.5vw, 34px); line-height: 1.2; margin-top: 18px; color: var(--gold); }
.unternehmen { margin-top: 12px; font-size: 15px; color: var(--hell-2); }
.start-bild { -webkit-mask-image: linear-gradient(to right, transparent, #000 12%); mask-image: linear-gradient(to right, transparent, #000 12%); }
.start-bild img { width: 100%; max-height: calc(100vh - 80px); object-fit: cover; object-position: 50% 15%; }

/* Profil */
.profil { max-width: var(--breite); margin-inline: auto; padding: clamp(64px, 10vw, 128px) var(--rand); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.profil-text > p + p { margin-top: 18px; max-width: 34em; color: var(--grau); }
.profil-text a { color: var(--tinte); text-underline-offset: 4px; }
.profil-text > .gross { margin-top: 18px; max-width: none; font-family: var(--serif); font-size: clamp(28px, 3.2vw, 44px); line-height: 1.22; letter-spacing: -.01em; color: var(--tinte); margin-bottom: 28px; }
.profil-bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }

/* Blöcke */
.block { max-width: var(--breite); margin-inline: auto; padding: 0 var(--rand) clamp(64px, 9vw, 112px); }
.drei { margin-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 4vw, 56px); border-top: 1px solid var(--linie); padding-top: 28px; }
.drei h2 { font-size: clamp(25px, 2.3vw, 31px); line-height: 1.15; margin-bottom: 12px; }
.drei p { color: var(--grau); }

.liste { list-style: none; padding: 0; margin-top: 24px; border-top: 1px solid var(--linie); }
.liste li { border-bottom: 1px solid var(--linie); }
.liste a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 4px 32px; align-items: baseline; padding-block: 18px; text-decoration: none; }
.liste strong { font-family: var(--serif); font-weight: 400; font-size: 23px; line-height: 1.3; }
.liste span, .liste time { color: var(--grau); font-size: 15px; }
.liste a:hover strong { color: var(--gold-tief); }
.news a { grid-template-columns: 180px minmax(0, 1fr); }

/* Kontakt */
.kontakt { background: var(--nacht); color: var(--hell); padding: clamp(64px, 9vw, 112px) max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand))); }
.kontakt .marke { color: var(--gold); }
.kontakt h2 { font-size: clamp(38px, 5vw, 68px); line-height: 1.08; margin: 14px 0 20px; }
.mail { font-size: clamp(18px, 2vw, 24px); text-underline-offset: 6px; text-decoration-color: var(--gold); display: inline-block; padding-block: 6px; overflow-wrap: anywhere; }
.mail:hover { color: var(--gold); }

/* Fuß */
footer { background: var(--nacht); color: var(--hell-2); font-size: 14px; border-top: 1px solid #2a251d; padding: 16px max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand))); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 32px; }
footer nav { display: flex; gap: 24px; }
footer a { text-decoration: none; display: inline-block; padding-block: 8px; }
footer a:hover { color: var(--hell); }

/* Rechtstexte */
.recht { max-width: 720px; margin-inline: auto; padding: 48px var(--rand) 80px; }
.recht h1 { font-size: clamp(40px, 6vw, 60px); line-height: 1.05; margin: 24px 0 32px; }
.recht h2 { font-size: 24px; margin: 32px 0 8px; }
.recht p { color: var(--grau); margin-bottom: 12px; }
.zurueck { font-size: 15px; display: inline-block; padding-block: 8px; }

@media (max-width: 860px) {
  .kopf .kopf-name { display: none; }
  .kopf { justify-content: center; padding-block: 12px; font-size: 13px; }
  .kopf div { gap: 16px; }
  .start-raster { grid-template-columns: minmax(0, 1fr); gap: 0; padding-inline: 0; }
  .start-bild { order: 1; -webkit-mask-image: none; mask-image: none; }
  .start-bild img { max-height: none; aspect-ratio: 1 / 1.08; }
  .start-text { order: 2; padding: 28px var(--rand) 48px; }
  .profil { grid-template-columns: minmax(0, 1fr); }
  .drei { grid-template-columns: minmax(0, 1fr); }
  .liste a, .news a { grid-template-columns: minmax(0, 1fr); }
}

/* Ruhige Auftritte */
.bewegt .start-bild img { animation: nahfahrt 3s cubic-bezier(.16, .84, .24, 1) both; }
@keyframes nahfahrt { from { opacity: 0; scale: 1.06; } to { opacity: 1; scale: 1; } }
.bewegt .auftritt > * { animation: heben 1.2s cubic-bezier(.16, .84, .24, 1) both; }
.bewegt .auftritt > :nth-child(2) { animation-delay: .22s; }
.bewegt .auftritt > :nth-child(3) { animation-delay: .4s; }
@keyframes heben { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.bewegt .zeigen { opacity: 0; transform: translateY(26px); transition: opacity 1.1s ease, transform 1.2s cubic-bezier(.16, .84, .24, 1); }
.bewegt .zeigen.da { opacity: 1; transform: none; }
.profil-bild { overflow: hidden; }
.profil-bild img { will-change: transform; }
.liste a { transition: padding-left .4s cubic-bezier(.16, .84, .24, 1); }
.liste a:hover { padding-left: 14px; }


.drei { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(32px, 6vw, 96px); }
@media (max-width: 860px) { .drei { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* Unterschrift und Begrüßung */
@font-face { font-family: "Signatur"; src: url("fonts/signatur.woff2") format("woff2"); font-display: swap; }
.gruss { font-family: var(--serif); font-size: clamp(19px, 1.6vw, 23px); color: var(--hell-2); margin-bottom: 12px; min-height: 1.3em; }
.signatur { font-family: "Signatur", cursive; font-size: clamp(46px, 5vw, 78px); line-height: 1; color: var(--gold); margin-top: 22px; padding: .1em .25em .15em 0; width: fit-content; }
.bewegt .auftritt > .signatur { animation: schreiben 2.8s cubic-bezier(.45, .05, .35, 1) 1s both; }
@keyframes schreiben { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% -5% -20% 0); } }
.bewegt .auftritt > .gruss { animation-delay: 0s; }
.bewegt .auftritt > :nth-child(2) { animation-delay: .15s; }
.bewegt .auftritt > :nth-child(3) { animation-delay: .35s; }
.bewegt .auftritt > :nth-child(4) { animation-delay: .5s; }

.start, .kontakt { position: relative; overflow: hidden; }
.start > .start-raster, .start > .kopf, .kontakt > :not(.lichter) { position: relative; z-index: 1; }

/* Name zum Anfassen */
.namenspiel { cursor: default; white-space: nowrap; }
.namenspiel .b { display: inline-block; font-weight: 330; will-change: transform; }
.schlussname { background: var(--nacht); color: var(--hell); font-family: var(--serif); font-size: clamp(56px, 14.4vw, 240px); line-height: 1; letter-spacing: -.03em; text-align: center; padding: clamp(24px, 5vw, 64px) 8px clamp(32px, 6vw, 80px); overflow: hidden; }
.bewegt h1 .b { color: var(--hell); }

/* Listen: goldene Fläche fährt unter die Zeile */
.liste a { position: relative; overflow: hidden; }
.liste a::before { content: ""; position: absolute; inset: 0; background: #efe6d3; transform: scaleX(0); transform-origin: left; transition: transform .55s cubic-bezier(.16, .84, .24, 1); z-index: 0; }
.liste a:hover::before { transform: scaleX(1); }
.liste a > * { position: relative; z-index: 1; }


/* Auf einen Blick */
.blick { margin-top: 24px; border-top: 1px solid var(--linie); }
.blick > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 2px 32px; padding-block: 16px; border-bottom: 1px solid var(--linie); align-items: baseline; }
.blick dt { font-size: 14px; color: var(--grau); }
.blick dd { margin: 0; font-family: var(--serif); font-size: clamp(21px, 2vw, 26px); line-height: 1.3; }
.blick a { text-underline-offset: 4px; text-decoration-color: var(--gold-tief); }
@media (max-width: 860px) { .blick > div { grid-template-columns: minmax(0, 1fr); } }

.kopf { justify-content: flex-end; }
@media (max-width: 860px) { .kopf { justify-content: center; } }

/* Wucht über Größe */
.wucht { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.wucht .kopf { position: relative; z-index: 3; width: 100%; max-width: none; }
.wucht .start-raster { flex: 1; display: block; max-width: none; padding: 0; position: static; }
.wucht .start-bild { position: absolute; top: 0; bottom: 0; right: 0; width: min(62vw, 104vh); -webkit-mask-image: linear-gradient(to right, transparent, #000 22%); mask-image: linear-gradient(to right, transparent, #000 22%); }
.wucht .start-bild img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-position: 50% 12%; }
.wucht .start-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--nacht) 2%, rgba(18, 12, 7, 0) 44%); }
.wucht .start-text { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 0 var(--rand) clamp(24px, 5vh, 56px); }
.wucht h1 { font-size: clamp(66px, 15.6vw, 300px); line-height: .94; letter-spacing: -.035em; }
.wucht .titel { font-size: clamp(26px, 3vw, 46px); margin-top: 8px; }
.wucht .unternehmen { font-size: clamp(14px, 1.2vw, 17px); margin-top: 8px; }

/* Vollbild-Foto mit großer Schrift */
.buehne { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--nacht); color: var(--hell); }
.buehne figure, .buehne img { position: absolute; inset: 0; width: 100%; height: 100%; }
.buehne img { object-fit: cover; object-position: 50% 24%; will-change: transform; }
.buehne figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18, 12, 7, .92) 0%, rgba(18, 12, 7, .35) 44%, rgba(18, 12, 7, .1) 70%); }
.buehne-text { position: absolute; z-index: 1; left: var(--rand); right: var(--rand); bottom: clamp(28px, 7vh, 72px); font-family: var(--serif); font-size: clamp(50px, 10vw, 180px); line-height: 1; letter-spacing: -.03em; }
.buehne-text span { display: block; }
.buehne-text span:nth-child(2) { transition-delay: .12s; }
.buehne-text span:nth-child(3) { transition-delay: .24s; }

.einspaltig { display: block; max-width: 1040px; margin-inline: auto; }
.einspaltig .gross { font-size: clamp(34px, 4.8vw, 72px); line-height: 1.1; letter-spacing: -.02em; }
.drei h2 { font-size: clamp(32px, 3.6vw, 56px); }

@media (max-width: 860px) {
  .wucht .start-bild { width: 100%; -webkit-mask-image: none; mask-image: none; }
  .wucht .start-bild img { object-position: 50% 10%; }
  .wucht .start-bild::after { background: linear-gradient(to top, var(--nacht) 8%, rgba(18, 12, 7, 0) 50%); }
  .wucht h1 { font-size: 17vw; }
  .wucht .kopf { padding-block: 12px; }
  .buehne-text { font-size: 14.5vw; }
}

.einspaltig { max-width: var(--breite); }
.einspaltig .gross { max-width: 20em; }
.buehne-text { font-size: clamp(50px, 8vw, 150px); }
@media (max-width: 860px) { .buehne-text { font-size: 14.5vw; } }

/* Auftritt beim Laden: Linie, Name, Vorhang */
#vorhang { display: none; }
.intro #vorhang { display: block; position: fixed; inset: 0; z-index: 20; overflow: hidden; cursor: pointer; }
.vorhang-teil { position: absolute; left: 0; right: 0; height: 50.2%; background: var(--nacht); transition: transform 1.05s cubic-bezier(.76, 0, .18, 1); }
.vorhang-teil.oben { top: 0; }
.vorhang-teil.unten { bottom: 0; }
.vorhang-inhalt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--hell); transition: opacity .45s ease; padding-inline: 16px; }
.vorhang-name { font-family: var(--serif); font-weight: 330; font-size: clamp(52px, 10.5vw, 190px); line-height: 1; letter-spacing: -.03em; white-space: nowrap; }
.vorhang-name .maske { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .08em .18em; margin-block: -.08em -.18em; }
.vorhang-name b { display: inline-block; font-weight: inherit; animation: vorhang-steigen 1s cubic-bezier(.16, .84, .24, 1) both; animation-delay: calc(.32s + var(--i) * .05s); }
.vorhang-name .luecke { display: inline-block; width: .26em; }
@keyframes vorhang-steigen { from { transform: translateY(115%); } to { transform: none; } }
.vorhang-linie { display: block; width: min(76vw, 1000px); height: 1px; margin-top: clamp(14px, 2.4vw, 30px); background: var(--gold); transform-origin: center; animation: vorhang-linie 1.1s cubic-bezier(.76, 0, .18, 1) both; }
@keyframes vorhang-linie { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.vorhang-titel { margin-top: clamp(12px, 1.8vw, 22px); font-family: var(--serif); font-size: clamp(20px, 2.2vw, 32px); color: var(--gold); animation: vorhang-auf .9s ease .95s both; }
@keyframes vorhang-auf { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#vorhang.auf .vorhang-inhalt { opacity: 0; }
#vorhang.auf .oben { transform: translateY(-101%); }
#vorhang.auf .unten { transform: translateY(101%); }

/* Das Porträt fährt erst heran, wenn sich der Vorhang öffnet */
.intro .start-bild img { animation-delay: 1.75s; }
.intro .auftritt > * { animation-delay: 2.15s; }
.intro .auftritt > :nth-child(2) { animation-delay: 2.32s; }
.intro .auftritt > :nth-child(3) { animation-delay: 2.45s; }