/* "Wussten Sie schon?" (Versicherungs-Tipps, 30.10.2026). Nur neue Regeln; Farben, Abstaende und Schrift aus a9.css (--flaeche,
   --text-2, --text-3, --accent, --s1..--s3, --rand, --radius), Bewegung aus kueche.css (kc-schiene) und a11.css (--feder-seite).
   Keine neuen Farben: Etikett wie .symbol (Gruen 12 %), Rand wie .taetig-karte (Licht von oben links). */

.tipps-einleitung { margin: 0 0 var(--s2); font-size: 15px; line-height: 21px; color: var(--text-2); text-wrap: pretty; max-width: 40ch; }

/* Schiene: randlos bis an den Bildschirmrand, damit die naechste Karte sichtbar hineinragt (zeigt: hier wird gewischt) */
.tipps-huelle { margin: 0 calc(-1 * var(--rand)); }
.tipps-schiene { list-style: none; margin: 0; padding: 4px var(--rand) var(--s1); scroll-padding-inline: var(--rand); --kc-rand: var(--rand);
    align-items: stretch; }
.tipps-schiene:focus-visible { outline-offset: -2px; }
.tipp { width: min(82%, 320px); display: flex; flex-direction: column; gap: 6px; padding: var(--s2);
    border: 1px solid transparent;
    background: linear-gradient(var(--flaeche), var(--flaeche)) padding-box,
                linear-gradient(135deg, rgba(62, 224, 143, 0.65), rgba(62, 224, 143, 0.06) 45%, rgba(255, 255, 255, 0.06)) border-box; }
.tipp-etikett { align-self: flex-start; padding: 2px var(--s1); border-radius: 6px; background: rgba(62, 224, 143, 0.12); color: var(--accent);
    font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.tipp-etikett.fremd { background: rgba(255, 255, 255, 0.06); color: var(--text-2); }   /* fremde Sparte: ruhiger, "ueber eine Finova-Gesellschaft" */
.tipp-titel { margin: 2px 0 0; font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
.karte .tipp-text { font-size: 15px; line-height: 21px; color: var(--text-2); text-wrap: pretty; hyphens: auto; }

/* Punkte unter der Schiene (kueche.js kc.schiene setzt ist-an); nur sichtbar, wenn kc.schiene wirklich laeuft (es setzt
   data-kc-rand). Nicht ueber html.js: die Einzeldatei entwurf-a15.html hat das Kopf-Skript nicht, das .js setzt (Einbau 30.10.2026). */
.tipps-punkte { display: none; justify-content: center; gap: 6px; margin-top: var(--s1); }
.tipps-schiene[data-kc-rand] + .tipps-punkte { display: flex; }
.tipps-punkte span { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.22); transition: width 320ms var(--kc-kurve), background-color 320ms var(--kc-kurve); }
.tipps-punkte span.ist-an { width: 18px; background: var(--accent); }

.tipps .fuss { margin-top: var(--s1); text-align: center; }
.tipps-ticket { margin-top: var(--s3); }

/* Hinweisblock: klein, aber gut lesbar direkt unter dem Bereich (recht-tipps.md Abschnitt 7) */
.tipps-hinweis { margin: var(--s2) var(--s1) 0; display: grid; gap: var(--s1); font-size: 13px; line-height: 18px; color: var(--text-3); }

/* Auftritt: Karten gleiten nacheinander von rechts herein, wenn der Abschnitt ins Bild kommt (a9-auf -> ist-da) */
.tipps-schiene > :nth-child(1) { --i: 0; } .tipps-schiene > :nth-child(2) { --i: 1; } .tipps-schiene > :nth-child(3) { --i: 2; }
.tipps-schiene > :nth-child(4) { --i: 3; } .tipps-schiene > :nth-child(5) { --i: 4; } .tipps-schiene > :nth-child(6) { --i: 5; }
.js .a9-auf .tipp { opacity: 0; transform: translateX(32px); }
.js .a9-auf.ist-da .tipp { opacity: 1; transform: none;
    transition: transform 700ms var(--feder-seite, var(--kc-kurve)) calc(140ms + var(--i, 0) * 70ms), opacity 400ms ease-out calc(140ms + var(--i, 0) * 70ms); }
.vt-rein .a9-auf.ist-da .tipp { transition: none !important; }
html:not(.js) .a9-auf .tipp { animation: tipps-rein 700ms var(--feder-seite, ease-out) calc(var(--auf-verz, 0ms) + 140ms + var(--i, 0) * 70ms) backwards; }
@keyframes tipps-rein { from { opacity: 0; transform: translateX(32px); } }

@media (prefers-reduced-motion: reduce) {
    .js .a9-auf .tipp, html:not(.js) .a9-auf .tipp { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
    .tipps-schiene { scroll-behavior: auto; }
    .tipps-punkte span { transition: none; }
}