/* ==========================================================================
   KI-Verbrauchsrechner — CLEAN-VARIANTE (Test)
   Wird NACH style.css geladen und überschreibt nur Farben, Flächen, Rahmen.
   Prinzip: weißer Grund, schwarze Schrift, keine Boxen, nur feine Trennlinien.
   Layout/Aufbau bleibt unverändert.
   ========================================================================== */

:root {
  --ink:    #000000;   /* Fließtext, Überschriften, Zahlen */
  --ink-2:  #444444;   /* sekundärer Text */
  --ink-3:  #6b6b6b;   /* Meta, Labels, Hinweise */
  --ink-4:  #a3a3a3;   /* sehr leise Meta-Infos */
  --rule:   #e4e4e4;   /* feine Trennerlinie */
  --rule-2: #000000;   /* betonte Linie (aktiv, Fokus) */
  --paper:  #ffffff;
}

/* --------------------------------------------------------------------------
   Grundfläche
   -------------------------------------------------------------------------- */
html { background: var(--paper); }
body,
.bg-gray-950 { background-color: var(--paper); color: var(--ink); }
body { -webkit-font-smoothing: auto; }

/* Hintergrund-Gradient-Layer ausblenden */
body > .fixed.inset-0 { display: none; }

/* --------------------------------------------------------------------------
   Textfarben → Schwarz/Grau
   -------------------------------------------------------------------------- */
.text-gray-100, .text-gray-200, .text-gray-300 { color: var(--ink); }
.text-gray-400 { color: var(--ink-2); }
.text-gray-500 { color: var(--ink-3); }
.text-gray-600, .text-gray-700 { color: var(--ink-3); }

.text-emerald-400, .text-emerald-500,
.text-teal-300, .text-teal-400,
.text-yellow-400, .text-yellow-500,
.text-red-400 { color: var(--ink); }

/* Verlaufs-Überschrift → schlicht schwarz; per CSS in Kleinbuchstaben (Markup/SEO bleibt „KI Verbrauchsrechner") */
h1[data-i18n="title"] { text-transform: lowercase; }
.bg-gradient-to-r.from-emerald-400.to-teal-300 { background-image: none; }
.text-transparent { color: var(--ink); }
.bg-clip-text { -webkit-background-clip: border-box; background-clip: border-box; }

/* Hover-/Group-Zustände: nur Schwarz, kein Farbwechsel */
.hover\:text-emerald-400:hover,
.hover\:text-teal-400:hover,
.hover\:text-gray-400:hover,
.hover\:text-gray-300:hover,
.group:hover .group-hover\:text-emerald-400,
.group:hover .group-hover\:text-teal-400 { color: var(--ink); }

a:hover { text-decoration: underline; text-underline-offset: 2px; }
button:hover, summary:hover, .flip-card:hover { text-decoration: none; }

/* --------------------------------------------------------------------------
   Flächen & Rahmen entfernen
   -------------------------------------------------------------------------- */
.bg-gray-800, .bg-gray-800\/50,
.bg-emerald-500\/10, .bg-emerald-500\/20,
.bg-teal-500\/10, .bg-teal-500\/20,
.hover\:bg-emerald-500\/20:hover, .hover\:bg-teal-500\/20:hover,
.group:hover .group-hover\:bg-emerald-500\/20,
.group:hover .group-hover\:bg-teal-500\/20 { background-color: transparent; }

.border-gray-700, .border-gray-800, .border-gray-800\/50,
.border-emerald-500\/20, .border-emerald-500\/10, .border-yellow-500\/10 { border-color: var(--rule); }
.hover\:border-emerald-500\/50:hover,
.hover\:border-emerald-500\/30:hover { border-color: var(--rule); }
.focus\:border-emerald-500:focus { border-color: var(--rule-2); }

.rounded-2xl, .rounded-xl, .rounded-lg { border-radius: 0; }

.glow { box-shadow: none; }
.bolt-pulse { animation: none; filter: none; }
.fade-in { animation: none; } /* keine Einblend-Verzoegerung: Header ist das LCP-Element */

/* Karten → offene Abschnitte mit feiner Linie oben */
.card,
.input-panel {
  background: transparent;
  backdrop-filter: none;
  border: 0;
  border-top: 1px solid var(--rule);
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}
.card:hover { border-color: var(--rule); }
.card.p-5, .card.p-6 { padding-left: 0; padding-right: 0; }
.input-divider { background: var(--rule); }

/* Linkes Eingabe-Panel: keine Fläche, kein Schatten; auf Desktop eine kräftigere
   schwarze Linie rechts als Trenner zum Ergebnisteil */
.input-panel,
.input-panel.p-5 {
  border: 0;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
  background: transparent;
  box-shadow: none;
}
.input-panel:hover { border-color: transparent; }
@media (min-width: 1024px) {
  /* Linie hängt am Panel selbst, nicht an der Grid-Spalte: sie ist nur so hoch wie der
     Filterinhalt und wächst mit, wenn ein Akkordeon geöffnet wird */
  .grid.lg\:grid-cols-5 > .lg\:col-span-2 { align-self: start; }
  .grid.lg\:grid-cols-5 > .lg\:col-span-2 > .input-panel {
    border-right: 2px solid var(--ink);
    padding-right: 1.5rem;
  }
}

/* Ergebnis-Karten: keine Linien; aktive Karte über sehr helle Hintergrundfläche markieren */
.result-card {
  border-top: 0;
  cursor: pointer;
  padding: 1rem 0.75rem;
  border-radius: 0;
  background: transparent;
  transition: background-color 150ms ease;
}
.result-card:hover { transform: none; box-shadow: none; background: #fafafa; }
.result-card.active { border-top: 0; box-shadow: none; background: #f4f4f4; }
.result-card.active:hover { background: #f4f4f4; }

/* Spaltenverhältnis: linke Filterspalte schmaler (3/10), rechte Ergebnisspalte breiter (7/10) */
@media (min-width: 1024px) {
  .grid.lg\:grid-cols-5 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .grid.lg\:grid-cols-5 > .lg\:col-span-2 { grid-column: span 3 / span 3; }
  .grid.lg\:grid-cols-5 > .lg\:col-span-3 { grid-column: span 7 / span 7; }
}

/* Header-Badge „Energie & CO2" → reine Textzeile */
header .inline-flex.rounded-full {
  background: transparent;
  border: 0;
  padding-left: 0;
  padding-right: 0;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Sprachumschalter → Textlink ohne Pille */
#langToggle {
  background: transparent;
  border: 0;
  padding-left: 0;
  padding-right: 0;
  color: var(--ink-3);
}
#langToggle:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   Formularelemente
   -------------------------------------------------------------------------- */
input[type="number"] {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  padding-left: 0;
}
input[type="number"]:focus { border-bottom-color: var(--ink); outline: none; }
/* Dropdowns: gleiche hellgraue Fläche wie die aktive Zeitraum-Karte, keine Rundung, kein Rahmen */
select,
select.bg-gray-800,
select.border {
  background-color: #f4f4f4;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  padding-left: 0.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M6 8.5L1 3.5h10z'/%3E%3C/svg%3E");
  background-position: right 12px center;
}
select:hover, select.bg-gray-800:hover { background-color: #ededed; }
select:focus { outline: none; box-shadow: inset 0 0 0 1px var(--ink); }
select option { color: var(--ink); background: var(--paper); }

input[type="range"] { background: var(--rule); height: 2px; border-radius: 0; }
input[type="range"]::-webkit-slider-thumb {
  width: 16px; height: 16px;
  background: var(--ink);
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 1px var(--ink);
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  background: var(--ink);
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 1px var(--ink);
}

/* Häufigkeit der Nutzung: gleiche Optik wie die Verteilungszeilen */
.queries-row-label { font-size: 0.75rem; font-weight: 500; color: var(--ink); }
.queries-block input.queries-input {
  width: 3.5rem;
  border: 0;
  padding: 0;
  text-align: right;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink);
  background: transparent;
}
.queries-block input.queries-input:focus { outline: none; border-bottom: 1px solid var(--ink); }
.queries-block input[type="range"] { height: 1px; }
.queries-block input[type="range"]::-webkit-slider-thumb { width: 12px; height: 12px; }
.queries-block input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; }

/* Vertikale Abstände zu den Trennlinien um 20 % verringert */
.input-panel.space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }          /* 1.25rem → 1rem */
.lg\:col-span-3.space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }       /* 1.25rem → 1rem */
.card.p-5 { padding-top: 1rem; padding-bottom: 1rem; }                                   /* 1.25rem → 1rem */
.card.p-6 { padding-top: 1.2rem; padding-bottom: 1.2rem; }                               /* 1.5rem → 1.2rem */
#faqContainer.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.8rem; }        /* 1rem → 0.8rem */
details + details { padding-top: 0.8rem; }                                               /* 1rem → 0.8rem */
.result-card.card.p-5 { padding-top: 0.8rem; padding-bottom: 0.8rem; }                          /* 1rem → 0.8rem */

/* Support-Block unter dem Rechner: zentriert, volle Breite, schwarzer Button */
.support-section {
  margin-top: 0.75rem; /* Abstand Akkordeon-Text → Linie: von 56 px auf 28 px halbiert */
  padding: 2rem 0;
  border-top: 1px solid var(--rule);
  text-align: center;
}
.support-text { font-size: 0.875rem; color: var(--ink-2); margin-bottom: 1rem; }
.support-btn {
  display: inline-block;
  padding: 0.85rem 2.25rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 2px solid var(--ink);
}
.support-btn:hover { background: var(--paper); color: var(--ink); text-decoration: none; }

/* Überschrift über den Ergebniskarten: gleiche Optik wie die Filter-Überschriften links */
.content-heading { font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; color: var(--ink); margin: 0; padding-top: 1.25rem; /* gleiche Höhe wie „Häufigkeit der Nutzung" (Panel-Innenabstand) */ }
.lg\:col-span-3.space-y-5 > .content-heading + * { margin-top: 0.5rem; }

/* Trennlinie erst auf Höhe der Überschriften beginnen lassen: der obere Innenabstand wandert
   vom Panel (mit der Linie) auf die Spalte (ohne Linie) */
.grid.lg\:grid-cols-5 > .lg\:col-span-2 { padding-top: 1.25rem; }
.grid.lg\:grid-cols-5 > .lg\:col-span-2 > .input-panel,
.grid.lg\:grid-cols-5 > .lg\:col-span-2 > .input-panel.p-5 { padding-top: 0; }

/* Abstand unter dem zweispaltigen Bereich (Filter + Inhalt) zur nächsten Linie */
.grid.lg\:grid-cols-5 { margin-bottom: 25px; }

/* Outline um den Rechner (Filter + Inhalt), gleiche Linienstärke wie die Filter (2 px) */
.grid.lg\:grid-cols-5 {
  border: 2px solid var(--ink);
  padding: 0 1.25rem 1.25rem;
}

/* Filter-Akkordeons im linken Panel (Aufgabenverteilung, Stromregion) — Optik wie rechts */
.filter-acc { border: 0; }
.filter-acc-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
}
.filter-acc-summary::-webkit-details-marker { display: none; }
.filter-acc[open] > .filter-acc-summary { color: var(--ink); }
.filter-acc-summary svg { color: var(--ink-3); }

/* Aufgabenverteilung: gestrafft — keine Erklärtexte, kleinere Schrift, engere Regler */
.dist-compact .space-y-2 > div > .flex span[data-i18n] { font-size: 0.75rem; }
.dist-compact .space-y-2 > div > .flex span[id$="Val"] { font-size: 0.75rem; }
.dist-compact input[type="range"] { height: 1px; }
.dist-compact input[type="range"]::-webkit-slider-thumb { width: 12px; height: 12px; }
.dist-compact input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; }

/* Nutzungs-Voreinstellung: kleiner Filter über dem Scope-Filter */
.usage-filter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.usage-label {
  font-family: var(--font-meta);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.usage-toggle-group { display: inline-flex; border: 2px solid var(--ink); }
.usage-btn {
  min-height: 3.25rem;
  padding: 0.75rem 2rem;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--ink);
  background: var(--paper);
  border: 0;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.usage-btn + .usage-btn { border-left: 2px solid var(--ink); }
.usage-btn:hover:not(.active) { background: #f3f3f3; }
.usage-btn.active { background: var(--ink); color: var(--paper); }
@media (max-width: 480px) {
  .usage-toggle-group { display: flex; width: 100%; }
  .usage-btn { flex: 1 1 0; min-width: 0; padding: 0.65rem 0.4rem; font-size: 0.72rem; letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; }
}

/* Scope-Umschalter → großer, mittiger Filter über dem Rechner.
   Aktiv: schwarzer Grund, weiße Schrift. Inaktiv: weiß mit schwarzer Kontur. */
.scope-filter {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2.5rem;
}
.scope-toggle-group {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  background: transparent;
  border: 2px solid var(--ink);
  border-radius: 0;
  padding: 0;
}
.scope-toggle-btn {
  flex: 0 1 auto;
  white-space: nowrap;
  min-height: 0;
  padding: 0.35rem 0.85rem;
  border-radius: 0;
  font-family: var(--font-meta);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--paper);
  border: 0;
  border-bottom: 0;
  margin: 0;
}
.scope-toggle-btn + .scope-toggle-btn { border-left: 2px solid var(--ink); }
.scope-toggle-btn:hover:not(.active) { color: var(--ink); background: #f3f3f3; }
.scope-toggle-btn.active {
  background: var(--ink);
  color: var(--paper);
  font-weight: 400;
  box-shadow: none;
}
#scopeNote { max-width: 32rem; }
@media (max-width: 480px) {
  .scope-toggle-group { display: flex; width: 100%; }
  .scope-toggle-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.45rem 0.4rem;
    font-size: 0.66rem;
    letter-spacing: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* --------------------------------------------------------------------------
   Vergleichs-Kacheln (Flip-Cards)
   -------------------------------------------------------------------------- */
/* Vorderseite ohne Fläche; Rückseite wie die aktive Zeitraum-Karte: sehr helle Fläche, keine Linien */
.flip-card-front { background: transparent; padding-left: 0; padding-right: 0; }
.flip-card-back {
  background: #f4f4f4;
  border: 0;
  border-radius: 0;
  padding: 0.625rem 0.75rem;
}
.flip-card-front, .flip-card-back { border-radius: 0; }
.comparison-icon { color: var(--ink); }

/* Teaser-Icons ohne Fläche */
.w-10.h-10.rounded-xl { background: transparent; width: auto; height: auto; }

/* --------------------------------------------------------------------------
   Akkordeons / FAQ / Quellen
   -------------------------------------------------------------------------- */
details[open] summary { color: var(--ink); }
details + details { border-top: 1px solid var(--rule); }
#faqContainer p a { color: var(--ink); text-decoration-color: var(--ink-4); }
#faqContainer p a:hover { color: var(--ink); text-decoration-color: var(--ink); }

.header-credit-link { color: var(--ink-2); }
.header-credit-link:hover { color: var(--ink); }
.subtitle-scope-link { color: var(--ink-3); }
.subtitle-scope-link:hover { color: var(--ink); }

/* Schätzwert-Hinweise: Box ausgeblendet, stattdessen Sternchen mit Tooltip neben dem Label */
.estimate-box { display: none !important; }
.estimate-hint { position: relative; display: inline-flex; }
.estimate-hint.hidden { display: none; }
.estimate-hint-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  padding: 0;
  font-family: var(--font-meta);
  font-size: 0.65rem;
  line-height: 1;
  font-weight: 700;
  color: var(--ink);
  cursor: help;
}
.estimate-hint:hover .estimate-hint-btn,
.estimate-hint.open .estimate-hint-btn { background: var(--ink); color: var(--paper); }
.estimate-tip {
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  z-index: 20;
  width: 16rem;
  max-width: 80vw;
  padding: 0.5rem 0.65rem;
  font-family: var(--font-meta);
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--paper);
  background: var(--ink);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease;
  pointer-events: none;
}
.estimate-hint:hover .estimate-tip,
.estimate-hint.open .estimate-tip,
.estimate-hint-btn:focus + .estimate-tip,
.estimate-hint-btn:focus-visible + .estimate-tip { opacity: 1; visibility: visible; }
.estimate-badge { color: var(--ink); }
.estimate-basis { color: var(--ink-3); }
.chart-estimate-hint { color: var(--ink-3); }
.estimate-swatch { border-color: var(--ink); }

/* Chart-Container: Canvas braucht keinen Rahmen, nur Abstand */
canvas { background: transparent; }

/* --------------------------------------------------------------------------
   Unterseiten (changelog.html, 404.html) — eigene Inline-Styles überschreiben
   -------------------------------------------------------------------------- */
body.clean-sub { background: var(--paper); color: var(--ink); }
body.clean-sub .glow { display: none; }
body.clean-sub h1, body.clean-sub .code {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: var(--ink);
  color: var(--ink);
}
body.clean-sub a { color: var(--ink); }
body.clean-sub a:hover { color: var(--ink); }
body.clean-sub .back { color: var(--ink-3); }
body.clean-sub .back:hover { color: var(--ink); }
body.clean-sub .subtitle { color: var(--ink-3); }
body.clean-sub .entry { border-left: 1px solid var(--rule); }
body.clean-sub .entry-date { color: var(--ink-3); }
body.clean-sub .entry-title { color: var(--ink); }
body.clean-sub .entry ul { color: var(--ink-2); }
body.clean-sub .entry li strong { color: var(--ink); }
body.clean-sub .tech { color: var(--ink-3); }
body.clean-sub .card,
body.clean-sub .teaser-card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}
body.clean-sub .teaser-card:hover { border-color: var(--rule); }
body.clean-sub .teaser-icon,
body.clean-sub .teaser-card:hover .teaser-icon { background: transparent; }
body.clean-sub .teaser-icon svg { color: var(--ink); stroke: var(--ink); }
body.clean-sub .teaser-title { color: var(--ink); }
body.clean-sub .teaser-card:hover .teaser-title { color: var(--ink); text-decoration: underline; }
body.clean-sub .teaser-desc { color: var(--ink-2); }
body.clean-sub .teaser-link { color: var(--ink); }
body.clean-sub footer, body.clean-sub .footer, body.clean-sub .footer-privacy { color: var(--ink-3); }
body.clean-sub .bolt { fill: var(--ink); opacity: 1; }
body.clean-sub h1 { color: var(--ink); }
body.clean-sub p { color: var(--ink-3); }
body.clean-sub a.btn {
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
}
body.clean-sub a.btn:hover { background: transparent; border-color: var(--ink); transform: none; text-decoration: none; }

/* Aufklapp-Menü der Dropdowns (nur Browser mit „customizable select", z. B. Chromium ≥ 134;
   andere Browser zeigen weiterhin ihr natives Menü) */
@supports (appearance: base-select) {
  select, select.bg-gray-800, select.border {
    appearance: base-select;
    background-image: none;
    padding-right: 0.75rem;
  }
  select::picker-icon {
    content: "";
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--ink);
    margin-left: 0.5rem;
  }
  select::picker(select) {
    appearance: base-select;
    background: #f4f4f4;
    border: 0;
    border-radius: 0;
    padding: 0.25rem 0;
    margin-top: 2px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--ink);
  }
  /* Gruppenname (Anbieter) klein in Versalien; die Optionen setzen Schrift und Farbe wieder zurück */
  select optgroup {
    padding: 0.5rem 0.75rem 0.2rem;
    font-family: var(--font-meta);
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  select option {
    margin: 0 -0.75rem;
    padding: 0.4rem 0.75rem;
    border-radius: 0;
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.875rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
  }
  select option:hover, select option:focus-visible { background: #e4e4e4; outline: none; }
  select option:checked { background: var(--ink); color: var(--paper); }
  select option::checkmark { display: none; }
}