/* ═══════════════════════════════════════════════════════════════════════════
   Anirova — Funktionsseiten (2026-09-27, Verkauf)
   Gilt NUR für: features, matching, mood, community, compare.
   Wird im Seiteninhalt (nach verkauf.css) geladen und baut auf den
   .vk-Bausteinen auf. Alles steht unter .fn, damit keine andere Seite
   betroffen ist.

   Rahmen: Der Inhalt liegt in der District-Bühne (.district-buehne__inhalt),
   ab 900 px rechts neben der Stations-Leiste. Die Bühne hält selbst schon
   Seitenrand — darum füllt .vk-wrap hier die volle Spaltenbreite.
   Spaltenbreite (gemessen): 390 → 350, 820 → 780, 1024 → ~850, 1440 → ~1230.
   ═══════════════════════════════════════════════════════════════════════════ */

.fn { min-width: 0; }
.fn .vk-wrap { width: 100%; }
.fn .vk-abschnitt { padding-block: calc(var(--vk-abschnitt) * .7); }
.fn .vk-abschnitt--eng { padding-block: calc(var(--vk-abschnitt) * .4); }

/* Überschriften der Bausteine gegen district-*.css absichern
   (dort bekommen h2/h3 im <main> Mono-Schrift und Großbuchstaben) */
.fn :is(.vk-titel, .vk-hero__titel, .vk-karte h3) { text-transform: none; font-family: var(--vk-schrift); }
.fn :is(.vk-titel, .vk-hero__titel) em { font-family: var(--vk-serif); }

/* ─── Hero in der Bühne ─────────────────────────────────────────────────── */
.fn .vk-hero {
  padding: var(--vk-s-5) 0 var(--vk-s-7);
  min-height: 0;
  display: block;
}
.fn-station {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font: 700 var(--vk-fs-kicker)/1.4 var(--vk-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vk-text-2);
}
.fn-station b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 30px;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: linear-gradient(135deg, #00e6ff, #7c5cff);
  color: #02101b;
  font-size: .75rem;
  letter-spacing: 0;
}
.fn .vk-hero__titel { font-size: clamp(2.125rem, 1.4rem + 3vw, 4rem); }

/* Tablet hoch: Text und Screens nebeneinander statt gestapelt */
@media (min-width: 600px) and (max-width: 959px) {
  .fn .vk-hero__raster {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: var(--vk-s-6);
    align-items: center;
  }
  .fn .vk-hero__text { max-width: none; }
  .fn .vk-hero__bild { width: 100%; grid-template-columns: 1fr; position: relative; padding-bottom: 28%; }
  /* zwei Screens gefächert: der zweite liegt versetzt rechts unten und bleibt
     zu gut einem Drittel sichtbar */
  .fn .vk-hero__bild > .vk-screen:nth-child(1) { width: 62%; z-index: 1; }
  .fn .vk-hero__bild > .vk-screen:nth-child(2) {
    position: absolute;
    right: 0;
    top: 20%;
    width: 62%;
    margin: 0;
  }
  .fn .vk-stores { flex-direction: column; align-items: stretch; max-width: 260px; }
  .fn .vk-stores > .vk-store { justify-content: flex-start; }
}
@media (min-width: 960px) {
  .fn .vk-hero__raster { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--vk-s-6); }
}
@media (min-width: 1280px) {
  .fn .vk-hero { padding: var(--vk-s-6) 0 var(--vk-s-8); }
  .fn .vk-hero__raster { gap: 72px; }
}

/* Hero mit Werkzeug statt Screens (mood): bis 1279 px Text über dem
   Werkzeug (auf dem Tablet Text zweispaltig: Titel links, Lead rechts),
   ab 1280 px nebeneinander. */
.fn .vk-hero__werkzeug { min-width: 0; }
.fn .fn-raster-werkzeug .vk-hinweise { margin-top: var(--vk-s-5); }
@media (min-width: 600px) and (max-width: 1279px) {
  .fn .fn-raster-werkzeug { grid-template-columns: 1fr; gap: var(--vk-s-6); }
  .fn .fn-raster-werkzeug .vk-hero__text {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    column-gap: var(--vk-s-6);
    align-items: end;
  }
  .fn .fn-raster-werkzeug .fn-station,
  .fn .fn-raster-werkzeug .vk-hero__titel { grid-column: 1; }
  .fn .fn-raster-werkzeug .vk-hero__lead { grid-column: 2; grid-row: 2; margin: 0; }
  .fn .fn-raster-werkzeug .vk-hinweise { grid-column: 1 / -1; }
  .fn .fn-raster-werkzeug .fn-hero-app { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
  .fn .fn-raster-werkzeug { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
}
/* Mood-Suche im Rahmen der Seite (Logik unverändert) */
.fn .mood-wrap { max-width: none; margin: 0; }
.fn .mood-pick { padding: 22px 18px; border-color: var(--vk-linie); background: linear-gradient(180deg, rgb(13 26 46 / .9), rgb(8 18 35 / .9)); }
.fn .mood-pick .section-h { margin: 0; font: 800 var(--vk-fs-h3)/1.25 var(--vk-schrift); text-transform: none; letter-spacing: -.01em; color: var(--vk-text); }
.fn .mood-pick .section-sub-soft { margin: 6px 0 0; color: var(--vk-text-2); }
.fn .mood-chip { min-height: 44px; color: var(--vk-text-2); }
.fn .mood-item-meta { color: var(--vk-text-3); }
.fn .mood-actions .btn { min-height: 48px; }
.fn .mood-results .ai-btn { min-height: 44px; }
@media (min-width: 600px) { .fn .mood-pick { padding: 32px; } }
/* Store-Zeile im Werkzeug-Hero: der nächste Schritt steht dort, wo die
   Suche Neugier weckt, nicht erst mehrere Bildschirmhöhen tiefer */
.fn-hero-app {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--vk-s-3) var(--vk-s-5);
  margin-top: var(--vk-s-5); padding-top: var(--vk-s-4);
  border-top: 1px solid var(--vk-linie-weich);
}
.fn-hero-app__text { margin: 0; flex: 1 1 16em; color: var(--vk-text-2); font-size: .9375rem; line-height: 1.5; }
.fn .fn-hero-app .vk-stores { flex: 0 1 auto; margin: 0; flex-direction: row; flex-wrap: wrap; max-width: none; }

/* Nutzen-Raster: eine einzelne letzte Karte über die volle Breite liegt quer
   (Symbol links, Text rechts) statt als halbleerer Kasten */
@media (min-width: 960px) {
  .fn .vk-nutzen:not(.vk-nutzen--vier) > .vk-karte:last-child:nth-child(3n+1) {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 24px;
    align-content: start;
  }
  .fn .vk-nutzen:not(.vk-nutzen--vier) > .vk-karte:last-child:nth-child(3n+1) > .vk-karte__icon { grid-row: 1 / span 4; }
  .fn .vk-nutzen:not(.vk-nutzen--vier) > .vk-karte:last-child:nth-child(3n+1) > .vk-karte__problem { margin-top: 0; }
}

/* ─── Schritte (3 Stück, nummeriert) ────────────────────────────────────── */
.fn-schritte { counter-reset: fn-schritt; }
.fn-schritte .vk-karte { counter-increment: fn-schritt; }
.fn-schritte .vk-karte__icon::before {
  content: "0" counter(fn-schritt);
  font: 700 1rem/1 var(--vk-mono);
}

/* ─── Beweis: Beschriftung unter Screens auf schmalen Spalten ───────────── */
.fn .vk-beweis__screens figcaption { font-size: .8125rem; }
@media (min-width: 600px) and (max-width: 959px) {
  .fn .vk-beweis { grid-template-columns: 1fr; }
}

/* ─── Werkzeug-Rahmen (interaktive Demos bleiben unverändert) ───────────── */
.fn-werkzeug {
  border: 1px solid var(--vk-linie);
  border-radius: var(--vk-r-xl);
  background: linear-gradient(180deg, rgb(13 26 46 / .85), rgb(8 18 35 / .85));
  padding: var(--vk-s-5) var(--vk-s-4);
  min-width: 0;
}
@media (min-width: 600px) { .fn-werkzeug { padding: var(--vk-s-6); } }
.fn-werkzeug > .vk-kopf { margin-bottom: var(--vk-s-5); }

/* ─── Vergleich (compare) ───────────────────────────────────────────────── */
.fn-vergleich .compare-table-wrap { margin: 0; padding: 0; }
/* styles.css (Altbestand) begrenzt die Tabelle auf 920 px und zentriert sie;
   district-utility.css macht die Kopfzeile sticky (top: 4rem). In einem
   Scroll-Container schob das die Kopfzeile 64 px über die ersten Zeilen. */
.fn-vergleich .compare-table { font-size: .9375rem; max-width: none; margin: 0; border: 0; border-radius: 0; }
@media (min-width: 720px) {
  .fn-vergleich .compare-table-wrap { overflow: visible; }
  .fn-vergleich .compare-table { min-width: 0; overflow: visible; }
  .fn-vergleich .compare-table thead th { top: var(--vk-kopf-hoehe); }
  /* styles.css:6912 färbt die Kopfzeile halbdurchsichtig und schlägt das
     deckende #081923 aus district-utility.css. Sticky braucht deckenden Grund,
     sonst liegen die Spaltennamen beim Scrollen über den Zeilen. */
  .fn-vergleich .compare-table thead th { background: var(--vk-flaeche-hoch); z-index: 3; }
  .fn-vergleich .compare-table thead th.highlight-col {
    background: linear-gradient(rgb(0 179 255 / .1), rgb(0 179 255 / .1)), var(--vk-flaeche-hoch);
  }
  .fn-vergleich .compare-table .ct-feature { white-space: normal; width: auto; }
}
.fn-vergleich .compare-table thead th { color: var(--vk-text-2); }
.fn-vergleich .compare-table thead th.highlight-col { color: var(--vk-akzent-hell); }
.fn-vergleich .compare-table td { color: var(--vk-text-2); }
.fn-vergleich .compare-table .ct-cat { color: var(--vk-text-3); }
.fn-vergleich .ct-warn { color: var(--vk-text-3); }
.fn-vergleich .ct-half { color: #ffb45c; }
.fn-vergleich .ct-check { color: var(--vk-gruen); }
.fn-vergleich .compare-footnote { color: var(--vk-text-3); max-width: 46em; }

/* Handy: jede Zeile als Karte — Anirova oben hervorgehoben, darunter die drei
   anderen mit Namen. Keine 680-px-Tabelle, die man seitlich schieben muss. */
@media (max-width: 719px) {
  .fn-vergleich .compare-table-wrap { overflow: visible; }
  .fn-vergleich .compare-table,
  .fn-vergleich .compare-table tbody,
  .fn-vergleich .compare-table tr,
  .fn-vergleich .compare-table td { display: block; width: auto; min-width: 0; }
  .fn-vergleich .compare-table { min-width: 0; border-radius: 0; overflow: visible; }
  .fn-vergleich .compare-table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .fn-vergleich .compare-table tr {
    margin: 0 0 10px;
    border: 1px solid var(--vk-linie-weich);
    border-radius: var(--vk-r-m);
    background: rgb(13 26 38 / .62);
    overflow: hidden;
  }
  .fn-vergleich .compare-table tr:has(> .ct-cat) {
    margin: 26px 0 10px;
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
  }
  .fn-vergleich .compare-table td { border: 0; padding: 8px 16px; white-space: normal; }
  .fn-vergleich .compare-table .ct-cat { padding: 0 2px; background: none; font-size: .75rem; color: var(--vk-akzent-hell); }
  .fn-vergleich .compare-table .ct-feature { padding-top: 14px; font-size: 1.0625rem; white-space: normal; }
  .fn-vergleich .compare-table td[data-label] {
    display: grid;
    grid-template-columns: 7.5em minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
  }
  .fn-vergleich .compare-table td[data-label]::before {
    content: attr(data-label);
    font: 700 .75rem/1.4 var(--vk-mono);
    letter-spacing: .04em;
    color: var(--vk-text-3);
  }
  .fn-vergleich .compare-table td.highlight-col {
    margin: 4px 10px 6px;
    padding: 10px 12px;
    border-radius: var(--vk-r-s);
    border: 1px solid var(--vk-linie);
    background: rgb(0 179 255 / .08);
  }
  .fn-vergleich .compare-table td.highlight-col::before { color: var(--vk-akzent-hell); }
  .fn-vergleich .compare-table td:last-child { padding-bottom: 14px; }
  .fn-vergleich .compare-table tbody tr:hover td { background: none; }
  .fn-vergleich .compare-table tbody tr:hover td.highlight-col { background: rgb(0 179 255 / .08); }
}

/* Fazit: drei Karten mit Listen */
.fn .vk-karte ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--vk-text-2);
}
.fn .vk-karte ul li { display: flex; gap: 10px; }
.fn .vk-karte ul li::before { content: "→"; color: var(--vk-akzent-hell); flex: none; }
.fn .vk-karte ul strong { color: var(--vk-text); }
.fn .vk-karte--wir { border-color: var(--vk-linie); background: linear-gradient(180deg, rgb(0 60 100 / .45), rgb(10 20 38 / .9)); }

/* Abschluss: zweiter Weg als ruhiger Textlink */
.fn .vk-abschluss__zweit { margin: 0; font-size: var(--vk-fs-klein); color: var(--vk-text-3); }
.fn .vk-abschluss__zweit a { color: var(--vk-akzent-hell); font-weight: 700; }

/* Die gebauten Seiten (matching, compare) bekommen aus _includes/04-outro.html
   einen zweiten, veralteten Abschluss („Android im Play Store, Web-App …“,
   ohne iPhone). Die Seite hat ihren eigenen Abschluss mit beiden Stores. */
.fn ~ .outro { display: none; }

.fn-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ─── Bestandsblöcke im vk-Rahmen (community, features) ─────────────────── */
/* Profilsystem, Showcase, Einreichung und Matching-Demo behalten Logik, IDs
   und Innenleben. Kopf steht jetzt als .vk-kopf darüber; hier wird nur der
   Kasten aus district-board.css (eckig, Mono-Balken) an .vk-karte angeglichen. */
.fn .fn-kasten {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0 !important;
  border: 1px solid var(--vk-linie-weich);
  border-radius: var(--vk-r-l);
  background: linear-gradient(180deg, rgb(20 31 46 / .82), rgb(10 20 38 / .82));
  overflow: hidden;
}
.fn .fn-kasten::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(0 230 255 / .55), transparent);
  pointer-events: none;
}
.fn .vk-kopf + .fn-kasten { margin-top: var(--vk-s-5); }
.fn-kasten__kicker {
  display: block;
  font: 700 var(--vk-fs-kicker)/1.4 var(--vk-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vk-akzent-hell);
}
/* Profilsystem */
.fn .profile-system__tabs { background: rgb(5 13 31 / .55); border-color: var(--vk-linie-weich); }
.fn .profile-system__tabs button { min-height: 56px; }
.fn .profile-system__panels { background: radial-gradient(circle at 85% 20%, rgb(0 210 240 / .08), transparent 34%), transparent; }
.fn .profile-system__panels h3 { font-family: var(--vk-schrift); text-transform: none; letter-spacing: -.01em; }
.fn .profile-system__panels dl { border-color: var(--vk-linie-weich); border-radius: var(--vk-r-m); overflow: hidden; }
.fn .profile-system__panels dl div { border-color: var(--vk-linie-weich); }
.fn .profile-system__code { text-transform: uppercase; }
/* Showcase */
.fn .section-showcase .cl-empty { border-radius: var(--vk-r-m); border-color: var(--vk-linie-weich); }
/* Einreichung */
.fn .community-form-wrap { background: rgb(5 13 31 / .45); border-color: var(--vk-linie-weich); }
.fn .form-station-head { border-color: var(--vk-linie-weich); text-transform: uppercase; }
.fn .community-submit-station :is(input, textarea, select) { border-radius: var(--vk-r-s); min-height: 44px; }
.fn .community-submit-station #cf-submit { border-radius: 999px; }
.fn .community-submit-station .cf-foot { color: var(--vk-text-3); }
.fn .review-pipeline h3 { font-family: var(--vk-schrift); text-transform: none; }
.fn .review-pipeline li { border-color: var(--vk-linie-weich); }
.fn .review-rules { border-radius: 0 var(--vk-r-s) var(--vk-r-s) 0; }
/* Matching-Demo (features): Bildband oben bleibt, Rahmen wie .vk-karte */
.fn .section-ai-demo.fn-kasten { margin: 0; border: 1px solid var(--vk-linie-weich); background: linear-gradient(180deg, rgb(20 31 46 / .82), rgb(10 20 38 / .82)); }
.fn .section-ai-demo .ai-demo-h { font-family: var(--vk-schrift); text-transform: none; letter-spacing: -.01em; }
.fn .section-ai-demo .arena-step-head,
.fn .section-ai-demo .ai-result-head { border-color: var(--vk-linie-weich); }
.fn .section-ai-demo .arena-step-head > span { text-transform: uppercase; }
.fn .section-ai-demo .ai-anime-grid,
.fn .section-ai-demo .ai-matches { border-radius: var(--vk-r-m); overflow: hidden; }
.fn .section-ai-demo .ai-btn { border-radius: 999px; }
/* Profil-Reiter unter 820 px: waagerechte Leiste; 120 px je Reiter waren zu
   schmal, „Geschmacksmuster" lief in den nächsten Reiter */
@media (max-width: 820px) {
  .fn .profile-system__tabs {
    grid-template-columns: repeat(5, minmax(168px, 1fr));
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
  }
  .fn .profile-system__tabs button { scroll-snap-align: start; min-width: 0; }
  .fn .profile-system__tabs button small { white-space: nowrap; }
}
/* .section bekommt aus district-utility/-institutions einen 48-px-Akzentstrich
   als ::before; zusammen mit der min-height des alten Bildbands aus
   district-board.css wurde daraus ein 390 px hoher oranger Balken. */
.fn .fn-kasten.section::before { content: none; display: none; }
.fn .section-ai-demo .ai-btn { white-space: nowrap; }
/* Stationszeile der District-Shell (z. B. „MATCH-02 Matching Arena") direkt
   über dem Hero doppelt dessen Kicker (.fn-station). Nur auf Funktionsseiten
   ausblenden; die Shell selbst bleibt unverändert. */
[data-component="district-header"]:has(+ .fn) { display: none; }