/* ============================================================
   chrisroemer.de — main.css
   Vollbild-Headervideo, Typo-Overlay.
   Schrift:  Abril Fatface (Hauptzeile, Ziffern, Striche)
             Inter Extra Bold 18pt / Regular 14pt (Rest)
   Farben:   Text Pantone 664 C, Hover Pantone 7418 C,
             Grund Pantone Black 6 C.
   ============================================================ */

/* ---------- Schriften, selbst gehostet ----------
   Dateien nach assets/fonts/ — siehe assets/fonts/README.txt   */
@font-face{
  font-family:'Abril Fatface';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/AbrilFatface-Regular.woff2') format('woff2'),
      url('../fonts/AbrilFatface-Regular.ttf') format('truetype');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/Inter.woff2') format('woff2'),
      url('../fonts/Inter.ttf') format('truetype');
}

:root{
  --bg:#101820;            /* Pantone Black 6 C */
  --text:#E0DBE3;          /* Pantone 664 C — "Weiss" */
  --hover:#CD545B;         /* Pantone 7418 C */

  --serif:'Abril Fatface',Didot,'Bodoni MT','Playfair Display',Georgia,serif;
  --sans:'Inter',Helvetica,Arial,system-ui,sans-serif;

  /* Typo-System:
     h1 = Mainline Zentrum        (72px @1920, -10% von 60pt)
     h2 = Pause/Play, Mail, Nav   (60% der vorigen Groesse)
     h3 = Beschreibung, Copyright (60%, dann -10%)
     h4 = Ziffern, X + grafische Elemente (Balken, Pause)   */
  --fs-h1:clamp(30px,4.41vw,72px);
  --fs-h2:clamp(9px,0.81vw,14.5px);
  --fs-h3:clamp(8px,0.57vw,10.3px);
  --fs-h4:clamp(11px,0.85vw,15.3px);

  --edge-l:clamp(20px,6vw,120px);
  --edge-r:clamp(18px,3.9vw,80px);
  --edge-t:clamp(18px,4.7vh,54px);
  --edge-b:clamp(16px,4vh,46px);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;                 /* Seite ist bewusst nicht scrollbar */
}
::selection{background:var(--hover);color:var(--bg)}
:focus-visible{outline:1px solid var(--hover);outline-offset:4px}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}

/* Hover-Regel: der Container faerbt sich, alle Kinder erben ueber
   currentColor — Titel und der Balken darunter also immer zusammen. */
.hov,.dock a.item,.dock a.item .label,.dock a.item .digit,
.pausewrap .label,.pausewrap .glyph i,.pausewrap .glyph.play::after{
  transition:color .5s ease,background-color .5s ease,border-color .5s ease;
}
.hov:hover,.hov:focus-visible,
.dock a.item:hover,.dock a.item:focus-visible,
.pausewrap:hover,.pausewrap:focus-visible{color:var(--hover)}

/* ============================================================
   Hintergrundvideo
   ============================================================ */
.bg{position:fixed;inset:0;z-index:0;background:var(--bg)}
.bg video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
}
/* Hauch Abdunklung, damit die 664-C-Typo auf hellen Szenen traegt */
.bg::after{
  content:'';position:absolute;inset:0;
  background:rgba(16,24,32,.30);
}

/* ============================================================
   Overlay-Ebene
   ============================================================ */
.ui{position:fixed;inset:0;z-index:1}

/* ---------- Monogramm oben links ---------- */
.monogram{
  position:absolute;top:var(--edge-t);left:var(--edge-l);
  display:block;
}
.monogram .logo{
  display:block;
  height:clamp(16px,1.5vw,24.5px);           /* nochmal 20% kleiner */
  width:calc(clamp(16px,1.5vw,24.5px) * 1.511);
  background:currentColor;
  -webkit-mask:url('../img/logo.png') no-repeat center / contain;
  mask:url('../img/logo.png') no-repeat center / contain;
  transition:background-color .5s ease;
}

/* ---------- Pause oben rechts ---------- */
.pausewrap{
  position:absolute;left:var(--edge-l);bottom:var(--edge-b);
  display:flex;flex-direction:column;align-items:flex-start;
  gap:calc(9px + var(--fs-h4) * .1);
}
.pausewrap .label{
  font-family:var(--sans);font-weight:400;
  font-size:var(--fs-h3);letter-spacing:.015em;
  text-transform:uppercase;
}
/* Pause-Zeichen: zwei Balken, 10% kleiner als h4 */
.pausewrap .glyph{
  display:flex;gap:calc(var(--fs-h4) * .26);
  height:calc(var(--fs-h4) * .9);
}
.pausewrap .glyph i{
  display:block;width:1.225px;height:100%;
  background:currentColor;
}
/* Play-Zustand: Dreieck, gleiche Hoehe */
.pausewrap .glyph.play i{display:none}
.pausewrap .glyph.play::after{
  content:'';display:block;
  border-left:calc(var(--fs-h4) * .675) solid currentColor;
  border-top:calc(var(--fs-h4) * .45) solid transparent;
  border-bottom:calc(var(--fs-h4) * .45) solid transparent;
}

/* ---------- Hauptzeile ---------- */
.hero{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:0 var(--edge-r) 0 var(--edge-l);
  pointer-events:none;
  text-align:center;
}
.hero h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:var(--fs-h1);
  line-height:1.1;
  letter-spacing:.9em;            /* Photoshop-Laufweite 900 */
  margin-right:-.9em;             /* Spationierung optisch zentrieren */
  text-transform:uppercase;
  white-space:nowrap;
}

/* ---------- Beschreibung unten links ---------- */
.desc{
  position:absolute;right:var(--edge-r);top:var(--edge-t);
  text-align:right;
  font-family:var(--sans);font-weight:400;
  font-size:var(--fs-h3);
  line-height:1.4;letter-spacing:.015em;
  text-transform:uppercase;
}
/* Grafischer Balken, buendig zur Beschreibung, 4x h4 nach unten */
.desc .caret{
  display:block;margin-top:12px;margin-left:auto;
  width:1.225px;height:calc(var(--fs-h4) * 6);
  background:currentColor;
}

/* ---------- Leiste unten: Mail, Nav, Copyright ---------- */
.dock{
  position:absolute;left:0;right:0;bottom:var(--edge-b);
  height:auto;
}
.dock .item{
  position:absolute;bottom:0;
  display:flex;flex-direction:column;align-items:flex-end;gap:9px;
}
/* Mail exakt in der Bildmitte; die weiteren Punkte sitzen an den
   aus der Referenz gemessenen Rechtskanten (in vw), Copyright am
   rechten Rand. Balken bleiben rechtsbuendig zur Zeile darueber. */
.dock .item.pos-mail{left:50%;transform:translateX(-50%)}
.dock .item.pos-mail{padding-bottom:calc(var(--fs-h4) + 9px)}
.dock .item.pos-mail .label{
  font-family:var(--sans);font-weight:400;
  font-size:var(--fs-h3);
  letter-spacing:.015em;text-transform:uppercase;
}
.dock .item.pos-2{right:33.75vw}
.dock .item.pos-3{right:23.1vw}
.dock .item.pos-4{right:12.65vw}
.dock .item.copy{right:var(--edge-r)}
.dock .item > .label{
  font-family:var(--sans);font-weight:800;
  font-size:var(--fs-h2);letter-spacing:.02em;
  text-transform:uppercase;white-space:nowrap;
}
/* Statt Ziffern: senkrechte Balken in exakt h4-Hoehe */
.dock .item > .digit{
  display:block;
  width:1.225px;height:var(--fs-h4);
  background:currentColor;
  transition:background-color .5s ease;
}

/* Copyright rechts aussen, Regular statt Extra Bold.
   Nicht klickbar: kein Hover, kein Zeiger — wie die
   Beschreibung unten links. */
.dock .item.wip{opacity:.5;cursor:default}
.dock .item.copy{cursor:default}
.dock .item.copy > .label{
  font-weight:400;font-size:var(--fs-h3);
  letter-spacing:.015em;text-transform:uppercase;
}
/* Social-Zeichen in h4-Hoehe, einzeln hover-faehig */
.dock .social{
  display:flex;justify-content:flex-end;align-items:center;
  gap:calc(var(--fs-h4) * .85);
}
.dock .social a{display:block;line-height:0}
.dock .social svg{
  height:var(--fs-h4);display:block;
}
.dock .social svg .line{stroke:currentColor;fill:none}
.dock .social svg .fill{fill:currentColor;stroke:none}
/* Groessenverhaeltnis nach Referenz-Screenshot:
   Instagram-Quadrat = volle h4-Hoehe (Bezug),
   LinkedIn "in" optisch gleich hoch,
   IMDb-Schriftzug rund 58% davon.
   Die Faktoren rechnen die Schriftgroesse auf die tatsaechlich
   sichtbare Zeichenhoehe um (Versalhoehe ~0,72 em, i-Punkt ~0,75 em). */
.dock .social .txt{
  font-family:var(--sans);font-weight:800;
  line-height:1;letter-spacing:.01em;
  display:block;
}
.dock .social .txt-in{font-size:calc(var(--fs-h4) * 1.064)}
.dock .social .txt-imdb{font-size:calc(var(--fs-h4) * 0.736);letter-spacing:-.01em}
.desc{cursor:default}

/* Die Ziffer erbt den Hover des Elternelements */


/* ============================================================
   Kleine Screens — kein Scrollen, alles bleibt auf einem Schirm
   ============================================================ */
@media (max-width:900px){
  /* Ecken bleiben Ecken: Logo oben links, Beschreibung oben rechts,
     Pause unten links, Copyright + Social unten rechts, Mail mittig
     unten. Nur Work/About/Carlo ruecken als Reihe ueber die Mail. */
  .hero h1{
    white-space:pre-line;      /* Umbrueche aus dem Text uebernehmen */
    line-height:1.4;
    font-size:clamp(28px,9.5vw,72px);
  }
  .dock .item.pos-2{left:50%;right:auto;transform:translateX(calc(-50% - 74px));bottom:46px}
  .dock .item.pos-3{left:50%;right:auto;transform:translateX(-50%);bottom:46px}
  .dock .item.pos-4{left:50%;right:auto;transform:translateX(calc(-50% + 74px));bottom:46px}
  .desc{max-width:58vw}
}