/*
  CSS-AUDIT V8.38.8 ABGESCHLOSSEN
  Die verbleibenden C3-Regeln werden ausschließlich zusammen mit gezielten
  visuellen Tests der Messanleitung und Responsive-Ansichten bearbeitet.
  Bericht: docs/audit/CSS_AUDIT_ABSCHLUSS_V8.38.8.txt
*/

/*
  CSS-AUDIT V8.38.7
  Die C3-Abhängigkeiten wurden ohne Layoutänderung analysiert.
  Bericht: docs/audit/CSS_C3_ABHAENGIGKEITSANALYSE_BLOCK_3_2H_V8.38.7.txt
*/

/*
  CSS-AUDIT V8.38.3
  Kategorie-C-Konflikte wurden nach C1/C2/C3-Risiko klassifiziert.
  Bericht: docs/audit/CSS_KATEGORIE_C_RISIKOKLASSIFIZIERUNG_V8.38.3.txt
*/

/*
  CSS-AUDIT V8.38.1
  Die 43 mehrfach definierten Selektoren wurden in A/B/C klassifiziert.
  Bericht: docs/audit/CSS_KLASSIFIZIERUNG_BLOCK_3_2B_V8.38.1.txt
*/

/*
  CSS-AUDIT V8.38.0
  Die vollständige Konfliktkarte der mehrfach definierten Selektoren liegt unter:
  docs/audit/CSS_KONFLIKTKARTE_BLOCK_3_2A_V8.38.0.txt
  In diesem Teilblock wurden bewusst keine Layoutregeln automatisch entfernt.
*/

/*
  HOMEUP STYLESHEET – STRUKTURÜBERSICHT
  1. Grundlayout und globale Komponenten
  2. Startseite und Bereichsauswahl
  3. Kundenportal
  4. Interner Bereich und Konfigurator
  5. CRM und Mitarbeiterverwaltung
  6. Responsive Regeln
  7. Messanleitung und Fensterdarstellung
*/

* {
  box-sizing: border-box;
}

.kunden-dynamische-masse {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  margin: 4px 0 12px;
}

.kunden-dynamische-masse label,
.kunden-dynamische-masse input,
.kunden-dynamische-masse .kunden-mass-hinweis {
  grid-column: span 1;
}

.kunden-dynamische-masse label {
  align-self: end;
}

.kunden-dynamische-masse .kunden-mass-hinweis {
  grid-column: 1 / -1;
  margin: 4px 0 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #eef7fb;
  color: #294858;
  line-height: 1.45;
}

@media (max-width: 680px) {
  .kunden-dynamische-masse {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

body {
  margin: 0;
  padding: 10px;
  font-family: Arial, sans-serif;
  background: #0f1115;
  color: #f2f4f8;
}

.container {
  max-width: 780px;
  margin: 0 auto;
  padding-bottom: 95px;
}

h1 {
  text-align: center;
  font-size: 25px;
  margin: 10px 0 18px;
  color: #ffffff;
}

h2 {
  font-size: 20px;
  margin-top: 18px;
  color: #ffffff;
}

h3 {
  font-size: 16px;
  margin-top: 16px;
  color: #f0dcdc;
}

section,
#liste > div,
#zusammenfassung > div,
#projektListe > div,
.compact-panel {
  background: #171a21;
  border: 1px solid #2b2f39;
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 14px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.3);
}

label {
  display: block;
  margin: 10px 0 5px;
  font-size: 13px;
  color: #b9c3d3;
  font-weight: bold;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid #343b49;
  background: #10131a;
  color: #ffffff;
  border-radius: 12px;
  padding: 12px;
  font-size: 15px;
  outline: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #b52b2b;
  box-shadow: 0 0 0 3px rgba(181,43,43,0.22);
}

textarea {
  min-height: 82px;
  resize: vertical;
}

button {
  width: 100%;
  border: none;
  border-radius: 13px;
  padding: 13px 15px;
  margin-top: 10px;
  font-size: 15px;
  font-weight: bold;
  color: white;
  background: linear-gradient(135deg, #8b1e1e, #c43a3a);
  box-shadow: 0 6px 16px rgba(196,58,58,0.22);
  cursor: pointer;
}

button:hover {
  filter: brightness(1.08);
}

button:active {
  transform: scale(0.98);
}

button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

hr {
  border: none;
  border-top: 1px solid #2a2f3a;
  margin: 18px 0;
}

details {
  background: #11151d;
  border: 1px solid #2a2f3a;
  border-radius: 14px;
  padding: 11px;
  margin: 12px 0;
}

summary {
  cursor: pointer;
  font-weight: bold;
  color: #f0dcdc;
}

/* kompakte Profi-Reihen */
.form-grid {
  display: grid;
  gap: 6px;
  align-items: end;
}

.grid-2 {
  grid-template-columns: 1fr 1fr;
}

.grid-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

/* Freitextfelder erst sichtbar durch JS */
.freitextFeld {
  display: none;
  margin-top: 8px;
}

/* Schnellbuttons */
.quick-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 8px 0 10px;
}

.quick-buttons button {
  width: auto;
  margin: 0;
  padding: 8px 10px;
  font-size: 11px;
  border-radius: 999px;
  background: #242a35;
  box-shadow: none;
  color: #f1d8d8;
  border: 1px solid #3a2020;
}

/* Sticky Speichern */
.sticky-save {
  position: sticky;
  bottom: 8px;
  z-index: 50;
  background: rgba(15, 17, 21, 0.88);
  backdrop-filter: blur(12px);
  padding: 9px;
  border-radius: 18px;
  border: 1px solid #3a2020;
  margin-top: 16px;
}

.sticky-save button {
  margin-top: 0;
  background: linear-gradient(135deg, #8b1e1e, #d34848);
  box-shadow: 0 6px 18px rgba(211,72,72,0.28);
}

/* Status */
#statusMeldung p,
#meldung p {
  padding: 11px;
  border-radius: 12px;
}

.status-ok {
  background: #10281b;
  border: 1px solid #1f8f52;
  color: #8cffbd;
}

.status-error {
  background: #2a1111;
  border: 1px solid #b83232;
  color: #ff9a9a;
}

#editHinweis {
  background: #2a1111;
  border: 1px solid #b83232;
  color: #ffb0b0;
  padding: 11px;
  border-radius: 12px;
  margin-bottom: 12px;
  font-weight: bold;
}

/* Lade Overlay */
#loadingOverlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 7, 11, 0.72);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}

.loaderBox {
  background: #171a21;
  border: 1px solid #3a2020;
  border-radius: 20px;
  padding: 24px;
  width: 220px;
  text-align: center;
  box-shadow: 0 12px 32px rgba(0,0,0,0.42);
}

.spinner {
  width: 42px;
  height: 42px;
  border: 4px solid #2a2f3a;
  border-top-color: #d34848;
  border-radius: 50%;
  margin: 0 auto 8px;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

#loadingText {
  margin: 0;
  color: #f0dcdc;
  font-weight: bold;
}

/* Spezialbereiche */
#rolloBereich,
#kombiRolloBereich {
  background: #111a2a !important;
  border: 1px solid #244d91;
  border-radius: 14px;
  padding: 13px;
  margin-top: 12px;
}

#alternativeBereich {
  background: #1f1515 !important;
  border: 1px solid #9a3232;
  border-radius: 14px;
  padding: 13px;
  margin-top: 12px;
  color: #f6eeee;
}

/* gespeicherte Alternative besser lesbar */
.alternative-card {
  margin-top: 10px;
  padding: 11px;
  background: #241616;
  border: 1px solid #9a3232;
  border-radius: 12px;
  color: #f8eeee;
}

.alternative-card strong {
  color: #ffb0b0 !important;
}

#mailAusgabe {
  min-height: 340px;
  font-family: monospace;
  font-size: 14px;
  background: #0b0d12;
}

#liste > div {
  line-height: 1.5;
}

#liste > div strong {
  color: #ffffff;
  font-size: 15px;
}

#liste button,
#projektListe button {
  width: auto;
  display: inline-block;
  margin-right: 5px;
  margin-top: 9px;
  padding: 9px 11px;
  font-size: 13px;
}

/* Löschen deutlich rot */
button[onclick*="loeschen"],
button[onclick*="Loeschen"],
button[onclick*="projektLoeschen"] {
  background: linear-gradient(135deg, #9b1c1c, #e05252);
  box-shadow: 0 6px 16px rgba(224,82,82,0.24);
}

/* Zurück neutral */
button[onclick*="zurueck"] {
  background: #242a35;
  box-shadow: none;
}

/* Mail / Projekt erstellen etwas edler dunkelrot */
button[onclick*="neuesProjektStarten"],
button[onclick*="mailErstellen"] {
  background: linear-gradient(135deg, #751818, #b83232);
  box-shadow: 0 6px 18px rgba(184,50,50,0.24);
}

/* Handy-Optimierung */


/* sehr schmale Handys */

.produkt-info {
  margin-top: 10px;
  padding: 10px;
  border-radius: 12px;
  background: #111a2a;
  border: 1px solid #244d91;
  color: #dce9ff;
  font-size: 14px;
}
.logoBox {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.start-website-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 180px;
  min-height: 46px;
  padding: 8px 14px;
  border: 1px solid rgba(37, 133, 196, .42);
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  color: #d9efff;
  text-decoration: none;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .18);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.start-website-link span { font-size: 12px; font-weight: 800; line-height: 1.2; }
.start-website-link:hover,
.start-website-link:focus-visible { border-color: #73c7f4; background: rgba(37, 133, 196, .16); transform: translateY(-1px); }
.start-website-link:focus-visible { outline: 3px solid #8fd3ff; outline-offset: 3px; }
.logo {
  max-width: 220px;
  width: 100%;
  opacity: 0.92;
}

.startText {
  line-height: 1.5;
}

.portal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 18px;
}

.portal-card {
  border-radius: 18px;
}

.portal-card strong {
  display: block;
  font-size: 18px;
  margin-bottom: 6px;
}

.portal-card span {
  display: block;

  font-size: 14px;
}

.kunden-checkboxen {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 16px 0;
}

.kunden-checkboxen label {
  background: #10131a;
  border: 1px solid #343b49;
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
}

.kunden-checkboxen input {
  margin-right: 10px;
}

.kunden-zusammenfassung {
  background: #10131a;
  border: 1px solid #343b49;
  border-radius: 16px;
  padding: 16px;
  margin-top: 14px;
}

.element-kachel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 18px 0;
}

.element-kachel{
  display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:20px;
    border-radius:20px;


    transition:.2s;
    cursor:pointer;
    min-height:260px;
}

.element-kachel:hover{
  transform:translateY(-4px);
}

.element-bild{
  height:150px;
    border-radius:16px;


    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    margin-bottom:16px;
}

.platzhalter-fenster::after {
  content: "Fensterbild";
}

.platzhalter-tuer::after {
  content: "Türbild";
}

.platzhalter-kombi::after {
  content: "Kombibild";
}

.platzhalter-zubehoer::after {
  content: "Zubehörbild";
}

.element-bild::after{
    color:#d7dce6;
    font-size:15px;
    font-weight:600;
    letter-spacing:.3px;
}

.mess-anleitung-gross,
.mess-anleitung-klein {
  background: #10131a;
  border: 1px solid #343b49;
  border-radius: 16px;
  padding: 16px;
  margin: 14px 0;
}

.mess-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.mess-bild {
  height: 140px;
}

.mess-bild.klein {
  height: 90px;
}

@media (min-width: 800px) {
  .element-kachel-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .mess-layout {
    grid-template-columns: 260px 1fr;
  }
}

/* ===============================
   Kundenportal Design Upgrade
   =============================== */

#startBereich,
#kundenportalBereich {
  background:
    radial-gradient(circle at top left, rgba(184, 50, 50, 0.22), transparent 34%),
    linear-gradient(180deg, #171a21 0%, #0f1117 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.32);
}

#kundenportalBereich h2,
#startBereich h2 {
  font-size: 28px;
  margin-bottom: 6px;
}

.startText {
  color: #c6cedd;
  font-size: 15px;
}

.portal-card,
.element-kachel {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015)),
    #121620;
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.portal-card:hover,
.element-kachel:hover {
  transform: translateY(-2px);
  border-color: rgba(211,72,72,0.65);
  box-shadow: 0 14px 30px rgba(0,0,0,0.34);
}

.portal-card strong,
.element-kachel strong {
  color: #ffffff;
  font-size: 18px;
}

.portal-card span {
  color: #b7c0cf;
}

.element-bild {
  background:
    linear-gradient(135deg, rgba(139,30,30,0.22), rgba(36,42,53,0.7)),
    #1a202c;
  border: 1px solid rgba(255,255,255,0.1);
}

.mess-anleitung-gross,
.mess-anleitung-klein,
.kunden-zusammenfassung {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
    #121620;
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 10px 24px rgba(0,0,0,0.2);
}

#kundenportalBereich input,
#kundenportalBereich select,
#kundenportalBereich textarea {
  background: #0b0e14;
  border: 1px solid #343b49;
}

#kundenportalBereich input:focus,
#kundenportalBereich select:focus,
#kundenportalBereich textarea:focus {
  outline: none;
  border-color: #d34848;
  box-shadow: 0 0 0 3px rgba(211,72,72,0.16);
}

#kundenportalBereich button {
  border-radius: 14px;
}

#kundenportalBereich button[onclick*="kundenElementSpeichern"],
#kundenportalBereich button[onclick*="kundenAnfrageAbschliessen"],
#kundenportalBereich button[onclick*="kundenMasseEingeben"] {
  background: linear-gradient(135deg, #8b1e1e, #d34848);
  box-shadow: 0 10px 24px rgba(211,72,72,0.22);
}
.kunden-fortschritt{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:20px 0 25px;
}

.step{
    flex:1;
    min-width:110px;
    padding:10px;
    text-align:center;
    border-radius:14px;
    background:#262626;
    color:#bfbfbf;
    font-weight:600;
    transition:all .25s ease;
}

.step.active{
  box-shadow:0 0 20px rgba(200,40,40,.45);
    transform:translateY(-2px);
}
.element-kachel h4{
    margin:0 0 8px;
    font-size:18px;
    color:#fff;
}

.element-kachel p{
  margin:0;

    font-size:14px;
}

.kunden-element-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 13px;
  margin-bottom: 10px;
  background: #10131a;
  border: 1px solid #343b49;
  border-radius: 14px;
}

.kunden-element-card p {
  margin: 5px 0;
}

.kunden-element-card small {
  color: #b9c3d3;
  line-height: 1.4;
}

.kunden-element-loeschen {
  width: auto;
  margin: 0;
  padding: 9px 11px;
  font-size: 11px;
  background: #242a35;
  border: 1px solid #4a5364;
  box-shadow: none;
}

.button-neutral {
  background: #242a35;
  border: 1px solid #4a5364;
  box-shadow: none;
}

#kundenAbschlussText[readonly] {
  background: #0b0d12;
  font-family: monospace;
  line-height: 1.45;
}

@media (max-width: 430px) {
  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
  }

  body {
    padding: 6px;
  }

  input,
  select,
  textarea,
  button {
    font-size: 15px;
  }

  .sticky-save {
    bottom: 6px;
  }

  .kunden-element-card {
    grid-template-columns: 1fr;
  }

  .kunden-element-loeschen {
    width: 100%;
  }
}


.kunden-fortschritt-kopf {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 7px;
  font-size: 12px;
  color: #b9c3d3;
}

.kunden-fortschritt-balken {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #242a35;
  margin-bottom: 10px;
}

#kundenFortschrittBalken {
  display: block;
  width: 14%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8b1e1e, #d34848);
  transition: width 0.2s ease;
}

.kunden-element-aktionen {
  align-items: center;
}

.kunden-element-bearbeiten,
.kunden-element-loeschen {
  width: auto;
  margin: 0;
  padding: 9px 11px;
  font-size: 12px;
  background: #242a35;
  border: 1px solid #4a5364;
  box-shadow: none;
}

.kunden-review-liste {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.kunden-review-liste > div {
  padding: 10px;
  border-radius: 12px;
  background: #10131a;
  border: 1px solid #343b49;
}

.projekt-toolbar {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 10px;
  align-items: end;
}

.projekt-toolbar-aktionen {
  display: flex;
  gap: 8px;
  margin: 8px 0 2px;
}

.projekt-toolbar-aktionen button {
  margin-top: 0;
}

.projekt-card {
  background: #171a21;
  border: 1px solid #2b2f39;
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 12px;
}

.projekt-card p {
  margin: 7px 0;
}

.projekt-card small {
  color: #8f9bad;
}

.projekt-card-kopf {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.status-badge {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  background: #10281b;
  border: 1px solid #1f8f52;
  color: #8cffbd;
  font-size: 11px;
  font-weight: bold;
}

.projekt-card-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.projekt-card-aktionen button {
  width: auto;
  margin: 0;
  padding: 9px 11px;
  font-size: 12px;
}


/* =========================================================
   V6.5 – Kundenportal / Auth / App-Feeling
   ========================================================= */


body {
  background:
    radial-gradient(circle at 50% -180px, rgba(37,133,196,.22), transparent 430px),
    #0d1117;
}

.version-chip {
  display: inline-block;
  padding: 4px 8px;
  margin-left: 5px;
  border-radius: 999px;
  font-size: 12px;
  vertical-align: middle;
  background: var(--homeup-blue-soft);
  color: #8fd3ff;
  border: 1px solid rgba(37,133,196,.45);
}

.start-hero {
  overflow: hidden;
  position: relative;
  padding: 24px;
  background: linear-gradient(145deg, #182431, #121820);
  border-color: rgba(37,133,196,.38);
}

.start-hero::after {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  right: -110px;
  top: -105px;
  border-radius: 50%;
  background: rgba(37,133,196,.17);
}

.hero-kicker,
.auth-badge {
  display: inline-flex;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  color: #9bd8ff;
  background: var(--homeup-blue-soft);
  border: 1px solid rgba(37,133,196,.35);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.portal-card {
  text-align: left;
  min-height: 118px;
  padding: 18px;
  background: linear-gradient(145deg, #202b37, #151b22);
  border: 1px solid var(--homeup-border);
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
}

.portal-card:hover {
  border-color: rgba(37,133,196,.8);
  transform: translateY(-2px);
}

#kundenportalBereich {
  border-color: rgba(37,133,196,.4);
  background: linear-gradient(180deg, rgba(37,133,196,.05), rgba(23,26,33,1) 220px);
}

.portal-illustration {
  display: block;
  width: 100%;
  height: 150px;

  border-radius: 16px;

  border: 1px solid rgba(37,133,196,.25);
}

.element-kachel {
  overflow: hidden;
  text-align: left;
  background: #151c24;
  border: 1px solid var(--homeup-border);
  box-shadow: 0 8px 18px rgba(0,0,0,.2);
}

.element-kachel:hover {
  border-color: var(--homeup-blue);
  box-shadow: 0 12px 26px rgba(37,133,196,.15);
}

.element-kachel h4,
.element-kachel strong {
  display: block;
  margin-top: 12px;
  color: #fff;
}

.element-kachel p {
  color: #adbac8;
  line-height: 1.45;
}

.kunden-fortschritt-balken span {
  background: linear-gradient(90deg, var(--homeup-blue-dark), #46afe9) !important;
}

.step.active {
  background: var(--homeup-blue) !important;
  border-color: #64c3f4 !important;
  color: white !important;
}

.button-primary,
#kundenAnfrageSendenButton,
#loginButton {
  background: linear-gradient(135deg, var(--homeup-blue-dark), var(--homeup-blue));
  box-shadow: 0 8px 20px rgba(37,133,196,.28);
}

.button-secondary {
  background: #222c37;
  border: 1px solid #3a4a5b;
  box-shadow: none;
}

.text-button {
  background: transparent;
  box-shadow: none;
  color: #85cdf7;
  border: 0;
  padding: 10px;
}

.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 4px;
  padding: 13px;
  border-radius: 14px;
  background: #111820;
  border: 1px solid var(--homeup-border);
  cursor: pointer;
}

.consent-row input {
  width: 20px;
  min-width: 20px;
  height: 20px;
  margin: 1px 0 0;
}

.consent-row span {
  color: #c7d1dc;
  line-height: 1.4;
  font-weight: normal;
}

.inline-status {
  min-height: 0;
  margin-top: 12px;
  padding: 0;
  border-radius: 12px;
  line-height: 1.45;
}


.inline-status.status-error {
  background: #2a1111;
  border: 1px solid #b83232;
  color: #ffb0b0;
}

.inline-status.status-ok {
  background: #10281b;
  border: 1px solid #1f8f52;
  color: #9df1c5;
}

.inline-status.status-info {
  background: #102334;
  border: 1px solid var(--homeup-blue-dark);
  color: #a8dcfa;
}

.auth-shell {
  max-width: 560px;
  margin-inline: auto;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.auth-card {
  margin-top: 14px;
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(145deg, #19232e, #141920);
  border: 1px solid rgba(37,133,196,.4);
  box-shadow: 0 18px 50px rgba(0,0,0,.34);
}

.auth-logo {
  display: block;
  width: min(180px, 56vw);
  height: auto;
  margin: 0 auto 14px;
}

.top-back {
  width: auto;
  padding-inline: 14px;
}

.password-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.password-toggle {
  width: auto;
  margin: 0;
  padding-inline: 13px;
  background: #25303c;
  border: 1px solid #3b4c5e;
  box-shadow: none;
}

.erfolg-panel {
  text-align: center;
  padding: 24px 8px 8px;
}

.erfolg-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 8px;
  border-radius: 50%;
  color: white;
  background: linear-gradient(145deg, #1f9c5a, #45c87c);
  font-size: 38px;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(31,156,90,.28);
}

.anfrage-code {
  padding: 12px;
  border-radius: 13px;
  background: #111820;
  border: 1px solid var(--homeup-border);
  color: #e8f1f7;
}
.anfrage-code strong { color: #fff; }

@media (prefers-reduced-motion: no-preference) {
  #kundenportalBereich > div[id^="kundenSchritt"],
  .auth-card {
    animation: homeupIn .25s ease-out;
  }
  @keyframes homeupIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
}


.section-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.section-heading-row h2 {
  margin-top: 0;
  margin-bottom: 4px;
}

.button-inline {
  width: auto;
  flex: 0 0 auto;
  margin-top: 0;
}


.kundenanfrage-intern-card p {
  line-height: 1.45;
}

.kundenanfrage-intern-kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.kundenanfrage-intern-kopf strong,
.kundenanfrage-intern-kopf span {
  display: block;
}

.kundenanfrage-intern-kopf > div > span {
  color: #9eacbd;
  font-size: 12px;
  margin-top: 3px;
}

.status-pill {
  border: 1px solid #297bb1;
  background: rgba(37, 133, 196, 0.14);
  color: #9bd6ff;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
  white-space: nowrap;
}

.anfrage-textblock {
  white-space: pre-wrap;
  word-break: break-word;
  background: #0b0f15;
  border: 1px solid #27313d;
  border-radius: 12px;
  padding: 12px;
  color: #e7edf5;
  font: 13px/1.5 monospace;
}

.portal-illustration {
  background: #f4f7fb;
}


.diagnose-panel { margin-top: 16px; border-color: #31536d; background: #101923; }
.diagnose-panel summary { color: #8fd1ff; }
.diagnose-panel code { color: #a9ddff; }
.diagnose-ausgabe { white-space: pre-wrap; word-break: break-word; min-height: 110px; max-height: 330px; overflow: auto; background: #090d12; border: 1px solid #2d4355; border-radius: 12px; padding: 12px; color: #d8ecfa; font: 12px/1.5 monospace; }


.app-topbar { display:flex; justify-content:space-between; gap:16px; align-items:center; margin:12px 0 14px; }
.app-topbar h2 { margin:4px 0 0; }
.dashboard-shell { background:linear-gradient(145deg,#151b24,#11161e); border-color:#2f4358; }
.dashboard-grid {
  display:grid;  gap:10px;
}
.dashboard-card { background:#0f141c; border:1px solid #2a394a; border-radius:16px; padding:16px; min-height:126px; display:flex; flex-direction:column; }
.dashboard-card span { color:#b9c9dc; font-size:13px; font-weight:700; }
.dashboard-card strong { font-size:34px; margin:10px 0 6px; color:#fff; }
.dashboard-card small { color:#7f91a7; line-height:1.35; }
.dashboard-columns { display:grid; grid-template-columns:1.55fr .85fr; gap:12px; margin-top:12px; }
.dashboard-panel { background:#0f141c; border:1px solid #2a394a; border-radius:16px; padding:15px; }
.dashboard-panel h3 { margin-top:0; }
.aktivitaets-liste { display:grid; gap:8px; }
.aktivitaet { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid #252e3a; }
.aktivitaet:last-child { border-bottom:0; }
.aktivitaet span { color:#ecf3fb; }
.aktivitaet small { color:#7f91a7; white-space:nowrap; }
.kundenanfrage-aktionen {
  flex-wrap:wrap;  margin:10px 0;
}
.kundenanfrage-aktionen button { width:auto; margin:0; }
.kundenanfrage-intern-card.is-erledigt { opacity:.68; }
.status-badge, .status-pill { text-transform:none; }

@media(max-width:430px){ .dashboard-grid{grid-template-columns:1fr} }


.foto-hinweis { margin: 6px 0 10px; font-size: 12px; }
.kunden-foto-aufnahme { width: auto; margin: 8px 0 0; }
.kunden-kamera-input { display: none; }
.kunden-foto-vorschau { display: grid; gap: 8px; margin-top: 8px; }
.kunden-foto-chip { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid #343b49; border-radius: 12px; background: #10131a; }
.kunden-foto-chip span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#kundenportalBereich .kunden-foto-chip button { flex: 0 0 auto; width: auto; margin: 0; padding: 6px 9px; white-space: nowrap; word-break: normal; overflow-wrap: normal; }
.kundenanfrage-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 9px; margin: 10px 0; }
.kundenanfrage-fotos img { width: 100%; height: 105px; object-fit: cover; border-radius: 12px; border: 1px solid #343b49; }
.rechtliches-panel { margin-top: 18px; }
.rechtliches-panel details { font-size: 13px; }

/* =========================================================
   V7.2 – Mobile-First Polish & App-Shell
   ========================================================= */


html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  min-height: 100dvh;
  padding-top: max(10px, var(--safe-top));
  padding-right: max(10px, var(--safe-right));
  padding-bottom: max(10px, var(--safe-bottom));
  padding-left: max(10px, var(--safe-left));
  overscroll-behavior-y: none;
}
button, input, select, textarea { min-height: var(--touch-size); }
button, .portal-card, .element-kachel { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
img { max-width: 100%; }

.inline-status:empty { display: none; }
.inline-status:not(:empty) {
  padding: 11px 12px;
  margin-top: 10px;
  border-radius: 12px;
}


@media (max-width: 380px) {
  .element-kachel-grid { grid-template-columns: 1fr; }
  .element-bild { height: 110px; }
  .dashboard-grid { grid-template-columns: 1fr 1fr; }
  .logo { max-width: 132px; }
}

@media (min-width: 701px) and (max-width: 1024px) {
  .container { max-width: 900px; }
  .element-kachel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* =========================================================
   V7.3 – HomeUp Light Mobile Customer Portal
   Der interne Arbeitsbereich bleibt bewusst im dunklen Stil.
   ========================================================= */
:root {
  --homeup-blue: #2585c4;
  --homeup-blue-dark: #17689f;
  --homeup-blue-soft: rgba(37,133,196,.14);
  --homeup-surface: #171d25;
  --homeup-border: #2d3947;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --touch-size: 46px;
  --hu-blue: #1f73b7;
  --hu-blue-dark: #15598f;
  --hu-red: #b72f3a;
  --hu-ink: #172231;
  --hu-muted: #657386;
  --hu-bg: #f4f7fb;
  --hu-card: #ffffff;
  --hu-line: #dce4ed;
  --hu-soft-blue: #edf6fd;
}

#startBereich,
#kundenportalBereich,
#loginBereich {
  color: var(--hu-ink);
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%);
  border: 1px solid var(--hu-line);
  box-shadow: 0 16px 42px rgba(24, 52, 79, 0.11);
}

#startBereich h2,
#startBereich h3,
#kundenportalBereich h2,
#kundenportalBereich h3,
#loginBereich h2,
#loginBereich h3 {
  color: var(--hu-ink);
}

#startBereich .startText,
#kundenportalBereich .startText,
#loginBereich .startText,
#startBereich label,
#kundenportalBereich label,
#loginBereich label {
  color: var(--hu-muted);
}

#startBereich input,
#startBereich select,
#startBereich textarea,
#kundenportalBereich input,
#kundenportalBereich select,
#kundenportalBereich textarea,
#loginBereich input,
#loginBereich select,
#loginBereich textarea {
  color: var(--hu-ink);
  background: #fff;
  border-color: #cfd9e4;
}

#startBereich input:focus,
#kundenportalBereich input:focus,
#kundenportalBereich select:focus,
#kundenportalBereich textarea:focus,
#loginBereich input:focus {
  border-color: var(--hu-blue);
  box-shadow: 0 0 0 3px rgba(31, 115, 183, 0.14);
}

#startBereich button,
#kundenportalBereich button,
#loginBereich button {
  background: linear-gradient(135deg, var(--hu-blue-dark), var(--hu-blue));
  box-shadow: 0 7px 18px rgba(31, 115, 183, 0.2);
}

#startBereich .button-secondary,
#startBereich .button-neutral,
#kundenportalBereich .button-secondary,
#kundenportalBereich .button-neutral,
#loginBereich .button-secondary,
#loginBereich .button-neutral,
#loginBereich .text-button,
#kundenportalBereich button[onclick*="Zur"],
#kundenportalBereich button[onclick*="zur"] {
  color: var(--hu-blue-dark);
  background: #eef4f9;
  border: 1px solid #cfdeeb;
  box-shadow: none;
}

#startBereich .portal-card,
#kundenportalBereich .element-kachel,
#kundenportalBereich .kunden-zusammenfassung,
#kundenportalBereich .mess-anleitung-gross,
#kundenportalBereich .mess-anleitung-klein,
#loginBereich .auth-card {
  color: var(--hu-ink);
  background: var(--hu-card);
  border: 1px solid var(--hu-line);
  box-shadow: 0 8px 22px rgba(28, 63, 94, 0.08);
}

#startBereich .portal-card strong,
#kundenportalBereich .element-kachel strong,
#kundenportalBereich .element-kachel h4 {
  color: var(--hu-ink);
}

#startBereich .portal-card span,
#kundenportalBereich .element-kachel p,
#kundenportalBereich .kunden-element-card small {
  color: var(--hu-muted);
}

#startBereich .portal-card:hover,
#kundenportalBereich .element-kachel:hover {
  border-color: rgba(31, 115, 183, .55);
  box-shadow: 0 13px 26px rgba(31, 115, 183, .14);
}

#kundenportalBereich .element-bild {
  background: linear-gradient(145deg, #f5f9fc, #e9f2f9);
  border-color: #dbe6ef;
}

#kundenportalBereich .kunden-fortschritt-kopf {
  color: var(--hu-muted);
}

#kundenportalBereich .kunden-fortschritt-balken {
  background: #dfe8f0;
}

#kundenportalBereich .kunden-fortschritt-balken span {
  background: linear-gradient(90deg, var(--hu-blue), #48a0d7);
}

#kundenportalBereich .step {
  color: #758396;
  background: #eef3f7;
  border-color: transparent;
}

#kundenportalBereich .step.active {
  color: #fff;
  background: var(--hu-blue);
}

#kundenportalBereich .consent-row {
  color: var(--hu-ink);
  background: #f7fafc;
  border-color: var(--hu-line);
}

#kundenportalBereich .kunden-element-card,
#kundenportalBereich .kunden-review-liste > div,
#kundenportalBereich .kunden-foto-chip {
  color: var(--hu-ink);
  background: #f8fafc;
  border-color: var(--hu-line);
}

#kundenportalBereich .kunden-element-loeschen,
#kundenportalBereich button[onclick*="Loeschen"],
#kundenportalBereich button[onclick*="loeschen"] {
  background: #fff1f2;
  color: var(--hu-red);
  border: 1px solid #f1c9cd;
  box-shadow: none;
}

.hero-kicker {
  color: var(--hu-blue) !important;
}

.rechtliches-kompakt {
  margin: 10px auto 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #8a96a5;
  text-align: center;
}

.rechtliches-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 11px;
}

.rechtliches-kompakt details {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.rechtliches-kompakt summary {
  color: #718093;
  font-size: 11px;
  font-weight: 500;
  list-style: none;
}

.rechtliches-kompakt summary::-webkit-details-marker { display: none; }
.rechtliches-kompakt details[open] {
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--hu-line);
}
.rechtliches-kompakt p { margin: 6px 0 0; font-size: 11px; line-height: 1.45; }
.rechtliches-kompakt .legal-copy { max-width: 920px; margin: 0 auto; text-align: left; color: #536274; }
.rechtliches-kompakt a,
.legal-inline-link { color: #176ca5; text-decoration: underline; text-underline-offset: 2px; }
.legal-inline-link:focus-visible,
.rechtliches-kompakt a:focus-visible { outline: 3px solid rgba(37,133,196,.3); outline-offset: 3px; border-radius: 3px; }


.hp-field { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.kunden-listen-kopf { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin:4px 0 8px; }
.kunden-listen-kopf strong { color:#17324d; font-size:16px; }
.kunden-listen-kopf span { color:#718093; font-size:12px; text-align:right; }
.kunden-element-aktionen { display:grid; grid-template-columns:1fr 1fr; gap:6px; min-width:190px; }
.kunden-element-aktionen .kunden-element-duplizieren { grid-column:1 / -1; background:#eaf4fb !important; color:#176ca5 !important; border:1px solid #bcdcf0 !important; box-shadow:none !important; }
.kunden-element-card.is-new { animation:v74Highlight .9s ease; }
@keyframes v74Highlight { 0% { box-shadow:0 0 0 4px rgba(37,133,196,.28); transform:translateY(-2px); } 100% { box-shadow:none; transform:none; } }


/* ===============================
   V7.5 – Abschlussvorschau & Feinschliff
   =============================== */
#kundenportalBereich #kundenAbschlussText,
#kundenportalBereich #kundenAbschlussText[readonly],
#kundenportalBereich .kunden-abschluss-text {
  min-height: 180px;
  max-height: 260px;
  height: 190px;
  overflow: auto;
  resize: vertical;
  background: #ffffff !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  caret-color: #111827;
  border: 1px solid #b8c4d1 !important;
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.08) !important;
  font-family: Arial, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
}

#kundenportalBereich #kundenAbschlussText:focus {
  border-color: #2585c4 !important;
  box-shadow: 0 0 0 3px rgba(37, 133, 196, 0.14) !important;
}

#kundenportalBereich .kunden-zusammenfassung {
  margin-top: 8px;
}


/* ===============================
   V7.6 – kompakte Elementliste und klare Abschlussprüfung
   =============================== */
#kundenportalBereich .kunden-elemente-schritt {
  padding-top: 4px;
}

#kundenportalBereich .kunden-listen-kopf {
  align-items: center;
  margin-bottom: 10px;
}

#kundenportalBereich .kunden-listen-kopf > div {
  display: grid;
  gap: 3px;
}

#kundenportalBereich .kunden-listen-kopf strong {
  color: #ffffff;
  font-size: 18px;
}

#kundenportalBereich .kunden-listen-kopf span {
  color: #aeb9c8;
  text-align: left;
}

#kundenportalBereich .kunden-element-hinzufuegen {
  width: auto;
  min-width: 120px;
  margin: 0;
}

#kundenportalBereich .kunden-element-liste {
  padding: 8px;
  margin: 0 0 10px;
}

#kundenportalBereich .kunden-leerzustand {
  min-height: 130px;
  display: grid;
  place-content: center;
  gap: 5px;
  text-align: center;
  color: #aeb9c8;
}

#kundenportalBereich .kunden-leerzustand strong {
  color: #ffffff;
  font-size: 16px;
}

#kundenportalBereich .kunden-element-card {
  align-items: start;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 12px;
  padding: 12px;
  margin-bottom: 8px;
  background: #ffffff;
  color: #172033;
  border: 1px solid #d8e0e8;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
}

#kundenportalBereich .kunden-element-card:last-child { margin-bottom: 0; }
#kundenportalBereich .kunden-element-inhalt { min-width: 0; }
#kundenportalBereich .kunden-element-kopf {
  display:flex; align-items:center;
}
#kundenportalBereich .kunden-element-kopf > div { display:grid; gap:2px; min-width:0; }
#kundenportalBereich .kunden-element-kopf strong { color:#172033; font-size:14px; }
#kundenportalBereich .kunden-element-kopf > div > span { color:#667085; font-size:12px; }
#kundenportalBereich .kunden-element-nummer,
#kundenportalBereich .kunden-review-nummer {
  width:28px; height:28px; flex:0 0 28px; display:grid; place-items:center;
  border-radius:999px; background:#e8f3fa; color:#176ca5; font-size:12px; font-weight:800;
}
#kundenportalBereich .kunden-element-mass { margin:8px 0 5px 38px; color:#172033; font-size:18px; font-weight:800; }
#kundenportalBereich .kunden-element-mass span { color:#7a8798; font-weight:500; }
#kundenportalBereich .kunden-element-badges { display:flex; flex-wrap:wrap; gap:5px; margin-left:38px; }
#kundenportalBereich .kunden-element-badges span { padding:4px 7px; border-radius:999px; background:#f1f5f9; color:#475467; font-size:10px; font-weight:700; }
#kundenportalBereich .kunden-element-notiz { margin:7px 0 0 38px; padding-top:7px; border-top:1px solid #e7edf3; color:#475467; font-size:12px; line-height:1.4; }


#kundenportalBereich .kunden-element-aktionen .kunden-element-duplizieren { grid-column:1 / -1; }
#kundenportalBereich .kunden-element-aktionen button {
  margin-top: 0;
  min-height: 36px;
  padding: 8px 9px;
  font-size: 11px;
}

#kundenportalBereich .kunden-schritt-aktionen { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#kundenportalBereich .kunden-schritt-aktionen button { margin:0; }
#kundenportalBereich #kundenSchritt2:has(#kundenElementListe[style*="display: none"]) .kunden-schritt-aktionen {
  grid-template-columns: minmax(220px, 420px);
  justify-content: center;
}

#kundenportalBereich .kunden-abschluss-uebersicht { padding:12px; }
#kundenportalBereich .kunden-review-kontakt { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#kundenportalBereich .kunden-review-kontakt > div { padding:9px 10px; border-radius:10px; background:#ffffff; border:1px solid #d8e0e8; display:grid; gap:3px; }
#kundenportalBereich .kunden-review-kontakt span { color:#667085; font-size:10px; text-transform:uppercase; letter-spacing:.04em; }
#kundenportalBereich .kunden-review-kontakt strong { color:#172033; font-size:13px; overflow-wrap:anywhere; }
#kundenportalBereich .kunden-review-adresse { grid-column:1 / -1; }
#kundenportalBereich .kunden-review-kopf { display:flex; justify-content:space-between; gap:10px; align-items:end; margin:14px 0 7px; }
#kundenportalBereich .kunden-review-kopf strong { color:#ffffff; }
#kundenportalBereich .kunden-review-kopf span { color:#aeb9c8; font-size:11px; }
#kundenportalBereich .kunden-review-liste { display:grid; gap:7px; }
#kundenportalBereich .kunden-review-liste article { display:flex; gap:9px; padding:10px; background:#ffffff; border:1px solid #d8e0e8; border-radius:11px; }
#kundenportalBereich .kunden-review-liste article strong { color:#172033; font-size:13px; }
#kundenportalBereich .kunden-review-liste article p { margin:3px 0 0; color:#475467; font-size:12px; }
#kundenportalBereich .kunden-review-liste article small { display:block; margin-top:4px; color:#667085; font-size:10px; line-height:1.35; }

#kundenportalBereich .kunden-textvorschau { margin-top:10px; background:#121620; border-color:#343b49; }
#kundenportalBereich .kunden-textvorschau summary { color:#ffffff; }
#kundenportalBereich .kunden-textvorschau .startText { margin:8px 0; font-size:12px; }
#kundenportalBereich #kundenAbschlussText,
#kundenportalBereich #kundenAbschlussText[readonly],
#kundenportalBereich .kunden-abschluss-text {
  display:block;
  width:100%;
  min-height:145px;
  height:155px;
  max-height:230px;
  margin-top:7px;
  background:#ffffff !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  opacity:1 !important;
  border:1px solid #b8c4d1 !important;
  font-family:Arial, sans-serif;
  font-size:12px;
  line-height:1.4;
}


@media (max-width: 390px) {
  #kundenportalBereich .kunden-element-aktionen { grid-template-columns:1fr 1fr; }
  #kundenportalBereich .kunden-element-aktionen .kunden-element-duplizieren { grid-column:1 / -1; }
}


#kundenEntwurfStatus {
  max-width: 55%;
  text-align: right;
  line-height: 1.35;
}
@media (max-width: 520px) {
  .kunden-fortschritt-kopf { align-items: flex-start; }
  #kundenEntwurfStatus { max-width: 60%; }
}


.anfragen-toolbar {
  display:grid;  gap:12px; margin:14px 0;
}
.anfragen-toolbar label { margin-top:0; }
.kundenanfragen-intern-liste {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
}
.kundenanfrage-intern-card {
  background: #10151d;
  border: 1px solid #2b3948;
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  min-height: 245px;
}
.kundenanfrage-intern-card .kundenanfrage-aktionen { margin-top:auto; display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.status-in-bearbeitung { background:#fff4ce !important; color:#7a4d00 !important; }
.status-angebot { background:#e8f1ff !important; color:#174ea6 !important; }
.status-erledigt,.status-übernommen { background:#e6f4ea !important; color:#137333 !important; }
.status-archiviert { background:#eceff3 !important; color:#475467 !important; }
.anfrage-modal { position:fixed; inset:0; z-index:10000; align-items:flex-start; justify-content:center; padding:24px; background:rgba(8,15,28,.76); overflow:auto; }
.anfrage-modal-card { width:min(1050px,100%); margin:auto; padding:20px; border-radius:18px; background:#f4f7fb; color:#172033; box-shadow:0 24px 80px rgba(0,0,0,.35); }
.anfrage-modal-kopf { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
.anfrage-modal-kopf h2 { margin:3px 0 0; color:#172033; }
.anfrage-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.anfrage-detail-panel { margin:0 0 12px; padding:14px; border:1px solid #d8e0e8; border-radius:13px; background:#fff; }
.anfrage-detail-panel h3 { margin-top:0; color:#172033; }
.anfrage-detail-panel p,.anfrage-detail-panel label,.anfrage-detail-panel summary { color:#344054; }
.anfrage-detail-panel textarea,.anfrage-detail-panel select { background:#fff !important; color:#172033 !important; }
.anfrage-elemente-detail { display:grid; gap:8px; }
.anfrage-elemente-detail article { display:grid; gap:3px; padding:10px; border-radius:10px; background:#f6f8fb; border:1px solid #e2e8f0; }
.anfrage-elemente-detail span { color:#475467; }
.anfrage-elemente-detail small { color:#667085; }
.anfrage-modal .kundenanfrage-fotos { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:9px; }
.anfrage-modal .kundenanfrage-fotos img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:9px; border:1px solid #d0d5dd; }
.modal-offen { overflow:hidden; }


.dashboard-grid{grid-template-columns:repeat(auto-fit,minmax(165px,1fr));}
.dashboard-card-warn{border-color:#f0b429;background:linear-gradient(145deg,#fff9e8,#fff);}
.anfragen-toolbar{grid-template-columns:minmax(240px,2fr) repeat(3,minmax(150px,1fr));}
.anfrage-meta-zeile{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:4px 0 8px;color:#475467;font-size:13px}.prioritaet-pill{display:inline-flex;padding:4px 9px;border-radius:999px;font-size:12px;font-weight:800}.prioritaet-niedrig{background:#eef2f6;color:#475467}.prioritaet-normal{background:#e8f1ff;color:#174ea6}.prioritaet-hoch{background:#fff4ce;color:#7a4d00}.prioritaet-dringend{background:#fde8e7;color:#b42318}.detail-action-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.anfrage-chronik{display:grid;gap:8px}.anfrage-chronik article{
  display:grid;gap:10px;padding:9px;border-left:3px solid #1f73b7;background:#f6f8fb;border-radius:7px;
}.anfrage-chronik strong{font-size:12px;color:#475467}.foto-thumb{padding:0!important;margin:0!important;border:0!important;background:none!important;box-shadow:none!important;cursor:zoom-in}.foto-lightbox{position:fixed;inset:0;z-index:20000;align-items:center;justify-content:center;background:rgba(0,0,0,.9);padding:24px}.foto-lightbox img{max-width:95vw;max-height:90vh;object-fit:contain;border-radius:8px}.foto-lightbox button{position:absolute;right:18px;top:12px;width:44px;height:44px;padding:0;font-size:32px;border-radius:50%}@media(max-width:900px){.anfragen-toolbar{grid-template-columns:1fr 1fr}}@media(max-width:600px){
  .kunden-listen-kopf { align-items:flex-start; flex-direction:column; gap:1px; }
  .kunden-listen-kopf span { text-align:left; font-size:11px; }
  .kunden-element-card { grid-template-columns:1fr; }
  .kunden-element-aktionen { min-width:0; grid-template-columns:1fr 1fr 1fr; }
  .kunden-element-aktionen .kunden-element-duplizieren { grid-column:auto; }
.anfragen-toolbar,.detail-action-row{grid-template-columns:1fr}.anfrage-chronik article{grid-template-columns:1fr;gap:3px}}


.kunden-formular-gruppe {
  margin: 14px 0;
  padding: 15px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 16px;
  background: rgba(10,13,19,0.48);
}

.kunden-formular-gruppe-bauvorhaben {
  border-color: rgba(211,72,72,0.5);
  background: linear-gradient(180deg, rgba(139,30,30,0.13), rgba(10,13,19,0.56));
}

.kunden-formular-gruppe-kopf {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}

.kunden-formular-gruppe-kopf strong {
  color: #fff;
  font-size: 16px;
}

.kunden-formular-gruppe-kopf span {
  color: #b9c3d3;
  font-size: 13px;
  line-height: 1.45;
}

#kundenportalBereich .kunden-feld-zweck {
  display: block;
  margin: 5px 2px 11px;
  color: #536b7a;
  font-size: 12px;
  line-height: 1.4;
}

/* ===============================
   V8.2.1 – Kundenportal-Priorität & Formularfix
   =============================== */
.portal-grid-priorisiert {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 12px;
}


#startBereich .portal-card-kunde strong {
  color: var(--hu-blue-dark);
}

.portal-card-kicker {
  width: fit-content;
  margin-bottom: 10px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #e3f2fc;
  color: var(--hu-blue-dark) !important;
  font-size: 11px !important;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#startBereich .portal-card-intern {
  width: 188px;
  min-height: 0;
  align-self: end;
  padding: 14px;
  opacity: .82;
  box-shadow: none;
}


#kundenportalBereich input.feld-fehler {
  border-color: #c93434 !important;
  box-shadow: 0 0 0 3px rgba(201, 52, 52, .14) !important;
}


/* =========================================
   V8.3 – Kundenportal-Hero & Grafikblock 1
   ========================================= */
#startBereich.start-hero {
  min-height: calc(100svh - 150px);
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 4vw, 30px);
}

#startBereich .portal-grid-priorisiert {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
}

#startBereich .portal-card-kunde {
  flex: 1;
  min-height: clamp(330px, 52svh, 520px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(24px, 6vw, 42px);
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 78% 20%, rgba(46, 143, 205, .34), transparent 33%),
    linear-gradient(145deg, rgba(34, 132, 197, .28), rgba(18, 22, 32, .96) 62%);
  border: 1px solid rgba(73, 166, 226, .55);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255,255,255,.08);
}

#startBereich .portal-card-kunde::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -48px;
  top: -58px;
  background: url("bilder/portal/fenster.svg") center / contain no-repeat;
  opacity: .20;
  filter: saturate(.9);
  pointer-events: none;
}

#startBereich .portal-card-kunde strong {
  font-size: clamp(30px, 8vw, 48px);
  line-height: 1.02;
  letter-spacing: -.8px;
  margin-bottom: 12px;
  position: relative;
}

#startBereich .portal-card-kunde > span:last-child {
  font-size: clamp(15px, 3.7vw, 19px);
  line-height: 1.45;
  max-width: 470px;
  position: relative;
}

#startBereich .portal-card-kicker {
  width: fit-content;
  padding: 7px 11px;
  margin-bottom: 13px;
  border-radius: 999px;
  font-size: 12px !important;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #dff3ff !important;
  background: rgba(37, 133, 196, .28);
  border: 1px solid rgba(95, 190, 246, .42);
  position: relative;
}

#startBereich .portal-card-intern {
  align-self: flex-end;
  width: auto;
  min-width: 0;
  padding: 7px 11px;
  margin: 0;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: none;
  opacity: .50;
}

#startBereich .portal-card-intern strong {
  font-weight: 600;

  margin: 0;
}

#startBereich .portal-card-intern span {
  font-size: 11px;
  display: none;
}

#startBereich .portal-card-intern:hover,
#startBereich .portal-card-intern:focus-visible {
  transform: none;
}

.bauvorhaben-info {
  margin: 5px 2px 0 !important;
  padding: 0 !important;
  font-size: 9.5px !important;
  line-height: 1.35 !important;
  color: rgba(185, 195, 211, .60) !important;
  background: transparent !important;
  border: 0 !important;
}

.bauvorhaben-info span {
  color: var(--hu-blue);
  font-weight: 700;
  font-size: 9px !important;
  opacity: .65;
}

.portal-illustration {
  object-fit: contain;
  padding: 10px;
  transition: transform .18s ease, filter .18s ease;
}

.element-kachel:hover .portal-illustration,
.element-kachel:focus-visible .portal-illustration {
  transform: scale(1.035);
  filter: drop-shadow(0 10px 20px rgba(37, 133, 196, .18));
}

.element-kachel:active {
  border-color: rgba(69, 171, 232, .92);
  box-shadow: 0 0 0 3px rgba(37, 133, 196, .18), 0 12px 26px rgba(0,0,0,.30);
}

@media (max-width: 600px) {
  body {
    padding: 7px;
  }

  .container {
    padding-bottom: 100px;
  }

  h1 {
    font-size: 22px;
    margin-bottom: 14px;
  }

  h2 {
    font-size: 18px;
  }

  h3 {
    font-size: 15px;
  }

  input,
  select,
  textarea,
  button {
    font-size: 15px;
    padding: 11px;
  }

  section,
  #liste > div,
  #zusammenfassung > div,
  #projektListe > div,
  .compact-panel {
    padding: 12px;
    border-radius: 15px;
  }

  .grid-3 {
    grid-template-columns: 1fr 1fr;
  }

  .grid-2 {
    grid-template-columns: 1fr 1fr;
  }

  .quick-buttons {
    gap: 6px;
  }

  .quick-buttons button {
    font-size: 12px;
    padding: 8px 9px;
  }

  #liste button,
  #projektListe button {
    font-size: 12px;
    padding: 8px 9px;
  }

  .projekt-toolbar {
    grid-template-columns: 1fr;
  }

  .projekt-toolbar-aktionen,
  .kunden-fortschritt-kopf {
    flex-direction: column;
  }


  .kunden-element-bearbeiten,
  .kunden-element-loeschen {
    flex: 1;
  }

  .start-hero { padding: 18px; }
  .portal-illustration { height: 125px; }
  .password-row { grid-template-columns: 1fr; }
  .password-toggle { width: 100%; }

  .section-heading-row {
    flex-direction: column;
  }

  .button-inline {
    width: 100%;
  }

  body {
    background: var(--hu-bg);
    padding: max(6px, env(safe-area-inset-top)) 6px max(10px, env(safe-area-inset-bottom));
  }

  .container {
    max-width: 100%;
    padding-bottom: 24px;
  }


  .logo {
    width: 104px;
    max-width: 104px;
  }

  body > .container > h1 {
    margin: 0 4px 7px;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    color: #536275;
  }

  #startBereich,
  #kundenportalBereich,
  #loginBereich {
    padding: 13px;
    border-radius: 18px;
    margin-bottom: 8px;
  }

  #startBereich h2,
  #kundenportalBereich h2,
  #loginBereich h2 {
    margin: 7px 0 3px;
    font-size: 21px;
    line-height: 1.18;
  }

  #kundenportalBereich h3 {
    margin: 11px 0 8px;
    font-size: 16px;
  }

  #startBereich .startText,
  #kundenportalBereich .startText,
  #loginBereich .startText {
    margin: 3px 0 9px;
    font-size: 13px;
    line-height: 1.4;
  }

  #kundenportalBereich label,
  #loginBereich label {
    margin: 8px 0 4px;
    font-size: 12px;
  }

  #kundenportalBereich input,
  #kundenportalBereich select,
  #kundenportalBereich textarea,
  #loginBereich input {
    min-height: 42px;
    padding: 9px 10px;
    border-radius: 10px;
    font-size: 14px;
  }

  #kundenportalBereich textarea { min-height: 68px; }

  #startBereich button,
  #kundenportalBereich button,
  #loginBereich button {
    min-height: 42px;
    padding: 10px 12px;
    margin-top: 8px;
    border-radius: 11px;
    font-size: 14px;
  }

  .portal-grid {
    gap: 8px;
    margin-top: 11px;
  }

  #startBereich .portal-card {
    min-height: 0;
    padding: 12px 13px;
    border-radius: 13px;
  }

  #startBereich .portal-card strong { font-size: 15px; margin-bottom: 2px; }
  #startBereich .portal-card span { font-size: 12px; }

  #kundenFortschritt {
    display: none;
  }

  .kunden-fortschritt-kopf {
    margin-top: 9px;
    padding: 0 1px;
    font-size: 11px;
  }

  #kundenEntwurfStatus {
    max-width: 52%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .kunden-fortschritt-balken {
    height: 5px;
    margin: 5px 0 9px;
  }

  .element-kachel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0;
  }

  #kundenportalBereich .element-kachel {
    min-height: 0;
    padding: 8px;
    border-radius: 13px;
    text-align: left;
  }

  #kundenportalBereich .element-bild {
    height: 78px;
    margin: 0 0 7px;
    border-radius: 10px;
    object-fit: contain;
  }

  #kundenportalBereich .element-kachel strong,
  #kundenportalBereich .element-kachel h4 {
    margin: 0;
    font-size: 13px;
    line-height: 1.2;
  }

  #kundenportalBereich .element-kachel p {
    display: -webkit-box;
    margin: 4px 0 0;
    overflow: hidden;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 11px;
    line-height: 1.3;
  }

  .mess-anleitung-gross,
  .mess-anleitung-klein,
  .kunden-zusammenfassung {
    padding: 10px;
    margin: 8px 0;
    border-radius: 12px;
  }

  .mess-bild,
  .mess-bild.klein {
    height: 92px;
    margin-bottom: 8px;
  }

  .kunden-element-card {
    padding: 9px;
    gap: 7px;
    border-radius: 10px;
  }

  .kunden-element-card p { margin: 3px 0; font-size: 12px; }
  .kunden-element-card small { font-size: 10px; }
  .kunden-element-aktionen {
  width: 100%;
  gap: 5px;
}
  .kunden-element-aktionen button { min-height: 34px !important; padding: 7px !important; font-size: 11px !important; }

  .consent-row {
    padding: 9px;
    gap: 8px;
    font-size: 11px;
  }

  .rechtliches-kompakt { margin-top: 4px; }

  #kundenportalBereich #kundenAbschlussText,
  #kundenportalBereich #kundenAbschlussText[readonly],
  #kundenportalBereich .kunden-abschluss-text {
    min-height: 150px;
    height: 165px;
    max-height: 220px;
    font-size: 12px;
    padding: 10px;
  }

  #kundenportalBereich .kunden-element-aktionen {
    grid-template-columns: 1fr 1fr;
  }

  #kundenportalBereich .kunden-element-aktionen .kunden-element-duplizieren {
    grid-column: 1 / -1;
  }

  #kundenportalBereich .kunden-listen-kopf { align-items:stretch; }
  #kundenportalBereich .kunden-element-hinzufuegen { width:100%; margin-top:7px; }
  #kundenportalBereich .kunden-element-card { grid-template-columns:1fr; }
  #kundenportalBereich .kunden-element-aktionen { grid-template-columns:repeat(3, 1fr); }
  #kundenportalBereich .kunden-element-aktionen .kunden-element-duplizieren { grid-column:auto; }
  #kundenportalBereich .kunden-schritt-aktionen { grid-template-columns:1fr; }
  #kundenportalBereich .kunden-review-kontakt { grid-template-columns:1fr; }
  #kundenportalBereich .kunden-review-adresse { grid-column:auto; }
  #kundenportalBereich .kunden-review-kopf { align-items:flex-start; flex-direction:column; gap:2px; }
  #kundenportalBereich #kundenAbschlussText,
  #kundenportalBereich #kundenAbschlussText[readonly],
  #kundenportalBereich .kunden-abschluss-text { min-height:130px; height:140px; font-size:11px; }

  .logoBox {
  justify-content: flex-start;
  margin: 2px 0 4px;
  padding-left: 4px;
  margin-top: 4px;
  margin-bottom: 5px;
}
  .logo { max-width: 172px; }
  h1 { font-size: 16px; margin: 4px 0 10px; opacity: .78; }
  #startBereich.start-hero { min-height: calc(100svh - 105px); }
  #startBereich .portal-card-kunde { min-height: 58svh; }
}


/* =========================================
   V8.3.1 – Fenster-CAD-System & Intern-Bugfix
   ========================================= */

/* Der Mitarbeiterzugang bleibt dezent, aber auf Laptop und Handy sicher sichtbar. */
#startBereich .portal-card-intern {
  display: flex !important;
  visibility: visible !important;
  opacity: .82 !important;
  position: relative;
  z-index: 5;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 9px 14px;
  color: #dce6f2;
  background: rgba(14, 19, 27, .82);
  border: 1px solid rgba(115, 149, 176, .34);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#startBereich .portal-card-intern strong {
  display: inline-block;
  color: #e7edf5;
  font-size: 12px;
  line-height: 1.2;
}

#startBereich .portal-card-intern:hover,
#startBereich .portal-card-intern:focus-visible {
  opacity: 1 !important;
  border-color: rgba(77, 167, 225, .72);
  background: rgba(24, 38, 51, .96);
}

/* Einheitliche technische Darstellung der Untertypen. */
#kundenTypAuswahl .element-kachel {
  min-height: 300px;
  justify-content: flex-start;
}

#kundenTypAuswahl .typ-illustration {
  width: 100%;
  height: 176px;
  object-fit: contain;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(239, 248, 253, .98), rgba(209, 229, 241, .94));
  border: 1px solid rgba(65, 132, 174, .32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 10px 22px rgba(0,0,0,.16);
}

#kundenTypAuswahl .element-kachel h4 {
  margin: 2px 0 7px;
  color: #f7f9fc;
  font-size: 18px;
}

#kundenTypAuswahl .element-kachel p {
  margin: 0;
  color: #b8c3d2;
  line-height: 1.45;
  font-size: 14px;
}

#kundenSchritt5 .mess-bild,
#kundenSchritt6 .mess-bild {
  object-fit: contain;
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(239, 248, 253, .98), rgba(209, 229, 241, .94));
  border: 1px solid rgba(65, 132, 174, .32);
}


/* =========================================
   V8.3.2 – sichtbarer Intern-Zugang + robuste Fenster-CADs
   ========================================= */
#startBereich { position: relative; }

#kundenTypAuswahl .typ-cad-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#kundenTypAuswahl .typ-cad-inline svg,
.mess-cad-inline svg {
  display: block;
  width: 100%;
  height: 100%;
}


#kundenSchritt4 .element-kachel h4,
#kundenSchritt4 .element-kachel strong,
#kundenSchritt4 .element-kachel p,
#kundenSchritt4 .element-kachel span {
  color: #111820 !important;
}


#kundenSchritt4 .element-kachel h4 {
  width: 100%;

  padding: 0 8px;
  color: #111820 !important;


  font-weight: 800;
  text-align: center;
  overflow-wrap: anywhere;
  hyphens: auto;
}

#kundenSchritt4 .element-kachel p {
  color: #53616d !important;


  font-weight: 600;
  text-align: center;
}

#kundenSchritt4 .typ-cad-inline svg {
  display: block;
  width: 100%;
  height: 100%;
}


#kundenSchritt4 .element-kachel {
  text-align: center;
  overflow: hidden;
  justify-content: flex-start;
  min-height: 0;
  padding: 14px;
  gap: 0;
}

#kundenSchritt4 .element-bild {
  flex: 0 0 auto;
  height: 164px;
  margin-bottom: 10px;
  border-radius: 15px;
}

#kundenSchritt4 .element-kachel h4 {
  margin: 2px auto 7px;
  min-height: 0;
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.15;
}

#kundenSchritt4 .element-kachel p {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: auto;
  max-width: calc(100% - 8px);
  min-height: 30px;
  margin: 0 auto 2px;
  padding: 6px 11px;
  border: 1px solid rgba(61, 125, 165, .20);
  border-radius: 10px;
  background: rgba(225, 239, 247, .72);
  font-size: 12px;
  line-height: 1.25;
  white-space: normal;
  overflow: visible;
}


#kundenSchritt4 .element-bild.typ-cad-inline {
  padding: 4px;
  background: linear-gradient(180deg, rgba(247,252,255,.99), rgba(220,238,247,.96));
}
#kundenSchritt4 .element-kachel:hover .element-bild.typ-cad-inline svg {
  transform: scale(1.018);
}
#kundenSchritt4 .element-bild.typ-cad-inline svg {
  transition: transform .18s ease;
}
@media (max-width:650px){
  #kundenSchritt4 .element-bild { height: 154px; }
}


.kunden-element-badges span:first-child { font-weight: 700; }


.kunden-mengensteuerung {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid #b9cfde;
  border-radius: 10px;
  overflow: hidden;
  background: #f7fbfe;
  min-height: 42px;
}
.kunden-mengensteuerung button {
  min-width: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: #e8f3fa;
  color: #175f91;
  font-size: 21px;
  font-weight: 800;
}
.kunden-mengensteuerung button:hover { background: #d9ebf6; }
.kunden-menge-feld {
  display: grid;
  grid-template-columns: auto 54px;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 3px 8px;
  color: #354b59;
  font-size: 12px;
  font-weight: 700;
}
.kunden-menge-feld input {
  width: 54px;
  min-width: 54px;
  margin: 0;
  padding: 6px 4px;
  border: 0;
  border-radius: 6px;
  background: #fff;
  text-align: center;
  font-weight: 800;
  color: #142936;
}


.kunden-toast {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 10000;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 18px;
  border-radius: 999px;
  background: #17324d;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 12px 32px rgba(23, 50, 77, .25);
  opacity: 0;
  transform: translate(-50%, 18px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.kunden-toast.ist-sichtbar { opacity: 1; transform: translate(-50%, 0); }
.kunden-toast.ist-erfolg { background: #176b45; }
.kunden-toast.ist-fehler { background: #a72b2b; }


.intern-start-shell{max-width:980px;margin:28px auto;padding:24px;border:1px solid #dbe4ec;border-radius:18px;background:#fff;box-shadow:0 12px 34px rgba(23,32,51,.08)}
.intern-start-kopf{text-align:center;margin:12px 0 26px}
.intern-start-kopf h2{margin:.35rem 0 0}
.intern-hauptauswahl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.intern-auswahlkarte{min-height:180px;padding:28px;border-radius:16px;text-align:left;display:flex;flex-direction:column;justify-content:center;gap:10px}
.intern-auswahlkarte strong{font-size:1.35rem}
.intern-auswahlkarte span{font-size:.98rem;line-height:1.45;opacity:.9}


.element-piktogramm {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  object-fit: contain;
  padding: 4px;
  border: 1px solid #dce7ef;
  border-radius: 9px;
  background: #f7fafc;
}
#kundenportalBereich .kunden-element-kopf { gap: 8px; }
#kundenportalBereich .kunden-element-mass,
#kundenportalBereich .kunden-element-badges,
#kundenportalBereich .kunden-element-notiz { margin-left: 76px; }

#kundenportalBereich .kunden-element-aktionen {
  min-width: 0;
  grid-template-columns: 1fr 1fr;
  align-content: center;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}
#kundenportalBereich .kunden-mengensteuerung {
  border-radius: 8px;
}
#kundenportalBereich .kunden-mengensteuerung button {
  min-height: 30px !important;
}
#kundenportalBereich .kunden-menge-feld {
  gap: 4px;
}
#kundenportalBereich .kunden-menge-feld input {
  font-size: 11px;
}
#kundenportalBereich .kunden-element-bearbeiten,
#kundenportalBereich .kunden-element-loeschen {
  width: auto !important;
  min-height: 30px !important;
  padding: 5px 8px !important;
  font-size: 10px !important;
  border-radius: 7px !important;
}
.interne-element-ueberschrift {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 7px;
}
.interne-element-ueberschrift .element-piktogramm {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
}
.kundenanfrage-aktionen button:disabled { opacity: .65; cursor: wait; }


#appBereich .intern-start-shell,
#appBereich #kundenanfragenAuswahlBereich,
#appBereich #kundenanfragenInternBereich,
#appBereich .app-topbar,
#appBereich .dashboard-shell,
#appBereich .dashboard-card,
#appBereich .dashboard-panel,
#appBereich .anfrage-modal-card {
  background: #171a21;
  border-color: #2b2f39;
  color: #f2f4f8;
  box-shadow: 0 8px 22px rgba(0,0,0,.30);
}
#appBereich .intern-start-kopf h2,
#appBereich .section-heading-row h2,
#appBereich .app-topbar h2,
#appBereich .dashboard-panel h3,
#appBereich .anfrage-modal-card h2,
#appBereich .anfrage-modal-card h3 { color: #fff; }
#appBereich .hero-kicker {
  color: #e88c8c;
  letter-spacing: .08em;
  font-weight: 800;
}
#appBereich .intern-auswahlkarte {
  background: linear-gradient(135deg, #8b1e1e, #c43a3a);
  color: #fff;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 22px rgba(196,58,58,.20);
}
#appBereich .intern-auswahlkarte strong,
#appBereich .intern-auswahlkarte span {
  color: #fff;
  opacity: 1;
}
#appBereich .startText,
#appBereich .dashboard-card span,
#appBereich .dashboard-card small,
#appBereich .anfrage-meta,
#appBereich .anfrage-detail-panel p { color: #b9c3d3; }
#appBereich .anfragen-toolbar {
  background: #11151d;
  border: 1px solid #2a2f3a;
  border-radius: 14px;
  padding: 12px;
}
#appBereich .anfragen-toolbar label { color: #d4dbe6; }
#appBereich .anfragen-toolbar input,
#appBereich .anfragen-toolbar select,
#appBereich .anfrage-modal-card input,
#appBereich .anfrage-modal-card select,
#appBereich .anfrage-modal-card textarea {
  background: #10131a;
  border-color: #343b49;
  color: #fff;
}
#appBereich .kundenanfrage-karte,
#appBereich .anfrage-detail-panel {
  background: #11151d;
  border: 1px solid #2a2f3a;
  color: #f2f4f8;
}
#appBereich .kundenanfrage-karte strong,
#appBereich .kundenanfrage-karte h3,
#appBereich .anfrage-detail-panel strong { color: #fff; }
#appBereich .inline-status {
  color: #dbe4ef;
}
#appBereich .button-neutral,
#appBereich .button-secondary {
  background: #252b36;
  color: #fff;
  border: 1px solid #3a4352;
  box-shadow: none;
}
#appBereich .button-neutral:hover,
#appBereich .button-secondary:hover { background: #303846; }
#kundenportalBereich #kundenSchritt7 .button-primary,
#kundenportalBereich #kundenSchritt7 .button-secondary {
  display: block;
}
#kundenportalBereich #kundenSchritt7 .kunden-textvorschau,
#kundenportalBereich #kundenSchritt7 #kundenAbschlussText { display: none !important; }
@media (max-width: 700px) {
  body { padding: max(6px, var(--safe-top)) max(6px, var(--safe-right)) max(10px, var(--safe-bottom)) max(6px, var(--safe-left)); }
  .container { width: 100%; max-width: none; padding-bottom: calc(76px + var(--safe-bottom)); }
  .logoBox { margin: 4px 0 5px; }
  .logo { max-width: 150px; }
  h1 { font-size: clamp(19px, 5.2vw, 23px); margin: 5px 0 10px; line-height: 1.15; }
  h2 { font-size: 18px; margin: 10px 0 8px; }
  h3 { font-size: 16px; margin: 12px 0 8px; }
  p { margin-top: 7px; margin-bottom: 9px; }

  section, #liste > div, #zusammenfassung > div, #projektListe > div, .compact-panel {
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 15px;
    box-shadow: 0 5px 16px rgba(0,0,0,.24);
  }
  .start-hero { padding: 16px 13px; }
  .startText { font-size: 13.5px; line-height: 1.45; }
  .hero-kicker { font-size: 10px; letter-spacing: .11em; }

  input, select, textarea { font-size: 16px; padding: 11px 12px; border-radius: 11px; }
  label { margin: 8px 0 4px; font-size: 12.5px; }
  button { font-size: 14px; padding: 11px 12px; margin-top: 8px; border-radius: 12px; }

  .portal-grid { gap: 9px; margin-top: 12px; }
  .portal-card { min-height: 0; padding: 14px; }
  .portal-card strong { font-size: 16px; margin-bottom: 3px; }
  .portal-card span { font-size: 12.5px; line-height: 1.35; }

  .kunden-fortschritt-kopf { font-size: 11px; gap: 8px; }
  .kunden-fortschritt { display: flex; overflow-x: auto; gap: 6px; padding: 7px 1px 5px; scrollbar-width: none; scroll-snap-type: x proximity; }
  .kunden-fortschritt::-webkit-scrollbar { display: none; }
  .kunden-fortschritt .step { flex: 0 0 auto; min-width: auto; padding: 7px 9px; font-size: 10.5px; border-radius: 999px; scroll-snap-align: start; }

  .element-kachel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 11px 0; }
  .element-kachel { min-height: 0; padding: 10px; border-radius: 15px; gap: 5px; }
  .element-kachel h4, .element-kachel strong { font-size: 13px; margin: 2px 0; line-height: 1.25; }
  .element-kachel p { font-size: 11px; line-height: 1.3; margin: 2px 0; }
  .element-bild { height: 92px; margin-bottom: 7px; border-radius: 12px; }
  .mess-bild { height: 132px; object-fit: contain; }
  .mess-bild.klein { height: 105px; }
  .mess-layout { display: block; }
  .mess-anleitung-klein { margin-bottom: 10px; padding: 10px; }
  .mess-anleitung-klein p { display: inline-block; margin: 3px 10px 3px 0; font-size: 12px; }

  .kunden-element-card { gap: 8px; padding: 11px; }
  .kunden-element-card p, .kunden-element-card small { font-size: 12px; line-height: 1.4; }
  .kunden-element-aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; width: 100%; }
  .kunden-element-aktionen button { width: 100%; margin: 0; }
  .kunden-foto-vorschau { grid-template-columns: 1fr; gap: 7px; }

  .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dashboard-card { padding: 11px; min-height: 100px; }
  .dashboard-card strong { font-size: 25px; }
  .dashboard-card span, .dashboard-card small { font-size: 11px; line-height: 1.3; }
  .dashboard-columns { grid-template-columns: 1fr; gap: 9px; }
  .app-topbar { align-items: flex-start; gap: 8px; }
  .app-topbar .button-inline { width: auto; min-width: 0; padding: 9px 10px; }

  .form-grid.grid-2, .form-grid.grid-3, .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .quick-buttons { gap: 5px; }
  .quick-buttons button { min-height: 38px; font-size: 11px; padding: 7px 8px; }
  .sticky-save { bottom: calc(6px + var(--safe-bottom)); padding: 6px; border-radius: 14px; }
  #mailAusgabe { min-height: 260px; font-size: 12px; }

  .auth-card { padding: 15px 13px; }
  .password-row { grid-template-columns: 1fr auto; gap: 6px; }
  .password-toggle { width: auto; min-width: 82px; margin: 0; }
  details { padding: 9px; }
  .diagnose-ausgabe { font-size: 10px; max-height: 210px; overflow: auto; }

  #appBereich .intern-start-shell { margin: 16px auto; }
  #appBereich .anfragen-toolbar { padding: 10px; }
}

/* V8.62.4 – kompakte Kundenpositionen und Kundenanfrage als eigener Arbeitsschritt. */
#kundenportalBereich .kunden-element-card,
#kundenportalBereich .kunden-element-details,
#kundenportalBereich .kunden-element-details > summary,
#kundenportalBereich .kunden-element-inhalt {
  background: #fff !important;
  color: #243746 !important;
}
#kundenportalBereich .kunden-element-kopf strong {
  color: #17354a !important;
  font-size: 16px !important;
}
#kundenportalBereich .kunden-element-kopf > div > span {
  color: #526b7c !important;
  font-size: 13px !important;
  font-weight: 700;
}
#kundenportalBereich .kunden-element-details-toggle {
  color: #176f9b !important;
}

#appBereich .anfrage-modal {
  align-items: flex-start !important;
  padding: 0 !important;
  background: #edf3f7 !important;
  backdrop-filter: none !important;
  overflow-y: auto;
}
#appBereich .anfrage-modal-card {
  width: 100% !important;
  max-width: 1280px !important;
  min-height: 100vh;
  max-height: none !important;
  margin: 0 auto;
  padding: clamp(16px, 3vw, 32px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: #f8fbfd !important;
}
#appBereich .anfrage-modal-kopf {
  position: sticky;
  top: 0;
  z-index: 8;
  margin: calc(-1 * clamp(16px, 3vw, 32px)) calc(-1 * clamp(16px, 3vw, 32px)) 18px;
  padding: 16px clamp(16px, 3vw, 32px);
  border-bottom: 1px solid var(--hu-line);
  background: rgba(248,251,253,.97);
}
#appBereich .anfrage-detail-tabs {
  position: static;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}
#appBereich .anfrage-detail-tab {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  font-size: 13px;
  text-align: center;
}
@media (max-width: 620px) {
  #appBereich .anfrage-modal-kopf { align-items: stretch; }
  #appBereich .anfrage-modal-kopf button { width: 100% !important; }
  #appBereich .anfrage-detail-tabs { grid-template-columns: 1fr; }
  #appBereich .anfrage-detail-tab { min-height: 42px; }
}

/* ============================================================
   V8.62.0 – Gemeinsamer Sanierungsvorgang
   ============================================================ */
.kunden-leistungswahl {
  margin: 22px 0;
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid #d2e0e8;
  border-radius: 24px;
  background: linear-gradient(145deg, #fff, #f4f9fc);
  box-shadow: 0 16px 40px rgba(36, 74, 99, .09);
}
.kunden-leistungswahl-kopf h3 { margin: 8px 0; }
.kunden-leistungswahl-kopf p { margin: 0 0 18px; color: #587181; }
.kunden-leistungsraster { display: block; }
.kunden-zusatzleistungen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.kunden-leistungskarte {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 2px 12px;
  align-items: center;
  min-height: 112px;
  margin: 0 !important;
  padding: 16px !important;
  text-align: left !important;
  color: #29485c !important;
  background: #fff !important;
  border: 2px solid #d6e3eb !important;
  box-shadow: none !important;
}
.kunden-leistungskarte > span:first-child { grid-row: 1 / 3; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #eaf5fb; color: #187daf; font-size: 23px; }
.kunden-leistungskarte strong { font-size: 16px; }
.kunden-leistungskarte small { color: #667c89; font-weight: 600; line-height: 1.35; }
.kunden-leistungskarte.ist-aktiv { border-color: #1c8ac0 !important; background: #edf8fd !important; box-shadow: 0 7px 18px rgba(28, 138, 192, .12) !important; }
.kunden-leistungskarte.ist-aktiv > span:first-child { background: #1c8ac0; color: #fff; }
.kunden-leistungskarte .kunden-auswahlstatus { display: none; grid-column: 2; align-items: center; gap: 5px; width: max-content; margin-top: 6px; padding: 4px 9px; border-radius: 999px; background: #dff5e7; color: #17643e; font-size: 12px; font-weight: 900; }
.kunden-leistungskarte.ist-aktiv .kunden-auswahlstatus { display: inline-flex; }
.kunden-leistungskarte-haupt {
  width: 100%;
  min-height: 138px;
  padding: clamp(18px, 3vw, 27px) !important;
  border-color: #9fcde3 !important;
  background: linear-gradient(135deg, #f3fbff, #e8f6fc) !important;
}
.kunden-leistungskarte-haupt strong { font-size: clamp(19px, 2.4vw, 25px); color: #174f70; }
.kunden-leistungskarte-haupt small { font-size: 14px; max-width: 760px; }
.kunden-pv-zusatz { margin-top: 16px; padding-top: 14px; border-top: 1px dashed #b9ccd7; }
.kunden-pv-kicker { display: inline-flex; margin: 0 0 8px 2px; padding: 4px 8px; border-radius: 999px; background: #fff4cf; color: #765b08; font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.kunden-leistungskarte-pv { width: 100%; min-height: 96px; border-color: #dccf9d !important; background: linear-gradient(135deg, #fffdf5, #fff8de) !important; }
.kunden-leistungskarte-pv > span:first-child { background: #fff0b8; color: #806108; }
.kunden-leistungskarte-pv.ist-aktiv { border-color: #c89c19 !important; background: #fff7d9 !important; box-shadow: 0 7px 18px rgba(156, 116, 10, .12) !important; }
.kunden-leistungskarte-pv.ist-aktiv > span:first-child { background: #aa7b00; color: #fff; }
.kunden-leistungsraster[hidden], .kunden-bereichsuebersicht[hidden], .kunden-teilanfrage-fertig[hidden] { display: none !important; }
.kunden-bereichsuebersicht { margin-top: 12px; }
.kunden-bereichsstatus-liste { display: grid; gap: 12px; }
.kunden-bereichsstatus-karte { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 15px; border: 1px solid #d7e4eb; border-left: 5px solid #9bb1bf; border-radius: 14px; background: #fff; }
.kunden-bereichsstatus-karte.status-in-bearbeitung { border-left-color: #c47b13; background: #fffaf1; }
.kunden-bereichsstatus-karte.status-fertig { border-left-color: #248055; background: #f2faf6; }
.kunden-bereichsstatus-symbol { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #eaf4f9; color: #1d6d96; font-size: 22px; }
.kunden-bereichsstatus-karte > div { display: grid; gap: 4px; }
.kunden-bereichsstatus-karte > div > strong { color: #183f56; }
.kunden-bereichsstatus-text { color: #526d7e; font-size: 13px; font-weight: 800; }
.kunden-bereichsstatus-karte.status-fertig .kunden-bereichsstatus-text { color: #1f704b; }
.kunden-bereichsstatus-karte button { width: auto; min-width: 150px; min-height: 46px; margin: 0; padding: 10px 14px; }
#kundenLeistungswahl.ist-bereich-aktiv > .kunden-leistungswahl-kopf,
#kundenLeistungswahl.ist-bereich-aktiv > .kunden-leistungsraster,
#kundenLeistungswahl.ist-bereich-aktiv > .kunden-verglasung-start,
#kundenLeistungswahl.ist-bereich-aktiv > .kunden-bereichsuebersicht,
#kundenLeistungswahl.ist-uebersicht > .kunden-leistungswahl-kopf { display: none !important; }
.kunden-teilanfrage-fertig { width: 100%; min-height: 50px; margin-top: 18px; }
.kunden-beratungsdetails { margin: 18px 0 4px; padding: 18px; border: 1px solid #d6e3eb; border-radius: 17px; background: #fff; }
.kunden-beratungsdetails[hidden], .kunden-beratungsbereich[hidden] { display: none !important; }
#kundenLeistungswahl .kunden-verglasung-start[hidden] { display: none !important; }
.kunden-beratungsdetails-kopf h4 { margin: 0 0 4px; }
.kunden-beratungsdetails-kopf p { margin: 0 0 12px; color: #607987; }
.kunden-beratungsbereiche { display: grid; gap: 12px; }
.kunden-beratungsbereich { padding: 15px; border: 1px solid #d7e5ed; border-left: 4px solid #2587b7; border-radius: 14px; background: #f8fcfe; }
.kunden-beratungsbereich h4 { margin: 0 0 8px; color: #164f70; }
.kunden-beratungsdetails label { display: block; margin-top: 12px; font-weight: 800; color: #29485c; }
.kunden-beratungsbereich label { margin-top: 0; }
.kunden-beratung-kontakt { padding-top: 4px; border-top: 1px solid #e2ebf0; }
.kunden-beratungsdetails textarea, .kunden-beratungsdetails select { width: 100%; margin-top: 6px; }
.sanierungsbereich-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0; }
.sanierungsbereich-badge { padding: 5px 9px; border-radius: 999px; background: #e9f5fb; color: #176f9b; font-size: 12px; font-weight: 800; }
.kunden-bereiche-aendern { width: auto !important; min-height: 31px !important; margin: 0 0 0 auto !important; padding: 5px 10px !important; border-radius: 999px !important; background: #fff !important; border: 1px solid #bad4e1 !important; color: #176f9b !important; box-shadow: none !important; font-size: 12px !important; }
.kunden-element-details { min-width: 0; }
.kunden-element-details > summary { list-style: none; cursor: pointer; border-radius: 12px; }
.kunden-element-details > summary::-webkit-details-marker { display: none; }
.kunden-element-details > summary:focus-visible { outline: 3px solid rgba(28, 138, 192, .28); outline-offset: 4px; }
.kunden-element-badges-kompakt { margin-top: 7px; }
.kunden-element-details-toggle { display: inline-flex; margin: 10px 0 0 38px; color: #1876a4; font-size: 12px; font-weight: 800; }
.kunden-element-details-toggle::after { content: "⌄"; margin-left: 5px; }
.kunden-element-details[open] .kunden-element-details-toggle::after { content: "⌃"; }
.kunden-element-details .details-offen, .kunden-element-details[open] .details-geschlossen { display: none; }
.kunden-element-details[open] .details-offen { display: inline; }
.kunden-element-mehrdetails { margin: 12px 0 0 38px; padding: 12px; border: 1px solid #dce7ed; border-radius: 12px; background: #f8fbfd; }
.kunden-element-mehrdetails .kunden-element-badges { margin-left: 0 !important; }
.kunden-element-mehrdetails p { margin: 7px 0 0; color: #566f7e; }
.gemeinsamer-vorgang-hinweis { display: flex; flex-direction: column; gap: 2px; margin: 10px 0; padding: 9px 11px; border-left: 4px solid #2587b7; border-radius: 8px; background: #eef8fc; color: #234c64; }
.gemeinsamer-vorgang-hinweis span { font-size: 12px; color: #5b7382; }
.sanierungs-anliegen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.sanierungs-anliegen-grid article { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding: 14px; border: 1px solid #d8e4eb; border-radius: 13px; background: #f8fbfd; }
.sanierungs-anliegen-grid article strong { color: #194a67; }
.sanierungs-anliegen-grid article p { margin: 4px 0 0; color: #526d7e; white-space: pre-wrap; }
.sanierungs-anliegen-grid article small { display: block; margin-top: 6px; color: #607889; }
.sanierungs-partnerlogo { display: block; width: auto; max-width: 150px; height: 36px; margin-top: 8px; object-fit: contain; object-position: left center; }
.sanierungs-teilanfrage-status { display: inline-flex; width: max-content; margin-top: 5px; padding: 3px 8px; border-radius: 999px; background: #e8f7ef; color: #1d7049; font-size: 11px; font-weight: 900; }
.sanierungs-teilanfrage-aktionen { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.sanierungs-teilanfrage-aktionen button { min-height: 42px; margin: 0 !important; }
.sanierungs-anliegen-symbol { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #dff1f9; color: #177aaa; font-size: 20px; }
.sanierungs-kontaktwunsch { padding: 7px 10px; border-radius: 999px; background: #eaf4f9; color: #32647f; font-size: 12px; font-weight: 800; }
@media (max-width: 650px) {
  .kunden-zusatzleistungen { grid-template-columns: 1fr; }
  .kunden-leistungskarte { min-height: 92px; }
  .kunden-leistungskarte-haupt { min-height: 120px; }
  .kunden-element-details-toggle, .kunden-element-mehrdetails { margin-left: 0; }
  .kunden-bereichsstatus-karte { grid-template-columns: 42px minmax(0, 1fr); }
  .kunden-bereichsstatus-karte button { grid-column: 1 / -1; width: 100%; }
}

/* ============================================================
   V8.61.0 – Projektablage, Entwürfe und robuste Aktionsleisten
   ============================================================ */
#kundenportalBereich .kunden-element-aktionen {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 8px !important;
  width: 100% !important;
}
#kundenportalBereich .kunden-mengensteuerung,
#kundenportalBereich .kunden-element-duplizieren {
  grid-column: 1 / -1 !important;
}
#kundenportalBereich .kunden-element-bearbeiten,
#kundenportalBereich .kunden-element-loeschen,
#kundenportalBereich .kunden-element-duplizieren {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  white-space: normal !important;
}

.interne-projektablage {
  margin: 18px 0 24px;
  padding: clamp(16px, 2.5vw, 24px);
  border: 1px solid #cedde7;
  border-radius: 20px;
  background: #f7fafc;
  color: #20394c;
}
.interne-projektablage h3 { margin: 3px 0 4px; color: #17354a; }
.projekt-listen-info {
  padding: 7px 11px;
  border-radius: 999px;
  background: #e8f3fa;
  color: #21698f;
  font-size: 12px;
  font-weight: 800;
}
.projekt-kennzahlen { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.projekt-kennzahlen span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid #d4e2ea;
  border-radius: 10px;
  background: #fff;
  color: #526c7e;
  font-size: 12px;
}
.projekt-kennzahlen strong { color: #176f9f; font-size: 15px; }
.projekt-filterleiste { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, .35fr); gap: 10px; margin-bottom: 12px; }
.projekt-filterleiste input,
.projekt-filterleiste select { margin: 0; background: #fff; }
.interne-projektliste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 12px; }
.interne-projektliste > p { margin: 4px 0; color: #657b8b; }
.interne-projektliste .projekt-card {
  margin: 0 !important;
  padding: 15px !important;
  border: 1px solid #d1e0e8 !important;
  border-radius: 15px !important;
  background: #fff !important;
  color: #294456 !important;
  box-shadow: 0 6px 18px rgba(25, 65, 90, .06) !important;
}
.interne-projektliste .projekt-card strong { color: #19394e !important; }
.interne-projektliste .projekt-card p,
.interne-projektliste .projekt-card small { color: #5c7383 !important; }
.interne-projektliste .projekt-card-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.interne-projektliste .status-badge { flex: 0 0 auto; background: #eaf4fa !important; color: #176d9c !important; }
.interne-projektliste .projekt-card-aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 12px; }
.interne-projektliste .projekt-card-aktionen button { width: 100% !important; margin: 0 !important; min-width: 0; }

.projektstart-gruppe {
  margin: 15px 0;
  padding: clamp(15px, 2.4vw, 22px);
  border: 1px solid #d4e1e9;
  border-radius: 17px;
  background: #f9fbfc;
}
.projektstart-gruppe-kopf { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.projektstart-gruppe-kopf > span {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: #217ead;
  color: #fff;
  font-weight: 900;
}
.projektstart-gruppe-kopf div { display: grid; gap: 2px; }
.projektstart-gruppe-kopf strong { color: #213e52; }
.projektstart-gruppe-kopf small { color: #687f8f; line-height: 1.35; }

#aufmassBereich > h2,
#aufmassBereich #zusammenfassung,
#aufmassBereich #liste { color: #203b4e !important; }
#aufmassBereich #zusammenfassung > div,
#aufmassBereich #liste > div {
  background: #fff !important;
  color: #294558 !important;
  border-color: #d2e0e8 !important;
}
#aufmassBereich #zusammenfassung *,
#aufmassBereich #liste > div * { color: inherit; }

@media (max-width: 700px) {
  .projekt-filterleiste { grid-template-columns: 1fr; }
  .interne-projektablage .section-heading-row { align-items: flex-start; }
  .projekt-listen-info { align-self: flex-start; }
}


.intern-projekt-einfach-kopf {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #dce6ee;
}
.intern-projekt-einfach-kopf h2 {
  margin: 5px 0 4px;
}
.anfragen-toolbar.anfragen-toolbar-einfach {
  grid-template-columns: minmax(220px, 1fr);
  max-width: 720px;
}
.kundenanfrage-aktionen {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}
.kundenanfrage-aktionen button,
#kundenportalBereich .kunden-element-aktionen > button,
#kundenportalBereich .kunden-mengensteuerung {
  min-height: 32px;
  font-size: 12px;
}
.kundenanfrage-aktionen button,
#kundenportalBereich .kunden-element-aktionen > button {
  width: auto;
  padding: 7px 11px;
  border-radius: 8px;
}
#kundenportalBereich .kunden-mengensteuerung {
  min-height: 32px;
}
#kundenportalBereich .kunden-mengensteuerung button {
  min-width: 32px;
  padding: 0 8px;
  font-size: 17px;
}
#kundenportalBereich .kunden-menge-feld {
  grid-template-columns: auto 44px;
  padding: 2px 6px;
  font-size: 11px;
}
#kundenportalBereich .kunden-menge-feld input {
  width: 44px;
  min-width: 44px;
  padding: 4px 3px;
}
.anfrage-element-kopf {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 5px;
}
.anfrage-element-kopf .element-piktogramm {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
}


.anfragen-toolbar.anfragen-toolbar-crm {
  display: grid;
  grid-template-columns: minmax(280px, 2fr) minmax(170px, .8fr) minmax(170px, .8fr);
  gap: 12px;
  align-items: end;
}
.kundenanfrage-kunde { margin-bottom: 5px; }
.kundenanfrage-kunde span,
.kundenanfrage-kontakt { color: #526679; }
.kundenanfrage-kurzinfo { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 12px; }
.kundenanfrage-kurzinfo span { padding:5px 8px; border-radius:999px; background:#eef5fa; color:#31546c; font-size:11px; font-weight:700; }
.status-pill.status-angebot-erstellt { background:#fff2cc; color:#765600; border-color:#ead48d; }
.status-pill.status-bestellt { background:#ece7ff; color:#4c3991; border-color:#cbc0ef; }
.status-pill.status-erledigt { background:#e4f6ec; color:#176b45; border-color:#b9dfca; }
.anfrage-datenliste { display:grid; gap:8px; margin:0; }
.anfrage-datenliste > div { display:grid; grid-template-columns:130px 1fr; gap:10px; padding:7px 0; border-bottom:1px solid #e3eaf0; }
.anfrage-datenliste dt { color:#627383; font-size:12px; font-weight:700; }
.anfrage-datenliste dd { margin:0; color:#172b3a; overflow-wrap:anywhere; }
.zustandigkeit-zeile { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; }
.zustandigkeit-zeile input { margin:0; }
.detail-speichern-zeile { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:9px; }
.detail-speichern-zeile button { width:auto; margin:0; }
@media (max-width:780px) {
  .anfragen-toolbar.anfragen-toolbar-crm { grid-template-columns:1fr; }
  .anfrage-datenliste > div { grid-template-columns:1fr; gap:2px; }
  .zustandigkeit-zeile { grid-template-columns:1fr; }
  .zustandigkeit-zeile button { width:100%; }
}


.anfragen-toolbar-crm {
  align-items: end;
}

.anfragen-filter-reset button {
  white-space: nowrap;
}
.anfrage-datenliste-breit {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.foto-element-gruppe {
  padding: 12px;
  border: 1px solid #dce6ee;
  border-radius: 12px;
  background: #f8fbfd;
}
.foto-element-gruppe + .foto-element-gruppe {
  margin-top: 12px;
}
.foto-element-titel {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}
.foto-element-titel .element-piktogramm {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
}
.foto-element-titel span {
  margin-left: auto;
  color: #667788;
  font-size: 12px;
}
.foto-element-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
  gap: 9px;
}
@media (max-width: 980px) {
  .anfragen-toolbar-crm {
    grid-template-columns: 1fr 1fr;
  }
  .anfragen-suche {
    grid-column: 1 / -1;
  }
  .anfrage-datenliste-breit {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 620px) {
  .anfragen-toolbar-crm,
  .anfrage-datenliste-breit {
    grid-template-columns: 1fr;
  }
  .anfragen-suche {
    grid-column: auto;
  }
  .anfragen-filter-reset button {
    width: 100%;
  }
}

/* ============================================================
   V8.50.0 – Kundenverglasung + aufgeräumter interner Arbeitsbereich
   ============================================================ */
.auswahl-segment {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 6px 0 14px;
}
.auswahl-segment button {
  margin: 0;
  min-height: 44px;
  background: #eef4f8;
  color: #27465e;
  border: 1px solid #cbdbe6;
  box-shadow: none;
}
#kundenVerglasungAuswahl button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  line-height: 1.2;
}
#kundenVerglasungAuswahl button strong { font-size: 1em; }
#kundenVerglasungAuswahl button span { font-size: .76em; font-weight: 700; }
.auswahl-segment button.ist-aktiv {
  background: #1f73b7;
  color: #fff;
  border-color: #1f73b7;
  box-shadow: 0 5px 14px rgba(31,115,183,.20);
}
.element-verglasung-bereich {
  padding: 11px 12px;
  margin-bottom: 12px;
  border: 1px solid #cfe0ec;
  border-radius: 12px;
  background: #f6fafc;
}
.element-ausstattung-bereich {
  padding: 14px;
  margin: 12px 0;
  border: 1px solid #cfe0ec;
  border-radius: 14px;
  background: #f7fbfd;
}
.element-ausstattung-bereich h4 { margin: 0 0 4px; color: #21445e; }
.element-ausstattung-bereich .startText { margin: 0 0 10px; }
.element-ausstattung-bereich label { display:block; margin:10px 0 5px; font-weight:700; color:#33475b; }
.element-ausstattung-bereich input,
.element-ausstattung-bereich select { width:100%; min-width:0; }
.foerderhinweis-card {
  margin: 16px 0;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid #cfe3d5;
  border-left: 4px solid #3f8f5d;
  background: #f4fbf6;
  color: #244332;
}
.foerderhinweis-card > div { display:flex; flex-direction:column; gap:3px; }
.foerderhinweis-card strong { font-size: 16px; }
.foerderhinweis-card p { margin: 8px 0; color:#425b4b; font-size: 13px; line-height:1.5; }
.foerderhinweis-card a { color:#176696; font-weight:700; font-size:13px; }
.foerderhinweis-kicker { color:#5a7964; font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }

#appBereich #kundenanfragenInternBereich {
  max-width: 1180px;
  margin: 18px auto 28px;
  padding: 20px;
}
#appBereich .anfragen-toolbar.anfragen-toolbar-crm {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(180px, 240px);
  gap: 12px;
  align-items: end;
}
#appBereich .anfragen-erweitert {
  grid-column: 1 / -1;
  margin-top: 2px;
  padding: 0;
  border: 1px solid #303745;
  border-radius: 11px;
  background: #171c25;
  overflow: hidden;
}
#appBereich .anfragen-erweitert summary {
  cursor: pointer;
  padding: 11px 13px;
  color: #c8d3df;
  font-size: 12px;
  font-weight: 750;
  list-style-position: inside;
}
#appBereich .anfragen-erweitert-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  padding: 0 12px 12px;
  border-top: 1px solid #2a303b;
}
#appBereich .anfragen-erweitert-grid > div { min-width: 0; }
#appBereich .anfragen-filter-reset { display:flex; align-items:end; gap:7px; }
#appBereich .kundenanfragen-intern-liste {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}
#appBereich .kundenanfrage-intern-card {
  padding: 15px 16px;
  border-radius: 13px;
}
#appBereich .kundenanfrage-intern-card .kundenanfrage-aktionen {
  display: flex;
  justify-content: flex-end;
  margin-top: 9px;
}
#appBereich .kundenanfrage-intern-card .kundenanfrage-aktionen button {
  width: auto;
  min-width: 125px;
}

#appBereich .anfrage-modal { padding: 18px; }
#appBereich .anfrage-modal-card {
  width: min(1180px, 100%);
  max-width: 1180px;
  max-height: calc(100vh - 36px);
  padding: 18px;
  overflow: auto;
}
.anfrage-detail-tabs {
  position: sticky;
  top: -18px;
  z-index: 5;
  display: flex;
  gap: 6px;
  padding: 11px 0;
  margin-bottom: 12px;
  overflow-x: auto;
  background: #171a21;
  border-bottom: 1px solid #303745;
  scrollbar-width: thin;
}
.anfrage-detail-tab {
  flex: 0 0 auto;
  width: auto;
  min-height: 38px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 9px;
  border: 1px solid #394250;
  background: #242a35;
  color: #d6deea;
  box-shadow: none;
  font-size: 12px;
}
.anfrage-detail-tab.ist-aktiv {
  background: #a92d35;
  border-color: #c7464e;
  color: #fff;
}
.anfrage-detail-tabpanel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.anfrage-detail-tabpanel > .anfrage-detail-panel { margin: 0; min-width:0; }
.anfrage-detail-tabpanel[data-detail-tab="elemente"] > .anfrage-detail-panel,
.anfrage-detail-tabpanel[data-detail-tab="bearbeitung"] > .anfrage-detail-panel,
.anfrage-detail-tabpanel[data-detail-tab="unterlagen"] > .anfrage-detail-panel,
.anfrage-detail-tabpanel[data-detail-tab="verlauf"] > .anfrage-detail-panel { grid-column: 1 / -1; }
#appBereich .anfrage-modal-card .anfrage-datenliste dd { color:#f0f4f8; }
#appBereich .anfrage-modal-card .anfrage-datenliste dt { color:#9fb0c3; }
#appBereich .anfrage-modal-card .anfrage-datenliste > div { border-bottom-color:#2d3541; }

@media (max-width: 780px) {
  .auswahl-segment,
  #appBereich #kundenanfragenInternBereich { padding: 13px; margin: 10px 0 20px; }
  #appBereich .anfragen-toolbar.anfragen-toolbar-crm,
  #appBereich .anfragen-erweitert-grid,
  .anfrage-detail-tabpanel { grid-template-columns: 1fr; }
  #appBereich .anfragen-erweitert { grid-column:auto; }
  #appBereich .anfragen-filter-reset { flex-direction:column; align-items:stretch; }
  #appBereich .anfragen-filter-reset button { width:100%; }
  #appBereich .anfrage-modal { padding: 6px; }
  #appBereich .anfrage-modal-card { max-height: calc(100vh - 12px); padding: 12px; }
  .anfrage-detail-tabs { top:-12px; margin-inline:-2px; }
  .anfrage-detail-tabpanel > .anfrage-detail-panel { grid-column:auto !important; }
}


.projektzuordnung-aktionen{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}.projektzuordnung-aktionen button{width:auto;min-height:34px;padding:7px 11px;font-size:12px}.projektzuordnung-aktionen button:disabled{opacity:.45;cursor:not-allowed}.pdf-unterlagen-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px}.pdf-unterlagen-panel h3{margin-top:0}.pdf-unterlagen-panel>button{width:auto;min-width:210px}.pdf-unterlagen-panel .inline-status{grid-column:1/-1}@media(max-width:700px){
  .anfragen-toolbar,.anfrage-detail-grid { grid-template-columns:1fr; }
  .kundenanfragen-intern-liste { grid-template-columns:1fr; }
  .kundenanfrage-intern-card .kundenanfrage-aktionen { grid-template-columns:1fr; }
  .anfrage-modal { padding:8px; }
  .anfrage-modal-card { padding:13px; border-radius:12px; }
  .anfrage-modal-kopf { align-items:stretch; flex-direction:column; }
.intern-start-shell{padding:18px;margin:16px auto}.intern-hauptauswahl{grid-template-columns:1fr}.intern-auswahlkarte{min-height:140px;padding:22px}.pdf-unterlagen-panel{grid-template-columns:1fr}.pdf-unterlagen-panel>button{width:100%;min-width:0}}


.email-workflow-grid {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(240px, 1.2fr);
  gap: 12px;
}
.email-workflow-grid > div {
  min-width: 0;
}
.email-workflow-voll {
  grid-column: 1 / -1;
}
.email-workflow-grid textarea {
  min-height: 220px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
}
.email-workflow-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.email-workflow-aktionen button {
  width: auto;
  min-height: 36px;
  padding: 8px 12px;
  font-size: 12px;
}
.email-anhang-hinweis {
  margin: 10px 0 0;
  padding: 9px 11px;
  border-left: 3px solid #1f73b7;
  background: #edf6fd;
  color: #40566a;
  font-size: 12px;
  line-height: 1.45;
}
@media (max-width: 680px) {
  .email-workflow-grid {
    grid-template-columns: 1fr;
  }
  .email-workflow-voll {
    grid-column: auto;
  }
  .email-workflow-aktionen button {
    width: 100%;
  }
}


.dashboard-grid-crm {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.anfragen-toolbar-crm {
  grid-template-columns: minmax(260px, 2fr) repeat(6, minmax(140px, 1fr)) auto;
}
.anfragen-filter-reset {
  display: flex;
  align-items: end;
  padding-bottom: 1px;
  gap: 7px;
  flex-wrap: wrap;
}
.crm-meta-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 2px;
}
.wiedervorlage-pill,
.crm-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.wiedervorlage-pill {
  background: #edf4f9;
  color: #35536b;
}
.wiedervorlage-pill.ist-faellig {
  background: #fde8e7;
  color: #b42318;
}
.crm-tag {
  background: #eef1ff;
  color: #3949ab;
}
.crm-planung-panel {
  align-self: start;
}
.crm-planung-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.crm-planung-voll {
  grid-column: 1 / -1;
}
.crm-planung-voll small {
  display: block;
  margin-top: 4px;
  color: #687b8d;
}
.crm-planung-panel > button {
  width: auto;
  margin-top: 10px;
}
.anfrage-chronik article {
  grid-template-columns: 170px minmax(0, 1fr) auto;
  align-items: start;
}
.anfrage-chronik article small {
  color: #8a98a6;
  font-size: 10px;
}
@media (max-width: 1200px) {
  .anfragen-toolbar-crm {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .anfragen-suche {
    grid-column: 1 / -1;
  }
}
@media (max-width: 850px) {
  .dashboard-grid-crm {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 650px) {
  .portal-grid-priorisiert {
    grid-template-columns: 1fr;
  }

  #startBereich .portal-card-kunde {
    min-height: 132px;
    padding: 20px;
  }

  #startBereich .portal-card-kunde strong {
    font-size: 21px;
  }

  #startBereich .portal-card-intern {
    width: min(62%, 230px);
    justify-self: end;
    padding: 10px 12px;
  }

  #startBereich .portal-card-intern {
    width: auto;
    max-width: 100%;
    justify-self: end;
    align-self: flex-end;
    min-height: 40px;
    padding: 10px 14px;
  }

  #kundenTypAuswahl .element-kachel {
    min-height: 270px;
  }

  #kundenTypAuswahl .typ-illustration {
    height: 158px;
  }

  .mess-cad-inline { height: 150px; }

  #kundenSchritt4 .element-kachel {
    padding: 12px;
  }
  #kundenSchritt4 .element-bild {
    height: 148px;
  }
  #kundenSchritt4 .element-kachel p {
    font-size: 11.5px;
    padding: 5px 9px;
  }

  .kunden-element-aktionen { align-items: stretch; }
  .kunden-mengensteuerung { width: 100%; }
  .kunden-menge-feld { flex: 1; grid-template-columns: 1fr 60px; }

  #kundenportalBereich .kunden-element-mass,
  #kundenportalBereich .kunden-element-badges,
  #kundenportalBereich .kunden-element-notiz { margin-left: 0; }
  #kundenportalBereich .kunden-element-aktionen { justify-content: flex-start; }
  #kundenportalBereich .kunden-mengensteuerung { width: auto; }

  .kundenanfrage-aktionen {
    justify-content: flex-start;
  }

  .dashboard-grid-crm,
  .anfragen-toolbar-crm,
  .crm-planung-grid {
    grid-template-columns: 1fr;
  }
  .anfragen-suche,
  .crm-planung-voll {
    grid-column: auto;
  }
  .anfrage-chronik article {
    grid-template-columns: 1fr;
  }
}


.intern-benutzerleiste {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin:0 0 16px;
  padding:11px 14px;
  border:1px solid #d9e4ed;
  border-radius:12px;
  background:#f8fbfd;
}
.intern-benutzerleiste > div:first-child {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.intern-benutzerleiste strong { color:#17324d; }
.intern-benutzerleiste span { font-size:12px; color:#607487; }
.rollen-badge {
  display:inline-flex;
  padding:4px 9px;
  border-radius:999px;
  background:#e8f1ff;
  color:#174ea6!important;
  font-weight:800;
}

.mitarbeiter-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px;
}
.security-hinweis {
  margin-top:12px;
  padding:10px 12px;
  border-left:3px solid #d97706;
  background:#fff8e8;
  color:#6f4c00;
  font-size:12px;
  line-height:1.5;
}
html[data-user-role="mitarbeiter"] .admin-only {
  display:none!important;
}


.konto-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.konto-grid .anfrage-detail-panel {
  align-self:start;
}
#passwortNeuBereich {
  min-height:100vh;
}
.intern-benutzeraktionen {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
@media(max-width:760px) { .dashboard-grid{grid-template-columns:1fr 1fr}.dashboard-columns{grid-template-columns:1fr}.app-topbar{align-items:flex-start}.aktivitaet{flex-direction:column;gap:4px}.aktivitaet small{white-space:normal}
  .konto-grid {
    grid-template-columns:1fr;
  }
}


.konto-gefahrenbereich {
  border-color:#efc4c4!important;
  background:#fff9f9!important;
}
.konto-gefahrenbereich h3 {
  color:#a61b1b;
}
.konto-gefahren-aktionen {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.button-danger {
  background:#b42318!important;
  border-color:#b42318!important;
  color:#fff!important;
}
.button-danger:hover {
  background:#8f1c14!important;
}
@media(max-width:620px) {
  .konto-gefahren-aktionen,
  .konto-gefahren-aktionen button {
    width:100%;
  }
}

.supabase-fehlerkarte{margin:14px 0;padding:14px;border:1px solid #efc4c4;border-radius:12px;background:#fff8f8;color:#702020}.supabase-fehlerkarte strong,.supabase-fehlerkarte small{display:block;margin-bottom:8px}


.auth-sicherheitshinweis {
  margin: 12px 0 16px;
  padding: 10px 12px;
  border: 1px solid #cfe0ed;
  border-radius: 10px;
  background: #f4f9fc;
  color: #36546b;
  font-size: 12px;
  line-height: 1.45;
}

.mfa-card { max-width: 520px; }
.mfa-qr {
  display: block;
  width: min(260px, 78vw);
  height: auto;
  margin: 18px auto;
  padding: 10px;
  background: #fff;
  border: 1px solid #d9e4ec;
  border-radius: 14px;
}
.mfa-secret-details { margin: 10px 0 16px; }
.mfa-secret-details code {
  display: block;
  margin-top: 8px;
  padding: 10px;
  overflow-wrap: anywhere;
  user-select: all;
  background: #f4f7f9;
  border-radius: 9px;
}


.mitarbeiter-liste-panel { margin-top: 16px; }
.mitarbeiter-liste { display:grid; gap:12px; }
.mitarbeiter-card {
  padding:14px;
  border:1px solid #d9e4ed;
  border-radius:12px;
  background:#fff;
}
.mitarbeiter-card.ist-inaktiv { opacity:.72; background:#f7f7f7; }
.mitarbeiter-card-kopf {
  display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
}
.mitarbeiter-card-kopf div { display:flex; flex-direction:column; gap:3px; }
.mitarbeiter-card-kopf span { font-size:12px; color:#607487; }
.mitarbeiter-meta {
  display:flex; flex-wrap:wrap; gap:8px; margin:10px 0;
}
.mitarbeiter-meta span {
  padding:4px 8px; border-radius:999px; background:#f1f5f8; font-size:12px;
}
.mitarbeiter-aktionen {
  display:flex; flex-wrap:wrap; align-items:end; gap:8px;
}
.mitarbeiter-aktionen label {
  min-width:170px; margin:0;
}
.mitarbeiter-aktionen select { margin-top:4px; }
@media(max-width:720px) {
  .intern-benutzerleiste {
    align-items:flex-start;
    flex-direction:column;
  }
  .intern-benutzeraktionen,
  .intern-benutzeraktionen button {
    width:100%;
  }
  .mitarbeiter-grid {
    grid-template-columns:1fr;
  }

  .mitarbeiter-card-kopf { flex-direction:column; }
  .mitarbeiter-aktionen, .mitarbeiter-aktionen button, .mitarbeiter-aktionen label { width:100%; }
}


.system-check-output {
  margin-top:10px;
  padding:12px;
  max-height:280px;
  overflow:auto;
  border:1px solid #d9e4ed;
  border-radius:10px;
  background:#f7fafc;
  font-size:11px;
  white-space:pre-wrap;
}


.mess-cad-inline {
  width: 100%;
  height: 180px;
  padding: 10px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(239,248,253,.98), rgba(209,229,241,.94));
  border: 1px solid rgba(65,132,174,.32);
  overflow: hidden;
  box-sizing: border-box;
}

.mess-cad-inline svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  transition: opacity .2s ease;
}

.mess-detailtext {
  margin: 10px 0;
  padding: 9px 11px;
  border-left: 4px solid #227fb8;
  background: #eef7fb;
  text-align: left;
  line-height: 1.4;
}

.mess-warnung {
  margin: 10px 0;
  padding: 9px 11px;
  border: 1px solid #e3d39e;
  border-radius: 10px;
  background: #fff8e8;
  color: #6d511d;
  text-align: left;
  line-height: 1.4;
}

.mess-kurz-hinweis {
  padding: 8px 10px;
  border-radius: 8px;
  background: #eef7fb;
  font-size: 13px;
}

.fenster-typbild {
  width: 100%;
  height: 170px;
  object-fit: contain;
  box-sizing: border-box;
  padding: 6px 8px 2px;
  border-radius: 12px;
  background: #f6fafc;
}

.fenster-varianten-auswahl {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 4px 0 5px;
}

.fenster-varianten-button {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 5px 8px;
  border: 1px solid #cbdde7;
  border-radius: 7px;
  background: #f6fafc;
  color: #294858;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.fenster-varianten-button:hover {
  background: #edf6fa;
}

.fenster-varianten-button.aktiv {
  border-color: #227fb8;
  background: #227fb8;
  color: #fff;
}

.fenster-varianten-hinweis {
  margin: 6px 0 10px;
  padding: 8px 10px;
  border-radius: 9px;
  background: #eef6fa;
  color: #365669;
  font-size: 12px;
  line-height: 1.4;
}

.fenster-sondermass-hinweis {
  display: block;
  margin: 5px auto;
  padding: 7px 10px;
  max-width: 800px;
  border: 1px solid #d8c9e7;
  border-radius: 9px;
  background: #f7f2fb;
  color: #654b7d;
  font-size: 11.5px;
  line-height: 1.35;
  text-align: left;
}

.mess-schritt-navigation {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 4px 0;
}

.mess-schritt-button {
  padding: 6px 4px;
  border: 1px solid #cbdde7;
  border-radius: 7px;
  background: #f5f9fb;
  color: #294858;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  opacity: .76;
  box-shadow: none;
}

.mess-schritt-button:hover {
  background: #edf6fa;
}

.mess-schritt-button.aktiv {
  border-color: #227fb8;
  background: #227fb8;
  color: #fff;
  opacity: 1;
  box-shadow: 0 3px 9px rgba(34, 127, 184, .18);
}

#kundenSchritt5.kunden-messanleitung-schritt {
  width: 100%;
  overflow: visible;
}

#kundenSchritt5 .schritt5-kopf {
  width: 100%;
  margin: 0 0 8px;
}

#kundenSchritt5 .messanleitung-haupttitel {
  margin: 0 0 3px;
  color: var(--hu-ink);
  font-size: 20px;
  line-height: 1.15;
  text-align: left;
}

#kundenSchritt5 .schritt5-fortschritt-kopf {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 20px;
  margin: 0 0 5px;
  color: #526978;
  font-size: 13px;
  line-height: 1.25;
}

#kundenSchritt5 #kundenEntwurfStatusSchritt5 {
  display: none !important;
}

#kundenSchritt5 .schritt5-fortschritt-balken {
  width: 100%;
  margin: 0;
}

#kundenSchritt5 .schritt5-fortschritt-balken > span {
  display: block;
  width: 71%;
  height: 100%;
}

#kundenSchritt5 .messanleitung-typ {
  margin: 12px 0 8px;
  color: #2c4655;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

#kundenSchritt5 .mess-anleitung-gross {
  display: block;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 12px;
  overflow: visible;
}

#kundenSchritt5 .messgrafik-bereich,
#kundenSchritt5 .messsteuerung-bereich,
#kundenSchritt5 .messhinweise-bereich,

#kundenSchritt5 .mess-warnung {
  padding: 10px 12px;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 600;
}

#kundenSchritt5 .mess-warnung b {
  font-weight: 800;
}

#kundenSchritt5 .messnavigation-bereich {
  position: static;
  width: 100%;
  margin: 0;
  transform: none;
}

#kundenSchritt5 .messgrafik-bereich {
  display: block;
  margin-bottom: 14px;
  contain: layout;
}

#kundenSchritt5 .messgrafik-flaeche {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: visible;
}

#kundenSchritt5 .messgrafik-flaeche .mess-cad-inline {
  display: block;
  width: 100%;
  height: auto !important;
  min-height: 0;
  max-width: 940px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

#kundenSchritt5 .messgrafik-flaeche .mess-cad-inline svg {
  display: block;
  width: 100%;
  height: auto !important;
  aspect-ratio: 900 / 985;
  max-width: 940px;
  max-height: none;
  margin: 0 auto;
}

#kundenSchritt5 .messsteuerung-bereich {
  margin-bottom: 12px;
}

#kundenSchritt5 .kunden-mess-steuerung {
  display: flex;
  flex-direction: column;
  position: static !important;
  width: 100%;
  max-width: 760px;
  margin: 0 auto !important;
  padding: 0;
  gap: 8px;
  transform: none !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: auto;
}

#kundenSchritt5 .fenster-varianten-auswahl {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  gap: 6px;
  margin: 0;
}

#kundenSchritt5 .fenster-varianten-button {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 6px 9px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.2;
}

#kundenSchritt5 .fenster-varianten-hinweis {
  width: 100%;
  margin: 0;
}

#kundenSchritt5 .mess-schritt-navigation {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  gap: 6px;
  margin: 0;
}

#kundenSchritt5 .mess-schritt-button {
  min-width: 0;
  margin: 0;
  padding: 7px 4px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.2;
}

#kundenSchritt5 .messhinweise-bereich {
  margin-bottom: 12px;
}

#kundenSchritt5 .messanleitung-kurztext {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

#kundenSchritt5 .mess-detailtext,
#kundenSchritt5 .mess-warnung,
#kundenSchritt5 .fenster-sondermass-hinweis {
  display: block;
  width: 100%;
  max-width: 800px;
  margin: 6px auto;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.4;
}

#kundenSchritt5 .messnavigation-bereich {
  margin-top: 2px;
}

#kundenSchritt5 .messanleitung-aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  gap: 10px;
  margin: 0;
}

#kundenSchritt5 .messanleitung-aktionen button {
  width: auto;
  min-width: 210px;
  margin: 0;
}

/* Block 4.1B – Strikte Trennung von Grafik, Steuerung, Hinweisen und Navigation */
@media (max-width: 720px) {
  #kundenSchritt5 .messanleitung-haupttitel {
    font-size: 19px;
  }

  #kundenSchritt5 .schritt5-fortschritt-kopf {
    font-size: 12px;
  }

  #kundenSchritt5 .messanleitung-typ {
    margin: 10px 0 6px;
    font-size: 19px;
  }

  #kundenSchritt5 .mess-anleitung-gross {
    width: 100%;
    margin: 0;
    padding: 6px 0 10px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  #kundenSchritt5 .messgrafik-bereich {
    width: calc(100% + 18px);
    margin-right: -9px;
    margin-bottom: 14px;
    margin-left: -9px;
  }

  #kundenSchritt5 .messgrafik-flaeche .mess-cad-inline {
    width: 100%;
    height: auto !important;
    min-height: 0;
    max-width: none;
  }

  #kundenSchritt5 .messgrafik-flaeche .mess-cad-inline svg {
    width: 100%;
    height: auto !important;
    max-width: none;
  }

  #kundenSchritt5 .messsteuerung-bereich,
  #kundenSchritt5 .messhinweise-bereich,
  #kundenSchritt5 .messnavigation-bereich {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
  }

  #kundenSchritt5 .kunden-mess-steuerung {
    width: 100%;
    max-width: none;
    gap: 7px;
  }

  #kundenSchritt5 .fenster-varianten-auswahl {
    gap: 5px;
  }

  #kundenSchritt5 .fenster-varianten-button {
    padding: 5px 7px;
    font-size: 10.5px;
  }

  #kundenSchritt5 .mess-schritt-navigation {
    gap: 5px;
  }

  #kundenSchritt5 .mess-schritt-button {
    padding: 6px 2px;
    font-size: 10px;
  }

  #kundenSchritt5 .mess-detailtext,
  #kundenSchritt5 .fenster-sondermass-hinweis {
    margin: 4px auto;
    padding: 7px 9px;
    font-size: 11.5px;
  }

  #kundenSchritt5 .mess-warnung {
    margin: 6px auto;
    padding: 10px 11px;
    font-size: 14px;
    line-height: 1.45;
  }

  #kundenSchritt5 .messanleitung-aktionen {
    gap: 8px;
  }

  #kundenSchritt5 .messanleitung-aktionen button {
    width: 100%;
    min-width: 0;
  }
}

/* Block 4.1D-B – Schritt 5 Laptop/Desktop */
@media (min-width: 721px) {
  #kundenportalBereich {
    width: min(1180px, calc(100% - 48px));
    max-width: 1180px;
  }

  #kundenSchritt5 .mess-anleitung-gross {
    display: block;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 8px 12px 10px;
  }

  #kundenSchritt5 .messgrafik-bereich {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 16px;
    contain: layout;
  }

  #kundenSchritt5 .messgrafik-flaeche {
    width: 100%;
    margin: 0 auto;
  }

  #kundenSchritt5 .messgrafik-flaeche .mess-cad-inline {
    width: 100%;
    height: auto !important;
    min-height: 0;
    max-width: 600px;
    margin: 0 auto;
    padding: 0;
    overflow: visible;
  }

  #kundenSchritt5 .messgrafik-flaeche .mess-cad-inline svg {
    display: block;
    width: 100%;
    height: auto !important;
    max-width: 700px;
    max-height: none;
    margin: 0 auto;
  }

  #kundenSchritt5 .messsteuerung-bereich {
    width: 100%;
    max-width: 760px;
    margin: 0 auto 8px;
  }

  #kundenSchritt5 .kunden-mess-steuerung {
    display: flex;
    flex-direction: column;
    position: static !important;
    width: 100%;
    max-width: 760px;
    margin: 0 auto !important;
    gap: 8px;
    transform: none !important;
    inset: auto !important;
  }

  #kundenSchritt5 .fenster-varianten-auswahl {
    justify-content: center;
    gap: 8px;
  }

  #kundenSchritt5 .fenster-varianten-button {
    padding: 5px 10px;
    font-size: 12px;
  }

  #kundenSchritt5 .mess-schritt-navigation {
    grid-template-columns: repeat(4, minmax(110px, 1fr));
    gap: 8px;
  }

  #kundenSchritt5 .mess-schritt-button {
    padding: 8px 10px;
    font-size: 12px;
  }

  #kundenSchritt5 .messhinweise-bereich {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 14px;
  }

  #kundenSchritt5 .messnavigation-bereich {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
  }

  #kundenSchritt5 .messanleitung-aktionen {
    justify-content: center;
    gap: 12px;
  }

  #kundenSchritt5 .messanleitung-aktionen button {
    min-width: 180px;
  }
}

/* V8.47 – visueller Abschluss Schritt 6 */
#kundenSchritt5 .messhinweise-bereich {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#kundenSchritt5 .mess-warnung {
  margin: 8px 0 4px !important;
  padding: 12px 14px !important;
  border: 1px solid #ead9a5 !important;
  border-radius: 14px !important;
  background: #fff8e8 !important;
  color: #6d511d !important;
  box-shadow: 0 4px 12px rgba(109,81,29,.06);
}

#kundenSchritt6 .kunden-messhilfe-panel .mess-cad-eingabe {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
}

#kundenSchritt6 .kunden-messhilfe-panel .mess-cad-eingabe svg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* ============================================================
   V8.50.3 – Abschluss HomeUp Mitarbeiterbereich
   ============================================================ */
#appBereich #interneArbeitsTopbar {
  justify-content:center;
  align-items:center;
  min-height:48px;
  padding:7px 12px;
  border:0;
  background:transparent;
  box-shadow:none;
}
#appBereich #interneArbeitsTopbar #interneArbeitsZurueckButton {
  width:auto;
  min-width:170px;
  margin:0 auto;
}
.intern-papierkorb-zeile {
  display:flex;
  justify-content:center;
  margin-top:14px;
}
#appBereich .intern-papierkorb-button {
  width:auto;
  min-width:150px;
  margin:0;
}
#appBereich .papierkorb-kopfaktionen {
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:0 0 12px;
  padding:10px 12px;
  border:1px solid #343c48;
  border-radius:12px;
  background:#11161e;
  color:#aebccc;
  font-size:12px;
}
#appBereich .papierkorb-kopfaktionen button { margin:0; }
#appBereich .kundenanfrage-intern-card .kundenanfrage-aktionen {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
}
#appBereich .kundenanfrage-intern-card .kundenanfrage-loeschen-button {
  width:38px;
  min-width:38px;
  height:38px;
  min-height:38px;
  padding:0;
  border:1px solid #5a3438;
  border-radius:10px;
  background:#25181b;
  color:#ff9da3;
  box-shadow:none;
  font-size:16px;
  line-height:1;
}
#appBereich .kundenanfrage-intern-card .kundenanfrage-loeschen-button:hover {
  background:#3a1d21;
  border-color:#8a444b;
}
#appBereich .intern-livevorschau {
  background:#f8fbfd;
}
#appBereich .intern-livevorschau svg {
  width:100%;
  max-height:220px;
}

@media (max-width:700px) {
  #appBereich #interneArbeitsTopbar #interneArbeitsZurueckButton { min-width:150px; }
  #appBereich .papierkorb-kopfaktionen { align-items:stretch; flex-direction:column; }
  #appBereich .papierkorb-kopfaktionen button { width:100%; }
  #appBereich .kundenanfrage-intern-card .kundenanfrage-aktionen { width:100%; }
  #appBereich .kundenanfrage-intern-card .kundenanfrage-aktionen > button:not(.kundenanfrage-loeschen-button) { flex:1 1 auto; width:auto; }
  #appBereich .kundenanfrage-intern-card .kundenanfrage-loeschen-button { flex:0 0 42px; width:42px; min-width:42px; }
}

/* ============================================================
   V8.50.2 – Interner Anfragefluss: weniger Ebenen, klarer Status
   ============================================================ */
#appBereich .app-topbar {
  justify-content:flex-start;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
#appBereich .app-topbar #interneArbeitsZurueckButton {
  margin:0;
}
#appBereich #kundenanfragenInternBereich > .section-heading-row {
  align-items:center;
  margin-bottom:14px;
}
#appBereich #kundenanfragenInternBereich > .section-heading-row h2 {
  margin:0 0 4px;
}
#appBereich .kundenanfrage-intern-card {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:18px;
  align-items:center;
  padding:13px 15px;
  border:1px solid #2e3541;
  background:#12161e;
}
#appBereich .kundenanfrage-intern-kopf,
#appBereich .kundenanfrage-kunde,
#appBereich .kundenanfrage-kurzinfo,
#appBereich .crm-meta-badges { grid-column:1; }
#appBereich .kundenanfrage-intern-kopf { margin-bottom:5px; }
#appBereich .kundenanfrage-kunde { margin:4px 0; }
#appBereich .kundenanfrage-kunde > span { color:#9eacbd; font-size:12px; }
#appBereich .kundenanfrage-kurzinfo { margin:7px 0 0; }
#appBereich .kundenanfrage-kurzinfo span {
  padding:4px 7px;
  border:1px solid #303a47;
  background:#1b222c;
  color:#bac8d8;
}
#appBereich .crm-meta-badges-kompakt { margin:6px 0 0; gap:5px; }
#appBereich .kundenanfrage-intern-card .kundenanfrage-aktionen {
  grid-column:2;
  grid-row:1 / span 4;
  align-self:center;
  margin:0;
}
#appBereich .kundenanfrage-intern-card .kundenanfrage-aktionen button {
  min-width:118px;
  margin:0;
}

@media (max-width:700px) {
  #appBereich .kundenanfrage-intern-card { grid-template-columns:1fr; gap:0; }
  #appBereich .kundenanfrage-intern-card .kundenanfrage-aktionen {
    grid-column:1;
    grid-row:auto;
    margin-top:10px;
  }
  #appBereich .kundenanfrage-intern-card .kundenanfrage-aktionen button { width:100%; }
}

/* ============================================================
   V8.50.1 – HomeUp Intern: klare Navigation + einheitliche Optik
   ============================================================ */
#appBereich > #projektBereich,
#appBereich > #aufmassBereich,
#appBereich > #kontoBereich,
#appBereich > #mitarbeiterverwaltungBereich {
  max-width: 1180px;
  margin: 18px auto 28px;
  padding: 20px;
  border: 1px solid #2b2f39;
  border-radius: 18px;
  background: #171a21;
  color: #f2f4f8;
  box-shadow: 0 8px 22px rgba(0,0,0,.30);
}
#appBereich .intern-benutzerleiste {
  max-width: 1180px;
  margin: 0 auto 16px;
  border-color: #2f3743;
  background: #171a21;
  color: #f2f4f8;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
#appBereich .intern-benutzerleiste strong { color:#fff; }
#appBereich .intern-benutzerleiste span { color:#aebccc; }
#appBereich .rollen-badge { background:#243b56; color:#bcdcff!important; }

#appBereich .app-topbar {
  max-width: 1180px;
  margin: 18px auto 10px;
  padding: 12px 16px;
  border: 1px solid #2b2f39;
  border-radius: 14px;
}
#appBereich .app-topbar .button-inline,
#appBereich .top-back {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 9px 13px;
}
#appBereich .top-back { margin-bottom: 16px; }

#appBereich > #projektBereich h2,
#appBereich > #projektBereich h3,
#appBereich > #aufmassBereich h2,
#appBereich > #aufmassBereich h3,
#appBereich > #kontoBereich h2,
#appBereich > #kontoBereich h3,
#appBereich > #mitarbeiterverwaltungBereich h2,
#appBereich > #mitarbeiterverwaltungBereich h3 { color:#fff; }
#appBereich > #projektBereich label,
#appBereich > #aufmassBereich label,
#appBereich > #kontoBereich label,
#appBereich > #mitarbeiterverwaltungBereich label { color:#d4dbe6; }
#appBereich > #projektBereich input,
#appBereich > #projektBereich select,
#appBereich > #projektBereich textarea,
#appBereich > #aufmassBereich input,
#appBereich > #aufmassBereich select,
#appBereich > #aufmassBereich textarea,
#appBereich > #kontoBereich input,
#appBereich > #kontoBereich select,
#appBereich > #kontoBereich textarea,
#appBereich > #mitarbeiterverwaltungBereich input,
#appBereich > #mitarbeiterverwaltungBereich select,
#appBereich > #mitarbeiterverwaltungBereich textarea {
  background:#10131a;
  border-color:#343b49;
  color:#fff;
}
#appBereich .mitarbeiter-card,
#appBereich .mitarbeiter-card.ist-inaktiv,
#appBereich .konto-gefahrenbereich,
#appBereich .system-check-output,
#appBereich .security-hinweis,
#appBereich .supabase-fehlerkarte {
  border-color:#303846!important;
  background:#11151d!important;
  color:#dbe4ef!important;
}
#appBereich .mitarbeiter-card-kopf span { color:#9fb0c3; }
#appBereich .mitarbeiter-meta span { background:#252b36; color:#dbe4ef; }
#appBereich .konto-gefahrenbereich h3 { color:#ff8c8c; }

.intern-livevorschau-card {
  display:grid;
  grid-template-columns:minmax(190px,.7fr) minmax(300px,1.3fr);
  gap:18px;
  align-items:center;
  margin:14px 0 18px;
  padding:14px 16px;
  border:1px solid #344150;
  border-radius:16px;
  background:#111821;
}
.intern-livevorschau-kopf { display:flex; flex-direction:column; gap:6px; }
.intern-livevorschau-kopf > div { display:flex; flex-direction:column; gap:3px; }
.intern-livevorschau-kopf strong { color:#fff; font-size:18px; }
.intern-livevorschau-hinweis { color:#98aabd; font-size:11px; line-height:1.4; }
.intern-livevorschau {
  min-height:175px;
  padding:8px;
  border:1px solid #2e4150;
  border-radius:13px;
  background:#f8fbfd;
}
.intern-livevorschau svg { display:block; width:100%; max-height:205px; margin:auto; }

@media (max-width: 760px) {
  #appBereich > #projektBereich,
  #appBereich > #aufmassBereich,
  #appBereich > #kontoBereich,
  #appBereich > #mitarbeiterverwaltungBereich {
    margin:10px 0 18px;
    padding:13px;
    border-radius:15px;
  }
  #appBereich .app-topbar { margin:10px 0 8px; padding:10px 11px; }
  #appBereich .intern-benutzerleiste { margin:0 0 12px; }
  #appBereich .intern-benutzeraktionen { display:grid; grid-template-columns:1fr; }
  .intern-livevorschau-card { grid-template-columns:1fr; gap:10px; padding:11px; }
  .intern-livevorschau { min-height:145px; }
  .intern-livevorschau svg { max-height:180px; }
}

#kundenSchritt6 .kunden-livevorschau-card,
#kundenSchritt6 .kunden-mass-formular,
#kundenSchritt6 .kunden-messhilfe-panel {
  border-radius: 16px;
}

#kundenSchritt6 .kunden-livevorschau-kopf span {
  max-width: 62%;
  overflow: hidden;
  color: #607585;
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* V8.45 – Schritt 6: Eingaben im Fokus, kompakte Vorschau und optionale Messhilfe */
#kundenSchritt6 .kunden-masse-einleitung {
  max-width: 760px;
  margin: -2px 0 16px;
  color: #657487;
  line-height: 1.45;
}

#kundenSchritt6 .kunden-mass-visuals {
  display: grid;
  gap: 10px;
  align-content: start;
}

#kundenSchritt6 .kunden-livevorschau-card {
  padding: 12px;
  border: 1px solid #dce8ee;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(31, 65, 84, .08);
}

#kundenSchritt6 .kunden-messseite-hinweis {
  margin: 0 0 12px;
  padding: 9px 11px;
  border: 1px solid #d8e7ef;
  border-radius: 11px;
  background: #f5f9fb;
  color: #40586a;
  font-size: 12px;
  line-height: 1.45;
}

#kundenSchritt6 .kunden-livevorschau-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}

#kundenSchritt6 .kunden-livevorschau-kopf strong { color:#243746; font-size:15px; }
#kundenSchritt6 .kunden-livevorschau-kopf span { color:#82919d; font-size:11px; }
#kundenSchritt6 .kunden-livevorschau svg { display:block; width:100%; height:auto; max-height:250px; }
#kundenSchritt6 .kunden-livevorschau svg text,
#appBereich .intern-livevorschau svg text {
  paint-order: stroke fill;
  stroke: rgba(255,255,255,.94);
  stroke-width: 2px;
  stroke-linejoin: round;
}

#kundenSchritt6 .kunden-liveansicht-auswahl {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 7px;
  padding: 4px;
  border-radius: 11px;
  background: #f2f7fa;
}
#kundenSchritt6 .kunden-liveansicht-auswahl button {
  width: auto !important;
  min-width: 62px;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 5px 11px !important;
  border: 1px solid #c8dce8 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #335266 !important;
  box-shadow: none !important;
  font-size: 12px !important;
}
#kundenSchritt6 .kunden-liveansicht-auswahl button.ist-aktiv {
  border-color: #1f7fba !important;
  background: #1f7fba !important;
  color: #fff !important;
}
#kundenSchritt6 .kunden-liveansicht-auswahl span {
  margin-left: auto;
  color: #748694;
  font-size: 10px;
  line-height: 1.25;
  text-align: right;
}

#appBereich .intern-liveansicht-auswahl {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 8px;
  padding: 4px;
  border: 1px solid #dce8ee;
  border-radius: 11px;
  background: #f2f7fa;
}
#appBereich .intern-liveansicht-auswahl button {
  width: auto !important;
  min-width: 62px;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 5px 11px !important;
  border: 1px solid #c8dce8 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #335266 !important;
  box-shadow: none !important;
  font-size: 12px !important;
}
#appBereich .intern-liveansicht-auswahl button.ist-aktiv {
  border-color: #1f7fba !important;
  background: #1f7fba !important;
  color: #fff !important;
}
#appBereich .intern-liveansicht-auswahl span {
  margin-left: auto;
  color: #5d7282;
  font-size: 11px;
  line-height: 1.3;
  text-align: right;
}

@media (max-width: 520px) {
  #kundenSchritt6 .kunden-liveansicht-auswahl { flex-wrap: wrap; }
  #kundenSchritt6 .kunden-liveansicht-auswahl button { flex: 1 1 72px; }
  #kundenSchritt6 .kunden-liveansicht-auswahl span { flex: 1 0 100%; margin: 0; text-align: center; }
  #appBereich .intern-liveansicht-auswahl { flex-wrap: wrap; }
  #appBereich .intern-liveansicht-auswahl button { flex: 1 1 72px; }
  #appBereich .intern-liveansicht-auswahl span { flex: 1 0 100%; margin: 0; text-align: center; }
}

#kundenSchritt6 .kunden-messhilfe-toggle {
  width: 100%;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
}

#kundenSchritt6 .kunden-messhilfe-panel {
  position: static !important;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 7px;
}

#kundenSchritt6 .kunden-messhilfe-panel .mess-cad-eingabe,
#kundenSchritt6 .kunden-messhilfe-panel .mess-cad-eingabe svg {
  width: 100%;
  max-width: 330px;
  margin: 0 auto;
}

#kundenSchritt6 .kunden-mass-formular {
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid #e2e9ef;
  border-radius: 16px;
  background: #fff;
}

#kundenSchritt6 .kunden-mass-formular > label,
#kundenSchritt6 #kundeElementStandardMasse > label,
#kundenSchritt6 .kunden-dynamische-masse > label {
  display: block;
  margin: 10px 0 5px;
  color: #33475b;
  font-weight: 700;
}

#kundenSchritt6 .kunden-dynamische-masse {
  grid-template-columns: 1fr;
  gap: 0;
}

.kunden-raum-schnellwahl {
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 12px 0;
  padding: 13px 15px;
  border: 1px solid #cfe5f2;
  border-radius: 14px;
  background: #f3f9fc;
}

.kunden-raum-schnellwahl > div { display:grid; gap:2px; }
.kunden-raum-schnellwahl strong { color:#243746; }
.kunden-raum-schnellwahl span { color:#667887; font-size:12px; }
.kunden-raum-schnellwahl button { margin:0 !important; white-space:nowrap; }

@media (min-width: 721px) {
  #kundenSchritt6 .mess-layout {
    grid-template-columns: minmax(260px, 330px) minmax(460px, 1fr);
    gap: 22px;
    align-items: start;
  }
  #kundenSchritt6 .kunden-mass-visuals { position: sticky; top: 18px; }
}

@media (max-width: 720px) {
  #kundenSchritt6 .mess-layout { display:flex; flex-direction:column; gap:12px; }
  #kundenSchritt6 .kunden-mass-visuals { width:100%; }
  #kundenSchritt6 .kunden-livevorschau-card { padding:9px; }
  #kundenSchritt6 .kunden-livevorschau svg { max-height:210px; }
  #kundenSchritt6 .kunden-mass-formular { padding:13px; }
  .kunden-raum-schnellwahl { flex-direction:column; align-items:stretch; }
  .kunden-raum-schnellwahl button { width:100%; white-space:normal; }
}

/* V8.46 – Schritt 6 Abschlussbereinigung */
#kundenSchritt6 .kunden-messhilfe-text {
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  background: #fff;
  color: #33475b;
  text-align: left;
}

#kundenSchritt6 .kunden-messhilfe-text h4 {
  margin: 0 0 7px;
  color: #243746;
  font-size: 15px;
}

#kundenSchritt6 .kunden-messhilfe-text p {
  margin: 6px 0;
  font-size: 12px;
  line-height: 1.5;
}

#kundenSchritt6 .kunden-messhilfe-text ol {
  margin: 8px 0;
  padding-left: 22px;
}

#kundenSchritt6 .kunden-messhilfe-text li {
  margin: 4px 0;
  font-size: 12px;
  font-weight: 700;
}

#kundenSchritt6 .kunden-messhilfe-wichtig {
  margin-top: 10px !important;
  padding: 8px 10px;
  border-radius: 9px;
  background: #fff5d9;
  color: #73510d;
}

#kundenSchritt6 .mess-layout.nur-foto {
  display: block;
  max-width: 760px;
}

#kundenSchritt6 .mess-layout.nur-foto .kunden-mass-formular {
  width: 100%;
}

#kundenSchritt6 #kundeElementZusatzwuensche {
  margin-top: 6px;
}

@media (min-width: 721px) {
  #kundenSchritt6 .mess-layout.messhilfe-offen:not(.nur-foto) {
    grid-template-columns: minmax(360px, 420px) minmax(440px, 1fr);
  }
  #kundenSchritt6 .messhilfe-offen .kunden-messhilfe-panel .mess-cad-eingabe,
  #kundenSchritt6 .messhilfe-offen .kunden-messhilfe-panel .mess-cad-eingabe svg {
    max-width: 400px;
  }
}

/* Block 4.1D-C – Schritt 5 als echte breite Laptopstruktur */
@media (min-width: 960px) {
  #kundenSchritt5 .mess-anleitung-gross {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(340px, .85fr);
    grid-template-rows: auto auto auto;
    align-items: start;
    column-gap: 22px;
    row-gap: 12px;
    max-width: 1120px;
    padding: 8px 10px 10px;
  }

  #kundenSchritt5 .messgrafik-bereich {
    grid-column: 1;
    grid-row: 1 / 4;
    align-self: start;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
  }

  #kundenSchritt5 .messgrafik-flaeche .mess-cad-inline,
  #kundenSchritt5 .messgrafik-flaeche .mess-cad-inline svg {
    width: 100%;
    max-width: 560px;
  }

  #kundenSchritt5 .messsteuerung-bereich {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  #kundenSchritt5 .kunden-mess-steuerung {
    width: 100%;
    max-width: none;
    margin: 0 !important;
  }

  #kundenSchritt5 .fenster-varianten-auswahl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  #kundenSchritt5 .fenster-varianten-button {
    width: 100%;
    padding: 7px 5px;
    font-size: 11px;
  }

  #kundenSchritt5 .mess-schritt-navigation {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  #kundenSchritt5 .mess-schritt-button {
    padding: 8px 6px;
    font-size: 11px;
  }

  #kundenSchritt5 .messhinweise-bereich {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  #kundenSchritt5 .messanleitung-kurztext,
  #kundenSchritt5 .mess-detailtext,
  #kundenSchritt5 .mess-warnung,
  #kundenSchritt5 .fenster-sondermass-hinweis {
    max-width: none;
  }

  #kundenSchritt5 .messnavigation-bereich {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  #kundenSchritt5 .messanleitung-aktionen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #kundenSchritt5 .messanleitung-aktionen button {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 9px 10px;
    font-size: 12px;
  }
}

/* Block 4.1D-D – große Laptopflächen vollständig ausnutzen */
@media (min-width: 1200px) {
  .container.kunden-schritt5-container {
    width: 100%;
    max-width: 1540px;
  }

  #kundenportalBereich {
    width: min(1480px, calc(100% - 56px));
    max-width: 1480px;
    margin-right: auto;
    margin-left: auto;
  }

  #kundenSchritt5 .messanleitung-haupttitel {
    font-size: 23px;
  }

  #kundenSchritt5 .schritt5-fortschritt-kopf {
    font-size: 14px;
  }

  #kundenSchritt5 .messanleitung-typ {
    margin: 14px 0 10px;
    font-size: 23px;
  }

  #kundenSchritt5 .mess-anleitung-gross {
    grid-template-columns: minmax(560px, 1.35fr) minmax(420px, .85fr);
    column-gap: clamp(28px, 3vw, 50px);
    row-gap: 16px;
    max-width: 1400px;
    padding: 10px 18px 14px;
  }

  #kundenSchritt5 .messgrafik-bereich,
  #kundenSchritt5 .messgrafik-flaeche .mess-cad-inline,
  #kundenSchritt5 .messgrafik-flaeche .mess-cad-inline svg {
    max-width: 680px;
  }

  #kundenSchritt5 .kunden-mess-steuerung {
    gap: 12px;
  }

  #kundenSchritt5 .fenster-varianten-auswahl {
    gap: 9px;
  }

  #kundenSchritt5 .fenster-varianten-button {
    min-height: 42px;
    padding: 9px 8px;
    font-size: 13px;
  }

  #kundenSchritt5 .mess-schritt-navigation {
    gap: 10px;
  }

  #kundenSchritt5 .mess-schritt-button {
    min-height: 43px;
    padding: 10px 8px;
    font-size: 13px;
  }

  #kundenSchritt5 .mess-detailtext,
  #kundenSchritt5 .fenster-sondermass-hinweis {
    margin: 7px auto;
    padding: 11px 13px;
    font-size: 13.5px;
    line-height: 1.48;
  }

  #kundenSchritt5 .mess-warnung {
    margin: 9px auto;
    padding: 13px 15px;
    font-size: 15px;
    line-height: 1.5;
  }

  #kundenSchritt5 .messanleitung-aktionen {
    gap: 11px;
  }

  #kundenSchritt5 .messanleitung-aktionen button {
    min-height: 44px;
    padding: 11px 12px;
    font-size: 13px;
  }
}

/* Sonderformen: variable Anzahl fachlicher Messschritte auf Handy und Laptop */
#kundenSchritt5 .mess-schritt-navigation.sonderform-schritte {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#kundenSchritt5 .mess-schritt-navigation.tuer-schritte {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#kundenSchritt5 .mess-schritt-navigation.kombi-schritte {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#kundenSchritt5 .tuer-schritte .mess-schritt-button {
  white-space: normal;
  overflow-wrap: anywhere;
}

#kundenSchritt5 .kombi-schritte .mess-schritt-button {
  white-space: normal;
  overflow-wrap: anywhere;
}

#kundenSchritt5 .sonderform-schritte .mess-schritt-button {
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  #kundenSchritt5 .mess-schritt-navigation.sonderform-schritte {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  #kundenSchritt5 .sonderform-schritte .mess-schritt-button {
    min-height: 42px;
    padding: 7px 5px;
    font-size: 10.5px;
    line-height: 1.25;
  }

  #kundenSchritt5 .tuer-schritte .mess-schritt-button {
    min-height: 42px;
    padding: 7px 5px;
    font-size: 10.5px;
    line-height: 1.25;
  }

  #kundenSchritt5 .kombi-schritte .mess-schritt-button {
    min-height: 42px;
    padding: 7px 5px;
    font-size: 10.5px;
    line-height: 1.25;
  }
}

@media (min-width: 721px) and (max-width: 959px) {
  #kundenSchritt5 .mess-schritt-navigation.sonderform-schritte {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =========================================================
   MESSANLEITUNG UND FENSTERDARSTELLUNG
   Konsolidierter, maßgeblicher Stand für Schritt 5 und 6.
   Historische Versions-Patch-Kommentare wurden entfernt.
   ========================================================= */

@media (min-width: 721px) {
  #kundenSchritt5 .messgrafik-bereich,
  #kundenSchritt5 .messsteuerung-bereich,
  #kundenSchritt5 .messhinweise-bereich,
  #kundenSchritt5 .messnavigation-bereich {
    position: static !important;
    transform: none !important;
    float: none !important;
  }
}

/* Block 4.1E-A – Messgrafik in Schritt 6 */
#kundenSchritt6 .mess-layout {
  align-items: start;
}

#kundenSchritt6 .mess-anleitung-klein {
  display: block;
  width: 100%;
  max-width: 440px;
  margin: 0 auto 14px;
  padding: 10px;
  border: 1px solid #dce8ee;
  border-radius: 14px;
  background: #f8fbfd;
  overflow: visible;
}

#kundenSchritt6 .mess-cad-eingabe {
  display: block;
  width: 100%;
  height: auto !important;
  min-height: 0;
  max-width: 420px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

#kundenSchritt6 .mess-cad-eingabe svg {
  display: block;
  width: 100%;
  height: auto !important;
  max-width: 420px;
  max-height: none;
  margin: 0 auto;
}

#kundenSchritt6 .mess-anleitung-klein > .mess-bild {
  display: none;
}

@media (max-width: 720px) {
  #kundenSchritt6 .mess-layout {
    display: block;
  }

  #kundenSchritt6 .mess-anleitung-klein {
    width: 100%;
    max-width: none;
    margin-bottom: 12px;
    padding: 8px;
  }

  #kundenSchritt6 .mess-cad-eingabe,
  #kundenSchritt6 .mess-cad-eingabe svg {
    width: 100%;
    max-width: none;
  }
}

@media (min-width: 721px) {
  #kundenSchritt6 .mess-layout {
    display: grid;
    grid-template-columns: minmax(300px, 420px) minmax(420px, 1fr);
    gap: 24px;
  }

  #kundenSchritt6 .mess-anleitung-klein {
    position: sticky;
    top: 18px;
    margin: 0;
  }
}

/* V8.47 finale Priorität für Schritt 5/6 */
#kundenSchritt5 .messhinweise-bereich {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#kundenSchritt5 .mess-warnung {
  margin: 8px 0 4px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
}
#kundenSchritt6 .kunden-messhilfe-panel {
  border-radius: 16px !important;
}
#kundenSchritt6 .kunden-messhilfe-panel .mess-cad-eingabe {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
}
#kundenSchritt6 .kunden-messhilfe-panel .mess-cad-eingabe svg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* V8.50.3 finale Priorität – zentrierte Haupt-Zurücknavigation */
#appBereich #interneArbeitsTopbar {
  justify-content: center !important;
  align-items: center !important;
  padding: 7px 12px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#appBereich #interneArbeitsTopbar #interneArbeitsZurueckButton {
  width: auto !important;
  min-width: 170px;
  margin: 0 auto !important;
}
#appBereich .kundenanfrage-intern-card .kundenanfrage-aktionen {
  display:flex !important;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
}
#appBereich .kundenanfrage-intern-card .kundenanfrage-aktionen .kundenanfrage-loeschen-button {
  width:38px !important;
  min-width:38px !important;
  height:38px;
  min-height:38px;
  padding:0 !important;
}
@media (max-width:700px) {
  #appBereich .kundenanfrage-intern-card .kundenanfrage-aktionen .kundenanfrage-loeschen-button {
    flex:0 0 42px;
    width:42px !important;
    min-width:42px !important;
  }
}
.kunden-abschluss-schutz{position:relative;overflow:hidden;border-radius:18px;-webkit-user-select:none;user-select:none}
.kunden-abschluss-schutz .kunden-abschluss-wasserzeichen{position:absolute;inset:42% auto auto 50%;transform:translate(-50%,-50%) rotate(-18deg);font-size:clamp(22px,5vw,54px);font-weight:900;letter-spacing:.08em;color:rgba(31,110,66,.055);white-space:nowrap;pointer-events:none;z-index:3}
.kunden-review-kontakt-editierbar input{width:100%;margin-top:5px;background:#fff;border:1px solid #cfdae0;border-radius:9px;padding:9px 10px;font:inherit;color:#17303d;-webkit-user-select:text;user-select:text}
.kunden-review-kontakt-editierbar select,.kunden-review-element-verglasung select{width:100%;margin-top:5px;background:#fff;border:1px solid #cfdae0;border-radius:9px;padding:9px 10px;font:inherit;color:#17303d;-webkit-user-select:auto;user-select:auto;pointer-events:auto}
.kunden-review-element-verglasung{display:block;margin:7px 0;font-size:12px;font-weight:700;color:#344e5c}
.kunden-review-beratung>div{flex:1;min-width:0}.kunden-review-beratung textarea{display:block;width:100%;min-height:88px;margin-top:7px;padding:9px 10px;border:1px solid #cfdae0;border-radius:9px;background:#fff;color:#17303d;font:inherit;line-height:1.45;resize:vertical;-webkit-user-select:text;user-select:text;pointer-events:auto}
.kundenanfrage-element-bearbeitung{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.position-gespeichert{display:inline-flex;align-items:center;min-height:34px;padding:6px 11px;border-radius:999px;background:#e9f7ef;color:#247047;font-size:12px;font-weight:800;border:1px solid #bfe5cf}
@media(max-width:640px){.kundenanfrage-element-bearbeitung{gap:7px}.position-gespeichert{min-height:32px;font-size:11px}}
.kunden-review-kontakt-editierbar label{font-size:12px;font-weight:700;color:#60747e}
.aktivfluegel-auswahl{margin:12px 0;padding:12px;border:1px solid #d7e2e7;border-radius:12px;background:#f7fafb}
.aktivfluegel-auswahl>strong,.aktivfluegel-auswahl>span{display:block}.aktivfluegel-auswahl>span{font-size:12px;color:#657983;margin:2px 0 8px}
.aktivfluegel-auswahl .auswahl-segment{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:0}
.intern-projekt-fortschritt{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:0 0 18px;padding:7px;background:#edf3f1;border:1px solid #d7e3de;border-radius:14px}
.intern-projekt-fortschritt span{padding:9px 8px;border-radius:9px;text-align:center;font-size:12px;font-weight:800;color:#687a74}.intern-projekt-fortschritt span.aktiv{background:#1f6e42;color:#fff;box-shadow:0 4px 12px rgba(31,110,66,.18)}.intern-projekt-fortschritt span.bereit{background:#dff3e8;color:#175837}
.live-mail-panel{margin-top:22px;padding:18px;border:1px solid #d8e4e0;border-radius:16px;background:linear-gradient(180deg,#fbfdfc,#f3f8f6)}.live-mail-panel h2{margin:3px 0 2px}.live-mail-panel textarea{margin-top:12px;background:#fff;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;line-height:1.5}
@media(max-width:640px){.intern-projekt-fortschritt span{font-size:10px;padding:8px 4px}.kunden-review-kontakt-editierbar{grid-template-columns:1fr!important}.kunden-abschluss-schutz .kunden-abschluss-wasserzeichen{font-size:24px}}

/* ============================================================
   V8.53.0 – HomeUp Designabschluss
   Gemeinsame Designsprache fuer Kundenportal und Mitarbeiterbereich.
   Diese letzte Schicht ersetzt bewusst historische Hell-/Dunkel-Patches.
   ============================================================ */
:root {
  --hu-blue: #1f78b4;
  --hu-blue-dark: #155f91;
  --hu-blue-soft: #eaf4fb;
  --hu-blue-softer: #f5f9fc;
  --hu-ink: #193247;
  --hu-ink-strong: #10283b;
  --hu-muted: #607488;
  --hu-bg: #f3f6f9;
  --hu-card: #ffffff;
  --hu-card-soft: #f8fafc;
  --hu-line: #d9e3ec;
  --hu-line-strong: #c8d6e2;
  --hu-success: #1f7a50;
  --hu-success-soft: #e9f7ef;
  --hu-danger: #b4232c;
  --hu-danger-soft: #fff1f2;
  --hu-warning: #9a6200;
  --hu-warning-soft: #fff8e8;
  --hu-radius-sm: 10px;
  --hu-radius: 14px;
  --hu-radius-lg: 18px;
  --hu-radius-xl: 22px;
  --hu-shadow-sm: 0 5px 16px rgba(22, 56, 82, .07);
  --hu-shadow: 0 12px 34px rgba(22, 56, 82, .10);
  --hu-shadow-lg: 0 20px 52px rgba(22, 56, 82, .13);
}

html {
  background: var(--hu-bg);
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 280px;
  background:
    radial-gradient(circle at 12% 0%, rgba(31, 120, 180, .08), transparent 28rem),
    linear-gradient(180deg, #f8fafc 0%, var(--hu-bg) 42%, #eef3f7 100%);
  color: var(--hu-ink);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

.container {
  width: min(100%, 1280px);
  max-width: 1280px;
  margin-inline: auto;
}

.logoBox { margin: 10px 0 4px; display: flex; justify-content: center; align-items: center; width: 100%; }
.logo {
  width: auto;
  max-width: 184px;
  max-height: 74px;
  object-fit: contain;
  mix-blend-mode: normal;
  filter: none;
}
.reset-mfa-bestaetigung {
  margin: 16px 0;
  padding: 14px;
  border: 1px solid #c8deed;
  border-radius: 12px;
  background: #eef7fb;
  color: var(--hu-ink);
}
.reset-mfa-bestaetigung strong { display: block; margin-bottom: 5px; color: var(--hu-ink-strong); }
.reset-mfa-bestaetigung p { margin: 0 0 10px; color: var(--hu-muted); line-height: 1.45; }
#passwortNeuBereich #resetPasswortStatus { margin-top: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.app-version-footer { color: #758694; font-size: 10px; white-space: nowrap; }
.portal-kontakt {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 16px auto 0;
  color: var(--hu-muted);
  font-size: 13px;
}
.portal-kontakt a {
  color: var(--hu-blue-dark);
  font-weight: 700;
  text-decoration: none;
}
.portal-kontakt a:hover,
.portal-kontakt a:focus-visible { text-decoration: underline; }
body > .container > h1 {
  margin: 2px 0 16px;
  color: #587086;
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 700;
  letter-spacing: .01em;
}

h2, h3, h4 { color: var(--hu-ink-strong); line-height: 1.25; }
p, li, dd, dt, label, span, strong { overflow-wrap: anywhere; }
small { line-height: 1.45; }

button,
input,
select,
textarea { font-family: inherit; }

input,
select,
textarea {
  min-height: 46px;
  border: 1px solid var(--hu-line-strong);
  border-radius: 11px;
  background: #fff;
  color: var(--hu-ink);
  line-height: 1.4;
}

textarea { min-height: 104px; resize: vertical; }

input:focus,
select:focus,
textarea:focus {
  border-color: var(--hu-blue) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(31, 120, 180, .14) !important;
}

button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(31, 120, 180, .38);
  outline-offset: 2px;
}

#startBereich,
#kundenportalBereich,
#loginBereich,
#passwortNeuBereich {
  border: 1px solid var(--hu-line) !important;
  border-radius: var(--hu-radius-xl) !important;
  background: rgba(255, 255, 255, .97) !important;
  color: var(--hu-ink) !important;
  box-shadow: var(--hu-shadow) !important;
}

#kundenportalBereich {
  max-width: 1220px;
  margin-inline: auto;
}

#kundenportalBereich h2,
#kundenportalBereich h3,
#kundenportalBereich h4,
#loginBereich h2,
#loginBereich h3,
#passwortNeuBereich h2,
#passwortNeuBereich h3 { color: var(--hu-ink-strong) !important; }

#kundenportalBereich label,
#kundenportalBereich .startText,
#loginBereich label,
#passwortNeuBereich label { color: var(--hu-muted) !important; }

/* Gemeinsame Buttons: Blau = Aktion, Rot = Gefahr, Gruen = Status/Erfolg. */
#startBereich button:not(.portal-card-intern),
#kundenportalBereich button:not(.kunden-element-loeschen):not(.button-danger),
#loginBereich button:not(.button-danger),
#passwortNeuBereich button:not(.button-danger),
#appBereich button:not(.button-danger):not(.kundenanfrage-loeschen-button):not(.papierkorb-loeschen-button) {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--hu-blue-dark), var(--hu-blue));
  color: #fff;
  box-shadow: 0 5px 14px rgba(31, 120, 180, .16);
}

#startBereich button:not(.portal-card):hover,
#kundenportalBereich button:hover,
#loginBereich button:hover,
#passwortNeuBereich button:hover,
#appBereich button:hover { filter: brightness(1.035); }

#kundenportalBereich .button-secondary,
#kundenportalBereich .button-neutral,
#kundenportalBereich button[onclick*="Zur"],
#kundenportalBereich button[onclick*="zur"],
#loginBereich .button-secondary,
#loginBereich .button-neutral,
#passwortNeuBereich .button-secondary,
#appBereich .button-secondary,
#appBereich .button-neutral,
#appBereich .top-back,
#appBereich #interneArbeitsZurueckButton {
  border-color: #cdddea !important;
  background: var(--hu-blue-soft) !important;
  color: var(--hu-blue-dark) !important;
  box-shadow: none !important;
}

#kundenportalBereich .kunden-element-loeschen,
#kundenportalBereich .button-danger,
#appBereich .button-danger,
#appBereich .kundenanfrage-loeschen-button,
#appBereich .papierkorb-loeschen-button {
  border-color: #efc5c9 !important;
  background: var(--hu-danger-soft) !important;
  color: var(--hu-danger) !important;
  box-shadow: none !important;
}

/* Startseite: eine klare Hauptaktion, Mitarbeiterzugang bewusst sekundaer. */
#startBereich.start-hero { max-width: 1080px; margin-inline: auto; padding: clamp(20px, 3vw, 34px); }
#startBereich .hero-kicker { color: var(--hu-blue-dark); font-size: 11px; letter-spacing: .12em; }
#startBereich .portal-grid { gap: 16px; }
#startBereich .portal-card {
  min-height: 164px;
  border: 1px solid var(--hu-line) !important;
  border-radius: var(--hu-radius-lg) !important;
  box-shadow: var(--hu-shadow-sm) !important;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
#startBereich .portal-card:hover { transform: translateY(-2px); border-color: #a9cbe2 !important; box-shadow: var(--hu-shadow) !important; }
#startBereich .portal-card-kunde {
  background: linear-gradient(145deg, #155f91, #2587c3) !important;
  color: #fff !important;
}
#startBereich .portal-card-kunde strong,
#startBereich .portal-card-kunde span { color: #fff !important; }
#startBereich .portal-card-intern {
  background: linear-gradient(180deg, #fff, #f5f9fc) !important;
  color: var(--hu-ink) !important;
  width: 240px !important;
  max-width: 100% !important;
  min-height: 86px !important;
  flex: 0 0 auto !important;
  align-self: center;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 16px !important;
}
#startBereich .portal-card-intern strong {
  display: block !important;
  color: var(--hu-ink-strong) !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
#startBereich .portal-card-intern span { color: var(--hu-muted) !important; }
#startBereich .portal-card-intern-logo {
  display: block !important;
  width: 92px !important;
  max-width: 92px !important;
  height: 38px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  pointer-events: none;
}

/* Kundenportal: Karten, Fortschritt und Formulare auf einem Raster. */
#kundenportalBereich > [id^="kundenSchritt"] { max-width: 1120px; margin-inline: auto; }
#kundenportalBereich .kunden-formular-gruppe,
#kundenportalBereich .kunden-element-card,
#kundenportalBereich .kunden-review-liste > div,
#kundenportalBereich .kunden-livevorschau-card,
#kundenportalBereich .kunden-mass-formular,
#kundenportalBereich .kunden-messhilfe-panel,
#kundenportalBereich .aktivfluegel-auswahl {
  border-color: var(--hu-line) !important;
  background: #fff !important;
  color: var(--hu-ink) !important;
  box-shadow: var(--hu-shadow-sm);
}
#kundenportalBereich .kunden-formular-gruppe,
#kundenportalBereich .kunden-livevorschau-card,
#kundenportalBereich .kunden-mass-formular { border-radius: var(--hu-radius-lg) !important; }
#kundenportalBereich .element-kachel {
  border: 1px solid var(--hu-line) !important;
  border-radius: var(--hu-radius-lg) !important;
  background: linear-gradient(180deg, #fff, #f8fbfd) !important;
  color: var(--hu-ink) !important;
  box-shadow: var(--hu-shadow-sm) !important;
}
#kundenportalBereich .element-kachel:hover { border-color: #9dc6e0 !important; box-shadow: var(--hu-shadow) !important; }
#kundenportalBereich .element-bild { background: var(--hu-blue-softer); }
#kundenportalBereich .kunden-fortschritt-balken { background: #e1e9f0; }
#kundenportalBereich .kunden-fortschritt-balken span { background: linear-gradient(90deg, var(--hu-blue-dark), #42a0d3); }
#kundenportalBereich .step { background: #edf2f6; color: #6d7d8d; }
#kundenportalBereich .step.active { background: var(--hu-blue); color: #fff; }
#kundenportalBereich .kunden-messhilfe-wichtig,
#kundenportalBereich .mess-warnung { border-color: #f0d69b !important; background: var(--hu-warning-soft) !important; color: #76500b !important; }
#kundenportalBereich .kunden-livevorschau,
#kundenportalBereich .mess-cad-eingabe { overflow: visible; }
#kundenportalBereich .kunden-livevorschau svg,
#kundenportalBereich .mess-cad-eingabe svg { font-family: inherit; }
#kundenportalBereich svg text,
#appBereich svg text {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

/* V8.56.1 – Griffseiten und Elementaktionen auf Handy + Laptop vereinheitlicht. */
#kundenportalBereich .aktivfluegel-auswahl {
  max-width: 680px;
  margin: 14px auto;
  padding: 14px;
  border: 1px solid #cbdfea !important;
  border-radius: 15px !important;
  background: linear-gradient(180deg, #f8fcff, #eef6fb) !important;
  box-shadow: 0 6px 18px rgba(22, 88, 132, .07) !important;
}
#kundenportalBereich .aktivfluegel-auswahl > strong {
  color: var(--hu-ink-strong);
  font-size: 13px;
  line-height: 1.3;
}
#kundenportalBereich .aktivfluegel-auswahl > span {
  margin: 3px 0 9px;
  color: var(--hu-muted);
  font-size: 11px;
}
#kundenportalBereich .aktivfluegel-auswahl .auswahl-segment {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding: 4px;
  border: 1px solid #d4e3ec;
  border-radius: 11px;
  background: #e9f2f7;
}
#kundenportalBereich .aktivfluegel-auswahl .auswahl-segment button {
  min-height: 40px;
  margin: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #31556d !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}
#kundenportalBereich .aktivfluegel-auswahl .auswahl-segment button:hover {
  background: rgba(255, 255, 255, .75) !important;
}
#kundenportalBereich .aktivfluegel-auswahl .auswahl-segment button.ist-aktiv {
  border-color: #86b9d7 !important;
  background: #fff !important;
  color: var(--hu-blue-dark) !important;
  box-shadow: 0 3px 10px rgba(26, 103, 151, .10) !important;
}

@media (min-width: 701px) {
  #kundenportalBereich .kunden-element-aktionen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 7px;
    width: min(100%, 300px);
    margin-left: auto;
  }
  #kundenportalBereich .kunden-mengensteuerung {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    grid-column: 1 / -1;
    width: 100%;
    min-height: 38px;
    align-items: stretch;
    border-radius: 9px;
  }
  #kundenportalBereich .kunden-mengensteuerung button {
    width: 42px !important;
    min-width: 42px;
    min-height: 38px !important;
    padding: 0 !important;
    font-size: 19px !important;
  }
  #kundenportalBereich .kunden-menge-feld {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 3px 8px;
  }
  #kundenportalBereich .kunden-menge-feld input {
    width: 58px;
    min-width: 52px;
    max-width: 72px;
    min-height: 30px;
    height: 30px;
    font-size: 12px;
    line-height: 1;
  }
  #kundenportalBereich .kunden-element-bearbeiten,
  #kundenportalBereich .kunden-element-loeschen {
    width: 100% !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
  }
}

/* V8.61.0 finaler Vorrang nach allen historischen Responsive-Regeln */
#kundenportalBereich .kunden-element-aktionen {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 8px !important;
}
#kundenportalBereich .kunden-mengensteuerung,
#kundenportalBereich .kunden-element-duplizieren { grid-column: 1 / -1 !important; }
#kundenportalBereich .kunden-element-bearbeiten,
#kundenportalBereich .kunden-element-loeschen,
#kundenportalBereich .kunden-element-duplizieren { width: 100% !important; min-width: 0 !important; margin: 0 !important; }

@media (max-width: 700px) {
  #kundenportalBereich .aktivfluegel-auswahl {
    width: 100%;
    margin: 12px 0;
    padding: 12px;
  }
  #kundenportalBereich .aktivfluegel-auswahl .auswahl-segment button {
    min-height: 38px;
    padding-inline: 7px !important;
    font-size: 11px !important;
  }
}

/* Mitarbeiterbereich: dieselbe helle HomeUp-Sprache statt historischem Dunkel/Rot. */
#appBereich { color: var(--hu-ink); }
#appBereich .intern-start-shell,
#appBereich #kundenanfragenAuswahlBereich,
#appBereich #kundenanfragenInternBereich,
#appBereich .app-topbar,
#appBereich .dashboard-shell,
#appBereich .dashboard-card,
#appBereich .dashboard-panel,
#appBereich .anfrage-modal-card,
#appBereich > #projektBereich,
#appBereich > #aufmassBereich,
#appBereich > #kontoBereich,
#appBereich > #mitarbeiterverwaltungBereich {
  border-color: var(--hu-line) !important;
  background: rgba(255, 255, 255, .98) !important;
  color: var(--hu-ink) !important;
  box-shadow: var(--hu-shadow) !important;
}

#appBereich .intern-start-shell,
#appBereich #kundenanfragenAuswahlBereich,
#appBereich #kundenanfragenInternBereich,
#appBereich .dashboard-shell,
#appBereich > #projektBereich,
#appBereich > #aufmassBereich,
#appBereich > #kontoBereich,
#appBereich > #mitarbeiterverwaltungBereich,
#appBereich .app-topbar,
#appBereich .intern-benutzerleiste {
  width: min(100%, 1220px);
  max-width: 1220px;
  margin-inline: auto;
}

#appBereich .intern-start-kopf h2,
#appBereich .section-heading-row h2,
#appBereich .app-topbar h2,
#appBereich .dashboard-panel h3,
#appBereich .anfrage-modal-card h2,
#appBereich .anfrage-modal-card h3,
#appBereich > #projektBereich h2,
#appBereich > #projektBereich h3,
#appBereich > #aufmassBereich h2,
#appBereich > #aufmassBereich h3,
#appBereich > #kontoBereich h2,
#appBereich > #kontoBereich h3,
#appBereich > #mitarbeiterverwaltungBereich h2,
#appBereich > #mitarbeiterverwaltungBereich h3 { color: var(--hu-ink-strong) !important; }

#appBereich .hero-kicker { color: var(--hu-blue-dark) !important; }
#appBereich .startText,
#appBereich .dashboard-card span,
#appBereich .dashboard-card small,
#appBereich .anfrage-meta,
#appBereich .anfrage-detail-panel p,
#appBereich .kundenanfrage-kunde > span { color: var(--hu-muted) !important; }

#appBereich .intern-benutzerleiste {
  border: 1px solid var(--hu-line) !important;
  border-radius: var(--hu-radius) !important;
  background: rgba(255,255,255,.94) !important;
  color: var(--hu-ink) !important;
  box-shadow: var(--hu-shadow-sm) !important;
}
#appBereich .intern-benutzerleiste strong { color: var(--hu-ink-strong) !important; }
#appBereich .intern-benutzerleiste span { color: var(--hu-muted) !important; }
#appBereich .rollen-badge { background: var(--hu-blue-soft) !important; color: var(--hu-blue-dark) !important; }

#appBereich .intern-auswahlkarte {
  position: relative;
  min-height: 166px;
  overflow: hidden;
  border: 1px solid var(--hu-line) !important;
  background: linear-gradient(145deg, #ffffff, #f1f7fb) !important;
  color: var(--hu-ink) !important;
  box-shadow: var(--hu-shadow-sm) !important;
}
#appBereich .intern-auswahlkarte::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--hu-blue), #72b8df);
}
#appBereich .intern-auswahlkarte strong { color: var(--hu-ink-strong) !important; }
#appBereich .intern-auswahlkarte span { color: var(--hu-muted) !important; }
#appBereich .intern-auswahlkarte:hover { border-color: #a8cce3 !important; transform: translateY(-1px); box-shadow: var(--hu-shadow) !important; }

#appBereich .anfragen-toolbar,
#appBereich .kundenanfrage-karte,
#appBereich .kundenanfrage-intern-card,
#appBereich .anfrage-detail-panel,
#appBereich .mitarbeiter-card,
#appBereich .mitarbeiter-card.ist-inaktiv,
#appBereich .system-check-output {
  border-color: var(--hu-line) !important;
  background: var(--hu-card-soft) !important;
  color: var(--hu-ink) !important;
  box-shadow: none !important;
}
#appBereich .kundenanfrage-intern-card { border-radius: var(--hu-radius) !important; }
#appBereich .kundenanfrage-karte strong,
#appBereich .kundenanfrage-karte h3,
#appBereich .kundenanfrage-intern-kopf strong,
#appBereich .anfrage-detail-panel strong { color: var(--hu-ink-strong) !important; }
#appBereich .kundenanfrage-intern-kopf > div > span { color: var(--hu-muted) !important; }
#appBereich .kundenanfrage-kurzinfo span,
#appBereich .mitarbeiter-meta span {
  border-color: var(--hu-line) !important;
  background: #eef4f8 !important;
  color: #486176 !important;
}

#appBereich .anfragen-toolbar label,
#appBereich > #projektBereich label,
#appBereich > #aufmassBereich label,
#appBereich > #kontoBereich label,
#appBereich > #mitarbeiterverwaltungBereich label { color: #52697e !important; }

#appBereich .anfragen-toolbar input,
#appBereich .anfragen-toolbar select,
#appBereich .anfrage-modal-card input,
#appBereich .anfrage-modal-card select,
#appBereich .anfrage-modal-card textarea,
#appBereich > #projektBereich input,
#appBereich > #projektBereich select,
#appBereich > #projektBereich textarea,
#appBereich > #aufmassBereich input,
#appBereich > #aufmassBereich select,
#appBereich > #aufmassBereich textarea,
#appBereich > #kontoBereich input,
#appBereich > #kontoBereich select,
#appBereich > #kontoBereich textarea,
#appBereich > #mitarbeiterverwaltungBereich input,
#appBereich > #mitarbeiterverwaltungBereich select,
#appBereich > #mitarbeiterverwaltungBereich textarea {
  border-color: var(--hu-line-strong) !important;
  background: #fff !important;
  color: var(--hu-ink) !important;
}

#appBereich .intern-livevorschau-card {
  border-color: var(--hu-line) !important;
  background: linear-gradient(145deg, #f9fbfd, #eef6fb) !important;
  box-shadow: var(--hu-shadow-sm);
}
#appBereich .intern-livevorschau-kopf strong { color: var(--hu-ink-strong) !important; }
#appBereich .intern-livevorschau-hinweis { color: var(--hu-muted) !important; }
#appBereich .intern-livevorschau { border-color: var(--hu-line) !important; background: #fff !important; }
#appBereich .kompakter-hinweis {
  margin: 6px 0 12px;
  color: var(--hu-muted) !important;
  font-size: 12px;
  line-height: 1.45;
}

.intern-projekt-fortschritt {
  border-color: var(--hu-line) !important;
  background: #edf3f7 !important;
}
.intern-projekt-fortschritt span { color: #65788b !important; }
.intern-projekt-fortschritt span.aktiv {
  background: var(--hu-blue) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(31,120,180,.18) !important;
}
.intern-projekt-fortschritt span.bereit { background: #dff0fa !important; color: var(--hu-blue-dark) !important; }

.live-mail-panel {
  border-color: var(--hu-line) !important;
  background: linear-gradient(180deg, #fbfdff, #f1f7fb) !important;
  box-shadow: var(--hu-shadow-sm);
}
.live-mail-panel textarea { border-color: var(--hu-line-strong) !important; background: #fff !important; color: var(--hu-ink) !important; }

#appBereich .security-hinweis {
  border-color: #e5c678 !important;
  border-left: 4px solid #d19a25 !important;
  background: var(--hu-warning-soft) !important;
  color: #6f500d !important;
}
#appBereich .konto-gefahrenbereich,
#appBereich .supabase-fehlerkarte {
  border-color: #efc5c9 !important;
  background: #fff8f8 !important;
  color: #70252b !important;
}
#appBereich .konto-gefahrenbereich h3 { color: var(--hu-danger) !important; }

#appBereich .anfrage-modal { background: rgba(14, 34, 51, .58); backdrop-filter: blur(3px); }
#appBereich .anfrage-modal-card { border-radius: var(--hu-radius-lg) !important; }
#appBereich .anfrage-modal-card .anfrage-datenliste dd { color: var(--hu-ink) !important; }
#appBereich .anfrage-modal-card .anfrage-datenliste dt { color: var(--hu-muted) !important; }
#appBereich .anfrage-modal-card .anfrage-datenliste > div { border-bottom-color: var(--hu-line) !important; }

/* Robuste Abstaende und Umbruchregeln fuer schmale/ungewoehnliche Displays. */
#kundenportalBereich .kunden-schritt-aktionen,
#appBereich .intern-benutzeraktionen,
#appBereich .kundenanfrage-aktionen,
#appBereich .mitarbeiter-aktionen,
#appBereich .konto-gefahren-aktionen {
  gap: 10px;
}

#kundenportalBereich button,
#appBereich button { white-space: normal; overflow-wrap: anywhere; }

/* Kundenstart: lesbarer Umbruch und belastbarer Kontrast auf kleinen Displays. */
#kundenportalBereich #kundenVerglasungAuswahl button {
  overflow-wrap: normal;
  word-break: normal;
}
#kundenportalBereich .kunden-formular-gruppe-kopf span,
#kundenportalBereich .consent-row span,
#kundenportalBereich .kunden-mass-hinweis,
#kundenportalBereich .kunden-messseite-hinweis {
  color: #536b7a !important;
  opacity: 1 !important;
}
@media (max-width: 430px) {
  #kundenportalBereich #kundenVerglasungAuswahl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }
  #kundenportalBereich #kundenVerglasungAuswahl button {
    min-width: 0;
    padding: 11px 5px;
    font-size: clamp(13px, 3.7vw, 16px);
  }
  #kundenportalBereich #kundenVerglasungAuswahl button span { font-size: .72em; }
}

/* Auswahl- und Messsteuerungen bleiben visuell als Auswahl erkennbar. */
#kundenportalBereich .auswahl-segment button,
#appBereich .auswahl-segment button,
#kundenportalBereich .mess-schritt-button,
#appBereich .quick-buttons button,
#kundenportalBereich .quick-buttons button,
#kundenportalBereich .kunden-raum-schnellwahl button {
  border-color: #cbdbe6 !important;
  background: #eef4f8 !important;
  color: #294858 !important;
  box-shadow: none !important;
}
#kundenportalBereich .auswahl-segment button.ist-aktiv,
#appBereich .auswahl-segment button.ist-aktiv,
#kundenportalBereich .mess-schritt-button.aktiv {
  border-color: var(--hu-blue) !important;
  background: var(--hu-blue) !important;
  color: #fff !important;
  box-shadow: 0 4px 11px rgba(31,120,180,.18) !important;
}

@media (min-width: 721px) {
  #kundenportalBereich { padding: clamp(20px, 2.7vw, 34px); }
  #appBereich .intern-start-shell,
  #appBereich #kundenanfragenAuswahlBereich,
  #appBereich #kundenanfragenInternBereich,
  #appBereich > #projektBereich,
  #appBereich > #aufmassBereich,
  #appBereich > #kontoBereich,
  #appBereich > #mitarbeiterverwaltungBereich { padding: clamp(18px, 2vw, 26px); }
}

@media (max-width: 860px) {
  .container { width: 100%; }
  #appBereich .intern-hauptauswahl { grid-template-columns: 1fr; }
  #appBereich .intern-auswahlkarte { min-height: 132px; }
  #appBereich .mitarbeiter-grid,
  #appBereich .konto-grid { grid-template-columns: 1fr; }
  #kundenSchritt6 .mess-layout { grid-template-columns: minmax(260px, 330px) minmax(0, 1fr); gap: 16px; }
}

@media (max-width: 700px) {
  body {
    padding: max(7px, var(--safe-top)) max(7px, var(--safe-right)) max(12px, var(--safe-bottom)) max(7px, var(--safe-left));
    font-size: 14px;
  }
  .container { padding-bottom: calc(62px + var(--safe-bottom)); }
  .logoBox { margin-top: 3px; }
  .logo { max-width: 142px; max-height: 58px; }
  .portal-kontakt { margin-top: 13px; gap: 5px 7px; font-size: 12.5px; }
  .portal-kontakt > span:first-child { flex-basis: 100%; text-align: center; }
  body > .container > h1 { margin-bottom: 9px; font-size: 14px; }

  #startBereich,
  #kundenportalBereich,
  #loginBereich,
  #passwortNeuBereich { border-radius: 16px !important; }
  #startBereich.start-hero { padding: 17px 13px; }
  #startBereich .portal-grid { grid-template-columns: 1fr; gap: 10px; }
  #startBereich .portal-card { min-height: 118px; padding: 16px; }
  #startBereich .portal-card-intern { width: 220px !important; max-width: 100% !important; min-height: 82px !important; gap: 6px; padding: 11px 14px !important; }
  #startBereich .portal-card-intern-logo { width: 84px !important; max-width: 84px !important; height: 34px !important; }

  #kundenportalBereich { padding: 12px !important; }
  #kundenportalBereich .element-kachel-grid { gap: 9px; }
  #kundenportalBereich .kunden-formular-gruppe { padding: 13px; }
  #kundenportalBereich .kunden-schritt-aktionen { display: grid; grid-template-columns: 1fr; }
  #kundenportalBereich .kunden-schritt-aktionen button { width: 100%; margin-top: 0; }
  #kundenSchritt6 .mess-layout { display: block; }

  #appBereich .intern-start-shell,
  #appBereich #kundenanfragenAuswahlBereich,
  #appBereich #kundenanfragenInternBereich,
  #appBereich > #projektBereich,
  #appBereich > #aufmassBereich,
  #appBereich > #kontoBereich,
  #appBereich > #mitarbeiterverwaltungBereich {
    width: 100%;
    margin: 10px 0 16px;
    padding: 13px;
    border-radius: 15px;
  }
  #appBereich .app-topbar,
  #appBereich .intern-benutzerleiste { width: 100%; }
  #appBereich .intern-benutzerleiste { align-items: stretch; }
  #appBereich .intern-benutzeraktionen { display: grid; grid-template-columns: 1fr; width: 100%; }
  #appBereich .intern-benutzeraktionen button { width: 100%; margin: 0; }
  #appBereich .anfragen-toolbar { grid-template-columns: 1fr; padding: 10px; }
  #appBereich .kundenanfrage-intern-card { padding: 12px; }
  #appBereich .kundenanfrage-intern-card .kundenanfrage-aktionen { align-items: stretch; }
  #appBereich .intern-livevorschau-card { grid-template-columns: 1fr; }
  #appBereich .anfrage-modal { padding: 7px; }
  #appBereich .anfrage-modal-card { width: 100%; padding: 13px; border-radius: 14px !important; }

  .form-grid.grid-2,
  .form-grid.grid-3,
  .grid-2,
  .grid-3 { grid-template-columns: 1fr !important; }
}

@media (max-width: 420px) {
  #kundenportalBereich .element-kachel-grid { grid-template-columns: 1fr; }
  #kundenportalBereich .element-bild { height: 118px; }
  #kundenportalBereich .kunden-fortschritt .step { padding-inline: 8px; }
  .intern-projekt-fortschritt { gap: 4px; padding: 5px; }
  .intern-projekt-fortschritt span { padding: 7px 3px; font-size: 9.5px !important; }
}

/* ============================================================
   V8.53.1 – Mobile Elementaktionen + letzter UI-Feinschliff
   ============================================================ */
#kundenportalBereich .kunden-menge-feld input {
  min-height: 30px;
  height: 30px;
  line-height: 1;
  text-align: center;
}

/* ============================================================
   V8.59.0 – Zielraum-Kopie, Montagehinweis und Präsenzanzeige
   ============================================================ */
#kundenportalBereich .bauvorhaben-info {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 8px 2px 0 !important;
  padding: 9px 11px !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: #52697e !important;
  background: #f1f7fb !important;
  border: 1px solid #d4e4ee !important;
  border-radius: 10px !important;
}
#kundenportalBereich .bauvorhaben-info span {
  flex: 0 0 auto;
  color: #1672aa !important;
  font-size: 13px !important;
  line-height: 1.25;
  opacity: 1 !important;
}

.kunden-dialog-offen { overflow: hidden; }
.kunden-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 10020;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(18, 35, 50, .58);
  backdrop-filter: blur(5px);
}
.kunden-dialog-card {
  width: min(100%, 520px);
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: clamp(18px, 4vw, 26px);
  border: 1px solid #d1e0e9;
  border-radius: 18px;
  background: #fff;
  color: #20384b;
  box-shadow: 0 24px 70px rgba(13, 37, 55, .28);
}
.kunden-dialog-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.kunden-dialog-kopf h3 { margin: 3px 0 0; color: #17324d; }
.kunden-dialog-kicker {
  color: #1672aa;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.kunden-dialog-schliessen {
  width: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: #edf4f8 !important;
  color: #27495e !important;
  font-size: 25px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}
.kunden-dialog-hinweis { margin: 0 0 17px; color: #61788b; font-size: 13px; line-height: 1.5; }
.kunden-dialog-card label { display: block; margin-top: 12px; color: #344f63; font-weight: 750; }
.kunden-dialog-card select,
.kunden-dialog-card input { width: 100%; margin-top: 6px; }
.kunden-dialog-aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.kunden-dialog-aktionen button { margin: 0 !important; }

#appBereich .intern-start-kopf > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.mitarbeiter-praesenz {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 6px 11px;
  border: 1px solid #cfe0ea;
  border-radius: 999px;
  background: #f3f8fb;
  color: #526b7c;
  font-size: 12px;
  font-weight: 700;
}
.mitarbeiter-praesenz-punkt {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #91a5b2;
  box-shadow: 0 0 0 3px rgba(145, 165, 178, .16);
}
.mitarbeiter-praesenz[data-status="online"] { border-color: #b9dfc8; background: #eff9f3; color: #286844; }
.mitarbeiter-praesenz[data-status="online"] .mitarbeiter-praesenz-punkt { background: #35a863; box-shadow: 0 0 0 3px rgba(53, 168, 99, .15); }
.mitarbeiter-praesenz[data-status="fehler"] { border-color: #ead8b7; background: #fff8eb; color: #795d28; }
.mitarbeiter-praesenz[data-status="fehler"] .mitarbeiter-praesenz-punkt { background: #c7963e; }

@media (max-width: 560px) {
  #kundenportalBereich .bauvorhaben-info { font-size: 11.5px !important; }
  .kunden-dialog-aktionen { grid-template-columns: 1fr; }
  .kunden-dialog-aktionen button:last-child { grid-row: 1; }
  #kundenportalBereich .kunden-element-aktionen .kunden-element-duplizieren { grid-column: 1 / -1; }
}

/* ============================================================
   V8.60.0 – Allgemeine Hinweise und zentrale Schnellbausteine
   ============================================================ */
.allgemeine-hinweise-start,
.projekt-allgemeine-hinweise,
.hinweisbausteine-verwaltung {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid #d4e1e9;
  border-radius: 16px;
  background: #f7fafc;
}
.allgemeine-hinweise-start > label,
.projekt-allgemeine-hinweise > summary,
.hinweisbausteine-verwaltung > summary {
  color: #243f52;
  font-weight: 800;
}
.projekt-allgemeine-hinweise > summary,
.hinweisbausteine-verwaltung > summary { cursor: pointer; }
.projekt-allgemeine-hinweise textarea,
.allgemeine-hinweise-start textarea { width: 100%; margin-top: 8px; }
.projekt-allgemeine-hinweise .button-inline { margin-top: 9px; }
.hinweisbausteine-verwaltung { margin-bottom: 12px; }
.hinweisbaustein-zeile,
.hinweisbaustein-neu {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.hinweisbaustein-zeile input,
.hinweisbaustein-neu input { min-width: 0; margin: 0; }
.hinweisbaustein-zeile button,
.hinweisbaustein-neu button { margin: 0 !important; white-space: nowrap; }
.foerderhinweis-service {
  margin-top: 13px !important;
  padding-top: 13px;
  border-top: 1px solid rgba(53, 120, 78, .2);
}

@media (max-width: 560px) {
  .allgemeine-hinweise-start,
  .projekt-allgemeine-hinweise,
  .hinweisbausteine-verwaltung { padding: 13px; border-radius: 13px; }
  .hinweisbaustein-zeile,
  .hinweisbaustein-neu { grid-template-columns: 1fr; }
  .hinweisbaustein-zeile button,
  .hinweisbaustein-neu button { width: 100% !important; }
}

@media (max-width: 700px) {
  #kundenportalBereich .kunden-element-aktionen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 7px;
    width: 100%;
  }
  #kundenportalBereich .kunden-mengensteuerung {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    grid-column: 1 / -1;
    width: 100%;
    min-height: 38px;
    align-items: stretch;
  }
  #kundenportalBereich .kunden-mengensteuerung button {
    width: 42px !important;
    min-width: 42px;
    min-height: 38px !important;
    padding: 0 !important;
    font-size: 19px !important;
  }
  #kundenportalBereich .kunden-menge-feld {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    padding: 3px 8px;
  }
  #kundenportalBereich .kunden-menge-feld input {
    width: 58px;
    min-width: 52px;
    max-width: 72px;
  }
  #kundenportalBereich .kunden-element-bearbeiten,
  #kundenportalBereich .kunden-element-loeschen {
    width: 100% !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
}
/* Kundenportal-Sprachauswahl und Hilfezugang V8.63.4 */
.kunden-sprachdialog { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 20px; background: rgba(13,35,52,.72); backdrop-filter: blur(8px); }
.kunden-sprachdialog[hidden] { display: none; }
.kunden-sprachdialog-karte { width: min(720px,100%); max-height: calc(100vh - 40px); overflow: auto; padding: clamp(24px,5vw,48px); border-radius: 28px; background: #fff; color: #183246; text-align: center; box-shadow: 0 30px 90px rgba(0,0,0,.3); }
.kunden-sprachdialog-logo { width: min(230px,65%); max-height: 76px; object-fit: contain; margin-bottom: 14px; }
.kunden-sprachdialog-karte h2 { margin: 8px 0; }
.kunden-sprachraster { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 24px; }
.kunden-sprachraster button { min-height: 70px; display: flex; align-items: center; justify-content: flex-start; gap: 14px; padding: 14px 18px; border: 1px solid #cbdde9; border-radius: 16px; background: #f7fbfe; color: #183246; font-size: 1rem; }
.kunden-sprachraster button:hover,.kunden-sprachraster button:focus-visible { border-color: #2585c4; background: #eaf6fd; transform: translateY(-1px); }
.kunden-sprachraster button span { font-size: 1.7rem; }
.kundenportal-kopfaktionen { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kunden-sprache-wechseln { width: auto; min-width: 0; padding: 10px 15px; white-space: nowrap; }
#kundenportalBereich[dir="rtl"] { direction: rtl; }
#kundenportalBereich[dir="rtl"] input,#kundenportalBereich[dir="rtl"] textarea { text-align: right; }
@media (max-width: 560px) { .kunden-sprachraster { grid-template-columns: 1fr; } .kunden-sprachdialog { padding: 10px; } .kunden-sprachdialog-karte { padding: 22px 16px; border-radius: 22px; } .kundenportal-kopfaktionen { align-items: stretch; } .kundenportal-kopfaktionen button { font-size: .86rem; } }

/* Dauerhaft erreichbare, kompakte Kundenhilfe */
.kunden-hilfe-button { position: fixed; right: max(16px,env(safe-area-inset-right)); bottom: max(16px,env(safe-area-inset-bottom)); z-index: 9000; width: auto; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 999px; box-shadow: 0 10px 28px rgba(18,67,98,.25); }
.kunden-hilfe-menue { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; padding: 20px; }
.kunden-hilfe-menue[hidden] { display: none; }
.kunden-hilfe-menue .kunden-hilfe-hintergrund { position: absolute; inset: 0; width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: rgba(13,35,52,.58) !important; box-shadow: none !important; backdrop-filter: blur(6px); transform: none !important; }
.kunden-hilfe-karte { position: relative; z-index: 1; width: min(520px,100%); max-height: calc(100dvh - 40px); overflow: auto; padding: clamp(20px,4vw,30px); border: 1px solid rgba(203,221,233,.9); border-radius: 26px; background: #fff; color: #183246; box-shadow: 0 26px 80px rgba(0,0,0,.32); }
.kunden-hilfe-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.kunden-hilfe-kopf h3 { margin: 4px 0 0; }
.kunden-hilfe-schliessen { width: 42px; min-width: 42px; min-height: 42px; padding: 0; border-radius: 50%; font-size: 1.55rem; }
.kunden-hilfe-karte > a,.kunden-hilfe-karte > button:not(.kunden-hilfe-schliessen) { width: 100%; min-height: 62px; display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 12px 14px; border: 1px solid #d4e2eb; border-radius: 14px; background: #f7fbfe; color: #183246; text-align: left; text-decoration: none; }
.kunden-hilfe-karte > a > span,.kunden-hilfe-karte > button > span { display: grid; gap: 2px; }
.kunden-hilfe-karte small { color: #5c7180; font-weight: 500; }
#kundenportalBereich[dir="rtl"] .kunden-hilfe-button { right: auto; left: max(16px,env(safe-area-inset-left)); }
@media (max-width:560px) { .kunden-hilfe-button span { display:none; } .kunden-hilfe-button { width: 50px; height: 50px; justify-content:center; padding:0; } .kunden-hilfe-menue { padding: 10px; } .kunden-hilfe-karte { width: 100%; max-height: calc(100dvh - 20px); padding: 20px 16px; border-radius: 22px; } }
/* Heizungsfragebogen: eigenständige, auch mobil lesbare Angebotsvorbereitung. */
#kundenportalBereich #kundenBeratungHeizungZeile { grid-column: 1 / -1; min-width: 0; }
.heizung-fragengruppe { border: 1px solid #cad8dc; border-radius: 12px; margin: 20px 0; padding: 16px; min-width: 0; }
.heizung-fragengruppe legend { font-weight: 700; padding: 0 8px; }
.heizung-fragen-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.heizung-fragen-grid > div { min-width: 0; }
.heizung-fragen-grid label { display: block; margin-bottom: 6px; }
.heizung-fragen-grid input, .heizung-fragen-grid select { width: 100%; min-width: 0; box-sizing: border-box; }
.heizung-fragen-grid small { display: block; margin-top: 6px; }
.heizung-fragen-grid [aria-invalid="true"] { border: 2px solid #b42318; }
.heizung-antworten { white-space: normal; overflow-wrap: anywhere; }
.heizung-antworten > div { padding: 8px 0; border-bottom: 1px solid #dde3e5; break-inside: avoid; }
.heizung-antworten dt { font-weight: 600; }
.heizung-antworten dd { margin: 4px 0 0; white-space: pre-wrap; }
.heizung-fotos { display: flex; flex-wrap: wrap; gap: 12px; }
.heizung-fotos > div { width: 140px; }
.heizung-fotos img { width: 140px; height: 110px; object-fit: cover; border-radius: 8px; }
.heizung-fotos button { width: 100%; font-size: .85rem; }
@media (max-width: 620px) { .heizung-fragen-grid { grid-template-columns: 1fr; } .heizung-fragengruppe { padding: 12px; } }

/* Dezente Bereichsfarben; Beschriftungen bleiben zusätzlich zur Farbe erhalten. */
#kundenportalBereich #kundenLeistungswahl [data-bereich="fenster"] { --bereich-akzent: #246b98; --bereich-flaeche: #f1f7fc; }
#kundenportalBereich #kundenLeistungswahl [data-bereich="dach"] { --bereich-akzent: #36765a; --bereich-flaeche: #f0f8f3; }
#kundenportalBereich #kundenLeistungswahl [data-bereich="fassade"] { --bereich-akzent: #715397; --bereich-flaeche: #f7f3fb; }
#kundenportalBereich #kundenLeistungswahl [data-bereich="heizung"] { --bereich-akzent: #98561d; --bereich-flaeche: #fff6ec; }
#kundenportalBereich #kundenLeistungswahl [data-bereich="photovoltaik"] { --bereich-akzent: #856713; --bereich-flaeche: #fffbe9; }
#kundenportalBereich #kundenLeistungswahl .kunden-leistungskarte[data-bereich] { background: var(--bereich-flaeche) !important; border-top: 4px solid var(--bereich-akzent) !important; }
#kundenportalBereich #kundenLeistungswahl .kunden-leistungskarte[data-bereich].ist-aktiv { outline: 2px solid var(--bereich-akzent); outline-offset: 2px; }
#kundenportalBereich #kundenBeratungDachZeile { background: #f0f8f3; border-left-color: #36765a; }
#kundenportalBereich #kundenBeratungFassadeZeile { background: #f7f3fb; border-left-color: #715397; }
#kundenportalBereich #kundenBeratungPhotovoltaikZeile { background: #fffbe9; border-left-color: #856713; }

/* Gemeinsamer, mobiler Assistent fuer Dach, Fassade und Photovoltaik. */
#kundenportalBereich #kundenBeratungDachZeile { --energie-akzent: #36765a; --energie-flaeche: #f7fcf8; }
#kundenportalBereich #kundenBeratungFassadeZeile { --energie-akzent: #715397; --energie-flaeche: #fbf9fd; }
#kundenportalBereich #kundenBeratungPhotovoltaikZeile { --energie-akzent: #856713; --energie-flaeche: #fffdf4; }
#kundenportalBereich .energie-modul { padding: clamp(16px, 3vw, 30px); border: 1px solid color-mix(in srgb, var(--energie-akzent) 35%, #d8e3ea); border-top: 4px solid var(--energie-akzent); border-left-width: 1px; border-radius: 20px; background: var(--energie-flaeche); color: #183246; }
#kundenportalBereich .energie-modul [hidden] { display: none !important; }
#kundenportalBereich .energie-modul .heizung-kicker { display: block; color: var(--energie-akzent); font-size: 11px; font-weight: 800; letter-spacing: .09em; }
#kundenportalBereich .energie-modul .heizung-kopf h4 { margin: 8px 0; color: #183246; font-size: clamp(21px, 2.5vw, 28px); line-height: 1.2; }
#kundenportalBereich .energie-modul p { color: #486171; line-height: 1.5; }
#kundenportalBereich .energie-modul .heizung-kopf p { margin: 0 0 20px; }
#kundenportalBereich .energie-modul .heizung-schritte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; scroll-margin-top: 18px; }
#kundenportalBereich .energie-modul .heizung-schritte button { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; min-height: 64px; margin: 0; padding: 9px 3px; border: 1px solid #d8e3ea; border-radius: 10px; background: #f3f7fa; color: #476170; font-size: 12px; box-shadow: none; }
#kundenportalBereich .energie-modul .heizung-schritte button span:first-child { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #e1eaf0; font-weight: 800; }
#kundenportalBereich .energie-modul .heizung-schritte button[aria-current] { background: color-mix(in srgb, var(--energie-akzent) 12%, #fff); border-color: var(--energie-akzent); color: #183246; }
#kundenportalBereich .energie-modul .heizung-schritte button[aria-current] span:first-child { background: var(--energie-akzent); color: #fff; }
#kundenportalBereich .energie-modul button:disabled { opacity: .65; cursor: default; }
#kundenportalBereich .energie-modul .heizung-kurzhinweis { margin: 12px 0 20px; font-size: 12px; }
#kundenportalBereich .energie-modul .heizung-fragengruppe { margin: 0; padding: 0; border: 0; }
#kundenportalBereich .energie-modul legend { padding: 0; color: #183246; font-size: 21px; font-weight: 800; line-height: 1.3; }
#kundenportalBereich .energie-modul .heizung-schritthilfe { margin: 6px 0 20px; font-size: 14px; }
#kundenportalBereich .energie-modul .heizung-fragen-grid { gap: 20px; }
#kundenportalBereich .energie-modul .heizung-feld label { margin: 0 0 7px; font-size: 14px; font-weight: 700; line-height: 1.4; }
#kundenportalBereich .energie-modul input:not([type="file"]):not([type="checkbox"]):not([type="radio"]), #kundenportalBereich .energie-modul select, #kundenportalBereich .energie-modul textarea { width: 100%; max-width: 100%; min-height: 48px; margin: 0; padding: 12px; border: 1px solid #aebfcb; border-radius: 10px; background: #fff; color: #183246; font-size: 16px; line-height: 1.4; box-shadow: none; }
#kundenportalBereich .energie-modul small { color: #4c6474; font-size: 12px; line-height: 1.45; }
#kundenportalBereich .energie-modul :is(button, input, select, textarea):focus-visible { outline: 3px solid #157bb5; outline-offset: 3px; }
#kundenportalBereich .energie-modul [data-energie-status]:not(:empty) { padding: 10px; border: 1px solid #edbcb8; border-radius: 10px; background: #fff0ee; color: #8f211b; }
#kundenportalBereich .energie-modul .heizung-fotobox { margin-top: 20px; padding: 16px; border: 1px dashed #a4bfce; border-radius: 14px; background: #f3f7fa; }
#kundenportalBereich .energie-modul h5 { margin: 0; font-size: 17px; }
#kundenportalBereich .energie-modul .heizung-fotobox p { margin: 8px 0 12px; font-size: 13px; }
.energie-fotoaktionen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
#kundenportalBereich .energie-modul .heizung-fotoauswahl { position: relative; display: grid; place-items: center; min-height: 48px; margin: 0; padding: 12px; overflow: hidden; border: 1px solid #aebfcb; border-radius: 10px; background: #fff; color: #185e86; cursor: pointer; }
#kundenportalBereich .energie-modul .heizung-fotoauswahl input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
#kundenportalBereich .energie-modul .heizung-fotos { margin-top: 12px; }
.energie-mehrfachauswahl { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:9px; }
.energie-mehrfachauswahl > label { min-height:46px; margin:0; padding:10px 12px; border:1px solid var(--hu-line); border-radius:12px; background:var(--hu-card); display:flex; align-items:center; gap:9px; cursor:pointer; }
.energie-mehrfachauswahl input { width:22px; min-width:22px; max-width:22px; height:22px; min-height:22px; margin:0; padding:0; flex:0 0 22px; }
.energie-mehrfachauswahl > label > span { min-width:0; flex:1 1 auto; overflow-wrap:anywhere; }
.energie-mehrfachauswahl[aria-invalid="true"] { outline:2px solid var(--hu-danger); outline-offset:3px; border-radius:12px; }
.heizung-extras > h5 { margin:18px 0 10px; font-size:1rem; color:var(--hu-ink-strong); }
@media (max-width:560px) { .energie-mehrfachauswahl { grid-template-columns:1fr; } }
#kundenportalBereich .energie-modul .heizung-navigation { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 26px; padding-top: 18px; border-top: 1px solid #dbe5ec; }
#kundenportalBereich .energie-modul .heizung-navigation button { width: 100%; min-width: 0; min-height: 48px; margin: 0; padding: 12px 16px; border: 1px solid var(--energie-akzent); border-radius: 10px; background: var(--energie-akzent); color: #fff; font-size: 15px; box-shadow: none; }
#kundenportalBereich .energie-modul .heizung-navigation [data-energie-zurueck] { border-color: #b2c7d4; background: #fff; color: #285269; }
#kundenportalBereich .energie-modul [data-energie-fortschritt] { color: #4c6474; font-size: 13px; white-space: nowrap; }
#kundenportalBereich .energie-modul .heizung-feldfehler { margin-top: 6px; color: #a11d18; }
#kundenportalBereich .energie-modul [aria-invalid="true"] { border: 2px solid #b42318; }
#kundenLeistungswahl:has(.energie-modul:not([hidden]):not(.heizung-letzter-schritt)) #kundenLeistungswahlFortsetzenButton,
#kundenLeistungswahl:has(.energie-modul:not([hidden]):not(.heizung-letzter-schritt)) .kunden-beratung-kontakt { display: none; }

/* Heizungsassistent: ausschließlich Heizungsansichten und deren aktiver Ablauf. */
#kundenportalBereich #kundenBeratungHeizungZeile { padding: clamp(16px, 3vw, 30px); border: 1px solid #e3c9ac; border-top: 4px solid #98561d; border-radius: 20px; background: #fffcf8; color: #183246; }
#kundenportalBereich #kundenBeratungHeizungZeile [hidden] { display: none !important; }
#kundenportalBereich #kundenBeratungHeizungZeile .heizung-kicker { display: block; color: #854b1b; font-size: 11px; font-weight: 800; letter-spacing: .09em; }
#kundenportalBereich #kundenBeratungHeizungZeile .heizung-kopf h4 { font-size: clamp(21px, 2.5vw, 28px); line-height: 1.2; margin: 8px 0; color: #183246; }
#kundenportalBereich #kundenBeratungHeizungZeile p { line-height: 1.5; color: #486171; }
#kundenportalBereich #kundenBeratungHeizungZeile .heizung-kopf p { margin: 0 0 20px; }
#kundenportalBereich #kundenBeratungHeizungZeile .heizung-schritte { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; scroll-margin-top: 18px; }
#kundenportalBereich #kundenBeratungHeizungZeile .heizung-schritte button { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; min-height: 62px; margin: 0; padding: 9px 2px; border: 1px solid #d8e3ea; border-radius: 10px; background: #f3f7fa; color: #476170; font-size: 12px; box-shadow: none; }
#kundenportalBereich #kundenBeratungHeizungZeile .heizung-schritte button span:first-child { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #e1eaf0; font-weight: 800; }
#kundenportalBereich #kundenBeratungHeizungZeile .heizung-schritte button[aria-current] { background: #fff0dc; border-color: #98561d; color: #754317; }
#kundenportalBereich #kundenBeratungHeizungZeile .heizung-schritte button[aria-current] span:first-child { background: #854b1b; color: #fff; }
#kundenportalBereich #kundenBeratungHeizungZeile button:disabled { opacity: .65; cursor: default; }
#kundenportalBereich #kundenBeratungHeizungZeile .heizung-kurzhinweis { font-size: 12px; margin: 12px 0 20px; }
#kundenportalBereich #kundenBeratungHeizungZeile .heizung-fragengruppe { margin: 0; padding: 0; border: 0; }
#kundenportalBereich #kundenBeratungHeizungZeile legend { padding: 0; font-size: 21px; line-height: 1.3; font-weight: 800; color: #183246; }
#kundenportalBereich #kundenBeratungHeizungZeile .heizung-schritthilfe { margin: 6px 0 20px; font-size: 14px; }
#kundenportalBereich #kundenBeratungHeizungZeile .heizung-fragen-grid { gap: 20px; }
#kundenportalBereich #kundenBeratungHeizungZeile .heizung-feld label { font-size: 14px; font-weight: 700; line-height: 1.4; margin: 0 0 7px; }
#kundenportalBereich #kundenBeratungHeizungZeile input:not([type="file"]), #kundenportalBereich #kundenBeratungHeizungZeile select, #kundenportalBereich #kundenBeratungHeizungZeile textarea { min-height: 48px; width: 100%; max-width: 100%; margin: 0; padding: 12px; border: 1px solid #aebfcb; border-radius: 10px; background: #fff; color: #183246; font-size: 16px; line-height: 1.4; box-shadow: none; }
#kundenportalBereich #kundenBeratungHeizungZeile small { color: #4c6474; line-height: 1.45; font-size: 12px; }
#kundenportalBereich #kundenBeratungHeizungZeile :is(button, input, select, textarea, summary, a):focus-visible { outline: 3px solid #157bb5; outline-offset: 3px; }
#kundenportalBereich #kundenBeratungHeizungZeile .heizung-extras, #kundenportalBereich #kundenBeratungHeizungZeile .heizung-foerderung { margin: 20px 0 0; border-top: 1px solid #dbe5ec; }
#kundenportalBereich #kundenBeratungHeizungZeile .heizung-extras { background: #fff; padding: 0; border-width: 1px 0 0; border-radius: 0; }
#kundenportalBereich #kundenBeratungHeizungZeile #kundenHeizungStatus:not(:empty) { color: #8f211b; background: #fff0ee; border: 1px solid #edbcb8; }
#kundenportalBereich #kundenBeratungHeizungZeile summary { padding: 16px 0; min-height: 48px; color: #185e86; font-size: 14px; font-weight: 700; cursor: pointer; }
#kundenportalBereich #kundenBeratungHeizungZeile .heizung-foerderung { margin-bottom: 22px; padding: 0 14px; border: 1px solid #c4dce7; border-radius: 12px; background: #f0f8fc; font-size: 14px; }
#kundenportalBereich #kundenBeratungHeizungZeile .heizung-foerderung ol { padding-left: 20px; line-height: 1.5; }
#kundenportalBereich #kundenBeratungHeizungZeile .heizung-foerderung li { margin: 10px 0; }
#kundenportalBereich #kundenBeratungHeizungZeile .heizung-foerderung a { display: inline-block; margin-bottom: 16px; color: #145e87; }
#kundenportalBereich #kundenBeratungHeizungZeile .heizung-fotobox { margin-top: 20px; padding: 16px; background: #f3f7fa; border: 1px dashed #a4bfce; border-radius: 14px; }
#kundenportalBereich #kundenBeratungHeizungZeile h5 { font-size: 17px; margin: 0; }
#kundenportalBereich #kundenBeratungHeizungZeile .heizung-fotobox p { font-size: 13px; margin: 8px 0 12px; }
#kundenportalBereich #kundenBeratungHeizungZeile .heizung-fotoauswahl { display: block; position: relative; overflow: hidden; padding: 13px; border-radius: 10px; background: #fff; border: 1px solid #aebfcb; color: #185e86; cursor: pointer; }
#kundenportalBereich #kundenBeratungHeizungZeile .heizung-fotoauswahl span { display: block; font-size: 12px; font-weight: 400; margin-top: 4px; }
#kundenportalBereich #kundenBeratungHeizungZeile .heizung-fotoauswahl input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
#kundenportalBereich #kundenBeratungHeizungZeile .heizung-fotoauswahl:focus-within { outline: 3px solid #157bb5; outline-offset: 3px; }
#kundenportalBereich #kundenBeratungHeizungZeile .heizung-fotos { margin-top: 12px; }
#kundenportalBereich #kundenBeratungHeizungZeile .energie-fotoaktionen .heizung-fotoauswahl { display: grid; place-items: center; min-height: 48px; margin: 0; }
#kundenportalBereich #kundenBeratungHeizungZeile .heizung-navigation { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 26px; padding-top: 18px; border-top: 1px solid #dbe5ec; }
#kundenportalBereich #kundenBeratungHeizungZeile .heizung-navigation button { min-height: 48px; margin: 0; padding: 12px 16px; width: 100%; min-width: 0; border-radius: 10px; font-size: 15px; background: #17658f; color: #fff; border: 1px solid #17658f; box-shadow: none; }
#kundenportalBereich #kundenBeratungHeizungZeile #kundenHeizungZurueck { background: #fff; color: #285269; border-color: #b2c7d4; }
#kundenportalBereich #kundenBeratungHeizungZeile #kundenHeizungFortschritt { color: #4c6474; font-size: 13px; white-space: nowrap; }
#kundenportalBereich #kundenBeratungHeizungZeile .heizung-feldfehler { color: #a11d18; margin-top: 6px; }
#kundenportalBereich #kundenBeratungHeizungZeile [aria-invalid="true"] { border: 2px solid #b42318; }
#kundenBeratungsdetails:has(#kundenBeratungHeizungZeile:not([hidden])) > .kunden-beratungsdetails-kopf { display: none; }
#kundenLeistungswahl:has(#kundenBeratungHeizungZeile:not([hidden]):not(.heizung-letzter-schritt)) #kundenLeistungswahlFortsetzenButton,
#kundenLeistungswahl:has(#kundenBeratungHeizungZeile:not([hidden]):not(.heizung-letzter-schritt)) .kunden-beratung-kontakt { display: none; }
.heizung-review .heizung-antworten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
/* Messhilfe und Fotos: große, klar beschriftete Bedienelemente. */
#kundenSchritt6 .kunden-foto-vorschau { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#kundenSchritt6 .kunden-foto-karte { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 8px; border: 1px solid #bacddd; border-radius: 12px; background: #fff; color: #18354a; }
#kundenSchritt6 .kunden-foto-karte img { width: 100%; height: 140px; object-fit: contain; border-radius: 6px; background: #eaf0f5; }
#kundenSchritt6 .kunden-foto-karte figcaption { font-size: 16px; }
#kundenportalBereich #kundenSchritt6 .kunden-foto-karte button, #kundenportalBereich #kundenSchritt6 .kunden-foto-aufnahme { min-height: 48px; font-size: 16px; white-space: normal; }
#kundenportalBereich #kundenSchritt6 #kundeElementStandardMasse input, #kundenportalBereich #kundenSchritt6 #kundeElementDynamischeMasse input { min-height: 48px; font-size: 16px; }
#kundenSchritt6 .kunden-mass-einheiten, #kundenSchritt6 .kunden-foto-aufgabe { font-size: 16px; line-height: 1.5; color: #284b66; }
#kundenSchritt6 .kunden-mass-form-status { margin: 16px 0; padding: 14px; border: 2px solid #a62d1f; border-radius: 10px; background: #fff2ee; color: #842215; font-size: 16px; line-height: 1.5; }
#kundenSchritt6 [aria-invalid="true"] { outline: 2px solid #a62d1f; outline-offset: 2px; }
#kundenSchritt6 :focus-visible, #kundenElementKopierenDialog :focus-visible { outline: 3px solid #176d9f; outline-offset: 3px; }
#kundenSchritt6 [hidden], #kundenElementKopierenDialog [hidden] { display: none !important; }
/* Bei reinen Heizungsanfragen passt der eigene KfW-Hinweis, nicht der BAFA-Text zur Gebäudehülle. */
#kundenSchritt7:has(.heizung-einzelanfrage) .foerderhinweis-card { display: none; }
@media (max-width: 620px) {
  #kundenBeratungsdetails:has(#kundenBeratungHeizungZeile:not([hidden])) { padding: 0; border: 0; background: transparent; }
  #kundenportalBereich #kundenBeratungHeizungZeile { border-radius: 16px; }
  #kundenportalBereich #kundenBeratungHeizungZeile .heizung-schritte button { font-size: 10px; }
  #kundenportalBereich #kundenBeratungHeizungZeile .heizung-schritte button span { word-break: normal; overflow-wrap: normal; }
  #kundenportalBereich #kundenBeratungHeizungZeile .heizung-navigation { gap: 8px; }
  #kundenportalBereich #kundenBeratungHeizungZeile .heizung-navigation button { white-space: nowrap; word-break: normal; overflow-wrap: normal; padding: 12px 10px; }
  #kundenportalBereich #kundenBeratungHeizungZeile .heizung-fragen-grid { grid-template-columns: 1fr; gap: 16px; }
  .heizung-review .heizung-antworten { grid-template-columns: 1fr; }
  #kundenBeratungsdetails:has(.energie-modul:not([hidden])) { padding: 0; border: 0; background: transparent; }
  #kundenportalBereich .energie-modul { border-radius: 16px; }
  #kundenportalBereich .energie-modul .heizung-schritte button { font-size: 10px; }
  #kundenportalBereich .energie-modul .heizung-fragen-grid { grid-template-columns: 1fr; gap: 16px; }
  #kundenportalBereich .energie-modul .heizung-navigation { gap: 8px; }
  #kundenportalBereich .energie-modul .heizung-navigation button { padding: 12px 9px; white-space: nowrap; }
  .energie-fotoaktionen { grid-template-columns: 1fr; }
}

.kunden-pflicht-hinweis,.kunden-unverbindlich-hinweis{margin:8px 0 14px;padding:10px 12px;border-radius:10px;background:#eef6fb;color:#274b63;font-size:14px;line-height:1.45}.kunden-unverbindlich-hinweis{border-left:4px solid #1f73b7}.kunden-pflicht-hinweis{font-weight:600}@media(max-width:600px){.kunden-pflicht-hinweis,.kunden-unverbindlich-hinweis{font-size:13px;padding:9px 10px}}