/* ============================================================================
   Fusszeile, gemeinsame Darstellung fuer index.html und dashboard.html.

   Die Regeln standen bisher inline in index.html. Sie sind hierher gezogen,
   weil die Fusszeile jetzt auf beiden Seiten laeuft; zwei Kopien desselben
   Rasters waeren zwei Stellen zum Vergessen.

   Zwei Umgebungen, ein Bauteil:
     index.html,       steht am Ende des Dokuments, volle Breite, Inhalt in
                       einer zentrierten .wrap-Spalte (dort global definiert).
     dashboard.html,   steht unterhalb des .dash-Rasters, also NEBEN der
                       Seitenleiste, nicht darunter. Damit die Fusszeile mit
                       der Inhaltsspalte fluchtet und nicht mit der Leiste
                       kollidiert, bekommt sie denselben linken Versatz wie
                       das Raster. Die Seitenleiste klebt (position:sticky)
                       innerhalb von .dash und ist hier unten schon
                       weggescrollt, der Versatz ist reine Ausrichtung.
   ========================================================================= */

.yr-foot {
  padding: 56px 0 40px;
  border-top: 1px solid var(--rule);
}
.yr-foot .foot-content {
  display: grid;
  /* Vier Spalten: die Marke links, danach die drei Linkgruppen. Die erste ist
     breiter, weil Zeichen und Schriftzug nebeneinander stehen und der Block
     sonst umbricht. */
  grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-bottom: 40px;

  /* Mittig, nicht linksbuendig. Die Spalten waren so breit wie ihr Drittel,
     der Text klebte links, und rechts davon stand jeweils viel Nichts - auf
     1100 px sah die Fusszeile dadurch aus, als waere sie an den linken Rand
     gerutscht. justify-items schrumpft jede Spalte auf ihren Inhalt und
     zentriert sie in ihrem Anteil; text-align zentriert dann noch die Zeilen
     darin. Damit liegen die Linkgruppen auf derselben Achse wie die
     Copyright-Zeile darunter, die schon immer mittig stand.
     Die Marke nimmt das gleich wieder zurueck, sie gehoert an den Rand. */
  justify-items: center;
  align-items: start;
}
@media (max-width: 980px) {
  .yr-foot .foot-content { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Ueber die volle Breite und mittig, sonst haengt die Marke allein in einer
     Spalte und die drei Gruppen rutschen unter sie. */
  .yr-foot .foot-brand {
    grid-column: 1 / -1;
    justify-self: center;
    align-items: center;
    text-align: center;
    margin-bottom: 4px;
  }
}
@media (max-width: 780px) {
  .yr-foot .foot-content { grid-template-columns: 1fr 1fr; }
}

/* ---- Marke und Profile, unten links ------------------------------------- */
.yr-foot .foot-brand {
  justify-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  text-align: left;
}
.yr-foot .foot-marke {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.yr-foot .foot-marke img { display: block; width: 44px; height: 44px; }
.yr-foot .foot-marke-akzent { color: var(--accent); }

.yr-foot .foot-sozial {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 10px;
}
.yr-foot .foot-sozial a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-2);
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.yr-foot .foot-sozial a:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent) 8%, transparent);
}
/* Einzige Stelle, an der die Groesse des Zeichens steht. Im Markup traegt das
   SVG bewusst keine Masse. */
.yr-foot .foot-sozial svg { display: block; width: 24px; height: 24px; }
.yr-foot .foot-col { text-align: center; }
.yr-foot .foot-col h4 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 14px;
}
.yr-foot .foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.yr-foot .foot-col a { color: var(--ink-2); font-size: 14px; text-decoration: none; }
.yr-foot .foot-col a:hover { color: var(--ink); }
.yr-foot .foot-bottom {
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  text-align: center;
  color: var(--ink-3);
  font-size: 14px;
}

/* ---- Pflichtangaben in der Seitenleiste (nur Dashboard) -------------------
   Das Dashboard hat keine Fusszeile mehr. Die Links, die nach § 5 DDG und
   § 312k BGB von jeder Seite erreichbar sein muessen, sitzen unten in der
   Leiste, ueber dem Einklapp-Knopf.

   Bewusst leise: kleiner Satz, gedaempfte Farbe, keine Aufzaehlungspunkte. Sie
   sollen auffindbar sein, nicht um Aufmerksamkeit mit der Navigation
   konkurrieren. Die Trennlinie oben grenzt sie von den Menuepunkten ab, damit
   niemand „Impressum" fuer einen Lernbereich haelt. */
.side-recht {
  display: flex;
  flex-direction: column;
  align-items: center;      /* mittig, sonst klebt der Block an der linken Kante
                               und fluchtet mit nichts: die Menuepunkte beginnen
                               erst hinter ihrem Symbol, rund 60 px weiter. */
  gap: 5px;
  padding: 14px 6px 0;      /* etwas Luft an den Seiten: ohne sie stiess die
                               Zeile „Impressum · Datenschutz · AGB" auf beiden
                               Seiten an die Kante der Leiste. */
  border-top: 1px solid var(--rule);
  text-align: center;

  /* GEGEN DAS SPRINGEN, drei Massnahmen, die zusammengehoeren:

     1. nowrap + overflow:hidden. Die Leiste animiert ihre Breite ueber 250 ms.
        Auf halbem Weg ist sie rund 150 px breit, dort brach „Impressum ·
        Datenschutz · AGB" in mehrere Zeilen um, der Block wuchs von 76 auf
        143 px und schrumpfte gleich wieder. Umbruch verboten heisst: die Hoehe
        kann sich waehrend der Bewegung gar nicht aendern, der Text wird
        stattdessen kurz beschnitten.
     2. Die Hoehe bleibt auch im eingeklappten Zustand reserviert (siehe unten
        visibility statt display:none), damit der Einklapp-Pfeil darunter in
        beiden Zustaenden auf derselben Zeile sitzt.
     3. Das Einblenden startet leicht verzoegert, damit die Zeile nicht schon
        sichtbar wird, waehrend sie noch beschnitten ist. */
  white-space: nowrap;
  overflow: hidden;
  transition: opacity .18s ease .09s;
}
.side.is-collapsed .side-recht {
  opacity: 0;
  visibility: hidden;       /* nicht display:none, das wuerde die Hoehe
                               freigeben und den Pfeil darunter hochziehen.
                               visibility nimmt die Links zugleich aus der
                               Tab-Reihenfolge und aus dem Vorlesebaum. */
  pointer-events: none;
  transition: opacity .12s ease 0s, visibility 0s linear .12s;
}
.side-recht-zeile {
  display: flex;
  /* nowrap, nicht wrap. `white-space` allein reicht hier nicht: es steuert den
     Umbruch INNERHALB eines Textknotens, nicht den Umbruch von Flex-Elementen.
     Mit `wrap` rutschten „Datenschutz" und „AGB" waehrend der Breitenanimation
     in eigene Zeilen und der Block wuchs von 76 auf 130 px. */
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 7px;
}
.side-recht-zeile > span {          /* der Trennpunkt */
  color: color-mix(in oklch, var(--ink-3) 55%, transparent);
  font-size: 11px;
  user-select: none;
}
.side-recht a {
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-3);
  text-decoration: none;
  transition: color .15s ease;
}
.side-recht a:hover { color: var(--accent); }
.side-recht a.side-recht-kuendigen {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  margin-top: 1px;
}
.side-recht a.side-recht-kuendigen:hover { color: var(--accent); }
.side-recht-copy {
  margin-top: 3px;
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--ink-3);
  opacity: .7;
}