/* FreizeitPaare – Entwurf. Bootstrap 5.3 + eigene Tokens.
   Markenfarben aus dem Markenblatt (logo.png). Keine externen URLs. */

:root {
  --fp-dunkelblau: #0D3B66;
  --fp-blau: #2386D1;
  --fp-gruen: #2E9E5B;
  --fp-gruen-dunkel: #237A46;
  --fp-hellgruen: #8ED081;
  --fp-gruen-flaeche: #EAF6EE;
  --fp-blau-flaeche: #F1F6FB;
  --fp-text: #1D2B3C;
  --fp-text-leise: #5A6A7D;
  --fp-rand: #DCE4EC;
  --fp-warn: #B45309;
  --fp-warn-flaeche: #FFF4E5;
  --fp-radius: 14px;
  --fp-schatten: 0 2px 10px rgba(13, 59, 102, .07);
  --fp-schatten-hover: 0 8px 24px rgba(13, 59, 102, .13);
  /* Bewegung: eigene Kurven statt der schwachen CSS-Standardkurven */
  --fp-ease-out: cubic-bezier(.23, 1, .32, 1);        /* Ein-/Ausblenden, Druck */
  --fp-ease-in-out: cubic-bezier(.77, 0, .175, 1);    /* Bewegung auf der Fläche */

  --bs-body-font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-color: var(--fp-text);
  --bs-body-bg: #FFFFFF;
  --bs-primary: var(--fp-gruen);
  --bs-primary-rgb: 46, 158, 91;
  --bs-link-color: var(--fp-blau);
  --bs-link-color-rgb: 35, 134, 209;
  --bs-link-hover-color: var(--fp-dunkelblau);
  --bs-border-color: var(--fp-rand);
  --bs-border-radius: 10px;
  --bs-border-radius-lg: var(--fp-radius);
}

body { font-size: 1.02rem; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .fp-titel { color: var(--fp-dunkelblau); font-weight: 800; letter-spacing: -.01em; }
.text-leise { color: var(--fp-text-leise) !important; }
.fp-gruen { color: var(--fp-gruen); }
.fp-schrift-hand { font-family: "Caveat", cursive; font-weight: 700; }

/* ---------- Buttons ---------- */
/* Fokusring: Bootstrap setzt --bs-btn-focus-shadow-rgb nur in seinen eigenen Varianten,
   ohne den Wert hätten eigene Buttons (.btn-wahl, .btn-hell …) gar keinen Fokusring. */
.btn {
  font-weight: 800; border-radius: 10px; padding: .6rem 1.15rem;
  --bs-btn-focus-shadow-rgb: 46, 158, 91;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 160ms var(--fp-ease-out);
}
.btn:active { transform: scale(.97); }
.btn-lg { padding: .8rem 1.5rem; border-radius: 12px; }
.btn-primary {
  --bs-btn-bg: var(--fp-gruen); --bs-btn-border-color: var(--fp-gruen);
  --bs-btn-hover-bg: var(--fp-gruen-dunkel); --bs-btn-hover-border-color: var(--fp-gruen-dunkel);
  --bs-btn-active-bg: var(--fp-gruen-dunkel); --bs-btn-active-border-color: var(--fp-gruen-dunkel);
  --bs-btn-disabled-bg: var(--fp-gruen); --bs-btn-disabled-border-color: var(--fp-gruen);
  box-shadow: 0 3px 10px rgba(46, 158, 91, .28);
}
.btn-outline-dunkel {
  --bs-btn-color: var(--fp-dunkelblau); --bs-btn-border-color: var(--fp-dunkelblau);
  --bs-btn-bg: #fff; --bs-btn-focus-shadow-rgb: 13, 59, 102;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--fp-dunkelblau); --bs-btn-hover-border-color: var(--fp-dunkelblau);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--fp-dunkelblau);
}
.btn-outline-gruen {
  --bs-btn-color: var(--fp-gruen-dunkel); --bs-btn-border-color: var(--fp-gruen);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--fp-gruen); --bs-btn-hover-border-color: var(--fp-gruen);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--fp-gruen-dunkel);
}
.btn-hell { background: #fff; color: var(--fp-dunkelblau); border: 0; box-shadow: var(--fp-schatten); --bs-btn-focus-shadow-rgb: 13, 59, 102; }
.btn-hell:hover { background: #fff; color: var(--fp-gruen-dunkel); }

/* ---------- Kopf ---------- */
.fp-kopf { background: #fff; border-bottom: 1px solid var(--fp-rand); }
.fp-kopf .navbar-brand img { height: 46px; width: auto; }
.fp-kopf .nav-link { color: var(--fp-text); font-weight: 700; padding: .5rem .85rem !important; border-bottom: 3px solid transparent; }
.fp-kopf .nav-link:hover { color: var(--fp-gruen-dunkel); }
.fp-kopf .nav-link.active { color: var(--fp-gruen-dunkel); border-bottom-color: var(--fp-gruen); }
.fp-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid var(--fp-gruen-flaeche); }
.fp-punkt { display: inline-block; min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem; border-radius: 1rem; background: var(--fp-gruen); color: #fff; font-size: .72rem; font-weight: 800; line-height: 1.25rem; text-align: center; vertical-align: middle; }

/* ---------- Hero ---------- */
/* Foto rechts, per Maske weich in den Himmelston ausgeblendet (keine harte Kante) */
.fp-hero { position: relative; overflow: hidden; min-height: 460px; background: linear-gradient(90deg, #FFF3E3 0%, #FBE1C2 45%, #F4C18E 100%); display: flex; align-items: center; }
.fp-hero::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 62%; background: url("../img/hero.05e9f1f0a3b6.jpg") right center / cover no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%); mask-image: linear-gradient(90deg, transparent 0%, #000 38%); }
.fp-hero > .container { position: relative; z-index: 1; }
.fp-hero h1 { font-size: clamp(2.5rem, 6vw, 4.2rem); font-weight: 900; line-height: 1.02; }
.fp-hero .fp-unterzeile { font-size: 1.3rem; font-weight: 800; color: var(--fp-dunkelblau); }
.fp-hero p { font-size: 1.12rem; max-width: 30rem; }
.fp-suche { background: #fff; border-radius: 14px; box-shadow: var(--fp-schatten-hover); padding: .5rem; max-width: 34rem; }
.fp-suche .form-control, .fp-suche .form-select { border: 0; box-shadow: none; font-weight: 600; }
.fp-suche .input-group-text { background: transparent; border: 0; color: var(--fp-gruen); }
@media (max-width: 767.98px) {
  .fp-hero { min-height: 0; padding: 2.5rem 0 3rem; }
  .fp-hero::after { width: 100%; opacity: .3; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 60%); mask-image: linear-gradient(180deg, transparent 0%, #000 60%); }
}

/* ---------- Merkmale ---------- */
.fp-merkmal { display: flex; gap: .9rem; align-items: flex-start; }
.fp-merkmal-icon { flex: 0 0 56px; height: 56px; border-radius: 50%; background: var(--fp-gruen-flaeche); color: var(--fp-gruen); display: grid; place-items: center; font-size: 1.55rem; }
.fp-merkmal h3 { font-size: 1.02rem; margin: .15rem 0 .2rem; }
.fp-merkmal p { font-size: .92rem; color: var(--fp-text-leise); margin: 0; }

/* ---------- Abschnitte ---------- */
.fp-flaeche { background: var(--fp-blau-flaeche); border-radius: 22px; }
.fp-abschnitt-titel { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 900; margin-bottom: .2rem; }

/* ---------- Aktivitätskarte ---------- */
.fp-karte { background: #fff; border: 1px solid var(--fp-rand); border-radius: var(--fp-radius); overflow: hidden; box-shadow: var(--fp-schatten); height: 100%; display: flex; flex-direction: column; transition: box-shadow 200ms ease, transform 200ms var(--fp-ease-out); }
/* Hover nur mit echter Maus – auf Touch-Geräten bliebe er nach dem Tippen hängen */
@media (hover: hover) and (pointer: fine) {
  .fp-karte:hover { box-shadow: var(--fp-schatten-hover); transform: translateY(-2px); }
}
.fp-karte:active { transform: scale(.99); }
/* Die ganze Karte ist klickbar (a::after), also zeigt auch die ganze Karte den Fokus */
.fp-karte:has(a:focus-visible) { outline: 3px solid rgba(46, 158, 91, .55); outline-offset: 2px; }
.fp-karte h3 a:focus-visible { outline: 0; }
.fp-karte-bild { position: relative; aspect-ratio: 16 / 8; background: var(--fp-blau-flaeche) center / cover no-repeat; }
.fp-karte-bild .fp-kat { position: absolute; left: 12px; bottom: -22px; width: 46px; height: 46px; border-radius: 50%; background: var(--fp-blau); color: #fff; display: grid; place-items: center; font-size: 1.3rem; border: 3px solid #fff; }
.fp-karte-bild .fp-badges { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: .35rem; flex-wrap: wrap; }
.fp-karte-inhalt { padding: 1.8rem 1rem 1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.fp-karte h3 { font-size: 1.08rem; margin: 0 0 .2rem; }
.fp-karte h3 a { color: inherit; text-decoration: none; }
.fp-karte h3 a::after { content: ""; position: absolute; inset: 0; }
.fp-karte { position: relative; }
.fp-zeile { display: flex; gap: .5rem; align-items: flex-start; font-size: .9rem; color: var(--fp-text-leise); }
.fp-zeile i { color: var(--fp-dunkelblau); width: 1rem; }
.fp-fehlen { margin-top: auto; padding-top: .6rem; font-weight: 800; color: var(--fp-gruen-dunkel); font-size: .95rem; }
.fp-fehlen i { color: var(--fp-gruen); }

/* ---------- Badges ---------- */
.fp-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 800; padding: .28rem .6rem; border-radius: 2rem; background: rgba(255, 255, 255, .95); color: var(--fp-dunkelblau); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.fp-badge-aktiv { background: var(--fp-gruen); color: #fff; }
.fp-badge-idee { background: #FFF1C9; color: #7A5200; }
.fp-badge-admin { background: var(--fp-dunkelblau); color: #fff; box-shadow: none; }
.fp-badge-status { background: var(--fp-warn-flaeche); color: var(--fp-warn); box-shadow: none; }

/* ---------- So funktioniert es ---------- */
.fp-schritt { background: #fff; border: 1px solid var(--fp-rand); border-radius: var(--fp-radius); padding: 1.6rem 1.2rem 1.3rem; text-align: center; position: relative; height: 100%; }
.fp-schritt-nr { position: absolute; top: -16px; left: 16px; width: 36px; height: 36px; border-radius: 50%; background: var(--fp-gruen); color: #fff; font-weight: 900; display: grid; place-items: center; }
.fp-schritt-icon { font-size: 2.6rem; color: var(--fp-dunkelblau); }
.fp-schritt h3 { font-size: 1.05rem; margin: .5rem 0 .4rem; }
.fp-schritt p { font-size: .92rem; color: var(--fp-text-leise); margin: 0; }
.fp-pfeil { color: var(--fp-dunkelblau); font-size: 1.4rem; }

/* ---------- Privatsphäre ---------- */
.fp-privat-icon { width: 96px; height: 96px; border-radius: 50%; background: var(--fp-gruen-flaeche); color: var(--fp-gruen); display: grid; place-items: center; font-size: 2.6rem; }
.fp-vorher-nachher { background: #fff; border: 1px solid var(--fp-rand); border-radius: var(--fp-radius); padding: 1rem; text-align: center; height: 100%; }
.fp-verschwommen { filter: blur(3px); opacity: .55; }
.fp-kreis { width: 46px; height: 46px; border-radius: 50%; display: inline-grid; place-items: center; background: #CCD6E0; color: #fff; font-size: 1.4rem; margin: 0 -6px; border: 3px solid #fff; }
.fp-kreis-farbig { background: var(--fp-blau); }
.fp-kreis-gruen { background: var(--fp-gruen); }

/* ---------- Band unten ---------- */
.fp-band { background: linear-gradient(90deg, rgba(13, 59, 102, .92), rgba(13, 59, 102, .55)), url("../img/hero.05e9f1f0a3b6.jpg") center 40% / cover; color: #fff; border-radius: 22px; }
.fp-band .fp-schrift-hand { font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.05; }

/* ---------- Fuß ---------- */
.fp-fuss { background: var(--fp-dunkelblau); color: rgba(255, 255, 255, .8); }
.fp-fuss a { color: #fff; text-decoration: none; }
.fp-fuss a:hover { text-decoration: underline; }
.fp-fuss h4 { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; }

/* ---------- Detailseite ---------- */
.fp-detail-bild { height: clamp(160px, 26vw, 300px); border-radius: var(--fp-radius); background: center / cover no-repeat; position: relative; }
.fp-fakten { background: #fff; border: 1px solid var(--fp-rand); border-radius: var(--fp-radius); box-shadow: var(--fp-schatten); }
.fp-fakten .fp-zeile { font-size: .98rem; color: var(--fp-text); padding: .45rem 0; }
.fp-fakten .fp-zeile i { color: var(--fp-gruen); font-size: 1.1rem; }
.fp-hinweis { border-radius: 12px; padding: .9rem 1rem; display: flex; gap: .75rem; align-items: flex-start; }
.fp-hinweis i { font-size: 1.3rem; line-height: 1.2; }
.fp-hinweis-gruen { background: var(--fp-gruen-flaeche); color: #174D2D; }
.fp-hinweis-gruen i { color: var(--fp-gruen); }
.fp-hinweis-blau { background: var(--fp-blau-flaeche); color: var(--fp-dunkelblau); }
.fp-hinweis-blau i { color: var(--fp-blau); }
.fp-hinweis-warn { background: var(--fp-warn-flaeche); color: #6B3A06; border: 1px solid #F5D6A8; }
.fp-hinweis-warn i { color: var(--fp-warn); }
.fp-dabei { background: linear-gradient(135deg, var(--fp-gruen), #3DB26E); color: #fff; border-radius: var(--fp-radius); }
.fp-dabei h2 { color: #fff; }

/* Tab-Wechsel wird oft benutzt: sofort umschalten, kein Fade */
.tab-content > .tab-pane.fade { transition: none; }
.nav-tabs.fp-tabs { border-bottom: 2px solid var(--fp-rand); gap: .25rem; }
.fp-tabs .nav-link { border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; color: var(--fp-text-leise); font-weight: 800; }
.fp-tabs .nav-link.active { color: var(--fp-dunkelblau); border-bottom-color: var(--fp-gruen); background: transparent; }

/* Paare der Gruppe */
.fp-paar { display: flex; gap: .85rem; align-items: center; padding: .7rem; border: 1px solid var(--fp-rand); border-radius: 12px; background: #fff; }
.fp-paar img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
a.fp-paar { transition: border-color 150ms ease, transform 160ms var(--fp-ease-out); }
@media (hover: hover) and (pointer: fine) { a.fp-paar:hover { border-color: var(--fp-gruen); } }
a.fp-paar:active { transform: scale(.99); }
.fp-paar-name { font-weight: 800; color: var(--fp-dunkelblau); }
.fp-rueck { font-size: .85rem; font-weight: 700; }
.fp-rueck-ja { color: var(--fp-gruen-dunkel); }
.fp-rueck-nein { color: #B42318; }
.fp-rueck-offen { color: var(--fp-text-leise); }

/* Chat */
.fp-chat { background: var(--fp-blau-flaeche); border-radius: var(--fp-radius); padding: 1rem; max-height: 480px; overflow-y: auto; }
.fp-msg { max-width: 78%; margin-bottom: .8rem; }
.fp-msg-blase { background: #fff; border-radius: 14px 14px 14px 4px; padding: .55rem .8rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
.fp-msg-eigen { margin-left: auto; }
.fp-msg-eigen .fp-msg-blase { background: var(--fp-gruen); color: #fff; border-radius: 14px 14px 4px 14px; }
.fp-msg-kopf { font-size: .78rem; font-weight: 800; color: var(--fp-dunkelblau); margin-bottom: .15rem; }
.fp-msg-eigen .fp-msg-kopf { text-align: right; }
/* Zeit hinter dem Namen, blass; tabellarische Ziffern, damit Uhrzeiten nicht springen */
.fp-msg-zeit { margin-left: .3rem; font-weight: 600; color: var(--fp-text-leise); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Nur für per Centrifugo eintreffende fremde Nachrichten – nicht beim Laden des Verlaufs,
   eigene Nachrichten erscheinen sofort ohne Animation */
.fp-msg-neu {
  transition: opacity 180ms ease, transform 180ms var(--fp-ease-out);
  @starting-style { opacity: 0; transform: translateY(6px); }
}
.fp-msg-geloescht .fp-msg-blase { background: transparent; box-shadow: none; border: 1px dashed var(--fp-rand); color: var(--fp-text-leise); font-style: italic; }

/* Schalter */
.form-switch .form-check-input { width: 3em; height: 1.5em; }
.form-check-input:checked { background-color: var(--fp-gruen); border-color: var(--fp-gruen); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--fp-gruen); box-shadow: 0 0 0 .2rem rgba(46, 158, 91, .2); }

/* Formular-Schritte */
.fp-schritte { display: flex; gap: .5rem; counter-reset: s; }
.fp-schritte button { flex: 1; border: 0; background: none; padding: .6rem .25rem; border-bottom: 4px solid var(--fp-rand); font-weight: 800; color: var(--fp-text-leise); text-align: left; transition: border-color 200ms ease, color 200ms ease; }
.fp-schritte button.active { border-bottom-color: var(--fp-gruen); color: var(--fp-dunkelblau); }
.fp-schritte button.erledigt { border-bottom-color: var(--fp-hellgruen); }
.fp-schritte small { display: block; font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.fp-karte-form { background: #fff; border: 1px solid var(--fp-rand); border-radius: var(--fp-radius); box-shadow: var(--fp-schatten); }
.btn-check + .btn-wahl { border: 1px solid var(--fp-rand); background: #fff; color: var(--fp-text); font-weight: 700; --bs-btn-focus-shadow-rgb: 46, 158, 91; }
.btn-check:checked + .btn-wahl { background: var(--fp-gruen-flaeche); border-color: var(--fp-gruen); color: var(--fp-gruen-dunkel); }
.form-label { font-weight: 800; color: var(--fp-dunkelblau); }

/* Checkliste */
.fp-check { list-style: none; padding: 0; margin: 0; }
.fp-check li { display: flex; gap: .6rem; align-items: center; padding: .45rem 0; font-weight: 700; }
.fp-check .bi-check-circle-fill { color: var(--fp-gruen); }
.fp-check .bi-circle { color: #9AA8B6; }
.fp-check li.offen a { font-weight: 800; }

/* Mobile Tab-Leiste (eingeloggt) */
.fp-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: #fff; border-top: 1px solid var(--fp-rand); display: flex; padding: .3rem .25rem calc(.3rem + env(safe-area-inset-bottom)); }
.fp-tabbar a { flex: 1; text-align: center; font-size: .7rem; font-weight: 800; color: var(--fp-text-leise); text-decoration: none; padding: .2rem 0; position: relative; -webkit-tap-highlight-color: transparent; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: color 150ms ease; }
.fp-tabbar a i { display: block; font-size: 1.35rem; transition: transform 160ms var(--fp-ease-out); }
.fp-tabbar a:active i { transform: scale(.88); }
.fp-tabbar a.active { color: var(--fp-gruen-dunkel); }
.fp-tabbar .fp-plus i { width: 44px; height: 44px; margin: -14px auto 0; border-radius: 50%; background: var(--fp-gruen); color: #fff; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(46, 158, 91, .4); }
.fp-tabbar .fp-punkt { position: absolute; top: 0; left: 55%; }
body.fp-mit-tabbar { padding-bottom: 72px; }
@media (min-width: 992px) { .fp-tabbar { display: none; } body.fp-mit-tabbar { padding-bottom: 0; } }

/* Entwurfs-Navigation */
.fp-entwurf { position: fixed; right: 14px; bottom: 14px; z-index: 1050; }
body.fp-mit-tabbar .fp-entwurf { bottom: 84px; }
@media (min-width: 992px) { body.fp-mit-tabbar .fp-entwurf { bottom: 14px; } }
.fp-entwurf .btn { background: #111827; color: #fff; font-size: .8rem; padding: .45rem .8rem; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }

/* ---------- Bewegung ---------- */

/* Schubladen (Filter am Handy): iOS-artige Kurve statt ease-in-out */
.offcanvas, .offcanvas-lg { transition-timing-function: cubic-bezier(.32, .72, 0, 1); }
/* Aufklappendes Menü am Handy: kürzer und mit eigener Kurve */
.collapsing { transition: height 250ms var(--fp-ease-out); }

/* Dialoge: zentriert leicht aufzoomen statt von oben hereinfallen; Schließen schneller als Öffnen */
.modal.fade .modal-dialog { transform: scale(.96); transition: transform 200ms var(--fp-ease-out); }
.modal.fade:not(.show) .modal-dialog { transition-duration: 150ms; }
.modal.show .modal-dialog { transform: none; }

/* Per JS eingeblendete Formularteile (hidden entfernt) weich einblenden statt ruckartig.
   Erst ab .fp-geladen, damit beim Seitenaufbau nichts animiert. */
.fp-geladen .fp-einblenden {
  transition: opacity 200ms ease, transform 200ms var(--fp-ease-out);
  @starting-style { opacity: 0; transform: translateY(-4px); }
}

/* „Link kopieren“: beide Beschriftungen liegen übereinander, der Button behält seine Breite */
.fp-wechsel { display: inline-grid; }
.fp-wechsel > span { grid-area: 1 / 1; transition: opacity 200ms ease, filter 200ms ease; }
.fp-wechsel-b, .kopiert .fp-wechsel-a { opacity: 0; filter: blur(2px); }
.kopiert .fp-wechsel-b { opacity: 1; filter: none; }

/* Aktivierung „Eure Gruppe steht!“: seltener Höhepunkt, darf Freude machen.
   Hinweis erscheint, danach tauchen die Paare gestaffelt auf. */
@keyframes fp-auftauchen { from { opacity: 0; transform: translateY(8px); } }
.fp-feier { animation: fp-auftauchen 300ms var(--fp-ease-out) both; }
.fp-gestaffelt > * { animation: fp-auftauchen 300ms var(--fp-ease-out) both; }
.fp-gestaffelt > :nth-child(1) { animation-delay: 150ms; }
.fp-gestaffelt > :nth-child(2) { animation-delay: 200ms; }
.fp-gestaffelt > :nth-child(3) { animation-delay: 250ms; }
.fp-gestaffelt > :nth-child(4) { animation-delay: 300ms; }
.fp-gestaffelt > :nth-child(5) { animation-delay: 350ms; }
.fp-gestaffelt > :nth-child(6) { animation-delay: 400ms; }
.fp-gestaffelt > :nth-child(7) { animation-delay: 450ms; }
.fp-gestaffelt > :nth-child(n+8) { animation-delay: 500ms; }

/* Startseite „Eure Gruppe steht“: Fotos werden beim Hineinscrollen scharf (einmalig).
   Ohne JS bleiben sie einfach scharf. */
.fp-enthuellen img { transition: filter 600ms ease, opacity 600ms ease; }
.fp-enthuellen img:nth-child(2) { transition-delay: 90ms; }
.fp-enthuellen img:nth-child(3) { transition-delay: 180ms; }
.fp-js .fp-enthuellen:not(.ist-sichtbar) img { filter: blur(3px); opacity: .55; }

/* Weniger Bewegung: keine Verschiebungen/Skalierungen, Überblendungen bleiben */
@media (prefers-reduced-motion: reduce) {
  .btn:active, .fp-karte:hover, .fp-karte:active, a.fp-paar:active, .fp-tabbar a:active i,
  .modal.fade .modal-dialog { transform: none; }
  .collapsing { transition: none; }
  .fp-geladen .fp-einblenden, .fp-msg-neu { @starting-style { transform: none; } }
  @keyframes fp-auftauchen { from { opacity: 0; } }
}