/* Seitenrahmen — Block 1 der Wunschliste, freigegeben am 2026-09-07.
 *
 * Drei Ergänzungen, die alle am Rahmen um den Inhalt sitzen und deshalb in
 * einer Datei stehen statt in dreien:
 *
 *   1. Social-Icons im Fuß      (verschoben aus dem Kopf, W1)
 *   2. Nach-oben-Pfeil
 *   3. Cookie-Symbol nach links unten
 *
 * Jeder Abschnitt hat in `scripts/build.py` einen eigenen Schalter. Ohne das
 * zugehörige HTML ist der CSS-Abschnitt wirkungslos — der Rückbau ist also
 * immer die eine Zeile auf False, diese Datei muss dafür nicht angefasst
 * werden.
 *
 * GEMESSEN, NICHT GERATEN: Die Werte unten folgen dem, was die Fußliste
 * ohnehin schon tut (Messung 2026-09-07, 1920 px, System-Chrome):
 * Textlinks 16 px, Farbe rgb(60, 60, 59), Padding 10px 15px, Höhe 47 px,
 * Zeilenhöhe daraus 27 px.
 */

/* ========================================================================
   1. SOCIAL-ICONS IM FUSS
   ========================================================================

   Die drei Verweise sind aus dem Kopfmenü in die Fußliste gewandert (Regel
   `social_in_den_fuss` in build.py). Sie stehen dort in derselben <ul> wie
   Kontakt, Impressum, AGB — und erben deren Farbe bereits richtig.

   WAS NICHT STIMMTE, gemessen vor dieser Datei:
     - 12,8 px statt 16 px: als Fußnote gesetzt, nicht als Verweis
     - Höhe 33 px gegen 47 px der Textlinks: die Zeile lief auseinander
     - Instagram brach in eine zweite Zeile um — 15 px Innenabstand links und
       rechts sind für ein Symbol zu viel, die Liste ist 813 px breit und
       genau 14 px zu schmal
     - `margin-right: 0.28em` aus dem Kopfmenü ließ die Abstände ungleich

   18 px und nicht 16: Eine Symbolschrift wirkt bei gleicher Punktzahl
   kleiner als Text. 18 px stellt sie optisch gleich, ohne sie
   herauszuheben. */
footer ul.mod-menu a.fa {
  font-size: 18px;
  /* 27 px ist die gemessene Zeilenhöhe der Textlinks daneben — damit stehen
     Symbol und Text auf derselben Grundlinie. */
  line-height: 27px;
  /* 9 px statt 15: schafft die fehlende Breite. Das Berührungsziel bleibt
     mit 36 × 47 px weit über den 24 × 24 px aus A-27. */
  padding-left: 9px;
  padding-right: 9px;
  margin-right: 0;
  text-align: center;
}

/* Die drei Symbole sind EIN Listenpunkt (`li.hepro-social`, gesetzt von
   `social_in_den_fuss` in build.py) und nicht drei.

   WARUM DAS SO SEIN MUSS — vom Auftraggeber gemeldet, dann über 25 Breiten
   nachgemessen: Als drei getrennte <li> brachen sie EINZELN um. Bei genau
   1200 px — dem Punkt, an dem Bootstrap die Fußspalte von col-md-7 auf
   col-lg-8 stellt — blieb Facebook oben, YouTube und Instagram rutschten in
   die zweite Zeile. Auf allen anderen 24 gemessenen Breiten passte es.

   Der erste Entwurf hielt die drei mit `:has(a.fa-facebook)` und ein paar
   Pixeln Rand zusammen. Das war eine Krücke: Sie hätte diese eine Breite
   geflickt und die nächste wieder nicht. Als EIN Punkt rutschen die drei
   gemeinsam — in welche Zeile auch immer — und stehen dort nebeneinander.
   Keine Schwelle, die man raten muss.

   `nowrap` ist der Riegel dagegen, dass sie innerhalb ihres Punktes
   umbrechen; `inline-block` hält sie in der Zeile der Textlinks, solange
   dort Platz ist. */
footer ul.mod-menu li.hepro-social {
  display: inline-block;
  white-space: nowrap;
  /* Luft zum letzten Textlink, damit die beiden Gruppen als zwei lesbar
     bleiben. */
  margin-left: 18px;
}
footer ul.mod-menu li.hepro-social a.fa {
  display: inline-block;
  vertical-align: top;
  float: none;
}

/* ========================================================================
   2. NACH-OBEN-PFEIL
   ========================================================================

   Ein gewöhnlicher Verweis auf `#top`, fest in der rechten unteren Ecke.
   `/assets/js/nach-oben.js` blendet ihn ab 600 px Scrollhöhe ein und scrollt
   sanft; ohne Javascript erscheint er nicht (Begründung steht im Skript).

   FARBEN AUS DER VORLAGE, nichts erfunden: #3c3c3b ist die Textfarbe der
   Seite (46 Fundstellen in styles.css), #cd1619 das HEPRO-Rot (18), #dcdcdc
   die vorhandene Rahmenfarbe. Ruhig grau im Normalzustand, rot erst bei
   Berührung — die Seite setzt Rot sonst auch nur als Akzent ein.

   RUND UND 46 PX, GENAU WIE DAS COOKIE-SYMBOL. Der erste Entwurf war
   kantig, mit der Begründung, dass die Vorlage nichts abrundet. Im Bild war
   das falsch: Die beiden schwebenden Knöpfe stehen auf derselben Ebene über
   dem Inhalt und werden als Paar gelesen — links rund, rechts eckig sah nach
   Versehen aus. Sie folgen deshalb einander und nicht der Inhaltsvorlage;
   Größe, Rundung und Schatten sind aus hepro-consent.css übernommen. */
.hepro-nach-oben {
  position: fixed;
  right: 16px;
  bottom: 16px;
  /* Unter dem Cookie-Symbol (2147483646) und unter der Consent-Karte: Wer
     gerade seine Einwilligung ändert, soll nichts anderes im Weg haben. */
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 46 px: das Maß des Cookie-Symbols. Weit über den 24 px, die A-27 als
     Untergrenze für ein Berührungsziel misst. */
  width: 46px;
  height: 46px;
  color: #3c3c3b;
  background: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.08);
  font-size: 22px;
  line-height: 1;
  text-decoration: none;
  /* Versteckt, bis das Skript ihn freigibt. `visibility` zusätzlich zu
     `opacity`, damit er im versteckten Zustand auch nicht anklickbar ist und
     nicht in der Tabulatorreihenfolge auftaucht. */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, background-color 0.18s ease,
              border-color 0.18s ease, color 0.18s ease;
}
.hepro-nach-oben.sichtbar {
  opacity: 1;
  visibility: visible;
}
.hepro-nach-oben:hover,
.hepro-nach-oben:focus-visible {
  color: #fff;
  background: #cd1619;
  border-color: #cd1619;
}
.hepro-nach-oben:focus-visible {
  outline: 2px solid #cd1619;
  outline-offset: 2px;
}

/* Auf schmalen Geräten etwas kleiner und dichter an die Ecke — dieselben
   Maße, die das Cookie-Symbol auf der anderen Seite verwendet, damit die
   beiden Ecken gleich aussehen. */
@media (max-width: 767px) {
  .hepro-nach-oben {
    right: 12px;
    bottom: 12px;
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}

/* Wer weniger Bewegung möchte, bekommt den Pfeil ohne Überblendung. Das
   sanfte Scrollen schaltet das Skript selbst ab. */
@media (prefers-reduced-motion: reduce) {
  .hepro-nach-oben { transition: none; }
}

/* ========================================================================
   3. COOKIE-SYMBOL NACH LINKS UNTEN
   ========================================================================

   Steht NICHT hier, sondern in `assets/consent/hepro-consent.css`, wo der
   Knopf definiert ist. Grund: Jenes Stilblatt wird nach diesem geladen — ein
   Überschreiben von hier aus wäre entweder wirkungslos oder hätte mit
   erhöhter Spezifität erzwungen werden müssen. Eine Positionsangabe gehört
   dorthin, wo das Element gebaut wird, nicht in eine zweite Datei, die sie
   nachträglich zurechtrückt.

   Dieser Abschnitt bleibt als Wegweiser stehen, damit niemand die Regel hier
   sucht und für verloren hält. */

/* Schmale Geräte: die Symbolreihe beginnt an der Textkante.
 *
 * IM BILD GESEHEN, nicht gerechnet (390 px, 2026-09-07): Unter 992 px stapelt
 * Bootstrap die Fußliste zu einer Spalte, die Textlinks stehen linksbündig
 * untereinander. Der seitliche Rand, der oben die beiden Gruppen trennt,
 * würde die Symbolreihe dort gegen alles andere verschieben.
 *
 * Dass die drei nebeneinander bleiben, regelt hier nichts mehr — das tut
 * `li.hepro-social` weiter oben, auf jeder Breite. */
@media (max-width: 991px) {
  footer ul.mod-menu li.hepro-social {
    margin-left: 0;
  }
  footer ul.mod-menu a.fa {
    padding-left: 14px;
    padding-right: 14px;
  }
  /* Das erste Symbol bündig zur Textspalte darüber (deren <a> trägt 15 px
     Innenabstand links), danach gleichmäßige Abstände. */
  footer ul.mod-menu li.hepro-social a.fa:first-child {
    padding-left: 15px;
  }
}