/* Einklappbarer Footer auf schmalen Bildschirmen.
 *
 * Der Footer listet je nach Seite bis zu 4 Link-Spalten plus 17 Vergleichs-
 * links. Auf dem Handy ergibt das eine sehr lange Kette, durch die man erst
 * scrollen muss, um ans Impressum zu kommen. Eingeklappt bleibt er ueberschaubar.
 *
 * Die Struktur (Button in der h4 + Panel) baut mobile-footer.js zur Laufzeit —
 * und nur unterhalb des Breakpoints. Oberhalb bleibt das DOM exakt wie bisher,
 * und ohne JavaScript ist ebenfalls alles aufgeklappt wie heute.
 */

/* Der Button erbt das Aussehen der Ueberschrift, damit oberhalb des
   Breakpoints (und waehrend des Umbaus) optisch nichts springt. */
.sfoot .sf-acc-btn {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  cursor: pointer;
}

.sfoot .sf-acc-chev {
  width: 15px;
  height: 15px;
  flex: none;
  opacity: .5;
  transition: transform .24s ease;
}

@media (max-width: 560px) {
  /* Die Abstaende macht jetzt die Trennlinie, nicht mehr das Grid-gap.
     Auch das padding-bottom muss weg, sonst klafft zwischen der letzten
     Spalte und dem Vergleichs-Block eine Luecke, die alle anderen Reihen
     nicht haben. */
  .sfoot .sf-top { gap: 0; padding-bottom: 0; }

  /* War nur 22px hoch und damit unter dem Mindest-Tippziel von 24px. */
  .sfoot .sf-mail { padding: 7px 0; }

  .sfoot .sf-acc { border-top: 1px solid rgba(255, 255, 255, .09); }

  .sfoot .sf-acc h4 { margin: 0; }

  .sfoot .sf-acc .sf-acc-btn {
    /* 52px Mindesthoehe: bequemes Tippziel, auch wenn der Titel kurz ist. */
    min-height: 52px;
    padding: 15px 2px;
  }

  .sfoot .sf-acc.is-open .sf-acc-chev { transform: rotate(180deg); }

  /* 0fr -> 1fr statt display:none, damit sich das Auf- und Zuklappen
     animieren laesst. Das innere div traegt das overflow:hidden. */
  .sfoot .sf-acc-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .26s ease;
  }
  .sfoot .sf-acc.is-open .sf-acc-panel { grid-template-rows: 1fr; }
  .sfoot .sf-acc-panel > div {
    overflow: hidden;
    min-height: 0;
    /* Ohne visibility bleiben die zugeklappten Links fokussierbar: sie sind
       nur weggeschnitten, nicht weg. Tastatur-Nutzer wuerden also in
       unsichtbare Links tabben. Das Ausblenden wartet, bis die Animation
       durch ist, das Einblenden passiert sofort. */
    visibility: hidden;
    transition: visibility 0s linear .26s;
  }
  .sfoot .sf-acc.is-open .sf-acc-panel > div {
    visibility: visible;
    transition: visibility 0s;
  }
  .sfoot .sf-acc.is-open .sf-acc-panel > div { padding-bottom: 10px; }

  /* Links als komfortable Tippziele statt enger Textzeilen. */
  .sfoot .sf-acc-panel a {
    margin-bottom: 0;
    padding: 10px 2px;
  }

  /* Der Vergleichs-Block bringt eigene Abstaende mit, die im Accordion
     doppelt wirken wuerden. */
  .sfoot .sf-compare.sf-acc {
    margin-top: 0;
    padding: 0;
  }
  .sfoot .sf-compare.sf-acc h4 { margin-bottom: 0; }
  .sfoot .sf-acc-panel .sf-cmp-links { gap: 2px 18px; }

  /* Der Cookie-Wiederoeffnen-Button schwebt fest unten links und liegt sonst
     genau auf der letzten Footer-Zeile — am Seitenende laesst er sich nicht
     wegscrollen. Etwas Luft darunter loest die Ueberlappung. */
  .sfoot .sf-bottom { padding-bottom: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .sfoot .sf-acc-panel,
  .sfoot .sf-acc-chev { transition: none; }
}

/* ── Tippziele ──────────────────────────────────────────────────────────────
 *
 * Eigenstaendige Aktions-Links am Ende eines Blocks ("Lesen →",
 * "Zum Kapitel ↑", "Mehr erfahren ↓" …) waren nur 15–22px hoch. WCAG 2.5.8
 * verlangt mindestens 24px; hier auf 44px gebracht, damit sie sich mit dem
 * Daumen sicher treffen lassen.
 *
 * Bewusst NICHT angefasst: Links mitten im Fliesstext, etwa
 * "Datenschutzerklaerung" in der Einwilligung oder "Agentur-Seite" im
 * Kontakt-Text. Die sind von der Regel ausdruecklich ausgenommen, weil ihre
 * Hoehe an die Zeilenhoehe des umgebenden Satzes gebunden ist — sie
 * aufzublasen wuerde den Textfluss zerreissen, ohne etwas zu verbessern.
 */
@media (max-width: 860px) {
  .blog-grid article > a[href],
  .rt-card a[href],
  .price-trust a[href],
  .upd a.morelink,
  .row-between a.link,
  /* Mail-Adresse in der Kontakt-Seitenspalte: steht unter einer eigenen
     Ueberschrift auf eigener Zeile, ist also kein Fliesstext-Link. */
  aside a[href^="mailto:"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}