:root {
  --schwarz: #0a0a0a;
  --weiss: #f2f0ec;
  --akzent: #cc2418;

  /* Schriften */
  --schrift-titel: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --schrift-text: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --titel-gewicht: 300;
  --titel-gross: none;
  --titel-abstand: -0.03em;
  --titel-zeile: 1;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--schwarz);
  color: var(--weiss);
  font-family: var(--schrift-text);
}

/* ---------- Der Name ---------- */

.logo {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  font-weight: 400;
  font-size: clamp(4rem, 13vw, 12rem);
  line-height: 0.9;
  white-space: nowrap;
}

/* Das gekritzelte Logo */
.logo svg {
  display: block;
  overflow: visible;
}

.logo path {
  fill: none;
  stroke: var(--akzent);
  stroke-width: var(--strich, 3);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.7s ease-out;
}

.logo svg.gezeichnet path {
  stroke-dashoffset: 0;
}

/* Schwarzer Balken hinter dem kleinen Logo, damit Text darunter verschwindet */
.kopfleiste {
  position: fixed;
  z-index: 9;
  top: 0;
  left: 0;
  right: 0;
  height: 6rem;
  background: linear-gradient(var(--schwarz) 55%, transparent);
  opacity: 0;
  pointer-events: none;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 15% center;
}


/* ---------- About ---------- */

.about {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 6vw;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20vh 7vw;
}

.label {
  color: #8a8781;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.75rem;
  margin-bottom: 2rem;
}

.about h2 {
  font-family: var(--schrift-titel);
  font-weight: var(--titel-gewicht);
  text-transform: var(--titel-gross);
  letter-spacing: var(--titel-abstand);
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  line-height: var(--titel-zeile);
  margin-bottom: 2.5rem;
}

.about-text p:not(.label) {
  color: #bdbab4;
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 34em;
}

.about-text p + p {
  margin-top: 1.2rem;
}

.about-bild {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* ---------- Handy ---------- */

@media (max-width: 700px) {
  .about {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 14vh 6vw;
  }
}

/* ---------- Maus-Strich ---------- */

.maus-strich {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 20;
}

/* ---------- Menü ---------- */

/* Leiste oben: links zwei Links, rechts zwei Links, in der Mitte Platz für das Logo */
.menue {
  position: fixed;
  z-index: 16;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 7vw;
  pointer-events: none; /* die Leiste selbst blockiert nichts, nur die Links sind klickbar */
}

.menue-seite {
  display: flex;
  gap: 2.5rem;
  pointer-events: auto;
}

.menue a,
.menue-knopf {
  position: relative;
  color: var(--weiss);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-family: var(--schrift-text);
  font-size: 0.75rem;
  font-weight: 500;
}

/* Der rote Kritzel-Strich, der beim Drüberfahren durch das Wort gezogen wird */
.menue a svg,
.menue-overlay a svg {
  position: absolute;
  left: -8%;
  top: 50%;
  width: 116%;
  height: 0.9em;
  transform: translateY(-50%);
  overflow: visible;
  pointer-events: none;
}

.menue a path,
.menue-overlay a path {
  fill: none;
  stroke: var(--akzent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Strich ist erst unsichtbar (von rechts komplett abgedeckt) und wird beim Drüberfahren von links nach rechts aufgedeckt */
.menue a svg,
.menue-overlay a svg {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.3s ease-out;
}

.menue a:hover svg,
.menue a:focus-visible svg,
.menue-overlay a:hover svg,
.menue-overlay a:focus-visible svg {
  clip-path: inset(-50% -10% -50% 0);
}

/* "MENU"-Knopf: nur am Handy sichtbar */
.menue-knopf {
  display: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
}

/* Vollbild-Menü am Handy */
.menue-overlay {
  position: fixed;
  inset: 0;
  z-index: 15;
  background: var(--schwarz);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.2rem;
  padding: 0 6vw;
}

.menue-overlay[hidden] {
  display: none;
}

.menue-overlay a {
  position: relative;
  align-self: flex-start; /* linksbündig, unter dem MENU-Knopf */
  color: var(--weiss);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 2.6rem;
  line-height: 1;
}

@media (max-width: 700px) {
  .menue {
    justify-content: flex-start; /* MENU-Knopf links oben */
    padding: 0 6vw;
  }

  .menue-seite {
    display: none;
  }

  .menue-knopf {
    display: block;
  }
}


/* Das weiche Scrollen bei Klick auf einen Menü-Link macht jetzt menue.js (dort ist die Geschwindigkeit einstellbar) */

/* ---------- Booking ---------- */

.booking {
  max-width: 1400px;
  margin: 0 auto;
  padding: 22vh 7vw 6vh;
}

/* Die Mail-Adresse: das einzige große Element */
.booking .mail {
  position: relative;
  display: inline-block;
  background: none;
  border: 0;
  padding: 0;
  color: var(--weiss);
  font-family: var(--schrift-text);
  font-weight: 400;
  font-size: clamp(1.5rem, 5vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}

/* Instagram und Ort: klein, wie das Menü */
.booking-details {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 3rem;
  margin-top: 3rem;
}

.booking-details a,
.booking-details span {
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.75rem;
  font-weight: 500;
}

.booking-details a {
  color: var(--weiss);
  text-decoration: none;
}

.booking-details span {
  color: #5f5c57;
}

/* Roter Kuli-Strich beim Drüberfahren (gleich wie im Menü) */
.booking svg {
  position: absolute;
  left: -3%;
  top: 50%;
  width: 106%;
  height: 0.7em;
  transform: translateY(-50%);
  overflow: visible;
  pointer-events: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.35s ease-out;
}

.booking-details a svg {
  height: 1em;
}

.booking path {
  fill: none;
  stroke: var(--akzent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.booking a:hover svg,
.booking a:focus-visible svg,
.booking .mail:hover svg,
.booking .mail:focus-visible svg {
  clip-path: inset(-50% -10% -50% 0);
}

.booking a:focus-visible,
.booking .mail:focus-visible {
  outline: none;
}

.fuss {
  margin-top: 16vh;
  color: #5f5c57;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.7rem;
}

/* ---------- Weicher Übergang vom Hero-Foto in den Hintergrund ---------- */

/* Eine unsichtbare Fläche unten im Hero, die von durchsichtig nach Schwarz verläuft */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 65%;
  /* mehrere Zwischenstufen, damit der Verlauf ganz sanft beginnt und unten satt schwarz wird */
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(10, 10, 10, 0.15) 25%,
    rgba(10, 10, 10, 0.45) 50%,
    rgba(10, 10, 10, 0.8) 75%,
    var(--schwarz) 100%
  );
  pointer-events: none;
}

/* ---------- Footer-Link ---------- */

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

.fuss a:hover {
  color: var(--weiss);
}

.fuss .trenner {
  margin: 0 0.6em;
}

/* ---------- Unterseiten (Impressum) ---------- */

.rechtliches {
  max-width: 760px;
  margin: 0 auto;
  padding: 10vh 7vw 14vh;
}

.zurueck {
  display: inline-block;
  margin-bottom: 8vh;
  color: var(--weiss);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.75rem;
  font-weight: 500;
}

.zurueck:hover {
  color: var(--akzent);
}

.rechtliches h2 {
  font-weight: 300;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 4rem;
}

.rechtliches dl {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: 1.4rem 2rem;
}

.rechtliches dt {
  color: #8a8781;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.72rem;
  padding-top: 0.25rem;
}

.rechtliches dd {
  color: #bdbab4;
  line-height: 1.6;
}

.rechtliches dd a {
  color: var(--weiss);
}

@media (max-width: 700px) {
  .rechtliches dl {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  .rechtliches dd {
    margin-bottom: 1.2rem;
  }
}

/* ---------- Handy-Korrekturen ---------- */

/* Nichts darf seitlich über den Bildschirm hinausragen (sonst wackelt die Seite am Handy) */
html,
body {
  overflow-x: clip;
}

.booking {
  overflow-x: clip;
}

@media (max-width: 700px) {
  /* Bildausschnitt im Hero weiter nach rechts, damit das ganze Gesicht drauf ist */
  .hero img {
    object-position: 31% center;
  }

  /* Weniger leerer Platz zwischen About und Booking */
  .booking {
    padding-top: 10vh;
  }
}

/* ---------- Intro beim Laden ---------- */
.intro-laeuft { overflow: hidden; }          /* während dem Intro nicht scrollen */
.intro-laeuft .logo { z-index: 18; }         /* Logo liegt über dem Schwarz */

.intro {
  position: fixed;
  inset: 0;
  z-index: 17;
}

/* Zwei schwarze Hälften, die auseinandergehen */
.intro-oben,
.intro-unten {
  position: absolute;
  left: 0;
  right: 0;
  height: calc(50% + 1px);
  background: var(--schwarz);
  transition: transform var(--dauer, 1000ms) cubic-bezier(0.65, 0, 0.35, 1);
}
.intro-oben { top: 0; }
.intro-unten { bottom: 0; }
.intro.auf .intro-oben { transform: translateY(-100%); }
.intro.auf .intro-unten { transform: translateY(100%); }

.intro-blitz {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  .intro-laeuft { overflow: visible; }
}

/* ---------- Parallax am Hero-Foto ---------- */
.hero img {
  transform-origin: 30% 40%; /* zoomt Richtung Gesicht */
  will-change: transform;
}

/* ---------- Langsamer Zoom am Hero-Foto ---------- */
/* Läuft über "scale" – getrennt vom Parallax (das nutzt "transform"), so stören sich die zwei nicht.
   Macht die Grafikkarte nebenbei, kostet praktisch keinen Strom. */
.hero img {
  animation: langsamer-zoom 24s ease-in-out infinite alternate;
}

@keyframes langsamer-zoom {
  from { scale: 1; }
  to   { scale: 1.06; } /* 6 % größer – mehr fällt auf, weniger merkt man nicht */
}

@media (prefers-reduced-motion: reduce) {
  .hero img { animation: none; }
}

/* ---------- Spotify-Playlist im About ---------- */
/* etwas größer als die kleinen Links beim Booking, damit man sie sieht */
.playlist-zeile {
  margin-top: 2.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1rem;
}

.playlist {
  position: relative;
  color: var(--weiss);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.95rem;
  font-weight: 500;
}

.playlist-zeile span {
  color: #5f5c57;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.7rem;
  font-weight: 500;
}

/* gleicher roter Kuli-Strich wie beim Booking */
.playlist svg {
  position: absolute;
  left: -3%;
  top: 50%;
  width: 106%;
  height: 1em;
  transform: translateY(-50%);
  overflow: visible;
  pointer-events: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.35s ease-out;
}

.playlist path {
  fill: none;
  stroke: var(--akzent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.playlist:hover svg,
.playlist:focus-visible svg {
  clip-path: inset(-50% -10% -50% 0);
}