/* Einfache Seiten: Startseite, Impressum, Datenschutz */

.seite {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--abstand-4) var(--abstand-3);
}
.seite-kopf {
  border-bottom: var(--linie-dick) solid var(--blau);
  padding-bottom: var(--abstand-2);
  margin-bottom: var(--abstand-4);
}
.seite-kopf h1 { font-size: var(--gr-titel); }
.startseite .seite-kopf { margin-bottom: var(--abstand-4); }
.startseite .seite-kopf h1 { font-size: min(var(--gr-anzeige), 5rem); line-height: 0.95; }
.seite-kopf p { margin: var(--abstand-1) 0 0; color: var(--text-leise); font-size: var(--gr-gross); }
.seite h2 { font-size: var(--gr-gross); margin: var(--abstand-4) 0 var(--abstand-2); }

/* Startseite: jede App als Glas-Kachel in ihrer Leitfarbe (data-leitfarbe), Symbol oben links wie das App-Icon,
   darunter Name und ein Satz. Dieselbe Form wie die Kacheln in den Apps (shared/bausteine.css). */
.apps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--abstand-3);
}
@media (min-width: 700px) {
  .apps { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
}
.app-kachel {
  --akzent: var(--leitfarbe);
  --auf-akzent: var(--auf-leitfarbe);
  display: flex;
  flex-direction: column;
  min-height: 100%;
  aspect-ratio: 1;
  padding: var(--abstand-3);
  border-radius: 22%;
  text-decoration: none;
  container-type: inline-size;
}
.app-symbol {
  width: auto;
  height: 30cqi;
  align-self: flex-start;
  margin-bottom: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.22));
}
/* Auch für die animierten Motive aus den Apps (.ikon), die start.js einsetzt: gleiche Größe wie das feste Symbol. */
.app-kachel .app-symbol { width: auto; height: 30cqi; aspect-ratio: auto; stroke-width: 3.8; }
.app-kachel .app-symbol-fein { stroke-width: 5; }
.app-symbol circle { fill: var(--akzent); }
.app-kachel strong {
  display: block;
  margin-top: var(--abstand-2);
  font-family: var(--schrift-titel);
  /* Wächst mit der Kachel, nicht mit dem Bildschirm. */
  font-size: clamp(var(--gr-gross), 17cqi, var(--gr-titel));
  line-height: 1;
}
.app-kachel span { margin-top: var(--abstand-1); font-size: var(--gr-klein); line-height: 1.3; }
@media (hover: hover) {
  .app-kachel:hover { outline: 3px solid var(--akzent); outline-offset: 3px; }
}

/* Kacheln reagieren: geben beim Antippen nach, am Rechner neigen sie sich zum Zeiger (--kipp-* aus start.js). */
.app-kachel {
  transform: perspective(40rem) rotateX(var(--kipp-x, 0deg)) rotateY(var(--kipp-y, 0deg)) scale(var(--druck, 1));
  transition: transform 260ms cubic-bezier(0.3, 1.4, 0.5, 1);
}
.app-kachel:active { --druck: 0.95; transition-duration: 90ms; }
/* Gameplan hat keine eigenen Motive: der Haken zieht sich neu. */
@keyframes haken-ziehen { from { stroke-dashoffset: 1; } }
.haken { stroke-dasharray: 1; }
.spielt .haken { animation: haken-ziehen 700ms ease-out; }

/* ---------- Startseite: großer Titel, kleiner Kopf, Bühne ---------- */
/* Der große Titel schrumpft beim Scrollen (--eingeklappt 0 bis 1 aus start.js). */
.start-titel h1 {
  transform-origin: 0 100%;
  transform: scale(calc(1 - var(--eingeklappt, 0) * 0.25));
  opacity: calc(1 - var(--eingeklappt, 0) * 0.7);
}
/* Logo „Linie“: Die Hallenlinie zieht sich als großes L (erst senkrecht, dann waagerecht),
   die Marke steigt aus ihr auf, danach kommt der Slogan Wort für Wort. Alles einmal beim Öffnen.
   Das L ersetzt auf der Startseite die Linie unter dem Kopf. */
.startseite .start-titel { border-bottom: 0; padding-bottom: 0; }
.logo-linie { position: relative; display: inline-block; padding: 0 0.12em 0.14em 0.3em; }
.logo-linie::before, .logo-linie::after { content: ""; position: absolute; left: 0; background: var(--blau); border-radius: 999px; }
.logo-linie::before { top: 0.06em; bottom: 0; width: var(--linie-dick); transform-origin: 50% 0; }
.logo-linie::after { bottom: 0; right: 0; height: var(--linie-dick); transform-origin: 0 50%; }
.logo-wort { display: block; letter-spacing: -0.015em; }
.logo-wort b, .start-kopf-titel b { color: var(--blau); }
@keyframes linie-senkrecht { from { transform: scaleY(0); } }
@keyframes linie-waagerecht { from { transform: scaleX(0); } }
@keyframes marke-steigt { from { clip-path: inset(100% 0 0 0); transform: translateY(0.25em); } }
.logo-linie::before { animation: linie-senkrecht 380ms cubic-bezier(0.6, 0, 0.4, 1) backwards; }
.logo-linie::after { animation: linie-waagerecht 520ms cubic-bezier(0.4, 0, 0.2, 1) 330ms backwards; }
.logo-wort { animation: marke-steigt 600ms cubic-bezier(0.2, 0.8, 0.3, 1) 450ms backwards; }
.start-titel .slogan { margin-top: var(--abstand-2); }
/* Slogan im Takt (Kinetic Typography): jedes Wort steht mit hartem Schnitt da und rückt kurz nach, ein Wort pro Schlag,
   zwischen den Sätzen ein Schlag Pause. Kein Ausblenden, keine Farbfläche. */
@keyframes wort-schlag { 0% { opacity: 0; transform: scale(1.3); } 0.1% { opacity: 1; } 100% { transform: none; } }
.start-titel .slogan span { display: inline-block; transform-origin: 50% 70%; animation: wort-schlag 240ms cubic-bezier(0.2, 0.9, 0.3, 1) backwards; animation-delay: calc(950ms + var(--i) * 170ms); }

/* Kleiner Kopf als Glas-Kapsel wie in den Apps; erscheint, wenn der Titel weggescrollt ist (start.js). */
.start-kopf {
  position: fixed;
  top: max(0px, env(safe-area-inset-top));
  left: 0;
  right: 0;
  z-index: 10;
  max-width: 44rem;
  margin-inline: auto;
  justify-content: center;
  padding-inline: var(--abstand-3);
  opacity: 0;
  transform: translateY(-140%);
  transition: transform 320ms cubic-bezier(0.3, 1.3, 0.5, 1), opacity 200ms;
  pointer-events: none;
}
.titel-im-kopf .start-kopf { opacity: 1; transform: none; }
.start-kopf-titel { font-family: var(--schrift-titel); font-weight: 700; font-size: var(--gr-gross); }

/* Bühne: Eisfläche aus Linien mit gleitendem Puck, in der Mitte das Motiv der App, die sich gerade vorstellt. */
.start-buehne {
  position: relative;
  aspect-ratio: 5 / 2;
  /* Am Rechner nicht höher als ein Drittel des Bildschirms, damit die Kacheln sichtbar bleiben. */
  width: min(100%, 80vh);
  margin: 0 auto var(--abstand-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hallenlinien {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--linie);
  stroke-opacity: 0.28;
  stroke-width: 1.5;
}
/* Eisfläche (Eishockey nur hier). Drei Stile zur Wahl über data-stil an der Bühne:
   linie  – „Linienriss“: feine Linien wie ein Plan, kein Eis als Fläche, sehr ruhig
   tv     – „Übertragung“: Eis als Fläche, geneigt wie aus der Kamera über dem Stadion
   taktik – „Taktiktafel“: kräftige Strichführung, der nächste Weg des Pucks ist vorgezeichnet
   Gemeinsam: rote Mittel- und Torlinien, blaue Linien, Torraum, Tore; ein ruhiger Puck mit Schatten. */
@keyframes eis-rein { from { fill-opacity: 0; } }
.eisflaeche .rot { stroke: var(--rot); stroke-opacity: 0.55; stroke-width: 1; }
.eisflaeche .blau { stroke: var(--blau); stroke-opacity: 0.55; stroke-width: 1.6; }
.eisflaeche circle.blau { stroke-width: 1; }
.eisflaeche .torraum { fill: var(--blau); fill-opacity: 0.12; }
.eisflaeche .punkte { fill: var(--rot); fill-opacity: 0.5; stroke: none; }
.eisflaeche .bande { stroke-width: 1.4; stroke-opacity: 0.55; }
.eisflaeche .tor { stroke: var(--linie); stroke-opacity: 0.6; stroke-width: 1; stroke-linejoin: round; transition: stroke-width 200ms, stroke-opacity 200ms; }
.eisflaeche .tor.treffer { stroke: var(--rot); stroke-opacity: 1; stroke-width: 1.8; }
/* Puck: matte schwarze Scheibe mit feiner Kante, weicher Schatten; erscheint, wenn die Fläche steht. */
.eisflaeche .beiwerk { stroke-opacity: 1; }
.eisflaeche .puck { opacity: 0; transition: opacity 500ms; }
.eisflaeche.puck-da .puck { opacity: 1; }
.eisflaeche .puck-koerper { fill: var(--puck); stroke: var(--text-leise); stroke-width: 0.6; }
.eisflaeche .puck-kante { fill: none; stroke: var(--text-leise); stroke-width: 0.35; stroke-opacity: 0.7; }
.eisflaeche .puck-schatten { fill: var(--schatten); stroke: none; }
/* Spur: eine feine, kurze Linie hinter dem Puck, die von selbst verschwindet. */
.eisflaeche .puck-spur { fill: none; stroke: var(--linie); stroke-opacity: 0.18; stroke-width: 0.8; stroke-linecap: round; stroke-linejoin: round; }
.eisflaeche .puck-route { display: none; }

/* A · Linienriss */
.start-buehne[data-stil="linie"] .bande { fill: none; }
.start-buehne[data-stil="linie"] .eisflaeche { stroke-width: 1; }

/* B · Übertragung: Eis als Fläche, leicht geneigt; das Motiv schwebt darüber wie der Videowürfel im Stadion. */
.start-buehne[data-stil="tv"] { perspective: 900px; }
.start-buehne[data-stil="tv"] .eisflaeche { transform: rotateX(38deg) scale(0.96); transform-origin: 50% 62%; }
.start-buehne[data-stil="tv"] .bande { fill: var(--eis); stroke-width: 2; stroke-opacity: 0.7; }
.start-buehne[data-stil="tv"] .rot, .start-buehne[data-stil="tv"] .blau { stroke-opacity: 0.75; }
.start-buehne[data-stil="tv"] .puck-spur { stroke-opacity: 0.12; }

/* C · Taktiktafel: Linien wie mit dem Stift, der nächste Weg gestrichelt mit Pfeil */
.start-buehne[data-stil="taktik"] .eisflaeche { stroke-linecap: round; }
.start-buehne[data-stil="taktik"] .bande { stroke: var(--text); stroke-opacity: 0.75; stroke-width: 1.8; fill: none; }
.start-buehne[data-stil="taktik"] .rot, .start-buehne[data-stil="taktik"] .blau { stroke-opacity: 0.45; }
.start-buehne[data-stil="taktik"] .puck-route { display: block; fill: none; stroke: var(--text); stroke-width: 1.1; stroke-dasharray: 3 2.6; stroke-linecap: round; opacity: 0; transition: opacity 600ms; }
.start-buehne[data-stil="taktik"] .puck-route.sichtbar { opacity: 0.55; }
.eisflaeche .pfeil-spitze { fill: var(--text); stroke: none; }
.start-buehne[data-stil="taktik"] .puck-spur { stroke-opacity: 0; }

/* Die Linien ziehen sich einmal beim Öffnen, nacheinander von außen nach innen. */
/* Strich etwas länger als der Weg, sonst bleibt an der Nahtstelle eine Lücke. */
@keyframes linie-ziehen { from { stroke-dashoffset: 1.02; } }
@keyframes punkte-rein { from { opacity: 0; } }
.hallenlinien > :not(defs, .punkte, .beiwerk) { stroke-dasharray: 1.02 1; animation: linie-ziehen 900ms cubic-bezier(0.4, 0, 0.2, 1) backwards; }
.hallenlinien > :nth-child(3) { animation-delay: 250ms; }
.hallenlinien > :nth-child(4) { animation-delay: 400ms; }
.hallenlinien > :nth-child(n+5) { animation-delay: 550ms; }
.hallenlinien > .punkte { animation: punkte-rein 300ms 1200ms backwards; }
/* Die Bande zieht sich wie die Linien, dabei erscheint (bei „tv“) das Eis. */
.hallenlinien.eisflaeche > .bande { animation: linie-ziehen 900ms cubic-bezier(0.4, 0, 0.2, 1) backwards, eis-rein 900ms ease-out backwards; }

.buehne-motiv {
  --akzent: var(--leitfarbe);
  --auf-akzent: var(--auf-leitfarbe);
  position: absolute;
  left: 50%;
  top: 50%;
  height: 50%;
  aspect-ratio: 1;
  padding: 2.5%;
  border-radius: 24%;
  display: grid;
  place-items: center;
  translate: -50% -50%;
}
.buehne-motiv .buehne-symbol { width: 72%; height: 72%; aspect-ratio: auto; overflow: visible; }
.buehne-symbol:not(.ikon) { fill: none; stroke: currentColor; stroke-width: 3.8; stroke-linecap: round; stroke-linejoin: round; }
.buehne-symbol:not(.ikon).app-symbol-fein { stroke-width: 5; }
.buehne-symbol:not(.ikon) circle { fill: var(--akzent); }
/* Auftritt: kurz anfedern, damit der Wechsel zu sehen ist. */
@keyframes auftritt { from { opacity: 0; scale: 0.7; } 60% { scale: 1.06; } }
.buehne-motiv.tritt-auf { animation: auftritt 420ms cubic-bezier(0.3, 1.2, 0.5, 1); }
.buehne-text {
  min-height: 2.6em;
  margin: 0 0 var(--abstand-4);
  text-align: center;
  color: var(--text-leise);
}
.buehne-text strong { color: var(--text); font-family: var(--schrift-titel); font-size: var(--gr-gross); margin-right: 0.25em; }

/* ---------- Startseite breit und quer (iPad quer, Rechner) ----------
   Titel über die volle Breite, links die Bühne groß, rechts die Apps als breite Zeilen.
   Alles ohne Scrollen sichtbar; der Satz unter der Bühne entfällt, er steht in den Zeilen. */
@media (min-width: 1000px) and (orientation: landscape) {
  .seite.startseite {
    max-width: 76rem;
    padding-inline: var(--abstand-5);
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(20rem, 1fr);
    grid-template-areas: "titel titel" "buehne apps";
    column-gap: var(--abstand-5);
    align-items: start;
  }
  .startseite .start-titel { grid-area: titel; }
  .start-buehne { grid-area: buehne; align-self: center; width: 100%; margin: 0; }
  .startseite .apps { grid-area: apps; }
}

/* Breit und quer sowie Handy hochkant: Apps als Zeilen untereinander, damit alle ohne Scrollen sichtbar sind
   (am Handy lägen Kacheln der zweiten Reihe sonst unter der Safari-Leiste). */
@media (min-width: 1000px) and (orientation: landscape), (max-width: 699px) and (orientation: portrait) {
  .buehne-text { display: none; }
  /* Alle Zeilen gleich hoch, auch wenn ein Satz eine Zeile mehr braucht. */
  .startseite .apps { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: var(--abstand-3); }

  /* Kachel als Zeile: Symbol links, Name und Satz daneben. */
  .app-kachel {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "symbol name" "symbol satz";
    align-content: center;
    column-gap: var(--abstand-3);
    padding: var(--abstand-3) var(--abstand-4);
    border-radius: var(--rund-gross);
    font-size: var(--gr-titel);
  }
  .app-kachel .app-symbol { grid-area: symbol; align-self: center; height: 3.5rem; margin: 0; }
  .app-kachel strong { grid-area: name; margin-top: 0; }
  .app-kachel span { grid-area: satz; }
}
/* Handy hochkant: Zeilen knapper, Titel kleiner, Bühne mit weniger Abstand. */
@media (max-width: 699px) and (orientation: portrait) {
  .seite-kopf p { font-size: var(--gr-text); }
  .startseite .seite-kopf { margin-bottom: var(--abstand-3); }
  .start-buehne { margin-bottom: var(--abstand-3); }
  .app-kachel { padding: var(--abstand-2) var(--abstand-3); font-size: var(--gr-gross); }
  .app-kachel .app-symbol { height: 2.75rem; }
  .app-kachel span { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .app-kachel, .start-kopf { transition: none; }
  .start-titel h1 { transform: none; opacity: 1; }
  .hallenlinien > *, .buehne-motiv.tritt-auf, .spielt .haken,
  .logo-linie::before, .logo-linie::after, .logo-wort, .start-titel .slogan span { animation: none; }
  .eisflaeche .puck, .eisflaeche .puck-route { transition: none; }
  .hallenlinien.eisflaeche > .bande { animation: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .app-symbol { filter: none; }
}

.platzhalter { background: var(--gelb); color: var(--auf-gelb); padding: 0 var(--abstand-1); }