/* 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. */
.kh-toolbar{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0));
  margin-bottom:8px;
}
.kh-toolbar-row{
  display:flex;align-items:stretch;gap:2px;
  padding:0 24px;                  /* matches .kh-header padding-x */
  width:100%;
  scrollbar-width:thin;
}
.kh-toolbar-item{
  display:inline-flex;flex-direction:row;align-items:center;justify-content:center;
  gap:8px;
  padding:12px 10px;
  text-decoration:none;color:var(--muted);
  font-size:13px;line-height:1.2;
  border-bottom:2px solid transparent;
  white-space:nowrap;
  transition:color var(--transition),border-color var(--transition),background var(--transition);
  /* Items dehnen sich gleichmaessig ueber die volle Toolbar-Breite. So ist
     der Anfang am brand-linken-Rand und das letzte Item am nav-rechten-Rand
     ausgerichtet, statt zentriert mit Luecken aussen. */
  flex:1 1 0;
  min-width:0;
}
.kh-toolbar-item:hover{
  color:var(--text);
  background:rgba(255,255,255,0.03);
}
.kh-toolbar-item.active{
  color:var(--text);
  border-bottom-color:var(--accent);
  background:linear-gradient(180deg, rgba(0,212,170,0.08), transparent);
}
.kh-toolbar-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;
  color:inherit;flex:0 0 auto;
}
.kh-toolbar-ico svg{width:18px !important;height:18px !important}
.kh-toolbar-item.active .kh-toolbar-ico{color:var(--accent)}
.kh-toolbar-name{font-weight:500}

/* Mobile (< 900px): Labels ausblenden, Icons gleichmaessig verteilen
   damit alle 8 Tools sichtbar bleiben ohne sich zu ueberlappen. */
@media (max-width:899px){
  .kh-toolbar-row{
    justify-content:space-between;
    gap:0;
    padding:0 8px;
  }
  .kh-toolbar-item{
    flex:1 1 0;
    min-width:0;
    padding:10px 6px;
  }
  .kh-toolbar-name{display:none}
  .kh-toolbar-ico{width:24px;height:24px}
  .kh-toolbar-ico svg{width:20px !important;height:20px !important}
}

/* 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;
}