/* ==========================================================================
   danieldonko.de – Stylesheet
   Farben, Schrift und Abstände stehen in den Variablen ganz oben.
   Alle Maße wachsen fließend zwischen den drei Layouts mit:
   Smartphone 390 px  →  Tablet 768 px  →  Desktop 1920 px
   ========================================================================== */

@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  /* feste Schriftmetrik, damit Abstände in allen Browsern gleich sind */
  ascent-override: 98.7%;
  descent-override: 21.3%;
  line-gap-override: 0%;
}

:root {
  --weiss: #ffffff;
  --rot:   #EF0034;
  --blau:  #00243B;
  /* Abstand rechter Rand (Video-Vorschau / Kontaktzeilen auf Desktop): 24 px bei 1440 px */
  --rechts-buendig: 1.667%;
  /* Abstand Oberkante Zeile → Oberkante Schrift bei Lato (Zeilenhöhe 1,2) */
  --kappe: 0.19;
}

/* --- Fließende Maße (Smartphone → Tablet → Desktop) --------------------- */
:root {
  --rand: calc(27px + 45 * (100vw - 390px) / 378);
  --oben: 50px;
  --logo: calc(80px + 20 * (100vw - 390px) / 378);
  --logo-linie: calc(15px + 13 * (100vw - 390px) / 378);
  --linie-video: calc(15px + 13 * (100vw - 390px) / 378);
  --video-text: 37px;
  --kontakt: calc(13px + 7 * (100vw - 390px) / 378);
  --impressum: calc(10px + 6 * (100vw - 390px) / 378);
  --text-text: calc(79px + 25 * (100vw - 390px) / 378);
  --unten: 50px;
  --hinweis: calc(9px + 3 * (100vw - 390px) / 378);
  --fliess: calc(15px + 1 * (100vw - 390px) / 378);
  --h1: calc(24px + 4 * (100vw - 390px) / 378);
  --h2: calc(18px + 2 * (100vw - 390px) / 378);
  --h3: calc(16px + 1 * (100vw - 390px) / 378);
  --linie: 2px;
}

@media (min-width: 768px) {
  :root {
    --rand: calc(72px + 168 * (100vw - 768px) / 1152);
    --oben: calc(50px + -15 * (100vw - 768px) / 1152);
    --logo: calc(100px + -20 * (100vw - 768px) / 1152);
    --logo-linie: calc(28px + -6 * (100vw - 768px) / 1152);
    --linie-video: calc(28px + -6 * (100vw - 768px) / 1152);
    --video-text: calc(37px + -14 * (100vw - 768px) / 1152);
    --kontakt: calc(20px + 3 * (100vw - 768px) / 1152);
    --impressum: calc(16px + 2 * (100vw - 768px) / 1152);
    --text-text: 104px;
    --unten: calc(50px + -15 * (100vw - 768px) / 1152);
    --hinweis: calc(12px + 3 * (100vw - 768px) / 1152);
    --fliess: calc(16px + 2 * (100vw - 768px) / 1152);
    --h1: calc(28px + 6 * (100vw - 768px) / 1152);
    --h2: calc(20px + 4 * (100vw - 768px) / 1152);
    --h3: calc(17px + 3 * (100vw - 768px) / 1152);
    --linie: 3px;
  }
}

@media (min-width: 1920px) {
  :root {
    --rand: 240px;
    --oben: 35px;
    --logo: 80px;
    --logo-linie: 22px;
    --linie-video: 22px;
    --video-text: 23px;
    --kontakt: 23px;
    --impressum: 18px;
    --text-text: 104px;
    --unten: 35px;
    --hinweis: 15px;
    --fliess: 18px;
    --h1: 34px;
    --h2: 24px;
    --h3: 20px;
  }
}


/* --- Grundlagen ---------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--weiss);
  color: var(--blau);
  font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--rot);
  outline-offset: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--rand);
  top: 8px;
  background: var(--weiss);
  padding: 4px 8px;
}

.unsichtbar {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Seitenrahmen -------------------------------------------------------- */
.seite {
  width: min(1440px, 100% - 2 * var(--rand));
  margin-inline: auto;
  padding-top: var(--oben);
  padding-bottom: var(--unten);
}

/* --- Kopf: Logo + rote Linie --------------------------------------------- */
.logo {
  display: inline-block;
  vertical-align: top;
}
.logo img {
  height: var(--logo);
  width: auto;
}

.linie {
  height: var(--linie);
  /* Abstände werden bis zur Linienmitte gemessen */
  margin: calc(var(--logo-linie) - var(--linie) / 2) 0 0;
  border: 0;
  background: var(--rot);
}

/* --- Video mit Zwei-Klick-Lösung ---------------------------------------- */
.video {
  position: relative;
  margin-top: calc(var(--linie-video) - var(--linie) / 2);
  aspect-ratio: 16 / 9;
  background: var(--blau);
  overflow: hidden;
}

.video-start,
.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-start { cursor: pointer; }

.video-start img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-hinweis {
  position: absolute;
  left: 5%;
  right: var(--rechts-buendig);
  bottom: 4%;
  margin: 0;
  text-align: right;
  font-size: var(--hinweis);
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.7);
  pointer-events: none;
}

/* Smartphone quer: Video so begrenzen, dass es ganz auf den Bildschirm passt */
@media (orientation: landscape) and (max-height: 500px) {
  /* ganze Seite auf Videobreite begrenzen, damit Logo, Linie und Video bündig bleiben */
  .seite {
    width: min(1440px, 100% - 2 * var(--rand), (100vh - 24px) * 16 / 9);
    width: min(1440px, 100% - 2 * var(--rand), (100svh - 24px) * 16 / 9);
  }
}

/* --- Fußzeile: Kontakt / Impressum & Datenschutz ------------------------- */
.fuss {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: calc(var(--video-text) - var(--kappe) * var(--kontakt));
}

.fuss a {
  position: relative;
  color: var(--rot);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
/* größere Klickfläche für Finger, ohne das Layout zu verschieben */
.fuss a::after {
  content: "";
  position: absolute;
  inset: -10px -6px;
}

.kontakt {
  font-size: var(--kontakt);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.18em;
}
.kontakt:hover,
.kontakt:focus-visible {
  color: var(--blau);
  text-decoration-color: var(--blau);
}

.rechtliches {
  font-size: var(--impressum);
  margin-top: calc(var(--text-text) - 1.2 * var(--kontakt) - var(--kappe) * (var(--impressum) - var(--kontakt)));
}
.rechtliches:hover,
.rechtliches:focus-visible,
.rechtliches[aria-current="page"] {
  color: var(--blau);
}

/* ab 1024 px: Kontakt und Impressum rechtsbündig untereinander,
   Zeilenabstand 36 px (Grundlinie zu Grundlinie) */
@media (min-width: 1024px) {
  .fuss {
    align-items: flex-end;
    text-align: right;
    padding-right: var(--rechts-buendig);
  }
  .rechtliches {
    margin-top: calc(36px - 0.213 * var(--kontakt) - 0.987 * var(--impressum));
  }
}

/* --- Unterseite Impressum & Datenschutz ---------------------------------- */
.rechtstext {
  max-width: 46em;
  margin-top: var(--linie-video);
  font-size: var(--fliess);
  line-height: 1.6;
}

.rechtstext h1,
.rechtstext h2,
.rechtstext h3,
.rechtstext h4 {
  font-weight: 500;
  line-height: 1.25;
  margin: 2em 0 0.6em;
}
.rechtstext h1 { font-size: var(--h1); color: var(--rot); margin-top: 1.4em; }
.rechtstext h2 { font-size: var(--h2); }
.rechtstext h3 { font-size: var(--h3); }
.rechtstext h4 { font-size: 1em; color: var(--rot); margin-top: 1.4em; }
.rechtstext > :first-child { margin-top: 0.8em; }

.rechtstext p,
.rechtstext ul { margin: 0 0 1em; }
.rechtstext ul { padding-left: 1.2em; }
.rechtstext li { margin-bottom: 0.5em; }

.rechtstext a {
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.18em;
  overflow-wrap: anywhere;
}
.rechtstext a:hover { color: var(--rot); }

.rechtstext .adresse { margin-bottom: 1em; }

.rechtstext .hervorgehoben {
  border-left: 3px solid var(--rot);
  padding: 0.2em 0 0.2em 1em;
  margin: 0 0 1em;
}

.rechtstext .quelle {
  margin-top: 2.5em;
  font-size: 0.85em;
}

.seite-recht .fuss {
  margin-top: 4em;
}