/* ¿ANGESPROCHEN — gemeinsames Stylesheet

   Bewusst ohne externe Aufrufe: keine Webfonts, keine Analytics, keine
   Einbettungen. Dadurch entstehen keine Verbindungen zu Dritten, es wird kein
   Cookie-Banner gebraucht, und die Datenschutzerklärung bleibt kurz.
   Die Schrift kommt vom Gerät des Besuchers.

   Farben und Typografie folgen der Endcard der Filme. */

:root{
  --ink:#0A0A0B;
  --ivory:#F2EFE9;
  --muted:rgba(242,239,233,.55);
  --faint:rgba(242,239,233,.34);
  --hair:rgba(242,239,233,.16);
  --stack:system-ui,"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --bar:3.9rem;
}
/* Sanftes Scrollen auch ohne JavaScript. Die eigene, langsamere Animation im
   Skript ueberschreibt das - faellt sie aus, bleibt dieses Verhalten. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--ivory);
  font-family:var(--stack);font-weight:300;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}

/* Textspalte. Bewusst schmal: die Trennlinien sollen nicht weit ueber den
   Satzspiegel hinauslaufen, und Fliesstext wird ab etwa 75 Zeichen pro Zeile
   spuerbar schwerer zu lesen. */
.wrap{width:min(100% - 2.5rem,38rem);margin-inline:auto}

/* Nur der Auftakt braucht mehr Platz: der gesperrte Namenszug misst bei voller
   Schriftgroesse gut 41rem und darf nicht umbrechen. */
.hero.wrap{width:min(100% - 2.5rem,46rem)}

/* ---------- Kopfzeile ----------
   Erscheint erst, wenn der Auftakt verlassen ist. Der volle Bildschirm mit dem
   Namenszug ist der staerkste Moment der Seite - eine dauerhaft sichtbare
   Leiste wuerde ihn zerteilen. */
.topbar{
  position:fixed;inset:0 0 auto;z-index:10;
  background:rgba(10,10,11,.82);
  border-bottom:1px solid var(--hair);
  opacity:0;transform:translateY(-100%);
  transition:opacity .5s ease,transform .5s ease;
  pointer-events:none;
}
@supports (backdrop-filter:blur(1px)){
  .topbar{backdrop-filter:blur(14px);background:rgba(10,10,11,.62)}
}
.topbar.show{opacity:1;transform:none;pointer-events:auto}
.topbar .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;height:var(--bar);
}
.topbar .home{
  font-size:1.15rem;font-weight:300;color:var(--ivory);
  text-decoration:none;line-height:1;
}
.topbar nav{display:flex;gap:clamp(.9rem,4vw,1.8rem)}
.topbar nav a{
  font-size:.6rem;font-weight:600;color:var(--muted);
  text-decoration:none;white-space:nowrap;transition:color .25s ease;
}
.topbar nav a:hover,.topbar nav a:focus-visible{color:var(--ivory)}

/* Damit die Ueberschrift nicht unter der Leiste verschwindet. */
section[id]{scroll-margin-top:calc(var(--bar) + 1rem)}

/* ---------- Zurueck nach oben ----------
   44 x 44 px, weil das die kleinste zuverlaessig treffbare Flaeche fuer einen
   Daumen ist. Erscheint gemeinsam mit der Kopfleiste. */
.totop{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:9;
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(10,10,11,.72);
  border:1px solid var(--hair);
  color:var(--ivory);text-decoration:none;
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .5s ease,transform .5s ease,border-color .25s ease;
}
@supports (backdrop-filter:blur(1px)){
  .totop{backdrop-filter:blur(14px);background:rgba(10,10,11,.5)}
}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover,.totop:focus-visible{border-color:var(--ivory)}
/* Der Pfeil entsteht aus zwei Rahmenkanten, nicht aus einem Schriftzeichen:
   die Seite nutzt die Systemschrift des Besuchers, ein Glyph wie "^" saehe
   auf jedem Geraet anders aus. */
.totop::before{
  content:"";width:9px;height:9px;
  border-left:1px solid currentColor;border-top:1px solid currentColor;
  transform:translateY(2px) rotate(45deg);
}

/* Gesperrte Versalien. letter-spacing hängt auch hinter dem letzten Zeichen,
   das schiebt zentrierten Text nach links — mit negativem Rand ausgeglichen. */
.tracked{letter-spacing:.42em;margin-right:-.42em}
.tracked-s{letter-spacing:.22em;margin-right:-.22em}

/* ---------- Auftakt ---------- */
/* Der Namenszug zentriert sich im freien Raum, die Zeile darunter sitzt am
   unteren Rand. Deshalb margin-block:auto statt justify-content:center - ein
   auto-Rand am letzten Kind wuerde die Zentrierung sonst ueberstimmen. */
.hero{
  min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;text-align:center;
  padding:5rem 0 3rem;
}
.hero-main{margin-block:auto}
/* margin-block statt der Kurzschreibweise margin: sonst ueberschreibt diese
   spaeter stehende Regel das margin-right von .tracked und die Kompensation
   der Laufweite faellt weg. */
.mark{
  font-size:clamp(1.55rem,7.2vw,3.1rem);
  font-weight:300;margin-block:0;white-space:nowrap;
}
.rule{
  height:1px;background:var(--hair);border:0;margin:2.4rem auto 2.2rem;
  width:min(9rem,42%);
}
/* margin-inline:auto ist noetig, weil p eine max-width traegt und sonst
   linksbuendig im Block sitzt - der Claim stuende dann neben der Achse
   des Namenszugs statt darunter. */
.claim{
  font-size:clamp(1.06rem,4.2vw,1.4rem);
  margin:0 auto;color:var(--ivory);text-wrap:balance;
}
.claim span{display:block;color:var(--muted)}
.hero-foot{padding-top:3.5rem;display:flex;flex-direction:column;align-items:center}
.scroll{font-size:.62rem;color:var(--faint);margin-block:0}

/* Scroll-Hinweis: ein Lichtsegment wandert eine Haarlinie hinab. Wortlos, weil
   die Seite sonst ein englisches Wort in einem sonst durchgehend deutschen
   Auftritt haette - und weil die Bewegung allein schon verstanden wird. */
.cue{
  width:1px;height:56px;margin-top:1.5rem;
  background:rgba(242,239,233,.12);position:relative;overflow:hidden;
}
.cue::after{
  content:"";position:absolute;left:0;top:0;width:1px;height:18px;
  background:var(--ivory);
  animation:cue 2.6s ease-in-out infinite;
}
@keyframes cue{
  0%{transform:translateY(-18px);opacity:0}
  30%{opacity:.9}
  70%{opacity:.9}
  100%{transform:translateY(56px);opacity:0}
}

/* ---------- Abschnitte ---------- */
section{padding:5.5rem 0;border-top:1px solid var(--hair)}
.label{font-size:.63rem;font-weight:600;color:var(--faint);margin-block:0 2.2rem}
h2{font-size:clamp(1.6rem,6vw,2.3rem);font-weight:300;margin:0 0 .9rem}
h2 sup{font-size:.34em;vertical-align:super;opacity:.7;margin-left:.12em}
/* Keine eigene max-width noetig: die Spalte begrenzt bereits auf rund
   76 Zeichen pro Zeile. */
p{margin:0 0 1.1rem;color:var(--muted);font-size:1rem}

/* Blocksatz nur im Fliesstext - nicht im zentrierten Auftakt und nicht in den
   gesperrten Kleinzeilen.

   hyphens:auto ist dabei Pflicht, nicht Kosmetik: Browser verteilen im
   Blocksatz sonst den gesamten Ausgleich auf die Wortabstaende. Im Deutschen
   mit Woertern wie "Dienstleistungen" oder "Premiumwerbung" reisst das in
   einer schmalen Spalte weisse Luecken auf. Die Trennung greift nur, weil
   das lang-Attribut im html-Tag gesetzt ist - ohne das passiert nichts. */
main section p:not(.label),
.legal p,
.legal li{
  text-align:justify;
  hyphens:auto;
  -webkit-hyphens:auto;
}
p.lead{color:var(--ivory)}

/* Das Standbild ist 9:16 - ueber die volle Containerbreite waere es auf dem
   Desktop weit ueber 1300 px hoch. Breite deckeln, links buendig zum Text. */
figure{margin:0 0 2.4rem;max-width:min(100%,20rem)}
figure img{display:block;width:100%;height:auto;border-radius:2px;background:#141416}
figcaption{margin-top:.85rem;font-size:.63rem;color:var(--faint)}

.link{
  display:inline-block;margin-top:.4rem;
  font-size:.72rem;font-weight:600;color:var(--ivory);text-decoration:none;
  padding-bottom:.42rem;border-bottom:1px solid var(--hair);
  transition:border-color .25s ease;
}
.link:hover,.link:focus-visible{border-color:var(--ivory)}

.mail{
  font-size:clamp(1.1rem,5vw,1.6rem);font-weight:300;
  color:var(--ivory);text-decoration:none;
  border-bottom:1px solid var(--hair);padding-bottom:.2rem;
  transition:border-color .25s ease;overflow-wrap:anywhere;
}
.mail:hover,.mail:focus-visible{border-color:var(--ivory)}

/* ---------- Rechtsseiten ---------- */
.legal{padding:4.5rem 0 3rem}
.legal .back{
  display:inline-block;margin-bottom:3.2rem;
  font-size:.66rem;font-weight:600;color:var(--muted);text-decoration:none;
  transition:color .25s ease;
}
.legal .back:hover,.legal .back:focus-visible{color:var(--ivory)}
.legal h1{font-size:clamp(1.5rem,5.5vw,2rem);font-weight:300;margin:0 0 2.8rem}
.legal h2{font-size:1.02rem;font-weight:600;margin:2.8rem 0 .8rem}
.legal h3{font-size:.86rem;font-weight:600;margin:1.9rem 0 .6rem;color:var(--muted)}
.legal h4{font-size:.82rem;font-weight:600;margin:1.4rem 0 .5rem;color:var(--faint)}
.legal p,.legal li{font-size:.94rem;color:var(--muted)}
/* Die langen Behoerden- und Anbieter-URLs im Rechtstext duerfen im Blocksatz
   nicht ueber die Spalte hinauslaufen. */
.legal a{overflow-wrap:anywhere}
/* Der Widerspruchshinweis nach Art. 21 DSGVO steht konventionell in
   Versalien. Blocksatz reisst darin sehr grosse Luecken - hier linksbuendig. */
.legal .shout{text-align:left;hyphens:none}
.legal address{font-style:normal;color:var(--ivory);margin-bottom:1.4rem;line-height:1.9}
.legal a{color:var(--ivory)}
.legal ul{padding-left:1.1rem;margin:0 0 1.1rem}
.legal li{margin-bottom:.4rem}
.legal .note{
  border-left:1px solid var(--hair);padding:.2rem 0 .2rem 1.2rem;
  margin:2rem 0;color:var(--faint);font-size:.86rem;
}

/* ---------- Fuß ---------- */
footer{
  border-top:1px solid var(--hair);padding:3rem 0 3.5rem;
  display:flex;flex-wrap:wrap;gap:1.6rem 2rem;
  align-items:baseline;justify-content:space-between;
}
footer nav{display:flex;flex-wrap:wrap;gap:1.6rem}
footer a{
  font-size:.66rem;font-weight:600;color:var(--muted);
  text-decoration:none;transition:color .25s ease;
}
footer a:hover,footer a:focus-visible{color:var(--ivory)}
.sig{font-size:.66rem;color:var(--faint)}

/* ---------- Auftritt ----------
   Gestaffelte Blenden wie auf der Endcard der Filme: die Seite öffnet sich
   so, wie ein Spot endet. */
.fade,.fade-late{opacity:0;transform:translateY(9px);animation:rise .9s ease forwards}
.fade:nth-child(1){animation-delay:.15s}
.fade:nth-child(2){animation-delay:.45s}
.fade:nth-child(3){animation-delay:.7s}
.fade-late{animation-delay:1.5s}
@keyframes rise{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .fade,.fade-late{animation:none;opacity:1;transform:none}
  .cue::after{animation:none;opacity:.5;transform:translateY(19px)}
  *{transition-duration:.01ms!important}
}

:focus-visible{outline:1px solid var(--ivory);outline-offset:4px}