/* Kontaktseite der Startseite (siehe kontakt.php).
   Ablauf: Ein Tipp auf den roten Kreis "hallo" lässt die Kontaktseite von oben
   hereinfahren. Der Kreis rutscht dabei um genau denselben Weg nach unten, als
   hinge er an einer unsichtbaren Schnur an ihrer Unterkante und zöge sie herunter
   wie eine Jalousie. An der Unterkante klebt ein schwarzer Kreis mit X, der sie
   wieder schließt. Beide Bewegungen nutzen dieselbe Dauer und Kurve, deshalb
   bleibt der Abstand zwischen Kante und Kreis immer gleich. */

:root {
  --rot: #ff404a;                          /* roter Kreis */
  --kreis: clamp(60px, 7.5vw, 115px);       /* Durchmesser beider Kreise (vorher doppelt so groß) */
  --kreis-hoehe: 72%;                       /* Mittelpunkt des roten Kreises, Anteil der Bildhöhe */
  --kontakt-hoehe: 50vh;                    /* Mindesthöhe der Kontaktseite */
  --kontakt-dauer: .8s;
  --kontakt-kurve: cubic-bezier(.22, .8, .24, 1);   /* schnell los, sanft auslaufen */
  /* Weg der Unterkante beim Öffnen. kontakt.js misst die tatsächliche Höhe
     und überschreibt den Wert; dies ist nur der Startwert. */
  --kontakt-zug: calc(var(--kontakt-hoehe) + var(--kreis) / 2);
}

/* ---------- roter Kreis "hallo" ---------- */

/* Waagerecht mittig. Zentriert über left/right/margin, weil nebel.js "transform"
   setzt (Auflösen); das Herunterziehen läuft über "translate". */
.buehne-hallo {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: calc(var(--kreis-hoehe) - var(--kreis) / 2);
  width: var(--kreis);
  height: var(--kreis);
  margin: 0 auto;
  border-radius: 50%;
  background: var(--rot);
  color: var(--tinte);
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: italic;
  font-weight: 900;
  font-size: calc(var(--kreis) * .26);
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
  translate: 0 0;
  transition: translate var(--kontakt-dauer) var(--kontakt-kurve);
}
.buehne-hallo:hover { text-decoration: none; }
.buehne-hallo span { margin-top: -.06em; }   /* optisch mittig ("hallo" hat keine Unterlänge) */

/* ---------- Kontaktseite ---------- */

.kontakt {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  min-height: var(--kontakt-hoehe);
  background: var(--nebel);
  color: var(--tinte);
  /* geschlossen: ganz über dem Fenster, samt dem halben Kreis unter der Kante */
  transform: translateY(calc(-100% - var(--kreis) / 2 - 2px));
  visibility: hidden;
  transition: transform var(--kontakt-dauer) var(--kontakt-kurve),
              visibility 0s linear var(--kontakt-dauer);
  outline: none;
}
.kontakt-inhalt {
  padding: calc(var(--rand) * 3) var(--rand) calc(var(--kreis) / 2 + var(--rand) * 2);
  max-width: 64rem;
}
.kontakt-titel {
  font-size: var(--gross);
  font-weight: var(--gross-gewicht);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 .9em;
}
/* Einträge ohne Bezeichnung, als Blöcke untereinander */
.kontakt-liste p { margin: 0; }
.kontakt-liste p + p { margin-top: 1em; }
.kontakt-liste a { border-bottom: 1px solid currentColor; }
.kontakt-liste a:hover { text-decoration: none; }

/* schwarzer Kreis mit X, klebt mittig an der Unterkante */
.kontakt-zu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--kreis) / -2);
  width: var(--kreis);
  height: var(--kreis);
  margin: 0 auto;
  border-radius: 50%;
  background: var(--tinte);
}
.kontakt-zu::before,
.kontakt-zu::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--kreis) * .3);
  height: max(2px, calc(var(--kreis) * .045));
  background: var(--hell);
  translate: -50% -50%;
  rotate: 45deg;
}
.kontakt-zu::after { rotate: -45deg; }

/* Fläche hinter der Kontaktseite: Klick daneben schließt sie */
.kontakt-schleier {
  position: fixed;
  inset: 0;
  z-index: 9;
  display: none;
}

/* ---------- geöffnet ----------
   .kontakt-auf setzt kontakt.js an <html>. Ohne JavaScript öffnet #kontakt (:target). */
.kontakt-auf .kontakt,
.kontakt:target {
  transform: none;
  visibility: visible;
  transition: transform var(--kontakt-dauer) var(--kontakt-kurve), visibility 0s;
}
.kontakt-auf .buehne-hallo,
html:has(.kontakt:target) .buehne-hallo {
  translate: 0 var(--kontakt-zug);
}
.kontakt-auf .kontakt-schleier { display: block; }

@media (prefers-reduced-motion: reduce) {
  .buehne-hallo,
  .kontakt,
  .kontakt-auf .kontakt { transition: none; }
}