/* ============================================================
   FitnessKiste — main.css  (DARK MODE)
   Konsolidierter <style>-Block aus den Design-Dateien (Home ist
   am vollstaendigsten) + zusaetzliche Klassen aus Artikel,
   Kategorie, Vergleich, Kontakt, Suche und den Rechtstext-Seiten.
   Dunkler Hintergrund, helle Schrift, neongruener „Volt"-Akzent.
   ============================================================ */

*{box-sizing:border-box}
:root{
  --fk-bg:#101210;--fk-bg2:#171A17;--fk-panel:#1E221E;--fk-panel2:#262B26;--fk-ink:#0B0C0B;--fk-paper:#FBFDFB;
  --fk-text:#F1F5F1;--fk-mut:#A6B0A5;--fk-mut2:#6E786D;
  --fk-volt:#B6FF2E;--fk-volt-d:#8FD400;--fk-lime:#7CE04A;--fk-cta:#B6FF2E;
  --fk-border:rgba(255,255,255,.1);--fk-shadow:0 10px 34px rgba(0,0,0,.4);--r:0.5rem
}
html{scroll-behavior:smooth}
#kategorien,#tests,#artikel,#newsletter,#faq,#rubriken,#vergleiche,#blog{scroll-margin-top:82px}
html,body{margin:0;padding:0;background:var(--fk-bg);color:var(--fk-text);font-family:'Barlow',system-ui,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:rgba(182,255,46,.28);color:#fff}
a{color:inherit;text-decoration:none}
input,button,textarea,select{font-family:inherit}
summary::-webkit-details-marker{display:none}summary::marker{content:''}
img{max-width:100%;height:auto}
.fk-d{font-family:'Anton',sans-serif;text-transform:uppercase;font-weight:400;letter-spacing:.005em}
.fk-k{font-family:'Barlow',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--fk-volt-d)}
.fk-eye{font-family:'Barlow',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--fk-volt-d)}

/* ---------- Scroll-Reveal (crash-safe: nur wenn JS die Klasse .fk-anim setzt) ----------
   WICHTIG: opacity:0 gilt NUR wenn JS laeuft und html.fk-anim gesetzt hat (siehe main.js).
   Faellt das JS aus / kann der Browser kein IntersectionObserver -> Klasse fehlt ->
   Inhalt ist IMMER sichtbar. So kann die Seite nie „leer" bleiben. */
@media (prefers-reduced-motion: no-preference){
  html.fk-anim [data-rv]{opacity:0;transform:translateY(22px);
    transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1),filter .7s ease;
    transition-delay:calc(var(--rvi,0)*70ms)}
  html.fk-anim [data-rv="left"]{transform:translateX(-52px)}
  html.fk-anim [data-rv="right"]{transform:translateX(52px)}
  html.fk-anim [data-rv="scale"]{transform:scale(.9)}
  html.fk-anim [data-rv].in{opacity:1;transform:none;filter:none}
  /* Scroll-getriebene Parallax-Tiefe + Ken-Burns (nur wo unterstuetzt; sonst
     bleibt alles statisch SICHTBAR -> kann nie leer werden). */
  @supports (animation-timeline: view()){
    [data-parallax]{animation:fkPar linear both;animation-timeline:view();animation-range:entry 0% exit 100%;will-change:transform}
    .fk-card__media img,.fk-card__media .fk-cimg,[data-kenburns] img,[data-kenburns] .fk-cimg{
      animation:fkKen linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    [data-kenburns] img,[data-kenburns] .fk-cimg{animation-name:fkKenWide}
  }
  @keyframes fkPar{from{transform:translateY(var(--par,34px))}to{transform:translateY(calc(var(--par,34px)*-1))}}
  @keyframes fkKen{from{transform:scale(1.13)}to{transform:scale(1)}}
  @keyframes fkKenWide{from{transform:scale(1.16) translateY(-2.5%)}to{transform:scale(1.02) translateY(2.5%)}}
  @supports (animation-timeline: scroll()){
    #fk-progress{animation:fkProgress linear;animation-timeline:scroll(root)}
    @keyframes fkProgress{to{transform:scaleX(1)}}
  }
}

/* ---------- Animierter Unterstrich-Link ---------- */
.fk-link{position:relative}
.fk-link::after{content:'';position:absolute;left:0;right:100%;bottom:-3px;height:2px;background:var(--fk-volt);transition:right .3s}
.fk-link:hover::after{right:0}

/* ---------- Buttons ---------- */
.fk-btn{transition:transform .2s,box-shadow .2s,filter .2s}
.fk-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(182,255,46,.3);filter:brightness(1.05)}

/* ---------- Keyframes ---------- */
@keyframes fkscroll{to{transform:translateX(-50%)}}

/* ---------- Marquee (Volt-Band) ---------- */
.fk-marq{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.fk-marq-in{display:flex;gap:0;white-space:nowrap;animation:fkscroll 22s linear infinite;will-change:transform}

/* ---------- Karten / Kacheln (Hover) ---------- */
.fk-card{transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s,border-color .3s}
.fk-card:hover{transform:translateY(-5px);box-shadow:0 22px 44px rgba(0,0,0,.5);border-color:var(--fk-volt)}
.fk-card:hover .fk-cimg,.fk-card:hover .fk-img{transform:scale(1.06)}
.fk-cat{transition:transform .3s,box-shadow .3s}
.fk-cat:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,.5)}
.fk-cat:hover .fk-img,.fk-cat:hover .fk-cimg{transform:scale(1.07)}
.fk-pin{opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s,filter .25s}
.fk-card:hover .fk-pin,.fk-cat:hover .fk-pin,.fk-pin:focus-visible{opacity:1;transform:none}
.fk-pin:hover{filter:brightness(1.08)}
@media(hover:none){.fk-pin{opacity:1;transform:none}}

/* ---------- FAQ (details) ---------- */
.fk-faq summary:hover .fk-fq{color:var(--fk-volt)}
.fk-faq[open] .fk-fic{background:var(--fk-volt);border-color:var(--fk-volt);color:var(--fk-ink);transform:rotate(45deg)}
.fk-faq[open] .fk-fq{color:var(--fk-volt)}

/* ---------- Bild-Platzhalter (dunkel, mit hellem Label) ---------- */
.fk-ph-img{display:block;width:100%;height:100%;background:linear-gradient(150deg,#20261F 0%,var(--fk-panel) 52%,#12160F 100%);position:relative}
.fk-ph-img::after{content:"FitnessKiste";position:absolute;inset:0;display:grid;place-items:center;font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(15px,3vw,24px);color:rgba(182,255,46,.5)}

/* ---------- Beitragskarte — KLASSENBASIERT (robust, unabhaengig von Inline-Styles) ----------
   Container ist ein <article> (KEIN verschachteltes <a>). Der ganze Klickbereich
   kommt ueber einen „stretched link" auf dem Titel (.fk-card__link::after). */
.fk-postgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;align-items:stretch}
.fk-postgrid--wide{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px}
@media(max-width:540px){.fk-postgrid{grid-template-columns:1fr;gap:18px}}
.fk-card{position:relative;display:flex;flex-direction:column;height:100%;border-radius:var(--r);overflow:hidden;background:var(--fk-panel);border:1px solid var(--fk-border);box-shadow:var(--fk-shadow);color:inherit;text-decoration:none}
.fk-card__link{color:inherit;text-decoration:none}
.fk-card__link::after{content:"";position:absolute;inset:0;z-index:1}
.fk-card__media{position:relative;display:block;aspect-ratio:4/3;min-height:150px;overflow:hidden;background:#0b0c0b}
.fk-card__media>img,.fk-card__media .fk-cimg,.fk-card__media .fk-img,.fk-card__media .fk-ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.fk-card__cat{position:absolute;left:0;top:0;z-index:3;padding:5px 12px;background:var(--fk-volt);color:var(--fk-ink);font-family:'Anton',sans-serif;text-transform:uppercase;font-size:10.5px;letter-spacing:.03em}
.fk-card__body{display:flex;flex-direction:column;flex:1;padding:16px 18px 18px}
.fk-card__title{margin:0;font-family:'Anton',sans-serif;text-transform:uppercase;font-size:18px;font-weight:400;line-height:1.08;color:#fff}
.fk-card__title a{color:#fff}
.fk-card__meta{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:12px;font-size:12px;font-weight:500;color:var(--fk-mut)}
.fk-card__meta .fk-dot{opacity:.5}
.fk-card__more{color:var(--fk-volt);font-weight:700}
/* Pinterest-„Merken"-Button als Overlay */
.fk-pin--mini,.fk-pin--card{position:absolute;top:12px;right:12px;z-index:4;background:#e60023;color:#fff;box-shadow:0 8px 20px rgba(230,0,35,.4);cursor:pointer}
.fk-pin--mini{display:grid;place-items:center;width:32px;height:32px;border-radius:50%}
.fk-pin--card{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:999px;font-size:11.5px;font-weight:800}

/* ---------- Artikel-Body (single / .fk-prose) — helle Schrift auf Dunkel ---------- */
.fk-prose>p{margin:0 0 20px;font-size:17px;line-height:1.8;color:var(--fk-text)}
.fk-prose h2{font-family:'Anton',sans-serif;text-transform:uppercase;font-weight:400;font-size:clamp(24px,3vw,32px);letter-spacing:.005em;margin:38px 0 12px;color:#fff}
.fk-prose h3{font-family:'Anton',sans-serif;text-transform:uppercase;font-weight:400;font-size:clamp(20px,2.4vw,25px);margin:30px 0 10px;color:#fff}
.fk-prose ul,.fk-prose ol{margin:0 0 20px;padding-left:22px}
.fk-prose li{font-size:17px;line-height:1.75;color:var(--fk-text);margin:0 0 8px}
.fk-prose strong{font-weight:700;color:#fff}
.fk-prose a{color:var(--fk-volt);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(182,255,46,.4)}
.fk-prose img{border-radius:var(--r);margin:30px 0;box-shadow:0 18px 44px rgba(0,0,0,.5)}
/* Mobile-Ueberlauf verhindern: Grid-/Flex-Spalten duerfen nicht durch breite
   Inhalte (Tabellen, Code, lange URLs) gesprengt werden. */
.fk-art,.fk-art>*,.fk-2col,.fk-2col>*,.fk-prose{min-width:0}
.fk-prose{overflow-wrap:break-word;word-wrap:break-word}
.fk-prose table{display:block;width:100%;max-width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.fk-prose .fk-ctable{min-width:0}
.fk-prose figure,.fk-prose .wp-block-table{max-width:100%;overflow-x:auto;margin-left:0;margin-right:0}
.fk-prose pre{max-width:100%;overflow-x:auto}
.fk-prose blockquote{margin:26px 0;padding:18px 24px;border-left:3px solid var(--fk-volt);font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(20px,2.4vw,24px);line-height:1.3;color:#fff}
.fk-prose blockquote p{margin:0;font-size:inherit;line-height:inherit;color:inherit}

/* ---------- Vergleichs-/Bestenlisten-Karten ---------- */
.fk-vrow{transition:transform .4s,box-shadow .4s}
.fk-vrow:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(0,0,0,.5)}
.fk-ctable{width:100%;border-collapse:collapse;min-width:560px}
.fk-ctable td,.fk-ctable th{padding:14px 16px;text-align:left;border-bottom:1px solid var(--fk-border);font-size:14px;color:var(--fk-text)}
.fk-ctable th{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--fk-mut)}

/* ---------- Rechtstext / Lese-Seiten ---------- */
.fk-legal h2{font-family:'Anton',sans-serif;text-transform:uppercase;font-weight:400;font-size:clamp(22px,3vw,28px);margin:34px 0 10px;color:#fff}
.fk-legal h3{font-family:'Anton',sans-serif;text-transform:uppercase;font-weight:400;font-size:18px;margin:24px 0 8px;color:#fff}
.fk-legal p{font-size:15px;line-height:1.75;color:var(--fk-mut);margin:0 0 12px}
.fk-legal ul,.fk-legal ol{margin:0 0 14px;padding-left:22px;font-size:15px;line-height:1.75;color:var(--fk-mut)}
.fk-legal strong{color:#fff;font-weight:700}
.fk-legal a{color:var(--fk-volt);text-decoration:underline;text-underline-offset:3px}

/* ---------- Formularfelder (Kontakt) ---------- */
.fk-in{padding:14px 16px;border-radius:var(--r);border:1px solid var(--fk-border);background:var(--fk-panel2);font-size:15px;color:var(--fk-text);outline:none;width:100%;transition:border-color .3s,box-shadow .3s}
.fk-in::placeholder{color:var(--fk-mut2)}
.fk-in:focus{border-color:var(--fk-volt);box-shadow:0 0 0 4px rgba(182,255,46,.14)}

/* ---------- WP-Pagination ---------- */
.fk-pagination{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:50px;flex-wrap:wrap}
.fk-pagination .page-numbers{display:grid;place-items:center;min-width:44px;height:44px;padding:0 14px;border-radius:var(--r);border:1px solid var(--fk-border);background:var(--fk-panel);font-family:'Anton',sans-serif;font-size:15px;color:var(--fk-text);transition:border-color .3s,color .3s}
.fk-pagination .page-numbers:hover{border-color:var(--fk-volt);color:var(--fk-volt)}
.fk-pagination .page-numbers.current{border-color:transparent;background:var(--fk-volt);color:var(--fk-ink)}
.fk-pagination .page-numbers.dots{border:none;background:transparent;color:var(--fk-mut2)}

/* ---------- Kommentare ---------- */
.fk-comments{max-width:760px;margin:48px auto 0;padding:0 clamp(20px,5vw,40px)}
.fk-comments .comment-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.fk-comments .comment-list ul.children{list-style:none;margin:14px 0 0 24px;padding-left:18px;border-left:2px solid var(--fk-border);display:flex;flex-direction:column;gap:16px}
.fk-comment-body{padding:22px 24px;border-radius:var(--r);background:var(--fk-panel);border:1px solid var(--fk-border);box-shadow:var(--fk-shadow)}
.fk-comments .comment-author{font-weight:700;color:#fff}
.fk-comments .comment-meta{font-size:12px;color:var(--fk-mut2);margin-bottom:8px}
.fk-comments p{font-size:14.5px;line-height:1.65;color:var(--fk-text)}
.fk-comment-form input[type=text],.fk-comment-form input[type=email],.fk-comment-form input[type=url],.fk-comment-form textarea{width:100%;padding:14px 16px;border-radius:var(--r);border:1px solid var(--fk-border);background:var(--fk-panel2);color:var(--fk-text);font-size:14.5px;outline:none;margin-bottom:14px;transition:border-color .3s,box-shadow .3s}
.fk-comment-form input:focus,.fk-comment-form textarea:focus{border-color:var(--fk-volt);box-shadow:0 0 0 4px rgba(182,255,46,.14)}
.fk-comment-form .submit{padding:14px 30px;border:none;border-radius:var(--r);font-family:'Anton',sans-serif;text-transform:uppercase;font-size:15px;color:var(--fk-ink);background:var(--fk-volt);cursor:pointer;transition:transform .3s}
.fk-comment-form .submit:hover{transform:translateY(-2px)}

/* ---------- Affiliate-Box-Shortcode ---------- */
.fk-affbox{margin:32px 0;background:var(--fk-panel);border:1px solid var(--fk-border);border-left:4px solid var(--fk-volt);border-radius:0 var(--r) var(--r) 0;padding:22px 24px;box-shadow:var(--fk-shadow)}

/* ---------- Skip-Link (a11y) ---------- */
.fk-skip{position:absolute;left:-9999px;top:0;z-index:300;padding:12px 20px;background:var(--fk-volt);color:var(--fk-ink);border-radius:0 0 var(--r) 0;font-weight:700}
.fk-skip:focus{left:0}

/* ---------- Nav (responsive) ---------- */
@media(max-width:620px){.fk-nav-d{display:none!important}.fk-hide-sm{display:none!important}}
@media(max-width:980px){.fk-hero{grid-template-columns:1fr!important}.fk-2col{grid-template-columns:1fr!important}}
/* Artikel-Seitenleiste, Vergleichskarte & feste Raster mobil voll umbrechen */
@media(max-width:900px){.fk-art{grid-template-columns:1fr!important}.fk-vrow,.fk-vcard{grid-template-columns:1fr!important}}

/* ---------- prefers-reduced-motion ---------- */
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto}[data-rv]{opacity:1;transform:none}.fk-marq-in{animation:none!important}}

/* Premium-Refinement 2026-07-14: klareres Rendering + kein Faux-Bold (Owner-Feedback: Hero unscharf/zu dick).
   Display-Font ist Anton = Single-Weight 400; font-weight:700 waere no-op/Faux-Bold (dicker), daher font-synthesis:none. */
.fk-d{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;font-synthesis:none}
.fk-card__title{font-synthesis:none}
.fk-prose h2{font-synthesis:none}
.fk-prose h3{font-synthesis:none}

/* kk-cls-v1:begin
 * Reserviert die Bildbox fuer die vier Bildklassen der Publish-Pipeline, auch
 * wenn im Markup weder width/height stehen (Amazon-CDN-Bilder haben keine
 * verlaesslichen Masse) noch der Beitrag sein Inline-<style> mitbringt.
 *
 * WICHTIG — Spezifitaet: alle Selektoren stehen bewusst in :where(), damit sie
 * exakt (0,1,0) wiegen, also GENAU so schwer wie das Inline-CSS der
 * Artikel-Templates (.kk-section-img{...}). Da dieses Stylesheet im <head>
 * liegt und das Beitrags-CSS spaeter im <body> folgt, gewinnt bei Gleichstand
 * das Beitrags-CSS -> die 4.268 Beitraege mit eigenem Inline-Block behalten
 * ihre Seitenverhaeltnisse (16/10, 4/3, 21/9 ...), hier greift nur der
 * Fallback. width/height-Attribute im <img> schlagen aspect-ratio ohnehin
 * nicht, weil height:auto gesetzt ist.
 *
 * Nur <img> wird getroffen: .kk-hero ist auf der Startseite AUCH ein
 * Grid-Container (Hero-Sektion), und der Legacy-Hero ist ein
 * <figure class="wp-block-image kk-hero"> mit width/height am inneren <img>.
 * Beide bleiben unberuehrt.
 */
:where(img).kk-hero { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
:where(img).kk-section-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
:where(img).kk-product-img { width: 136px; height: 136px; object-fit: contain; }
:where(a).kk-aff-img-link { display: block; width: 100%; aspect-ratio: 1 / 1; }
:where(img).kk-aff-img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 520px) {
	:where(img).kk-product-img { width: 100%; height: 160px; }
}
/* kk-cls-v1:end */