/* Die Funktionsseiten von honeypod.io: eine Vorlage aus neun Bausteinen
   (Leinwand „Honeypod Website Stufe 3 - Seiten“, Claude Design) im Takt der
   Stufe 4. Farben, Leiter und Knöpfe kommen aus seite.css.

   B1 Kopf · B2 Sprungleiste · B3 Bühne · B4 Zeile · B5 Paar · B6 Beweis ·
   B7 Außerdem · B8 Fragen aus der Beta · B9 Weiter

   Jede Seite setzt an main ihre Datenfarbe als --rgb, etwa „222, 147, 102“
   für die Ausgaben. Daraus kommt der Schein hinter jedem Bild (H2).

   Echte Unschärfe tragen nur der Kopf, die Sprungleiste und die Karte über
   der Bühne. Die Rahmen der Bilder sind ohne Weichzeichner gebaut: Jede
   Unschärfe kostet auf schwacher Grafik bei jedem Rahmen, siehe
   scripts/website-gpu-messen.mjs. */

/* Unter dem schwebenden Kopf steht die Sprungleiste. Ein Sprung an eine
   Stelle lässt deshalb Luft für beide. */
:root:has(.f-sprung) { scroll-padding-top: 156px; }
@media (prefers-reduced-motion: no-preference) {
  :root:has(.f-sprung) { scroll-behavior: smooth; }
}

.funktion { --rgb: 234, 180, 74; }

/* ── Bilder der App in ihrem Rahmen (H3) ─────────────────── */
/* Ein Bild steht auf seinem Schein. Ein ganzes Fenster trägt die Ampel von
   macOS, ein Dialog oder Ausschnitt nicht. */
.f-bild { position: relative; margin: 0; }
.f-bild-schein {
  position: absolute; inset: -18% -12%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(var(--rgb), var(--schein-stark)) 0%, rgba(var(--rgb), var(--schein-mitte)) 45%, transparent 78%);
}
.f-rahmen {
  position: relative; z-index: 1;
  padding: 8px; border-radius: 32px;
  background: var(--rahmen-bg); box-shadow: inset 0 0 0 1px var(--rahmen-kante), var(--rahmen-schatten);
}
.f-rahmen-innen {
  position: relative; overflow: hidden; border-radius: 24px; background: var(--rahmen-innen);
  box-shadow: 0 0 0 1px var(--kante);
  container-type: inline-size;
}
/* Die Lichtkante: oben links fängt sie Licht, unten rechts kommt sie leise wieder. */
.f-rahmen-innen::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.30), inset -1px -1px 0 rgba(255, 255, 255, 0.10);
}
:root[data-thema="hell"] .f-rahmen-innen::after { box-shadow: none; }
.f-rahmen-innen img { display: block; width: 100%; height: auto; }
.f-ampel { position: absolute; z-index: 2; left: calc(20 / 1440 * 100cqw); top: calc(20 / 1440 * 100cqw); display: flex; gap: calc(8 / 1440 * 100cqw); }
.f-ampel i { width: max(5px, calc(12 / 1440 * 100cqw)); height: max(5px, calc(12 / 1440 * 100cqw)); border-radius: 50%; }
.f-ampel i:nth-child(1) { background: #ff5f57; }
.f-ampel i:nth-child(2) { background: #febc2e; }
.f-ampel i:nth-child(3) { background: #28c840; }
.f-bild figcaption { margin-top: 14px; font-size: 13px; color: var(--text-3); text-align: center; }

/* ── B1 Kopf ─────────────────────────────────────────────── */
.f-kopf { position: relative; padding-top: clamp(124px, 107.66px + 4.19vw, 168px); padding-bottom: clamp(56px, 44.11px + 3.048vw, 88px); overflow-x: clip; }
.f-kopf-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 20.11px + 3.048vw, 64px); align-items: center; }
.f-kopf-text { display: flex; flex-direction: column; gap: 18px; }
.f-kopf .kicker a { color: var(--text-3); }
.f-kopf .kicker a:hover { color: var(--text); }
.f-kopf .leit { max-width: 560px; }
.f-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.f-knoepfe .knopf { height: 46px; padding: 0 22px; }
@media (max-width: 999px) {
  .f-kopf-raster { grid-template-columns: minmax(0, 1fr); }
}

/* ── B2 Sprungleiste ─────────────────────────────────────── */
/* Klebt unter dem Kopf, aus demselben Glas. Jede Funktion als Marke, ein
   Klick springt an ihre Stelle. Hierher führt jeder Eintrag aus „Funktionen“. */
.f-sprung { position: sticky; top: 88px; z-index: 40; margin-top: -8px; pointer-events: none; }
.f-sprung .breite { display: flex; justify-content: center; }
.f-sprung-spur {
  pointer-events: auto;
  display: flex; gap: 4px; padding: 5px; max-width: 100%;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  border-radius: 999px; background: var(--kopf);
  -webkit-backdrop-filter: blur(40px) saturate(1.6); backdrop-filter: blur(40px) saturate(1.6);
  box-shadow: inset 0 0 0 1px var(--linie);
}
.f-sprung-spur::-webkit-scrollbar { display: none; }
.f-sprung-spur a {
  flex: none; display: flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px;
  font-size: 14px; color: var(--text-2); white-space: nowrap;
  transition: color 200ms var(--kurve), background-color 200ms var(--kurve), box-shadow 200ms var(--kurve);
}
.f-sprung-spur a:hover { color: var(--text); }
.f-sprung-spur a[aria-current="true"] { color: var(--text); background: var(--schalter-an); box-shadow: var(--schalter-schatten); }
@media (max-width: 640px) { .f-sprung { top: 74px; } :root:has(.f-sprung) { scroll-padding-top: 136px; } }

/* ── Abschnitte ──────────────────────────────────────────── */
/* Jeder Abschnitt beschneidet seine Scheine selbst, als Rechteck. */
.f-abschnitt { position: relative; padding-block: calc(var(--abstand) * 0.7); overflow-x: clip; }
.f-titel { display: flex; flex-direction: column; gap: 12px; }
.f-titel .kicker { display: flex; align-items: center; gap: 10px; }
.f-titel p:not(.kicker) { font-size: 17px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; max-width: 520px; }
.f-titel p b { color: var(--text); font-weight: 500; }
/* Was erst mit der nächsten Fassung kommt, sagt es dazu. */
.f-ab {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--glas); box-shadow: inset 0 0 0 1px var(--glas-kante);
}
/* Ein Beweis aus der App, als Pille unter dem Text. */
.f-pille {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 6px;
  height: 30px; padding: 0 13px 0 11px; border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--text);
  background: rgba(var(--rgb), 0.12); box-shadow: inset 0 0 0 1px rgba(var(--rgb), 0.32);
}
.f-pille::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--rgb)); }

/* ── B3 Bühne ────────────────────────────────────────────── */
/* Die stärkste Besonderheit der Seite: das Bild groß und rechts vom Rand
   angeschnitten, der Text auf einer Karte aus Glas davor. Höchstens einmal
   je Seite. */
.f-buehne { overflow-x: clip; }
.f-buehne-flaeche { position: relative; }
.f-buehne .f-bild { margin-right: calc(50% - 50vw); }
.f-buehne .f-rahmen { border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: 0; }
.f-buehne .f-rahmen-innen { border-top-right-radius: 0; border-bottom-right-radius: 0; height: clamp(320px, 216px + 26.67vw, 600px); }
.f-buehne .f-rahmen-innen img { position: absolute; left: 0; top: 0; width: max(100%, 1100px); height: auto; max-width: none; }
.f-buehne-karte {
  position: absolute; z-index: 3; left: 32px; bottom: 32px; width: min(440px, calc(100% - 64px));
  display: flex; flex-direction: column; gap: 12px; padding: 26px 28px 28px;
  border-radius: 24px; background: var(--reiter);
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: inset 0 0 0 1px var(--glas-kante), var(--fach-schatten);
}
.f-buehne-karte p:not(.kicker) { font-size: 16px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
@media (max-width: 760px) {
  .f-buehne-karte { position: relative; left: auto; bottom: auto; width: auto; margin-top: -40px; margin-inline: 12px; }
}

/* ── B4 Zeile ────────────────────────────────────────────── */
.f-zeile .breite { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 14.17px + 4.571vw, 80px); align-items: center; }
.f-zeile.umgekehrt .f-titel { order: 2; }
.f-zeile.umgekehrt .f-bild { order: 1; }
@media (max-width: 899px) {
  .f-zeile .breite { grid-template-columns: minmax(0, 1fr); }
  .f-zeile.umgekehrt .f-titel, .f-zeile.umgekehrt .f-bild { order: 0; }
}

/* ── B5 Paar ─────────────────────────────────────────────── */
.f-paar .breite { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.f-paar-karte {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 24px; background: var(--flaeche); box-shadow: 0 0 0 1px var(--linie), var(--fach-schatten);
}
.f-paar-bild {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 600 / 300; padding: 22px; overflow: hidden;
  background: radial-gradient(ellipse 70% 80% at 50% 45%, rgba(var(--rgb), var(--schein-mitte)), transparent 75%), var(--grund);
}
/* Das Bild ist so groß wie das, was man sieht. Mit 100 % und object-fit
   rundete border-radius den Kasten um das Bild, und das Bild darin stand mit
   eckigen Kanten da (26.10.2026). */
.f-paar-bild img { width: auto; height: auto; max-width: 100%; max-height: 100%; border-radius: 12px; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.35)); }
:root[data-thema="hell"] .f-paar-bild img { filter: drop-shadow(0 14px 26px rgba(24, 24, 27, 0.16)); }
.f-paar-karte .f-titel { padding: 24px 26px 28px; }
.f-paar-karte .f-titel p:not(.kicker) { font-size: 16px; }
@media (max-width: 760px) { .f-paar .breite { grid-template-columns: minmax(0, 1fr); } }
/* Ein Paar, dessen Aussage die Formate selbst sind, trägt sie als Marken
   statt eines Ausschnitts (CAMT.053 und MT940, ZUGFeRD und XRechnung). */
.f-formate { list-style: none; display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 12px; }
.f-format {
  display: flex; align-items: center; justify-content: center; height: 48px; padding: 0 22px; border-radius: 999px;
  font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); white-space: nowrap;
  background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie), var(--fach-schatten);
}
@media (max-width: 640px) { .f-format { height: 42px; padding: 0 18px; font-size: 17px; } }

/* ── B6 Beweis ───────────────────────────────────────────── */
/* Eine wahre Zahl groß, daneben Säulen aus Glas in den Farben der App. */
.f-beweis-flaeche {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center;
  padding: clamp(28px, 17.6px + 2.667vw, 56px); border-radius: 32px; overflow: hidden;
  background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(var(--rgb), var(--schein-mitte)), transparent 70%), var(--flaeche);
  box-shadow: 0 0 0 1px var(--linie), var(--schatten);
}
.f-zahl { font-size: clamp(56px, 44.11px + 3.048vw, 88px); font-weight: 600; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.f-offen { margin-top: 6px; font-size: 14px; color: var(--text-3); }
.f-saeulen { display: flex; align-items: flex-end; gap: clamp(8px, 6.51px + 0.381vw, 12px); height: 240px; padding-top: 8px; }
.f-saeule {
  flex: 1; height: var(--h); border-radius: 10px 10px 4px 4px; transform-origin: bottom;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 60%, transparent), color-mix(in srgb, var(--c) 20%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 66%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transform: scaleY(0.04); transition: transform 1.2s var(--einblenden);
}
.kommt.da .f-saeule { transform: none; }
.f-saeule:nth-child(2) { transition-delay: 60ms; } .f-saeule:nth-child(3) { transition-delay: 120ms; }
.f-saeule:nth-child(4) { transition-delay: 180ms; } .f-saeule:nth-child(5) { transition-delay: 240ms; }
.f-saeule:nth-child(6) { transition-delay: 300ms; } .f-saeule:nth-child(7) { transition-delay: 360ms; }
.f-saeule:nth-child(8) { transition-delay: 420ms; }
.f-saeulen-namen { display: flex; gap: clamp(8px, 6.51px + 0.381vw, 12px); margin-top: 10px; }
.f-saeulen-namen span { flex: 1; font-size: 12px; color: var(--text-3); text-align: center; font-variant-numeric: tabular-nums; }
/* Ein Beweis darf unter seinen Säulen einen Ausschnitt aus der App tragen. */
.f-beweis-flaeche .f-saeulen-namen + .f-offen { margin-top: 10px; text-align: center; }
.f-beweis-flaeche .f-bild { margin-top: 28px; }
@media (max-width: 899px) { .f-beweis-flaeche { grid-template-columns: minmax(0, 1fr); gap: 32px; } .f-saeulen { height: 180px; } }

/* ── B7 Außerdem ─────────────────────────────────────────── */
.f-ausserdem .breite { display: flex; flex-direction: column; gap: 28px; }
.f-liste { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px 32px; }
.f-liste li { position: relative; padding-left: 28px; font-size: 16px; line-height: 1.5; color: var(--text); text-wrap: pretty; }
.f-liste li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(var(--rgb), 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.2 9.3l2.4 2.4 5-5.4' fill='none' stroke='%23a0a4ab' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
:root[data-thema="hell"] .f-liste li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.2 9.3l2.4 2.4 5-5.4' fill='none' stroke='%234e5157' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Funktion vorschlagen: unter jedem „Außerdem“ und am Ende von „Funktionen“,
   dort auch dann, wenn die Suche nichts findet. Überall derselbe Satz und
   derselbe Knopf. Die Fläche ist deckend, der Knopf braucht keine Unschärfe.
   Passt beides nicht nebeneinander, rückt der Knopf unter den Satz. */
.f-vorschlag {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px;
  width: max-content; max-width: 100%; margin-top: 8px; padding: 14px 14px 14px 24px; border-radius: 24px;
  background: var(--flaeche); box-shadow: 0 0 0 1px var(--linie);
}
.f-vorschlag p { flex: 1 1 260px; font-size: 16px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.f-vorschlag p b { color: var(--text); font-weight: 600; }
.f-vorschlag .knopf-glas { -webkit-backdrop-filter: none; backdrop-filter: none; }
.f-vorschlag .knopf svg { width: 14px; height: 14px; flex: none; }
@media (max-width: 640px) { .f-vorschlag { padding: 18px 20px 20px; } }

/* ── B8 Fragen aus der Beta ──────────────────────────────── */
.f-fragen .breite { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: clamp(28px, 13.14px + 3.81vw, 68px); }
.f-fragen-kopf { display: flex; flex-direction: column; gap: 12px; }
.f-fragen-kopf p { font-size: 15px; line-height: 1.5; color: var(--text-3); max-width: 300px; }
.f-frage { border-bottom: 1px solid var(--linie); }
.f-frage:first-child { border-top: 1px solid var(--linie); }
.f-frage summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 2px; cursor: pointer; list-style: none;
  font-size: 17px; font-weight: 600; letter-spacing: -0.005em; color: var(--text);
}
.f-frage summary::-webkit-details-marker { display: none; }
.f-frage summary svg { flex: none; width: 16px; height: 16px; color: var(--text-3); transition: transform 300ms var(--kurve); }
.f-frage[open] summary svg { transform: rotate(180deg); }
.f-frage p { padding: 0 2px 22px; max-width: 680px; font-size: 16px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
@media (max-width: 899px) { .f-fragen .breite { grid-template-columns: minmax(0, 1fr); } }

/* ── B9 Weiter ───────────────────────────────────────────── */
.f-weiter { padding-bottom: calc(var(--abstand) + var(--rug)); }
.f-weiter-karte {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: clamp(24px, 18.06px + 1.524vw, 40px) clamp(24px, 15.09px + 2.286vw, 48px);
  border-radius: 28px; background: var(--flaeche); box-shadow: 0 0 0 1px var(--linie);
}
.f-weiter-ziel { display: flex; flex-direction: column; gap: 6px; }
.f-weiter-ziel a { display: inline-flex; align-items: center; gap: 10px; font-size: var(--h4); font-weight: 600; letter-spacing: -0.01em; }
.f-weiter-ziel a svg { width: 20px; height: 20px; transition: transform 300ms var(--kurve); }
.f-weiter-ziel a:hover svg { transform: translateX(3px); }
.f-weiter-ziel span { font-size: 15px; color: var(--text-3); }

@media (prefers-reduced-motion: reduce) {
  .f-saeule { transform: none; transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .f-sprung-spur { background: var(--kopf-deckend); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .f-buehne-karte { background: var(--flaeche); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ══ Funktionen: alles auf einer Seite, mit Suche und Filter ══ */
/* Nach der Leinwand „Seiten“ (Claude Design, Stufe 3). Jede Funktion führt
   an ihre Stelle auf ihrer Seite. Ohne Skript stehen alle da, Suche und
   Filter blendet js/funktion.js ein. */
.fu-kopf { padding-top: clamp(124px, 107.66px + 4.19vw, 168px); padding-bottom: 36px; }
.fu-kopf .breite { display: flex; flex-direction: column; gap: 16px; }
.fu-kopf .leit { max-width: 640px; }
/* Breit steht der zweite Satz ganz in der zweiten Zeile (26.10.2026). */
@media (min-width: 641px) { .fu-kopf .leit b { display: block; } }
.fu-werkzeuge { padding-block: 8px; }
.fu-werkzeuge .breite { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fu-suche {
  position: relative; flex: 0 1 360px; min-width: min(100%, 260px);
}
.fu-suche svg { position: absolute; left: 15px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--text-3); pointer-events: none; }
.fu-suche input {
  width: 100%; height: 44px; padding: 0 16px 0 40px; border: 0; border-radius: 999px;
  font: inherit; font-size: 15px; color: var(--text);
  background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie);
}
.fu-suche input::placeholder { color: var(--text-3); }
.fu-suche input:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.fu-filter {
  display: flex; gap: 4px; padding: 5px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  border-radius: 999px; background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie);
}
.fu-filter::-webkit-scrollbar { display: none; }
.fu-filter button {
  flex: none; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border: 0; border-radius: 999px;
  background: transparent; font-size: 14px; color: var(--text-2); cursor: pointer; white-space: nowrap;
  transition: color 200ms var(--kurve), background-color 200ms var(--kurve), box-shadow 200ms var(--kurve);
}
.fu-filter button span { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.fu-filter button:hover { color: var(--text); }
.fu-filter button[aria-pressed="true"] { color: var(--text); background: var(--schalter-an); box-shadow: var(--schalter-schatten); }
.fu-anzahl { margin-left: auto; font-size: 14px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.fu-liste { padding-top: 28px; padding-bottom: calc(var(--abstand) + var(--rug)); }
.fu-gruppen { columns: 3 300px; column-gap: 40px; }
.fu-gruppe { break-inside: avoid; margin-bottom: 36px; }
.fu-gruppe[hidden] { display: none; }
.fu-gruppe-kopf {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--linie);
}
.fu-gruppe-kopf a { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 600; color: var(--text); }
.fu-gruppe-kopf a::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 3px; background: var(--punkt); }
.fu-gruppe-kopf a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--linie); }
.fu-gruppe-kopf span { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.fu-gruppe ul { list-style: none; }
.fu-gruppe li[hidden] { display: none; }
.fu-gruppe li a {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) 14px; align-items: center; gap: 10px;
  padding: 8px 0; font-size: 15px; line-height: 1.35; color: var(--text);
}
.fu-gruppe li a:hover { color: var(--text); }
.fu-gruppe li a > svg { width: 14px; height: 14px; color: var(--text-3); opacity: 0.6; transition: transform 300ms var(--kurve), opacity 200ms var(--kurve); }
.fu-gruppe li a:hover > svg { opacity: 1; transform: translateX(2px); }
.fu-zeichen { width: 14px; height: 14px; }
.fu-zeichen.stern { color: var(--verweis); }
.fu-zeichen.kreis { color: var(--text-3); }
.fu-gruppe li .f-ab { height: 19px; padding: 0 7px; font-size: 11px; margin-left: 6px; vertical-align: 1px; }
.fu-leer { padding: 40px 0; font-size: 17px; color: var(--text-2); }
/* Unter der Liste so viel Luft wie zwischen zwei Gruppen. Findet die Suche
   nichts, steht der Satz davor und die Karte rückt direkt darunter. Der
   Rand der letzten Gruppe zählt am Ende der Spalten nicht, bis zum
   26.10.2026 stand die Karte deshalb 8 Pixel unter der Liste. */
.fu-leer[hidden] + .f-vorschlag { margin-top: 36px; }
.fu-leer button { border: 0; background: none; padding: 0; font: inherit; color: var(--verweis); cursor: pointer; }
.fu-legende { display: flex; gap: 20px; margin-top: 8px; font-size: 14px; color: var(--text-3); }
.fu-legende span { display: inline-flex; align-items: center; gap: 7px; }
@media (max-width: 640px) { .fu-anzahl { display: none; } }

/* ══ Individualisierbarkeit ══════════════════════════════════ */
/* Nach der Leinwand „Seiten“ (Stufe 3): Vorführung, was zum Betrieb und was
   zum Rechner gehört, die neun Vorlagen in zwei Farben, zwei Zeilen. */
.iv-kopf { padding-top: clamp(124px, 107.66px + 4.19vw, 168px); overflow-x: clip; }
.iv-kopf .mitte { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.iv-kopf .leit { max-width: 620px; }
.iv-kopf .f-knoepfe { justify-content: center; }
/* Die Vorführung zeichnet sich 1031 × 514 (js/vorfuehrung.js). js/funktion.js
   setzt --vz, damit sie in die Breite passt, und --vf-unten für die Höhe. */
.iv-buehne { position: relative; display: flex; justify-content: center; margin-top: 56px; --vz: 1; }
/* Der Schein muss in seinem Kasten auslaufen. Bis zum 25.10.2026 reichten
   beide Verläufe über den Kasten hinaus, und sein Rand schnitt sie oben, links
   und unten gerade ab. Der Kasten ist deshalb größer, die Verläufe sind
   so umgerechnet, dass sie an derselben Stelle stehen wie vorher. Der Kopf
   darüber liegt vorn, damit der Schein nicht über der Schrift steht. */
.iv-kopf .mitte { position: relative; z-index: 1; }
/* Der Schein trägt die Farbe des Betriebs, den die Vorführung gerade
   einrichtet (--iv-marke, gesetzt von js/vorfuehrung.js), und wechselt mit
   ihr. Als eingetragene Eigenschaft lässt sich die Farbe überblenden. */
@property --iv-marke { syntax: "<color>"; inherits: true; initial-value: #eab44a; }
.iv-buehne-schein {
  position: absolute; inset: -50% -22% -42% -25%; pointer-events: none;
  background: radial-gradient(39.5% 45.2% at 70.7% 32.7%, color-mix(in srgb, var(--iv-marke) calc(var(--schein-mitte) * 100%), transparent), transparent 70%),
              radial-gradient(31.6% 38.75% at 23.4% 71.5%, color-mix(in srgb, var(--iv-marke) calc(var(--schein-mitte) * 60%), transparent), transparent 70%);
  transition: --iv-marke 1200ms var(--kurve);
}
@media (prefers-reduced-motion: reduce) { .iv-buehne-schein { transition: none; } }
.iv-rahmen {
  position: relative; padding: 8px; border-radius: 32px;
  background: var(--rahmen-bg); box-shadow: inset 0 0 0 1px var(--rahmen-kante), var(--rahmen-schatten);
}
.iv-innen { padding: 8px; border-radius: 24px; background: var(--rahmen-innen); overflow: hidden; width: calc(1031px * var(--vz) + 16px); }
.iv-innen > .vorfuehrung {
  width: 1031px; transform: scale(var(--vz)); transform-origin: 0 0;
  margin-right: calc(1031px * (var(--vz) - 1)); margin-bottom: var(--vf-unten, 0px);
}
.iv-zwei .breite { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.iv-karte {
  display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 17.54px + 1.143vw, 34px);
  border-radius: 24px; background: var(--flaeche); box-shadow: 0 0 0 1px var(--linie);
}
.iv-karte p:not(.kicker) { font-size: 16px; line-height: 1.55; color: var(--text-2); }
.iv-marken { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; list-style: none; }
.iv-marken li {
  display: inline-flex; align-items: center; height: 32px; padding: 0 13px; border-radius: 999px;
  font-size: 14px; color: var(--text); background: var(--glas); box-shadow: inset 0 0 0 1px var(--glas-kante);
}
@media (max-width: 760px) { .iv-zwei .breite { grid-template-columns: minmax(0, 1fr); } }
.iv-vorlagen-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.iv-farbwahl { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--glas); box-shadow: inset 0 0 0 1px var(--glas-kante); }
.iv-farbwahl button {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border: 0; border-radius: 999px;
  background: transparent; color: var(--text-2); font-size: 14px; cursor: pointer;
  transition: background-color 200ms var(--kurve), color 200ms var(--kurve), box-shadow 200ms var(--kurve);
}
.iv-farbwahl button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--farbe); }
.iv-farbwahl button:hover { color: var(--text); }
.iv-farbwahl button[aria-pressed="true"] { color: var(--text); background: var(--schalter-an); box-shadow: var(--schalter-schatten); }
.iv-vorlagen { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 28px 12px; margin-top: 36px; list-style: none; }
.iv-vorlagen figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.iv-vorlagen li:nth-child(even) figure { transform: translateY(18px); }
.iv-vorlagen img { width: 100%; aspect-ratio: 1588 / 2246; border-radius: 6px; box-shadow: 0 18px 34px -14px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--linie); }
:root[data-thema="hell"] .iv-vorlagen img { box-shadow: 0 18px 34px -14px rgba(24, 24, 27, 0.28), 0 0 0 1px var(--linie); }
.iv-vorlagen figcaption { font-size: 14px; color: var(--text-2); text-align: center; }
.iv-vorlagen[data-farbe="honig"] .v-terrakotta, .iv-vorlagen[data-farbe="terrakotta"] .v-honig { display: none; }
@media (max-width: 640px) { .iv-vorlagen li:nth-child(even) figure { transform: none; } }
/* Was der Editor kann, unter den neun Vorlagen, als Liste wie „Außerdem“. */
.iv-editor { display: flex; flex-direction: column; gap: 22px; margin-top: clamp(56px, 44.11px + 3.048vw, 88px); }