/* Ergänzungen für die statische Umsetzung. Alles Gestalterische steht in tokens.css und components/bundle.css. */

/* Sprunglink für Tastatur und Screenreader */
.fv-skip { position: absolute; left: var(--space-4); top: -5rem; z-index: 100; padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill); background: var(--ink); color: #fff; font-weight: 600; text-decoration: none; }
.fv-skip:focus { top: var(--space-4); outline: 3px solid var(--orange-500); outline-offset: 2px; }

/* <picture> soll das Layout der Bildformen nicht verändern */
picture { display: contents; }

/* Platzhalter für offene Angaben (sichtbar, per Suche auffindbar): immer dunkle Schrift */
.fv-ph { color: var(--ink); }

/* Entwurfshinweis auf Rechtstexten */
.fv-draft { padding: var(--space-4) var(--space-6); border: 2px dashed var(--orange-700); background: var(--orange-100); color: var(--ink); border-radius: var(--radius-lg); font-size: 15px; }

/* Kontakt-Auswahl per Link statt Formular */
.fv-mailto { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; margin: var(--space-6) 0 0; padding: 0; }
.fv-mailto a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-6); border: 2px solid var(--ink); border-radius: var(--radius-pill); color: var(--ink); font-weight: 600; text-decoration: none; transition: background-color .3s, color .3s; }
.fv-mailto a:hover { background: var(--ink); color: #fff; }
.fv-mailto a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Jahreskacheln der Protokolle: Anfrage per E-Mail statt Download */
.fv-years a small { display: block; font-weight: 500; opacity: .85; }

/* Titel in Fußzeile und Aufruf-Kästen als Absatz statt Überschrift (sonst springen die Überschriftenebenen). Optik wie h4 bzw. h3 im Paket. */
.fv-footer .fv-footer__title { color: var(--on-inverse); font-size: 15px; font-weight: 600; margin: 0 0 10px; }
.fv-cause .fv-cause__title { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }

/* Navigation: Punkte nie umbrechen (sonst „Über / uns“ bei mittleren Breiten) */
.fv-nav a, .fv-header .fv-btn { white-space: nowrap; }

/* width/height-Attribute der Bilder dienen nur dem Seitenaufbau; die Höhe bestimmen die Formen (aspect-ratio) */
img { height: auto; }

/* Platzhalter für fehlende Fotos in den Projektformen: gefüllte Fläche statt gestrichelter Rahmen */
.fv-proj__img .fv-placeholder { border: 0; border-radius: 0; background: var(--orange-100); color: var(--ink); font-weight: 600; }

/* Sprunglink: Farbe gewinnt gegen die allgemeine Linkregel des Pakets */
.fv a.fv-skip { color: #fff; }

/* Bühne als eingerückte Fläche mit weißem Rahmen und runden Ecken (Vorbild: campai.com).
   Gilt für Hero und Seitenköpfe (Klasse fv-first); Rahmenbreite und Radius lassen sich hier zentral ändern. */
:root { --fv-frame: 8px; --fv-frame-radius: 32px; }
body.fv { margin: 0; background: var(--surface); }
.fv-first { margin: var(--fv-frame); border-radius: var(--fv-frame-radius); overflow: hidden; }
@media (max-width: 900px) {
  :root { --fv-frame: 6px; --fv-frame-radius: 24px; }
}

/* Seitenwechsel: Die Navigations-Pill verwandelt sich weich von „klein“ (nach dem Scrollen) zu „groß“ (Seitenanfang)
   statt zu springen. Cross-Document View Transitions: Chrome/Edge ab 126, Safari ab 18.2; andere Browser springen wie bisher.
   Ohne Cookies, ohne Speicherung im Browser. Mit „Bewegung reduzieren“ ist der Effekt aus. */
@view-transition { navigation: auto; }
.fv-header__inner { view-transition-name: fv-pill; }
::view-transition-group(fv-pill) { animation-duration: .5s; animation-timing-function: var(--fv-ease, cubic-bezier(.22, 1, .36, 1)); }
/* Inhalt wechselt sofort wie bisher; nur die Pill bewegt sich */
::view-transition-old(root) { animation: none; opacity: 0; }
::view-transition-new(root) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Projektprofile auf /projekte/: Foto in Bildform neben kurzem Text, abwechselnd links und rechts */
.fv-profiles { display: grid; gap: var(--space-22); }
.fv-profile { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-16); align-items: center; scroll-margin-top: calc(var(--header-height) + var(--space-8)); }
.fv-profile--rev > .fv-proj { order: 2; }
.fv-profile .fv-proj { display: block; }
.fv-profile h3 { margin: var(--space-3) 0 var(--space-5); font-size: clamp(28px, 3.2vw, 44px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.fv-profile .fv-text + .fv-text { margin-top: var(--space-4); }
.fv-profile .fv-chips li { background: var(--surface-warm); }
.fv-profile .fv-actions { margin-top: var(--space-6); }
@media (max-width: 900px) {
  .fv-profiles { gap: var(--space-16); }
  .fv-profile { grid-template-columns: 1fr; gap: var(--space-8); }
  .fv-profile--rev > .fv-proj { order: 0; }
  .fv-profile .fv-proj { max-width: 420px; }
}

/* ===== Spendenkampagne 2026 ===== */

/* Hinweis im Hero: kleine weiße Pill über der Überschrift */
.fv-hero .fv-tag--link { margin-bottom: var(--space-5); text-decoration: none; font-weight: 700; padding: 8px 16px; transition: transform .25s var(--fv-ease), box-shadow .25s; }
.fv-hero .fv-tag--link:hover { transform: translateY(-2px); box-shadow: var(--shadow-pill); }
.fv-hero .fv-tag--link:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Band auf der Startseite: Text links, Zielkreis rechts */
.fv-campaign__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-16); align-items: center; }
.fv-campaign h2 { max-width: 16ch; margin: var(--space-4) 0 var(--space-5); }
.fv-campaign .fv-text { max-width: 46ch; }
.fv-goalcircle { justify-self: center; width: clamp(220px, 26vw, 320px); aspect-ratio: 1; border-radius: 50%; background: var(--orange-500); color: var(--ink); display: grid; place-content: center; text-align: center; gap: 4px; padding: var(--space-6); }
.fv-goalcircle span { font-size: 15px; font-weight: 600; }
.fv-goalcircle strong { font-size: clamp(36px, 4.6vw, 60px); line-height: 1.05; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .fv-campaign__grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .fv-goalcircle { justify-self: start; width: 220px; }
}

/* Fünf Schritte */
.fv-steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-8); }
.fv-steps--5 li:nth-child(4)::before { background: var(--orange-500); color: var(--on-orange); clip-path: polygon(0 8%, 100% 8%, 50% 95%); border-radius: 0; padding-bottom: 22px; font-size: 22px; }
.fv-steps--5 li:nth-child(5)::before { background: var(--ink); color: var(--on-inverse); clip-path: polygon(50% 6%, 100% 92%, 0 92%); border-radius: 0; padding-top: 22px; font-size: 22px; }
.fv-steps--5 h3 { font-size: 20px; }
@media (max-width: 1100px) { .fv-steps--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .fv-steps--5 { grid-template-columns: 1fr; } }

/* Wunschliste als Tabelle: farbige Bereichs-Zellen, warme Zeilen, Beträge rechtsbündig (mobil: Karten je Bereich) */
.fv-table-wrap { overflow-x: auto; }
.fv-wishtable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 17px; line-height: 1.45; }
.fv-wishtable th, .fv-wishtable td { text-align: left; padding: var(--space-3) var(--space-6); vertical-align: middle; }
.fv-wishtable thead th { background: var(--teal-100); color: var(--ink); font-size: 14px; font-weight: 600; padding-block: var(--space-3); }
.fv-wishtable thead th:first-child { border-radius: 999px 0 0 999px; padding-left: var(--space-8); }
.fv-wishtable thead th:last-child { border-radius: 0 999px 999px 0; padding-right: var(--space-8); }
.fv-wishtable .num { text-align: right; white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; width: 1%; }
.fv-wishtable thead .num { font-weight: 600; }
.fv-wishtable .fv-price--open { font-weight: 600; color: var(--ink-muted); }
.fv-wishtable tbody td { background: var(--surface-warm); border-bottom: 1px solid rgba(29, 29, 27, .08); transition: background-color .2s; }
.fv-wishtable tbody tr:hover td { background: var(--line); }
.fv-wishtable tbody tr:last-child td { border-bottom: 0; }
.fv-wishtable tbody th.area { width: 25%; font-size: 18px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; background: var(--teal-500); color: var(--on-teal); vertical-align: middle; }
.fv-wishtable tbody th.area small { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; letter-spacing: 0; opacity: .85; font-variant-numeric: tabular-nums; }
.fv-wishtable tbody:nth-of-type(4n+2) th.area { background: var(--orange-500); color: var(--on-orange); }
.fv-wishtable tbody:nth-of-type(4n+3) th.area { background: var(--teal-100); color: var(--ink); }
.fv-wishtable tbody:nth-of-type(4n) th.area { background: var(--orange-100); color: var(--ink); }
/* Abstand zwischen den Bereichen und runde Ecken je Gruppe */
.fv-wishtable tbody tr:first-child > * { border-top: 12px solid transparent; background-clip: padding-box !important; }
.fv-wishtable tbody tr:first-child th.area { border-radius: 28px 0 0 28px / 40px 0 0 28px; }
.fv-wishtable tbody tr:first-child td:last-child { border-top-right-radius: 28px 40px; }
.fv-wishtable tbody tr:last-child td:last-child { border-bottom-right-radius: 28px; }
.fv-wishtable tfoot th, .fv-wishtable tfoot td { background: var(--orange-500); color: var(--on-orange); padding-block: var(--space-6); }
.fv-wishtable tfoot { }
.fv-wishtable tfoot tr:first-child > * { border-top: 10px solid transparent; background-clip: padding-box; }
.fv-wishtable tfoot th { border-radius: 28px 0 0 28px / 38px 0 0 28px; font-size: 18px; font-weight: 700; padding-left: var(--space-8); }
.fv-wishtable tfoot td { border-radius: 0 28px 28px 0 / 0 38px 28px 0; font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -.03em; padding-right: var(--space-8); }
@media (max-width: 760px) {
  .fv-wishtable, .fv-wishtable tbody, .fv-wishtable tfoot { display: block; }
  .fv-wishtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fv-wishtable tbody { margin-bottom: var(--space-4); border-radius: 28px; overflow: hidden; }
  .fv-wishtable tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 var(--space-4); background: var(--surface-warm); padding: var(--space-3) var(--space-5); }
  .fv-wishtable tbody tr:first-child { padding-top: 0; }
  .fv-wishtable th, .fv-wishtable td { padding: var(--space-2) 0; background: none !important; border: 0 !important; border-radius: 0 !important; }
  .fv-wishtable tbody th.area { grid-column: 1 / -1; width: auto; margin: 0 calc(-1 * var(--space-5)) var(--space-2); padding: var(--space-4) var(--space-5) !important; display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
  .fv-wishtable tbody:nth-of-type(4n+1) th.area { background: var(--teal-500) !important; color: var(--on-teal); }
  .fv-wishtable tbody:nth-of-type(4n+2) th.area { background: var(--orange-500) !important; color: var(--on-orange); }
  .fv-wishtable tbody:nth-of-type(4n+3) th.area { background: var(--teal-100) !important; color: var(--ink); }
  .fv-wishtable tbody:nth-of-type(4n) th.area { background: var(--orange-100) !important; color: var(--ink); }
  .fv-wishtable tbody th.area small { margin: 0; }
  .fv-wishtable .num { width: auto; }
  .fv-wishtable tfoot { border-radius: 28px; overflow: hidden; background: var(--orange-500); }
  .fv-wishtable tfoot tr { background: var(--orange-500); padding: var(--space-5); }
  .fv-wishtable tfoot th, .fv-wishtable tfoot td { background: none !important; padding: 0 !important; }
}

/* Spenden per PayPal: QR-Code und Kontoname (keine Zahlung auf der Seite) */
.fv-paypal { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-6); align-items: center; padding: var(--space-6) var(--space-8); border-radius: 32px; background: var(--surface); color: var(--ink); }
.fv-paypal .fv-placeholder { width: 150px; aspect-ratio: 1; display: grid; place-items: center; text-align: center; border-radius: 20px; padding: var(--space-3); font-size: 14px; }
.fv-paypal img { width: 150px; height: 150px; border-radius: 20px; }
.fv-paypal strong { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.015em; }
.fv-paypal p { margin: var(--space-2) 0 0; font-size: 16px; line-height: 1.55; }
@media (max-width: 600px) { .fv-paypal { grid-template-columns: 1fr; justify-items: start; } }
.fv-pay { display: grid; gap: var(--space-5); }
.fv-paypal--dark { background: var(--teal-500); color: var(--on-teal); }
.fv-paypal--dark img { background: #fff; }
.fv-paypal--dark a { color: inherit; }
.fv-paypal .fv-iban { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fv-paypal--text { grid-template-columns: minmax(0, 1fr); }
.fv-paypal a { font-weight: 700; text-underline-offset: 3px; }
/* Wunsch mit Zweck */
.fv-wishtable .fv-wishtitle { display: block; font-weight: 700; }
.fv-wishmore { margin-top: 2px; }
.fv-wishmore summary { display: inline-block; padding-block: 4px; font-size: 14px; font-weight: 600; color: var(--ink-muted); cursor: pointer; list-style: none; }
.fv-wishmore summary::-webkit-details-marker { display: none; }
.fv-wishmore summary::after { content: " +"; font-weight: 800; }
.fv-wishmore[open] summary::after { content: " –"; }
.fv-wishmore p { margin: 2px 0 4px; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }

/* nur für Screenreader sichtbar (z. B. Tabellenüberschrift) */
.fv-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* feine Nähte zwischen den Kopfzellen der Wunschliste vermeiden */
.fv-wishtable thead th { box-shadow: 0 0 0 1px var(--teal-100); }

/* Spendenbarometer (statisch; Werte per Hand pflegen) */
.fv-meter { display: grid; gap: 10px; color: var(--ink); }
.fv-meter__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); margin: 0; font-size: 15px; font-weight: 600; }
.fv-meter__bar { height: 32px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .6); }
.fv-meter__bar i { display: block; height: 100%; min-width: 0; border-radius: 999px; background: var(--teal-700); }
.fv-meter__head span:last-child { white-space: nowrap; }
.fv-meter__foot { margin: 0; font-size: 17px; line-height: 1.4; }
.fv-meter__foot strong { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.fv-meter__foot small { font-size: 14px; opacity: .85; }
.fv-meter--inv { color: var(--on-inverse); }
.fv-meter--inv .fv-meter__bar { background: rgba(255, 255, 255, .18); }
.fv-meter--inv .fv-meter__bar i { background: var(--orange-500); }
.fv-meter--card { padding: var(--space-8); border-radius: 32px; background: rgba(255, 255, 255, .08); gap: 14px; }
.fv-meter--card .fv-meter__head { font-size: 16px; }
.fv-campaign .fv-meter--card .fv-meter__foot { font-size: 18px; }

/* Weitere Möglichkeiten (Sach- und Unternehmensspende) am Seitenende */
.fv-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.fv-more .fv-paypal { align-content: start; }
@media (max-width: 760px) { .fv-more { grid-template-columns: minmax(0, 1fr); } }

/* freundliche, helle Teaser-Fläche (statt Schwarz) */
.fv-bg-mint { background: var(--teal-100); color: var(--ink); }
.fv-bg-mint .fv-text { color: var(--ink); }
.fv-meter--light { background: var(--surface); box-shadow: 0 2px 6px rgba(29, 29, 27, .06), 0 14px 36px rgba(29, 29, 27, .08); }
.fv-meter--light .fv-meter__bar { background: var(--surface-warm); box-shadow: inset 0 0 0 1px var(--line); }
.fv-meter--light .fv-meter__bar i { background: var(--teal-700); }

/* Zwei-Wege-Band: helle Hälfte mit orangem Akzent */
.fv-two .fv-bg-warm .fv-two__shape { background: var(--orange-500); opacity: 1; }

/* Adresskarte (Kontakt) hell statt schwarz */
.fv-address { background: var(--teal-100); color: var(--ink); }
.fv-address small { color: var(--ink-muted); }
.fv-address .fv-select-all { color: var(--ink); }

/* Gemeinsames Mitmach-Band am Seitenende (Mitglied werden, Beitrag, Kontakt) */
.fv-cta .fv-actions { margin-top: 0; }
.fv-cta .fv-cta__note { margin: var(--space-6) 0 0; color: var(--ink); }
.fv-member .fv-coin { background: var(--surface); color: var(--ink); box-shadow: 0 2px 6px rgba(29, 29, 27, .08), 0 18px 44px rgba(29, 29, 27, .14); }
.fv-member .fv-coin span { color: var(--ink-muted); }
.fv-member .fv-coin strong { color: var(--ink); }
.fv-member .fv-chips { margin-bottom: var(--space-7); }
@media (max-width: 900px) { .fv-member .fv-coin { margin-left: 18px; } }

/* Mitmach-Band: Abstand zwischen Text und Buttons */
.fv-cta .fv-lead { margin-bottom: var(--space-8); }

.fv-campaign .fv-campaign__sub { margin: 0 0 var(--space-4); font-size: clamp(20px, 2vw, 26px); font-weight: 700; color: var(--ink); }

/* Startseiten-Hero: etwas kleiner, vier Zeilen, damit nichts ans Foto stößt */
.fv-hero .fv-display { font-size: clamp(34px, 4.4vw, 56px); }

/* Orangener Punkt im Startseiten-Hero: sanft schwebend und leicht atmend */
@keyframes fv-dot-drift { 0%, 100% { translate: 0 0; scale: 1; } 50% { translate: 10px -18px; scale: 1.07; } }
@media (prefers-reduced-motion: no-preference) {
  .fv-hero .fv-stage-dot { animation: fv-drop .8s var(--fv-spring) .7s both, fv-dot-drift 7s ease-in-out 1.6s infinite; }
}

/* Kennzeichnung KI-erzeugter Bühnenbilder: kleine Marke unten rechts in der Ecke der Bühne */
.fv-aihint { position: absolute; z-index: 2; right: 20px; bottom: 14px; padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, .8); color: var(--ink-muted); font-size: 11px; font-weight: 600; letter-spacing: .01em; line-height: 1.5; white-space: nowrap; }
@media (max-width: 900px) { .fv-pagehead > .fv-aihint { display: none; } }

/* Ankündigungsleiste Spendenkampagne (über dem Header, scrollt mit) */
.fv-ann { background: var(--surface-warm); color: var(--ink); border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.3; }
.fv-ann a { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 14px; padding: 10px var(--space-4); text-decoration: none; color: inherit; }
.fv-ann strong { font-weight: 700; }
.fv-ann__meter { width: 96px; height: 10px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong); overflow: hidden; }
.fv-ann__meter i { display: block; height: 100%; border-radius: 999px; background: var(--teal-700); }
.fv-ann__sum { font-variant-numeric: tabular-nums; }
.fv-ann__go { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.fv-ann a:hover .fv-ann__go { text-decoration-color: var(--orange-500); }
@media (max-width: 600px) { .fv-ann { font-size: 13px; } .fv-ann a { gap: 2px 10px; padding: 8px var(--space-3); } .fv-ann__meter { width: 64px; } .fv-ann__sum { flex-basis: auto; } }

/* KI-Hinweis bei Bildern im Text (nicht auf der Bühne): unten mittig im runden Bild */
.fv-profile .fv-proj { position: relative; }
.fv-proj > .fv-aihint { left: 50%; right: auto; translate: -50% 0; bottom: 5%; }