/* CityFever Startseite und Impressum
   Farben stammen aus dem Briefkopf: Rot #E63A2E, Flaechen-Gelb #FECC00,
   Kugel- und Logo-Gelb #FFED00. */

*{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  background:#FEFEFE;
  color:#201D19;
  font-family:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height:1.55;
}

/* ---------- Startseite ---------- */

.buehne{
  position:relative;
  overflow:hidden;
  background:#FEFEFE;
  height:100dvh;
  min-height:420px;
}

/* Eine durchgehende Flaeche: das Weiss ist aus dem Rot ausgestanzt, nicht
   darueber gemalt -- so kann nichts die Punkte darunter verdecken. */
.grund{ position:absolute; inset:0; z-index:1; }
.grund svg{ display:block; width:100%; height:100%; }

/* Die Kugeln liegen ausserhalb des (ungleichmaessig gedehnten) SVG, damit sie
   bei jeder Fensterbreite rund bleiben. */
.kugel{
  position:absolute; z-index:1;
  border-radius:50%;
  background:#FFED00;
  transition:transform .35s ease;
}

/* Die Punkte liegen UEBER der Grafik und bleiben damit ueberall sichtbar. */
.buehne canvas{
  position:absolute; inset:0; z-index:2;
  display:block; width:100%; height:100%;
}

.logo-feld{
  position:absolute;
  top:3.5%; right:2.6%;
  z-index:3;
  width:clamp(180px, 30%, 360px);
}
.logo-feld svg{ width:100%; height:auto; display:block; }
/* Der Klick aufs Logo fuehrt ins Portal. Der Verweis wird erst per
   JavaScript gesetzt, damit er nicht im Quelltext steht. */
.logo-feld.klickbar{ cursor:pointer; }
.logo-feld:focus-visible{ outline:3px solid #FFED00; outline-offset:4px; }

/* Sitzt auf der gelben Flaeche unten rechts, braucht deshalb dunkle Schrift. */
.impressum-verweis{
  position:absolute;
  bottom:1.9%; right:1.5%;
  z-index:3;
  font-size:clamp(10px, 1.1vw, 13px);
  color:#6B2419;
  text-decoration:none;
}
.impressum-verweis:hover{ color:#2A0E08; }
.impressum-verweis:focus-visible{ outline:2px solid #6B2419; outline-offset:2px; border-radius:2px; }

@media (prefers-reduced-motion: reduce){
  .buehne canvas{ display:none; }
  .kugel{ transition:none; }
}

/* ---------- Impressum ---------- */

/* Derselbe Rahmen wie auf der Startseite, ans Fenster geheftet.
   Warum nicht in den Textfluss gelegt: Ein Rahmen, der auf die Dokumenthoehe
   mitwaechst, muss ueber mehrere tausend Pixel gedehnt werden -- aus dem
   Bogen der gelben Flanke wird dann zwangslaeufig eine gerade Kante. Am
   Fenster festgemacht behaelt er immer die Proportionen der Startseite.
   Das Weiss ist aus dem Rot ausgestanzt (evenodd), der Text scheint also
   durch die Mitte hindurch und verschwindet oben und unten hinter den
   farbigen Flaechen. pointer-events:none, damit Verweise anklickbar bleiben. */
.rahmen{
  position:fixed;
  inset:0;
  z-index:3;
  pointer-events:none;
}
.rahmen svg{ display:block; width:100%; height:100%; }

.blatt .logo-feld,
body > .logo-feld{
  position:fixed;
  top:3.5%; right:2.6%;
  z-index:4;
  width:clamp(150px, 30%, 360px);
}

/* Oben und unten so viel Luft, dass die erste und die letzte Zeile beim
   Laden frei stehen. Die Breite haelt Abstand zur gelben Flanke (ab 91 %). */
.blatt{
  position:relative;
  z-index:1;
  width:min(70ch, 72vw);
  margin:0 auto;
  padding:max(22vh, 140px) 0 max(20vh, 120px);
}

.blatt h1{
  font-size:clamp(22px, 3.4vw, 30px);
  margin:0 0 28px;
  letter-spacing:-.01em;
}
.blatt h2{
  font-size:clamp(17px, 2.2vw, 21px);
  margin:38px 0 12px;
  padding-top:22px;
  border-top:1px solid #E8E2D6;
}
.blatt h3{
  font-size:16px;
  margin:24px 0 6px;
}
.blatt p{ margin:0 0 14px; }
.blatt ul{ margin:0 0 14px; padding-left:22px; }
.blatt li{ margin-bottom:6px; }

.anschrift{
  margin:0 0 14px;
  line-height:1.7;
}

.zurueck{
  display:inline-block;
  margin-top:36px;
  color:#B3261B;
  text-decoration:none;
  border-bottom:1px solid #E8B5AE;
  padding-bottom:1px;
}
.zurueck:hover{ color:#6B2419; border-bottom-color:#6B2419; }

.stand{
  margin-top:40px;
  font-size:13px;
  color:#6B655C;
}