/*
  CreatorCycle UI Framework – cc.css
  Version: 0.1.1
  Theme: Charcoal & Emerald

  =============================
  TABLE OF CONTENTS
  =============================
  0. Base / Reset
  1. CSS Variables (Theme)
  2. Typography (Headings, Text, Code)
  3. Layout Utilities (Spacing, Flex, Grid Helpers)
  4. 12-Column Grid (Responsive)
  5. Containers & Sections
  6. Buttons (Primary, Secondary, Ghost, Danger, Link)
  7. Forms (Inputs, Selects, Checkboxes, Radios, Switches, Range)
  8. Navbars & Menus (Topbar, Sidebar, Offcanvas)
  9. Tables (Striped, Hover, Dense)
 10. Badges & Labels & Pills
 11. Alerts (Info, Success, Warning, Danger)
 12. Progress (Bars & Circular)
 13. Modals
 14. Dropdowns
 15. Tooltips
 16. Tabs
 17. Accordions
 18. Carousel / Slideshow
 19. Breadcrumbs & Pagination
 20. Cards & Panels
 21. Images & Figures (Responsive)
 22. Media Queries (Breakpoints)
 23. Print Styles (Light)
 24. Page Content Layout (NEW)

  Notes:
  - Mobile-first, responsive.
  - Class prefix: cc-*
  - Pair with cc.js for interactivity.
*/

/* ----------------------------------
   0. Base / Reset
---------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{line-height:1.15;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  line-height:1.6;
  background:var(--cc-bg);
  color:var(--cc-text);
  overflow-x:hidden; /* prevent stray horizontal scroll */
}
main{display:block}
h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.25rem}h4{font-size:1.125rem}h5{font-size:1rem}h6{font-size:.875rem}
hr{height:0;border:0;border-top:1px solid var(--cc-border)}
pre,code,kbd,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.95em}
img,svg,video,canvas{max-width:100%;height:auto;display:block}
a{background-color:transparent;color:var(--cc-link);text-decoration:none;}
a:hover{text-decoration:none; color: #dafff5;}
ul,ol{padding-left:1.2rem;margin:0 0 1rem}
blockquote{margin:0;padding:.75rem 1rem;border-left:3px solid var(--cc-em)}
:focus-visible{outline:3px solid #00a87866;outline-offset:2px}
[hidden]{display:none!important}

/* Avoid 100vw pitfalls on mobile */
:root{--vw:100vw}
@supports (width: 100dvw){
  :root{--vw:100dvw}
}

/* ----------------------------------
   1. CSS Variables (Theme)
---------------------------------- */
:root{
  --cc-bg:#111418;
  --cc-surface:#151a1f;
  --cc-surface-2:#0f151a;
  --cc-border:#1b2229;
  --cc-muted:#A6B3BC;
  --cc-text:#E9EDF0;
  --cc-link:#9BE6D2;
  --cc-brand:#00A878;
  --cc-brand-deep:#02685E;
  --cc-success:#1ED760;
  --cc-warning:#E4A951;
  --cc-danger:#E85C5C;

  --cc-radius:14px;
  --cc-radius-lg:18px;
  --cc-shadow:0 10px 30px rgba(0,0,0,.35);
  --cc-ring:0 0 0 2px #00A87855, 0 8px 24px #00A8781f;

  --cc-h1:clamp(2rem,4vw,3rem);
  --cc-h2:clamp(1.5rem,3vw,2.25rem);
  --cc-h3:clamp(1.25rem,2.2vw,1.6rem);
  --cc-h4:1.125rem; --cc-h5:1rem; --cc-h6:.875rem;

  --cc-navbar-h:64px;
  --cc-container-max:1200px;
  --cc-gutter:16px;
  --cc-space:.25rem;
}

/* ----------------------------------
   2. Typography
---------------------------------- */
.cc-h1{font-size:var(--cc-h1);line-height:1.1;margin:.3em 0;font-weight:800;word-wrap:break-word}
.cc-h2{font-size:var(--cc-h2);line-height:1.15;margin:.4em 0;font-weight:700}
.cc-h3{font-size:var(--cc-h3);line-height:1.2;margin:.5em 0;font-weight:700}
.cc-lead{font-size:1.125rem;color:var(--cc-muted)}
.cc-small{font-size:.875rem;color:var(--cc-muted)}
.cc-muted{color:var(--cc-muted)}
.cc-hr{border:0;border-top:1px solid var(--cc-border);margin:1rem 0}
.cc-mark{
  display:inline-block;
  position:relative;
  background:linear-gradient(145deg,var(--cc-brand),var(--cc-brand-deep));
  color:#061512;
  padding:.1em .45em;
  border-radius:.35em;
  line-height:1.25;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

.cc-kbd{padding:.2em .45em;border:1px solid var(--cc-border);border-bottom-width:2px;border-radius:.4em;background:var(--cc-surface-2);color:var(--cc-text)}

/* Code blocks */
pre.cc-code{background:var(--cc-surface-2);border:1px solid var(--cc-border);border-radius:var(--cc-radius);padding:1rem;overflow:auto;max-width:100%}
code.cc-inline{background:var(--cc-surface-2);padding:.15rem .35rem;border:1px solid var(--cc-border);border-radius:.35rem}

/* ----------------------------------
   3. Layout Utilities
---------------------------------- */
.cc-container{
  width:100%;
  max-width:var(--cc-container-max);
  margin:0 auto;
  padding:0 1rem;
}
.cc-section{padding:clamp(2rem,4vw,3rem) 0}

/* Spacing utilities */
[class*="cc-m"]{}
[class*="cc-p"]{}
.cc-m-0{margin:0}.cc-m-1{margin:calc(var(--cc-space)*1)}.cc-m-2{margin:calc(var(--cc-space)*2)}.cc-m-3{margin:calc(var(--cc-space)*3)}.cc-m-4{margin:calc(var(--cc-space)*4)}
.cc-p-0{padding:0}.cc-p-1{padding:calc(var(--cc-space)*1)}.cc-p-2{padding:calc(var(--cc-space)*2)}.cc-p-3{padding:calc(var(--cc-space)*3)}.cc-p-4{padding:calc(var(--cc-space)*4)}
.cc-mx-auto{margin-left:auto;margin-right:auto}

/* Flex helpers */
.cc-flex{display:flex;min-width:0}
.cc-inline-flex{display:inline-flex}
.cc-center{display:grid;place-items:center}
.cc-items-center{align-items:center}.cc-justify-between{justify-content:space-between}.cc-justify-center{justify-content:center}
.cc-gap-1{gap:.5rem}.cc-gap-2{gap:.75rem}.cc-gap-3{gap:1rem}

/* Shadows, radius */
.cc-card{background:linear-gradient(180deg,var(--cc-surface),#0f1317);border:1px solid var(--cc-border);border-radius:var(--cc-radius-lg);padding:1rem;box-shadow:var(--cc-shadow)}
.cc-pill{display:inline-flex;gap:.5rem;align-items:center;background:var(--cc-surface-2);border:1px solid var(--cc-border);padding:.35rem .6rem;border-radius:999px;color:var(--cc-muted)}

/* ----------------------------------
   4. 12-Column Grid (Responsive)
---------------------------------- */
.cc-row{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--cc-gutter);
  min-width:0; /* prevent overflow */
}
[class^="cc-col-"]{min-width:0}
.cc-col-1{grid-column:span 1}.cc-col-2{grid-column:span 2}.cc-col-3{grid-column:span 3}.cc-col-4{grid-column:span 4}.cc-col-5{grid-column:span 5}.cc-col-6{grid-column:span 6}.cc-col-7{grid-column:span 7}.cc-col-8{grid-column:span 8}.cc-col-9{grid-column:span 9}.cc-col-10{grid-column:span 10}.cc-col-11{grid-column:span 11}.cc-col-12{grid-column:span 12}
/* Breakpoints: sm≥576, md≥768, lg≥992, xl≥1200 */
@media (min-width:576px){.cc-sm-6{grid-column:span 6}.cc-sm-12{grid-column:span 12}}
@media (min-width:768px){.cc-md-4{grid-column:span 4}.cc-md-6{grid-column:span 6}.cc-md-8{grid-column:span 8}.cc-md-12{grid-column:span 12}}
@media (min-width:992px){.cc-lg-3{grid-column:span 3}.cc-lg-4{grid-column:span 4}.cc-lg-6{grid-column:span 6}.cc-lg-8{grid-column:span 8}.cc-lg-12{grid-column:span 12}}
@media (min-width:1200px){.cc-xl-3{grid-column:span 3}.cc-xl-4{grid-column:span 4}.cc-xl-6{grid-column:span 6}.cc-xl-8{grid-column:span 8}.cc-xl-12{grid-column:span 12}}

/* ----------------------------------
   5. Containers & Sections
---------------------------------- */
.cc-hero{padding:4rem 0}
.cc-surface{background:var(--cc-surface);border:1px solid var(--cc-border);border-radius:var(--cc-radius);padding:1rem}

/* ----------------------------------
   6. Buttons
---------------------------------- */
.cc-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-radius:12px;border:1px solid var(--cc-border);background:var(--cc-surface-2);color:var(--cc-text);cursor:pointer;transition:.2s ease;user-select:none}
.cc-btn:hover{transform:translateY(-1px)}
.cc-btn:focus{outline:none;box-shadow:var(--cc-ring)}
.cc-btn.cc-primary{background:linear-gradient(145deg,var(--cc-brand),var(--cc-brand-deep));border-color:#0f3c36;color:#061512;font-weight:700}
.cc-btn.cc-secondary{background:#11181f;border-color:#2a3a44;color:var(--cc-text)}
.cc-btn.cc-ghost{background:transparent}
.cc-btn.cc-danger{background:#2a1416;border-color:#4a1e22;color:#ffd6d6}
.cc-btn.cc-link{padding:0;background:none;border:none;color:var(--cc-link)}
.cc-btn.cc-block{display:flex;width:100%;justify-content:center}

/* ----------------------------------
   7. Forms
---------------------------------- */
.cc-field{display:grid;gap:.35rem}
.cc-label{font-weight:600}
.cc-input,.cc-textarea,.cc-select{background:var(--cc-surface-2);border:1px solid var(--cc-border);border-radius:12px;color:var(--cc-text);padding:.75rem .9rem;outline:none;width:100%}
.cc-input:focus,.cc-textarea:focus,.cc-select:focus{border-color:#1d3c39;box-shadow:0 0 0 3px #00a87833}
.cc-help{color:var(--cc-muted);font-size:.875rem}

/* Checkboxes & Radios */
.cc-check{display:flex;align-items:center;gap:.5rem}
.cc-check input{appearance:none;width:18px;height:18px;border:1px solid var(--cc-border);border-radius:4px;background:var(--cc-surface-2);display:grid;place-items:center}
.cc-check input:checked{background:linear-gradient(145deg,var(--cc-brand),var(--cc-brand-deep));border-color:#1b594f}
.cc-radio input{appearance:none;width:18px;height:18px;border:1px solid var(--cc-border);border-radius:50%;background:var(--cc-surface-2)}
.cc-radio input:checked{background:radial-gradient(circle at 50% 50%, var(--cc-brand) 45%, transparent 46%)}

/* Switch */
.cc-switch{position:relative;width:42px;height:24px;background:var(--cc-surface-2);border:1px solid var(--cc-border);border-radius:999px}
.cc-switch::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;background:#cfe0e8;border-radius:999px;transition:.2s}
.cc-switch.is-on{background:linear-gradient(145deg,var(--cc-brand),var(--cc-brand-deep));border-color:#1b594f}
.cc-switch.is-on::after{transform:translateX(18px);background:#061512}

/* Range */
.cc-range{appearance:none;width:100%;height:4px;border-radius:999px;background:#0f151a;border:1px solid var(--cc-border)}
.cc-range::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:var(--cc-brand);border:2px solid #0d2b26}

/* ===========================
   Navbar / Navigation
   =========================== */

/* =========================
   NAVBAR + DROPDOWNS
   ========================= */

/* NAV-LEISTE BASIS ---------------------------------------------------- */

.cc-navbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #020617;
  border-bottom: 1px solid rgba(15,23,42,0.95);
}

.cc-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 56px;
}

/* Brand */

.cc-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}

.cc-brand-badge {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  background: linear-gradient(135deg,#22c55e,#16a34a);
  color: #02120b;
}

.cc-brand-name {
  font-weight: 600;
  font-size: .9rem;
}

/* MOBILE TOGGLE ------------------------------------------------------- */

.cc-nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  border: none;
  background: none;
  cursor: pointer;
}

.cc-nav-toggle span {
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: #e5e7eb;
}

/* WRAPPER & LINK-ROW -------------------------------------------------- */

.cc-nav-links-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.cc-nav-links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* DROPDOWNS ----------------------------------------------------------- */

.cc-dropdown {
  position: relative;
}

/* Button, der das Dropdown öffnet */
.cc-drop-btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  gap: 0.25rem;

  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(226,232,240,0.92);
  border: 1px solid transparent;
  background-color: rgba(15,23,42,0.9);
  box-shadow: 0 0 0 1px rgba(15,23,42,0.9);
  transition:
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    color .15s ease;
}

.cc-drop-btn:hover,
.cc-dropdown.is-open .cc-drop-btn {
  background: radial-gradient(circle at top,#22c55e22,transparent 55%),
              rgba(15,23,42,0.96);
  border-color: rgba(34,197,94,0.6);
  box-shadow: 0 0 0 1px rgba(22,163,74,0.35);
}

/* Menü selbst */
.cc-drop-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  padding: 0.35rem;
  border-radius: 0.75rem;
  background: rgba(15,23,42,0.98);
  border: 1px solid rgba(31,41,55,0.9);
  box-shadow: 0 18px 40px rgba(0,0,0,0.65);

  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition:
    opacity .15s ease,
    transform .15s ease;
  z-index: 50;
}

/* sichtbar, wenn .is-open durch JS gesetzt wurde */
.cc-dropdown.is-open .cc-drop-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Links im Menü */
.cc-drop-item {
  display: block;
  padding: 0.45rem 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.8rem;
  color: rgba(209,213,219,0.95);
  text-decoration: none;
  white-space: nowrap;
}

.cc-drop-item:hover {
  background: rgba(15,118,110,0.5);
}

/* Login / CTA rechts im Gast-Modus */

.cc-nav-link {
  font-size: 0.82rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  text-decoration: none;
  color: rgba(229,231,235,0.96);
}

.cc-nav-link:hover {
  background: rgba(15,23,42,0.85);
}

.cc-nav-cta {
  margin-left: 0.25rem;
}

/* MOBILE: Dropdowns stapeln ------------------------------------------ */

@media (max-width: 768px) {
  .cc-nav-toggle {
    display: flex;
  }

  .cc-nav-links-wrapper {
    position: absolute;
    inset: 56px 0 auto 0;
    background: rgba(15,23,42,0.98);
    border-bottom: 1px solid rgba(31,41,55,0.9);
    display: none;
  }
  .cc-nav-links-wrapper.is-open {
    display: block;
  }

  .cc-nav-links {
    flex-direction: column;
    align-items: flex-start;
    padding: 0.75rem 1rem 1rem;
  }

  .cc-drop-menu {
    position: static;
    margin-top: 0.25rem;
    width: 100%;
  }
}


/* ========== STATE-KLASSEN PER JS ========== */

/* Wenn ein Menüpunkt offen ist */

.cc-nav-item.is-open > .cc-nav-link-root {
  background: radial-gradient(circle at 0 0, rgba(56,189,248,0.25), transparent 55%);
  border-color: rgba(56,189,248,0.7);
  box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 10px 32px rgba(15,23,42,0.9);
  color: #e5f4ff;
}

.cc-nav-item.is-open > .cc-nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Kein :hover-Open mehr! (falls noch alte Regeln in der Datei waren, raus damit)
   z.B. sowas NICHT mehr verwenden:
   .cc-nav-item:hover > .cc-nav-dropdown { ... }
*/

/* ========== RESPONSIVE NAVBAR ========== */

@media (max-width: 900px) {
  .cc-nav {
    min-height: 56px;
  }

  .cc-nav-toggle {
    display: inline-flex;
  }

  .cc-nav-links-wrapper {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    padding: 0.5rem 1rem 1rem;
    background: linear-gradient(to bottom, rgba(15,23,42,0.97), rgba(15,23,42,0.95));
    border-bottom: 1px solid rgba(30,64,175,0.8);
    box-shadow: 0 18px 45px rgba(15,23,42,0.9);
    display: none;
    flex-direction: column;
    gap: 0.75rem;
  }

  .cc-nav-links-wrapper.is-open {
    display: flex;
  }

  .cc-nav-root-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  .cc-nav-item {
    width: 100%;
  }

  .cc-nav-link-root {
    width: 100%;
    justify-content: space-between;
  }

  .cc-nav-dropdown {
    position: static;
    margin-top: 0.4rem;
    transform: translateY(0);
    box-shadow: 0 10px 30px rgba(15,23,42,0.9);
  }

  .cc-nav-links {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    border-top: 1px solid rgba(30,64,175,0.7);
    padding-top: 0.75rem;
  }

  .cc-nav-link,
  .cc-nav-link-small,
  .cc-nav-cta {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 520px) {
  .cc-brand-name {
    display: none;
  }
}

/* =========================
   NAVBAR / BRAND UPGRADE
   ========================= */

.cc-navbar {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(20px);
  background: radial-gradient(circle at top left, rgba(34,197,94,0.22), transparent 55%),
              radial-gradient(circle at bottom right, rgba(56,189,248,0.15), transparent 55%),
              rgba(15,23,42,0.92);
  border-bottom: 1px solid rgba(148,163,184,0.3);
}

.cc-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 64px;
}

/* Brand mit schwebendem CC-Logo */

.cc-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}

.cc-brand-badge {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 0%, #a7f3d0, #22c55e 40%, #065f46 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(16,185,129,0.55);
  animation: cc-logo-float 6s ease-in-out infinite;
}

.cc-brand-orb {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 25% 0%, rgba(255,255,255,0.75), transparent 45%);
  mix-blend-mode: screen;
  opacity: 0.7;
}

.cc-brand-text {
  position: relative;
  z-index: 1;
  font-weight: 800;
  letter-spacing: 0.03em;
  font-size: 0.9rem;
  color: #022c22;
}

.cc-brand-badge:hover {
  animation: cc-logo-spin 0.75s ease-in-out;
}

.cc-brand-name {
  font-weight: 600;
  font-size: 1rem;
}

/* Animationen */

@keyframes cc-logo-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-2px) scale(1.03); }
}

@keyframes cc-logo-spin {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(12deg) scale(1.05); }
  100% { transform: rotate(0deg) scale(1); }
}

/* Nav Groups */

.cc-nav-links-wrapper {
  display: flex;
  justify-content: flex-end;
}

.cc-nav-links {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}

.cc-nav-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Mobile Collapse (nutzt deine vorhandene .is-open-Logik) */
@media (max-width: 768px) {
  .cc-nav-links-wrapper {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: rgba(15,23,42,0.98);
    border-bottom: 1px solid rgba(148,163,184,0.2);
    transform-origin: top;
    transform: scaleY(0.9);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
  }
  .cc-nav-links-wrapper.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: scaleY(1);
  }
  .cc-nav-links {
    flex-direction: column;
    align-items: stretch;
    padding: 0.75rem 1rem 1rem;
  }
  .cc-nav-group {
    justify-content: space-between;
  }
}

/* Dropdown Buttons */

.cc-dropdown {
  position: relative;
}

.cc-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.5);
  background: radial-gradient(circle at top, rgba(15,23,42,0.9), rgba(15,23,42,0.96));
  color: #e5e7eb;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.cc-drop-btn:hover {
  border-color: rgba(34,197,94,0.75);
  box-shadow: 0 8px 24px rgba(15,23,42,0.8);
  transform: translateY(-1px);
}

.cc-nav-icon {
  font-size: 0.95rem;
}

.cc-drop-caret {
  font-size: 0.7rem;
  opacity: 0.7;
}

/* User Dropdown Button */

.cc-dropdown-user .cc-drop-btn {
  padding: 0.25rem 0.75rem 0.25rem 0.3rem;
  background: radial-gradient(circle at top, rgba(22,163,74,0.3), rgba(15,23,42,0.95));
  border-color: rgba(34,197,94,0.7);
}

.cc-user-avatar-nav {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background-size: cover;
  background-position: center;
  background-color: #020617;
  border: 1px solid rgba(148,163,184,0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cc-user-avatar-initials {
  font-size: 0.8rem;
  font-weight: 600;
}

.cc-drop-user-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 0.25rem;
}

.cc-drop-user-name {
  font-size: 0.8rem;
  font-weight: 600;
}

.cc-drop-user-sub {
  font-size: 0.7rem;
  opacity: 0.7;
}

/* Drop Menu */

.cc-drop-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 190px;
  padding: 0.4rem;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.4);
  background: radial-gradient(circle at top, rgba(15,23,42,1), #020617);
  box-shadow: 0 18px 40px rgba(0,0,0,0.8);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.cc-dropdown.is-open > .cc-drop-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.cc-drop-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 10px;
  font-size: 0.8rem;
  text-decoration: none;
  color: #e5e7eb;
}

.cc-drop-item:hover {
  background: rgba(15,23,42,0.9);
}

.cc-drop-item-icon {
  width: 1.2rem;
  text-align: center;
}

.cc-drop-item-danger {
  color: #fecaca;
}

.cc-drop-item-danger:hover {
  background: rgba(127,29,29,0.75);
}

.cc-drop-separator {
  height: 1px;
  margin: 0.3rem 0;
  background: radial-gradient(circle, rgba(148,163,184,0.5), transparent);
}

/* Mobile: Dropdown Menu breiter anzeigen */

@media (max-width: 768px) {
  .cc-dropdown {
    width: 100%;
  }
  .cc-drop-btn {
    width: 100%;
    justify-content: space-between;
  }
  .cc-drop-menu {
    left: 0;
    right: 0;
  }
}

/* ===========================
   NAVBAR – LOOK & FEEL
   =========================== */

.cc-navbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: radial-gradient(circle at top left, rgba(34,197,94,0.18), transparent 55%),
              rgba(15,23,42,0.96);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(148,163,184,0.12);
}

.cc-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.6rem;
}

/* Brand mit Micro-Animation */

.cc-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.cc-brand-logo {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 0%, #4ade80, #16a34a 55%, #022c22 100%);
  box-shadow:
    0 0 0 1px rgba(15,23,42,0.9),
    0 12px 30px rgba(0,0,0,0.8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cc-brand-core {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #e5f9f0;
  text-shadow: 0 0 8px rgba(34,197,94,0.9);
}

.cc-brand-orbit {
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 2px solid rgba(74,222,128,0.35);
  border-top-color: rgba(190,242,100,0.9);
  border-left-color: transparent;
  mix-blend-mode: screen;
  opacity: 0.9;
  animation: cc-orbit-spin 6s linear infinite;
}

.cc-brand-name {
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
}

.cc-brand-animated:hover .cc-brand-logo {
  transform: translateY(-1px) scale(1.03);
  box-shadow:
    0 0 0 1px rgba(34,197,94,0.5),
    0 18px 40px rgba(22,163,74,0.6);
}

.cc-brand-logo,
.cc-brand-animated {
  transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}

@keyframes cc-orbit-spin {
  to { transform: rotate(360deg); }
}

/* Nav-Links */

.cc-nav-links-wrapper {
  display: flex;
  align-items: center;
}

.cc-nav-links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* mobile toggle passt schon – nur etwas padding */
.cc-nav-toggle {
  display: none;
}

@media (max-width: 768px) {
  .cc-nav-toggle {
    display: inline-flex;
  }
  .cc-nav-links-wrapper {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    padding: 0.5rem 1rem 0.75rem;
    background: rgba(15,23,42,0.98);
    border-bottom: 1px solid rgba(15,23,42,0.9);
    box-shadow: 0 20px 40px rgba(0,0,0,0.65);
    transform-origin: top;
    transform: scaleY(0.9);
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease-out, transform 150ms ease-out;
  }
  .cc-nav-links-wrapper.is-open {
    opacity: 1;
    transform: scaleY(1);
    pointer-events: auto;
  }
  .cc-nav-links {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Dropdowns */

.cc-dropdown {
  position: relative;
}

.cc-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: radial-gradient(circle at top, rgba(15,23,42,0.9), rgba(15,23,42,0.95));
  font-size: 0.8rem;
  cursor: pointer;
  transition:
    background 140ms ease-out,
    border-color 140ms ease-out,
    box-shadow 140ms ease-out,
    transform 120ms ease-out;
}

.cc-drop-btn-label {
  font-weight: 500;
}

.cc-drop-caret {
  font-size: 0.65rem;
  opacity: 0.8;
}

.cc-dropdown.is-open .cc-drop-btn,
.cc-drop-btn:hover {
  border-color: rgba(148,163,184,0.45);
  box-shadow: 0 8px 20px rgba(15,23,42,0.8);
  transform: translateY(-1px);
}

/* Menü */

.cc-drop-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.45rem);
  min-width: 210px;
  background: radial-gradient(circle at top, rgba(34,197,94,0.08), transparent 65%),
              #020617;
  border-radius: 18px;
  border: 1px solid rgba(30,64,175,0.6);
  box-shadow:
    0 18px 45px rgba(0,0,0,0.9),
    0 0 0 1px rgba(15,23,42,0.9);
  padding: 0.4rem;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 130ms ease-out, transform 130ms ease-out;
}

.cc-dropdown.is-open .cc-drop-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.cc-drop-menu-right {
  right: 0;
  left: auto;
}

.cc-drop-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.55rem;
  border-radius: 12px;
  text-decoration: none;
  font-size: 0.8rem;
  color: inherit;
  transition: background 130ms ease-out, transform 130ms ease-out;
}

.cc-drop-item-icon {
  width: 1.2rem;
  text-align: center;
  opacity: 0.9;
}

.cc-drop-item-label {
  flex: 1;
}

.cc-drop-item:hover {
  background: linear-gradient(90deg, rgba(34,197,94,0.14), rgba(15,23,42,0.9));
  transform: translateY(-1px);
}

.cc-drop-separator {
  height: 1px;
  margin: 0.25rem 0.3rem;
  background: radial-gradient(circle, rgba(148,163,184,0.5), transparent 70%);
}

/* User Dropdown */

.cc-dropdown-user .cc-drop-btn-user {
  padding-inline: 0.5rem 0.6rem;
  gap: 0.55rem;
}

.cc-user-miniblock {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  margin-right: 0.25rem;
}

.cc-user-mininame {
  font-size: 0.78rem;
  font-weight: 500;
}

.cc-user-minitag {
  font-size: 0.68rem;
  opacity: 0.7;
}

/* Punkte-Pill */

.cc-points-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  font-size: 0.7rem;
  background: radial-gradient(circle at top left, #22c55e, #16a34a);
  box-shadow:
    0 0 0 1px rgba(15,23,42,0.9),
    0 0 14px rgba(34,197,94,0.7);
  color: #ecfdf5;
  white-space: nowrap;
}

.cc-points-pill span {
  font-weight: 600;
}

.cc-points-pill-animate {
  animation: cc-points-pulse 3.2s ease-in-out infinite;
}

@keyframes cc-points-pulse {
  0%, 100% {
    transform: translateY(0);
    box-shadow:
      0 0 0 1px rgba(15,23,42,0.9),
      0 0 12px rgba(34,197,94,0.6);
  }
  50% {
    transform: translateY(-0.5px);
    box-shadow:
      0 0 0 1px rgba(34,197,94,0.8),
      0 0 20px rgba(74,222,128,0.9);
  }
}

/* Avatar im Nav */

.cc-avatar-nav {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background-color: #020617;
  background-size: cover;
  background-position: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
  box-shadow:
    0 0 0 1px rgba(15,23,42,0.9),
    0 10px 20px rgba(0,0,0,0.85);
  color: #e5e7eb;
}



/* Prevent anchor overlap with sticky nav */
:target{scroll-margin-top:calc(var(--cc-navbar-h) + 12px)}

/* Offcanvas */
.cc-offcanvas{position:fixed;inset:0 0 0 auto;width:min(320px,90vw);background:var(--cc-surface);border-left:1px solid var(--cc-border);transform:translateX(100%);transition:.25s ease;z-index:100;will-change:transform;contain:layout paint}
.cc-offcanvas.is-open{transform:none;box-shadow:var(--cc-shadow)}

/* ----------------------------------
   9. Tables
---------------------------------- */
.cc-table{width:100%;border-collapse:collapse;border:1px solid var(--cc-border);background:var(--cc-surface);border-radius:12px;overflow:hidden}
.cc-table th,.cc-table td{padding:.75rem .9rem;border-bottom:1px solid var(--cc-border);text-align:left;vertical-align:top}
.cc-table th{background:#0f1a20;color:#cfe0e8}
.cc-table.cc-striped tbody tr:nth-child(odd){background:#0f151a}
.cc-table.cc-hover tbody tr:hover{background:#131a21}

/* ----------------------------------
 10. Badges & Labels
---------------------------------- */
.cc-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .6rem;border-radius:999px;border:1px solid #21413c;background:#0b1513;color:#bfe8db;font-size:.85rem}
.cc-badge.cc-warning{border-color:#4a3b18;background:#17140d;color:#f0d7a6}
.cc-badge.cc-danger{border-color:#4a1e22;background:#1f1213;color:#ffc2c2}

/* ----------------------------------
 11. Alerts
---------------------------------- */
/* 11. Alerts */
.cc-alert{
    padding:1rem;
    border-radius:12px;
    border:1px solid var(--cc-border);
    background:var(--cc-surface);
}

/* Info */
.cc-alert.cc-info,
.cc-alert.cc-alert-info {
    border-color:#1c2a36;
}

/* Success */
.cc-alert.cc-success,
.cc-alert.cc-alert-success {
    border-color:#1b594f;
    background:#0b1513;
    color:#cfe;
}

/* Warning */
.cc-alert.cc-warning,
.cc-alert.cc-alert-warning {
    border-color:#4a3b18;
    background:#17140d;
    color:#f0d7a6;
}

/* Danger */
.cc-alert.cc-danger,
.cc-alert.cc-alert-danger {
    border-color:#4a1e22;
    background:#1f1213;
    color:#ffd6d6;
}


/* ----------------------------------
 12. Progress (Bars & Circular)
---------------------------------- */
.cc-progress{height:10px;border-radius:999px;background:#0f151a;border:1px solid var(--cc-border);overflow:hidden}
.cc-progress>span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cc-brand),var(--cc-brand-deep));transition: width 1.2s ease}

/* Circular via conic-gradient. Usage: data-cc-progress="65" */
.cc-progress-circle{--size:72px;--thickness:8px;width:var(--size);height:var(--size);border-radius:50%;display:grid;place-items:center;background:
  conic-gradient(var(--cc-brand) calc(var(--p,0)*1%), #20302c 0),
  radial-gradient(circle calc(50% - var(--thickness)), transparent 99%, var(--cc-surface) 0)
}
.cc-progress-circle[data-cc-progress]{--p: calc(attr(data-cc-progress percentage) * 1)}
.cc-progress-circle .cc-pct{font-weight:700}

/* ----------------------------------
 13. Modals
---------------------------------- */
.cc-modal-backdrop{position:fixed;inset:0;background:#0008;display:none;place-items:center;z-index:200;overflow:auto}
.cc-modal-backdrop.is-open{display:grid}
.cc-modal{width:min(640px,92vw);background:var(--cc-surface);border:1px solid var(--cc-border);border-radius:16px;box-shadow:var(--cc-shadow)}
.cc-modal header, .cc-modal footer{padding:1rem;border-bottom:1px solid var(--cc-border)}
.cc-modal header{display:flex;align-items:center;justify-content:space-between}
.cc-modal main{padding:1rem}

/* ----------------------------------
 14. Dropdowns
---------------------------------- */
.cc-dropdown{position:relative;display:inline-block}
.cc-drop-menu{position:absolute;min-width:200px;max-width:min(92vw,360px);background:var(--cc-surface);border:1px solid var(--cc-border);border-radius:12px;box-shadow:var(--cc-shadow);padding:.4rem;top:calc(100% + 8px);right:0;display:none;z-index:120;overflow:auto}
.cc-dropdown.is-open .cc-drop-menu{display:block}
.cc-drop-item{display:flex;align-items:center;gap:.5rem;padding:.5rem .6rem;border-radius:8px;color:var(--cc-text)}
.cc-drop-item:hover{background:#131a21}

/* ----------------------------------
 15. Tooltips
---------------------------------- */
.cc-tooltip{position:relative}
.cc-tooltip[data-title]:hover::after,.cc-tooltip[data-title]:focus::after{
  content:attr(data-title);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:#0e1418;border:1px solid var(--cc-border);color:var(--cc-text);padding:.4rem .6rem;border-radius:8px;white-space:nowrap;box-shadow:var(--cc-shadow);z-index:90
}

/* ----------------------------------
 16. Tabs
---------------------------------- */
.cc-tabs{display:grid;gap:.75rem}
.cc-tab-list{display:flex;gap:.5rem;border-bottom:1px solid var(--cc-border);overflow:auto}
.cc-tab{padding:.5rem .75rem;border-radius:10px 10px 0 0;background:#0f151a;border:1px solid var(--cc-border);border-bottom:0;cursor:pointer;white-space:nowrap}
.cc-tab.is-active{background:linear-gradient(145deg,var(--cc-brand),var(--cc-brand-deep));color:#061512;border-color:#1b594f}
.cc-tab-panel{display:none}
.cc-tab-panel.is-active{display:block}

/* ----------------------------------
 17. Accordions
---------------------------------- */
.cc-accordion{border:1px solid var(--cc-border);border-radius:12px;overflow:hidden}
.cc-acc-item+ .cc-acc-item{border-top:1px solid var(--cc-border)}
.cc-acc-head{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1rem;background:#0f151a;cursor:pointer}
.cc-acc-body{display:none;padding:1rem;background:var(--cc-surface)}
.cc-acc-item.is-open .cc-acc-body{display:block}

/* ----------------------------------
 18. Carousel / Slideshow
---------------------------------- */
.cc-carousel{position:relative;overflow:hidden;border-radius:12px;border:1px solid var(--cc-border);contain:layout paint}
.cc-carousel-track{display:flex;transition:transform .35s ease;will-change:transform;touch-action:pan-y}
.cc-carousel-slide{min-width:100%;max-width:100%;background:var(--cc-surface);display:grid;place-items:center;overflow:hidden}
.cc-carousel .cc-prev,.cc-carousel .cc-next{position:absolute;top:50%;transform:translateY(-50%);background:#0e1418cc;border:1px solid var(--cc-border);border-radius:10px;padding:.5rem .7rem;cursor:pointer}
.cc-carousel .cc-prev{left:8px}.cc-carousel .cc-next{right:8px}
.cc-carousel-dots{position:absolute;inset:auto 0 8px;display:flex;gap:.35rem;justify-content:center;pointer-events:auto}
.cc-carousel-dot{width:8px;height:8px;border-radius:50%;background:#33424c;border:none}
.cc-carousel-dot.is-active{background:var(--cc-brand)}

/* ----------------------------------
 19. Breadcrumbs & Pagination
---------------------------------- */
.cc-breadcrumb{display:flex;flex-wrap:wrap;gap:.5rem;color:var(--cc-muted)}
.cc-breadcrumb a{color:var(--cc-text)}
.cc-breadcrumb .cc-sep{opacity:.5}

.cc-pagination{display:flex;gap:.4rem;flex-wrap:wrap}
.cc-page{padding:.45rem .7rem;border:1px solid var(--cc-border);border-radius:10px}
.cc-page.is-active{background:linear-gradient(145deg,var(--cc-brand),var(--cc-brand-deep));color:#061512;border-color:#1b594f}

/* ----------------------------------
 20. Cards & Panels
---------------------------------- */
.cc-panel{background:var(--cc-surface);border:1px solid var(--cc-border);border-radius:12px}
.cc-panel header, .cc-panel footer{padding:1rem;border-bottom:1px solid var(--cc-border)}
.cc-panel main{padding:1rem}

/* ----------------------------------
 21. Images & Figures
---------------------------------- */
figure{margin:0}
figure.cc-figure{display:grid;gap:.5rem}
figcaption{color:var(--cc-muted);font-size:.9rem}

/* ----------------------------------
 22. Media Queries (Helpers)
---------------------------------- */
.cc-hide-sm{display:none}
@media (min-width:576px){.cc-hide-sm{display:initial}.cc-only-sm{display:none}}

/* ----------------------------------
 23. Print Styles (Light)
---------------------------------- */
@media print{
  :root{--cc-bg:#fff;--cc-text:#000;--cc-border:#ddd}
  body{background:#fff;color:#000}
  .cc-navbar,.cc-offcanvas,.cc-modal-backdrop{display:none!important}
}

/* ----------------------------------
 24. Page Content Layout (NEW)
---------------------------------- */
.cc-content{
  min-height:calc(100svh - var(--cc-navbar-h));
  padding:clamp(1rem,3vw,2rem) 0;
}
.cc-content .cc-container{padding-left:1rem;padding-right:1rem}
.cc-content .cc-row{margin-top:.25rem}

/* ----------------------------------
   25. Scrollbars (Custom)
---------------------------------- */

/* Für WebKit-Browser (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--cc-surface-2);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(145deg, var(--cc-brand-deep), var(--cc-brand));
  border-radius: 10px;
  border: 2px solid var(--cc-surface-2);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(145deg, var(--cc-brand), var(--cc-brand-deep));
}

/* Für Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--cc-brand) var(--cc-surface-2);
}

/* Optional: dezente Innen-Scrollbereiche (z. B. Tabellen, Modals) */
.cc-scroll,
.cc-modal main,
.cc-drop-menu,
.cc-offcanvas {
  scrollbar-width: thin;
  scrollbar-color: var(--cc-brand) var(--cc-surface-2);
}

/* CreatorCycle Brand / Logo – überall gleich */

.cc-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: #f9fafb;
    font-weight: 600;
}

.cc-brand-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: #0FAE78; /* dein grüner Brand */
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-size: 0.95rem;
}

.cc-brand-name {
    font-size: 1rem;
}

/* ================================
   CYCLE POWER – 3D SVG Cycle
   ================================ */

.cc-cycle-wrapper {
  position: relative;
  width: 96px;
  height: 96px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cc-cycle-wrapper.cc-cycle-3d {
  perspective: 600px;
}

.cc-cycle-svg {
  width: 100%;
  height: 100%;
  display: block;
  transform: rotateX(18deg);
  transform-origin: center;
  transition: transform 0.4s ease, filter 0.4s ease;
  filter: drop-shadow(0 18px 35px rgba(0,0,0,0.55));
}

/* Hover-Effekt: leicht „anheben“ */
.cc-cycle-wrapper.cc-cycle-3d:hover .cc-cycle-svg {
  transform: rotateX(8deg) translateY(-2px);
  filter: drop-shadow(0 22px 40px rgba(0,0,0,0.7));
}

.cc-cycle-track {
  opacity: 0.9;
}

.cc-cycle-progress {
  transition: stroke-dashoffset 1.4s ease-in-out;
}

/* Innerer Text-Badge */
.cc-cycle-inner {
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  font-weight: 700;
  color: #bbf7d0; /* helles Emerald */
  text-shadow: 0 0 8px rgba(34,197,94,0.9);
  background:
    radial-gradient(circle at 30% 0%, rgba(248,250,252,0.12), transparent 55%),
    radial-gradient(circle at 70% 120%, rgba(15,23,42,0.95), #020617 80%);
  border: 1px solid rgba(148,163,184,0.35);
  box-shadow:
    0 0 0 1px rgba(15,23,42,0.9),
    0 12px 30px rgba(0,0,0,0.85);
  backdrop-filter: blur(4px);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.cc-cycle-wrapper.cc-cycle-3d:hover .cc-cycle-inner {
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    0 0 0 1px rgba(15,23,42,0.9),
    0 16px 40px rgba(0,0,0,0.9);
}

/* Label unter dem Cycle */
.cc-cycle-label {
  margin-top: 0.45rem;
  text-align: center;
  font-size: .8rem;
  color: var(--cc-muted);
}





/* Content-List Cards */
.cc-card-content-list{
    display:flex;
    flex-direction:column;
    height:100%;
    padding:1.25rem;
}

.cc-card-content-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:0.75rem;
}

.cc-card-content-title{
    flex:1 1 auto;
    min-width:0;
}

.cc-card-content-title h2{
    word-break:break-word;
}

.cc-card-content-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:0.75rem;
    margin-top:1.25rem;
}

/* Plattform-Badge */
.cc-badge-platform{
    font-size:0.75rem;
    padding:0.2rem 0.6rem;
    border-radius:999px;
    border:1px solid rgba(148,163,184,0.5);
    background:rgba(15,23,42,0.95);
    color:#e5e7eb;
    white-space:nowrap;
}

/* Status-Badges */
.cc-badge-status{
    font-size:0.7rem;
    padding:0.15rem 0.5rem;
    border-radius:999px;
    border:1px solid transparent;
}

.cc-badge-status-active{
    background:rgba(34,197,94,0.08);
    border-color:rgba(34,197,94,0.6);
    color:#bbf7d0;
}

.cc-badge-status-hidden{
    background:rgba(251,191,36,0.08);
    border-color:rgba(251,191,36,0.6);
    color:#facc15;
}

/* Ghost-Button klein */
.cc-btn-ghost-sm{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0.35rem 0.8rem;
    border-radius:999px;
    border:1px solid rgba(148,163,184,0.5);
    background:transparent;
    font-size:0.85rem;
    text-decoration:none;
    color:#e5e7eb;
    transition:background 0.15s ease,border-color 0.15s ease,color 0.15s ease;
}

.cc-btn-ghost-sm:hover{
    background:rgba(148,163,184,0.12);
    border-color:rgba(148,163,184,0.8);
}

.cc-feedback-list{
    display:flex;
    flex-direction:column;
    gap:0.75rem;
}

.cc-feedback-item{
    padding:0.6rem 0.75rem;
    border-radius:0.75rem;
    background:rgba(15,23,42,0.9);
    border:1px solid rgba(30,64,175,0.4);
}

.cc-video-embed {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Ratio */
    border-radius: 12px;
    overflow: hidden;
    background: #111;
    margin-bottom: 1.5rem;
}

.cc-video-embed iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}

.cc-tiktok-wrapper {
    max-width: 420px;
    margin-bottom: 2rem;
}


/* Avatare */
.cc-avatar-lg,
.cc-avatar-sm,
.cc-avatar-xs {
  display:inline-block;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border-radius:999px;
  background-color:#111827; /* Fallback */
}

.cc-avatar-lg {
  width:48px;
  height:48px;
}

.cc-avatar-sm {
  width:40px;
  height:40px;
}

.cc-avatar-xs {
  width:32px;
  height:32px;
}

.cc-avatar-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Plattform-Badge */
.cc-badge-platform {
  padding:0.35rem 0.85rem;
  border-radius:999px;
  font-size:0.8rem;
  background:linear-gradient(135deg, #22c55e, #0ea5e9);
  color:#0b1120;
  font-weight:600;
  box-shadow:0 0 0 1px rgba(15,23,42,0.6);
}

.cc-badge-platform-animate {
  animation:cc-badge-pulse 3s ease-in-out infinite;
}

@keyframes cc-badge-pulse {
  0%,100% { transform:translateY(0); box-shadow:0 0 0 1px rgba(34,197,94,0.4); }
  50%     { transform:translateY(-1px); box-shadow:0 0 12px 2px rgba(34,197,94,0.55); }
}

/* Rating-Stars */
.cc-rating-stars {
  color:#facc15; /* gelb */
  font-size:0.9rem;
  text-shadow:0 0 4px rgba(250,204,21,0.5);
}

/* Feedback-Liste */
.cc-feedback-item {
  border-radius:12px;
  background:rgba(15,23,42,0.9);
  border:1px solid rgba(30,64,175,0.35);
}
.cc-feedback-item:hover {
  border-color:rgba(56,189,248,0.75);
}

/* Embed-Wrapper mit Vollbild-Button */
.cc-embed-wrapper {
  position:relative;
  overflow:hidden;
}

.cc-embed-inner iframe,
.cc-embed-inner blockquote,
.cc-embed-inner > * {
  width:100%;
}

.cc-embed-fullscreen-btn {
  position:absolute;
  right:0.75rem;
  bottom:0.75rem;
  padding:0.25rem 0.6rem;
  font-size:0.8rem;
  border-radius:999px;
  border:none;
  cursor:pointer;
  background:rgba(15,23,42,0.9);
  color:#e5e7eb;
  box-shadow:0 0 0 1px rgba(148,163,184,0.5);
}
.cc-embed-fullscreen-btn:hover {
  background:rgba(30,64,175,0.95);
}

/* Lightbox */
.cc-lightbox {
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  opacity:0;
  transition:opacity 0.2s ease-out;
  z-index:9999;
}

.cc-lightbox-open {
  pointer-events:auto;
  opacity:1;
}

.cc-lightbox-backdrop {
  position:absolute;
  inset:0;
  background:rgba(15,23,42,0.85);
}

.cc-lightbox-content {
  position:relative;
  max-width:1200px;
  width:100%;
  padding:1rem;
  z-index:1;
}

.cc-lightbox-inner {
  background:#020617;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,0.8);
}

.cc-lightbox-inner iframe,
.cc-lightbox-inner blockquote,
.cc-lightbox-inner > * {
  width:100%;
  height:calc(100vh - 6rem);
}

.cc-lightbox-close {
  position:absolute;
  top:0.75rem;
  right:1rem;
  border:none;
  background:transparent;
  color:#e5e7eb;
  font-size:1.8rem;
  cursor:pointer;
}
.cc-lightbox-close:hover {
  color:#f97316;
}
.cc-rating-summary {
  display:flex;
  align-items:center;
  gap:0.4rem;
}

.cc-rating-number {
  font-weight:600;
  font-size:1.1rem;
}

.cc-rating-stars {
  font-size:0.9rem;
  color:#facc15; /* gelb */
}

.cc-feedback-item {
  border-radius:12px;
  background:rgba(15,23,42,0.85);
  border:1px solid rgba(148,163,184,0.25);
}

/* Rating Summary (kompakt, CreatorCycle Style) */

.cc-rating-summary {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 1rem 1.2rem;
}

.cc-rating-summary-head {
    text-align: left;
    margin-bottom: 0.8rem;
    width: 100%;
}

.cc-rating-summary-score-number {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fde047; /* Gold */
}

.cc-rating-summary-count {
    font-size: 0.8rem;
    color: var(--cc-muted);
    margin-left: 0.25rem;
}

.cc-rating-bars {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
}

.cc-rating-bar-row {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    gap: 0.5rem;
}

.cc-rating-bar-label {
    font-size: 0.75rem;
    color: var(--cc-muted);
}

.cc-rating-bar {
    background: rgba(255,255,255,0.1);
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
}

.cc-rating-bar-fill {
    background: linear-gradient(90deg, #22c55e, #4ade80);
    height: 100%;
}

.cc-rating-bar-percent {
    font-size: 0.75rem;
    color: var(--cc-muted);
    text-align: right;
}

.cc-rating-summary {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 1rem 1.2rem;
}

.cc-rating-summary-head {
    text-align: left;
    margin-bottom: 0.8rem;
}

.cc-rating-summary-score-number {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fde047;
}

.cc-rating-summary-count {
    font-size: 0.8rem;
    color: var(--cc-muted);
    margin-left: 0.25rem;
}

.cc-rating-bars {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.cc-rating-bar-row {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    gap: 0.5rem;
}

.cc-rating-bar-label {
    font-size: 0.75rem;
    color: var(--cc-muted);
}

.cc-rating-bar {
    background: rgba(255,255,255,0.1);
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
}

.cc-rating-bar-fill {
    background: linear-gradient(90deg, #22c55e, #4ade80);
    height: 100%;
}

.cc-rating-bar-percent {
    font-size: 0.75rem;
    color: var(--cc-muted);
    text-align: right;
}

.cc-badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}

.cc-badge-tile {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.9rem;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.14);
}

.cc-badge-tile.is-locked {
  opacity: 0.4;
  filter: grayscale(1);
}

.cc-badge-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  overflow: hidden;
  background: radial-gradient(circle at 30% 20%, #22c55e33, #020617);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.cc-badge-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cc-badge-icon-fallback {
  font-size: 0.9rem;
}

.cc-xsmall {
  font-size: 0.75rem;
}

/* Achievements-Grid */
.cc-badge-card {
  border-radius: 18px;
  background: linear-gradient(145deg, #020617, #020617);
  border: 1px solid rgba(148, 163, 184, 0.12);
  transition: transform .12s ease-out, box-shadow .12s ease-out, border-color .12s ease-out, background .12s ease-out;
}

.cc-badge-card.cc-badge-unlocked {
  background: radial-gradient(circle at top left, #14f19511, #020617),
              radial-gradient(circle at bottom right, #22c55e08, #020617);
  border-color: rgba(34, 197, 94, 0.35);
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.15), 0 18px 45px rgba(0, 0, 0, 0.7);
}

.cc-badge-card.cc-badge-unlocked:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.25), 0 22px 55px rgba(0, 0, 0, 0.8);
}

.cc-badge-card.cc-badge-locked {
  opacity: 0.5;
  background: linear-gradient(145deg, #020617, #020617);
  border-style: dashed;
}

.cc-badge-card.cc-badge-locked:hover {
  transform: none;
  box-shadow: none;
}

/* runder Icon-Kreis, Glow, etc. */
.cc-badge-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, #22c55e22, transparent 60%);
}

.cc-badge-icon {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #020617;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.5);
}

/* Beispiel-Icon-Mappings – hier kannst du PNGs / SVGs als Background nutzen */
.cc-badge-icon-first_login {
  background: #020617 url('assets/img/badges/first_login.png') center/26px 26px no-repeat;
}

.cc-badge-icon-first_feedback {
  background: #020617 url('assets/img/badges/first_feedback.png') center/26px 26px no-repeat;
}

.cc-badge-icon-youtube_creator {
  background: #020617 url('assets/img/badges/youtube_creator.png') center/26px 26px no-repeat;
}

.cc-discover-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cc-discover-header,
.cc-discover-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.cc-discover-body {
  margin-top: 0.25rem;
}

.cc-discover-rating {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.cc-discover-actions {
  display: flex;
  align-items: center;
}

.cc-badge-new {
  font-size: 0.7rem;
}

/* 2–3-Zeilen truncation, falls du sowas noch nicht hast */
.cc-text-truncate-2,
.cc-text-truncate-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cc-text-truncate-2 { -webkit-line-clamp: 2; }
.cc-text-truncate-3 { -webkit-line-clamp: 3; }

/* Discover Cards – kompakte Übersicht */

.cc-discover-card {
  display:flex;
  flex-direction:column;
  gap:0.75rem;
  padding:0;
  overflow:hidden;
}

.cc-discover-thumb {
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
}

.cc-discover-thumb img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .25s ease-out, opacity .25s ease-out;
  opacity:0.96;
}

.cc-discover-card:hover .cc-discover-thumb img {
  transform:scale(1.03);
  opacity:1;
}

.cc-discover-info {
  padding:0.9rem 1rem 1rem;
}

/* Boosted Cards grün hervorheben */

.cc-discover-card-boosted {
  border:1px solid rgba(34, 197, 94, 0.55);
  box-shadow:0 0 0 1px rgba(34, 197, 94, 0.15),
             0 16px 40px rgba(0,0,0,0.7);
}

/* Badges */

.cc-badge-boost {
  background:rgba(34, 197, 94, 0.08);
  border:1px solid rgba(34, 197, 94, 0.5);
  color:rgb(187, 247, 208);
}

.cc-badge-rated {
  background:rgba(96, 165, 250, 0.08);
  border:1px solid rgba(96, 165, 250, 0.5);
  color:rgb(191, 219, 254);
}

/* Text-Truncation falls noch nicht da */

.cc-text-truncate {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cc-text-truncate-2 {
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ===========================
   NOTIFICATIONS (Bottom-Bar)
=========================== */

.cc-noti {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.75rem 1rem;
    z-index: 9999;
    pointer-events: none; /* Nur der Inhalt klickbar */
}

.cc-noti-inner {
    max-width: 960px;
    margin: 0 auto;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.1rem;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
    font-size: 0.9rem;
    pointer-events: auto;
}

.cc-noti-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.cc-noti-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.cc-noti-label {
    font-weight: 600;
    margin-right: 0.25rem;
}

.cc-noti-close {
    margin-left: auto;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0 0 0.5rem;
}

/* Farbvarianten */
.cc-noti-warning .cc-noti-inner {
    background: linear-gradient(90deg, #facc15, #f97316);
    color: #1f2933;
}

.cc-noti-error .cc-noti-inner {
    background: linear-gradient(90deg, #ef4444, #b91c1c);
    color: #f9fafb;
}

.cc-noti-success .cc-noti-inner {
    background: linear-gradient(90deg, #22c55e, #16a34a);
    color: #0b1120;
}

.cc-noti-info .cc-noti-inner {
    background: linear-gradient(90deg, #3b82f6, #0ea5e9);
    color: #f9fafb;
}

.cc-noti-neutral .cc-noti-inner {
    background: linear-gradient(90deg, #4b5563, #111827);
    color: #e5e7eb;
}


/* … usw. für alle icon_key Werte */