/* ============================================================
   Waermeleistung — gemeinsame Stile
============================================================ */
:root {
  --turquoise: #70F0D0;        /* Logo-Tuerkis */
  --turquoise-dark: #00A088;   /* fuer Hover/Akzente */
  --blue: #0070C0;             /* Header-Akzent */
  --orange: #FFC000;           /* T-Button */
  --green: #00B050;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: Calibri, "Segoe UI", Arial, sans-serif;
       font-size: 14px; color: #222; background: #F0F0F0; }

/* ---------- Login ---------- */
.login-page { display: flex; align-items: center; justify-content: center;
              min-height: 100vh; padding: 20px; }
.login-card { background: white; padding: 28px 32px; border-radius: 8px;
              box-shadow: 0 4px 18px rgba(0,0,0,0.10);
              width: 100%; max-width: 360px; }
.login-card h1 { margin: 0 0 4px; font-size: 24px; color: var(--blue); }
.login-card .subtitle { margin: 0 0 18px; color: #666; }
.login-card form { display: flex; flex-direction: column; gap: 12px; }
.login-card label { display: flex; flex-direction: column; gap: 4px;
                    font-size: 13px; color: #333; }
.login-card input { padding: 8px 10px; border: 1px solid #BBB; border-radius: 4px;
                    font: inherit; }
.login-card button { padding: 10px; background: var(--blue); color: white;
                     border: none; border-radius: 4px; font: inherit;
                     font-weight: bold; cursor: pointer; }
.login-card button:hover { background: #005A9C; }
.error { color: #B00020; margin: 6px 0 0; font-size: 13px; }

/* ---------- Hauptseite Header ---------- */
header.app-header {
  background: white;
  /* margin außen: zeigt das Body-Grau als Seitenrand wie bei den Panels.
     padding innen: 14 px, sodass der Inhalt bei 18+14 = 32 px vom
     Bildschirmrand sitzt, identisch zur Einrückung der Panels. */
  margin: 0 18px;
  padding: 4px 14px;
  border-bottom: 1px solid #73F0DC;     /* Trennlinie über den Kästen */
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
header.app-header h1 { margin: 0; font-size: 20px; color: var(--blue); font-weight: bold; }
header.app-header .grow { flex: 1; }
header.app-header button { padding: 6px 12px; background: #E8E8E8;
                           border: 1px solid #BBB; border-radius: 4px; cursor: pointer; }
header.app-header button:hover { background: #D8D8D8; }
header.app-header .user-info { font-size: 13px; color: #555; }
header.app-header img.company-logo {
  height: 36px; width: auto; margin-left: 4px;
}
/* Kundenlogo links vom ecodry-Logo; das margin-left schiebt die 4 Buttons
   davor um 60 px nach links. */
header.app-header img.kunden-logo {
  height: 36px; width: auto; margin-left: 60px;
}

main.app-main { padding: 0 18px 6px; }    /* kein Top-Padding, schmaler unten */

/* ---------- Lizenz-Banner + Admin-Link --------------------------------- */
#lic-banner {
  background: #FF7800; color: #09140F; padding: 6px 18px;
  font-weight: bold; font-size: 13px; text-align: center;
}
header.app-header .admin-link {
  margin-left: 8px; padding: 4px 12px;
  background: #E0E0E0; color: #09140F; border-radius: 3px;
  text-decoration: none; font-size: 13px; font-weight: bold;
}
header.app-header .admin-link:hover { background: #D0D0D0; }

/* ---------- Panel-Grundstil ----------
   Statt grauer Zwischenräume jetzt dünne kälteblaue Trennlinien
   (#73F0DC) zwischen den Kästen. */
.panel { background: white; padding: 8px 14px; border-radius: 0;
         border: none; margin-bottom: 0; }
.panel h2 { margin: 0 0 8px; font-size: 14px; font-weight: bold;
            color: var(--blue); text-transform: uppercase; letter-spacing: 0.5px; }

/* ---------- Projekt + Prozessdaten + Leerfeld nebeneinander ---------- */
.panels-row { display: flex; gap: 0; }
/* Vertikale Trennlinien zwischen den Kästen */
.panels-row > .panel + .panel { border-left: 1px solid #73F0DC; }
/* Horizontale Trennlinie zur Sektionen-Tabelle */
#panel-sektionen { border-top: 1px solid #73F0DC; }
/* Projekt + Prozess auf Inhaltsbreite, Empty füllt den Rest */
.panels-row > #panel-projekt { flex: 0 0 auto; }
.panels-row > #panel-prozess { flex: 0 0 auto; }
.panels-row > #panel-empty   { flex: 1 1 0; min-height: 1px; }
/* Haftungsausschluss-Text im rechten Panel: kleine, dezente Schrift,
   Zeilenumbruch passend zur Panel-Breite. */
#panel-empty .disclaimer {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #555;
}

/* Impressum-Modal: Logo links oben, Versionstext und Beschreibung
   darunter, dann Entwicklerhinweis + © + Link + Fehler-Mail.
   Alle Texte und Links in Dunkelgrün #09140F. */
dialog#mdl-impressum { width: 560px; max-width: 92vw; }
dialog#mdl-impressum .impressum-body { color: #09140F; }
dialog#mdl-impressum .impressum-logo {
  display: block; height: 80px; width: auto;     /* 200 % der vorigen Höhe */
  margin: 0 0 16px;
}

/* Kundenlogo neben "Entwickelt für..." im Impressum-Modal, plus
   2 Leerzeilen Abstand darunter. */
dialog#mdl-impressum .impressum-row {
  display: flex; align-items: center;
  gap: 16px; margin: 0 0 32px;
}
dialog#mdl-impressum .impressum-row > p { flex: 1; }
dialog#mdl-impressum img.impressum-kunden-logo {
  height: 36px; width: auto; flex: 0 0 auto;
  /* Visuelle Verschiebung -- belegt KEINEN Layout-Platz, sodass die
     Text-Spalte daneben ihre volle Breite behält. */
  position: relative;
  right: 220px;          /* 220 px nach links */
  top: -33px;            /* 33 px nach oben */
}

/* X im Impressum-Kopf bekommt keinen Fokus-Rahmen mehr (Browser-Outline). */
dialog#mdl-impressum .modal-head button.close-x,
dialog#mdl-impressum .modal-head button.close-x:focus,
dialog#mdl-impressum .modal-head button.close-x:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Footer im Impressum-Modal: kein abgesetzter grauer Hintergrund mehr. */
dialog#mdl-impressum .modal-foot {
  background: white !important;
  border-top: none !important;
}

/* Material-Modal: leere Stoffwert-Eingaben heißorange wie im Hauptmenü.
   Pfeil-Button rechts neben dem X zum Speichern in Baustoffe-Excel.
   Keine Trennlinien zwischen den Zeilen. */
#mdl-material table.m-tbl th,
#mdl-material table.m-tbl td { border-bottom: none !important; }
#mdl-material table.m-tbl td input.cf-hot {
  background: #FF7800 !important;
}
/* Drei farbige Aktion-Buttons rechts pro Zeile im Material-Modal */
#mdl-material table.m-tbl td.m-btn {
  width: 36px; text-align: center; padding: 0 2px;
}
#mdl-material table.m-tbl td.m-btn button {
  width: 28px; height: 24px;
  padding: 0; cursor: pointer; line-height: 1;
  font: inherit; font-size: 14px;
  border: 1px solid #BBB; border-radius: 3px;
}
/* 1) ✕ Zeile löschen: dunkelgrün auf kälteblau */
#mdl-material table.m-tbl td.m-btn-delrow button {
  background: #73F0DC !important; color: #09140F !important;
}
#mdl-material table.m-tbl td.m-btn-delrow button:hover  { background: #5DD7C2 !important; }
#mdl-material table.m-tbl td.m-btn-delrow button:disabled {
  background: #DDDDDD !important; color: #999 !important; cursor: not-allowed;
}
/* 2) ✓ Material speichern: weiß auf hellgrün */
#mdl-material table.m-tbl td.m-btn-savemat button {
  background: #00A050 !important; color: white !important;
  font-weight: bold;
}
#mdl-material table.m-tbl td.m-btn-savemat button:hover { background: #009048 !important; }
/* 3) ✕ aus Datenbank löschen: dunkelgrün auf heißorange */
#mdl-material table.m-tbl td.m-btn-delmat button {
  background: #FF7800 !important; color: #09140F !important;
}
#mdl-material table.m-tbl td.m-btn-delmat button:hover { background: #E66D00 !important; }

/* Eigenes Meldungs-Modal (Ersatz für native alert/confirm) */
dialog#mdl-meldung {
  width: 420px; max-width: 92vw;
}
dialog#mdl-meldung .modal-head.meldung-head {
  background: #FF7800 !important;
}
dialog#mdl-meldung .modal-head.meldung-head h2 {
  color: #09140F !important;
}
dialog#mdl-meldung .meldung-text {
  font-size: 14px; color: #09140F; line-height: 1.4;
}
dialog#mdl-meldung .modal-foot {
  justify-content: flex-end; gap: 8px;
  background: white !important;
  border-top: none !important;
}

/* ----- PDF-Modal + Druck-Stylesheet -------------------------------- */
dialog#mdl-pdf,
dialog#mdl-pdf-sek { width: 380px; max-width: 92vw; }
dialog#mdl-pdf .pdf-options,
dialog#mdl-pdf-sek .pdf-options {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 14px; color: #09140F;
}
dialog#mdl-pdf .pdf-options label,
dialog#mdl-pdf-sek .pdf-options label {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
}
dialog#mdl-pdf .modal-foot,
dialog#mdl-pdf-sek .modal-foot {
  justify-content: flex-end; gap: 8px;
  background: white !important; border-top: none !important;
}
/* Orange Modal-Kopf (statt kälteblau) */
dialog#mdl-pdf .modal-head,
dialog#mdl-pdf-sek .modal-head {
  background: #FF7800 !important;
}
dialog#mdl-pdf .modal-head h2,
dialog#mdl-pdf .modal-head button.close-x,
dialog#mdl-pdf-sek .modal-head h2,
dialog#mdl-pdf-sek .modal-head button.close-x {
  color: #09140F !important;
}

/* Versteckter PDF-Bereich am Seitenende -- normalerweise unsichtbar */
#pdf-area { display: none; }

/* Beim Drucken: nur den PDF-Bereich zeigen, alles andere ausblenden */
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  body.pdf-printing > *:not(#pdf-area) { display: none !important; }
  body.pdf-printing #pdf-area {
    display: block !important;
    background: white;
    color: #09140F;
    font-family: "Mozilla Text", "Calibri", sans-serif;
    font-size: 10px;
  }
  .pdf-page {
    page-break-after: always;
    page-break-inside: avoid;
    padding: 4mm 4mm 10mm 4mm;   /* Platz für die Fußzeile */
    color: #09140F;
    position: relative;
    /* A4-Querformat-Innenmaße minus @page-Margin (10 mm oben+unten):
       Seitenhöhe 210 mm − 20 mm = 190 mm. So füllt jede .pdf-page
       genau eine A4-Seite und die Fußzeile sitzt immer ganz unten. */
    box-sizing: border-box;
    min-height: 190mm;
  }
  .pdf-page:last-child { page-break-after: auto; }

  /* ----- Fußzeile am absoluten Seitenende --------------------------- */
  .pdf-page-foot {
    position: absolute;
    left: 4mm; right: 4mm; bottom: 2mm;
    display: flex; justify-content: space-between;
    font-size: 10px; color: #555;
    border-top: 1px solid #73F0DC; padding-top: 2px;
  }
  .pdf-page-foot .pdf-foot-left,
  .pdf-page-foot .pdf-foot-right { white-space: nowrap; }
  .pdf-page h2 {
    margin: 0 0 6px; padding-bottom: 4px;
    border-bottom: 2px solid #73F0DC;
    color: #09140F; font-size: 14px;
  }
  .pdf-page h3 {
    margin: 8px 0 4px; font-size: 11px; color: #09140F; font-weight: bold;
  }
  .pdf-page h4 {
    margin: 6px 0 3px; font-size: 10px; color: #09140F;
  }
  table.pdf-tbl {
    border-collapse: collapse; width: 100%;
    margin-bottom: 6px; font-size: 10px;
    color: #09140F;
  }
  table.pdf-tbl th, table.pdf-tbl td {
    border: 1px solid #BBB; padding: 2px 6px; vertical-align: top;
    color: #09140F;
  }
  table.pdf-tbl th {
    background: #F4F4F4; text-align: left; font-weight: bold;
  }
  table.pdf-tbl td { text-align: right; }
  table.pdf-tbl td:first-child,
  table.pdf-tbl td:nth-child(2) { text-align: left; }

  /* ----- Hauptseite-PDF: 1:1 vom Bildschirm geklont ------------------ */
  /* Einheitliche Schriftgröße 10 px und Standard-Farbe #09140F überall. */
  #pdf-area .pdf-page-haupt,
  #pdf-area .pdf-page-haupt * {
    font-size: 10px !important;
    color: #09140F;
  }
  #pdf-area .pdf-page-haupt {
    line-height: 1.3;
  }
  #pdf-area .pdf-page-haupt .panel { padding: 2px 6px; background: white; }
  #pdf-area .pdf-page-haupt .panel h2 {
    margin: 0 0 1px; padding: 0;
    border: none; text-transform: uppercase; letter-spacing: 0.3px;
    color: #09140F;
  }
  #pdf-area .pdf-page-haupt .panels-row {
    display: flex; gap: 0; width: 100%; align-items: stretch;
  }
  #pdf-area .pdf-page-haupt .panels-row > .panel + .panel {
    border-left: 1px solid #73F0DC;
  }
  /* Projekt + Prozess so schmal wie nötig, Haftungsausschluss füllt Rest */
  #pdf-area .pdf-page-haupt #panel-projekt { flex: 0 0 auto; }
  #pdf-area .pdf-page-haupt #panel-prozess { flex: 0 0 auto; }
  #pdf-area .pdf-page-haupt #panel-empty   { flex: 1 1 0; }

  /* Inputs als reiner Text -- ohne Rahmen, ohne Mindestbreite */
  #pdf-area .pdf-page-haupt input {
    border: none !important; background: transparent !important;
    padding: 0 !important; margin: 0 !important;
    font: inherit !important; color: inherit !important;
    min-width: 0 !important; max-width: 100%;
    height: auto !important;
  }

  /* Projekt-Grid: Label | Wert, breite Inputs (Trennlinie weiter rechts) */
  #pdf-area .pdf-page-haupt .proj-grid {
    display: grid; grid-template-columns: auto auto;
    gap: 0 8px; row-gap: 1px; align-items: baseline;
    width: max-content;
  }
  /* Projekt-Labels NICHT fett */
  #pdf-area .pdf-page-haupt .proj-grid label {
    font-weight: normal !important; white-space: nowrap;
  }
  #pdf-area .pdf-page-haupt .proj-grid input,
  #pdf-area .pdf-page-haupt .proj-grid input.short,
  #pdf-area .pdf-page-haupt .proj-grid input.long {
    width: 320px !important;
  }

  /* Prozess-Felder: Werte + Einheiten kompakt nach links */
  #pdf-area .pdf-page-haupt #panel-prozess { padding-left: 6px; }
  /* Heading "Prozessdaten" linksbündig am Panel-Anfang (= an der Trennlinie) */
  #pdf-area .pdf-page-haupt #panel-prozess h2 {
    margin: 0 0 1px;
    width: auto;
    text-align: left;
    padding-left: 0;
  }
  #pdf-area .pdf-page-haupt .prozess-wrap { display: block; }
  #pdf-area .pdf-page-haupt .prozess-fields {
    width: auto !important; flex: none !important; overflow: visible !important;
  }
  /* Label-Spalte enger; Werte direkt dahinter; Einheit + Sek max-content
     -- !important nötig, weil Live-CSS .row.row-4col mit !important setzt */
  #pdf-area .pdf-page-haupt .prozess-fields .row.row-4col {
    display: grid !important;
    grid-template-columns: 120px 40px max-content max-content !important;
    gap: 0 6px !important;
    align-items: baseline;
  }
  /* Inputs auf 40 px breite Wertespalte begrenzen */
  #pdf-area .pdf-page-haupt .prozess-fields input {
    width: 40px !important;
  }
  /* Sek-Anzeige nicht künstlich auf min-width 70 px aufblasen */
  #pdf-area .pdf-page-haupt .prozess-fields .result {
    min-width: 0 !important; padding: 0 !important; margin: 0 !important;
  }
  /* Labels rechtsbündig, ohne Fettdruck */
  #pdf-area .pdf-page-haupt .prozess-fields label {
    font-weight: normal !important;
    text-align: right;
    white-space: nowrap;
  }
  #pdf-area .pdf-page-haupt .prozess-fields .unit {
    color: #09140F; font-weight: normal !important;
  }
  #pdf-area .pdf-page-haupt .prozess-fields .result {
    text-align: left; min-width: 0; padding: 0;
    font-weight: normal !important;
  }

  /* Haftungsausschluss-Text */
  #pdf-area .pdf-page-haupt #panel-empty .disclaimer {
    line-height: 1.35; margin: 0;
  }

  /* Sektionen-Tabelle ------------------------------------------------- */
  #pdf-area .pdf-page-haupt #panel-sektionen {
    border-top: 2px solid #73F0DC; padding: 2px 0;
  }
  #pdf-area .pdf-page-haupt #panel-sektionen h2 { margin: 1px 0; padding-left: 0; }
  #pdf-area .pdf-page-haupt .sections-wrap { overflow: visible; }
  /* Tabelle nur so breit wie ihre fixen Spalten -- Rest bleibt leer */
  #pdf-area .pdf-page-haupt table.sections {
    width: auto; border-collapse: collapse;
    table-layout: fixed;
  }
  /* Label-Spalte = Breite des längsten Labels ("Abluft Betriebsvolumenstrom") */
  #pdf-area .pdf-page-haupt table.sections col.col-label { width: 158px; }
  #pdf-area .pdf-page-haupt table.sections col.col-unit  { width: 60px;  }
  #pdf-area .pdf-page-haupt table.sections col.col-sec   { width: 75px;  }
  #pdf-area .pdf-page-haupt table.sections col.col-sum   { width: 75px;  }

  #pdf-area .pdf-page-haupt table.sections td,
  #pdf-area .pdf-page-haupt table.sections th {
    padding: 0 3px;
    border: none;
    white-space: nowrap; overflow: hidden; text-overflow: clip;
  }
  /* Label-Spalte: RECHTSBÜNDIG */
  #pdf-area .pdf-page-haupt table.sections td:first-child {
    text-align: right;
    display: table-cell;
  }
  /* Sub-Label-Zeilen (Ober-/Unterseite, Seitenfläche, Stirnseite):
     Sub-Wort linksbündig mit 10 px Einzug, Hauptbeschriftung rechts */
  #pdf-area .pdf-page-haupt table.sections td.s-label-dual {
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
    padding-left: 10px;
    padding-right: 3px;
    text-align: left;
  }
  #pdf-area .pdf-page-haupt table.sections td.s-label-dual .sub {
    display: inline; color: #09140F !important;
    font-style: italic; font-weight: bold;
    margin: 0; text-align: left;
  }
  /* Gruppen-Überschriften (Geometrie / Luftaufheizung / ...) -- dunkelgrün, fett, linksbündig.
     Heißorange Trennlinie OBERHALB jeder Gruppe. */
  #pdf-area .pdf-page-haupt table.sections tr.row-hdr td {
    background: transparent; color: #09140F !important; font-weight: bold;
    padding: 3px 0 1px;
    border-top: 2px solid #FF7800; border-bottom: none;
    text-align: left;
  }
  /* Spalten-Kopf-Zeile (Sektion / 1 / Σ/Schnitt) */
  #pdf-area .pdf-page-haupt table.sections tr.row-cols td {
    background: #73F0DC; font-weight: bold;
    text-align: center; padding: 1px 3px; border-bottom: none;
  }
  #pdf-area .pdf-page-haupt table.sections tr.row-cols td:first-child {
    text-align: left;
  }
  /* Einheiten-Spalte (m·m·m, kg, s, °C, kW, …) in dezentem Blaugrau */
  #pdf-area .pdf-page-haupt table.sections td.s-unit {
    color: #5577AA !important; text-align: left;
  }
  /* Daten-Zellen rechtsbündig */
  #pdf-area .pdf-page-haupt table.sections td.valT,
  #pdf-area .pdf-page-haupt table.sections td.s-val,
  #pdf-area .pdf-page-haupt table.sections td.s-input { text-align: right; }
  /* Section-Name-Zeile: Einträge ZENTRIERT statt linksbündig */
  #pdf-area .pdf-page-haupt table.sections td.s-val.s-left {
    text-align: center !important;
  }
  #pdf-area .pdf-page-haupt table.sections td.s-bold { font-weight: bold; }
  /* Inputs in s-input-Zellen */
  #pdf-area .pdf-page-haupt table.sections td.s-input input {
    text-align: right; width: 100% !important;
  }

  /* ----- Seite 2: Wärmeübergang + Lüfter ---------------------------- */
  /* Zwei gleich breite Spalten OHNE Lücke -- rechte Tabelle beginnt
     damit exakt auf der horizontalen Blattmitte. */
  #pdf-area .pdf-page-wl .pdf-wl-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: start;
  }
  #pdf-area .pdf-page-wl .pdf-wl-col {
    min-width: 0;
  }
  #pdf-area .pdf-page-wl .pdf-wl-col h3 {
    margin-top: 0;
  }
  /* Tabelle auf Inhaltsbreite, OHNE Rahmenlinien */
  #pdf-area .pdf-page-wl table.pdf-wl-tbl {
    width: auto;
    border-collapse: collapse;
  }
  #pdf-area .pdf-page-wl table.pdf-wl-tbl th,
  #pdf-area .pdf-page-wl table.pdf-wl-tbl td {
    font-weight: normal !important;
    background: white !important;
    padding: 1px 6px;
    border: none !important;
  }
  #pdf-area .pdf-page-wl table.pdf-wl-tbl th {
    text-align: left;
  }
  #pdf-area .pdf-page-wl table.pdf-wl-tbl td:nth-child(2) {
    text-align: right; white-space: nowrap;
  }
  #pdf-area .pdf-page-wl table.pdf-wl-tbl td:nth-child(3) {
    text-align: left; color: #5577AA; white-space: nowrap;
  }
  /* Heißorange Trennlinie über der "Korrekturfaktor"-Gruppen-Überschrift (links) */
  #pdf-area .pdf-page-wl table.pdf-wl-tbl tr th.pdf-wl-grp {
    border-top: 2px solid #FF7800 !important;
    background: white !important;
    color: #09140F;
    font-weight: bold !important;
    text-align: left;
  }
  /* Heißorange Trennlinie über der "Leistung (20 °C)"-Zeile (rechts) -- NICHT fett */
  #pdf-area .pdf-page-wl table.pdf-wl-tbl tr.pdf-wl-sep th,
  #pdf-area .pdf-page-wl table.pdf-wl-tbl tr.pdf-wl-sep td {
    border-top: 2px solid #FF7800 !important;
    background: white !important;
    color: #09140F;
    font-weight: normal !important;
  }
  #pdf-area .pdf-page-wl table.pdf-wl-tbl tr.pdf-wl-sep th {
    text-align: left;
  }
  #pdf-area .pdf-page-wl table.pdf-wl-tbl tr.pdf-wl-sep td:nth-child(2) {
    text-align: right;
  }
  #pdf-area .pdf-page-wl table.pdf-wl-tbl tr.pdf-wl-sep td:nth-child(3) {
    text-align: left; color: #5577AA;
  }

  /* ----- Sektions-PDF Seite 1: Sek-Modal-Layout links, Aufbau rechts -- */
  /* Flex-Zeile: links wächst, rechts content-width am rechten Blattrand,
     dazwischen vertikale orange Trennlinie. */
  #pdf-area .pdf-page-sekaufbau .pdf-sek-row {
    display: flex; gap: 6mm; align-items: flex-start;
    justify-content: space-between;
  }
  #pdf-area .pdf-page-sekaufbau .pdf-sek-col-left {
    flex: 1 1 0; min-width: 0;
    padding-right: 6mm;
    border-right: 2px solid #FF7800;
  }
  #pdf-area .pdf-page-sekaufbau .pdf-sek-col-right {
    flex: 0 0 auto; width: max-content;
    padding-left: 6mm;
  }
  #pdf-area .pdf-page-sekaufbau h3 {
    /* 2 Leerzeilen (~26 px bei 10 px Schrift × 1.3 line-height) als Abstand */
    margin: 26px 0 4px; font-size: 10px; color: #09140F; font-weight: bold;
  }
  /* Aufbau-Überschriften rechts: Space Mono, fett, 12 px */
  #pdf-area .pdf-page-sekaufbau .pdf-sek-col-right h3 {
    font-family: "Space Mono", monospace !important;
    font-weight: 700 !important;
    font-size: 12px !important;
  }
  #pdf-area .pdf-page-sekaufbau .pdf-sek-col-right > h3:first-child {
    margin-top: 0;
  }

  /* Geklontes Sek-Modal-Body: gesamtes Layout auf 70 % skaliert,
     Texte auf 14.286 px gesetzt -- nach Zoom = 10 px effektiv. */
  #pdf-area .pdf-page-sekaufbau .sek-body {
    padding: 0; max-height: none; overflow: visible;
    zoom: 0.7;                      /* Chrome/Edge */
    transform: scale(0.7);          /* Fallback für Firefox */
    transform-origin: top left;
  }
  @supports (zoom: 1) {
    #pdf-area .pdf-page-sekaufbau .sek-body {
      transform: none;
    }
  }
  /* Alle Texte im Klon: 10 / 0.7 = 14.286 px -- nach zoom 0.7 -> 10 px */
  #pdf-area .pdf-page-sekaufbau .sek-body,
  #pdf-area .pdf-page-sekaufbau .sek-body * {
    color: #09140F;
    font-size: calc(10px / 0.7) !important;
  }

  /* Feinjustage Flächen-Boxen (NUR im PDF, 1:1 in CSS-Pixeln) */
  #pdf-area .pdf-page-sekaufbau .sek-canvas .area-ou {
    top: 63px !important;   /* 70 − 7 */
  }
  #pdf-area .pdf-page-sekaufbau .sek-canvas .area-stirn {
    left: 540px !important; /* 530 + 5 + 5 */
    top: 260px !important;  /* 270 − 5 − 5 */
  }
  #pdf-area .pdf-page-sekaufbau .sek-canvas .area-seite {
    left: 193px !important; /* 200 − 4 − 3 */
    top: 311px !important;  /* 315 − 4 */
  }
  #pdf-area .pdf-page-sekaufbau .sek-grunddaten {
    font-size: 10px;
  }
  #pdf-area .pdf-page-sekaufbau .sek-canvas {
    transform-origin: top left;
    /* falls das Original-Canvas zu groß ist, kann hier skaliert werden */
  }
  #pdf-area .pdf-page-sekaufbau .sek-canvas input,
  #pdf-area .pdf-page-sekaufbau .sek-canvas .ar {
    border: none !important; background: transparent !important;
    color: #09140F;
  }

  /* Aufbau-Tabellen rechts */
  #pdf-area .pdf-page-sekaufbau table.pdf-aufbau-tbl {
    width: auto; border-collapse: collapse;
    font-size: 10px; margin-bottom: 2px;
  }
  #pdf-area .pdf-page-sekaufbau table.pdf-aufbau-tbl th,
  #pdf-area .pdf-page-sekaufbau table.pdf-aufbau-tbl td {
    border: none !important; padding: 1px 6px;
    background: white !important;
    color: #09140F;
  }
  #pdf-area .pdf-page-sekaufbau table.pdf-aufbau-tbl thead th {
    border-bottom: 2px solid #FF7800 !important;
    text-align: left; font-weight: bold;
  }
  #pdf-area .pdf-page-sekaufbau table.pdf-aufbau-tbl tbody td {
    text-align: right;
  }
  #pdf-area .pdf-page-sekaufbau table.pdf-aufbau-tbl tbody td:nth-child(1) {
    text-align: center;
  }
  #pdf-area .pdf-page-sekaufbau table.pdf-aufbau-tbl tbody td:nth-child(2) {
    text-align: left;
  }
  #pdf-area .pdf-page-sekaufbau .pdf-aufbau-alphas {
    font-size: 10px; color: #5577AA; margin: 0 0 6px;
  }
  #pdf-area .pdf-page-sekaufbau .pdf-empty {
    color: #888; font-style: italic; font-size: 10px;
    margin: 0 0 6px;
  }

  /* ----- Sektions-PDF Seite 2: Inputs + Kennzahlen vertikal, Chart unten -- */
  #pdf-area .pdf-page-aufheizsek .pdf-aufheiz-data-row {
    display: block;
    margin-bottom: 4mm;
  }
  #pdf-area .pdf-page-aufheizsek table.pdf-aufheiz-kennzahlen {
    margin-top: 3mm;
  }
  #pdf-area .pdf-page-aufheizsek table.pdf-aufheiz-data {
    width: auto; border-collapse: collapse;
  }
  #pdf-area .pdf-page-aufheizsek table.pdf-aufheiz-data th,
  #pdf-area .pdf-page-aufheizsek table.pdf-aufheiz-data td {
    border: none !important; padding: 1px 6px;
    background: white !important;
    font-weight: normal !important;
  }
  #pdf-area .pdf-page-aufheizsek table.pdf-aufheiz-data th { text-align: left; }
  #pdf-area .pdf-page-aufheizsek table.pdf-aufheiz-data td:nth-child(2) {
    text-align: right; white-space: nowrap;
  }
  #pdf-area .pdf-page-aufheizsek table.pdf-aufheiz-data td:nth-child(3) {
    text-align: left; color: #5577AA; white-space: nowrap;
  }
  /* "Kennzahlen"-Gruppen-Header */
  #pdf-area .pdf-page-aufheizsek table.pdf-aufheiz-data th.pdf-wl-grp {
    border-top: 2px solid #FF7800 !important;
    background: white !important; color: #09140F;
    font-weight: bold !important;
    text-align: left;
  }
  /* Diagramm-Canvas: volle Blattbreite */
  #pdf-area .pdf-page-aufheizsek .pdf-aufheiz-chart {
    width: 100%;
  }
  #pdf-area .pdf-page-aufheizsek .pdf-aufheiz-chart canvas {
    width: 100% !important; height: auto !important;
    max-height: 130mm;
  }

  /* ----- Seite 3: Materialaufbau -- volle Blattbreite, OHNE Linien -- */
  #pdf-area .pdf-page-mat table.pdf-mat-tbl {
    width: 100%; table-layout: fixed;
    border-collapse: collapse;
  }
  /* Keine horizontalen Rahmen im Hauptbereich */
  #pdf-area .pdf-page-mat table.pdf-mat-tbl th,
  #pdf-area .pdf-page-mat table.pdf-mat-tbl td {
    border: none !important;
  }
  /* Wertespalten -- "Masse [kg]" jetzt breit genug für eine Zeile;
     Material verschmälert sich um denselben Betrag. */
  #pdf-area .pdf-page-mat table.pdf-mat-tbl col.col-num     { width: 28px;  }
  #pdf-area .pdf-page-mat table.pdf-mat-tbl col.col-masse   { width: 105px; }
  #pdf-area .pdf-page-mat table.pdf-mat-tbl col.col-dichte  { width: 64px;  }
  #pdf-area .pdf-page-mat table.pdf-mat-tbl col.col-cp      { width: 92px;  }
  #pdf-area .pdf-page-mat table.pdf-mat-tbl col.col-lam     { width: 72px;  }
  #pdf-area .pdf-page-mat table.pdf-mat-tbl col.col-sim     { width: 32px;  }
  /* Header zentriert */
  #pdf-area .pdf-page-mat table.pdf-mat-tbl th {
    text-align: center !important;
  }
  /* Linke Spalte (#) Inhalte zentriert */
  #pdf-area .pdf-page-mat table.pdf-mat-tbl td:first-child {
    text-align: center !important;
  }
  /* Material-Spalte (3. Spalte): linksbündig */
  #pdf-area .pdf-page-mat table.pdf-mat-tbl td:nth-child(3) {
    text-align: left !important;
  }
  /* Sim.-Spalte zentriert (✓ / —) */
  #pdf-area .pdf-page-mat table.pdf-mat-tbl td:last-child {
    text-align: center;
  }
  /* Summen-Zeilen: nicht fett. Alle Werte rechtsbündig, "Summe"-Label
     bündig direkt links der Masse-Spalte. Die ERSTE Summen-Zeile bekommt
     eine durchgehende heißorange Trennlinie. */
  #pdf-area .pdf-page-mat table.pdf-mat-tbl tr.pdf-mat-sum td {
    border: none !important;
    font-weight: normal !important;
    background: white !important;
    text-align: right !important;
  }
  #pdf-area .pdf-page-mat table.pdf-mat-tbl tr.pdf-mat-sum td:first-child {
    text-align: right !important; padding-right: 6px;
  }
  /* Durchgehende orange Linie über der ersten Summen-Zeile.
     Selektor: jede Summen-Zeile, die direkt auf eine NICHT-Summen-Zeile
     folgt -- so erwischt man genau die erste, nicht die zweite. */
  #pdf-area .pdf-page-mat table.pdf-mat-tbl tr:not(.pdf-mat-sum) + tr.pdf-mat-sum td {
    border-top: 2px solid #FF7800 !important;
  }
  /* Info-Tabelle unter der Hauptliste: ohne Rahmen, Zeilennamen rechtsbündig */
  #pdf-area .pdf-page-mat table.pdf-mat-info {
    width: auto; margin-top: 10px;
    border-collapse: collapse;
  }
  #pdf-area .pdf-page-mat table.pdf-mat-info th,
  #pdf-area .pdf-page-mat table.pdf-mat-info td {
    border: none !important;
  }
  #pdf-area .pdf-page-mat table.pdf-mat-info th {
    text-align: right !important;
    font-weight: normal !important;
    background: white !important;
  }
  #pdf-area .pdf-page-mat table.pdf-mat-info td {
    text-align: right;
  }
  #pdf-area .pdf-page-mat table.pdf-mat-info td:last-child {
    text-align: left; color: #5577AA;
  }
}

/* Dezenter grüner Blink-Effekt nach erfolgreichem Speichern */
@keyframes mat-flash-anim {
  0%   { box-shadow: 0 0 0 0 rgba(0,160,80,0.75); }
  50%  { box-shadow: 0 0 0 6px rgba(0,160,80,0.25); }
  100% { box-shadow: 0 0 0 0 rgba(0,160,80,0); }
}
#mdl-material .btn-flash { animation: mat-flash-anim 0.7s ease-in-out; }

/* Pulldown-Pfeil-Knopf rechts im Material-Inputfeld (Material- UND
   Schichtaufbau-Modal nutzen dieselbe Struktur). */
.mat-input-wrap {
  position: relative; display: block; width: 100%;
}
.mat-input-wrap input {
  width: 100%; box-sizing: border-box; padding-right: 22px;
}
.mat-input-wrap .mat-dropdown-btn {
  position: absolute; right: 2px; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  border: none; background: transparent; padding: 0;
  font-size: 10px; line-height: 1; color: #555;
  cursor: pointer;
}
.mat-input-wrap .mat-dropdown-btn:hover { color: #000; }

/* Eigenes Dropdown-Popup für Material-Auswahl (Workaround für
   Chrome/Edge-Datalist-Bug bei Klick auf das Inputfeld). */
.mat-popup {
  position: fixed; z-index: 9999; display: none;
  background: white; border: 1px solid #999; border-radius: 3px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  max-height: 220px; overflow-y: auto;
  font: inherit;
}
.mat-popup-item {
  padding: 4px 8px; cursor: pointer; white-space: nowrap;
}
.mat-popup-item:hover { background: #73F0DC; }
dialog#mdl-impressum h3 {
  margin: 6px 0 12px; font-size: 16px; color: #09140F;
}
dialog#mdl-impressum p {
  margin: 0 0 14px;   /* erzeugt die "eine Zeile Abstand" zwischen den Blöcken */
  color: #09140F; line-height: 1.4;
}
dialog#mdl-impressum a {
  color: #09140F; text-decoration: underline;
}
dialog#mdl-impressum .modal-foot { justify-content: flex-end; }
dialog#mdl-impressum .modal-foot button.primary {
  background: #E8E8E8 !important;
  color: #09140F !important;
  border: 1px solid #BBB !important;
  border-radius: 4px;
  padding: 6px 24px;
}

/* Projekt-Grid: Label direkt neben Eingabefeld, linksbuendig.
   Erstes und letztes Feld doppelt so breit (.long), die zwei mittleren .short. */
.proj-grid {
  display: grid;
  grid-template-columns: auto auto;    /* Label | Input */
  column-gap: 8px;
  row-gap: 4px;
  align-items: center;
  width: max-content;                  /* Felder nur so breit wie noetig */
  max-width: 100%;
}
.proj-grid label { color: #444; }
.proj-grid input { padding: 3px 6px; border: 1px solid #999; border-radius: 3px;
                   font: inherit; text-align: left; background: white; }
.proj-grid input.short { width: 140px; }
/* Bezeichnung und Kunde gleichbreit (etwas schmaler als bisher,
   damit der Projekt-Kasten auf seine engste Inhaltsbreite passt). */
.proj-grid input.long  { width: 200px; }

/* Prozessdaten: Felder links, drei Prozess-Buttons rechts daneben
   vertikal gestapelt -- maximal nach links gezogen, starten in Höhe
   der Gesamtverweilzeit-Zeile. */
.prozess-wrap   { display: flex; gap: 8px; align-items: flex-start; }
/* Feste Breite des Eingabe-Blocks: damit beginnen die Buttons rechts
   daneben IMMER an derselben Stelle, egal wie lang die "Gesamtverweilzeit
   in Sekunden" wird. Überlauf wird unsichtbar abgeschnitten. */
.prozess-fields { flex: 0 0 auto; width: 600px; overflow: hidden; }
.prozess-buttons {
  display: flex; flex-direction: column; gap: 4px;
  /* Negativer Margin zieht den Block nach oben, sodass der oberste
     Button auf Höhe der Panel-Überschrift "Prozessdaten" liegt. */
  margin-top: -22px;
}
.prozess-buttons button {
  padding: 4px 19px; font: inherit; cursor: pointer;
  background: #E8E8E8; border: 1px solid #BBB; border-radius: 4px;
  /* Explizite Mindestbreite, damit auch der kürzeste Text ("Lüfter")
     einen breiteren Button ergibt und alle drei gleich breit sind. */
  min-width: 130px !important;
  text-align: center;
}
.prozess-buttons button:hover { background: #D8D8D8; }

/* "Gesamtverweilzeit in Sekunden": ohne grauen Hintergrund, dunkelgrün,
   Wert + Einheit rechtsbündig in der fixen 4. Spalte. min-width: 0 ist
   wichtig: ohne diesen Zusatz würde CSS-Grid die Spalte automatisch
   ausweiten, sobald der Inhalt (z.B. siebenstellige Sekundenwerte)
   breiter wird als 150 px, und die Buttons rechts daneben wandern mit. */
#p-verw-s {
  background: transparent !important;
  color: #09140F;
  text-align: right;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}
/* Gesamtofenlänge + Gesamtverweilzeit: Werte in dunkelgrün. */
#p-laenge, #p-verw { color: #09140F; }

/* generische Zeilenform fuer Prozessdaten und Modale */
.row { display: grid; grid-template-columns: 220px 140px auto; gap: 6px 8px;
       align-items: center; margin-bottom: 4px; }
.row > label { color: #444; }
.row > input { padding: 3px 6px; border: 1px solid #999; border-radius: 3px;
               font: inherit; text-align: right; background: white; }
.row > input[readonly] { background: #F0F0F0; border-color: #DDD; }
.row > .unit { color: #666; font-size: 13px; }

/* ---------- Sektions-Tabelle ---------- */
.sections-wrap { overflow-x: auto; }
table.sections {
  border-collapse: collapse; font-size: 13px;
  table-layout: fixed;
  /* Erste Spalte = Beschriftung, dann Sektionsspalten, dann Σ/Schnitt */
}
table.sections col.col-label { width: 220px; }
table.sections col.col-unit  { width: 80px; }
table.sections col.col-sec   { width: 160px; }
table.sections col.col-sum   { width: 130px; }

table.sections th, table.sections td { padding: 3px 8px; border-bottom: 1px solid #EEE;
                                       vertical-align: middle; }
table.sections td.s-val    { text-align: right; }
table.sections td.s-input  { text-align: right; padding: 1px 4px; }
table.sections td.s-input input { width: 100%; min-width: 70px; padding: 2px 4px;
                                  border: 1px solid #999; border-radius: 3px;
                                  text-align: right; font: inherit; background: white; }

/* Group-Header (Geometrie, Luftaufheizung, ...) */
table.sections tr.row-hdr td { font-weight: bold; color: var(--blue); padding-top: 8px;
                                border-top: 1px solid #DDD; }

/* Spalten-Header (Tuerkis) — sitzt jetzt in derselben Zeile wie "Sektion". */
table.sections tr.row-cols td        { background: var(--turquoise); color: black;
                                       font-weight: bold; text-align: center;
                                       border-bottom: 1px solid #4FBEA0; }
table.sections tr.row-cols td.first  { background: var(--turquoise); color: black;
                                       text-align: right; font-weight: bold; }

table.sections tr.row-sum td { font-weight: bold; }
table.sections td.s-btn button { padding: 1px 8px; font: inherit; cursor: pointer; }

/* T-Button (links vom Zahlenwert) */
table.sections .s-tbtn { margin-right: 6px; padding: 0 5px; font-size: 11px;
                          background: #E8E8E8; border: 1px solid #BBB;
                          cursor: pointer; border-radius: 3px; }
table.sections .s-bold { font-weight: bold; }
table.sections .s-sum  { background: transparent; }

/* ---------- Modals ---------- */
dialog.power-modal:not([open]) { display: none !important; }
dialog.power-modal { padding: 0; border: none; border-radius: 8px;
                     box-shadow: 0 8px 30px rgba(0,0,0,0.25);
                     max-width: 95vw; max-height: 95vh;
                     overflow: hidden;
                     resize: both;          /* per Maus an Ecke ziehen */
                     min-width: 320px; min-height: 240px; }
dialog.power-modal::backdrop { background: rgba(0,0,0,0.35); }

.modal-head { display: flex; align-items: center; padding: 10px 14px;
              background: var(--blue); color: white; }
.modal-head h2 { margin: 0; flex: 1; font-size: 16px; }
.modal-head button.close-x { background: transparent; border: none; color: white;
                              font-size: 20px; cursor: pointer; line-height: 1; }
.modal-body { padding: 14px 18px; overflow: auto; max-height: none; flex: 1; }
.modal-foot { padding: 10px 14px; background: #F4F4F4; border-top: 1px solid #DDD;
              display: flex; justify-content: flex-end; gap: 8px; }
.modal-foot button { padding: 6px 16px; cursor: pointer; }
.modal-foot button.primary { background: var(--blue); color: white; border: none;
                             border-radius: 4px; font: inherit; }

.modal-inner > h3 { margin: 0 0 4px; color: #333; font-size: 15px; }
.modal-inner > p.help { margin: 0 0 12px; color: #666; font-size: 13px; }

/* Tabellen in Modalen */
table.m-tbl { border-collapse: collapse; width: 100%; font-size: 13px; }
table.m-tbl th, table.m-tbl td { padding: 4px 8px; border-bottom: 1px solid #EEE; }
table.m-tbl th { background: #F4F4F4; text-align: left; font-weight: normal; color: #444; }
table.m-tbl td input { width: 100%; padding: 2px 4px; border: 1px solid #999;
                       border-radius: 3px; font: inherit; text-align: right; }
table.m-tbl td input[type="checkbox"] { width: auto; }
table.m-tbl td:first-child { color: #666; }
table.m-tbl tfoot td { background: #F7F7F7; font-weight: bold; padding: 4px 8px; text-align: right; }
table.m-tbl tfoot td:first-child { text-align: left; }

/* Result-Spans */
.result { display: inline-block; min-width: 80px; text-align: right;
          color: #222; padding: 1px 4px; }
.row .result { background: #F7F7F7; border-radius: 3px; }
/* Im Sektion-Modal: Sektionsmasse mit Hintergrund-Grau (= Bodyfarbe) */
.sek-foot-left .result#s-mass { background: transparent; }

/* 4-spaltige Zeile fuer Prozessdaten (Label / Input / Einheit / extra-Anzeige) */
/* 4. Spalte fix auf 150 px: rechts­ausgerichtetes #p-verw-s sitzt
   immer am gleichen Punkt -- auch siebenstellige Sekunden­werte
   (z.B. 3 000 000 s) verschieben die nachfolgenden Prozess-Buttons
   nicht mehr. */
.row.row-4col { grid-template-columns: 220px 140px auto 150px; }
.row.row-4col .result { min-width: 70px; text-align: left; color: #444;
                         background: transparent; }
.row > input[readonly] { background: transparent; border-color: #DDD; color: #444; }

/* Quadratische Buttons in der Sektions-Header-Zeile */
table.sections tr.row-cmd td { padding: 2px 4px; background: white; text-align: center; }
table.sections .cmd-bar { display: inline-flex; gap: 2px; }
table.sections .cmd-btn { width: 20px; height: 20px; padding: 0; line-height: 1;
                           font-size: 13px; cursor: pointer; border: 1px solid #999;
                           background: #E8E8E8; border-radius: 3px; }
table.sections .cmd-btn:hover { background: #D8D8D8; }
table.sections .cmd-btn.bang  { font-weight: bold; color: var(--blue); }
table.sections .cmd-btn.del   { color: #B00020; font-weight: bold; }

/* === Letzte Politur: kompakte Tabelle + 13px in den Kästen oben === */
.panel { font-size: 13px; }
.panel h2 { margin: 0 0 4px; }     /* enger anliegender Titel */

/* Prozess- und Modal-Zeilen kompakter */
.row { margin-bottom: 1px; }
.proj-grid { row-gap: 1px; }

/* Sektionstabelle kompakter, ohne Zeilentrennlinien */
table.sections th, table.sections td { padding: 1px 8px; border-bottom: none; }
/* Gruppen-Header behält dünne Trennlinie oben — sonst verschwimmt die Struktur */
table.sections tr.row-hdr td { padding-top: 4px; padding-bottom: 1px;
                                border-top: 1px solid #DDD; }
/* Spalten-Header (Türkis) braucht trotzdem eine Bodenkante */
table.sections tr.row-cols td        { padding: 2px 8px; }
table.sections tr.row-cols td:not(.first) { border-bottom: 1px solid #4FBEA0; }
/* Eingabefelder: kompaktere Höhe */
table.sections td.s-input input { padding: 1px 4px; }
/* Quadratische Buttons enger zusammen */
table.sections tr.row-cmd td { padding: 1px 4px; }

/* === Sektions-Modal === */
dialog#mdl-sektion { width: 890px; max-width: 96vw; height: 815px;
                      display: flex; flex-direction: column; }

/* Alles im Sektion-Modal in der gleichen Schriftgröße wie die Anmerkung (13 px).
   Einzige Ausnahme: die Hauptüberschrift. */
.sek-body, .sek-body * { font-size: 13px; }
.sek-body  { padding: 10px 18px 12px; }
.sek-h1    { margin: 0 0 4px; font-size: 18px; color: #222; font-weight: bold; }
.sek-intro { color: #444; margin: 0 0 6px; }

/* Grunddaten oben LINKS als kompakter Block */
.sek-grunddaten {
  display: flex; flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  margin: 0 0 4px;
}
.sek-grunddaten .gd-row {
  display: flex; align-items: center; gap: 8px;
}
.sek-grunddaten .gd-row label { width: 230px; text-align: right; color: #444; flex: 0 0 auto; }
.sek-grunddaten .val           { font-weight: bold; }
.sek-grunddaten input          { padding: 1px 4px; border: 1px solid #999; border-radius: 3px;
                                  font: inherit; }
.sek-grunddaten input#s-name,
.sek-grunddaten input#s-mat    { width: 220px; }
.sek-grunddaten input#s-rho,
.sek-grunddaten input#s-cp     { width: 66px; text-align: right; }
.sek-grunddaten select#s-mat   { padding: 1px 4px; border: 1px solid #999;
                                 border-radius: 3px; font: inherit; min-width: 228px;
                                 background: white; }
.sek-grunddaten .unit          { color: #666; }

/* Zentrale Canvas mit Quader, Flächen-Boxen, Geometrie und Fußzeile.
   margin-top negativ -> alles unterhalb des Namensfelds rückt 50 px nach oben.
   Höhe: 660 + 25 px für die neue Footer-Zeile "Spez. Wärmeaufnahme". */
.sek-canvas {
  position: relative; height: 685px; width: 850px; margin: -46px auto 0;
}
.sek-quader { position: absolute; left: 150px; top: 210px;
              width: 460px; height: 320px; }

/* Geometrie-Eingaben */
.geo { position: absolute; display: flex; align-items: center; gap: 4px; }
.geo label { color: #444; width: 50px; text-align: right; }
.geo input { padding: 1px 4px; border: 1px solid #999; border-radius: 3px;
              font: inherit; text-align: right; background: white; width: 80px; }
.geo .unit { color: #666; }

/* Quader + Geo-Eingaben + Flächen-Boxen sind 100 px nach unten verschoben,
   damit oberhalb des Quaders mehr Abstand zur Eingabe "Sektionsname" entsteht. */
.geo-breite { left: 30px;  top: 260px; }
.geo-hoehe  { left: 10px;  top: 390px; }
.geo-laenge { left: 270px; top: 510px; }

/* Flächen-Boxen */
.sek-area-box { position: absolute; min-width: 270px; padding: 4px 6px;
                background: rgba(255,255,255,0.92); border: 1px solid #BBB;
                border-radius: 3px; }
.sek-area-box .area-header { display: flex; align-items: center; gap: 6px;
                              border-bottom: 1px solid #DDD; padding-bottom: 2px;
                              margin-bottom: 2px; }
.sek-area-box .area-title  { font-weight: bold; flex: 1; min-width: 0; }
.sek-area-box .aufbau-btn-inline { padding: 1px 8px; font: inherit; cursor: pointer; }
.sek-area-box .area-n      { width: 36px; padding: 0 6px 0 4px; text-align: right;
                              border: 1px solid #999; border-radius: 3px; font: inherit;
                              -moz-appearance: textfield; appearance: textfield; }
.sek-area-box .area-n::-webkit-outer-spin-button,
.sek-area-box .area-n::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.sek-area-box .area-row    { display: grid;
                              grid-template-columns: 1fr 60px 50px;
                              column-gap: 4px; align-items: center; }
.sek-area-box .area-row > .ar { text-align: right; }
.sek-area-box .area-row > .unit { color: #666; }
/* Eingabezeilen für Anzahl-Felder innerhalb der Box */
.sek-area-box .area-input-row > input.area-n-inline {
  width: 50px; padding: 1px 4px; text-align: right;
  border: 1px solid #999; border-radius: 3px; font: inherit;
  justify-self: end;
  -moz-appearance: textfield; appearance: textfield;
}
.sek-area-box .area-input-row > input.area-n-inline::-webkit-outer-spin-button,
.sek-area-box .area-input-row > input.area-n-inline::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

.area-ou    { left: 268px; top:  70px; }   /* 10 px hoch + 8 px rechts (Feinjustage) */
.area-seite { left: 200px; top: 315px; }   /* mit Quader 100 px runter, 5 px nach rechts */
.area-stirn { left: 530px; top: 270px; }   /* mit Quader 100 px runter, 20 px extra runter */

/* Fußzeile in der Canvas. Buttons rechts ca. 50 px tiefer als die linke
   Eingabeliste. Linke Liste hat jetzt 4 Zeilen (Masse-Zuschlag,
   Sektionsmasse, Spez. Wärmeaufnahme, Temperaturwarnung). */
.sek-foot-left  { position: absolute; left: 10px;  top: 550px; }
.sek-foot-right { position: absolute; right: 100px; top: 600px; display: flex; gap: 8px; }

/* Schreibgeschützter Result-Span im Sek-Footer optisch wie ein Input,
   rechtsbündig, transparenter Hintergrund. */
.sek-foot-left .sek-result {
  display: inline-block; width: 100%; box-sizing: border-box;
  padding: 1px 4px; text-align: right;
}
.sek-foot-left .sek-row { grid-template-columns: 130px 120px auto; margin-bottom: 1px; }
.sek-foot-left p { margin: 4px 0 0; }
.sek-foot-right button { padding: 6px 18px; cursor: pointer; font: inherit; border: 1px solid #BBB; background: #E8E8E8; border-radius: 4px; }
.sek-foot-right .primary { background: var(--blue); color: white; border: 1px solid var(--blue);
                             border-radius: 4px; }

table.sections td.s-unit  { color: #666; font-size: 12px; text-align: center; }
table.sections td.s-left  { text-align: left; }

table.sections td.valT { position: relative; padding-left: 28px; }
table.sections td.valT .s-tbtn {
  position: absolute; left: 2px; top: -12px;
  width: 22px; height: 22px; padding: 0;
  font-size: 12px; line-height: 22px;
  background: #E8E8E8; border: 1px solid #BBB;
}

/* Zeilenbeschriftungen rechtsbündig, außer Gruppen-Header */
table.sections tr:not(.row-hdr):not(.row-cols):not(.row-cmd) td:first-child {
  text-align: right; padding-right: 10px;
}
table.sections tr.row-hdr td { text-align: left; }

/* Doppelte Beschriftung in einer Zelle (Subgruppe links, Label rechts) */
table.sections td.s-label-dual {
  display: flex; justify-content: space-between; align-items: center;
  padding-left: 10px; padding-right: 10px; text-align: initial;
}
table.sections td.s-label-dual .sub {
  font-weight: bold; font-style: italic; color: #333;
}
table.sections tr:not(.row-hdr):not(.row-cols):not(.row-cmd) td.s-label-dual {
  padding-right: 10px;
}

/* Aufbau-Übertragungs-Pfeil im Sektion-Modal */
.sek-area-box .area-copy-btn {
  width: 22px; height: 22px; padding: 0;
  font-size: 13px; line-height: 20px;
  background: #E8E8E8; border: 1px solid #BBB; border-radius: 3px;
  cursor: pointer;
}
.sek-area-box .area-copy-btn:hover { background: #D8D8D8; }

/* === Aufbau-Modal === */
table.aufbau-tbl th       { text-align: center; }
table.aufbau-tbl td.a-num { text-align: center; color: #666; }
/* Material-Eingaben linksbündig */
table.aufbau-tbl td.a-mat input { text-align: left; }
/* R-Werte rechtsbündig (= reine Ausgabezelle) */
table.aufbau-tbl td.a-r          { text-align: right; }
/* Zahlen-Inputs (λ, d) rechtsbündig wie zuvor — schon Default für m-tbl */
/* Löschen-Knopf rechts in jeder Zeile */
table.aufbau-tbl td.a-del        { text-align: center; padding: 0 4px; width: 28px; }
table.aufbau-tbl .a-del-btn      { width: 20px; height: 20px; padding: 0;
                                    font-size: 12px; line-height: 1;
                                    background: #E8E8E8; border: 1px solid #BBB;
                                    border-radius: 3px; cursor: pointer; color: #B00020; }
table.aufbau-tbl .a-del-btn:hover { background: #D8D8D8; }
/* Ergebnis-Zeilen unten: Beschriftung schmaler, Werte direkt daneben, kein Hintergrund */
.aufbau-result-row {
  grid-template-columns: 220px 80px auto;
}
.aufbau-result-row .result { background: transparent; }

/* λ- und d-Spalten schmaler (halbe vorige Breite) */
table.aufbau-tbl td.a-num-inp        { width: auto; }   /* Breite kommt jetzt aus colgroup */
table.aufbau-tbl td.a-num-inp input  { width: 100%; box-sizing: border-box; }

/* Spaltenköpfe: nicht fett, transparenter Hintergrund.
   Höhere Spezifität als die globale "table.m-tbl thead th"-Regel,
   damit der Header wirklich nicht fett wird. */
dialog#mdl-aufbau table.aufbau-tbl thead th {
  font-weight: normal;
  background: transparent;
  font-family: "Mozilla Text", "Mozilla Headline", sans-serif;
}

/* Alle Daten-Zeilen in Mozilla Text, Größe 14 (Header bleibt Space Mono). */
table.aufbau-tbl tbody {
  font-family: "Mozilla Text", "Mozilla Headline", sans-serif;
  font-size: 14px;
}

/* Feste Spaltenbreiten, damit alle Header einzeilig passen */
table.aufbau-tbl { table-layout: fixed; }
table.aufbau-tbl col.col-num    { width:  30px; }
table.aufbau-tbl col.col-mat    { width: auto;  }   /* Material nimmt den Rest */
table.aufbau-tbl col.col-d      { width:  60px; }
table.aufbau-tbl col.col-rho    { width:  85px; }
table.aufbau-tbl col.col-cp     { width: 130px; }
table.aufbau-tbl col.col-lam    { width: 110px; }
table.aufbau-tbl col.col-r      { width:  90px; }
table.aufbau-tbl col.col-delrow { width:  38px; }
table.aufbau-tbl col.col-savemat{ width:  38px; }
table.aufbau-tbl col.col-delmat { width:  38px; }
/* Heißorange-Markierung leerer Zahleneingaben in Aufbau-Tabelle */
table.aufbau-tbl input.cf-hot { background: #FF7800 !important; }
/* Drei farbige Aktion-Buttons in der Aufbau-Tabelle (analog Material-Modal) */
dialog#mdl-aufbau table.aufbau-tbl td.m-btn {
  width: 38px; text-align: center; padding: 0 2px;
}
dialog#mdl-aufbau table.aufbau-tbl td.m-btn button {
  width: 28px; height: 24px; padding: 0;
  cursor: pointer; line-height: 1;
  font: inherit; font-size: 14px;
  border: 1px solid #BBB; border-radius: 3px;
}
dialog#mdl-aufbau table.aufbau-tbl td.m-btn-delrow button {
  background: #73F0DC !important; color: #09140F !important;
}
dialog#mdl-aufbau table.aufbau-tbl td.m-btn-delrow button:hover  { background: #5DD7C2 !important; }
dialog#mdl-aufbau table.aufbau-tbl td.m-btn-delrow button:disabled {
  background: #DDDDDD !important; color: #999 !important; cursor: not-allowed;
}
dialog#mdl-aufbau table.aufbau-tbl td.m-btn-savemat button {
  background: #00A050 !important; color: white !important; font-weight: bold;
}
dialog#mdl-aufbau table.aufbau-tbl td.m-btn-savemat button:hover { background: #009048 !important; }
dialog#mdl-aufbau table.aufbau-tbl td.m-btn-delmat button {
  background: #FF7800 !important; color: #09140F !important;
}
dialog#mdl-aufbau table.aufbau-tbl td.m-btn-delmat button:hover { background: #E66D00 !important; }
dialog#mdl-aufbau .btn-flash { animation: mat-flash-anim 0.7s ease-in-out; }
/* Aufbau-Modal: ca. eine Pfeilbreite (≈ 30 px) mehr für die
   Material-Spalte, damit der ▼-Knopf nicht in die nächste Zeile rutscht. */
dialog#mdl-aufbau { width: 980px; }

/* Zwischenlinien weg, Zeilen so kompakt wie möglich */
table.aufbau-tbl th,
table.aufbau-tbl td { border-bottom: none; padding: 1px 6px; }

/* Material-Select fuellt die ganze Spalte aus und ist gleich hoch wie die Eingaben */
table.aufbau-tbl td.a-mat       { padding: 1px 6px; }
table.aufbau-tbl td.a-mat select {
  width: 100%; box-sizing: border-box;
  padding: 2px 4px;
  border: 1px solid #999;
  border-radius: 3px;
  background: white;
  font: inherit;
}

/* Eigene Modal-Breite, damit die jetzt 8 Spalten Platz haben. */
dialog#mdl-aufbau { width: 820px; max-width: 96vw; }

/* Überschrift "Schichten ..." + Buttons in einer Zeile, Buttons rechts. */
.aufbau-layers-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 14px 0 6px;
}
.aufbau-layers-head h3 { margin: 0; }
.aufbau-io { display: flex; gap: 8px; }
.aufbau-io button {
  padding: 2px 14px; font: inherit; cursor: pointer;
  background: #E8E8E8; border: 1px solid #BBB; border-radius: 3px;
}
.aufbau-io button:hover { background: #D8D8D8; }
/* Lösch-Button deaktiviert: ausgegraut, kein Hover-Wechsel */
table.aufbau-tbl .a-del-btn:disabled { color: #BBB; background: #F5F5F5;
                                       cursor: not-allowed; }
table.aufbau-tbl .a-del-btn:disabled:hover { background: #F5F5F5; }

/* Alpha-Eingaben im Aufbau-Modal: kompakt, linksbündig */
.row.alpha-row {
  grid-template-columns: 80px 70px auto;
  justify-content: start;
  width: max-content;
}
.row.alpha-row > label { text-align: right; padding-right: 4px; }
.row.alpha-row > input { width: 70px; }

/* ----- Luefter-Modal: drei Spalten (Label / Feld / Einheit) ----------- */
table.luefter-tbl { border-collapse: collapse; font-size: 13px;
                    margin: 0 auto; }
table.luefter-tbl td { padding: 3px 4px; border: none;
                       vertical-align: middle; }
table.luefter-tbl td.lu-lbl  { color: #222; white-space: nowrap;
                               padding-right: 14px; font-weight: normal; }
table.luefter-tbl td.lu-lbl b { font-weight: normal; }
table.luefter-tbl td.lu-val  { width: 140px; }
/* Editierbares Eingabefeld + Dropdown: weisser Hintergrund mit Rahmen. */
table.luefter-tbl td.lu-val input,
table.luefter-tbl td.lu-val select {
    width: 100%; padding: 2px 6px; box-sizing: border-box;
    border: 1px solid #999; border-radius: 3px;
    font-family: inherit; font-size: 13px; line-height: 1.4;
    background: #FFF; color: #222;
    text-align: right;
}
/* Read-only-Felder (Leistung, Vorschlag, Reserven): ohne Rahmen,
   selbe Hintergrundfarbe wie das Modal-Fenster ("transparent"). */
table.luefter-tbl td.lu-val input[readonly] {
    background: transparent;
    border: 1px solid transparent;
    color: #222;
}
table.luefter-tbl td.lu-unit { color: #666; font-size: 12px;
                               padding-left: 6px; white-space: nowrap; }
table.luefter-tbl tr.lu-sep td { padding: 6px 0;
                                 border-bottom: 1px solid #DDD; }
/* Gesamtofenlaenge: read-only Feld ohne Rahmen, wie nur-Text. */
#p-laenge { border: none; background: transparent; padding-left: 0; }

/* ----- Einheitliches Button-Aussehen --------------------------------- */
/* Alle Buttons: grauer Hintergrund, schwarze Schrift, Text zentriert.
   Ausnahme: .close-x (Schliess-Kreuz im Modal-Header) bleibt transparent. */
button:not(.close-x) {
    background: #E8E8E8 !important;
    color: #000 !important;
    text-align: center !important;
    font: inherit;
    cursor: pointer;
}
button:not(.close-x):hover  { background: #D8D8D8 !important; }
button:not(.close-x):active { background: #C8C8C8 !important; }

/* Aufheiz-Modal: Kennzahlen ohne abgesetzten Hintergrund */
#mdl-aufheiz .row .result { background: transparent; padding-left: 0; }
/* Erweiterte Zeile mit zwei Wertspalten (Sekunden + Minuten) */
.row.row-with-min { grid-template-columns: 220px 140px 30px 80px auto; }

/* ==================================================================== */
/* Typografie ecodry: Mozilla Text fuer Fliesstext, Space Mono (fett)    */
/* fuer Ueberschriften, durchgaengig dunkelgruen #09140F.                */
/* ==================================================================== */
:root {
  --eco-text: #09140F;
}
body {
  font-family: "Mozilla Text", system-ui, sans-serif;
  font-weight: 400;
  color: var(--eco-text);
}
/* Alle Ueberschriften und panel/section-Titel: Space Mono fett */
h1, h2, h3, h4, h5, h6,
.panel h3, .panel > .h-title,
.modal-head h2,
.row-hdr td,
.row-cols td,
.sek-h1,
table.m-tbl thead th {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  color: var(--eco-text);
}
/* Inputs/Selects/Buttons erben die Schrift */
input, select, textarea, button {
  font-family: inherit;
  color: var(--eco-text);
}
/* Sonderfarben ueberschreiben (z.B. blaue Akzente) lassen wir bestehen,
   wo sie semantisch sinnvoll sind (Diagramm-Achsen-Farben). */

/* Spezifische Text-Farb-Overrides: Ueberall, wo bisher blau/grau Schrift
   stand, wird sie auf das ecodry-Dunkelgruen umgestellt.  Hintergruende
   bleiben unveraendert (z.B. tuerkis-Spaltenkoepfe, blaue Modal-Head). */
.login-card h1,
.login-card .subtitle,
.login-card label,
header.app-header h1,
header.app-header .user-info,
.panel h2,
.panel h3,
.proj-grid label,
.row > label,
.row > .unit,
table.sections tr.row-hdr td,
table.sections td,
table.sections th,
table.sections tr.row-cols td,
table.sections tr.row-cols td.first {
  color: var(--eco-text);
}
/* Diagramm-Achsen (Aufheizkurve): Farben behalten -- werden inline durch
   Chart.js gesetzt, betreffen ohnehin nur das Canvas-Element. */

/* Buttons mit farbigem Hintergrund: weisser Text bleibt weiss. */
.modal-head, .modal-head h2, .modal-head button.close-x {
  color: white;
}

/* Zeilennummern-Spalte ganz links */
table.sections col.col-num { width: 36px; }
table.sections td.row-num {
  text-align: right; color: #666; font-variant-numeric: tabular-nums;
  padding-right: 6px;
}

/* Input-Zellen in der Sektions-Tabelle so kompakt wie moeglich */
table.sections td.s-input { padding: 0 4px; }
table.sections td.s-input input {
  padding: 1px 4px;
  line-height: 1.2;
}
table.sections tr { line-height: 1.25; }

/* Waermeuebergang-Modal: breitere Label-Spalte, kein graues Result-BG */
#mdl-waerme .row { grid-template-columns: 320px 140px auto; }
#mdl-waerme .row .result {
  background: transparent;
  padding-left: 0;
}
#mdl-waerme button.w-pi {
  margin-left: 6px;
  width: 26px; height: 22px;
  border: 1px solid #999; border-radius: 3px;
  font-family: inherit; font-size: 14px; line-height: 1;
  cursor: pointer; padding: 0;
}

/* === UI-Politur === */

/* Namensspalte der Haupttabelle breiter, damit lange Labels passen */
table.sections col.col-label { width: 280px !important; }

/* Panel-Ueberschriften nicht mehr Uppercase */
.panel h2 { text-transform: none !important; letter-spacing: normal; }

/* Modal-Kopfleiste: kaeltes Tuerkis mit dunkelgruener Schrift */
.modal-head { background: #73F0DC !important; }
.modal-head, .modal-head h2, .modal-head button.close-x {
  color: var(--eco-text) !important;
}

/* Sektions-Edit-Button "!" orange, wenn die Sektion noch keine Masse hat */
table.sections .cmd-btn.bang.warn {
  background: #FF7800 !important;
  color: white !important;
  border-color: #FF7800;
}

/* Material-Modal */
#mdl-material input[data-k="bauteil"],
#mdl-material input[data-k="material"] {
  text-align: left;
}
/* Materialeinheiten + Masse im Ofen + Durchsatz alle gleich aufgebaut,
   damit die Werte senkrecht untereinander stehen. */
#mdl-material .row { grid-template-columns: 220px 100px auto !important; }
#mdl-material #m-im-ofen,
#mdl-material #m-durchsatz {
  text-align: right; background: transparent;
  display: block; padding: 0 4px;
}
/* Nichts fett im Material-Modal */
#mdl-material b { font-weight: normal; }

/* Projekt-Panel: individuelle Feldbreiten */
#p-bez { width: 420px !important; }   /* Bezeichnung gleich breit wie Kunde */
#p-ers { width: 210px !important; }   /* Ersteller:   140 -> 150 % */
#p-kun { width: 420px !important; }   /* Kunde:       280 -> 150 % */

/* Bedingte Formatierungen Hauptmenue */
table.sections td.s-input input.cf-cold {
  background: #73F0DC !important;
}
table.sections td.s-input input.cf-hot {
  background: #FF7800 !important;
  color: white;
}
/* T-Button-Warnung bei Außenwandtemperatur > 40 °C */
table.sections .s-tbtn.warn {
  background: #FF7800 !important;
  color: white !important;
  border-color: #FF7800 !important;
}

/* Sprachumschaltung im Header */
.lang-switch { display: flex; gap: 4px; align-items: center; }
.lang-switch .lang-btn {
  background: transparent !important; border: 1px solid transparent !important;
  padding: 2px 4px !important; cursor: pointer; border-radius: 3px;
  display: flex; align-items: center; height: 24px;
}
.lang-switch .lang-btn:hover { background: #E8E8E8 !important; }
.lang-switch .lang-btn.active {
  border-color: var(--eco-text) !important;
  background: #F0F0F0 !important;
}

/* Header-Buttons: feste Mindestbreite, damit sich die Größe beim
   Sprachwechsel nicht mehr ändert */
header.app-header > button { min-width: 100px !important; text-align: center !important; }

/* Header-Texte: feste Zeilenhöhe und vertikale Ausrichtung,
   damit beim Sprachwechsel keine vertikalen Sprünge passieren */
header.app-header { line-height: 1.4; }
header.app-header h1 { line-height: 1.4; }

/* Flaggen: aktive in Farbe, inaktive grau und leicht transparent */
.lang-switch .lang-btn {
  filter: grayscale(100%);
  opacity: 0.55;
  transition: filter 0.15s, opacity 0.15s;
}
.lang-switch .lang-btn.active {
  filter: none;
  opacity: 1;
}
.lang-switch .lang-btn:hover {
  filter: grayscale(50%);
  opacity: 0.85;
}
.lang-switch .lang-btn.active:hover {
  filter: none;
  opacity: 1;
}

/* Prozessdaten-Buttons: feste Hoehe, damit der Wechsel von
   "Waermeuebergang" auf "Heat transfer α" das Layout nicht verschiebt.
   Das α-Zeichen kann eine groessere Glyphen-Hoehe haben. */
.prozess-buttons button {
  min-height: 32px;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
}

/* Projekt-Panel: linke Spalte (Labels) fest, damit sich die
   Eingabefelder beim Sprachwechsel nicht verschieben. */
.proj-grid { grid-template-columns: 110px auto; }

/* Material-Modal: zentrierte, normale Spaltenüberschriften ohne Hintergrund */
#mdl-material table.m-tbl thead th {
  text-align: center;
  font-weight: normal;
  background: transparent !important;
  font-family: "Mozilla Text", system-ui, sans-serif;
  color: var(--eco-text) !important;
}
/* Komplette Tabelle: kein abgesetzter Hintergrund, keine Fett-Schrift */
#mdl-material table.m-tbl,
#mdl-material table.m-tbl tbody td,
#mdl-material table.m-tbl tfoot td {
  background: transparent !important;
  font-weight: normal !important;
  color: var(--eco-text) !important;
}
/* Spaltenbreiten Material-Tabelle individuell, damit jede Ueberschrift
   in EINE Zeile passt und auch lange Werte (Stahl (unlegiert)) lesbar
   sind. Die Breiten gelten fuer th, td und die enthaltenen Inputs. */
#mdl-material table.m-tbl { table-layout: fixed; width: auto; }
#mdl-material table.m-tbl th:nth-child(1),
#mdl-material table.m-tbl td:nth-child(1) { width: 95px;  }   /* Bauteil */
#mdl-material table.m-tbl th:nth-child(2),
#mdl-material table.m-tbl td:nth-child(2) { width: 150px; }   /* Material */
#mdl-material table.m-tbl th:nth-child(3),
#mdl-material table.m-tbl td:nth-child(3) { width: 80px;  }   /* Masse [kg] */
#mdl-material table.m-tbl th:nth-child(4),
#mdl-material table.m-tbl td:nth-child(4) { width: 100px; }   /* Dichte [kg/m^3] */
#mdl-material table.m-tbl th:nth-child(5),
#mdl-material table.m-tbl td:nth-child(5) { width: 110px; }   /* cp [kJ/(kg*K)] */
#mdl-material table.m-tbl th:nth-child(6),
#mdl-material table.m-tbl td:nth-child(6) { width: 95px;  }   /* lambda [W/(m*K)] */
#mdl-material table.m-tbl th:nth-child(7),
#mdl-material table.m-tbl td:nth-child(7) { width: 105px; }   /* fuer Simulation */
#mdl-material table.m-tbl th:nth-child(8),
#mdl-material table.m-tbl td:nth-child(8) { width: 36px;  }   /* Loesch-Button */
#mdl-material table.m-tbl td input[type="text"] {
  width: 100%; box-sizing: border-box;
}
#mdl-material table.m-tbl th:nth-child(7),
#mdl-material table.m-tbl td:nth-child(7) { text-align: center; }

/* Material-Tabelle: Spaltenbreiten v2 -- alle Ueberschriften einzeilig.
   Bauteil und Material doppelt so breit, "fuer Simulation" und "Dichte"
   verbreitert, "Masse" verkleinert. */
#mdl-material table.m-tbl th:nth-child(1),
#mdl-material table.m-tbl td:nth-child(1) { width: 300px !important; }   /* Bauteil */
#mdl-material table.m-tbl th:nth-child(2),
#mdl-material table.m-tbl td:nth-child(2) { width: 300px !important; }   /* Material */
#mdl-material table.m-tbl th:nth-child(3),
#mdl-material table.m-tbl td:nth-child(3) { width: 65px  !important; }   /* Masse */
#mdl-material table.m-tbl th:nth-child(4),
#mdl-material table.m-tbl td:nth-child(4) { width: 125px !important; }   /* Dichte */
#mdl-material table.m-tbl th:nth-child(5),
#mdl-material table.m-tbl td:nth-child(5) { width: 115px !important; }   /* cp */
#mdl-material table.m-tbl th:nth-child(6),
#mdl-material table.m-tbl td:nth-child(6) { width: 100px !important; }   /* lambda */
#mdl-material table.m-tbl th:nth-child(7),
#mdl-material table.m-tbl td:nth-child(7) { width: 140px !important; }   /* fuer Simulation */
/* Spalten 8, 9, 10 = die drei Aktion-Buttons rechts. Jede 38 px, damit
   table-layout:fixed sie gleichmäßig breit halten kann. */
#mdl-material table.m-tbl th:nth-child(8),
#mdl-material table.m-tbl td:nth-child(8)  { width: 38px !important; }
#mdl-material table.m-tbl th:nth-child(9),
#mdl-material table.m-tbl td:nth-child(9)  { width: 38px !important; }
#mdl-material table.m-tbl th:nth-child(10),
#mdl-material table.m-tbl td:nth-child(10) { width: 38px !important; }
/* Modal-Mindestbreite, damit alle Spalten Platz haben.
   Drei Aktion-Buttons rechts (✕ Zeile, ✓ Speichern, ✕ DB-Löschen). */
#mdl-material { min-width: 1340px !important; }

/* Prozess-Buttons wieder zentriert (war von der text-align:left-Regel
   ueberschrieben worden) */
.prozess-buttons button { text-align: center !important; }

/* === Material-Modal v3 ============================================ */
/* Masse-Spalte wirklich schmal halten: explizit per !important und
   zusaetzlich max-width auf dem Input. */
#mdl-material table.m-tbl th:nth-child(3),
#mdl-material table.m-tbl td:nth-child(3) {
  width: 70px !important; max-width: 70px !important;
}
#mdl-material table.m-tbl td:nth-child(3) input {
  width: 100%; max-width: 60px;
}
/* Material-Auswahl: <select> faellt die ganze Spaltenbreite aus */
#mdl-material table.m-tbl td:nth-child(2) select,
#mdl-material table.m-tbl td:nth-child(2) input {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
}

/* Prozess-Buttons wieder zentriert (alte text-align:left ueberschreiben) */
.prozess-buttons button { text-align: center !important; padding-left: 17px; padding-right: 17px; }

/* Sektionsdaten-Modal: Fusszeile nach rechts ruecken, sodass die
   Beschriftung der drei Eingabefelder einzeilig ist. */
.sek-foot-left  { margin-left: 240px; min-width: 360px; }
.sek-foot-left .row.sek-row { grid-template-columns: 220px 100px auto; }
.sek-foot-right { margin-left: 20px; }

/* === Sek-Modal Footer-Layout v3 ==================================== */
/* Eingaben ganz links, Buttons ganz rechts (per absolute Position) */
.sek-foot-left  {
  left: 10px !important; right: auto !important;
  margin-left: 0 !important;
}
.sek-foot-left .row.sek-row { grid-template-columns: 230px 80px auto; }
/* Material-Block im Sek-Footer: Select wider, rechtsbündige Zahlinputs */
.sek-foot-left select#s-mat {
  padding: 1px 4px; border: 1px solid #999; border-radius: 3px;
  font: inherit; background: white;
  width: 200px;   /* breiter als die 80-px-Gridspalte, ragt in die Einheiten-Spalte */
}
.sek-foot-left input#s-rho,
.sek-foot-left input#s-cp { text-align: right; }
.sek-foot-right {
  left: auto !important; right: 10px !important;
  margin-left: 0 !important;
}

/* === Material-Modal v4 ============================================= */
/* Select-Höhe genau wie Inputs */
#mdl-material table.m-tbl td select {
  padding: 2px 4px;
  border: 1px solid #999;
  border-radius: 3px;
  font: inherit;
  background: white;
  line-height: 1.2;
  height: auto;
  box-sizing: border-box;
}
/* Masse-Spalte/Input: Eingabefeld so breit wie Dichte-Input (ca. 110 px) */
#mdl-material table.m-tbl th:nth-child(3),
#mdl-material table.m-tbl td:nth-child(3) {
  width: 120px !important; max-width: 120px !important;
}
#mdl-material table.m-tbl td:nth-child(3) input {
  width: 100%; max-width: 110px;
}

/* === Prozess-Buttons-Schrift zentriert ============================= */
.prozess-buttons,
.prozess-buttons button {
  text-align: center !important;
}
.prozess-buttons button {
  padding-left: 0 !important; padding-right: 0 !important;
}

/* === Material-Modal v5 ============================================= */
/* Tabelle bekommt eine feste Gesamtbreite, damit jede Spalte ihren
   width-Wert wirklich nutzt (table-layout: fixed greift sonst nicht).
   Summe der Spalten: 300+300+120+125+115+100+140+36 = 1236 -> 1240 px */
#mdl-material table.m-tbl {
  table-layout: fixed !important;
  width: 1240px !important;
}

/* === Prozess-Buttons: wirklich zentrierter Text =================== */
/* Die Buttons sind display: inline-flex (wg. Vertikalzentrierung von
   "Heat transfer α"). In Flex-Containern wirkt text-align NICHT auf
   das einzelne Flex-Item -- statt dessen muss justify-content gesetzt
   werden. */
.prozess-buttons button {
  justify-content: center;
}

/* === Prozessdaten: Verweilzeit "120 s" enger an "min" ============= */
/* Beide Einheiten-Spalten sind max-content -- so breit wie ihr Inhalt,
   und stehen nebeneinander. */
.row.row-4col {
  grid-template-columns: 220px 140px max-content max-content !important;
  gap: 6px 8px;
}