/* KernelHost Tools shared design system
   Versioned: bump ?v= query in <link> after edits to bust caches. */

:root{
  --bg:#0b0d12;
  --bg-2:#0f1218;
  --panel:#12161f;
  --panel-2:#171c27;
  --line:#1f2533;
  --line-2:#2a3346;
  --text:#e7ecf3;
  --text-2:#cdd5e4;
  --muted:#8a93a6;
  --accent:#00d4aa;
  --accent-2:#7c5cff;
  --danger:#ff5c7a;
  --warn:#ffb454;
  --ok:#00d4aa;
  --info:#5cb1ff;

  --radius:16px;
  --radius-sm:10px;
  --radius-xs:8px;

  --shadow:0 30px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.03) inset;
  --shadow-card:0 20px 50px -20px rgba(0,0,0,.5);

  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;

  --transition:120ms ease;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background:var(--bg);
  background-image:
    radial-gradient(900px 600px at 85% -10%, rgba(124,92,255,.18), transparent 60%),
    radial-gradient(800px 500px at -10% 110%, rgba(0,212,170,.15), transparent 55%),
    linear-gradient(180deg,#0b0d12 0%,#0a0c11 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  line-height:1.6;
}

a{color:var(--text-2);text-decoration:none}
a:hover{color:var(--text)}

::selection{background:rgba(0,212,170,.3);color:#fff}

/* Layout shells */
.wrap{width:min(960px,100%);margin:0 auto;padding:0 16px}
.wrap-narrow{width:min(820px,100%);margin:0 auto;padding:0 16px}
main{flex:1;padding:20px 0 40px}

/* Header: full-width mit Edge-Padding. Brand links, Nav rechts. */
.kh-header{
  padding:18px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.brand{
  display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:.2px;
  color:var(--text);text-decoration:none;
}
.brand:hover{color:var(--text)}
.brand .logo{
  width:30px;height:30px;border-radius:9px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:grid;place-items:center;color:#0b0d12;
  box-shadow:0 6px 20px -6px rgba(0,212,170,.6);
  flex-shrink:0;
}
.brand .logo svg{width:18px;height:18px}
.brand-name{display:flex;flex-direction:column;line-height:1.2}
.brand-name strong{font-size:15px}
.brand-name small{color:var(--muted);font-weight:500;font-size:12px}

nav.kh-nav{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
nav.kh-nav a{color:var(--muted);font-size:14px;border-bottom:1px dotted transparent}
nav.kh-nav a:hover{color:var(--text);border-bottom-color:var(--line-2)}
nav.kh-nav a.current{color:var(--text);border-bottom-color:var(--accent)}

.badge{
  font-size:12px;color:var(--muted);
  border:1px solid var(--line);padding:6px 10px;border-radius:999px;
  display:inline-flex;align-items:center;gap:6px;
  white-space:nowrap;
}
.badge.dot::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 4px rgba(0,212,170,.18);
}
.badge.dot-blue::before{background:var(--info);box-shadow:0 0 0 4px rgba(92,177,255,.18)}
.badge.dot-warn::before{background:var(--warn);box-shadow:0 0 0 4px rgba(255,180,84,.18)}

/* Hero */
.hero{margin:24px 0 8px}
.hero h1{
  margin:0 0 8px;font-size:clamp(24px,3.4vw,36px);letter-spacing:.2px;line-height:1.2;
}
.hero .lead{color:var(--muted);margin:0 0 18px;font-size:16px;max-width:62ch}

/* Headings */
h1{margin:24px 0 6px;font-size:clamp(24px,3.4vw,32px);line-height:1.25}
h2{margin:48px 0 14px;font-size:clamp(20px,2.6vw,24px);line-height:1.3}
h3{margin:22px 0 6px;font-size:17px}
p{margin:0 0 12px}

/* Card / panel */
.card{
  background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);
  border:1px solid var(--line);
  border-radius:calc(var(--radius) + 4px);
  box-shadow:var(--shadow);
  padding:24px;
}
.card-flush{padding:0;overflow:hidden}
.card-head{
  padding:16px 20px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;font-weight:600;
  background:rgba(255,255,255,.02);
}
.card-head svg{width:18px;height:18px;color:var(--accent);flex-shrink:0}
.card-body{padding:20px}

/* Plain content sections (between cards) */
.content p,.content li{color:var(--text-2)}
ul.check{list-style:none;padding:0;margin:0 0 14px}
ul.check li{padding:8px 0 8px 28px;position:relative;color:var(--text-2)}
ul.check li::before{
  content:"";position:absolute;left:0;top:14px;width:14px;height:14px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 0 0 4px rgba(0,212,170,.12);
}
ul.check li::after{
  content:"";position:absolute;left:4px;top:18px;width:6px;height:3px;
  border-left:2px solid #0b0d12;border-bottom:2px solid #0b0d12;transform:rotate(-45deg);
}

/* Form controls */
.input,
input[type=text],input[type=number],input[type=email],input[type=url],
input[type=search],input[type=tel],select,textarea{
  width:100%;
  background:#0a0d14;color:var(--text);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 14px;font-size:15px;font-family:var(--sans);
  outline:none;transition:border-color var(--transition),box-shadow var(--transition);
}
input:focus,select:focus,textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(0,212,170,.15);
}
input.mono{font-family:var(--mono)}
select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238a93a6' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}

textarea{min-height:90px;resize:vertical;line-height:1.5;font-family:var(--mono)}

/* Range */
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent-2) var(--p,40%),#1c2333 var(--p,40%),#1c2333 100%);
  outline:none;border:none;padding:0;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;
  background:#fff;border:3px solid var(--accent);
  box-shadow:0 4px 12px rgba(0,212,170,.4);cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;
  background:#fff;border:3px solid var(--accent);
  box-shadow:0 4px 12px rgba(0,212,170,.4);cursor:pointer;border:3px solid var(--accent);
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--line);background:#0e1320;color:var(--text);
  padding:12px 20px;border-radius:var(--radius-sm);
  font-size:15px;font-weight:600;font-family:var(--sans);
  cursor:pointer;transition:transform var(--transition),border-color var(--transition),background var(--transition),filter var(--transition);
  text-decoration:none;
}
.btn:hover{border-color:var(--line-2);background:#121828;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

.btn-primary{
  border:none;color:#0b0d12;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 12px 30px -10px rgba(0,212,170,.55), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.btn-primary:hover{filter:brightness(1.05);background:linear-gradient(135deg,var(--accent),var(--accent-2))}

.btn-block{width:100%;height:52px;font-size:15px}

.btn-icon{
  width:42px;height:42px;padding:0;
  display:grid;place-items:center;
}
.btn-icon svg{width:18px;height:18px}

/* Tab/radio group (segmented control): single Wrapper-Rahmen plus
   floating-active-state OHNE eigenen Rahmen oder inset-Shadow, sodass
   nicht zwei sichtbare Rechtecke entstehen. Active-Item bekommt nur
   die Gradient-Hintergrund + dunklen Text fuer maximalen Kontrast. */
.tab-group{
  display:inline-flex;gap:0;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  padding:4px;border-radius:12px;
  position:relative;
}
.tab-group label{
  flex:1;text-align:center;padding:9px 18px;cursor:pointer;
  border-radius:8px;
  font-weight:600;color:var(--muted);font-size:13.5px;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  transition:color var(--transition),background var(--transition),transform var(--transition);
  white-space:nowrap;
  user-select:none;
  position:relative;
}
.tab-group label svg{width:16px;height:16px}
.tab-group label:hover{color:var(--text-2)}
.tab-group input[type=radio]{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.tab-group label:has(input:checked){
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#0b0d12;
}
.tab-group label:has(input:checked):active{transform:scale(.97)}
.tab-group label:has(input:checked) svg{color:#0b0d12}

/* Switch */
.switch{position:relative;display:inline-block;width:44px;height:26px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch .slider{
  position:absolute;inset:0;cursor:pointer;background:#1c2333;
  border-radius:999px;transition:.2s;border:1px solid var(--line);
}
.switch .slider::before{
  content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;
  background:var(--text-2);border-radius:50%;transition:.2s;
}
.switch input:checked + .slider{background:linear-gradient(135deg,var(--accent),var(--accent-2));border-color:transparent}
.switch input:checked + .slider::before{transform:translateX(18px);background:#fff}

/* Settings row (label + toggle pattern) */
.row{
  display:flex;align-items:center;gap:14px;
  background:#0e1320;border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;
}
.row .lab{flex:1;min-width:0}
.row .lab .t{font-weight:600}
.row .lab .h{color:var(--muted);font-size:12.5px;margin-top:2px;line-height:1.5}

/* Console / terminal output */
.console{
  background:#020610;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:16px 18px;font-family:var(--mono);font-size:13.5px;line-height:1.55;
  color:#a8e9d4;white-space:pre-wrap;overflow-x:auto;
  border-left:3px solid var(--accent);
}
.console.error{color:#ffb1bf;border-left-color:var(--danger)}
.console.warn{color:#ffd9a3;border-left-color:var(--warn)}

/* Info grid (key-value pairs) */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.info-item{
  background:#0e1320;border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;
}
.info-item.full{grid-column:1 / -1;background:linear-gradient(135deg,rgba(0,212,170,.06),rgba(124,92,255,.06));border-color:rgba(0,212,170,.25)}
.info-item .lbl{display:block;font-size:11.5px;color:var(--muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.info-item .val{display:block;font-weight:600;font-size:15px;color:var(--text);word-break:break-word}
.info-item .val.mono{font-family:var(--mono);font-size:13.5px}
.info-item .val.highlight{color:var(--accent)}

/* Status messages */
.alert{
  padding:14px 16px;border-radius:var(--radius-sm);font-size:14px;
  display:flex;align-items:flex-start;gap:10px;
}
.alert-error{background:rgba(255,92,122,.08);border:1px solid rgba(255,92,122,.25);color:#ffd0d8}
.alert-success{background:rgba(0,212,170,.08);border:1px solid rgba(0,212,170,.25);color:#bff6e6}
.alert-warn{background:rgba(255,180,84,.08);border:1px solid rgba(255,180,84,.25);color:#ffe4b8}
.alert-info{background:rgba(92,177,255,.08);border:1px solid rgba(92,177,255,.25);color:#cfe6ff}

/* Status badges */
.status{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  padding:4px 10px;border-radius:999px;letter-spacing:.5px;
}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.status-online{background:rgba(0,212,170,.12);color:var(--ok);border:1px solid rgba(0,212,170,.3)}
.status-offline{background:rgba(255,92,122,.12);color:var(--danger);border:1px solid rgba(255,92,122,.3)}
.status-degraded{background:rgba(255,180,84,.12);color:var(--warn);border:1px solid rgba(255,180,84,.3)}

/* Tables */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line)}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:none}
.tbl th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px;background:rgba(255,255,255,.02)}
.tbl td{font-family:var(--mono);color:var(--text);word-break:break-all;font-size:13.5px}
.tbl td.lbl{font-family:var(--sans);color:var(--muted);width:240px;text-transform:uppercase;font-size:12px;letter-spacing:.5px;font-weight:600}
.tbl tr:hover td{background:rgba(255,255,255,.015)}

/* FAQ details */
details.faq{
  border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:10px;overflow:hidden;background:#0e1320;
}
details.faq summary{
  padding:14px 18px;cursor:pointer;font-weight:600;list-style:none;color:var(--text);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{
  content:"+";font-size:22px;color:var(--accent);transition:transform var(--transition);line-height:1;
}
details.faq[open] summary::after{transform:rotate(45deg)}
details.faq .a{padding:0 18px 16px;color:var(--text-2)}
details.faq .a p{margin:0 0 8px}
details.faq .a p:last-child{margin-bottom:0}

/* Appliances Grid fuer Energy-Calculator (typische Haushaltsverbraucher).
   Card-basiertes Layout statt Tabelle, mit Icon-Header und 3 Stat-Zellen
   pro Card (Watt / kWh-Jahr / Kosten-Jahr-highlighted). Responsive 1-3
   Spalten je Viewport. */
.appliances-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  margin:16px 0;
}
@media (max-width:899px){
  .appliances-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width:540px){
  .appliances-grid{grid-template-columns:1fr}
}
.appliance-card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px 12px;
  transition:border-color var(--transition),transform var(--transition);
}
.appliance-card:hover{
  border-color:var(--line-2);
  transform:translateY(-1px);
}
.appliance-head{
  display:flex;align-items:center;gap:10px;
  margin-bottom:10px;
}
.appliance-icon{
  font-size:22px;line-height:1;
  width:36px;height:36px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;
  background:linear-gradient(135deg, rgba(0,212,170,.10), rgba(124,92,255,.10));
}
.appliance-name{
  font-weight:600;font-size:14.5px;color:var(--text);line-height:1.25;
  flex:1;min-width:0;
}
.appliance-stats{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
}
.stat-cell{
  display:flex;flex-direction:column;gap:2px;
  padding:7px 8px;
  border-radius:8px;
  background:rgba(0,0,0,.18);
  min-width:0;
}
.stat-cell.stat-highlight{
  background:linear-gradient(135deg, rgba(0,212,170,.08), rgba(124,92,255,.08));
  border:1px solid rgba(0,212,170,.18);
}
.stat-label{
  font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;
  font-weight:600;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.stat-value{
  font-family:var(--mono);font-size:12.5px;color:var(--text);
  font-weight:600;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.stat-cell.stat-highlight .stat-value{
  color:var(--accent);
}

/* KernelHost-Produkte Cross-Sell-Grid (kh_products_grid). Erscheint unten
   auf Tool-Pages und ersetzt das alte tools-grid. Layout: 6 Karten als
   responsive Grid (3 auf desktop, 2 auf tablet, 1 auf mobile). Jede Karte
   ist klickbar und linkt auf das jeweilige Produkt auf kernelhost.com.
   Visuell minimal: zentrierter Icon, Produktname, Preis/Tagline darunter. */
.kh-products{margin:48px 0 24px}
.kh-products h2{margin:0 0 6px}
.kh-products > p{color:var(--muted);margin:0 0 18px}
.products-grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:14px;
}
.product-card{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:10px;
  padding:22px 14px 18px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0));
  color:var(--text);text-decoration:none;
  transition:transform var(--transition),border-color var(--transition),background var(--transition);
  text-align:center;
  min-height:140px;
}
.product-card:hover{
  transform:translateY(-2px);
  border-color:var(--accent);
  background:linear-gradient(180deg, rgba(0,212,170,.04), rgba(255,255,255,0));
}
.product-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px !important;height:44px !important;border-radius:12px;
  flex:0 0 auto;
  color:var(--accent);
  background:linear-gradient(135deg, rgba(0,212,170,.10), rgba(124,92,255,.10));
  overflow:hidden;
}
.product-icon svg{
  width:24px !important;height:24px !important;
  max-width:24px;max-height:24px;
  display:block;
}
.product-name{font-weight:600;font-size:14px;line-height:1.3}
.product-price,.product-tagline{
  font-size:12.5px;color:var(--muted);font-family:var(--mono);
}
@media (max-width:1099px){
  .products-grid{grid-template-columns:repeat(3, minmax(0, 1fr))}
}
@media (max-width:699px){
  .products-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width:419px){
  .products-grid{grid-template-columns:1fr}
}

/* Tools-Bar: persistente Icon-Leiste mit allen Tools direkt unter dem
   Header. Erscheint nur auf Tool-Pages und macht 1-Klick-Hop zwischen
   den Tools moeglich.

   Layout-Strategie:
     desktop (>=900px): Icon + Name nebeneinander, horizontal verteilt
     mobile  (<900px):  nur Icons, gleichmaessig verteilt, Tooltip via title.
   Auf Mobile zeigen wir keine Labels weil 8 Labels nicht in eine Zeile passen
   und das Tap-Target soll trotzdem gross genug bleiben. */
/* === Tool Mega-Menu ===
   Replaces the old horizontal kh-toolbar (which broke down beyond ~10 tools).
   - Trigger button shows "Alle Tools · CurrentTool ▾"
   - Click opens a panel with categorized tool tiles
   - Desktop (>= 720px): centered dropdown panel below header, max 760px wide
   - Mobile  (< 720px):  full-screen bottom-sheet, slides up from bottom
   - Backdrop dims the page; click outside or Escape closes
   - Live search filters tiles by name/desc */

.kh-tools-nav{
  position:relative;
  padding:8px 24px 10px;
  display:flex;
  margin-bottom:4px;
}
.kh-tools-trigger{
  display:inline-flex;align-items:center;gap:9px;
  width:auto;max-width:100%;
  padding:8px 14px;
  background:rgba(255,255,255,0.02);
  border:1px solid var(--line);
  border-radius:999px;
  cursor:pointer;
  color:var(--text);font:inherit;font-size:13px;
  text-align:start;
  transition:background var(--transition),border-color var(--transition);
}
.kh-tools-trigger:hover{background:rgba(0,212,170,0.06);border-color:rgba(0,212,170,0.3)}
.kh-tools-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.kh-tools-trigger[aria-expanded="true"]{background:rgba(0,212,170,0.08);border-color:rgba(0,212,170,0.4)}
.kh-tools-trigger-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;color:var(--accent);flex:0 0 auto;
}
.kh-tools-trigger-ico svg{width:16px !important;height:16px !important}
.kh-tools-trigger-label{font-weight:600;letter-spacing:-0.01em}
.kh-tools-trigger-current{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--muted);
  margin-inline-start:2px;
  font-size:12px;
  min-width:0;
}
.kh-tools-trigger-sep{opacity:0.5}
.kh-tools-trigger-cur-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;color:var(--muted);flex:0 0 auto;
}
.kh-tools-trigger-cur-ico svg{width:12px !important;height:12px !important}
.kh-tools-trigger-cur-name{
  font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0;max-width:32ch;
}
.kh-tools-trigger-chev{
  margin-inline-start:4px;
  display:inline-flex;color:var(--muted);
  transition:transform var(--transition),color var(--transition);
}
.kh-tools-trigger-chev svg{width:12px !important;height:12px !important}
.kh-tools-trigger[aria-expanded="true"] .kh-tools-trigger-chev{
  transform:rotate(180deg);color:var(--text);
}

/* Backdrop. Hidden by default, shown when panel is open. */
.kh-tools-backdrop{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.5);
  backdrop-filter:blur(2px);
  z-index:90;
  opacity:0;
  transition:opacity 200ms ease;
}
.kh-tools-backdrop[data-visible="true"]{opacity:1}

/* Panel. Two layouts via @media. */
.kh-tools-panel{
  position:absolute;
  top:calc(100% - 4px);
  inset-inline-start:24px;
  transform:translateY(-6px);
  width:min(760px, calc(100vw - 48px));
  max-height:min(640px, 75vh);
  display:flex;flex-direction:column;
  background:linear-gradient(180deg, #0d1018, #0a0c12);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 24px 60px -12px rgba(0,0,0,0.6),0 0 0 1px rgba(0,212,170,0.04);
  z-index:100;
  opacity:0;pointer-events:none;
  transition:opacity 180ms ease,transform 180ms ease;
}
[dir="rtl"] .kh-tools-panel{
  inset-inline-start:auto;inset-inline-end:24px;
}
.kh-tools-panel[data-open="true"]{
  opacity:1;pointer-events:auto;
  transform:translateY(0);
}

.kh-tools-panel-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px 12px;
  border-bottom:1px solid var(--line);
}
.kh-tools-panel-title{
  margin:0;font-size:15px;font-weight:600;letter-spacing:-0.01em;
}
.kh-tools-panel-close{
  display:none;  /* desktop: only ESC + click-outside, hide button */
  align-items:center;justify-content:center;
  width:36px;height:36px;
  background:transparent;border:0;border-radius:8px;cursor:pointer;
  color:var(--muted);
  transition:color var(--transition),background var(--transition);
}
.kh-tools-panel-close:hover{color:var(--text);background:rgba(255,255,255,0.04)}

.kh-tools-search-wrap{
  position:relative;
  margin:12px 16px 6px;
}
.kh-tools-search-ico{
  position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);
  color:var(--muted);pointer-events:none;
  display:inline-flex;
}
/* input.kh-tools-search bumps specificity above the global input[type=search]
   reset (which would otherwise win over a class-only selector and override
   our left-padding, making the search icon overlap the placeholder). */
input.kh-tools-search{
  width:100%;
  padding:10px 12px 10px 38px;
  background:#0c1016;
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--text);font:inherit;font-size:14px;
  transition:border-color var(--transition),background var(--transition);
}
[dir="rtl"] input.kh-tools-search{padding:10px 38px 10px 12px}
[dir="rtl"] .kh-tools-search-ico{inset-inline-start:auto;inset-inline-end:12px}
input.kh-tools-search:focus{outline:none;border-color:var(--accent);background:#0a0e14;box-shadow:none}
input.kh-tools-search::placeholder{color:rgba(255,255,255,0.4)}

.kh-tools-grid{
  flex:1 1 auto;
  overflow-y:auto;
  padding:8px 16px 16px;
  scrollbar-width:thin;
}
.kh-tools-cat{margin-top:14px}
.kh-tools-cat:first-child{margin-top:6px}
.kh-tools-cat[hidden]{display:none}
.kh-tools-cat-label{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin:0 0 8px;
  font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--muted);
}
.kh-tools-cat-desc{
  font-size:11px;font-weight:400;letter-spacing:0;text-transform:none;
  color:rgba(255,255,255,0.35);
}
/* ul.kh-tools-cat-list: explicit logical-axis paddings unset because iOS
   Safari uses a separate UA `padding-inline-start:40px` rule on <ul> that
   the physical `padding:0` shorthand does not always override (cascade
   keeps the logical declaration when both are present). Resetting both
   logical and physical avoids the left-edge clipping seen on real devices. */
ul.kh-tools-cat-list{
  list-style:none;margin:0;
  padding:0;
  padding-inline-start:0;padding-inline-end:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:6px;
  min-width:0;
}
.kh-tools-tile{
  display:flex;align-items:center;gap:11px;
  padding:10px 12px;
  text-decoration:none;color:var(--text);
  border-radius:10px;
  border:1px solid transparent;
  transition:background var(--transition),border-color var(--transition);
}
.kh-tools-tile:hover{
  background:rgba(0,212,170,0.06);
  border-color:rgba(0,212,170,0.18);
}
.kh-tools-tile.is-active{
  background:rgba(0,212,170,0.1);
  border-color:rgba(0,212,170,0.4);
}
.kh-tools-tile.is-active .kh-tools-tile-ico{color:var(--accent)}
.kh-tools-tile[hidden]{display:none}
.kh-tools-tile-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;flex:0 0 auto;
  border-radius:8px;
  background:rgba(255,255,255,0.04);
  color:var(--muted);
  transition:color var(--transition),background var(--transition);
}
.kh-tools-tile-ico svg{width:18px !important;height:18px !important}
.kh-tools-tile:hover .kh-tools-tile-ico{color:var(--accent);background:rgba(0,212,170,0.1)}
.kh-tools-tile-body{
  display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0;
}
.kh-tools-tile-name{
  font-size:14px;font-weight:600;line-height:1.25;letter-spacing:-0.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kh-tools-tile-desc{
  font-size:12px;color:var(--muted);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kh-tools-tile-arrow{
  color:rgba(255,255,255,0.25);flex:0 0 auto;
  transition:color var(--transition),transform var(--transition);
}
.kh-tools-tile:hover .kh-tools-tile-arrow{color:var(--accent);transform:translateX(2px)}
[dir="rtl"] .kh-tools-tile:hover .kh-tools-tile-arrow{transform:translateX(-2px) scaleX(-1)}
[dir="rtl"] .kh-tools-tile-arrow{transform:scaleX(-1)}

.kh-tools-empty{
  text-align:center;padding:24px 16px;
  color:var(--muted);font-size:13px;
}

/* No-JS fallback: panel sits open below trigger as a static list. The
   markup ships with class="kh-tools-nav no-js"; the inline JS strips
   `no-js` on init. If JS fails (Lockdown Mode, CSP block, parse error),
   the user still sees the full tool list. */
.kh-tools-nav.no-js .kh-tools-panel,
.kh-tools-nav.no-js .kh-tools-panel[hidden]{
  display:flex;flex-direction:column;
  position:static;transform:none;
  width:auto;max-width:none;height:auto;max-height:none;
  opacity:1;pointer-events:auto;
  border-radius:0;border-left:0;border-right:0;
  box-shadow:none;
}
.kh-tools-nav.no-js .kh-tools-backdrop{display:none !important}
.kh-tools-nav.no-js .kh-tools-panel-close,
.kh-tools-nav.no-js .kh-tools-search-wrap,
.kh-tools-nav.no-js .kh-tools-trigger-chev{display:none}

/* ---- Mobile (<720px): full-screen bottom-sheet ---- */
@media (max-width:719px){
  .kh-tools-nav{padding:6px 16px 8px}
  .kh-tools-trigger{padding:8px 12px;gap:8px;font-size:13px}
  .kh-tools-trigger-current{font-size:12px}
  .kh-tools-trigger-cur-name{max-width:34vw}

  .kh-tools-panel{
    position:fixed;
    top:auto;bottom:0;left:0;right:0;inset-inline-start:0;
    transform:translateY(100%);
    width:100vw;max-width:none;
    max-height:90vh;height:90vh;
    border-radius:18px 18px 0 0;
    box-shadow:0 -12px 40px -8px rgba(0,0,0,0.6);
    z-index:120;
  }
  [dir="rtl"] .kh-tools-panel{transform:translateY(100%)}
  .kh-tools-panel[data-open="true"]{transform:translateY(0)}
  [dir="rtl"] .kh-tools-panel[data-open="true"]{transform:translateY(0)}

  .kh-tools-panel-close{display:inline-flex}
  /* Sticky head + search on mobile so they stay visible while the user
     scrolls long tile lists. Otherwise the title and the search input
     scroll out of view and the user thinks "suche fehlt". */
  .kh-tools-panel-head{
    padding:14px 16px;position:sticky;top:0;z-index:2;
    background:linear-gradient(180deg, #0d1018, rgba(13,16,24,0.96));
    backdrop-filter:blur(8px);
  }
  .kh-tools-panel-head::before{
    content:'';position:absolute;top:6px;left:50%;
    width:38px;height:4px;
    background:rgba(255,255,255,0.15);border-radius:2px;
    transform:translateX(-50%);
  }
  .kh-tools-search-wrap{
    position:sticky;top:54px;z-index:2;
    background:linear-gradient(180deg, #0d1018, rgba(13,16,24,0.96));
    margin:8px 12px;
    padding-bottom:8px;
  }
  /* minmax(0, 1fr) erzwingt dass die Spalte unter min-content schrumpfen
     darf. Ohne minmax(0, ...) waere die effektive min-width = intrinsische
     min-content der Tile-Inhalte (lange Tool-Namen mit white-space:nowrap),
     wodurch die Tiles breiter als der Viewport wuerden und ihre Inhalte
     visuell nach links rausragen. */
  ul.kh-tools-cat-list{grid-template-columns:minmax(0, 1fr);gap:6px}
  .kh-tools-tile{padding:12px;min-width:0;max-width:100%;overflow:hidden}
  .kh-tools-tile-ico{width:36px;height:36px}
  .kh-tools-tile-ico svg{width:20px !important;height:20px !important}
  .kh-tools-tile-name{font-size:14px}
  .kh-tools-tile-desc{font-size:12px}
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .kh-tools-panel,.kh-tools-backdrop,.kh-tools-trigger-chev,
  .kh-tools-tile-arrow,.kh-tools-tile{transition:none !important}
}

/* When panel is open, lock background scroll. */
body.kh-tools-menu-open{overflow:hidden}

/* Tools grid (cross-linking other tools).
   Layout-Strategie:
     desktop (>=1100px): 4 Spalten fix (8 Tools = 2 saubere Reihen)
     tablet (700-1099px): 2 Spalten
     mobile (<700px): 1 Spalte */
.tools-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}
@media (max-width:1099px){
  .tools-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width:699px){
  .tools-grid{grid-template-columns:1fr}
}
.tools-grid a{
  display:block;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);
  background:#0e1320;color:var(--text);text-decoration:none;
  transition:transform var(--transition),border-color var(--transition),background var(--transition);
  position:relative;
}
.tools-grid a:hover{
  border-color:var(--line-2);transform:translateY(-2px);
  background:linear-gradient(180deg,#11172a,#0e1320);
}
.tools-grid a .ti{
  display:flex;align-items:center;gap:10px;margin-bottom:8px;
}
.tools-grid a .ti .ico{
  width:32px;height:32px;border-radius:8px;
  background:linear-gradient(135deg,rgba(0,212,170,.15),rgba(124,92,255,.15));
  display:grid;place-items:center;color:var(--accent);
  flex-shrink:0;
}
.tools-grid a .ti .ico svg{width:16px;height:16px}
.tools-grid a .name{font-weight:600;font-size:15px}
.tools-grid a .desc{font-size:13px;color:var(--muted);line-height:1.5}
.tools-grid a .arrow{position:absolute;right:18px;top:18px;color:var(--muted);transition:transform var(--transition),color var(--transition)}
.tools-grid a:hover .arrow{color:var(--accent);transform:translateX(2px)}

/* Strength bar */
.strength{
  display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted);
}
.strength .bar{flex:1;height:6px;background:#0e1320;border-radius:999px;overflow:hidden;border:1px solid var(--line)}
.strength .bar > i{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--danger),var(--warn),var(--ok));
  transition:width .3s ease;
}
.strength b{color:var(--text);font-weight:600}

/* Loading overlay */
.kh-loader{
  position:fixed;inset:0;background:rgba(11,13,18,.85);backdrop-filter:blur(8px);
  z-index:9999;display:none;flex-direction:column;
  justify-content:center;align-items:center;
  opacity:0;transition:opacity .2s ease;
}
.kh-loader.active{display:flex;opacity:1}
.kh-spinner{
  width:46px;height:46px;
  border:3px solid rgba(255,255,255,.1);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:kh-spin 1s linear infinite;
  margin-bottom:14px;
}
@keyframes kh-spin{to{transform:rotate(360deg)}}

/* Footer */
.kh-footer{
  text-align:center;color:var(--muted);font-size:12.5px;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,transparent, rgba(0,0,0,.25));
  padding:24px 16px;
}
.kh-footer .row-links{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:8px}
.kh-footer a{color:var(--text-2);border-bottom:1px dotted var(--line-2)}
.kh-footer a:hover{color:var(--text)}

/* Utilities */
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.center{text-align:center}
.flex{display:flex}
.flex-col{display:flex;flex-direction:column}
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}
.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.hidden{display:none !important}

/* Subtle dotted note (e.g. info hint) */
.note{
  font-size:12.5px;color:var(--muted);
  border:1px dashed var(--line);border-radius:var(--radius-sm);padding:12px 14px;line-height:1.55;
}
.note b{color:var(--text-2)}

/* Responsive */
@media (max-width:640px){
  .kh-header{padding:14px 16px;flex-direction:column;align-items:flex-start;gap:10px}
  nav.kh-nav{width:100%}
  .card{padding:18px;border-radius:18px}
  .btn-icon{width:38px;height:38px}
  .info-grid{grid-template-columns:1fr}
  .tab-group{flex-direction:column}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ----------------------------------------------------------------------------
   Language switcher (kh_lang_switcher in layout.php)
   Native <details>/<summary> dropdown so it works without JS. The summary is
   rendered as a chip-shaped button in the header nav; the menu is absolute-
   positioned below it.
   ---------------------------------------------------------------------------- */
.kh-lang{
  position:relative;
}
.kh-lang summary{
  display:inline-flex;align-items:center;gap:6px;
  list-style:none;cursor:pointer;
  font-size:12.5px;color:var(--text-2);
  border:1px solid var(--line);
  background:var(--panel);
  padding:5px 10px;border-radius:999px;
  transition:border-color var(--transition),background var(--transition),color var(--transition);
}
.kh-lang summary::-webkit-details-marker{display:none}
.kh-lang summary:hover,
.kh-lang[open] summary{
  border-color:var(--line-2);background:var(--panel-2);color:var(--text);
}
.kh-flag{
  display:inline-block;flex-shrink:0;
  border-radius:2px;
  width:16px;height:11px;
  box-shadow:0 0 0 1px rgba(0,0,0,.25) inset;
}
.kh-lang-current{font-weight:500}
.kh-lang-chev{opacity:.6;flex-shrink:0;margin-left:2px}
.kh-lang[open] .kh-lang-chev{transform:rotate(180deg)}
.kh-lang-panel{
  position:absolute;
  top:calc(100% + 8px);right:0;
  z-index:50;
  /* Panel-Breite: skaliert mit Viewport, hat aber harte Min/Max-Grenzen.
     Auf engen Screens (Mobile) bleibt 16px Rand zum Viewport-Rand. */
  width:clamp(240px, calc(100vw - 24px), 400px);
  /* Panel-Hoehe: niemals ueber Viewport hinaus, immer mit Sicherheits-Abstand
     fuer Header und unteren Rand. Scrollt intern wenn Inhalt laenger. */
  max-height:min(calc(100vh - 96px), 560px);
  overflow-y:auto;
  padding:10px;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line-2);
  border-radius:calc(var(--radius) + 2px);
  box-shadow:0 24px 60px -12px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.02) inset;
  animation:kh-lang-fade .14s ease-out;
}
@keyframes kh-lang-fade{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}
.kh-lang-grid{
  display:grid;
  /* auto-fit: passt Spaltenzahl automatisch an die Panel-Breite an.
     Bei <300px Panel = 1 Spalte, ab ~320px = 2 Spalten, ab ~480px = 3.
     So adaptiert sich das Layout fluessig ueber alle Bildschirmgroessen. */
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:4px;
}
.kh-lang-cell{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:8px;
  color:var(--text-2);text-decoration:none;
  font-size:13px;line-height:1.2;
  border:1px solid transparent;
  transition:background var(--transition),color var(--transition),border-color var(--transition),transform var(--transition);
  min-width:0;
}
.kh-lang-cell:hover{
  background:rgba(255,255,255,.04);
  color:var(--text);
  border-color:var(--line);
}
.kh-lang-cell:active{transform:scale(.98)}
.kh-lang-cell.active{
  background:linear-gradient(135deg,rgba(0,212,170,.14),rgba(124,92,255,.14));
  color:var(--text);
  border-color:rgba(0,212,170,.35);
  box-shadow:0 0 0 1px rgba(0,212,170,.10) inset;
}
.kh-lang-flag{
  display:inline-flex;flex-shrink:0;
  width:22px;height:16px;
  border-radius:3px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.35) inset, 0 1px 2px rgba(0,0,0,.25);
}
.kh-lang-flag .kh-flag,
.kh-lang-flag svg{
  width:100%;height:100%;display:block;border-radius:0;box-shadow:none;
}
.kh-lang-name{
  flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-weight:500;
  /* Force LTR-Alignment im Switcher, damit RTL-Sprachen wie Arabisch
     nicht weit vom Flag weg an den rechten Rand rutschen. Unicode-
     Bidi-Algorithmus rendert die arabischen Glyphen trotzdem korrekt
     rechts-nach-links, nur die Block-Alignment bleibt links. */
  text-align:start;
  unicode-bidi:isolate;
}

/* Mobile (< 640px): Position fixed unten links am Viewport, vom Trigger
   ENTKOPPELT. Egal wo der Trigger durch flex-wrap landet, das Panel
   kommt immer an derselben Stelle (unten links) und kann niemals
   off-screen clippen. Force per !important, damit auch Inline-Styles
   oder spaetere Regeln nicht reinpfuschen. */
@media (max-width:640px){
  .kh-lang-panel{
    position:fixed !important;
    top:auto !important;
    bottom:16px !important;
    left:16px !important;
    right:auto !important;
    width:clamp(240px, calc(100vw - 32px), 340px) !important;
    max-height:calc(100vh - 100px) !important;
  }
  .kh-lang-grid{grid-template-columns:1fr !important}
  html[dir="rtl"] .kh-lang-panel{
    left:auto !important;
    right:16px !important;
  }
}

/* Sehr enge Screens: kompakte Cell-Padding und kleinere Schrift. */
@media (max-width:480px){
  .kh-lang-cell{padding:8px 9px;font-size:12.5px}
  .kh-lang-flag{width:20px;height:14px}
}

/* ----------------------------------------------------------------------------
   RTL support (Arabic, html[dir="rtl"])
   The base layout is mostly logical-property friendly already (flex,
   grid, padding shorthand), so the patches below cover the few places that
   reference physical directions (margin-left, transforms, switcher anchor).
   ---------------------------------------------------------------------------- */
html[dir="rtl"] body{
  direction:rtl;
  text-align:right;
}
html[dir="rtl"] .kh-lang-panel{
  right:auto;left:0;
}
html[dir="rtl"] .kh-nav{
  flex-direction:row-reverse;
}
html[dir="rtl"] .brand{
  flex-direction:row-reverse;
}
html[dir="rtl"] .arrow{
  transform:scaleX(-1);
}
html[dir="rtl"] .row-links a + a::before{
  content:none;
}
html[dir="rtl"] code,
html[dir="rtl"] .mono,
html[dir="rtl"] pre,
html[dir="rtl"] .console{
  direction:ltr;
  text-align:left;
  unicode-bidi:embed;
}
html[dir="rtl"] input.mono,
html[dir="rtl"] input[type="text"],
html[dir="rtl"] input[type="number"]{
  direction:ltr;
  text-align:left;
}