/* Kartensaetze: Trendfelder (KI-Strategie), KI-Faehigkeiten (Sprint), Vorschau (Startseite),
   Symbole der kostenlosen Werkzeuge. Eigene Fassung in Selinas Worten, keine Fremdvorlagen. */

:root { --kf-tief: #370C7B; --kf-gold: #FFC300; --kf-text: #2D2D2D; }

/* ---------- Trendfelder ---------- */
.kf-felder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 36px; perspective: 1200px; }
.kf-feld { position: relative; border: 0; text-align: left; cursor: pointer; font: inherit; color: var(--kf-text);
  border-radius: 18px; padding: 24px 24px 22px; min-height: 230px; background: var(--kf-farbe);
  box-shadow: 0 12px 30px rgba(45, 45, 45, .12); overflow: hidden;
  transition: transform .5s cubic-bezier(.2, .9, .3, 1.2), box-shadow .3s; }
.kf-feld::before { content: ""; position: absolute; right: -30px; bottom: -36px; width: 150px; height: 150px;
  background: rgba(255, 255, 255, .28); clip-path: polygon(50% 0, 100% 100%, 50% 72%, 0 100%); transform: rotate(var(--kf-dreh, 20deg)); }
.kf-feld:hover, .kf-feld:focus-visible { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 20px 40px rgba(45, 45, 45, .18); }
.kf-feld:focus-visible { outline: 3px solid var(--kf-tief); outline-offset: 3px; }
.kf-nr { font-size: 2.6rem; font-weight: 800; line-height: 1; opacity: .9; }
.kf-feld h3 { font-size: 1.25rem; margin: 14px 0 6px; line-height: 1.25; color: var(--kf-text); }
.kf-frage { margin: 0; font-size: .97rem; line-height: 1.5; }
.kf-punkte { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px;
  max-height: 0; opacity: 0; transition: max-height .5s ease, opacity .4s ease; }
.kf-feld.kf-offen .kf-punkte, .kf-feld:hover .kf-punkte { max-height: 220px; opacity: 1; }
.kf-punkte li { background: rgba(255, 255, 255, .62); border-radius: 999px; padding: 5px 11px; font-size: .82rem; font-weight: 600; }
.kf-mehr { position: absolute; top: 20px; right: 20px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, .55); display: grid; place-items: center; font-weight: 700; transition: transform .35s; }
.kf-feld.kf-offen .kf-mehr { transform: rotate(45deg); }
.kf-quelle { margin-top: 26px; font-size: .82rem; color: #6b6475; text-align: center; }

/* Auffaechern beim Hereinscrollen: alle Karten starten gestapelt in der Mitte */
.kf-bereit .kf-feld { opacity: 0; transform: translate(var(--kf-x, 0), 40px) rotate(var(--kf-r, 0deg)) scale(.92); }
.kf-bereit.kf-sichtbar .kf-feld { opacity: 1; transform: none; transition: transform .8s cubic-bezier(.2, .9, .25, 1.15) var(--kf-verzug, 0s), opacity .5s ease var(--kf-verzug, 0s); }

/* ---------- KI-Faehigkeiten (Wendekarten) ---------- */
.kf-faehigkeiten { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-top: 36px; }
.kf-karte { position: relative; border: 0; padding: 0; background: none; font: inherit; cursor: pointer; aspect-ratio: 3 / 4;
  perspective: 900px; border-radius: 16px; }
.kf-karte:focus-visible { outline: 3px solid var(--kf-tief); outline-offset: 3px; }
.kf-innen { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, .9, .3, 1.1); }
.kf-karte:hover .kf-innen, .kf-karte.kf-umgedreht .kf-innen { transform: rotateY(180deg); }
.kf-seite { position: absolute; inset: 0; border-radius: 16px; padding: 16px 16px 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; text-align: left; color: #fff; box-shadow: 0 10px 24px rgba(45, 45, 45, .14); }
.kf-vorne { background: var(--kf-farbe); }
.kf-hinten { background: #fff; color: var(--kf-text); transform: rotateY(180deg); border: 2px solid var(--kf-farbe); }
.kf-gruppe { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; opacity: .85; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.kf-vorne strong { font-size: 1.02rem; line-height: 1.3; margin-top: 12px; }
.kf-vorne .kf-tipp { margin-top: auto; font-size: .72rem; opacity: .85; padding-right: 24px; }
.kf-hinten .kf-gruppe { color: var(--kf-farbe); border-color: rgba(45, 45, 45, .12); opacity: 1; font-weight: 700; filter: brightness(.8); }
.kf-hinten p { margin: 10px 0 0; font-size: .86rem; line-height: 1.45; }
.kf-nummer { position: absolute; bottom: 12px; right: 14px; font-size: .74rem; opacity: .7; }

/* Austeilen beim Hereinscrollen */
.kf-bereit .kf-karte { opacity: 0; transform: translateY(-60px) rotate(var(--kf-r, -6deg)); }
.kf-bereit.kf-sichtbar .kf-karte { opacity: 1; transform: none; transition: transform .7s cubic-bezier(.2, .9, .3, 1.2) var(--kf-verzug, 0s), opacity .45s ease var(--kf-verzug, 0s); }

/* ---------- Vorschau Startseite ---------- */
.kf-vorschau { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 36px; }
.kf-satz { display: block; text-decoration: none; color: inherit; background: #faf8fd; border-radius: 22px; padding: 28px; overflow: hidden;
  border: 1px solid rgba(55, 12, 123, .08); transition: transform .3s, box-shadow .3s; }
.kf-satz:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(55, 12, 123, .12); }
.kf-stapel { position: relative; height: 190px; margin: 4px 0 22px; }
.kf-stapel span { position: absolute; left: 50%; bottom: 0; width: 104px; height: 146px; margin-left: -52px; border-radius: 12px;
  background: var(--kf-farbe); box-shadow: 0 8px 18px rgba(45, 45, 45, .16); transform-origin: 50% 120%;
  transform: rotate(0deg); transition: transform .9s cubic-bezier(.2, .9, .25, 1.15); font-size: 0; }
.kf-sichtbar .kf-stapel span, .kf-satz:hover .kf-stapel span { transform: rotate(var(--kf-r)) translateX(var(--kf-x)); }
.kf-satz h3 { margin: 0 0 8px; font-size: 1.25rem; color: var(--kf-tief); }
.kf-satz p { margin: 0 0 14px; line-height: 1.55; }
.kf-satz .kf-link { font-weight: 700; color: var(--kf-tief); }

/* ---------- Symbole der kostenlosen Werkzeuge ---------- */
.werkzeug-symbol { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(255, 195, 0, .35), rgba(55, 12, 123, .14)); color: var(--kf-tief); }
.werkzeug-symbol svg { width: 28px; height: 28px; overflow: visible; }
.werkzeug-symbol .ws-zeichnen { stroke-dasharray: 120; stroke-dashoffset: 120; }
.kf-sichtbar .werkzeug-symbol .ws-zeichnen { animation: ws-zeichnen 1.4s ease forwards; }
.service-card:hover .werkzeug-symbol .ws-puls { animation: ws-puls 1s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.service-card:hover .werkzeug-symbol .ws-dreh { animation: ws-dreh 2.4s linear infinite; transform-origin: center; transform-box: fill-box; }
.service-card:hover .werkzeug-symbol .ws-hopp { animation: ws-hopp .9s ease-in-out infinite; }
@keyframes ws-zeichnen { to { stroke-dashoffset: 0; } }
@keyframes ws-puls { 50% { transform: scale(1.25); } }
@keyframes ws-dreh { to { transform: rotate(360deg); } }
@keyframes ws-hopp { 50% { transform: translateY(-3px); } }

/* ---------- Anpassung an kleine Bildschirme und ruhige Darstellung ---------- */
@media (max-width: 1100px) { .kf-faehigkeiten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 980px) { .kf-faehigkeiten { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kf-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .kf-vorschau { grid-template-columns: 1fr; } .kf-faehigkeiten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kf-felder { grid-template-columns: 1fr; } .kf-feld { min-height: 0; } }
@media (prefers-reduced-motion: reduce) {
  .kf-bereit .kf-feld, .kf-bereit .kf-karte { opacity: 1; transform: none; transition: none; }
  .kf-innen, .kf-stapel span, .kf-feld { transition: none; }
  .werkzeug-symbol .ws-zeichnen { stroke-dashoffset: 0; animation: none !important; }
  .service-card:hover .werkzeug-symbol * { animation: none !important; }
}

/* ---------- Bildband: ein oder zwei Fotos mit sanftem Einblenden und leichtem Zoom ---------- */
.bildband { padding: 40px 0 28px; }
.bildband-raster { display: grid; gap: 20px; }
.bildband-raster.zwei { grid-template-columns: 1.4fr 1fr; }
.bildband figure { margin: 0; }
.bildband .bild-rahmen { border-radius: 22px; overflow: hidden; box-shadow: 0 18px 44px rgba(55, 12, 123, .14); aspect-ratio: 16 / 7; background: #efeaf6; }
.bildband-raster.zwei .bild-rahmen { aspect-ratio: auto; height: 360px; }
.bildband img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); transition: transform 1.6s cubic-bezier(.2, .8, .2, 1); }
.bildband figure:hover img { transform: scale(1.1); }
.bildband figcaption { margin-top: 10px; font-size: .86rem; color: #5d5868; line-height: 1.5; }
.bildband figcaption .bild-quelle { display: block; font-size: .74rem; color: #8a8494; margin-top: 2px; }
.kf-bereit.bildband-raster figure { opacity: 0; transform: translateY(26px); }
.kf-bereit.kf-sichtbar.bildband-raster figure { opacity: 1; transform: none; transition: opacity .8s ease var(--kf-verzug, 0s), transform .9s cubic-bezier(.2, .9, .25, 1.1) var(--kf-verzug, 0s); }
.kf-sichtbar.bildband-raster img { transform: scale(1); }
@media (max-width: 720px) { .bildband-raster.zwei { grid-template-columns: 1fr; } .bildband .bild-rahmen, .bildband-raster.zwei .bild-rahmen { aspect-ratio: 4 / 3; height: auto; } }
@media (prefers-reduced-motion: reduce) { .bildband img, .bildband figure:hover img { transform: none; transition: none; } .kf-bereit.bildband-raster figure { opacity: 1; transform: none; } }