/* cf-trigger-karten.css — Die Kachelwand der Abteilung "Trigger".

   Der Befund des Betreibers: 73 gleichfoermige Textkacheln, der Effekt ist nicht in einer
   Sekunde zu greifen. Bilder greift der Nutzer schneller als Schrift und Zahl.

   Drei Entscheidungen, die diese Datei traegt:
   1. JEDE Kachel bekommt eine BILDFLAECHE. Sie ist in BEIDEN Themes dunkel — ein Motiv ist ein
      Motiv, kein Flaechenton; es wechselt nicht mit dem Hell/Dunkel-Schalter, so wie ein Foto in
      einem Magazin auch auf weissem Papier dunkel bleibt.
   2. Was in der Bildflaeche steht, ist ein GEZEICHNETES Schema der Wirkmechanik (Inline-SVG,
      aus den Katalogdaten), kein erfundenes Dekor. Ein KI-Motiv kann sich als Hintergrund
      dahinterlegen (--tk-img), das Schema bleibt lesbar darueber.
   3. Das Raster 4/3/2 sind DREI BAUPLAENE, nicht dieselbe Kachel in drei Breiten. Deshalb steht
      hier je Stufe ein eigener Block — .tk-g4 / .tk-g3 / .tk-g2 — und nicht eine Spaltenzahl.

   Additiv: kein bestehender .psy-* Selektor wird ueberschrieben. Alles neu unter .tk-*. */

.tk-wand{--tk-media:#0B0D10;--tk-acc:var(--lime);--tk-acc2:#8FA00F;}

/* Die Filterzeile enger stellen: 118 px Beschriftungsspalte und drei gestapelte Reihen kosteten
   vor der ersten Kachel ueber 130 px Hoehe, die nichts zeigen. Nur hier verengt, damit die
   uebrigen Abteilungen ihre Masse behalten. */
.tk-wand .psy-filter{gap:9px;margin-top:13px;padding-top:13px}
.tk-wand .psy-fz{gap:11px}
.tk-wand .psy-fl{width:94px;font-size:.74rem;padding-top:8px}
.tk-wand>.card{padding:18px 20px !important;margin-bottom:14px !important}
.tk-wand>.card h3{font-size:1.16rem}
.tk-wand>.card .h-sub{font-size:.9rem;max-width:96ch}

/* ---------------------------------------------------------------- Kopfleiste mit Rasterwahl */
.tk-leiste{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:13px 0 0;
  padding-top:12px;border-top:1px solid var(--line)}
.tk-leiste .tk-zahl{font-size:.88rem;color:var(--ink-soft)}
.tk-leiste .tk-zahl b{font-family:var(--disp);font-weight:900;color:var(--ink);letter-spacing:-.01em}
.tk-raster{margin-left:auto;display:flex;align-items:center;gap:9px}
.tk-raster>span{font-size:.78rem;font-weight:800;color:var(--ink-faint);letter-spacing:.02em}
.tk-seg{display:flex;padding:4px;background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r-btn,12px);gap:3px}
.tk-seg button{border:0;background:none;padding:7px 11px;border-radius:max(0px,calc(var(--r-btn,12px) - 3px));
  font-size:.84rem;font-weight:700;color:var(--ink-soft);display:flex;align-items:center;gap:7px;transition:.15s}
.tk-seg button:hover{color:var(--ink)}
.tk-seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.tk-seg svg{width:15px;height:15px;flex:none}

/* ------------------------------------------------------------------------------ Die Raster */
.tk-g{display:grid;gap:16px}
.tk-g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tk-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tk-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1500px){.tk-g4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1180px){.tk-g4,.tk-g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.tk-g4,.tk-g3,.tk-g2{grid-template-columns:minmax(0,1fr)}}

/* ------------------------------------------------------------------------------ Die Kachel */
.tk{position:relative;display:flex;flex-direction:column;min-width:0;cursor:pointer;overflow:hidden;
  background:var(--surface);border:1px solid var(--cardline,var(--line));border-radius:var(--r-lg);
  box-shadow:var(--shadow);transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .16s}
.tk:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--line-strong)}
.tk:focus-visible{outline:3px solid var(--tk-acc);outline-offset:2px}

/* Die Bildflaeche. Sie traegt das Seitenverhaeltnis selbst — kein Deckel in Pixeln, sonst
   verspricht die Flaeche ein Verhaeltnis und zeigt ein anderes. */
.tk-b{position:relative;background:var(--tk-media);overflow:hidden;flex:none}
.tk-b::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,13,16,0) 52%,rgba(11,13,16,.55) 100%)}
.tk-bimg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.9;
  transition:transform .5s var(--ease),opacity .3s}
.tk:hover .tk-bimg{transform:scale(1.05);opacity:1}
/* Wo ein Motiv liegt, ist das Schema nur noch die Beschriftung darauf. */
.tk-b.mitbild .tk-mech{opacity:.22}
.tk-b.mitbild .tk-mech rect[fill^="rgba"]{display:none}
.tk-b svg.tk-mech{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Das Schema atmet beim Ueberfahren — die Bewegung zeigt die Wirkrichtung, sie dekoriert nicht. */
.tk-mech .m-zug{transition:transform .45s var(--ease),opacity .45s}
.tk:hover .tk-mech .m-zug{transform:translateX(var(--m-dx,0)) translateY(var(--m-dy,0))}
.tk:hover .tk-mech .m-auf{opacity:1}
.tk-mech .m-auf{opacity:0}

/* Wirkungsfeld-Marke auf der Bildflaeche */
.tk-feld{position:absolute;top:12px;left:13px;z-index:2;display:flex;align-items:center;gap:7px;
  font-family:var(--disp);font-weight:900;font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.72)}
.tk-feld i{width:7px;height:7px;border-radius:50%;background:var(--tk-acc);display:block;flex:none}
.tk-einsatz{position:absolute;top:11px;right:12px;z-index:2;display:flex;align-items:center;gap:6px;
  padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.1);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.16);font-size:.7rem;font-weight:700;color:rgba(255,255,255,.9)}
.tk-einsatz i{width:6px;height:6px;border-radius:50%;background:var(--tk-acc);display:block}

.tk-k{padding:15px 17px 16px;display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.tk-k h4{font-family:var(--disp);font-size:1.08rem;line-height:1.22;letter-spacing:-.01em;overflow-wrap:anywhere}
.tk:hover .tk-k h4{color:var(--ink)}
.tk-tag{font-size:.86rem;line-height:1.45;color:var(--ink-soft)}
.tk-fuss{margin-top:auto;padding-top:10px;border-top:1px solid var(--line);display:flex;align-items:center;
  gap:8px;flex-wrap:wrap;font-size:.74rem;color:var(--ink-faint)}

/* -------------------------------------------------------------- Der Wirkungs-Balken (Rang) */
/* Die Stufe wird aus der Angabe der Quelle GELESEN, nicht erfunden: Pfeile bzw. Prozentwerte.
   Wo die Quelle keine Groesse hergibt, bleiben alle Glieder leer und es steht dort auch so. */
.tk-w{display:flex;align-items:center;gap:9px;margin-top:2px;min-width:0}
.tk-wb{display:flex;gap:3px;flex:none}
.tk-wb i{width:16px;height:6px;border-radius:var(--r-bar);background:var(--line-strong);display:block}
.tk-wb i.on{background:var(--tk-acc)}
.tk-w.ab .tk-wb i.on{background:var(--info)}
.tk-w.leer .tk-wb i{background:transparent;box-shadow:inset 0 0 0 1px var(--line-strong)}
.tk-wv{font-family:var(--disp);font-weight:900;font-size:.94rem;letter-spacing:-.01em;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-wl{font-size:.76rem;color:var(--ink-faint);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ------------------------------------------------------------ Bauplan 4 Spalten: Uebersicht */
/* Nur was aus vier Metern Abstand traegt: Motiv, Feld, Name. Kein Fliesstext — in dieser Breite
   waere er zwei Woerter je Zeile. */
.tk-g4 .tk-b{aspect-ratio:4/3}
.tk-g4 .tk-k{padding:13px 14px 14px;gap:4px}
.tk-g4 .tk-k h4{font-size:.98rem}
.tk-g4 .tk-tag,.tk-g4 .tk-fuss,.tk-g4 .tk-wl{display:none}
.tk-g4 .tk-w{margin-top:6px}

/* ------------------------------------------------------------- Bauplan 3 Spalten: Standard */
.tk-g3 .tk-b{aspect-ratio:16/9}
.tk-g3 .tk-tag{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tk-g3 .tk-fuss{font-size:.74rem}

/* --------------------------------------------------------------- Bauplan 2 Spalten: Studium */
/* Hier ist Platz fuer die Aussage. Deshalb liegt das Motiv links und der Text daneben — und es
   kommt hinzu, was in den engen Stufen fehlt: Mechanik, Beleg, Grenze. */
.tk-g2 .tk{flex-direction:row;align-items:stretch}
.tk-g2 .tk-b{aspect-ratio:auto;width:38%;min-width:210px;max-width:330px}
.tk-g2 .tk-k{padding:18px 20px 17px;gap:7px}
.tk-g2 .tk-k h4{font-size:1.24rem}
.tk-g2 .tk-tag{font-size:.9rem}
.tk-g2 .tk-mehr{font-size:.84rem;line-height:1.5;color:var(--ink-soft);margin-top:2px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tk-g2 .tk-grenze{display:flex;align-items:flex-start;gap:8px;margin-top:8px;padding:9px 11px;
  border-radius:10px;background:var(--warn-bg);border:1px solid var(--warn);color:var(--ink);
  font-size:.79rem;line-height:1.45}
.tk-g2 .tk-grenze svg{width:15px;height:15px;flex:none;margin-top:1px;color:var(--warn)}
.tk-g2 .tk-grenze b{font-weight:800}
@media (max-width:820px){.tk-g2 .tk{flex-direction:column}
  .tk-g2 .tk-b{width:auto;max-width:none;aspect-ratio:16/9}}

/* Was nur in der Studium-Stufe erscheint, ist sonst nicht im Markup — nicht nur ausgeblendet:
   ein ausgeblendeter Absatz waere trotzdem im Baum und im Screenreader. */
.tk-mehr,.tk-grenze{display:none}
.tk-g2 .tk-mehr{display:-webkit-box}
.tk-g2 .tk-grenze{display:flex}

/* --------------------------------------------------------------------------- Leerer Befund */
.tk-leer{grid-column:1/-1;text-align:center;padding:34px 20px;color:var(--ink-soft);
  border:1px dashed var(--line-strong);border-radius:var(--r-lg)}

/* Wer Bewegung abbestellt hat, bekommt keine. */
@media (prefers-reduced-motion:reduce){
  .tk,.tk-bimg,.tk-mech .m-zug{transition:none}
  .tk:hover{transform:none}
  .tk:hover .tk-bimg{transform:none}
  .tk:hover .tk-mech .m-zug{transform:none}}