/* =====================================================
   TOOLINDEX DESIGN SYSTEM v2
   Default: LIGHT MODE
   Dark Mode: body[data-theme="dark"]
===================================================== */

:root{
  /* === COLOR SYSTEM (LIGHT DEFAULT) === */
  --bg: #f7f8fc;
  --bg-gradient-1: rgba(208,23,117,.08);
  --bg-gradient-2: rgba(59,130,246,.10);

  --panel: #ffffff;
  --panel-soft: #f2f4f9;

  --text: #111827;
  --muted: #6b7280;

  --border: #e5e7eb;

  --accent: #2563eb;          /* primary blue */
  --accent-soft: rgba(37,99,235,.12);

  --radius-lg: 18px;
  --radius-md: 14px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 8px 24px rgba(0,0,0,.06);
}

/* ================= DARK MODE ================= */

body[data-theme="dark"]{
  --bg: #0b0b10;
  --bg-gradient-1: rgba(208,23,117,.22);
  --bg-gradient-2: rgba(59,130,246,.18);

  --panel: rgba(255,255,255,.06);
  --panel-soft: rgba(255,255,255,.09);

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.62);

  --border: rgba(255,255,255,.12);

  --accent: #3b82f6;
  --accent-soft: rgba(59,130,246,.18);

  --shadow-sm: none;
  --shadow-md: none;
}

/* =====================================================
   GLOBAL RESET
===================================================== */

*{ box-sizing:border-box; }
html,body{ height:100%; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h, 72px);
}

#top10, #faq {
  scroll-margin-top: var(--header-h, 72px);
}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1000px 500px at 20% 0%, var(--bg-gradient-1), transparent 60%),
    radial-gradient(1000px 500px at 80% 0%, var(--bg-gradient-2), transparent 60%),
    var(--bg);
  color:var(--text);
  line-height:1.6;

  padding-top: var(--header-h, 72px);
}

a{ color:inherit; text-decoration:none; }
a:hover{ opacity:.9; }

.container{
  width:min(1150px, calc(100% - 40px));
  margin:0 auto;
}

.muted{ color:var(--muted); }

/* =====================================================
   HEADER (STICKY)
   IMPORTANT: Sticky breaks if any ancestor has overflow != visible.
===================================================== */

/* Wrapper für injected components darf Sticky nicht begrenzen */
[data-component="header"],
[data-component="footer"]{
  display: contents;
}

.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  z-index: 1000;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

/* Blur only if supported */
@supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))){
  .site-header{
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background: color-mix(in srgb, var(--panel) 92%, transparent);
  }
}

.site-header .header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:18px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  letter-spacing:.2px;
}

.brand-logo{
  width:22px;
  height:22px;
}

.nav{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
}

.nav a{
  padding:8px 12px;
  border-radius:10px;
  color: var(--muted);
  border:1px solid transparent;
  font-weight:500;
}

.nav a.active{
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.nav a:hover{
  color: var(--text);
  background: var(--panel-soft);
  opacity: 1;
}

/* Kategorien als "Button/Pill" */
.nav a.nav-pill{
  color: var(--accent);
  border-color: rgba(37,99,235,.28);
  background: linear-gradient(180deg, rgba(37,99,235,.16), rgba(37,99,235,.06));
  font-weight: 700;
}

body[data-theme="dark"] .nav a.nav-pill{
  border-color: rgba(59,130,246,.35);
  background: linear-gradient(180deg, rgba(59,130,246,.22), rgba(59,130,246,.08));
}

/* Fallback for older browsers without color-mix */
@supports not (color: color-mix(in srgb, white 50%, black)){
  .nav a.nav-pill{
    border-color: rgba(37,99,235,.45);
    background: linear-gradient(180deg, rgba(37,99,235,.14), rgba(37,99,235,.06));
  }
  body[data-theme="dark"] .nav a.nav-pill{
    border-color: rgba(59,130,246,.45);
    background: linear-gradient(180deg, rgba(59,130,246,.18), rgba(59,130,246,.06));
  }
}

/* ================================
   Mobile Header Optimierung
================================ */
@media (max-width: 768px){
  .site-header .header-inner{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* Navigation als bewusstes Grid */
  .nav{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .nav a{
    text-align: center;
    padding: 10px 8px;
    font-size: 14px;
    border-radius: 12px;
  }

  /* Toggle rechts unten, nicht "irgendwo" */
  .theme-toggle{
    align-self: flex-end;
    margin-top: 2px;
  }
}

/* =====================================================
   HERO
===================================================== */

.hero{
  padding:60px 0 30px;
}

.hero h1{
  margin:0 0 14px;
  font-size: clamp(30px, 4vw, 46px);
  line-height:1.15;
  font-weight:800;
  letter-spacing:-0.5px;
}

.lead{
  margin:0;
  font-size: clamp(16px, 2vw, 18px);
  color: var(--muted);
  max-width: 65ch;
}

.cta-row{
  display:flex;
  gap:14px;
  margin-top:22px;
  flex-wrap:wrap;
}

/* =====================================================
   BUTTONS
===================================================== */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background: var(--panel);
  font-weight:600;
  transition: all .18s ease;
}

.btn:hover{
  transform: translateY(-1px);
}

.btn.primary{
  border-color: var(--accent);
  background: var(--accent);
  color:white;
  box-shadow: var(--shadow-sm);
}

.btn.primary:hover{
  background:#1e4fd6;
}

/* small button variant (used in tables) */
.btn.btn-sm{
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 13px;
  margin-top: 8px;
  width: fit-content;
}

/* =====================================================
   GRID SYSTEM
===================================================== */

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:20px;
  padding: 20px 0 60px;
}

.card{
  grid-column: span 4;
  padding:20px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow-md);
  transition: transform .2s ease, box-shadow .2s ease;
}

.card:hover{
  transform: translateY(-3px);
}

.card h2{
  margin:0 0 8px;
  font-size:17px;
}

.card p{
  margin:0;
  color: var(--muted);
}

/* Responsive */
@media (max-width: 900px){
  .card{ grid-column: span 6; }
}
@media (max-width: 600px){
  .card{ grid-column: span 12; }
}

/* =====================================================
   TABLE STYLING v3 (no ugly mid-word breaks)
   - Desktop: no scroll if enough space
   - Smaller widths: allow horizontal scroll instead of destroying words/buttons
===================================================== */

.table-wrap{
  margin-top: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;

  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-md);
}

/* On wide screens we try to fit without forcing scroll */
.table-wrap table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

/* If viewport gets tight, allow scroll instead of breaking words into nonsense */
@media (max-width: 1100px){
  .table-wrap table{
    min-width: 980px;
  }
}

.table-wrap thead th{
  background: var(--panel-soft);
  font-weight: 800;

  /* IMPORTANT: prevent "Kostenlo-ser" style breaks */
  hyphens: none;
  word-break: normal;
  overflow-wrap: normal;

  /* wrap only at spaces */
  white-space: normal;
  line-height: 1.25;
}

.table-wrap th,
.table-wrap td{
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.table-wrap tbody tr:hover{
  background: color-mix(in srgb, var(--panel-soft) 70%, transparent);
}

/* Body cells: allow wrapping, but not mid-word chaos */
.table-wrap td{
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.35;
}

/* First column (Tool + CTA): give it room so buttons don’t stack vertically */
.table-wrap thead th:first-child,
.table-wrap tbody td:first-child{
  min-width: 180px;
}

/* Buttons inside table must NEVER wrap letter-by-letter */
.table-wrap .btn{
  white-space: nowrap;
}

/* Rounded corners (needs separate borders) */
.table-wrap thead th:first-child{ border-top-left-radius: var(--radius-lg); }
.table-wrap thead th:last-child{ border-top-right-radius: var(--radius-lg); }
.table-wrap tbody tr:last-child td:first-child{ border-bottom-left-radius: var(--radius-lg); }
.table-wrap tbody tr:last-child td:last-child{ border-bottom-right-radius: var(--radius-lg); }

/* Remove double border look at bottom */
.table-wrap tbody tr:last-child td{
  border-bottom: 0;
}

/* =====================================================
   FAQ
===================================================== */

.faq-list{
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.faq-item{
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  overflow: hidden;
}

.faq-item > summary{
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items:center;
}

.faq-item > summary::-webkit-details-marker{
  display: none;
}

.faq-item > summary::after{
  content: "▾";
  transition: transform .18s ease;
}

.faq-item[open] > summary::after{
  transform: rotate(180deg);
}

.faq-item > p{
  margin: 0;
  padding: 12px 16px 16px;
  color: var(--muted);
}

/* =====================================================
   FOOTER
===================================================== */

.site-footer{
  border-top:1px solid var(--border);
  padding:30px 0 40px;
  background: var(--panel-soft);
  margin-top:40px;
}

.site-footer ul{
  padding-left:18px;
}

/* Footer layout helpers (used by components/footer.html) */
.footer-inner{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}

.footer-links{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.footer-disclaimer{
  padding-top: 10px;
  font-size: 14px;
}

/* ===== THEME TOGGLE BUTTON ===== */

.theme-toggle{
  margin-left: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  font-size: 16px;
}

.theme-toggle:hover{
  background: var(--panel-soft);
}

/* =====================================================
   TOOL SCORE SYSTEM
===================================================== */

.tool-cell{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.tool-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.tool-name{
  font-weight:700;
}

.tool-score{
  display:inline-flex;
  align-items:baseline;
  gap:2px;
  padding:4px 8px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  background: var(--accent-soft);
  color: var(--accent);
}

.tool-score .score-max{
  font-weight:500;
  opacity:.6;
  font-size:12px;
}

.btn-sm{
  padding:6px 12px;
  font-size:13px;
}

/* =====================================================
   QUICK TOP 3 (Comparison pages)
===================================================== */
.quick-top3{ padding-top: 0; }

.quick-card{ grid-column: span 4; }
@media (max-width: 900px){ .quick-card{ grid-column: span 6; } }
@media (max-width: 600px){ .quick-card{ grid-column: span 12; } }

.quick-head{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:10px;
}

.quick-rank{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: 0 10px;     /* statt min-width -> Label kann variieren */
  min-width: auto;
  height: 32px;        /* kompakter als vorher */
  border-radius: 10px;

  border: 1px solid var(--border);
  background: var(--panel-soft);

  font-size: 13px;
  font-weight: 800;
  white-space: nowrap; /* verhindert Umbrüche im Label */
}

.quick-title h3{ margin:0 0 4px; font-size: 16px; }
.quick-title p{ margin:0; }

.quick-score{
  margin-left:auto;
  display:inline-flex;
  align-items:baseline;
  gap:4px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  font-weight: 800;
}
.quick-score .score-max{ color: var(--muted); font-weight: 700; }

.quick-cta{
  display:flex;
  gap:10px;
  margin-top:14px;
  flex-wrap:wrap;
}

/* Slightly emphasize #1 */
.quick-card.is-1{
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
}
.quick-card.is-1 .quick-rank{
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent-soft) 65%, var(--panel-soft));
}