/* ============================================================
   win11-suche.css
   Seitenspezifisches Stylesheet für win11-suche-web.html
   Setzt style.css voraus – keine Duplikate enthalten.
   ============================================================ */


/* ── Lucide Icons Basisstil ─────────────────────────────────
   Lucide kommt per CDN, style.css enthält keinen Icon-Stil.  */
.lucide {
  width: 1em; height: 1em;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vertical-align: middle;
  flex-shrink: 0;
  display: inline-block;
}
.lucide-lg  { width: 1.35em; height: 1.35em; }
.lucide-xl  { width: 1.8rem;  height: 1.8rem; }
.lucide-2xl { width: 2.4rem;  height: 2.4rem; }


/* ── Logo ───────────────────────────────────────────────────
   Platzhalter-Div falls noch kein Bild vorhanden.
   Echtes Logo: <img src="..." class="logo-img" />           */
.logo-placeholder {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--clr-accent);
  background: var(--clr-surface2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: .65rem; font-weight: 800; letter-spacing: .08em;
  color: var(--clr-accent);
  filter: drop-shadow(0 0 12px rgba(183,255,0,.45));
  flex-shrink: 0; position: relative; overflow: hidden;
}
.logo-placeholder::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(183,255,0,.1) 0%, transparent 60%);
}
.logo-img {
  width: 44px; height: 44px; object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(183,255,0,.45));
  flex-shrink: 0;
}


/* ── Section-Tag Override ───────────────────────────────────
   style.css nutzt display:inline-block – wir brauchen Flex
   damit das Lucide-Icon vertikal zentriert ist.              */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}


/* ── Card-Icon Override ─────────────────────────────────────
   style.css: nur font-size + color.
   Hier: Box-Stil mit Hintergrund und Rahmen.                */
.card-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-sm);
  background: rgba(183,255,0,.07);
  border: 1px solid rgba(183,255,0,.16);
  display: flex; align-items: center; justify-content: center;
  color: var(--clr-accent);
  margin-bottom: var(--space-4);
  font-size: inherit;
}


/* ── Hero Dekorationselemente ───────────────────────────────
   Gitter und Glow-Blob im Hintergrund des Hero.             */
.hero-grid-deko {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(183,255,0,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(183,255,0,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none; z-index: 1;
}
.hero-glow {
  position: absolute; top: -200px; right: -150px;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(183,255,0,.08) 0%, transparent 70%);
  pointer-events: none; z-index: 1;
}


/* ── Searchbar Demo ─────────────────────────────────────────
   Animierte Suchleiste im Hero-Bereich.                     */
.searchbar-demo {
  display: inline-flex; align-items: center; gap: .65rem;
  background: var(--clr-surface);
  border: 1px solid rgba(183,255,0,.3);
  border-radius: var(--radius-md);
  padding: .75rem 1.2rem;
  font-family: 'Courier New', monospace;
  font-size: .95rem; color: var(--clr-accent);
  box-shadow: 0 0 30px rgba(183,255,0,.1);
  margin-top: var(--space-6);
}
.searchbar-demo .sb-icon { color: var(--clr-text-muted); display: flex; }
.searchbar-demo .cursor {
  display: inline-block; width: 2px; height: 1em;
  background: var(--clr-accent); vertical-align: middle;
  animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }


/* ── Stat-Zähler ────────────────────────────────────────────
   Zahlen-Leiste unterhalb des Hero-Textes.                  */
.stat-row {
  display: flex; justify-content: center; gap: 3rem;
  margin-top: var(--space-12); position: relative; z-index: 2;
  flex-wrap: wrap;
}
.stat-item { text-align: center; }
.stat-item .num {
  font-family: var(--font-display); font-size: var(--fs-3xl);
  font-weight: 800; color: var(--clr-accent); line-height: 1;
}
.stat-item .lbl {
  font-size: var(--fs-xs); color: var(--clr-text-muted);
  text-transform: uppercase; letter-spacing: .12em; margin-top: .3rem;
}


/* ── Operator-Badges ────────────────────────────────────────
   AND / OR / NOT / WILD Kennzeichnung in Tabellen.          */
.op-badge {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-size: .58rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px;
  vertical-align: middle; margin-left: .3rem;
}
.op-and { background: rgba(0,200,100,.12);  color: #00c864; border: 1px solid rgba(0,200,100,.25); }
.op-or  { background: rgba(255,180,0,.12);  color: #ffb400; border: 1px solid rgba(255,180,0,.25); }
.op-not { background: rgba(255,60,60,.12);  color: #ff3c3c; border: 1px solid rgba(255,60,60,.25); }
.op-w   { background: rgba(183,255,0,.1);   color: var(--clr-accent); border: 1px solid rgba(183,255,0,.2); }


/* ── Referenz-Tabelle ───────────────────────────────────────
   Tabellen für Suchbefehle, Eigenschaften, Filter.          */
.ref-table {
  width: 100%; border-collapse: collapse;
  font-size: var(--fs-sm); position: relative; z-index: 2;
}
.ref-table thead tr { background: rgba(183,255,0,.05); }
.ref-table thead th {
  font-family: var(--font-display); font-size: .63rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--clr-text-muted); padding: .65rem 1rem;
  text-align: left; border-bottom: 1px solid var(--clr-border);
}
.ref-table tbody tr {
  border-bottom: 1px solid var(--clr-border);
  transition: background var(--duration) var(--ease);
}
.ref-table tbody tr:last-child { border-bottom: none; }
.ref-table tbody tr:hover { background: var(--clr-surface2); }
.ref-table td { padding: .58rem 1rem; vertical-align: middle; }
.ref-table td:first-child { white-space: nowrap; }
.ref-table .td-label { display: flex; align-items: center; gap: .35rem; }
.ref-table .td-label svg { color: var(--clr-text-muted); opacity: .7; flex-shrink: 0; }


/* ── Beispiel-Karte ─────────────────────────────────────────
   Karten im Abschnitt "Praxis-Beispiele".                   */
.example-card {
  background: var(--clr-surface); border: 1px solid var(--clr-border);
  border-radius: var(--radius-md); padding: var(--space-6);
  transition: border-color var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease);
}
.example-card:hover {
  border-color: rgba(183,255,0,.3);
  box-shadow: 0 4px 24px rgba(183,255,0,.07);
}
.example-card .ex-icon {
  color: var(--clr-text-muted); margin-bottom: .6rem; display: flex;
}
.example-card .ex-cmd {
  font-family: 'Courier New', monospace; font-size: .85rem;
  color: var(--clr-accent); background: var(--clr-surface2);
  border-radius: var(--radius-sm); padding: .45rem .8rem;
  margin-bottom: .65rem; display: block; word-break: break-all;
}
.example-card .ex-desc {
  font-size: var(--fs-sm); color: var(--clr-text-muted); line-height: 1.55;
}


/* ── Tipp-Karte ─────────────────────────────────────────────
   Karten im Abschnitt "Tipps & Tricks".                     */
.tip-card {
  background: var(--clr-surface2); border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg); padding: var(--space-6);
  transition: transform var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease);
}
.tip-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.tip-card .tip-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  background: rgba(183,255,0,.07); border: 1px solid rgba(183,255,0,.15);
  display: flex; align-items: center; justify-content: center;
  color: var(--clr-accent); margin-bottom: var(--space-4);
}
.tip-card h3 {
  font-family: var(--font-display); font-size: var(--fs-base);
  font-weight: 700; color: var(--clr-accent); margin-bottom: var(--space-3);
}
.tip-card p,
.tip-card li { font-size: var(--fs-sm); color: var(--clr-text-muted); line-height: 1.6; }
.tip-card ul { list-style: none; padding-left: 0; }
.tip-card li { display: flex; align-items: flex-start; gap: .4rem; margin-bottom: .3rem; }
.tip-card li svg { color: var(--clr-accent); margin-top: .18rem; flex-shrink: 0; }


/* ── kind:-Kacheln ──────────────────────────────────────────
   Grid der Datei-Kategorien (kind:picture, kind:video ...). */
.kind-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: var(--space-3); position: relative; z-index: 2;
}
.kind-tile {
  background: var(--clr-surface2); border: 1px solid var(--clr-border);
  border-radius: var(--radius-md); padding: var(--space-4);
  display: flex; flex-direction: column; gap: .4rem;
  transition: border-color var(--duration) var(--ease),
              background var(--duration) var(--ease);
}
.kind-tile:hover { border-color: rgba(183,255,0,.3); background: var(--clr-surface); }
.kind-tile .k-head { display: flex; align-items: center; gap: .4rem; color: var(--clr-accent); }
.kind-tile code { font-size: .78rem; }
.kind-tile .k-formats { font-size: .68rem; color: var(--clr-text-muted); }


/* ── Warn- und Info-Box ─────────────────────────────────────
   Hinweisboxen in Rot (Warnung) und Grün (Info).           */
.warn-box {
  background: rgba(255,60,60,.05); border: 1px solid rgba(255,60,60,.2);
  border-radius: var(--radius-sm); padding: .65rem 1rem;
  font-size: var(--fs-xs); color: var(--clr-text-muted);
  margin-bottom: var(--space-4); display: flex; gap: .5rem; align-items: flex-start;
}
.warn-box svg { color: #ff5555; flex-shrink: 0; margin-top: .1rem; }

.info-box {
  background: rgba(183,255,0,.05); border: 1px solid rgba(183,255,0,.18);
  border-radius: var(--radius-sm); padding: .65rem 1rem;
  font-size: var(--fs-xs); color: var(--clr-text-muted);
  margin-bottom: var(--space-8); display: flex; gap: .5rem; align-items: flex-start;
}
.info-box svg { color: var(--clr-accent); flex-shrink: 0; margin-top: .1rem; }


/* ══════════════════════════════════════════════════════════
   RESPONSIVE – Mobile First
   ══════════════════════════════════════════════════════════ */

/* ── Tablet (≤ 900px) ─────────────────────────────────────── */
@media (max-width: 900px) {

  /* Operator-Tabelle: Beispiel-Spalte ausblenden */
  .ref-table th:last-child,
  .ref-table td:last-child { display: none; }

  /* Eigenschaften-Tabelle: Beispiel-Spalte gezielt ausblenden */
  .col-example { display: none; }

  /* Eigenschaften-Tabelle: Icon ausblenden */
  .ref-table .td-label svg { display: none; }
}


/* ── Mobil (≤ 768px) ─────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── Navbar: theme-toggle kleiner, Reihenfolge stabil ── */
  .theme-toggle {
    width: 32px; height: 32px;
    margin-left: auto;           /* schiebt sich direkt vor Hamburger */
  }

  /* ── Hero: weniger Padding, Schrift skaliert ── */
  .hero-section {
    padding-top: calc(var(--nav-height) + 1rem) !important;
  }

  /* ── Searchbar-Demo: voll breit, Text bricht um ── */
  .searchbar-demo {
    display: flex;
    flex-wrap: wrap;
    font-size: .78rem;
    padding: .6rem .9rem;
    width: 100%;
    box-sizing: border-box;
    word-break: break-all;
  }

  /* ── Stat-Zähler: 2×2 statt 4×1 ── */
  .stat-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem 2rem;
    margin-top: var(--space-8);
  }
  .stat-item .num { font-size: var(--fs-2xl); }

  /* ── Tabellen: horizontal scrollbar wenn nötig ── */
  .card, .example-card { overflow-x: auto; }

  .ref-table { font-size: var(--fs-xs); min-width: 0; }
  .ref-table thead th { padding: .5rem .6rem; }
  .ref-table td { padding: .45rem .6rem; }

  /* white-space: nowrap auf Mobil aufheben */
  .ref-table td:first-child { white-space: normal; }

  /* Langen code-Inhalt umbrechen */
  .ref-table td code { word-break: break-all; white-space: normal; }

  /* ── kind-Grid: 2 Spalten statt auto-fill mit 185px ── */
  .kind-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .kind-tile code { font-size: .7rem; }

  /* ── Beispiel-Karten: Code umbrechen ── */
  .example-card .ex-cmd { font-size: .75rem; }

  /* ── Tipp-Karten: volle Breite ── */
  .tip-card { padding: var(--space-4); }
}


/* ── Sehr kleine Screens (≤ 420px) ──────────────────────── */
@media (max-width: 420px) {

  /* Stat-Zähler: alle 4 untereinander */
  .stat-row { grid-template-columns: 1fr 1fr; gap: .8rem 1rem; }

  /* kind-Grid: eine Spalte */
  .kind-grid { grid-template-columns: 1fr; }

  /* Operator-Badges: kleinere Schrift */
  .op-badge { font-size: .5rem; padding: 1px 5px; }

  /* Searchbar-Text kürzer anzeigen */
  .searchbar-demo span:not(.cursor):not(.sb-icon) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
    display: inline-block;
  }
}


/* ── Print ──────────────────────────────────────────────────
   Ergänzt die Print-Regeln aus style.css.                   */
@media print {
  .hero-section { display: none !important; }
}


/* ============================================================
   HELL / DUNKEL TOGGLE
   ============================================================ */

/* ── Toggle-Button in der Navbar ── */
.theme-toggle {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--clr-surface2);
  border: 1px solid var(--clr-border);
  color: var(--clr-text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background var(--duration) var(--ease),
              color var(--duration) var(--ease),
              border-color var(--duration) var(--ease),
              transform var(--duration) var(--ease);
}
.theme-toggle:hover {
  background: var(--clr-accent);
  border-color: var(--clr-accent);
  color: #000;
  transform: rotate(20deg);
}


/* ── Light-Theme Variablen ──────────────────────────────────
   Werden aktiv wenn <html data-theme="light"> gesetzt wird. */
[data-theme="light"] {
  --clr-bg:           #f0f2f6;
  --clr-surface:      #ffffff;
  --clr-surface2:     #e5e8ef;
  --clr-border:       rgba(0, 0, 0, 0.09);
  --clr-text:         #0d0f14;
  --clr-text-muted:   #525770;
  /* Akzent dunkel genug für hellen Hintergrund */
  --clr-accent:       #4d8c00;
  --clr-accent2:      #cc0000;
  --clr-cta:          #4d8c00;
  --clr-cta-hover:    #3a6a00;
  --nav-bg:           rgba(240, 242, 246, 0.88);
  --nav-bg-scrolled:  rgba(240, 242, 246, 0.97);
  --shadow-card:      0 4px 24px rgba(0, 0, 0, 0.10);
}

/* code-Tag im Light-Mode */
[data-theme="light"] code {
  background: #dce5cc;
  color: #3a6a00;
}

/* Gitter und Glow sichtbarer auf hellem Hintergrund */
[data-theme="light"] .hero-grid-deko {
  background-image:
    linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px);
}
[data-theme="light"] .hero-glow {
  background: radial-gradient(circle, rgba(77,140,0,.1) 0%, transparent 70%);
}

/* Operator-Badges im Light-Mode */
[data-theme="light"] .op-and { background: rgba(0,160,70,.1);  color: #006e30; border-color: rgba(0,160,70,.25); }
[data-theme="light"] .op-or  { background: rgba(180,110,0,.1); color: #805000; border-color: rgba(180,110,0,.25); }
[data-theme="light"] .op-not { background: rgba(200,0,0,.08);  color: #aa0000; border-color: rgba(200,0,0,.2); }
[data-theme="light"] .op-w   { background: rgba(77,140,0,.1);  color: #3a6a00; border-color: rgba(77,140,0,.2); }

/* Ref-Tabelle im Light-Mode */
[data-theme="light"] .ref-table thead tr { background: rgba(77,140,0,.06); }
[data-theme="light"] .ref-table tbody tr:hover { background: var(--clr-surface2); }

/* Example-Card hover */
[data-theme="light"] .example-card:hover {
  border-color: rgba(77,140,0,.35);
  box-shadow: 0 4px 24px rgba(77,140,0,.08);
}

/* kind-Tile hover */
[data-theme="light"] .kind-tile:hover { border-color: rgba(77,140,0,.35); }

/* Warn/Info Boxen */
[data-theme="light"] .info-box {
  background: rgba(77,140,0,.06);
  border-color: rgba(77,140,0,.22);
}
[data-theme="light"] .info-box svg { color: #3a6a00; }

/* Searchbar Demo */
[data-theme="light"] .searchbar-demo {
  border-color: rgba(77,140,0,.35);
  box-shadow: 0 0 20px rgba(77,140,0,.08);
}

/* Logo Glow */
[data-theme="light"] .logo-img,
[data-theme="light"] .logo-placeholder {
  filter: drop-shadow(0 0 8px rgba(77,140,0,.3));
}