/* ============================================================
   KlickKiste Cinematic — main.css
   Konsolidierter <style>-Block aus den Design-Dateien (Home ist
   am vollstaendigsten) + zusaetzliche Klassen aus Artikel,
   Kategorie, Vergleich, Kontakt, Suche und den Rechtstext-Seiten.
   ============================================================ */

*{box-sizing:border-box}
:root{--ivory:#fdf5e7;--cream:#fae3c4;--ink:#04191c;--sage:#304946;--forest:#014e30;--forest2:#0a7a48;--mut:rgba(4,25,28,.62);--mut2:rgba(4,25,28,.42);--line:rgba(4,25,28,.12);--clay:#c2703d;--olive:#6b8e3d;--ochre:#c99a52;--rose:#b5654d;--teal:#2c6e6a}
html{scroll-behavior:smooth}
#rubriken,#vergleiche,#blog,#newsletter,#faq{scroll-margin-top:78px}
html,body{margin:0;padding:0;background:var(--ivory);color:var(--ink);font-family:'Manrope',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:rgba(1,78,48,.16)}
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}
.kk-d{font-family:'Newsreader',Georgia,serif}
.kk-eye{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--forest)}

/* ---------- Scroll-Reveal ---------- */
[data-rv]{opacity:0;transform:translateY(32px);transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1)}
[data-rv].in{opacity:1;transform:none}

/* ---------- Animierter Unterstrich-Link ---------- */
.kk-ul{position:relative}
.kk-ul::after{content:'';position:absolute;left:0;right:100%;bottom:-3px;height:1.5px;background:currentColor;transition:right .35s ease}
.kk-ul:hover::after{right:0}

/* ---------- Keyframes ---------- */
@keyframes kkFloat{0%,100%{transform:translateY(0) rotateX(8deg)}50%{transform:translateY(-14px) rotateX(8deg)}}
@keyframes kkHint{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(8px);opacity:1}}
@keyframes kkMarq{to{transform:translateX(-50%)}}
@keyframes kkTwinkle{0%,100%{opacity:.06;transform:scale(.7)}50%{opacity:.4;transform:scale(1)}}
@keyframes kkFaqIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes kk4float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-14px) rotate(-4deg)}}
.kk-marq{animation:kkMarq 42s linear infinite;will-change:transform}

/* ---------- Karten / Kacheln (Hover) ---------- */
.kk-card{transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .5s}
.kk-card:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(4,25,28,.16)}
.kk-card:hover .kk-cimg{transform:scale(1.07)}
.kk-card:hover .kk-go{transform:translateX(5px)}
.kk-tile{transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .5s}
.kk-tile:hover{transform:translateY(-7px);box-shadow:0 28px 56px rgba(4,25,28,.18)}
.kk-tile:hover .kk-cimg{transform:scale(1.07)}
.kk-pin{opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s,filter .25s}
.kk-tile:hover .kk-pin,.kk-card:hover .kk-pin,.kk-pin:focus-visible{opacity:1;transform:none}
.kk-pin:hover{filter:brightness(1.08)}
@media(hover:none){.kk-pin{opacity:1;transform:none}}

/* ---------- Rubriken-Mosaik (Home) ---------- */
.kk-catgrid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:16px;grid-template-areas:"a a b b" "a a c d" "e e f f"}
.kk-feat{display:grid;gap:18px}
.kk-row{transition:background .3s,transform .3s,box-shadow .3s}
.kk-row:hover{background:rgba(1,78,48,.04);transform:translateX(4px);box-shadow:0 10px 26px rgba(4,25,28,.08)}
.kk-row:hover .kk-rowthumb img{transform:scale(1.09)}
@media(max-width:880px){.kk-catgrid{grid-template-columns:1fr 1fr;grid-auto-rows:172px;grid-template-areas:"a a" "b b" "c d" "e e" "f f"}.kk-feat{grid-template-columns:1fr!important}}
@media(max-width:560px){.kk-catgrid{grid-template-columns:1fr;grid-auto-rows:158px;grid-template-areas:"a" "a" "b" "c" "d" "e" "f"}}

/* ---------- Spotlight-Button (Cursor-Glow) ---------- */
.kk-btn-spot{position:relative;overflow:hidden}
.kk-btn-spot::before{content:'';position:absolute;inset:0;background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.28),transparent 60%);opacity:0;transition:opacity .3s}
.kk-btn-spot:hover::before{opacity:1}

/* ---------- Interaktive Kiste (Hero) ---------- */
.kk-lid{transition:transform .85s cubic-bezier(.34,1.45,.5,1)}
.kk-box3d.open .kk-lid{transform:rotateX(-122deg)}
.kk-chip{opacity:0;transform:translate(-50%,8px) scale(.8);transition:opacity .55s ease,transform .65s cubic-bezier(.34,1.56,.64,1)}
.kk-box3d.open .kk-chip{opacity:1;transform:translate(-50%,var(--ty,-90px)) scale(1)}

/* ---------- FAQ (details) ---------- */
.kk-faq summary:hover .kk-fq{color:var(--forest)}
.kk-faq[open] .kk-fic{transform:rotate(135deg);background:var(--forest);border-color:var(--forest);color:var(--cream)}
.kk-faq[open] .kk-fn{color:var(--forest)}
.kk-faq[open] > .kk-fa{animation:kkFaqIn .42s cubic-bezier(.22,.61,.36,1)}

/* ---------- Bild-Platzhalter (kein <image-slot> mehr) ---------- */
.kk-ph-img{display:block;width:100%;height:100%;background:linear-gradient(150deg,#f6ead2 0%,var(--cream) 52%,#eed4a8 100%);position:relative}
.kk-ph-img::after{content:"KlickKiste";position:absolute;inset:0;display:grid;place-items:center;font-family:'Newsreader',serif;font-style:italic;font-size:clamp(16px,3vw,26px);color:rgba(1,78,48,.32);letter-spacing:.01em}

/* ---------- Beitragskarte — KLASSENBASIERT (robust, unabhaengig von Inline-Styles) ----------
   Layout/Optik kommen komplett aus diesen Klassen, damit Karten auch dann
   korrekt aussehen, wenn Inline-Styles fehlen (Optimizer/AMP/alte Datei). */
.kk-postgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px;align-items:stretch}
.kk-postgrid--wide{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px}
@media(max-width:540px){.kk-postgrid{grid-template-columns:1fr;gap:18px}}
.kk-card{position:relative;display:flex;flex-direction:column;height:100%;border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--line,rgba(4,25,28,.12));box-shadow:0 12px 32px rgba(4,25,28,.06);color:inherit;text-decoration:none}
.kk-card__link{color:inherit;text-decoration:none}
.kk-card__link::after{content:"";position:absolute;inset:0;z-index:1}
.kk-card__media{position:relative;display:block;aspect-ratio:4/3;min-height:150px;overflow:hidden;background:linear-gradient(150deg,#f6ead2,#fae3c4 55%,#eed4a8)}
.kk-card__media>img,.kk-card__media .kk-cimg,.kk-card__media .kk-ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kk-card__cat{position:absolute;left:12px;top:12px;z-index:3;padding:5px 11px;border-radius:999px;background:var(--forest,#014e30);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.03em}
.kk-card__body{display:flex;flex-direction:column;flex:1;padding:18px 20px}
.kk-card__title{margin:0;font-family:'Newsreader',Georgia,serif;font-size:20px;font-weight:600;line-height:1.2;color:var(--ink,#04191c)}
.kk-card__meta{display:flex;align-items:center;gap:9px;margin-top:auto;padding-top:12px;font-size:12px;font-weight:600;color:var(--mut,rgba(4,25,28,.62))}
.kk-card__meta .kk-dot{opacity:.5}
/* Pinterest-"Merken"-Button als Overlay (klassenbasiert) */
.kk-pin--mini,.kk-pin--card{position:absolute;top:13px;right:13px;z-index:4;background:#e60023;color:#fff;box-shadow:0 8px 20px rgba(230,0,35,.4);cursor:pointer}
.kk-pin--mini{display:grid;place-items:center;width:32px;height:32px;border-radius:50%}
.kk-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 / .kk-prose) ---------- */
.kk-prose>p{margin:0 0 20px;font-size:17px;line-height:1.8;color:rgba(4,25,28,.82)}
.kk-prose h2{font-family:'Newsreader',serif;font-weight:600;font-size:clamp(24px,3vw,30px);letter-spacing:-.01em;margin:38px 0 12px;color:var(--ink)}
.kk-prose h3{font-family:'Newsreader',serif;font-weight:600;font-size:clamp(20px,2.4vw,25px);margin:30px 0 10px;color:var(--ink)}
.kk-prose ul,.kk-prose ol{margin:0 0 20px;padding-left:22px}
.kk-prose li{font-size:17px;line-height:1.75;color:rgba(4,25,28,.82);margin:0 0 8px}
.kk-prose strong{font-weight:700;color:var(--ink)}
.kk-prose a{color:var(--forest);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(1,78,48,.4)}
.kk-prose img{border-radius:14px;margin:30px 0;box-shadow:0 18px 44px rgba(4,25,28,.12)}
.kk-prose blockquote{margin:26px 0;padding:18px 24px;border-left:3px solid var(--olive);font-family:'Newsreader',serif;font-size:clamp(20px,2.4vw,22px);font-style:italic;line-height:1.5;color:var(--ink)}
.kk-prose blockquote p{margin:0;font-size:inherit;line-height:inherit;color:inherit}

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

/* ---------- Rechtstext / Lese-Seiten ---------- */
.kk-legal h2{font-family:'Newsreader',serif;font-weight:600;font-size:clamp(22px,3vw,28px);letter-spacing:-.01em;margin:34px 0 10px;color:var(--ink)}
.kk-legal h3{font-family:'Newsreader',serif;font-weight:600;font-size:18px;margin:24px 0 8px;color:var(--ink)}
.kk-legal p{font-size:15px;line-height:1.75;color:var(--mut);margin:0 0 12px}
.kk-legal ul,.kk-legal ol{margin:0 0 14px;padding-left:22px;font-size:15px;line-height:1.75;color:var(--mut)}
.kk-legal strong{color:var(--ink);font-weight:700}
.kk-legal a{color:var(--forest);text-decoration:underline;text-underline-offset:3px}

/* ---------- Formularfelder (Kontakt) ---------- */
.kk-in{padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:#fff;font-size:15px;color:var(--ink);outline:none;width:100%;transition:border-color .3s}
.kk-in:focus{border-color:var(--forest);box-shadow:0 0 0 4px rgba(1,78,48,.08)}

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

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

/* ---------- Affiliate-Box-Shortcode ---------- */
.kk-affbox{margin:32px 0;background:#fff;border:1px solid var(--line);border-left:4px solid var(--forest);border-radius:0 16px 16px 0;padding:22px 24px;box-shadow:0 14px 34px rgba(4,25,28,.07)}

/* ---------- Skip-Link (a11y) ---------- */
.kk-skip{position:absolute;left:-9999px;top:0;z-index:300;padding:12px 20px;background:#fff;color:var(--ink);border-radius:0 0 12px 0}
.kk-skip:focus{left:0}

/* ---------- Nav (responsive) ---------- */
@media(max-width:680px){.kk-nav-d{display:none!important}.kk-hide-sm{display:none!important}}
@media(max-width:960px){.kk-2col{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}.kk-box3d{transform:rotateX(8deg)!important}}