/* =================================================================
   Tool-Override v2: Einheitliches Erscheinungsbild aller 33 Tools
   © Dipl.-Ing. Rolf Krause · energieberater-server
   Wird NACH dem Tool-eigenen CSS geladen → überschreibt per Spezifität
   ================================================================= */

/* ── 1. ALLE Header-Varianten ausblenden ──
   Die Tools verwenden 7 verschiedene Header-Patterns.
   ───────────────────────────────────────────────── */

/* A: class="hdr" (heizlast, fussbodenheizung, infrarot, waermeschutz, u-wert-fenster) */
.tool-wrapper .hdr {
  display: none !important;
}

/* B: <header> tag (WP-Foerderung, lueftung) */
.tool-wrapper header:not(.tool-header):not(.page-header) {
  display: none !important;
}

/* C: class="header" (lueftung Variante) */
.tool-wrapper > .header,
.tool-wrapper .container > .header {
  display: none !important;
}

/* D: class="app-header" (kuehlen, lca) */
.tool-wrapper .app-header {
  display: none !important;
}

/* E: class="site-header" / "fem-header" + .hero (hydrothermischFEM) */
.tool-wrapper .site-header,
.tool-wrapper .fem-header {
  display: none !important;
}
.tool-wrapper .hero {
  display: none !important;
}

/* F: Inline-Style Dark-Navy Divs */
.tool-wrapper > div[style*="background:#0D3A5C"],
.tool-wrapper > div[style*="background: #0D3A5C"],
.tool-wrapper > div[style*="background:var(--dark-navy)"],
.tool-wrapper .container > div[style*="background:#0D3A5C"],
.tool-wrapper .container > div[style*="background:var(--dark-navy)"] {
  display: none !important;
}

/* G: Lehmputz / u-wert-temp eigener Header */
.tool-wrapper .lehmputz-header,
.tool-wrapper .main-header {
  display: none !important;
}

/* ── 2. Tool-eigene H1 + Subtitle ausblenden ── */
.tool-wrapper > h1,
.tool-wrapper > .container > h1,
.tool-wrapper > .wrap > h1,
.tool-wrapper > div > h1:first-of-type {
  display: none !important;
}
.tool-wrapper > .subtitle,
.tool-wrapper > .container > .subtitle,
.tool-wrapper > .container > h1 + .subtitle,
.tool-wrapper > .container > h1 + p.subtitle,
.tool-wrapper > .container > h1 + p,
.tool-wrapper > .wrap > h1 + .subtitle,
.tool-wrapper > .container > .version {
  display: none !important;
}

/* ── 3. Sticky/Fixed-Elemente: kein Overlap mit Shell-Menü (Header z:100, Dropdown z:200) ── */
.tool-wrapper .tab-select-wrap,
.tool-wrapper .tab-bar {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
}
.tool-wrapper .toolbar,
.tool-wrapper .editor-bar,
.tool-wrapper .hdr {
  z-index: 10 !important;
}

/* ── 4. Einheitliche Tool-Toolbar ── */
.tool-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-light, #F5F7FA);
  border-bottom: 1px solid var(--border, #E2E8F0);
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  color: var(--text-light, #64748B);
  flex-wrap: wrap;
}
.tool-toolbar .tool-toolbar-title {
  font-weight: 600;
  color: var(--primary-dark, #0D3A5C);
  margin-right: auto;
  font-size: 13px;
}
.tool-toolbar .tool-toolbar-badge {
  padding: 2px 8px;
  background: rgba(0,160,210,0.08);
  color: var(--accent, #00A0D2);
  border-radius: 4px;
  font-weight: 500;
  font-size: 11px;
}
.tool-toolbar .tool-toolbar-btn {
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--border, #E2E8F0);
  border-radius: 6px;
  font-size: 12px;
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
  color: var(--text-light, #64748B);
  transition: all 0.15s;
}
.tool-toolbar .tool-toolbar-btn:hover {
  background: #fff;
  border-color: var(--accent, #00A0D2);
  color: var(--text, #1E293B);
}

/* ── 5. Container-Breite ── */
.tool-wrapper .container,
.tool-wrapper .wrap {
  max-width: 100% !important;
}

/* ── 6. Print: Toolbar nicht drucken ── */
@media print {
  .tool-toolbar { display: none !important; }
}

/* ── 7. Shell-Header vor Tool-CSS schützen ──
   Einige Tools definieren globale body/h1/h2 Regeln die die Shell beeinflussen.
   Hier hart zurücksetzen. */

/* Body-Schutz: Tools dürfen body nicht einschränken */
body {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Outfit', sans-serif !important;
  background: #F5F7FA !important;
}

/* Shell-Header H1 Schutz (gegen Tool-CSS wie Infrarot orange, Finanzierung border-bottom, PV center) */
.tool-header h1 {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: var(--primary-dark, #0D3A5C) !important;
  background-clip: initial !important;
  color: var(--primary-dark, #0D3A5C) !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  text-align: left !important;
}
.tool-header .meta,
.tool-header .lead {
  -webkit-text-fill-color: initial !important;
  color: var(--text-light, #64748B) !important;
}
.tool-header .tool-jumplinks a {
  -webkit-text-fill-color: initial !important;
}

/* Shell-Navigation Schutz */
.site-header,
.site-header * {
  font-family: 'Outfit', sans-serif !important;
}
.site-footer,
.site-footer * {
  font-family: 'Outfit', sans-serif !important;
}

/* ── Fullscreen-Tools: overflow:hidden aufheben ──
   waermeschutz, kuehlen etc. setzen html,body{overflow:hidden}
   was die Seiten-Scroll blockiert. Hier überschrieben. */
html, body {
  overflow: visible !important;
  overflow-y: auto !important;
  height: auto !important;
}

/* Fullscreen-Layout-Tools in eingebettetem Modus:
   feste Höhe statt 100vh, eigener Scroll-Container */
.tool-wrapper .main {
  overflow: visible !important;
  min-height: auto !important;
  height: auto !important;
}
.tool-wrapper .sidebar {
  overflow: visible !important;
  height: auto !important;
}
.tool-wrapper .results {
  overflow: visible !important;
  height: auto !important;
}
.tool-wrapper .iarea {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}
.tool-wrapper .chart-area {
  overflow: visible !important;
  height: auto !important;
}

/* ═══ MOBILE RESPONSIVE (Tools) ═══ */
@media (max-width: 768px) {
  .tool-wrapper {
    padding: 8px !important;
    font-size: 14px;
  }
  /* Tabellen: horizontal scrollbar */
  .tool-wrapper table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    font-size: 12px;
  }
  .tool-wrapper table thead,
  .tool-wrapper table tbody,
  .tool-wrapper table tr { display: table; width: 100%; table-layout: auto; }
  .tool-wrapper th, .tool-wrapper td { padding: 4px 6px !important; font-size: 12px; }
  /* Inputs: Zoom verhindern (iOS) */
  .tool-wrapper input, .tool-wrapper select, .tool-wrapper textarea {
    font-size: 16px !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
  }
  /* Form-Grids: Single Column */
  .tool-wrapper .form-grid,
  .tool-wrapper .grid,
  .tool-wrapper .cards,
  .tool-wrapper .kpi {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .tool-wrapper .form-grid.c2,
  .tool-wrapper .form-grid.c3,
  .tool-wrapper .form-grid.c4 {
    grid-template-columns: 1fr !important;
  }
  /* Buttons: volle Breite */
  .tool-wrapper .btn,
  .tool-wrapper button[type="button"] {
    width: 100%;
    justify-content: center;
  }
  /* Tabs: horizontal scroll */
  .tool-wrapper .tabs,
  .tool-wrapper .tab-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    gap: 0 !important;
  }
  .tool-wrapper .tab,
  .tool-wrapper .tabs button {
    white-space: nowrap;
    font-size: 12px !important;
    padding: 8px 12px !important;
    flex-shrink: 0;
  }
  /* Section Cards */
  .tool-wrapper .section-card {
    padding: 14px !important;
    margin-bottom: 12px !important;
  }
  .tool-wrapper .section-card h3 { font-size: 15px !important; }
  /* KPI-Karten */
  .tool-wrapper .kpi .kc,
  .tool-wrapper .kpi .card {
    padding: 12px !important;
  }
  .tool-wrapper .kpi .kv { font-size: 22px !important; }
  /* Charts: responsive */
  .tool-wrapper svg { max-width: 100%; height: auto; }
  .tool-wrapper canvas { max-width: 100%; }
}

@media (max-width: 480px) {
  .tool-wrapper { padding: 4px !important; }
  .tool-wrapper h1, .tool-wrapper h2 { font-size: 18px !important; }
  .tool-wrapper h3 { font-size: 14px !important; }
  .tool-wrapper .kpi .kv { font-size: 18px !important; }
}