/* =========================================================
   effekte.css: nur für effekte.html, die Übersicht der Effekt-Werkstatt.
   Baut auf style.css auf (Farben, Schrift, Abstände) und ergänzt Raster,
   Karten, Suche und Filter. Eckig und flach wie der Rest der Seite.
   ========================================================= */

.fxw-hinweis{margin:18px 0 0;padding-left:16px;border-left:3px solid var(--gold);font-size:15px;line-height:1.7;color:var(--text-2);max-width:760px}

/* Werkzeugleiste: Suche, Filter, Anzahl. html.js davor, sonst gewinnt
   html.js .js-nur{display:block} und das Raster fällt auseinander. */
html.js .fxw-werkzeug{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:0 0 34px}
@media (min-width:900px){html.js .fxw-werkzeug{grid-template-columns:minmax(0,1fr) auto;align-items:end}}
.fxw-such{display:block;border-bottom:1px solid var(--text-2)}
.fxw-such:focus-within{border-bottom-color:#000;box-shadow:0 2px 0 var(--gold),0 3px 0 #000}
.fxw-such input{width:100%;font:inherit;font-size:18px;padding:12px 0;border:0;background:transparent;color:var(--text);outline:none;appearance:none}
.fxw-such input::placeholder{color:#767676}
.fxw-such input::-webkit-search-cancel-button{filter:grayscale(1) brightness(0);cursor:pointer}
.fxw-filter{display:flex;flex-wrap:wrap;gap:8px}
.fxw-chip{appearance:none;font:inherit;font-size:13px;font-weight:500;letter-spacing:.04em;padding:9px 14px;cursor:pointer;
  background:#fff;color:#111;border:1px solid #c9c9c4;border-radius:0}
.fxw-chip:hover{border-color:#111}
.fxw-chip[aria-pressed="true"]{background:#111;color:#fff;border-color:#111;box-shadow:inset 0 -3px 0 var(--gold)}
.fxw-chip:focus-visible{outline:2px solid #111;outline-offset:2px}
.fxw-zahl{grid-column:1 / -1;margin:0;font-size:13px;color:var(--grau);min-height:20px}

/* Raster der Karten */
.fxk-raster{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
@media (min-width:620px){.fxk-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.fxk-raster{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fxk{display:flex;flex-direction:column;background:#fff;border:1px solid var(--linie);transition:border-color .15s ease}
.fxk:hover{border-color:#111}
.fxk[hidden]{display:none}
.fxk-bild{display:block;aspect-ratio:16 / 10;overflow:hidden;background:var(--grund,#f4f4f2);border-bottom:1px solid var(--linie)}
.fxk-bild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.fxk:hover .fxk-bild img{transform:scale(1.03)}
.fxk-bild span{display:grid;place-items:center;height:100%;font-size:44px;font-weight:700;color:var(--akzent,#111)}
.fxk-text{padding:20px 22px 6px;flex:1}
.fxk-nr{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grau);display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.fxk-nr span{background:var(--gold);color:#111;padding:2px 7px;letter-spacing:.06em}
.fxk h2{margin:0 0 6px;font-size:20px;line-height:1.3}
.fxk h2 a{color:#111;text-decoration:none;background-image:linear-gradient(var(--gold),var(--gold));background-repeat:no-repeat;background-position:0 100%;background-size:0 2px;transition:background-size .2s ease}
.fxk h2 a:hover,.fxk h2 a:focus-visible{background-size:100% 2px}
.fxk-text p:last-child{margin:0;font-size:15px;line-height:1.6;color:var(--text-2)}
.fxk-bewertung{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:8px 18px 14px}

/* Sterne auf weißem Grund: Gold allein wäre zu hell, deshalb Schwarz */
.fxk .fx-stern{color:#9b9b96}
.fxk .fx-bewerten:hover .fx-stern{color:#111}
.fxk .fx-bewerten .fx-stern:hover ~ .fx-stern{color:#9b9b96}
.fxk .fx-stern.an{color:#111}
.fxk .fx-bewerten[data-fertig]{box-shadow:inset 0 -3px 0 var(--gold)}
.fxk .fx-bewerten[data-fertig]:hover .fx-stern:not(.an){color:#9b9b96}
.fxk .fx-stern:focus-visible{outline:2px solid #111}
.fxk .fx-danke{color:#111;font-size:13px}
.fxw-leer{grid-column:1 / -1;padding:24px 26px;background:var(--flaeche);color:var(--text-2)}

@media (prefers-reduced-motion:reduce){.fxk,.fxk-bild img,.fxk h2 a{transition:none}.fxk:hover .fxk-bild img{transform:none}}