/* Seite: Funktionen (/funktionen/) – Präfix fn-
   Nur auf /funktionen/ geladen: nur Klassen mit Präfix fn- (bzw. fn-Elternklasse vor Bausteinen aus style.css),
   keine globalen Selektoren. Mobile first, Breakpoints wie style.css (480/640/768/1024/1200). */

/* ---------- Seitenkopf: Geräte-Bild (ohne Kreis und Karten, Andrea Tissen, 2026-10-13) ---------- */

.fn-hero-media { position: relative; width: min(100%, 600px); margin-inline: auto; padding: 1.75rem 0 1.25rem; }
.fn-hero-media__img { width: 100%; }

/* ---------- Sprungnavigation (Chips; ab 768 px unter dem Header angeheftet) ---------- */

.fn-jump { position: relative; z-index: 20; margin-top: clamp(2rem, 5vw, 3rem); }
.fn-jump__bar {
  display: grid; gap: .75rem;
  padding: 1rem; border-radius: var(--radius);
  background: var(--tile); box-shadow: var(--shadow-s);
}
.fn-jump__label { color: var(--muted); font-size: .75rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.fn-jump__track { position: relative; min-width: 0; }
.fn-jump__list { display: flex; flex-wrap: wrap; gap: .5rem; }
.fn-jump__link {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 42px; padding: .45rem .9rem .45rem .7rem;
  border: 1px solid var(--line); border-radius: 99px;
  background: var(--bg); color: var(--ink);
  font-size: .875rem; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: border-color .25s, box-shadow .25s;
}
.fn-jump__link .icon { width: 15px; height: 15px; color: var(--primary); }
.fn-jump__link:hover { border-color: var(--primary); background: var(--white); }
.fn-jump__link:focus-visible { outline-offset: 1px; }
.fn-jump__link[aria-current="true"] { border-color: transparent; background: var(--gradient); color: var(--white); box-shadow: 0 8px 18px -10px rgba(0, 73, 148, .8); }
.fn-jump__link[aria-current="true"] .icon { color: var(--white); }
.fn-jump__arrow { display: none; }

/* ---------- Funktionsbereiche ---------- */

.section.fn-feature { padding-block: clamp(3.75rem, 8vw, 6.25rem); }
.fn-feature--tint { background: var(--tile-2); }
.fn-feature__grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; }
.fn-feature__copy { max-width: 38rem; }
.fn-feature__copy h2 { margin-top: .85rem; font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem); }
.fn-feature__copy > p.fn-feature__lead { margin-top: 1.15rem; color: var(--ink); font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); text-wrap-style: pretty; }
.fn-feature__copy .checklist { margin-top: 1.5rem; }
/* Nur text-wrap-style: die Kurzform text-wrap hebt das nowrap von span.nb auf */
.fn-feature__copy .checklist li, .fn-compare__table td { text-wrap-style: pretty; }
.fn-feature__icon {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  border-radius: 9px; background: var(--gradient); color: var(--white);
  box-shadow: 0 8px 16px -8px rgba(0, 73, 148, .75);
}
.fn-feature__icon .icon { width: 15px; height: 15px; }

/* Sicherheit: dunkler Grund (section--secure aus style.css) */
.fn-feature--secure .fn-feature__copy > p.fn-feature__lead { color: var(--white); }
/* Ohne Grafik, zentriert (Andrea Tissen, 2026-10-13): nur Text, Deutschlandflagge an der Subheadline wie auf der Startseite */
.fn-feature--text .fn-feature__grid { grid-template-columns: minmax(0, 1fr); }
.fn-feature--text .fn-feature__copy { max-width: 46rem; margin-inline: auto; text-align: center; }
.fn-feature--text .fn-feature__copy h2 { text-wrap: balance; }
.fn-feature--text .fn-feature__copy > p.fn-feature__lead { text-wrap-style: balance; }
.fn-feature--text .checklist { width: fit-content; max-width: 100%; margin-inline: auto; text-align: left; }

/* ---------- Bühne für Mockups und Bilder ---------- */

.fn-stage { position: relative; isolation: isolate; width: min(100%, 560px); margin-inline: auto; }
.fn-stage::before {
  content: ""; position: absolute; z-index: -1; inset: -6% 4%;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(38, 166, 154, .22), rgba(0, 73, 148, .10) 60%, transparent);
}

/* Fenster-Rahmen für alle UI-Mockups */
.fn-mock {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--white); box-shadow: var(--shadow-l);
  color: var(--text); font-size: .9375rem; line-height: 1.35;
}
.fn-mock__head { display: flex; align-items: center; gap: .75rem; min-height: 64px; padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
.fn-mock__head--gradient { border-bottom: 0; background: var(--gradient); color: var(--white); }
.fn-mock__meta { display: grid; min-width: 0; line-height: 1.3; }
.fn-mock__title { overflow: hidden; color: var(--ink); font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.fn-mock__sub { overflow: hidden; color: var(--muted); font-size: .8125rem; text-overflow: ellipsis; white-space: nowrap; }
.fn-mock__head--gradient .fn-mock__title { color: var(--white); }
.fn-mock__head--gradient .fn-mock__sub { color: rgba(255, 255, 255, .85); }
.fn-mock__avatar { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 10px; background: rgba(255, 255, 255, .18); }
.fn-mock__avatar .icon { width: 18px; height: 18px; }
.fn-badge {
  flex: none; margin-left: auto; padding: .3em .7em; border-radius: 99px;
  background: var(--tile-2); color: var(--primary);
  font-size: .6875rem; font-weight: 900; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase;
}
.fn-mock__head--gradient .fn-badge { background: var(--white); color: var(--primary); }

.fn-avatar {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: 50%; background: var(--tile-2); color: var(--primary);
  font-size: .6875rem; font-weight: 900; letter-spacing: .02em;
}
.fn-avatar--me { background: var(--accent-50); color: var(--accent-700); }
.fn-avatars { display: flex; flex: none; }
.fn-avatars .fn-avatar { box-shadow: 0 0 0 2px var(--white); }
.fn-avatars .fn-avatar + .fn-avatar { margin-left: -5px; }

.fn-chipmini {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .25em .6em; border-radius: 7px;
  background: var(--white); color: var(--muted);
  font-size: .75rem; font-weight: 700; line-height: 1.3; white-space: nowrap;
}
.fn-chipmini .icon { width: 11px; height: 11px; color: var(--primary); }
.fn-chipmini--accent { background: var(--accent-50); color: var(--accent-700); }
.fn-chipmini--accent .icon { color: var(--accent-700); }

/* 1 Digitale Akten: Regal mit Suche */
.fn-shelf__search {
  display: flex; align-items: center; gap: .6rem;
  margin: 1rem 1rem 0; padding: .6rem .85rem;
  border: 1.5px solid var(--primary); border-radius: 10px;
  box-shadow: 0 0 0 4px rgba(0, 73, 148, .1);
}
.fn-shelf__search > .icon { width: 16px; height: 16px; color: var(--primary); }
.fn-shelf__query { color: var(--ink); font-weight: 700; }
.fn-caret::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.18em; background: var(--accent); }
.fn-shelf__hits { margin-left: auto; color: var(--accent-700); font-size: .8125rem; font-weight: 900; white-space: nowrap; }
/* 6 Akten in 2 Reihen statt 12 (Andrea Tissen, 2026-10-13: Grafik wirkte überfüllt) */
.fn-shelf__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .85rem; padding: 1.6rem 1rem 1.25rem; }
.fn-shelf__grid li {
  --tab: var(--primary);
  position: relative; display: flex; align-items: center; gap: .55rem;
  min-height: 56px; padding: .6rem .85rem;
  border-radius: 3px 10px 10px 10px; background: var(--bg);
  color: var(--ink); font-size: .9375rem; font-weight: 700; line-height: 1.2;
}
.fn-shelf__grid li::before {
  content: ""; position: absolute; left: 0; top: -6px; width: 44%; height: 7px;
  border-radius: 6px 6px 0 0; background: #e2e8f3;
}
.fn-shelf__grid li .icon { width: 16px; height: 16px; color: var(--tab); }
.fn-shelf__grid li:nth-child(3n + 2) { --tab: var(--accent-700); }
.fn-shelf__grid li:nth-child(3n + 3) { --tab: var(--lavender); }
.fn-shelf__grid li.is-hit { --tab: var(--accent-700); background: var(--accent-50); box-shadow: inset 0 0 0 1.5px var(--accent); }
.fn-shelf__grid li.is-hit::before { background: var(--accent); }
.fn-shelf__grid li.is-new { background: transparent; box-shadow: inset 0 0 0 1.5px #b9c4dc; color: var(--muted); }
.fn-shelf__grid li.is-new::before { display: none; }
.fn-shelf__grid li.is-new .icon { color: var(--muted); }
/* Animation (js/funktionen.js): Suchfeld leer → „Sorgenfrei“ wird getippt → Trefferzahl und Treffer-Akten
   erscheinen nacheinander, die übrigen Akten treten zurück. Ohne JS/bei reduzierter Bewegung: Endzustand. */
.fn-shelf__hits, .fn-shelf__grid li { transition: opacity .3s, background-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease); }
.fn-shelf__grid li::before { transition: background-color .35s var(--ease); }
.fn-shelf.is-searching .fn-shelf__hits { opacity: 0; }
.fn-shelf.is-searching li.is-hit { --tab: var(--primary); background: var(--bg); box-shadow: none; }
.fn-shelf.is-searching li.is-hit::before { background: #e2e8f3; }
.fn-shelf.is-found li:not(.is-hit) { opacity: .55; }
.fn-shelf.is-found li.is-hit { transform: translateY(-3px); }
.fn-shelf.is-found li.is-hit:nth-child(2), .fn-shelf.is-found li.is-hit:nth-child(2)::before { transition-delay: .18s; }
.fn-shelf.is-found li.is-hit:nth-child(3), .fn-shelf.is-found li.is-hit:nth-child(3)::before { transition-delay: .36s; }

/* 2 Tagesplaner */
.fn-planner__list { display: grid; gap: .2rem; padding: .55rem; }
.fn-plan { display: grid; grid-template-columns: 2.6rem auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .5rem .55rem; border-radius: 10px; }
.fn-plan.is-now { background: var(--bg); box-shadow: inset 3px 0 0 var(--accent); }
.fn-plan__time { color: var(--muted); font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.fn-plan__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--k-bg); color: var(--k-fg); }
.fn-plan__icon .icon { width: 15px; height: 15px; }
.fn-plan__text { display: grid; min-width: 0; color: var(--ink); font-weight: 700; }
.fn-plan__type { color: var(--muted); font-size: .6875rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.fn-prio { padding: .25em .6em; border-radius: 99px; font-size: .6875rem; font-weight: 900; letter-spacing: .03em; white-space: nowrap; }
.fn-prio--high { background: #fde8e7; color: #a8271c; }

/* 3 Kontaktverlauf: nur Einträge, ohne Herkunfts-Etiketten (Andrea Tissen, 2026-10-13) */
.fn-verlauf .entry__text { justify-items: start; }

/* Gegenüberstellung: automatisch oder selbst verpuzzelt.
   Unter 768 px Zeilen als Kacheln; die Tabellen-Rollen stehen deshalb ausdrücklich im HTML. */
.fn-compare { margin-top: clamp(5rem, 11vw, 7.5rem); } /* mehr Luft zum Verpuzzeln-Abschnitt darüber (Andrea Tissen, 2026-10-14) */
/* Einleitung zur Tabelle zentriert (Andrea Tissen, 2026-10-13) */
.fn-compare__intro { max-width: 46rem; margin: 0 auto clamp(1.5rem, 3vw, 2rem); text-align: center; }
.fn-compare__intro::before { content: ""; display: block; width: 64px; height: 6px; margin: 0 auto 1.1rem; border-radius: 99px; background: var(--gradient); }
.fn-compare__title { font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2rem); text-wrap: balance; }
.fn-compare__intro p { margin-top: .8rem; color: var(--muted); text-wrap-style: balance; }

.fn-compare__table { display: block; width: 100%; border-collapse: separate; border-spacing: 0; }
.fn-compare__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fn-compare__table tr {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .7rem 1rem;
  padding: 1rem 1.1rem 1.1rem; border-radius: var(--radius); background: var(--tile); box-shadow: var(--shadow-s);
}
.fn-compare__table tbody { display: grid; gap: .75rem; }
.fn-compare__table th, .fn-compare__table td { display: block; padding: 0; font-weight: inherit; text-align: left; }
.fn-compare__table tbody td:last-child { grid-column: 1 / -1; color: var(--muted); font-size: .9375rem; line-height: 1.55; }
.fn-compare__name { display: inline-flex; align-items: center; gap: .75rem; color: var(--ink); font-weight: 900; text-decoration: none; }
a.fn-compare__name:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.fn-compare__icon { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 10px; background: var(--k-bg); color: var(--k-fg); }
.fn-compare__icon .icon { width: 16px; height: 16px; }
.fn-pill { display: inline-flex; align-items: center; gap: .4em; padding: .35em .85em; border-radius: 99px; font-size: .8125rem; font-weight: 900; white-space: nowrap; }
.fn-pill .icon { width: 12px; height: 12px; }
.fn-pill--auto { background: var(--accent-700); color: var(--white); }
.fn-pill--self { background: var(--tile-2); color: var(--primary); }

/* 4 Anrufe & E-Mails */
.fn-inbox__list { display: grid; gap: .8rem; padding: 1rem; background: var(--bg); }
.fn-inbox__item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem .85rem;
  padding: .9rem; border: 1px solid var(--line); border-radius: 14px; background: var(--white); box-shadow: var(--shadow-s);
}
.fn-inbox__icon { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--k-bg); color: var(--k-fg); }
.fn-inbox__icon .icon { width: 18px; height: 18px; }
.fn-inbox__text { display: grid; min-width: 0; color: var(--ink); font-weight: 900; }
.fn-inbox__type { color: var(--muted); font-size: .6875rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.fn-inbox__time { align-self: start; color: var(--muted); font-size: .75rem; white-space: nowrap; }
.fn-inbox__route {
  grid-column: 1 / -1; display: flex; align-items: center; gap: .5rem;
  padding: .5rem .7rem; border-radius: 9px; background: var(--accent-50);
  color: var(--accent-700); font-size: .8125rem; font-weight: 700; line-height: 1.35;
}
.fn-inbox__route .icon { width: 13px; height: 13px; }
.fn-ring::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* 5 Aufgaben mit Ampel */
.fn-tasks__list { display: grid; gap: .5rem; padding: .85rem; }
.fn-task {
  --amp: #df4f48;
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem;
  padding: .75rem .8rem .75rem 1.1rem; border-radius: 12px; background: var(--bg);
}
.fn-task::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--amp); }
.fn-task[data-status="arbeit"] { --amp: #eea500; }
/* Erledigt: grüner Balken und Haken, Titel ohne Durchstreichen (Andrea Tissen, 2026-10-13) */
.fn-task[data-status="erledigt"] { --amp: var(--accent); }
.fn-task__check { display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid #b9c4dc; border-radius: 6px; background: var(--white); color: var(--white); }
.fn-task__check .icon { width: 11px; height: 11px; }
.fn-task[data-status="erledigt"] .fn-task__check { border-color: var(--accent); background: var(--accent); }
.fn-task__body { display: grid; min-width: 0; }
.fn-task__title { color: var(--ink); font-weight: 900; }
.fn-task__meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.fn-tasks__legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; padding: .8rem 1rem 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .75rem; font-weight: 700; }
.fn-tasks__legend span { --amp: #df4f48; display: inline-flex; align-items: center; gap: .45em; }
.fn-tasks__legend span::before { content: ""; width: .7em; height: .7em; border-radius: 50%; background: var(--amp); }
.fn-tasks__legend [data-status="arbeit"] { --amp: #eea500; }
.fn-tasks__legend [data-status="erledigt"] { --amp: var(--accent); }

/* 6 Dokumente */
.fn-doc__file { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--tile-2); color: var(--primary); }
.fn-doc__file .icon { width: 18px; height: 18px; }
.fn-doc__body { display: grid; gap: 1.1rem; padding: 1.1rem 1.1rem 1.25rem; }
.fn-doc__paper {
  display: none; align-content: start; gap: 7px; aspect-ratio: 3 / 4;
  padding: .9rem .75rem; border: 1px solid var(--line); border-radius: 6px; background: var(--white);
  box-shadow: 5px 5px 0 -1px var(--white), 5px 5px 0 0 var(--line), 10px 10px 0 -1px var(--white), 10px 10px 0 0 var(--line), 0 18px 30px -18px rgba(0, 38, 80, .55);
}
.fn-doc__paper span { display: block; height: 5px; border-radius: 3px; background: var(--line); }
.fn-doc__paper span:nth-child(1) { width: 62%; height: 8px; background: var(--primary); opacity: .85; }
.fn-doc__paper span:nth-child(2) { width: 38%; margin-bottom: 6px; }
.fn-doc__paper span:nth-child(5) { width: 78%; }
.fn-doc__paper span:nth-child(7) { width: 46%; margin-top: 10px; background: var(--accent); opacity: .7; }
.fn-doc__facts { display: grid; gap: .85rem; }
.fn-doc__label { display: block; color: var(--muted); font-size: .6875rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.fn-doc__value { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.fn-doc .fn-chipmini { background: var(--bg); }
.fn-doc .fn-chipmini--accent { background: var(--accent-50); }

/* 7 Kalender */
.fn-avatars + .fn-badge { margin-left: 0; }
.fn-cal .fn-avatars { margin-left: auto; }
.fn-cal__grid {
  --row: 2.5rem;
  position: relative; display: grid;
  grid-template-columns: 1.5rem repeat(5, minmax(0, 1fr));
  grid-template-rows: 1.5rem repeat(4, var(--row));
  gap: 4px; padding: .9rem .9rem .7rem;
}
.fn-cal__grid::before {
  content: ""; position: absolute; z-index: 0;
  left: calc(.9rem + 1.5rem + 4px); right: .9rem; top: calc(.9rem + 1.5rem + 2px); height: calc(4 * var(--row) + 12px);
  background: repeating-linear-gradient(180deg, var(--line) 0 1px, transparent 1px calc(var(--row) + 4px));
}
.fn-cal__day { grid-column: var(--c); grid-row: 1; align-self: center; color: var(--muted); font-size: .6875rem; font-weight: 900; letter-spacing: .1em; text-align: center; text-transform: uppercase; }
.fn-cal__day.is-today { color: var(--primary); }
.fn-cal__day.is-today::after { content: ""; display: block; width: 5px; height: 5px; margin: 2px auto 0; border-radius: 50%; background: var(--accent); }
.fn-cal__hour { grid-column: 1; grid-row: var(--r); color: var(--muted); font-size: .6875rem; font-variant-numeric: tabular-nums; line-height: 1; }
.fn-cal__event {
  position: relative; z-index: 1; overflow: hidden;
  grid-column: var(--c); grid-row: var(--r) / span var(--s, 1);
  display: flex; align-items: center; justify-content: center;
  padding: .3rem; border-radius: 7px; background: var(--tile-2); box-shadow: inset 3px 0 0 var(--primary);
  color: var(--primary); font-size: 0; font-weight: 900; line-height: 1.2;
}
.fn-cal__event::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .6; }
.fn-cal__event .icon { display: none; }
.fn-cal__event--accent { background: var(--accent-50); box-shadow: inset 3px 0 0 var(--accent); color: var(--accent-700); }
.fn-cal__event--key { background: var(--gradient); box-shadow: 0 10px 20px -10px rgba(0, 73, 148, .85); color: var(--white); }
.fn-cal__event--key::before { display: none; }
.fn-cal__event--key .icon { display: block; width: 12px; height: 12px; }
.fn-cal__detail {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .55rem .8rem;
  margin: .25rem .9rem .9rem; padding: .85rem .9rem; border-radius: 12px; background: var(--bg);
}
.fn-cal__detail-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--gradient); color: var(--white); }
.fn-cal__detail-icon .icon { width: 16px; height: 16px; }
.fn-cal__detail-text { display: grid; gap: .15rem; min-width: 0; }
.fn-cal__detail-title { color: var(--ink); font-weight: 900; }
.fn-cal__detail-sub { color: var(--muted); font-size: .75rem; line-height: 1.4; }
.fn-cal__detail-sub .icon { width: 11px; height: 11px; margin-right: .3em; vertical-align: -.1em; color: var(--accent-700); }
.fn-cal__detail-link { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: .4rem; justify-self: start; color: var(--primary); font-size: .8125rem; font-weight: 900; }
.fn-cal__detail-link .icon { width: 11px; height: 11px; }

/* 8 Chat: eine Nachricht an mehrere Kollegen (kein Gruppenchat, Andrea Tissen, 2026-10-13) */
.fn-chat__body { display: grid; gap: .75rem; padding: 1rem; background: var(--bg); }
.fn-chat__to {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .5rem;
  padding: .6rem .75rem; border-radius: 12px; background: var(--white); box-shadow: var(--shadow-s);
}
.fn-chat__label { margin-right: .15rem; color: var(--muted); font-size: .6875rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.fn-chat__person { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .7rem .2rem .2rem; border-radius: 99px; background: var(--tile-2); color: var(--ink); font-size: .875rem; font-weight: 700; }
.fn-chat__person .fn-avatar { width: 26px; height: 26px; background: var(--white); }
.fn-chat__puzzle {
  justify-self: start; display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .75rem; border-radius: 99px; background: var(--white); box-shadow: var(--shadow-s);
  color: var(--accent-700); font-size: .75rem; font-weight: 900;
}
.fn-chat__puzzle .icon { width: 12px; height: 12px; flex: none; }
.fn-msg { display: flex; align-items: flex-end; gap: .5rem; max-width: 90%; }
.fn-msg--me { justify-self: end; }
.fn-msg__bubble { padding: .6rem .85rem; border-radius: 14px 14px 14px 4px; background: var(--white); box-shadow: var(--shadow-s); color: var(--ink); font-size: .875rem; line-height: 1.4; }
.fn-msg--me .fn-msg__bubble { border-radius: 14px 14px 4px 14px; background: var(--tile-2); color: var(--primary); } /* hellblau mit blauer Schrift (Andrea Tissen, 2026-10-14) */
.fn-chat__foot { padding: .85rem 1rem 1rem; }
.fn-chat__safe { display: inline-flex; align-items: center; gap: .45rem; color: var(--primary); font-size: .75rem; font-weight: 900; }
.fn-chat__safe .icon { width: 12px; height: 12px; }

/* 9 Schnittstellen: Schema mit infra-struktur in der Mitte */
.fn-hub {
  --gap: 1.5rem;
  display: grid; gap: var(--gap);
  padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-l);
  background: var(--white); box-shadow: var(--shadow-l);
}
.fn-hub__core {
  position: relative; display: grid; place-items: center; align-content: center; gap: .55rem;
  padding: 1.1rem; border-radius: 16px; background: var(--gradient-diag); color: var(--white); text-align: center;
  box-shadow: 0 16px 32px -14px rgba(0, 73, 148, .8), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.fn-hub__core .logo { width: 100%; max-width: 170px; height: auto; }
.fn-hub__core-label { color: rgba(255, 255, 255, .85); font-size: .6875rem; font-weight: 900; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; text-wrap: balance; }
.fn-hub__core::after {
  content: ""; position: absolute; top: 100%; left: 50%; width: 2px; height: var(--gap); margin-left: -1px;
  background: repeating-linear-gradient(180deg, var(--accent) 0 6px, transparent 6px 12px); background-size: 2px 12px;
}
.fn-hub__nodes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.fn-hub__nodes li {
  position: relative; display: grid; justify-items: center; align-content: center; gap: .45rem;
  min-height: 92px; padding: .8rem .5rem; border-radius: 14px; background: var(--bg);
  color: var(--ink); font-size: .875rem; font-weight: 700; line-height: 1.2; text-align: center; hyphens: manual;
}
.fn-hub__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--white); box-shadow: var(--shadow-s); color: var(--primary); }
.fn-hub__icon .icon { width: 16px; height: 16px; }

/* 10 App: Einstellungen als kleine Karte zum echten Produktbild */
.fn-app__phones { width: min(100%, 460px); margin-inline: auto; }
.fn-settings {
  position: relative; z-index: 2; width: min(100%, 290px); margin: -2.25rem auto 0;
  padding: .85rem 1rem .6rem; border-radius: 16px; background: rgba(255, 255, 255, .97); box-shadow: var(--shadow-l);
  font-size: .8125rem; line-height: 1.3;
}
.fn-settings__head { display: flex; align-items: center; gap: .5rem; margin-bottom: .45rem; }
.fn-settings__title { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink); font-weight: 900; }
.fn-settings__title .icon { width: 14px; height: 14px; color: var(--primary); }
.fn-settings__list li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem 0; border-top: 1px solid var(--line); color: var(--ink); font-weight: 700; }
.fn-switch { position: relative; width: 34px; height: 20px; flex: none; border-radius: 99px; background: #cfd6e4; }
.fn-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.fn-switch.is-on { background: var(--accent); }
.fn-switch.is-on::after { left: 16px; }
.fn-seg { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--bg); }
.fn-seg span { padding: .15rem .55rem; border-radius: 6px; color: var(--muted); font-size: .75rem; }
.fn-seg .is-on { background: var(--white); box-shadow: var(--shadow-s); color: var(--primary); }

/* 12 Service: Teamfoto mit Bewertung (people__* aus style.css) */
.fn-team { width: min(100%, 560px); margin-inline: auto; }

/* ---------- Feature-Zone ---------- */

.section.fn-extend { padding-block: clamp(3.75rem, 8vw, 6.25rem); }
.fn-extend__card {
  position: relative; overflow: hidden; display: grid; gap: 1.5rem;
  padding: clamp(1.5rem, 4vw, 2.75rem); border-radius: var(--radius-l);
  background: var(--tile); box-shadow: var(--shadow);
}
.fn-extend__card::after {
  content: ""; position: absolute; z-index: 0; right: 0; bottom: 0; width: 60%; height: 100%;
  background: url("../assets/img/deco-netz.webp") right bottom / contain no-repeat; opacity: .12; pointer-events: none;
  /* nach links transparent auslaufend wie die Grafik im Seitenkopf */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
}
.fn-extend__card > * { position: relative; z-index: 1; }
.fn-extend__art {
  position: relative; display: grid; place-items: center; width: 88px; height: 88px;
  border-radius: 22px; background: var(--gradient-diag); box-shadow: 0 16px 32px -14px rgba(0, 73, 148, .8);
}
.fn-extend__piece { width: 44px; height: 44px; fill: var(--white); }
.fn-extend__plus {
  position: absolute; top: -10px; right: -10px; display: grid; place-items: center; width: 34px; height: 34px;
  border: 3px solid var(--tile); border-radius: 50%; background: var(--accent); color: var(--white);
}
.fn-extend__plus .icon { width: 13px; height: 13px; }
.fn-extend__copy h2 { margin-top: .75rem; font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem); }
.fn-extend__copy > p:not(.eyebrow) { max-width: 44rem; margin-top: 1rem; color: var(--muted); }
.fn-extend__copy > p.fn-extend__more { margin-top: 1.5rem; }

/* ---------- Bewegung (nur ohne reduzierte Bewegung; läuft nur im Bild, js/funktionen.js, und endet nach wenigen Durchläufen) ---------- */

@keyframes fn-ring { 0% { box-shadow: 0 0 0 0 rgba(0, 73, 148, .38); } 70%, 100% { box-shadow: 0 0 0 12px rgba(0, 73, 148, 0); } }
/* Datenfluss zu infra-struktur: Striche laufen von jedem Bereich zur Mitte (Andrea Tissen, 2026-10-13) */
@keyframes fn-dash-left { to { background-position: -12px 0; } }
@keyframes fn-dash-up { to { background-position: 0 -12px; } }
@keyframes fn-send { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  .fn-caret::after { animation: caret 1s steps(1) 8 paused; }
  .fn-ring::after { animation: fn-ring 1.8s var(--ease) 5 paused; }
  /* Chat: Nachricht geht raus (einmal, sobald im Bild; ohne JS sofort sichtbar) */
  .js .fn-chat .fn-msg--me { animation: fn-send .5s var(--ease) .3s both paused; }
  .fn-hub__core::after { animation: fn-dash-up .9s linear 12 paused; }
  .fn-hub__nodes li::after { animation: dash-x .9s linear 12 paused; }
  .fn-hub__nodes li:nth-child(n + 4)::after { animation-name: fn-dash-left; }
  .is-inview .fn-caret::after,
  .is-inview .fn-ring::after,
  .js .is-inview .fn-chat .fn-msg--me,
  .is-inview .fn-hub__core::after,
  .is-inview .fn-hub__nodes li::after { animation-play-state: running; }
}

/* ---------- Breakpoints ---------- */

@media (max-width: 479px) {
  /* Wie die Abschnitts-Überschriften (fn-feature h2): „Welche Funktionen“ passt sonst nicht in eine Zeile */
  .final-cta h2 { font-size: 1.75rem; }
}
@media (min-width: 480px) {
  .fn-shelf__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fn-doc__body { grid-template-columns: 104px minmax(0, 1fr); align-items: start; }
  .fn-doc__paper { display: grid; }
  .fn-cal__event { justify-content: flex-start; gap: .25rem; padding: .3rem .35rem .3rem .5rem; font-size: .6875rem; hyphens: manual; overflow-wrap: anywhere; }
  .fn-cal__event { align-items: flex-start; }
  .fn-cal__event::before { display: none; }
  .fn-cal__event--key .icon { display: none; }
  .fn-cal__detail { grid-template-columns: auto minmax(0, 1fr) auto; }
  .fn-cal__detail-link { grid-column: auto; }
  .fn-hub {
    grid-template-columns: minmax(0, 1fr) minmax(8rem, 9.5rem) minmax(0, 1fr);
    grid-template-rows: repeat(3, auto); align-items: center; column-gap: var(--gap); row-gap: .8rem;
  }
  .fn-hub__core { grid-column: 2; grid-row: 1 / span 3; align-self: stretch; padding: 1rem .75rem; }
  .fn-hub__core::after { display: none; }
  .fn-hub__nodes { display: contents; }
  .fn-hub__nodes li { grid-column: 1; }
  .fn-hub__nodes li:nth-child(n + 4) { grid-column: 3; }
  .fn-hub__nodes li:nth-child(1), .fn-hub__nodes li:nth-child(4) { grid-row: 1; }
  .fn-hub__nodes li:nth-child(2), .fn-hub__nodes li:nth-child(5) { grid-row: 2; }
  .fn-hub__nodes li:nth-child(3), .fn-hub__nodes li:nth-child(6) { grid-row: 3; }
  .fn-hub__nodes li::after {
    content: ""; position: absolute; top: 50%; left: 100%; width: var(--gap); height: 2px; margin-top: -1px;
    background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 12px); background-size: 12px 2px;
  }
  .fn-hub__nodes li:nth-child(n + 4)::after { right: 100%; left: auto; }
}
@media (min-width: 640px) {
  .fn-settings { position: absolute; right: 0; bottom: 5%; width: 270px; margin: 0; }
  .fn-stage--app { padding-bottom: 1rem; }
}
@media (min-width: 768px) {
  .fn-jump { position: sticky; top: calc(var(--header-h) + var(--header-gap) + .5rem); }
  .fn-jump__bar {
    grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1rem;
    padding: .4rem .4rem .4rem 1.15rem; border-radius: 14px;
    transition: box-shadow .3s;
  }
  .fn-jump.is-stuck .fn-jump__bar { box-shadow: var(--shadow-l); }
  .fn-jump__list {
    flex-wrap: nowrap; gap: .35rem; padding: 5px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 5px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent 100%);
  }
  .fn-jump__list::-webkit-scrollbar { display: none; }
  .fn-jump__list li { flex: none; scroll-snap-align: start; }
  .fn-jump__link { min-height: 40px; padding: .4rem .85rem .4rem .7rem; font-size: .875rem; }
  .fn-jump__arrow {
    position: absolute; top: 50%; z-index: 1; display: grid; place-items: center;
    width: 34px; height: 34px; margin-top: -17px; padding: 0;
    border: 1px solid var(--line); border-radius: 50%; background: var(--white); box-shadow: var(--shadow-s);
    color: var(--primary); cursor: pointer; transition: border-color .2s;
  }
  .fn-jump__arrow:hover { border-color: var(--primary); }
  .fn-jump__arrow .icon { width: 12px; height: 12px; }
  .fn-jump__arrow--prev { left: 0; }
  .fn-jump__arrow--next { right: 0; }
  /* Sprungziel und fokussierte Elemente nicht unter der angehefteten Leiste verstecken */
  .fn-compare { scroll-margin-top: 4.5rem; }
  .fn-body :is(a[href], button, input, summary, [tabindex]):not(.fn-jump *) { scroll-margin-top: 4.5rem; }
  .fn-compare__wrap { overflow: hidden; border-radius: var(--radius-l); background: var(--tile); box-shadow: var(--shadow); }
  .fn-compare__table { display: table; }
  .fn-compare__table thead { position: static; display: table-header-group; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .fn-compare__table tbody { display: table-row-group; }
  .fn-compare__table tr { display: table-row; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .fn-compare__table th, .fn-compare__table td { display: table-cell; padding: 1.05rem 1.5rem; border-top: 1px solid var(--line); vertical-align: middle; }
  /* Kopfzeile in Primärblau mit weißer Schrift (Andrea Tissen, 2026-10-13); Zeile mitfärben, sonst bleiben feine Fugen zwischen den Zellen */
  .fn-compare__table thead tr { background: var(--primary); }
  .fn-compare__table thead th { padding-block: .85rem; border-top: 0; background: var(--primary); color: var(--white); font-size: .75rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; text-wrap-style: balance; }
  .fn-compare__table thead th:nth-child(1) { width: 26%; }
  .fn-compare__table thead th:nth-child(2) { width: 22%; }
  .fn-compare__table tbody tr:first-child > * { background: rgba(230, 245, 243, .6); }
  .fn-compare__table tbody td:last-child { font-size: 1rem; }
  .fn-extend__card { grid-template-columns: auto minmax(0, 1fr); gap: 2.25rem; align-items: start; }
}
@media (min-width: 1024px) {
  .fn-feature__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 5.5rem); }
  .fn-feature--flip .fn-feature__visual { order: -1; }
  .fn-hero-media { padding-top: 2.25rem; }
}
@media (min-width: 1200px) {
  /* Desktop: alle zwölf Bereiche ohne Scrollen in der Leiste (ohne Icons und Beschriftung) */
  .fn-jump__bar { grid-template-columns: minmax(0, 1fr); padding: .4rem; }
  .fn-jump__label { display: none; }
  .fn-jump__list { justify-content: space-between; gap: .25rem; }
  .fn-jump__link { padding: .4rem .7rem; font-size: .8125rem; }
  .fn-jump__link .icon { display: none; }
  .fn-extend__card { gap: 2.75rem; }
}