/* ============================================================
   Coolkidz Kaufberater-Portal — portal.css
   Farben: coolkidz (#d1494c Rot, #ef9963 Orange, #e69a9c Rosa).
   Produktkarten-Anmutung an unsere Blogs angelehnt.
   ============================================================ */
:root{
  --primary:#d1494c; --primary-dark:#b23b3e; --secondary:#df932c; --accent:#5bb6d6;
  --pink:#e69a9c; --sky:#bfe3f2;
  --text:#4a4a4a; --text-dark:#333; --muted:#8a8a8a;
  --gray-50:#f9fafb; --gray-100:#f3f4f6; --gray-200:#e5e7eb; --gray-300:#d1d5db;
  --card-bd:#e6e6e6; --shadow:0 1px 4px rgba(0,0,0,.09);
  --head-h:158px; --side-w:288px;
}
@font-face{font-family:'Reddit Sans';src:url('../fonts/reddit-sans-latin.woff2') format('woff2');font-weight:200 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Reddit Sans';src:url('../fonts/reddit-sans-latin-ext.woff2') format('woff2');font-weight:200 900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Reddit Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.55;color:var(--text);background:#fff;-webkit-font-smoothing:antialiased;
  overflow:hidden; /* Panes scrollen intern */
}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-decoration:none;transition:color .15s}
a:hover{color:var(--secondary)}
.playful{font-family:'Reddit Sans',sans-serif;font-weight:700}

/* ===================== HIMMEL-HEADER (kompakt) ===================== */
.ck-header{
  position:relative;height:var(--head-h);overflow:hidden;
  background:linear-gradient(180deg,#8fd3ef 0%,#bfe6f5 55%,#e7f6fb 100%);
  border-bottom:4px solid var(--primary);
  z-index:10;
}
/* durchziehende Wolkenbahn */
.ck-header::after{
  content:'';position:absolute;left:0;top:6px;width:100%;height:120px;pointer-events:none;
  background-image:url('../header/wolken.png');background-repeat:repeat-x;background-size:auto 120px;
  opacity:.9;animation:ck-clouds 120s linear infinite;
}
@keyframes ck-clouds{0%{background-position-x:0}100%{background-position-x:1920px}}

/* einzelne treibende Wolke */
.ck-cloud{position:absolute;top:44px;width:210px;pointer-events:none;opacity:.95;animation:ck-drift 90s linear infinite}
.ck-cloud.c2{top:96px;width:150px;animation-duration:130s;animation-delay:-40s;opacity:.8}
@keyframes ck-drift{0%{left:-25%}100%{left:105%}}

/* Windmühle links (Gebäude statisch + Windrad dreht darüber) */
.ck-mill{position:absolute;left:20px;bottom:0;width:130px;height:150px;pointer-events:none;z-index:3}
.ck-mill .building{position:absolute;bottom:0;left:26px;height:118px;width:auto}
.ck-mill .blades{position:absolute;top:0;left:0;width:120px;height:120px;animation:ck-spin 12s linear infinite;transform-origin:50% 50%}
@keyframes ck-spin{0%{transform:rotateZ(0)}100%{transform:rotateZ(360deg)}}

/* Fuchs im Heißluftballon rechts */
.ck-balloon{position:absolute;right:26px;top:6px;height:150px;width:auto;pointer-events:none;z-index:4;animation:ck-float 5s ease-in-out infinite}
@keyframes ck-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(12px) rotate(2deg)}}

/* Logo + Claim mittig */
.ck-brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;z-index:5;pointer-events:none}
.ck-brand img{height:66px;width:auto;margin:0 auto;filter:drop-shadow(0 2px 3px rgba(0,0,0,.15))}
.ck-brand .claim{display:inline-block;margin-top:7px;font-size:16px;color:#fff;font-weight:700;
  background:rgba(209,73,76,.82);padding:3px 14px;border-radius:16px;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.ck-brand .claim b{color:#fff}

@media(max-width:1100px){
  .ck-balloon{width:92px;right:10px}
  .ck-mill{width:104px;height:104px}.ck-mill .blades{width:104px}.ck-mill .building{width:92px;left:6px}
  .ck-brand img{height:54px}
}

/* ===================== LAYOUT: Sidebar + Main (kein Header) ===================== */
.ck-shell{display:flex;height:100vh;overflow:hidden}

.ck-sidebar{
  width:var(--side-w);flex-shrink:0;height:100vh;overflow:hidden;
  display:flex;flex-direction:column;
  background:#fff;box-shadow:2px 0 10px rgba(0,0,0,.06);padding:0 20px;
  transition:width .22s ease, padding .22s ease;z-index:6;
}
/* Filter scrollen mittig; Logo oben & Account unten bleiben fix */
.ck-sidebar-scroll{flex:1;overflow-y:auto;margin:0 -20px;padding:0 20px 14px}
/* Eingeklappt = schmale Leiste (Rail) */
body.nav-collapsed .ck-sidebar{width:56px;padding-left:0;padding-right:0}
body.nav-collapsed .ck-sidebar .ck-logo,
body.nav-collapsed .ck-sidebar .ck-sidebar-scroll,
body.nav-collapsed .ck-sidebar .ck-account{display:none}

/* Logo-Kopf oben in der Sidebar */
.ck-logo{
  flex-shrink:0;background:#fff;
  display:flex;align-items:center;gap:8px;
  padding:16px 0 14px;border-bottom:1px solid var(--gray-100);
}
.ck-logo img{height:54px;width:auto}
/* Ein-/Ausklapp-Button — IMMER gleiche Optik, edel */
.ck-toggle-btn{
  flex-shrink:0;width:34px;height:34px;cursor:pointer;
  border:1px solid var(--gray-200);background:#fff;border-radius:9px;
  color:var(--primary);font-size:17px;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 3px rgba(0,0,0,.08);transition:all .15s;
}
.ck-toggle-btn:hover{border-color:var(--primary);box-shadow:0 2px 7px rgba(209,73,76,.18)}
.ck-collapse{margin-left:auto}

/* Rail (schmale Leiste beim Einklappen) */
.ck-rail{display:none}
body.nav-collapsed .ck-rail{display:flex;justify-content:center;padding-top:16px}

/* Account-Bereich unten in der Sidebar */
.ck-account{flex-shrink:0;background:#fff;margin:0 -20px;padding:12px 20px 14px;border-top:1px solid var(--gray-200)}
.ck-kids{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.ck-kid{display:flex;align-items:center;gap:9px;padding:6px 9px;border:1px solid var(--gray-200);border-radius:11px;background:#fff;cursor:pointer;transition:all .15s}
.ck-kid:hover{border-color:var(--primary);background:var(--gray-50)}
.ck-kid.on{border-color:var(--primary);background:rgba(209,73,76,.06)}
.ck-kid-av{width:32px;height:32px;border-radius:50%;background:var(--secondary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.ck-kid-meta{font-size:12.5px;line-height:1.25;text-align:left}
.ck-kid-meta b{display:block;color:var(--text-dark)}
.ck-kid-meta span{color:var(--muted)}
.ck-user{display:flex;align-items:center;gap:10px;width:100%;padding:7px;border:none;background:none;cursor:pointer;border-radius:11px;transition:background .15s}
.ck-user:hover{background:var(--gray-50)}
.ck-user-avatar{width:40px;height:40px;border-radius:50%;background:var(--gray-100);border:2px solid var(--gray-200);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.ck-user-text{display:flex;flex-direction:column;line-height:1.25;text-align:left}
.ck-user-text strong{font-size:13.5px;color:var(--text-dark)}
.ck-user-cta{font-size:12.5px;color:var(--primary);font-weight:700}
.ck-user-avatar.on{background:var(--primary);color:#fff;border-color:var(--primary);font-size:16px;font-weight:800}

/* Account-Modal + Formulare */
.ck-modal{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:20px}
.ck-modal[hidden]{display:none}
.ck-modal-box{position:relative;background:#fff;border-radius:16px;width:100%;max-width:420px;max-height:88vh;overflow-y:auto;padding:26px 26px 24px;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.ck-modal-x{position:absolute;top:10px;right:14px;border:none;background:none;font-size:26px;line-height:1;color:var(--muted);cursor:pointer}
.ck-modal-x:hover{color:var(--primary)}
.ck-mh{font-family:'Reddit Sans',sans-serif;font-size:28px;color:var(--primary);margin-bottom:8px}
.ck-mp{font-size:13.5px;color:var(--muted);margin-bottom:16px;line-height:1.5}
.ck-fl{display:block;font-size:13px;font-weight:700;color:var(--text-dark);margin:12px 0 5px}
.ck-in{width:100%;padding:9px 12px;border:1.5px solid var(--gray-300);border-radius:10px;font:inherit;font-size:14px}
.ck-in:focus{outline:none;border-color:var(--primary)}
.ck-btn{width:100%;margin-top:16px;background:var(--primary);color:#fff;font-weight:800;font-size:14px;border:none;border-radius:10px;padding:11px;cursor:pointer}
.ck-btn:hover{background:var(--primary-dark)}
.ck-btn-ghost{background:none;color:var(--muted);margin-top:8px}
.ck-btn-ghost:hover{background:var(--gray-100);color:var(--text-dark)}
.ck-gsel,.ck-ichips{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.ck-gopt,.ck-ichip{cursor:pointer;font-size:13px;font-weight:700;color:var(--text);background:#fff;border:1.5px solid var(--gray-300);border-radius:18px;padding:5px 12px;transition:all .12s}
.ck-gopt.on,.ck-ichip.on{background:var(--primary);border-color:var(--primary);color:#fff}
.ck-krow{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--gray-100);font-size:14px}
.ck-kdel{border:none;background:none;color:var(--muted);font-size:12.5px;cursor:pointer}
.ck-kdel:hover{color:var(--primary)}

/* Zähler-Zeile in der Sidebar */
.ck-side-count{font-size:13px;color:var(--muted);margin-bottom:16px;line-height:1.4}
.ck-side-count b{color:var(--primary)}

.facet{margin-bottom:22px}
.facet-title{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:800;letter-spacing:.03em;
  text-transform:uppercase;color:var(--text-dark);margin-bottom:9px}
.facet-title .soon{font-size:10px;font-weight:700;color:#fff;background:var(--secondary);border-radius:10px;padding:1px 7px;text-transform:none;letter-spacing:0}
.chip-row{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;user-select:none;
  font-size:13.5px;font-weight:700;color:var(--text);
  background:#fff;border:1.5px solid var(--gray-300);border-radius:20px;padding:5px 12px;transition:all .12s;
}
.chip:hover{border-color:var(--secondary)}
.chip.on{background:var(--primary);border-color:var(--primary);color:#fff}
.chip.disabled{opacity:.5;pointer-events:none;border-style:dashed}
.chip .emo{font-size:15px;line-height:1}
/* Interesse-Unterfilter (erscheinen unter dem aktiven Interesse) */
.subrow{display:flex;flex-wrap:wrap;gap:5px;margin:7px 0 3px;padding-left:9px;border-left:2px solid var(--gray-200)}
.subrow[hidden]{display:none}
.subchip{font-size:11.5px;font-weight:700;padding:3px 9px;background:var(--gray-50)}
.subchip .subn{font-size:10px;font-weight:400;color:var(--muted)}
.subchip.on .subn{color:#fff}
.facet-reset{display:inline-block;margin-top:6px;font-size:12.5px;color:var(--muted);cursor:pointer}
.facet-reset:hover{color:var(--primary)}

/* ===================== MAIN: Highscore-Sektionen ===================== */
.ck-main{flex:1;height:100%;overflow-y:auto;padding:22px 26px 80px;background:#fff}
.ck-main-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.ck-main-head h1{font-family:'Reddit Sans',sans-serif;font-size:34px;color:var(--primary);font-weight:700}
.ck-main-head .sub{font-size:14px;color:var(--muted)}
.ck-count{font-size:13.5px;color:var(--muted);margin-bottom:20px}
.ck-count b{color:var(--primary)}

.ck-section{margin-bottom:30px}
/* Kategorie-Kopf = Karteikarten-Reiter (orange) + "Vergleich lesen" rechts, wie auf den AI-Blogs */
.ck-section-head{display:flex;justify-content:space-between;align-items:flex-end;
  border-bottom:1px solid var(--gray-300);margin-bottom:16px}
.ck-tab{display:inline-block;background:var(--secondary);color:#fff;
  font-size:16px;font-weight:700;letter-spacing:.01em;line-height:1.55;
  padding:7px 20px 6px;border-radius:9px 9px 0 0;margin:0 0 -1px}
.ck-cmp-link{font-size:14px;font-weight:700;color:var(--primary);white-space:nowrap;padding-bottom:8px}
.ck-cmp-link:hover{text-decoration:underline}

.ck-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
@media(max-width:1500px){.ck-grid{grid-template-columns:repeat(5,1fr)}}
@media(max-width:1250px){.ck-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:980px){.ck-grid{grid-template-columns:repeat(3,1fr)}}

/* Bild-dominante Overlay-Kachel (wie AI-Blog-Hero-Karten) */
.ck-card{
  position:relative;height:290px;border-radius:10px;overflow:hidden;background:#eceff3;
  box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s;
}
.ck-card:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.16)}
.ck-rank{position:absolute;top:9px;left:9px;z-index:3;width:27px;height:27px;border-radius:50%;
  background:var(--primary);color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 5px rgba(0,0,0,.35)}
.ck-rank.g1{background:#e8b923}.ck-rank.g2{background:#9fa6ad}.ck-rank.g3{background:#c8804a}
.ck-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;background:#fff}
.ck-noimg{display:flex;align-items:center;justify-content:center;font-size:44px;color:#ccc}
.ck-overlay{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:40px 12px 12px;
  background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,0) 100%)}
.ck-title{color:#fff;font-size:13px;font-weight:700;line-height:1.3;margin-bottom:9px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.ck-priceRow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ck-price{color:#fff;font-size:20.5px;font-weight:800;line-height:1;text-shadow:0 1px 3px rgba(0,0,0,.6);white-space:nowrap}
.btn-buy{flex-shrink:0;background:var(--primary);color:#fff;font-weight:700;font-size:12.5px;
  border:none;border-radius:7px;padding:7px 13px;cursor:pointer;transition:background .15s;white-space:nowrap}
.btn-buy:hover{background:var(--primary-dark);color:#fff}

.ck-empty{padding:60px 20px;text-align:center;color:var(--muted);font-size:16px}
.ck-empty .big{font-size:40px;margin-bottom:10px}

/* dünne Fußzeile */
.ck-foot{padding:14px 26px;font-size:12px;color:var(--muted);border-top:1px solid var(--gray-200);background:var(--gray-50)}