/* talenteschmiede bewegt — Funnel-Styling (Klickdummy).
   Nutzt CI-Variablen aus ci.css. */
.funnel{max-width:760px;margin:0 auto}
.funnel__stage{display:none}
.funnel__stage.is-active{display:block;animation:fnl-in .35s ease both}
@keyframes fnl-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.funnel__stage.is-active{animation:none}}

/* Chatbot */
.fnl-bot{display:flex;gap:14px;align-items:flex-start;margin-bottom:22px}
.fnl-bot__av{flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:var(--grad-brand);display:grid;place-items:center;color:#fff;font-weight:800;font-style:italic;font-size:.95rem}
.fnl-bot__bubble{background:#fff;border-radius:4px 16px 16px 16px;padding:14px 18px;box-shadow:var(--shadow);font-size:1.1rem;max-width:46ch}
.fnl-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.fnl-chip{border:2px solid var(--royal-blue);background:#fff;color:var(--royal-blue);border-radius:24px;padding:10px 18px;font-weight:700;cursor:pointer;font-size:1rem;font-family:inherit;transition:background .15s,color .15s}
.fnl-chip:hover,.fnl-chip:focus-visible{background:var(--royal-blue);color:#fff;outline:none}
.fnl-chip.is-on{background:var(--royal-blue);color:#fff}
.fnl-chip--go{display:block;margin-top:16px;border-color:var(--lime);background:var(--lime);color:#fff}
.fnl-chip--go:hover,.fnl-chip--go:focus-visible{background:var(--lime);color:#fff;filter:brightness(.95)}

/* Progress / Bewegung */
.fnl-progress{display:flex;gap:6px;margin-bottom:24px}
.fnl-progress span{height:5px;flex:1;border-radius:3px;background:#e3e3df}
.fnl-progress span.on{background:var(--grad-brand)}

/* Swipe-Deck */
.fnl-deck{position:relative;height:380px;max-width:360px;margin:0 auto}
.fnl-card{position:absolute;inset:0;background:#fff;border-radius:18px;box-shadow:var(--shadow-lg);padding:26px;display:flex;flex-direction:column;justify-content:flex-end;border-top:5px solid var(--lime);transition:transform .3s ease,opacity .3s ease}
.fnl-card .beruf{font-size:1.4rem;font-weight:900;font-style:italic;margin-bottom:4px}
.fnl-card .firma{color:#555}
.fnl-card .meta{margin-top:10px;font-size:.85rem;color:var(--royal-blue);font-weight:700}
.fnl-card.gone-right{transform:translateX(120%) rotate(8deg);opacity:0}
.fnl-card.gone-left{transform:translateX(-120%) rotate(-8deg);opacity:0}
.fnl-swipe-btns{display:flex;justify-content:center;gap:22px;margin-top:22px}
.fnl-swipe-btns button{width:60px;height:60px;border-radius:50%;border:none;font-size:1.4rem;cursor:pointer;box-shadow:var(--shadow);transition:transform .15s}
.fnl-swipe-btns button:hover{transform:translateY(-2px)}
.fnl-nope{background:#fff;color:#c0392b}
.fnl-yep{background:var(--lime);color:#fff}

/* Filterliste */
.fnl-filters{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 24px}
.fnl-filters input,.fnl-filters select{padding:10px 12px;border:1px solid #ccc;border-radius:10px;font-size:.95rem;font-family:inherit}
.fnl-filters label{font-size:.8rem;color:#666;display:flex;flex-direction:column;gap:4px}
.fnl-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.fnl-item{background:#fff;border-radius:12px;padding:18px;box-shadow:var(--shadow);border-left:4px solid var(--tuerkis)}
.fnl-merk{background:#f3faf0;border:1px dashed var(--lime);border-radius:12px;padding:14px;margin-bottom:18px;font-size:.95rem}
.fnl-switchlink{display:inline-block;margin-top:18px;color:var(--royal-blue);font-weight:700;cursor:pointer;text-decoration:underline}
.fnl-switchlink:hover{color:var(--royal-blue-d)}

/* ===== Neuer Vokabular-Funnel (Stufe 1) ===== */
/* Eigene „Bühne": hebt den Funnel klar vom Seitenhintergrund ab. */
.funnel{
  max-width:840px;margin:10px auto;min-height:200px;position:relative;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(43,183,201,.11), transparent 55%),
    radial-gradient(110% 85% at 0% 100%, rgba(144,199,61,.11), transparent 52%),
    #fff;
  border:1px solid #e6edf1;border-radius:28px;
  box-shadow:var(--shadow-lg,0 24px 60px #1f22251f);
  padding:clamp(26px,4vw,48px);overflow:hidden;
}
.funnel::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--grad-brand)}
.fn-head{margin-bottom:6px}
.fn-q{font-size:clamp(1.6rem,4vw,2.2rem);margin:6px 0 2px}
.fn-hint{color:#6b6b68;margin:0 0 16px}
/* Pflichtauswahl (3 Kacheln): Zahl als CI-Badge + Live-Zähler, damit sichtbar ist,
   warum „Weiter" noch gesperrt ist. */
.fn-req-hint{display:flex;align-items:center;flex-wrap:wrap;gap:10px;color:#3d3d3a;font-weight:600}
.fn-req-badge{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--grad-brand);color:#fff;font-weight:800;font-size:1.1rem;line-height:1;box-shadow:0 4px 14px #2bb7c93d;flex:0 0 auto}
.fn-count{font-size:.84rem;font-weight:700;color:#6b6b68;background:#f1f4f6;border-radius:999px;padding:4px 12px;transition:background .15s ease,color .15s ease}
.fn-count.ok{color:#4d7d10;background:#eaf5d6}
/* Praktikums-Zeile in der Betriebskarte: das ist die Kernaussage des Finders. */
.fn-b-prak{font-size:.94rem;color:#2f2f2d;line-height:1.45}
.fn-b-prak b{color:#4d7d10}
.fn-tiles.is-max .fn-tile:not(.sel){opacity:.45;box-shadow:none}
.fn-tiles.is-max .fn-tile:not(.sel):hover{border-color:#e2e8ec;transform:none;box-shadow:none}
.fn-tiles{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 22px}
.fn-tile{background:#fff;border:2px solid #e2e8ec;border-radius:999px;padding:12px 22px;font:inherit;font-weight:700;color:var(--anthrazit);cursor:pointer;box-shadow:0 2px 10px #1f22150d;transition:border-color .15s ease,transform .12s ease,box-shadow .15s ease}
.fn-tile:hover{border-color:var(--royal-blue);transform:translateY(-2px);box-shadow:0 8px 20px #1a8fe322}
.fn-tile:active{transform:scale(.97)}
.fn-tile.sel{background:var(--grad-brand);color:#fff;border-color:transparent;box-shadow:0 8px 22px #2bb7c93a}
.fn-next{margin-top:4px}
.fn-next:disabled{opacity:.45;cursor:default}
.fn-row{display:flex;align-items:center;gap:16px;margin-top:8px}
.fn-back{background:none;border:0;color:var(--royal-blue);font-weight:700;cursor:pointer;padding:8px 4px;font:inherit;margin-top:12px}
.fn-result-head .fn-spiegeln{font-size:clamp(1.5rem,4vw,2rem);font-style:italic;margin:6px 0 6px}
.fn-welten{color:#4a4a47;margin:0 0 8px}
.fn-praks{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:12px 0 20px}
.fn-prak{display:flex;flex-direction:column;gap:3px;background:#fff;border:1px solid #e2e8ec;border-radius:14px;padding:16px 18px;text-decoration:none;color:inherit;box-shadow:var(--shadow);transition:transform .15s ease}
.fn-prak:hover{transform:translateY(-2px)}
.fn-prak-beruf{font-weight:800;color:var(--anthrazit)}
.fn-prak-firma{color:#6b6b68;font-size:.92rem}
.fn-prak-go{color:var(--royal-blue);font-weight:700;font-size:.88rem;margin-top:4px}
.fn-fallback{background:#eef7fb;border-left:4px solid var(--royal-blue);border-radius:10px;padding:16px 20px;margin:12px 0 18px}
.fn-fallback p{margin:0 0 8px;line-height:1.5}
.fn-result-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.fn-loading{color:#888}
.fn-hint-2nd{margin-top:22px;font-weight:600;color:#4a4a47}
/* Betriebs-Karten (Stufe-2-Matching über ts_taetigkeiten) */
.fn-betriebe{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:12px 0 6px}
.fn-betrieb{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid #e2e8ec;border-radius:14px;padding:16px 18px;text-decoration:none;color:inherit;box-shadow:var(--shadow);transition:transform .15s ease}
.fn-betrieb:hover{transform:translateY(-2px);border-color:var(--tuerkis)}
.fn-b-name{font-weight:800;color:var(--anthrazit)}
.fn-b-ort{font-weight:500;color:#6b6b68;font-size:.92rem}
.fn-b-chips{display:flex;flex-wrap:wrap;gap:6px}
.fn-b-chip{background:linear-gradient(8deg,rgba(26,143,227,.10),rgba(43,183,201,.10));border:1px solid rgba(43,183,201,.35);color:#256a7a;border-radius:999px;padding:3px 10px;font-size:.8rem;font-weight:600;line-height:1.3}
.fn-b-aus{color:#4a4a47;font-size:.88rem}
.fn-b-hidden{display:none}
.fn-more{display:inline-flex;align-items:center;gap:8px;margin:2px 0 8px;background:#fff;border:1.5px solid var(--tuerkis);color:#256a7a;font-weight:700;font:inherit;font-size:.95rem;border-radius:999px;padding:10px 22px;cursor:pointer;transition:background .15s,color .15s}
.fn-more:hover{background:var(--tuerkis);color:#fff}
@media(max-width:600px){.fn-praks,.fn-betriebe{grid-template-columns:1fr}}

/* ---- Filter nach Angebotsart (Ergebnis-Schritt) ----
   Chips im Stil der Auswahl-Kacheln (.fn-tile), aber kleiner: Es ist ein
   Nachfilter auf dem Ergebnis, keine gleichrangige Auswahl. Arten ohne Treffer
   werden deaktiviert statt versteckt — so ist sichtbar, dass es sie gibt. */
.fn-artfilter{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:2px 0 20px}
.fn-artfilter-lab{font-weight:700;color:var(--anthrazit);font-size:.92rem;margin-right:2px}
.fn-artchip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1.5px solid #e2e8ec;border-radius:999px;padding:8px 16px;font:inherit;font-size:.92rem;font-weight:700;color:var(--anthrazit);cursor:pointer;transition:border-color .15s,background .15s,color .15s,transform .12s}
.fn-artchip:hover:not(:disabled){border-color:var(--royal-blue);transform:translateY(-1px)}
.fn-artchip:active:not(:disabled){transform:scale(.97)}
.fn-artchip.is-on{background:var(--grad-brand);border-color:transparent;color:#fff;box-shadow:0 6px 16px #2bb7c936}
.fn-artchip:disabled{opacity:.45;cursor:not-allowed}
.fn-artchip-n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#eef3f6;color:#5b6b74;font-size:.76rem;font-weight:700}
.fn-artchip.is-on .fn-artchip-n{background:#ffffff2e;color:#fff}
.fn-artreset{background:none;border:none;font:inherit;font-size:.88rem;color:var(--royal-blue);font-weight:600;text-decoration:underline;cursor:pointer;padding:6px 2px}
.fn-artreset:hover{color:#126ea9}
@media(max-width:600px){.fn-artfilter{gap:8px}.fn-artchip{padding:7px 13px;font-size:.88rem}}

/* ---- Angebotsarten auf der Betriebs-Karte ----
   Zeigt alle Arten, die ein Betrieb anbietet (vorher entweder/oder). Farben aus
   der CI: Praktikum blau, Ausbildung türkis, Ferienjob lime — so ist auf einen
   Blick erkennbar, was es gibt, ohne den Text lesen zu müssen. */
.fn-b-arten{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 4px}
.fn-b-art{display:inline-flex;align-items:center;border-radius:999px;padding:3px 11px;font-size:.78rem;font-weight:800;letter-spacing:.01em;line-height:1.35;border:1px solid transparent}
.fn-b-art-praktikum{background:rgba(26,143,227,.12);border-color:rgba(26,143,227,.42);color:#12639f}
.fn-b-art-ausbildung{background:rgba(43,183,201,.13);border-color:rgba(43,183,201,.45);color:#1c7c8a}
.fn-b-art-ferienjob{background:rgba(144,199,61,.16);border-color:rgba(144,199,61,.5);color:#4e7014}
.fn-b-aus,.fn-b-prak{color:#4a4a47;font-size:.88rem}