/* visper fasnacht — impressum, datenschutz, 404 und die weiterleitungen.
   baut auf site.css auf (tokens, .seitenkopf, .abschnitt, .fliesstext, .karte,
   .hinweis, .knopf, löwe, trompete) und bringt nur mit, was es dort nicht gibt. */

/* ————— impressum: die angaben als karten ————— */

.angaben {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .angaben { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .angaben { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}

.angabe { display: grid; gap: .55rem; align-content: start; }
.angabe__titel { margin-bottom: .2rem; }
/* name in bitter: ab 18.66 px fett gilt das markenrot als grossschrift (aa) */
.angabe__name {
  font-family: var(--schrift-titel);
  font-size: clamp(1.3rem, 1.1rem + .6vw, 1.55rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--rot);
}
.angabe__text { line-height: 1.5; }
.angabe__text + .angabe__text { margin-top: .35rem; }
.angabe__liste { margin: 0; padding: 0; list-style: none; }
/* links mit genug trefferfläche (≥ 24 px) und umbruch bei langen adressen */
.angabe .linie { display: inline-block; padding-block: 3px; }
.angabe__plattform {
  margin-top: .5rem;
  padding-top: .9rem;
  border-top: 1px solid var(--rosa-kraeftig);
  font-size: var(--text-klein);
}

.angaben + .recht { margin-top: clamp(48px, 2rem + 3vw, 88px); }

/* ————— rechtstexte (impressum, datenschutz) ————— */

/* .fliesstext begrenzt die zeilenlänge; hier nur die abstände zwischen den
   abschnitten und die listen, die site.js aus data-format baut */
.recht > * + * { margin-top: clamp(2.25rem, 1.75rem + 1.5vw, 3.25rem); }
.recht section > h2 { margin-top: 0; margin-bottom: .55em; }
.recht [data-multiline="p"] > p + p { margin-top: 1em; }
/* .fliesstext rückt ul/ol ein, die rauten der .punkte brauchen das nicht */
.fliesstext .punkte { padding-left: 0; }
.recht .text-formatiert a { color: var(--rot-text); font-weight: 700; }
.recht .text-formatiert a:hover { color: var(--weinrot); }

/* «das wichtigste in kürze» — ruhiger kasten vor dem ersten abschnitt */
.recht__kurz { padding: clamp(18px, 1rem + .8vw, 26px) clamp(18px, 1rem + 1vw, 30px); }
.recht .recht__kurz > h2 { font-size: 1.25rem; }

.recht__stand {
  padding-top: 1.25rem;
  border-top: 1px solid var(--rosa-kraeftig);
  font-size: var(--text-klein);
}

/* ————— datenschutz: inhaltsverzeichnis ————— */

/* mobil: rosa kasten über dem text. ab 1000 px: spalte links, läuft mit */
.recht-raster { display: grid; gap: clamp(28px, 1rem + 3vw, 64px); align-items: start; }
@media (min-width: 1000px) {
  .recht-raster { grid-template-columns: 15rem minmax(0, 1fr); }
}

.inhalt {
  padding: 18px 20px 14px;
  border-radius: var(--radius);
  background: var(--rosa);
}
/* auf rosa ist kleiner roter text etwas dunkler (wie in site.css) */
@media (max-width: 999px) {
  .inhalt { --rot-text: var(--rot-auf-rosa); }
}
@media (min-width: 1000px) {
  .inhalt {
    position: sticky;
    top: calc(var(--kopf-h) + 24px);
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--rot);
    border-radius: 0;
    background: none;
  }
}
.inhalt__titel { margin-bottom: .35rem; }
.inhalt__liste { margin: 0; padding: 0; list-style: none; }
@media (min-width: 560px) and (max-width: 999px) {
  .inhalt__liste { columns: 2; column-gap: 28px; }
}
.inhalt__liste a {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding-block: 4px;
  color: var(--weinrot);
  line-height: 1.3;
  text-decoration: none;
  break-inside: avoid;
  transition: color var(--schnell) ease;
}
.inhalt__liste a:hover { color: var(--rot-text); text-decoration: underline; text-underline-offset: .2em; }

/* ————— 404 ————— */

/* rosa bühne über die ganze breite: «4 [trompete] 4» und daneben der text mit
   dem schwankenden löwen. die trompete bläst, solange sie zu sehen ist (site.js) */
.fehler {
  --rot-text: var(--rot-auf-rosa);
  display: grid;
  align-items: center;
  min-height: calc(100svh - var(--kopf-h));
  padding-block: clamp(32px, 1rem + 5vw, 96px);
  background: var(--rosa);
}
.fehler__rahmen {
  display: grid;
  gap: clamp(24px, 1rem + 3vw, 56px);
  align-items: center;
  grid-template-areas: "buehne" "inhalt";
}
@media (min-width: 900px) {
  .fehler__rahmen {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-areas: "inhalt buehne";
  }
}

.fehler__buehne {
  grid-area: buehne;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .04em;
  font: 700 clamp(6.5rem, 3.2rem + 16vw, 15rem)/1 var(--schrift-titel);
  color: var(--rot);
  user-select: none;
}
/* zweispaltig: die ziffern richten sich nach der halben breite */
@media (min-width: 900px) {
  .fehler__buehne { font-size: clamp(8rem, 1rem + 14vw, 15rem); }
}
.fehler__ziffer { display: block; line-height: .8; letter-spacing: -.02em; }
/* die null: weisse scheibe mit der trompete, so hoch wie eine ziffer */
.fehler__null { width: .74em; flex: none; }

.fehler__inhalt {
  grid-area: inhalt;
  display: grid;
  gap: .9rem;
  justify-items: start;
}
.fehler__loewe { width: clamp(52px, 1.5rem + 4vw, 96px); margin-bottom: .2rem; }
.fehler__inhalt .einleitung { max-width: 32rem; }
.fehler__knoepfe { margin-top: .6rem; }
@media (max-width: 479px) {
  /* schmal: knöpfe untereinander, gleich breit */
  .fehler__knoepfe { flex-direction: column; align-items: stretch; width: 100%; }
}

/* ————— weiterleitungen (/anmeldung/, /old-home/) ————— */

/* der browser leitet sofort weiter — falls nicht, stehen mittig ein titel und ein knopf zum ziel */
.umleitung {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1.4rem;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--rand);
}
.umleitung__titel {
  font-family: var(--schrift-titel);
  font-size: var(--titel-abschnitt);
  line-height: 1.15;
  color: var(--rot);
  text-align: center;
  text-wrap: balance;
}