html, body {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  min-height: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}
body {
  font-family: 'Inter', Arial, sans-serif;
  background: #f4f8fb;
  color: #1f2937;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
header {
  background: #fff;
  border-bottom: 1px solid #e5e9f2;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1em 2.2em;
  box-sizing: border-box;
  position: relative;
  min-height: 72px;
  max-width: 100%;
}
.header-center {
  position: absolute;
  left: 50%;
  top: 1.1em;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  z-index: 10;
}
.header-firm-logo {
  display: block;
  max-height: 31.5px;
  width: auto;
  height: auto;
  object-fit: contain;
}
main {
  width: 100%;
  max-width: 1000px;
  margin: 2.4em auto;
  padding: 0 1vw;
  box-sizing: border-box;
  background: none;
  flex: 1 0 auto; /* wichtig für Sticky Footer */
}
@media (max-width: 1000px) {
  main { max-width: 99vw; }
}
@media (max-width: 600px) {
  main { padding-left: 0.5vw; padding-right: 0.5vw; }
}
@media (max-width: 600px) {
  header { padding: 0.7em 0.9em; min-height: 48px; }
  .header-firm-logo { max-height: 24px; }
  .header-center { top: 0.5em; }
  main { padding-left: 0.5vw; padding-right: 0.5vw; }
}
footer {
  width: 100%;
  max-width: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
  padding: 1.1em 2vw;
  font-size: 1em;
  border-top: 1px solid #e7eef6;
  color: #497398;
  margin-top: 2em;
  box-sizing: border-box;
}
@media (max-width: 980px) {
  .site-footer { display: none !important; }
}
header nav a {
  margin-left: 1rem;
  text-decoration: none;
  color: #1f2937;
  font-weight: 500;
  transition: color 0.2s;
}
header nav a:hover {
  color: #0077B6;
}
.logo {
  font-weight: 700;
  font-size: 1.5rem;
  color: #0077B6;
}
/* Hero-Bereich und weitere Komponenten */
.hero-video-bg {
  position: relative;
  width: 100%;
  margin: 0 auto;
  min-height: 500px;
  overflow: hidden;
  background: #0077b6;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.hero-video {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center 30%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  background: #0077b6;
}
.hero-overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 18px #0a162366;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 48px;
  gap: 1.4rem;
}
.hero-textblock {
  margin-bottom: 2.4em;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}
.hero-overlay h1 {
  font-size: 3.2rem;
  margin-bottom: 0.28em;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.hero-headline {
  font-size: 1.7rem;
  font-weight: 600;
  margin-bottom: 0.45em;
  background: rgba(0,119,182,0.67);
  border-radius: 32px;
  padding: 0.35em 1.6em;
  display: inline-block;
}
.hero-subline {
  font-size: 1.18rem;
  background: rgba(0,0,0,0.18);
  border-radius: 20px;
  padding: 0.35em 1.2em;
  margin-bottom: 0.8em;
  display: inline-block;
}
.hero-secondline {
  font-size: 1.07rem;
  background: rgba(0,0,0,0.14);
  border-radius: 16px;
  padding: 0.3em 1.1em;
  margin-bottom: 2.2em;
  display: inline-block;
}
.hero-chatbox {
  background: rgba(255,255,255,0.93);
  border-radius: 22px;
  box-shadow: 0 6px 32px #0002;
  padding: 2.2em 2em 1.5em 2em;
  max-width: 430px;
  margin: 0 auto 2.5em auto;
  color: #222b38;
}
.hero-chatbox h2 {
  color: #0077b6;
  margin-top: 0;
  margin-bottom: 0.4em;
}
.hero-chatbox p {
  margin: 0 0 1em 0;
}
.chat-messages {
  min-height: 80px;
  max-height: none;
  overflow-y: auto;
}
.register-form {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 1.4em;
}
.register-form input[type="email"] {
  flex: 3;
  min-width: 380px;
  max-width: 600px;
  padding: 1.15em 1.6em;
  border-radius: 8px 0 0 8px;
  border-right: none;
  border: 1px solid #d0d7e2;
  font-size: 1.18rem;
}
.register-form button {
  padding: 1.15em 2.6em;
  background: #0077b6;
  color: #fff;
  border: none;
  border-radius: 0 8px 8px 0;
  font-size: 1.14rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  height: 100%;
  margin-bottom: 0;
  white-space: nowrap;
}
.register-form button:hover {
  background: #009ee1;
}
@media (max-width: 700px) {
  .register-form {
    flex-direction: column;
    align-items: stretch;
  }
  .register-form input[type="email"],
  .register-form button {
    border-radius: 8px;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    margin-bottom: 0.8em;
    border-right: 1px solid #d0d7e2;
  }
  .register-form button { margin-top: 0; }
}
.register-form--tight {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  padding: 0.5rem 0.6rem 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(12, 54, 104, 0.12);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 24px 46px rgba(12, 54, 104, 0.12);
  width: 100%;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  overflow: visible;
}
.register-form--tight input[type="email"] {
  min-width: 0;
  max-width: none;
  flex: 1 1 auto;
  padding: 1.05rem 1.6rem;
  border: none;
  border-radius: 999px 0 0 999px;
  background: transparent;
  font-size: 1.05rem;
  color: #0f1f38;
  border-right: 1px solid rgba(12, 54, 104, 0.12);
}
.register-form--tight input[type="email"]:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(18, 217, 213, 0.5);
  border-right-color: transparent;
}
.register-form--tight input[type="email"]::placeholder {
  color: rgba(31, 41, 55, 0.55);
}
.register-form--tight .register-form__cta {
  flex: 0 0 auto;
  padding: 0.95rem 1.9rem;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(135deg, #12d9d5, #0fb1ae);
  border: none;
  font-size: 1.05rem;
  font-weight: 600;
  color: #ffffff;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  white-space: nowrap;
}
.register-form--tight .register-form__cta:hover {
  filter: brightness(1.05);
  box-shadow: 0 16px 36px rgba(18, 217, 213, 0.26);
  transform: translateY(-1px);
}
.register-form--tight .register-form__cta:active {
  transform: translateY(0);
  box-shadow: 0 12px 28px rgba(18, 217, 213, 0.22);
}
.register-form--tight .register-form__cta:focus-visible {
  outline: 2px solid rgba(18, 217, 213, 0.6);
  outline-offset: 2px;
}
@media (max-width: 700px) {
  .register-form--tight {
    flex-direction: row;
    align-items: stretch;
  }
  .register-form--tight input[type="email"] {
    margin-bottom: 0;
    border-radius: 999px 0 0 999px;
    border-right: 1px solid rgba(12, 54, 104, 0.12);
  }
  .register-form--tight .register-form__cta {
    width: auto;
    border-radius: 0 999px 999px 0;
  }
}
@media (max-width: 640px) {
  .register-form--tight {
    flex-direction: column;
    align-items: stretch;
    border-radius: 28px;
    padding: 0.6rem;
  }
  .register-form--tight input[type="email"] {
    border-radius: 16px;
    border: 1px solid rgba(26, 86, 219, 0.12);
    border-right-color: rgba(26, 86, 219, 0.12);
    padding: 0.95rem 1.1rem;
    margin-bottom: 0.6rem;
  }
  .register-form--tight .register-form__cta {
    border-radius: 16px;
    width: 100%;
  }
}
.register-features {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  max-width: 600px;
  margin-left: 0; /* unter dem Inputfeld ausgerichtet */
}
.register-features li {
  position: relative;
  font-size: 1.04rem;
  color: #1f2937;
  margin-bottom: 0.32em;
  padding-left: 1.6em;
}
.register-features li::before {
  content: '✓';
  color: #009ee1;
  margin-right: 0.6em;
  font-weight: bold;
}
/* Abstand/Farbe zwischen Video und Bild (Trennstreifen) */
.section-gap-alt {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  min-height: 52px;
  background: #f0f4f8;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Vorteile-Bildsektion: Hintergrundbild + Kacheln */
.vorteile-bildsektion {
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: stretch;
  margin-top: 0;
  margin-bottom: 2.7rem;
  min-height: 580px;
}
.vorteile-img-wrapper {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  position: relative;
}
.vorteile-bg-img {
  width: 100%;
  height: 560px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  object-fit: cover;
  object-position: center 45%;
  filter: brightness(0.56) blur(0.1px);
  opacity: 0.82;
  border-radius: 0;
  display: block;
}
.vorteile-kacheln-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  min-width: 0;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 3vw;
  padding: 0 3vw;
  z-index: 2;
}

.vorteil-kachel:hover {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 8px 38px #0077b633;
}
.vorteil-icon {
  font-size: 2.3rem;
  margin-bottom: 0.6em;
}
.vorteil-kachel h3 {
  margin: 0 0 0.45em 0;
  font-size: 1.19rem;
  color: #0077b6;
  font-weight: 700;
  text-align: center;
}
.vorteil-kachel p {
  margin: 0;
  color: #222b38;
  font-size: 1.01rem;
  text-align: center;
}
.features {
  padding: 4rem 2rem;
  background: white;
  text-align: center;
}
.features h2 {
  margin-bottom: 2rem;
  font-size: 2rem;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
}
.feature-item {
  background: #f9fafb;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  font-weight: 500;
}
.chat-demo {
  max-width: 700px;
  margin: 4rem auto;
  background: #ffffff;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}


#dashboard {
  max-width: 1000px;
  margin: 3.5rem auto 2rem auto;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 4px 30px #0077b62a;
  padding: 2.2rem 2.3rem 2.4rem 2.3rem;
}
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.7rem;
}
.dashboard-header h2 {
  font-size: 1.5em;
  margin: 0;
}
#addProjectBtn {
  border: none;
  border-radius: 999px;
  background: linear-gradient(120deg, #00f0ff, #00aab8 70%, #0093a1);
  color: #032030;
  font-weight: 600;
  padding: 10px 18px;
  font-size: 1.03em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 14px 26px rgba(0,150,165,.35);
  transition: transform .15s ease, box-shadow .15s ease;
  line-height: 1.05;
  text-decoration: none;
  height: 44px;
}
#addProjectBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 32px rgba(0,150,165,.45);
}
.dashboard-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  background: #fff;
  box-shadow: 0 3px 32px #0077b610;
  border-radius: 15px;
  overflow: hidden;
  font-size: 1.05em;
}
.dashboard-table th, .dashboard-table td {
  padding: 1em 0.6em;
  text-align: left;
  border-bottom: 1px solid #f1f4f8;
}
.dashboard-table th {
  background: #f7fafc;
  color: #222b38;
  font-weight: 700;
}
.dashboard-table tbody tr:last-child td {
  border-bottom: none;
}
.dashboard-table tr:hover {
  background: #f0f8fd;
  transition: background 0.13s;
}
@media (max-width: 700px) {
  #dashboard { padding: 1.1rem 0.3rem; }
  .dashboard-header { flex-direction: column; gap: 1.1em; }
  .dashboard-table th, .dashboard-table td { padding: 0.7em 0.2em; font-size: 0.98em; }
}
#accountIcon {
  position: absolute;
  right: 2rem;
  top: 1.2rem;
  cursor: pointer;
  display: none;
}
#accountIcon span {
  font-size: 2.1rem;
  transition: color 0.18s;
}
#accountIcon:hover span {
  color: #009ee1;
}

.burger-menu {
  width: 32px; height: 32px; display: flex; flex-direction: column;
  justify-content: center; align-items: center; cursor: pointer; margin-right: 1.2em;
}
.burger-menu span {
  display: block; width: 24px; height: 4px; background: #0077b6;
  border-radius: 2px; margin: 3px 0;
  transition: all 0.2s;
}
.login-top-btn {
  background: #fff;
  color: #0077b6;
  border: 1.4px solid #e2e6ef;
  border-radius: 18px;
  font-weight: 600;
  padding: 0.42em 1em 0.42em 0.9em;
  font-size: 1.03em;
  display: flex;
  align-items: center;
  gap: 0.36em;
  box-shadow: 0 1.5px 7px #0077b614;
  cursor: pointer;
  transition: background 0.17s, box-shadow 0.18s;
}
.login-top-btn:hover {
  background: #f0f7fd;
  color: #176fa6;
  box-shadow: 0 2px 16px #0077b62a;
}
.login-top-btn .material-icons {
  font-size: 1.6em;
  vertical-align: middle;
}

.main-logo {
  height: 52px;
  margin-right: 1.4em;
}
.logo-text {
  font-weight: 700;
  font-size: 1.4rem;
  color: #0077B6;
  letter-spacing: 0.04em;
  margin-right: 1em;
}
.top-firm-logo img {
  max-height: 128px;
}
.sidebar-menu {
  position: fixed; top: 0; left: 0; height: 100vh; width: 220px;
  background: #fff; box-shadow: 3px 0 22px #0001;
  z-index: 99; display: flex; flex-direction: column;
  padding-top: 70px; gap: 1.2em; font-size: 1.1em;
  transition: transform 0.2s;
}
.sidebar-menu a {
  color: #0077b6; text-decoration: none; padding: 0.6em 1.6em;
  font-weight: 600; transition: background 0.13s;
}
.sidebar-menu a:hover { background: #f7fafc; }
@media (max-width: 700px) {
  .main-logo { height: 28px; }
  .top-firm-logo img { max-height: 32px; }
}

.sidebar-close-btn {
  background: none;
  border: none;
  color: #0077b6;
  font-size: 2.2em;
  font-weight: bold;
  position: absolute;
  top: 14px;
  right: 18px;
  cursor: pointer;
  padding: 0;
  z-index: 102;
  transition: color 0.16s;
}
.sidebar-close-btn:hover {
  color: #009ee1;
}
.sidebar-menu {
  position: fixed; top: 0; left: 0; height: 100vh; width: 240px;
  background: #fff; box-shadow: 3px 0 22px #0001;
  z-index: 99; display: flex; flex-direction: column;
  padding-top: 64px; gap: 1.2em; font-size: 1.1em;
  transition: transform 0.2s;
}

.hero-big-logo {
  max-width: 320px;
  width: 100%;
  margin-bottom: 1.1em;
  margin-top: 2.0em;
}

/* Moderneres Formular-Design für Login/Registrierung */
.auth-form-modern {
  background: #fff;
  padding: 2.2em 2.5em 2em 2.5em;
  border-radius: 18px;
  box-shadow: 0 4px 32px #0077b623;
  display: flex;
  flex-direction: column;
  gap: 1.17em;
  margin-bottom: 0.8em;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}
.auth-form-modern label {
  font-weight: 600;
  color: #0a3855;
  margin-bottom: 0.11em;
  font-size: 1.05em;
}
.auth-form-modern input[type=\"email\"], .auth-form-modern input[type=\"password\"], .auth-form-modern input {
  padding: 0.89em 1em;
  border-radius: 8px;
  border: 1px solid #d0d7e2;
  font-size: 1.09em;
  margin-bottom: 0.12em;
  transition: border-color 0.15s, box-shadow 0.14s;
  background: #f7fafc;
}
.auth-form-modern input:focus {
  border-color: #0077b6;
  box-shadow: 0 0 0 2px #0077b642;
  outline: none;
}
.auth-form-modern button {
  padding: 1.04em 0;
  background: #0077b6;
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 1.08em;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.17s;
  box-shadow: 0 2px 12px #0077b629;
  margin-top: 0.8em;
}
.auth-form-modern button:hover {
  background: #009ee1;
  box-shadow: 0 2px 18px #009ee111;
}

#registerForm.auth-form-modern {
  gap: 0.45em;
}

#registerForm .form-group {
  margin-bottom: 0;
}

#registerForm h3,
#registerForm h4 {
  margin: 0 0 .25em !important;
}

#registerForm .register-legal {
  margin: .6em 0 1em;
  gap: .4em;
}

#registerForm .register-legal .checkbox-row {
  display: flex;
  align-items: center;
  gap: .6em;
}

#registerForm .register-legal input[type="checkbox"] {
  margin-top: 0;
}

#registerForm .register-legal .checkbox-row label {
  margin-bottom: 0;
  flex: 1;
}

#companyRegisterForm .register-legal {
  margin: .6em 0 1em;
  gap: .4em;
}

#companyRegisterForm .register-legal .checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: .6em;
}

#companyRegisterForm .register-legal input[type="checkbox"] {
  width: auto !important;
  display: inline-block !important;
  margin: .2em .5em 0 0 !important;
  vertical-align: top !important;
  flex: 0 0 auto;
}

#companyRegisterForm .register-legal .checkbox-row label {
  margin-bottom: 0;
  flex: 1;
  display: inline !important;
}

.company-kmu-field .checkbox-row {
  align-items: flex-start;
  margin: 0.2em 0 0.35em;
}

.company-kmu-field input[type="checkbox"] {
  width: auto !important;
  flex: 0 0 auto;
  margin-top: 0.25em !important;
}

.company-kmu-field .checkbox-row label {
  margin-bottom: 0;
  line-height: 1.35;
}

.company-kmu-info {
  border: 1px solid #c7d7e6;
  border-radius: 8px;
  background: #f4fbfd;
  color: #244257;
  font-size: 0.94rem;
  line-height: 1.45;
  padding: 0.7rem 0.8rem;
}

.account-kmu-field {
  display: grid;
  gap: 0.45rem;
}
.auth-tabs button {
  padding: 0.7em 2.1em;
  font-size: 1.09em;
  background: #f7fafc;
  border: 1px solid #e2eaf5;
  border-radius: 12px;
  color: #0077b6;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.12s;
}
.auth-tabs .auth-tab.active {
  background: #0077b6;
  color: #fff;
  border-color: #0077b6;
}
.form-error {
  color: #d32f2f;
  font-size: 0.97em;
  margin-top: 0.2em;
  min-height: 1.2em;
}

input.error {
  border-color: #d32f2f;
  box-shadow: 0 0 0 2px #ffd8d8;
}
.pw-hint {
  font-size: 0.93em;
  color: #8ba7b3;
  margin-top: 0.15em;
}

.form-error {
  color: #d32f2f;
  font-size: 0.97em;
  margin-top: 0.18em;
  min-height: 1.18em;
  font-weight: 500;
  transition: color 0.18s;
}
input.error, select.error {
  border-color: #d32f2f;
  box-shadow: 0 0 0 2px #ffd8d8;
  animation: shake 0.27s 1;
}
.pw-hint {
  font-size: 0.93em;
  color: #8ba7b3;
  margin-top: 0.15em;
}
@keyframes shake {
  0% { transform: translateX(0); }
  26% { transform: translateX(-7px); }
  46% { transform: translateX(6px); }
  66% { transform: translateX(-4px); }
  86% { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

.form-group { margin-bottom: 1.3em; }
label { font-weight: 600; font-size: 1.04em; margin-bottom: 0.14em; display:block; }
input, select { width:100%;padding:0.86em 1.2em;border-radius:8px;border:1.2px solid #d0d7e2;font-size:1.06em;box-sizing:border-box;background:#fcfdfe;margin-top:0.1em;}
input:focus, select:focus { outline:2px solid #009ee1; border-color:#009ee1; }
.register-btn-modern { padding:0.95em 2.2em; background:#0077b6; color:#fff; border:none; border-radius:9px; font-size:1.09em; font-weight:600; cursor:pointer; transition:background 0.17s; margin-top:0.5em; letter-spacing:0.01em; box-shadow:0 2px 14px #0077b610; }
.register-btn-modern:hover { background: #009ee1; }
.form-error { color: #d32f2f; font-size: 0.97em; margin-top: 0.18em; min-height: 1.18em; font-weight: 500; transition: color 0.18s; }
.pw-hint { font-size: 0.95em; color: #2374ad; margin-top: 0.18em; }
.info-icon { display:inline-block; background:#e0ecfa;color:#1466a6; border-radius:60%; font-size:0.99em; font-weight:700; width:1.34em; height:1.34em; text-align:center; line-height:1.34em; cursor:pointer; margin-left:0.33em; border:1.1px solid #d2e4f6; }
.info-icon:hover, .info-icon:focus { background:#e5f6fd; color:#0077b6; border-color:#99c1e6; outline:none; }


.dashboard-hero-bg {
  width: 100%;
  background: #fff;
  padding-top: 1.2rem;        /* deutlich weniger Abstand oben */
  padding-bottom: 0.9rem;     /* deutlich weniger Abstand unten */
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 14px #e2eaf750;
  min-height: 60px;           /* statt 230px */
}

.dashboard-hero-logo-container {
  text-align: center;
  width: 100%;
}
.dashboard-hero-logo {
  height: 40.5px;
  max-width: 98vw;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

@media (max-width: 700px) {
  .dashboard-hero-bg {
    min-height: 32px;
    padding-top: 0.7rem;
    padding-bottom: 0.6rem;
  }
  .dashboard-hero-logo {
    height: 24px;
  }
}

#dashboard {
  max-width: 1000px;
  margin: 1.3rem auto 2rem auto;   /* vorher 3.5rem, jetzt kompakter */
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 4px 30px #0077b62a;
  padding: 2.2rem 2.3rem 2.4rem 2.3rem;
}


.modal-backdrop {
  display: none; position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 100vh;
  background: rgba(16,32,44,0.32); justify-content: center; align-items: center;
}
.auth-modal {
  background: #fff; padding: 2.4em 2em 2.1em 2em; border-radius: 22px; max-width: 420px; width: 94vw;
  box-shadow: 0 8px 60px #0077b630; position: relative; outline: none;
  animation: modalIn 0.22s cubic-bezier(.5,1.4,.5,1.01);
}
@keyframes modalIn {
  from { transform: translateY(90px) scale(0.98); opacity: 0;}
  to { transform: translateY(0) scale(1); opacity: 1;}
}
.modal-title {
  text-align: center;
  font-size: 1.45em;
  font-weight: 700;
  color: #0077b6;
  margin-bottom: 1.1em;
}
.modal-close-btn {
  position: absolute; right: 1.3em; top: 1.1em; border: none; background: none;
  font-size: 2.1em; color: #333; cursor: pointer; opacity: 0.73;
}
.modal-close-btn:hover { color: #0077b6; opacity: 1; }
.modal-links {
  display: flex; gap: 1.1em; justify-content: center; align-items: center;
  margin-top: 1.45em; font-size: 1em; color: #2a374b;
}
.modal-links a {
  color: #009ee1;
  font-weight: 600;
  text-decoration: none;
}
.modal-links a:hover { text-decoration: underline; }
.login-btn-modern {
  width: 100%;
  padding: 0.86em 1em; border-radius: 8px; border: none; background: #0077b6;
  color: #fff; font-weight: 700; font-size: 1.1em; cursor: pointer; transition: background 0.18s;
  margin-top: 0.8em;
}
.login-btn-modern:hover { background: #009ee1; }


.auth-modal {
  max-width: 410px;
  width: 96vw;
  overflow-y: auto;
  max-height: 96vh;
  margin: 2.2em auto;
  border-radius: 18px;
  box-shadow: 0 8px 40px #042a471a;
  background: #fff;
  padding: 2.5em 1.2em 2em 1.2em;
  position: relative;
  display: flex;
  flex-direction: column;
}
@media (max-width: 540px) {
  .auth-modal {
    max-width: 99vw;
    padding: 1.5em 0.4em 1.2em 0.4em;
  }
  .auth-form-modern .form-group {
    margin-bottom: 1em;
  }
}


.info-icon {
  display: inline-block;
  margin-left: 0.3em;
  background: #e7f0fa;
  color: #176fa6;
  border-radius: 50%;
  font-weight: 700;
  width: 1.23em;
  height: 1.23em;
  text-align: center;
  font-size: 1em;
  cursor: pointer;
  position: relative;
  line-height: 1.25em;
  border: 1px solid #b3d8fa;
  transition: background 0.17s, color 0.17s;
}

.info-icon:hover,
.info-icon:focus {
  background: #176fa6;
  color: #fff;
}

.info-icon[data-tooltip]:hover::after,
.info-icon[data-tooltip]:focus::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 120%;
  top: 50%;
  transform: translateY(-50%);
  min-width: 220px;
  max-width: 320px;
  background: #fff;
  color: #183a56;
  font-size: 0.99em;
  border: 1px solid #c4d8ef;
  box-shadow: 0 4px 32px #176fa62a;
  border-radius: 10px;
  padding: 0.7em 1.2em;
  z-index: 300;
  white-space: normal;
}


/* ========== Table: Dashboard ========== */
.dashboard-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  box-shadow: 0 3px 32px #0077b610;
  border-radius: 15px;
  overflow: hidden;
}
.dashboard-table th, .dashboard-table td {
  padding: 1em 0.6em;
  text-align: left;
  font-size: 1.05em;
}
.dashboard-table th {
  background: #f7fafc;
  color: #222b38;
  font-weight: 600;
}
.dashboard-table tr:not(:first-child):hover {
  background: #e5f2fa38;
}
.dashboard-table td a.projekt-link {
  color: #0077b6;
  text-decoration: none;
  font-weight: 600;
  padding: 0.35em 1em;
  background: #e5f6fd;
  border-radius: 6px;
  transition: background 0.15s;
}
.dashboard-table td a.projekt-link:hover {
  background: #b3e1f8;
}

/* ========== Modal-Overlay für Projektanlage ========== */
.modal {
  display: none; /* initial */
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100vh;
  z-index: 9999;
  background: rgba(16, 40, 71, 0.22);
  align-items: center; justify-content: center;
}

@supports (backdrop-filter: blur(2px)) {
  .modal { backdrop-filter: blur(2px); } /* dezenter Weichzeichner (optional) */
}

.modal-content {
  background: #fff;
  box-shadow: 0 8px 32px #0077b644;
  max-width: 840px;            /* vorher 440px */
  width: 96vw;
  max-height: 90vh;            /* Scroll-Grenze */
  display: flex;
  flex-direction: column;
  padding: 1.4em 1.6em 1.2em 1.6em; /* etwas luftiger */
  animation: modalin 0.2s;
}
.modal-body {
  overflow: auto;              /* damit man zum Button kommt */
  padding-right: 0.4rem;       /* kleine Scrollbar-Reserve */
}
@keyframes modalin {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e9eef4;
  margin-bottom: 1.2em;
  padding-bottom: 0.6em;
}

.modal-header h2 {
  color: #0077b6;
  font-weight: 800;
  letter-spacing: .01em;
}

.close-btn {
  font-size: 1.5rem;
  color: #0077b6;
  cursor: pointer;
  background: none;
  border: none;
}
.close-btn:hover{ background:#f1f5f9; color:#1f2a37; }

body.modal-open { 
  overflow: hidden; 
}

/* ========== Formular-Stil ========== */
form label {
  font-weight: 600;
  margin-top: 0.8em;
  margin-bottom: 0.3em;
  display: block;
  color: #244e66;
}
form input, form select {
  width: 100%;
  padding: 0.4em 0.7em;
  border: 1px solid #d3e0ea;
  border-radius: 5px;
  margin-bottom: 0.3em;
  font-size: 1em;
  background: #fafdfe;
  transition: border 0.15s;
}
form input:focus, form select:focus {
  border: 1.5px solid #0077b6;
  outline: none;
}

/* ========== Buttons ========== */
button, .btn {
  background: #0077b6;
  color: #fff;
  border: none;
  padding: 0.7em 1.5em;
  font-weight: 600;
  font-size: 1.07em;
  border-radius: 7px;
  cursor: pointer;
  box-shadow: 0 2px 8px #0077b620;
  transition: background 0.14s;
}
button:hover, .btn:hover {
  background: #005f8d;
}

/* ========== Chat-Container & Verlauf ========== */
.chat-container {
  max-width: none;
  width: 100%;
  background: #fcfdfe;
  border-radius: 20px;
  box-shadow: 0 3px 42px #0077b612;
  margin: 0 auto 3em auto;
  padding: 2.2em 3vw 2em 3vw;
  display: flex;
  flex-direction: column;
  min-height: 480px;
}
@media (max-width: 900px) {
  .chat-container { padding: 1.2em 1vw; }
}
.chat-header {
  background: #f7f7f7;
  padding: 0.9em 0.8em;
  border-bottom: 1px solid #ddd;
  font-weight:600; color:#166ca8;
  border-radius:10px 10px 0 0;
  display: flex;
  align-items: center;
}
.info-icon {
  font-size: 1.2em;
  margin-left: 0.7em;
  vertical-align: middle;
}
.filebubble-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  margin: 1em 0 0.4em 0;
}

/* Auf der Projektseite den Abstand der Dateibubbles zum Eingabebereich deutlich verringern */
.project-main .filebubble-row {
  margin: 0.6em 0 0.3em 0 !important;
}
.chat-messages {
  flex: 1;
  min-height: 120px;
  max-height: none;
  overflow-y: auto;
  background: #fafdfe;
  font-size: 1.06em;
  padding: 1em 0.5em 1em 0.5em;
  margin-bottom: 0.6em;
  border-radius: 7px;
}
.message {
  margin: 0.4em 0;
  padding: 0.8em 1em;
  border-radius: 9px;
  word-break: break-word;
  box-shadow: 0 1px 3px #0077b60e;
  font-size: 1em;
}
.message.user {
  background: #d4f0fe;
  align-self: flex-end;
  margin-left: auto;
  color: #1b485e;
}
.message.assistant {
  background: #f1f5f9;
  align-self: flex-start;
  margin-right: auto;
  color: #334455;
}
.chat-hint {
  color: #8da2b7;
  font-style: italic;
  margin: 0.5em 0;
}

/* ========== Chat-Eingabe ========== */
.chat-input-area {
  display: flex;
  align-items: flex-end;
  padding: 0.9em 0.9em 0.9em 0.6em;
  border-top: 1px solid #e9eef4;
  background: #fbfdff;
}

#chatInput {
  width: 100%;
  min-height: 3.4em;
  border-radius: 13px;
  border: 1.4px solid #e5eaf0;
  font-size: 1.17em;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  padding: 1.1em;
  resize: vertical;
  background: #f8fbfe;
  margin-bottom: 0.7em;
  transition: border 0.14s;
  box-shadow: 0 1.5px 9px #8ec7e519;
}

#chatInput:focus { border: 1.4px solid #0077b6; outline: none; background: #f0f7fc; }

.chat-input-bar {
  display: flex;
  align-items: flex-end;
  gap: 1.3em;
  margin-top: 0.8em;
  flex-wrap: wrap;
}
.chat-upload-block {
  display: flex;
  align-items: center;
  gap: 0.3em;
}

/* In deiner style.css ganz unten anfügen (oder anpassen): */
#projektStatus {
  font-weight: 600;
  font-size: 1em;
  color: #005f8d;
  margin-right: 1.2em;
}

#abschliessenBtn {
  background: #39a800;
  color: #fff;
  font-weight: 600;
  border: none;
  padding: 0.55em 1.3em;
  border-radius: 6px;
  font-size: 1.07em;
  cursor: pointer;
  box-shadow: 0 2px 8px #39a80020;
  transition: background 0.16s;
}

#abschliessenBtn:hover {
  background: #207800;
}

#abschliessenBtn[disabled] {
  opacity: 0.6;
  cursor: default;
}

/* Optional: Chat-Eingabefeld und Senden-Button, wenn disabled */
#chatInput:disabled {
  background: #f3f6fa;
  color: #888;
  border: 1.5px solid #e3e8f0;
  cursor: not-allowed;
}

#sendBtn {
  background: linear-gradient(90deg, #169cd9 0%, #2bd7b1 100%);
  color: #fff;
  border: none;
  border-radius: 9px;
  font-size: 1.13em;
  padding: 0.77em 2.1em;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 2px 10px #2bd7b131;
  transition: background 0.16s;
  align-self: flex-end;
  margin-left: auto;
}

#sendBtn:hover { background: #0077b6; }

#sendBtn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


header {
  /* Überschreibt das Doppelte, konsistent für Desktop & Mobile */
  padding-left: 2.2em;
  padding-right: 2.2em;
  padding-top: 1.1em;
  padding-bottom: 1.1em;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  header {
    padding-left: 0.9em;
    padding-right: 0.9em;
    padding-top: 0.7em;
    padding-bottom: 0.7em;
  }
  .header-center {
    left: 50%;
    top: 0.5em;
  }
}


.delete-btn .material-icons {
  color: #d32f2f;
  opacity: 0.83;
  transition: color 0.16s, opacity 0.13s;
  vertical-align: middle;
}
.delete-btn:hover .material-icons {
  color: #ab2222;
  opacity: 1;
  background: #ffdada;
  border-radius: 5px;
}



/* Datei-Bubble (ChatGPT-Style) */
.file-bubble {
  display: flex;
  align-items: center;
  gap: 0.75em;
  background: #f4f6fb;
  border-radius: 11px;
  padding: 0.4em 1em 0.4em 0.7em;
  box-shadow: 0 2px 7px #0077b610;
  font-size: 1.03em;
  position: relative;
}
.file-bubble .file-icon {
  font-size: 1.5em;
  margin-right: 0.1em;
}
.file-bubble .file-type {
  color: #0087c1;
  font-size: 0.97em;
  font-weight: 600;
  margin-left: 0.18em;
}
.file-bubble .file-name {
  font-weight: 600;
  margin-right: 0.18em;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-bubble .file-remove {
  background: none;
  border: none;
  font-size: 1.25em;
  color: #ba1d1d;
  cursor: pointer;
  margin-left: 0.4em;
  opacity: 0.8;
  font-weight: 700;
}
.file-bubble .file-remove:hover { color: #e83232; opacity: 1; }

/* Snackbar-Hinweis */
#snackbar {
  position: fixed;
  top: 22px;
  left: 50%;
  transform: translate(-50%, 0);
  display: none;
  align-items: center;
  gap: 0.75em;
  min-width: 220px;
  max-width: min(90vw, 460px);
  padding: 0.95em 1.75em;
  border-radius: 999px;
  background: var(--va-snackbar-bg, linear-gradient(120deg, #169cd9 0%, #2bd7b1 100%));
  color: #f7feff;
  font-size: 1.04em;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  z-index: 9999;
  box-shadow: 0 22px 45px rgba(10, 69, 94, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  text-align: center;
  word-break: break-word;
  pointer-events: none;
}

#snackbar::before {
  content: '';
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.18), 0 0 12px rgba(43, 215, 177, 0.8);
  flex-shrink: 0;
}

#snackbar[data-position="bottom"] {
  top: auto;
  bottom: 28px;
}

/* Drag & Drop Overlay */
#dropOverlay {
  display: none;
  position: fixed;
  z-index: 15000;
  top: 0; left: 0;
  width: 100%; height: 100vh;
  background: rgba(36,66,125,0.16);
  justify-content: center;
  align-items: center;
}
#dropOverlay.show {
  display: flex;
}
#dropOverlay .drop-inner {
  text-align: center;
  background: #fff;
  box-shadow: 0 6px 28px #0077b644;
  border-radius: 22px;
  padding: 3em 4em;
  min-width: 260px;
  max-width: 90vw;
  border: 2px dashed #1999ea;
  color: #0077b6;
  font-size: 1.2em;
}
#dropOverlay .file-icon {
  font-size: 2.5em;
  margin-bottom: 0.3em;
}
@media (max-width: 600px) {
  #dropOverlay .drop-inner { padding: 1.4em 0.6em; min-width: 80vw;}
}


.file-bubble {
  display: flex; align-items: center; gap: 0.72em;
  background: #f7f8fc; color: #184e8b;
  border-radius: 13px; box-shadow: 0 1.5px 7px #0077b612;
  padding: 0.65em 1.3em 0.65em 0.95em; font-size: 1.03em;
  margin-bottom: 0.22em;
}
.file-icon { font-size: 1.28em; margin-right:0.16em; }
.file-name { font-weight: 600; margin-right:0.3em; }
.file-type { font-size: 0.97em; color: #3472b8; margin-right:0.5em; }
.file-remove {
  background: none; border: none; color: #d32f2f; font-size: 1.2em; font-weight: 700;
  cursor: pointer; margin-left: 0.35em; margin-right: -0.2em;
}
.file-remove:hover { color: #b8060e; }
.upload-btn { position: relative; }

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }


.chat-container.fix-max-breite {
  border: 1px solid #ddd; border-radius: 12px;
  box-shadow: 0 4px 20px #0077b617; background: #fff;
  max-width: 100%; width: 100%; padding: 0.4em 2em 2em 2em;
  margin: 0 auto;
}
.chat-header {
  background: #f7f7f7; padding: 0.9em 0.8em; border-bottom: 1px solid #ddd;
  font-weight:600; color:#166ca8; border-radius:10px 10px 0 0;
}
.filebubble-row {
  display: flex; flex-wrap: wrap; gap: 1em; margin: 1em 0 0.4em 0;
}
.chat-input-bar {
  display: flex; align-items: flex-end; gap: 1.3em;
  margin-top: 0.8em; flex-wrap: wrap;
}
.chat-upload-block {
  display: flex; align-items: center; gap: 0.48em; margin-bottom: 0.1em;
}
.upload-btn {
  background:#e9f5ff; color:#0077b6; border-radius:50%; border:none;
  width:2.2em; height:2.2em; font-size:1.6em; cursor:pointer; box-shadow:0 1px 4px #0077b616;
  display:flex;align-items:center;justify-content:center; transition:background 0.13s; position:relative;
}
.upload-btn input[type="file"] { display:none; }
.upload-plus { font-size:1.3em; }
.upload-label { font-weight:500; font-size:1.01em; margin-left:0.1em; }


@media (max-width: 900px) {
  .chat-container.fix-max-breite { padding:0.7em 0.2em 1.1em 0.2em; }
  .chat-header { font-size:1.04em; }
  .chat-input-bar { flex-direction: column; align-items: stretch; gap:0.5em; }
  #chatInput { width:100%; min-width:100px; }
}
/* Datei-Bubble Style */
.file-bubble {
  display: flex; align-items: center; gap: 0.7em;
  background: #f7f8fc; color: #184e8b;
  border-radius: 13px; box-shadow: 0 1.5px 7px #0077b612;
  padding: 0.65em 1.3em 0.65em 0.95em; font-size: 1.03em;
  margin-bottom: 0.22em;
}
.file-icon { font-size: 1.25em; margin-right:0.16em; }
.file-name { font-weight: 600; margin-right:0.3em; }
.file-type { font-size: 0.97em; color: #3472b8; margin-right:0.5em; }
.file-remove {
  background: none; border: none; color: #d32f2f; font-size: 1.2em; font-weight: 700;
  cursor: pointer; margin-left: 0.35em; margin-right: -0.2em;
}
.file-remove:hover { color: #b8060e; }


/* ========== CHAT & PROJEKTSEITE ========== */
.chat-container.fix-max-breite {
  border: 1px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 4px 20px #0077b617;
  background: #fff;
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 2em 2em 2em;
  display: flex;
  flex-direction: column;
}
.chat-header {
  background: #f7f7f7; padding: 0.9em 0.8em; border-bottom: 1px solid #ddd;
  font-weight:600; color:#166ca8; border-radius:10px 10px 0 0;
}
.filebubble-row {
  display: flex; flex-wrap: wrap; gap: 1em; margin: 1em 0 0.4em 0;
}
.chat-messages {
  width: 100%;
  margin: 0 auto;
  min-height: 220px;
  margin-bottom: 1.3em;
}
/* Eingabebereich mit Datei-Upload links, Button rechts */
.chat-input-bar {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
}
.chat-input-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.3em;
}
.chat-upload-block {
  display: flex;
  align-items: center;
  gap: 0.3em;
}
.upload-btn {
  background:#e9f5ff; color:#0077b6; border-radius:50%; border:none;
  width:2.2em; height:2.2em; font-size:1.6em; cursor:pointer; box-shadow:0 1px 4px #0077b616;
  display:flex;align-items:center;justify-content:center; transition:background 0.13s; position:relative;
}
.upload-btn input[type="file"] { display:none; }
.upload-plus {
  font-weight: 700;
  font-size: 1.18em;
}
.upload-label {
  font-size: 1.03em;
  color: #31688e;
  margin-left: 0.5em;
}

#chatInput:focus { border: 1.5px solid #0077b6; background: #f4fafe; }

/* Datei-Bubble Style */
.file-bubble {
  display: flex; align-items: center; gap: 0.7em;
  background: #f7f8fc; color: #184e8b;
  border-radius: 13px; box-shadow: 0 1.5px 7px #0077b612;
  padding: 0.65em 1.3em 0.65em 0.95em; font-size: 1.03em;
  margin-bottom: 0.22em;
}
.file-icon { font-size: 1.25em; margin-right:0.16em; }
.file-name { font-weight: 600; margin-right:0.3em; }
.file-type { font-size: 0.97em; color: #3472b8; margin-right:0.5em; }
.file-remove {
  background: none; border: none; color: #d32f2f; font-size: 1.2em; font-weight: 700;
  cursor: pointer; margin-left: 0.35em; margin-right: -0.2em;
}
.file-remove:hover { color: #b8060e; }


/* Abschließen-Button grün */
#abschliessenBtn {
  background: #39a800;
  color: #fff;
  font-weight: 600;
  border: none;
  padding: 0.9em 2.2em;
  border-radius: 7px;
  cursor: pointer;
  font-size: 1.13em;
  box-shadow: 0 2px 8px #39a80020;
  transition: background 0.16s;
}
#abschliessenBtn:hover { background: #207800; }
#abschliessenBtn[disabled] { opacity: 0.6; cursor: default; }

/* Snackbar für Feedback – Styles siehe oben */

footer {
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  padding: 1.1em 2vw;
  font-size: 1em;
  border-top: 1px solid #e7eef6;
  color: #497398;
  display: flex;
  align-items: center;
  gap: 1.2em;
  margin-top: 2em;
}


.hero-video-bg,
.vorteile-bildsektion {
  width: 100vw;
  min-width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  position: relative;
  left: 0; right: 0;
  box-sizing: border-box;
}

.page-home .hero-video-bg,
.page-home .home-advantages {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
}


/* Tab-Navigation für mehrstufige Prozesse */
.step-tabs {
  display: flex;
  gap: 1rem;
  margin: 1rem 0;
}
.step-tab {
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  cursor: pointer;
  background: #f0f6fc;
  color: #184e8b;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
}
.step-tab.active {
  background: #184e8b;
  color: #fff;
}
.step-content {
  display: none;
}
.step-content.active {
  display: block;
}

/* Ladeanimation/Spinner für LV-Generierung */
.spinner {
  display: inline-block;
  width: 34px;
  height: 34px;
  border: 4px solid #0077b6;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  vertical-align: middle;
  margin-right: 10px;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Formulare: Auftraggeber-Vorlage und Account */
.vorlagen-form, .account-form {
  max-width: 520px;
  margin: 2em auto;
  background: #f5faff;
  padding: 2em 2em 1em 2em;
  border-radius: 15px;
  box-shadow: 0 4px 20px #0077b617;
}
.vorlagen-form h3, .account-form h3 {
  margin-top: 0;
}
.vorlagen-form label, .account-form label {
  font-weight: 600;
  margin-top: 1em;
  display: block;
}
.vorlagen-form input, .account-form input,
.vorlagen-form textarea, .account-form textarea {
  width: 100%;
  margin-top: 0.3em;
  margin-bottom: 1em;
  padding: 0.5em;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 1em;
}
.vorlagen-form button, .account-form button {
  background: #0077b6;
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 0.7em 1.7em;
  font-size: 1.07em;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px #0077b63a;
  margin-bottom: 1em;
  transition: background 0.13s;
}
.vorlagen-form button:hover, .account-form button:hover {
  background: #005380;
}
.success-msg {
  color: #207c37;
  font-weight: 600;
  margin-top: 0.5em;
}
.danger-btn {
  background: #b53a1b;
}
.section {
  margin-bottom: 2em;
  border-bottom: 1px solid #d8e7f7;
  padding-bottom: 1em;
}

main {
  max-width: 980px !important;
  margin: 2.4em auto !important;
  padding: 0 1vw;
}
.chat-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.upload-btn input[type="file"] { display: none; }

.upload-btn {
  background: #e9f4fc;
  border-radius: 7px;
  padding: 0.2em 0.9em;
  color: #0077b6;
  font-size: 1.35em;
  cursor: pointer;
  transition: background 0.15s;
  display: flex; align-items: center; justify-content: center;
}

.upload-btn:hover {
  background: #c6e6ff;
}
@media (max-width: 1000px) {
  main { max-width: 99vw !important; }
  .chat-container { max-width: 99vw; }
}


input.error { border-color: #b53a1b; }
input[type="checkbox"].error { outline: 2px solid #b53a1b; }

.breadcrumb-top {
  margin: 1.3em 0 1.6em 0;
  padding-left: 0.2em;
}
.breadcrumb-link {
  color: #0077b6;
  font-weight: 600;
  text-decoration: none;
  font-size: 1.08em;
  transition: color 0.15s;
}
.breadcrumb-link:hover {
  color: #005380;
  text-decoration: underline;
}


.auth-modal {
  background: #fff;
  padding: 2.1em 1.5em 1.5em 1.5em;
  border-radius: 24px;
  max-width: 420px;
  width: 94vw;
  box-shadow: 0 8px 48px #0077b627;
  margin: 2.2em auto;
  position: relative;
  outline: none;
  animation: modalIn 0.22s cubic-bezier(.5,1.4,.5,1.01);
  display: flex;
  flex-direction: column;
}

.auth-modal .form-group {
  margin-bottom: 0.7em !important; /* Abstand in Modal reduziert */
}

.auth-form-modern button, .register-btn-modern {
  transition: background 0.16s, transform 0.1s;
}

.auth-form-modern button:hover, .register-btn-modern:hover {
  transform: translateY(-2px) scale(1.04);
  background: #009ee1;
}

/* Platzhalter moderner */
input::placeholder {
  color: #b5c9da;
  opacity: 1;
}

/* Burger-Menü links im Header */
.burger-menu {
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1600;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 10px #0077b622;
  transition: box-shadow 0.14s;
}
.burger-menu span {
  display: block;
  width: 22px;
  height: 3px;
  background: #0077b6;
  margin: 3.5px 0;
  border-radius: 3px;
  transition: 0.18s;
}

/* Sidebar Overlay (dunkelt Seite ab) */
.sidebar-overlay {
  display: none;
  position: fixed;
  z-index: 1501;
  left: 0; top: 0;
  width: 100vw; height: 100vh;
  background: rgba(16,40,71,0.22);
  transition: opacity 0.25s;
  opacity: 0; pointer-events: none;
}
.sidebar-overlay.active {
  opacity: 1; pointer-events: all;
}

.sidebar-menu-left.open {
  transform: translateX(0);
}

.sidebar-links {
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  padding: 0 1.5em;
}
.sidebar-links a {
  display: flex;
  align-items: center;
  gap: 0.7em;
  color: #175189;
  font-size: 1.11em;
  text-decoration: none;
  font-weight: 600;
  border-radius: 10px;
  padding: 0.83em 1em;
  transition: background 0.13s, color 0.12s;
}
.sidebar-links a:hover {
  background: #f5f9fe;
  color: #0077b6;
}
.sidebar-links .material-icons {
  font-size: 1.28em;
  opacity: 0.75;
}

/* Account-Icon rechts im Header */
#accountIcon {
  display: block;
  position: absolute;
  right: 2rem;
  top: 1.2rem;
  cursor: pointer;
}

@media (max-width: 900px) {
  .sidebar-menu-left {
    position: fixed;
    left: -300px;
    top: 72px;
    height: calc(100vh - 72px);
    width: 260px;
    transition: left 0.18s;
    z-index: 2102;
    border-radius: 0 1.2em 1.2em 0;
  }
  .sidebar-menu-left.open {
    left: 0;
    box-shadow: 8px 0 32px #00336616, 0 1px 0 #e7eef6;
  }
  .sidebar-overlay.active {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }
  .sidebar-overlay {
    display: none;
    position: fixed;
    z-index: 2101;
    left: 0; right: 0; top: 0; bottom: 0;
    background: rgba(0,27,57,0.13);
    opacity: 0;
    transition: opacity 0.2s;
  }
}


.footer-modern {
  width: 100vw;
  background: #f8fafc;
  border-top: 1.5px solid #e4e9f0;
  color: #254361;
  font-size: 1.04em;
  margin-left: calc(50% - 50vw);
  box-shadow: 0 -1px 10px #0033660c;
  position: relative;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.4em 2vw 1.4em 2vw;
  gap: 1.2em;
  width: 100%;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.7em;
}

.footer-logo {
  height: 36px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 8px #c3d2e522;
}
.footer-app {
  font-weight: 700;
  color: #0077b6;
  letter-spacing: 0.01em;
  font-size: 1.14em;
}
.footer-links {
  display: flex;
  gap: 1.2em;
  flex-wrap: wrap;
  justify-content: center;
  flex: 1;
}
.footer-links a {
  color: #2d5a88;
  text-decoration: none;
  font-weight: 500;
  padding: 0.12em 0.16em;
  border-radius: 4px;
  transition: background 0.13s, color 0.13s;
}
.footer-links a:hover {
  color: #0077b6;
  background: #e8f1fa;
}
.footer-copyright {
  font-size: 0.98em;
  opacity: 0.69;
  letter-spacing: 0.02em;
}

@media (max-width: 800px) {
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7em;
    padding: 1.1em 4vw;
  }
  .footer-links { gap: 0.8em; }
}

.footer-breadcrumb {
  display: flex;
  align-items: center;
  background: rgba(248, 252, 255, 0.97);
  border-radius: 13px;
  box-shadow: 0 2px 8px #8ec7e522;
  padding: 0.38em 1.1em;
  font-size: 1.03em;
  color: #2275b6;
  min-width: 180px;
  gap: 0.7em;
  white-space: nowrap;
  margin-left: auto; /* ganz rechts */
}

.footer-breadcrumb a {
  color: #2576ba;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.12s;
}
.footer-breadcrumb a:hover { color: #006398; }
.breadcrumb-current {
  font-weight: 600;
  color: #254361;
}

@media (max-width: 900px) {
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8em;
  }
  .footer-breadcrumb {
    margin-left: 0;
    margin-top: 0.7em;
    align-self: flex-start;
  }
}


.collapsible-head {
  cursor: pointer;
  user-select: none;
}
.collapsible-head:hover #collapser {
  color: #0077b6;
}
.collapsible-content.collapsed {
  display: none !important;
}
#collapser.rotate {
  transform: rotate(-90deg);
  color: #0077b6;
}





html, body {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  min-height: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}
body {
  font-family: 'Inter', Arial, sans-serif;
  background: #f4f8fb;
  color: #1f2937;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
header {
  background: #fff;
  border-bottom: 1px solid #e5e9f2;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1em 2.2em;
  box-sizing: border-box;
  position: relative;
  min-height: 72px;
  max-width: 100%;
}
.header-center {
  position: absolute;
  left: 50%;
  top: 1.1em;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  z-index: 10;
}
.header-firm-logo {
  display: block;
  max-height: 31.5px;
  width: auto;
  height: auto;
  object-fit: contain;
}
main {
  width: 100%;
  max-width: 1000px;
  margin: 2.4em auto;
  padding: 0 1vw;
  box-sizing: border-box;
  background: none;
  flex: 1 0 auto; /* wichtig für Sticky Footer */
}
@media (max-width: 1000px) {
  main { max-width: 99vw; }
}
@media (max-width: 600px) {
  main { padding-left: 0.5vw; padding-right: 0.5vw; }
}
@media (max-width: 600px) {
  header { padding: 0.7em 0.9em; min-height: 48px; }
  .header-firm-logo { max-height: 24px; }
  .header-center { top: 0.5em; }
  main { padding-left: 0.5vw; padding-right: 0.5vw; }
}
footer {
  width: 100%;
  max-width: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
  padding: 1.1em 2vw;
  font-size: 1em;
  border-top: 1px solid #e7eef6;
  color: #497398;
  margin-top: 2em;
  box-sizing: border-box;
}
header nav a {
  margin-left: 1rem;
  text-decoration: none;
  color: #1f2937;
  font-weight: 500;
  transition: color 0.2s;
}
header nav a:hover {
  color: #0077B6;
}
.logo {
  font-weight: 700;
  font-size: 1.5rem;
  color: #0077B6;
}
/* Hero-Bereich und weitere Komponenten */
.hero-video-bg {
  position: relative;
  width: 100%;
  min-height: 630px; 
  margin: 0 auto;
  overflow: hidden;
  background: #0077b6;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
}
.hero-video {
  width: 100%;
  height: 540px;
  object-fit: cover;
  object-position: center 30%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  background: #0077b6;
  opacity: 0.92; /* leicht transparenter! */
  pointer-events: none;
}

.hero-video-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.10) 80%);
  /* sorgt für einen ganz leichten Milchglas-Effekt */
  pointer-events: none;
}

.hero-overlay {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  box-sizing: border-box;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 18px #0a162366;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 34px;
  gap: 1.1rem;
}

/* Logo bleibt oben im Overlay, evtl. weniger padding-top hier */
.hero-overlay .logo-wrapper {
  margin-bottom: 0.7em;
}


.hero-textblock {
  margin-bottom: 2.4em;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}
.hero-overlay h1 {
  font-size: 3.2rem;
  margin-bottom: 0.28em;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.hero-headline {
  font-size: 1.7rem;
  font-weight: 600;
  margin-bottom: 0.45em;
  background: rgba(0,119,182,0.67);
  border-radius: 32px;
  padding: 0.35em 1.6em;
  display: inline-block;
}
.hero-subline {
  font-size: 1.18rem;
  background: rgba(0,0,0,0.18);
  border-radius: 20px;
  padding: 0.35em 1.2em;
  margin-bottom: 0.8em;
  display: inline-block;
}
.hero-secondline {
  font-size: 1.07rem;
  background: rgba(0,0,0,0.14);
  border-radius: 16px;
  padding: 0.3em 1.1em;
  margin-bottom: 2.2em;
  display: inline-block;
}
.hero-chatbox {
  background: rgba(255,255,255,0.93);
  border-radius: 22px;
  box-shadow: 0 6px 32px #0002;
  padding: 2.2em 2em 1.5em 2em;
  max-width: 430px;
  margin: 0 auto 2.5em auto;
  color: #222b38;
}
.hero-chatbox h2 {
  color: #0077b6;
  margin-top: 0;
  margin-bottom: 0.4em;
}
.hero-chatbox p {
  margin: 0 0 1em 0;
}
.chat-messages {
  min-height: 80px;
  max-height: none;
  overflow-y: auto;
}
.register-form {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 1.4em;
}
.register-form input[type="email"] {
  flex: 3;
  min-width: 380px;
  max-width: 600px;
  padding: 1.15em 1.6em;
  border-radius: 8px 0 0 8px;
  border-right: none;
  border: 1px solid #d0d7e2;
  font-size: 1.18rem;
}
.register-form button {
  padding: 1.15em 2.6em;
  background: #0077b6;
  color: #fff;
  border: none;
  border-radius: 0 8px 8px 0;
  font-size: 1.14rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  height: 100%;
  margin-bottom: 0;
  white-space: nowrap;
}
.register-form button:hover {
  background: #009ee1;
}
@media (max-width: 700px) {
  .register-form {
    flex-direction: column;
    align-items: stretch;
  }
  .register-form input[type="email"],
  .register-form button {
    border-radius: 8px;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    margin-bottom: 0.8em;
    border-right: 1px solid #d0d7e2;
  }
  .register-form button { margin-top: 0; }
}
.register-features {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  max-width: 600px;
  margin-left: 0; /* unter dem Inputfeld ausgerichtet */
}
.register-features li {
  position: relative;
  font-size: 1.04rem;
  color: #1f2937;
  margin-bottom: 0.32em;
  padding-left: 1.6em;
}
.register-features li::before {
  content: '✓';
  color: #009ee1;
  margin-right: 0.6em;
  font-weight: bold;
}
/* Abstand/Farbe zwischen Video und Bild (Trennstreifen) */
.section-gap-alt {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  min-height: 52px;
  background: #f0f4f8;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Vorteile-Bildsektion: Hintergrundbild + Kacheln */
.vorteile-bildsektion {
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: stretch;
  margin-top: 0;
  margin-bottom: 2.7rem;
  min-height: 580px;
}
.vorteile-img-wrapper {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  position: relative;
}
.vorteile-bg-img {
  width: 100%;
  height: 560px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  object-fit: cover;
  object-position: center 45%;
  filter: brightness(0.56) blur(0.1px);
  opacity: 0.82;
  border-radius: 0;
  display: block;
}
.vorteile-kacheln-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  min-width: 0;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 3vw;
  padding: 0 3vw;
  z-index: 2;
}
.vorteil-kachel {
  background: rgba(240, 240, 240, 0.96);
  border-radius: 24px;
  box-shadow: 0 4px 32px #0002;
  padding: 1em 1em 1em 1em;  /* vorher 2.2em 2em 1.6em 2em */
  max-width: 380px;
  min-width: 280px;
  width: 100%;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: transform 0.18s;
  border: 1px solid #e6e6e6;
  margin: 0;
}
.vorteil-kachel:hover {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 8px 38px #0077b633;
}
.vorteil-icon {
  font-size: 3.2rem;
  margin-bottom: 0.6em;
}
.vorteil-kachel h3 {
  margin: 0 0 0.45em 0;
  font-size: 1.19rem;
  color: #0077b6;
  font-weight: 700;
  text-align: center;
}
.vorteil-kachel p {
  margin: 0;
  color: #222b38;
  font-size: 1.01rem;
  text-align: center;
}
.features {
  padding: 4rem 2rem;
  background: white;
  text-align: center;
}
.features h2 {
  margin-bottom: 2rem;
  font-size: 2rem;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
}
.feature-item {
  background: #f9fafb;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  font-weight: 500;
}
.chat-demo {
  max-width: 700px;
  margin: 4rem auto;
  background: #ffffff;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
/* =================== Chat-Container & Verlauf =================== */
.chat-container {
  max-width: none;
  width: 100%;
  background: #fcfdfe;
  border-radius: 20px;
  box-shadow: 0 3px 42px #0077b612;
  margin: 0 auto 3em auto;
  padding: 2.2em 3vw 2em 3vw;
  display: flex;
  flex-direction: column;
  min-height: 480px;
}
@media (max-width: 900px) {
  .chat-container { padding: 1.2em 1vw; }
}
.chat-header {
  background: #f7f7f7;
  padding: 0.9em 0.8em;
  border-bottom: 1px solid #ddd;
  font-weight: 600;
  color: #166ca8;
  border-radius: 12px 12px 0 0;
  display: flex;
  align-items: center;
}
.info-icon {
  font-size: 1.2em;
  margin-left: 0.7em;
  vertical-align: middle;
}
.filebubble-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  margin: 1em 0 0.4em 0;
}
.chat-messages {
  flex: 1;
  min-height: 120px;
  max-height: none;
  overflow-y: auto;
  font-size: 1.06em;
  padding: 1em 0.5em;
  margin-bottom: 0.6em;
  border-radius: 7px;
  background: #fafdfe;
}
.message {
  margin: 0.4em 0;
  padding: 0.8em 1em;
  border-radius: 9px;
  word-break: break-word;
  box-shadow: 0 1px 3px #0077b60e;
  font-size: 1em;
}
.message.user {
  background: #d4f0fe;
  align-self: flex-end;
  margin-left: auto;
  color: #1b485e;
}
.message.assistant {
  background: #f1f5f9;
  align-self: flex-start;
  margin-right: auto;
  color: #334455;
  position: relative;
}
.chat-hint {
  color: #8da2b7;
  font-style: italic;
  margin: 0.5em 0;
}
.chat-input-area {
  display: flex;
  align-items: flex-end;
  padding: 0.9em 0.9em 0.9em 0.6em;
  border-top: 1px solid #e9eef4;
  background: #fbfdff;
}
/* =================== Chat-Eingabe =================== */
.chat-input-bar {
  display: flex;
  align-items: flex-end;
  gap: 1.3em;
  margin-top: 0.8em;
  flex-wrap: wrap;
}
#chatInput {
  width: 100%;
  min-height: 3.4em;
  border-radius: 13px;
  border: 1.4px solid #e5eaf0;
  font-size: 1.17em;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  padding: 1.1em;
  resize: vertical;
  background: #f8fbfe;
  margin-bottom: 0.7em;
  transition: border 0.14s;
  box-shadow: 0 1.5px 9px #8ec7e519;
}
#chatInput:focus {
  border: 1.4px solid #0077b6;
  outline: none;
  background: #f0f7fc;
}
.chat-input-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
}
.chat-input-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.3em;
}
.chat-upload-block {
  display: flex;
  align-items: center;
  gap: 0.3em;
}
.upload-btn {
  background: #e9f5ff;
  color: #0077b6;
  border-radius: 50%;
  border: none;
  width: 2.2em;
  height: 2.2em;
  font-size: 1.6em;
  cursor: pointer;
  box-shadow: 0 1px 4px #0077b616;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.13s;
  position: relative;
}
.upload-btn input[type="file"] {
  display: none;
}
.upload-plus {
  font-size: 1.3em;
  font-weight: 700;
}
.upload-label {
  font-weight: 500;
  font-size: 1.01em;
  margin-left: 0.1em;
}
#chatInput:disabled {
  background: #f3f6fa;
  color: #888;
  border: 1.5px solid #e3e8f0;
  cursor: not-allowed;
}
#sendBtn {
  background: linear-gradient(90deg, #169cd9 0%, #2bd7b1 100%);
  color: #fff;
  border: none;
  border-radius: 9px;
  font-size: 1.13em;
  padding: 0.77em 2.1em;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 2px 10px #2bd7b131;
  transition: background 0.16s;
  align-self: flex-end;
  margin-left: auto;
}
#sendBtn:hover {
  background: #0077b6;
}
#sendBtn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.message-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end; /* sorgt für Button rechts */
  gap: 0.6em;
  margin-bottom: 0.6em;
  position: relative;
}

.message.assistant {
  flex: 1 1 auto;
  background: #f8fcfe;
  border-radius: 16px;
  padding: 1.1em 1.4em;
  box-shadow: 0 2px 14px #0077b62e;
  color: #234;
  position: relative;
  min-width: 0;
  word-break: break-word;
}

.copy-btn {
  align-self: flex-start;
  margin-top: 0.1em;
  margin-right: 0.1em;
  border: none;
  background: #fff;
  border-radius: 50%;
  padding: 0.12em 0.17em;
  font-size: 0,88em;
  color: #0077b6;
  box-shadow: 0 1px 7px #006aad17;
  cursor: pointer;
  transition: background 0.17s, color 0.17s;
}
.copy-btn:hover {
  background: #eaf6fb;
  color: #184e8b;
}

/* Datei-Bubble (Anzeige hochgeladener Dateien) */
.file-bubble {
  display: flex;
  align-items: center;
  gap: 0.7em;
  background: #f7f8fc;
  color: #184e8b;
  border-radius: 13px;
  box-shadow: 0 1.5px 7px #0077b612;
  padding: 0.65em 1.3em 0.65em 0.95em;
  font-size: 1.03em;
  margin-bottom: 0.22em;
}
.file-icon {
  font-size: 1.25em;
  margin-right: 0.16em;
}
.file-name {
  font-weight: 600;
  margin-right: 0.3em;
}
.file-type {
  font-size: 0.97em;
  color: #3472b8;
  margin-right: 0.5em;
}
.file-remove {
  background: none;
  border: none;
  color: #d32f2f;
  font-size: 1.2em;
  font-weight: 700;
  cursor: pointer;
  margin-left: 0.35em;
  margin-right: -0.2em;
}
.file-remove:hover {
  color: #b8060e;
}
/* =================== Footer modernisiert =================== */
.footer-modern {
  width: 100vw;
  background: #f8fafc;
  border-top: 1.5px solid #e4e9f0;
  color: #254361;
  font-size: 1.04em;
  margin-left: calc(50% - 50vw);
  box-shadow: 0 -1px 10px #0033660c;
  position: relative;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.4em 2vw 1.4em 2vw;
  gap: 1.2em;
  width: 100%;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.7em;
}
.footer-logo {
  height: 36px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 8px #c3d2e522;
}
.footer-app {
  font-weight: 700;
  color: #0077b6;
  letter-spacing: 0.01em;
  font-size: 1.14em;
}
.footer-links {
  display: flex;
  gap: 1.2em;
  flex-wrap: wrap;
  justify-content: center;
  flex: 1;
}
.footer-links a {
  color: #2d5a88;
  text-decoration: none;
  font-weight: 500;
  padding: 0.12em 0.16em;
  border-radius: 4px;
  transition: background 0.13s, color 0.13s;
}
.footer-links a:hover {
  color: #0077b6;
  background: #e8f1fa;
}
.footer-copyright {
  font-size: 0.98em;
  opacity: 0.69;
  letter-spacing: 0.02em;
}
@media (max-width: 800px) {
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7em;
    padding: 1.1em 4vw;
  }
  .footer-links { gap: 0.8em; }
}
.footer-breadcrumb {
  display: flex;
  align-items: center;
  background: rgba(248, 252, 255, 0.97);
  border-radius: 13px;
  box-shadow: 0 2px 8px #8ec7e522;
  padding: 0.38em 1.1em;
  font-size: 1.03em;
  color: #2275b6;
  min-width: 180px;
  gap: 0.7em;
  white-space: nowrap;
  margin-left: auto; /* rechts ausrichten */
}
.footer-breadcrumb a {
  color: #2576ba;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.12s;
}
.footer-breadcrumb a:hover {
  color: #006398;
}
.breadcrumb-current {
  font-weight: 600;
  color: #254361;
}
@media (max-width: 900px) {
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8em;
  }
  .footer-breadcrumb {
    margin-left: 0;
    margin-top: 0.7em;
    align-self: flex-start;
  }
}
.collapsible-head {
  cursor: pointer;
  user-select: none;
}
.collapsible-head:hover #collapser {
  color: #0077b6;
}
.collapsible-content.collapsed {
  display: none !important;
}
#collapser.rotate {
  transform: rotate(-90deg);
  color: #0077b6;
}

/* --- Chatbox Startseite: Anfangs schmal, auf Hover/Fokus breite Ansicht --- */
.hero-chatbox {
  transition: max-width 0.38s cubic-bezier(.7,0,.3,1), box-shadow 0.16s;
  max-width: 430px;
  width: 100%;
  margin: 0 auto 2.5em auto;
  background: rgba(255,255,255,0.94);
  border-radius: 22px;
  box-shadow: 0 6px 32px #0002;
  padding: 2.2em 2em 1.5em 2em;
  color: #222b38;
}

.hero-chatbox:focus-within {
  max-width: 90vw;
  box-shadow: 0 8px 38px #0077b66c;
  background: #fff;
}

@media (max-width: 1100px) {
  .hero-chatbox:hover, .hero-chatbox:focus-within {
    max-width: 98vw;
  }
}

/* Senden-Button wie auf projekt.html */
.hero-chatbox button,
#guestChatContainer button {
  background: linear-gradient(90deg, #169cd9 0%, #2bd7b1 100%);
  color: #fff;
  border: none;
  border-radius: 9px;
  font-size: 1.13em;
  padding: 0.77em 2.1em;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 2px 10px #2bd7b131;
  transition: background 0.16s;
  align-self: flex-end;
  margin-left: auto;
  margin-right: 0;
  display: inline-block;
}
.hero-chatbox button:hover,
#guestChatContainer button:hover {
  background: #0077b6;
}
#guestChatContainer input[type="text"] {
  border: 1.4px solid #e5eaf0;
  border-radius: 13px;
  font-size: 1.14em;
  padding: 1.1em;
  background: #f8fbfe;
  flex: 1;
  margin-right: 1em;
  transition: border 0.14s;
  box-shadow: 0 1.5px 9px #8ec7e519;
}
#guestChatContainer input[type="text"]:focus {
  border: 1.4px solid #0077b6;
  outline: none;
  background: #f0f7fc;
}

@media (max-width: 700px) {
  .hero-chatbox, .hero-chatbox:hover, .hero-chatbox:focus-within {
    max-width: 98vw;
    padding: 1.1em 0.4em;
  }
}

/* Breite und Abstand für hero-video-bg, Registerbox und Vorteile-Bildsektion */
.hero-video-bg,
.vorteile-bildsektion {
  width: 100vw;
  min-width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  position: relative;
  left: 0; right: 0;
  box-sizing: border-box;
}
/* Abstand zwischen Video, Registerbox und Vorteile */
.section-gap-alt {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  background: #f0f4f8;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/*
 * === Final Layout Overrides ===
 * Diese Regeln sorgen dafür, dass die neuen Anforderungen umgesetzt werden.
 */

/* Gleiche Mindesthöhe für die drei Vorteil-Kacheln auf der Startseite */
.vorteile-kacheln-container .vorteil-kachel {
  min-height: 280px;
}

/* Demo‑Chat‑Eingabe (Startseite): ordnet Input und Button untereinander und füllt die volle Breite aus */
.guest-chat-input {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin-top: 1rem;
}
.guest-chat-input input[type="text"] {
  width: 100%;
  margin: 0 0 0.6rem 0;
}
.guest-chat-input button {
  align-self: flex-end;
  margin: 0;
}


/* Breadcrumbs im oberen Bereich des Main-Containers */
.breadcrumb-nav-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.6em;
  font-size: 0.85em;
  color: #425d79;
  margin: 0.4rem 0 1rem 0;
}
.breadcrumb-nav-top a {
  color: #2576ba;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.12s;
}
.breadcrumb-nav-top a:hover {
  color: #006398;
}
.breadcrumb-nav-top .breadcrumb-sep {
  color: #b8c3d6;
}

/* ----- Zusätzliche Layout-Korrekturen ----- */

/* Dehne die Kacheln der Vorteil‑Sektion gleichmäßig in der Höhe, um identische Größen zu gewährleisten */
.vorteile-kacheln-container {
  align-items: stretch !important;
}

/* Zentriere den Demo‑Chatcontainer und nutze die volle Breite */
#guestChatContainer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin: 0 auto;
}
#guestChatContainer .chat-messages {
  margin-bottom: 0.8rem;
}
/* Entferne rechten Rand vom Textfeld im Gast‑Chat, damit der Senden‑Button bündig abschließt */
#guestChatContainer input[type="text"] {
  margin-right: 0;
}



/* Ordne Upload‑Icon und Senden‑Button in einer Zeile an und verteile Platz */
.chat-input-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.6rem;
}
.chat-upload-block {
  display: flex;
  align-items: center;
  margin-right: auto;
}
/* Verberge den Text „Datei auswählen“ – das Plus‑Icon reicht als Indikator */
.chat-upload-block .upload-label {
  display: none;
}

/* Korrigiere Demo‑Chat‑Button‑Layout: Senden‑Button nicht neben dem Input, sondern darunter rechts */
#guestSendBtn {
  /* Überschreibe Vorgaben aus der hero‑Chatbox */
  margin-left: 0 !important;
  display: block !important;
}
/* Eingabefeld im Demo‑Chat voll breit und ohne rechten Rand */
#guestChatContainer input[type="text"] {
  flex: none !important;
  width: 100% !important;
  margin-right: 0 !important;
}

/*
 * === Zusätzliche final overrides (Version 2) ===
 * Hier definierte Regeln gleichen die Kachelgrößen an,
 * sorgen für durchgängige Seitenbreite auf Dashboard‑, Projekt‑ und Eigenerklärungsseiten,
 * strecken die Sidebar bis zum unteren Rand und richten die Chat‑Elemente sauber aus.
 */

/* Gleiche Breite und Höhe für die drei Vorteil‑Kacheln auf der Startseite */
.vorteile-kacheln-container .vorteil-kachel {
  /* Jede Kachel erhält den gleichen Flex‑Faktor für identische Breite */
  flex: 1 1 0 !important;
  /* Erzwinge eine einheitliche Mindesthöhe, damit unterschiedlich lange Texte die Größe nicht verändern */
  min-height: 280px !important;
}


/* Breitformatige Hauptbereiche: Dashboard‑, Projekt‑ und Eigenerklärungsseiten sollen sich über die gesamte Seite erstrecken */
.dashboard-main,
.project-main,
.eigenerklaerungen-main {
  /* Überlagere die standardmäßige 1000px-Begrenzung von <main> vollständig */
  max-width: 1280px !important;
  width: 100% !important;
  /* Einheitlicher Außenabstand: 2rem oben/unten, 1.5rem links/rechts */
  margin: 2.2rem auto 2.2rem auto !important;
  padding: 0 1vw !important;
  background: none;
}

/* Hero‑Chat: Chat‑Nachrichten und Eingabecontainer sollen die volle Breite nutzen */
.hero-chatbox .chat-messages,
.hero-chatbox .guest-chat-input {
  width: 100% !important;
}
/* Sende‑Button im Demo‑Chat korrekt rechtsbündig unter dem Eingabefeld ausrichten */
.hero-chatbox .guest-chat-input button {
  align-self: flex-end !important;
}



/* Die gesamte Nachricht flex-column */
.message.assistant {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-top: 0.9em;
  padding-bottom: 1.1em;
  padding-left: 1.3em;
  padding-right: 1.3em;
  background: #f8fcfe;
  border-radius: 16px;
  box-shadow: 0 2px 14px #0077b62e;
  margin-bottom: 0.7em;
  min-width: 0;
}

/* Header der Bubble: Abstand zum Text */
.msg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.32em;
  gap: 1.2em;
}

.copy-btn {
  background: #fff;
  border-radius: 50%;
  border: none;
  padding: 0.12em 0.17em !important;
  font-size: 0.88em !important;
  width: auto !important;
  height: auto !important;
  min-width: unset !important;
  min-height: unset !important;
  line-height: 1 !important;
  box-shadow: 0 1px 7px #006aad17;
  cursor: pointer;
  margin-left: 1em;
  margin-right: -0.1em;
  transition: background 0.16s, color 0.16s;
}
.copy-btn .material-icons {
  font-size: 1.1em !important;
}
.copy-btn:hover {
  background: #eaf6fb;
  color: #184e8b;
}

.msg-body {
  font-size: 1.09em;
  color: #234;
  word-break: break-word;
  line-height: 1.6;
  padding-right: 0.2em;
}


/* Main-Bereich springt nach rechts, wenn Sidebar offen ist (nur auf großen Screens) */
@media (min-width: 900px) {
  body.sidebar-open .dashboard-main {
    margin-left: 280px;
    transition: margin 0.2s;
  }
  .sidebar-menu-left {
    position: sticky;
    top: 72px;
    height: calc(100vh - 72px);
  }
}


.dashboard-content-wrapper {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: calc(100vh - 72px); /* 72px = Headerhöhe */
}

.sidebar-menu-left {
  position: fixed;
  top: 72px;
  align-self: flex-start;
  height: 100%; /* wichtig: keine 100vh! */
  min-height: calc(100vh - 72px);
  width: 240px;
  max-width: 93vw;
  background: #fff;
  z-index: 1502;
  box-shadow: 8px 0 32px #00336616, 0 1px 0 #e7eef6;
  display: flex;
  flex-direction: column;
  padding: 1.5em 0 0 0;
  border-radius: 0 2.1em 2.1em 0;
  transition: box-shadow 0.18s;
  margin-right: 0;
  flex-shrink: 0;
}

.dashboard-content {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dashboard-hero-bg {
  width: 100%;
  background: #fff;
  padding-top: 1.2rem;
  padding-bottom: 0.9rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 14px #e2eaf750;
  min-height: 60px;
  position: relative;
}

.dashboard-hero-logo-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-right: 2.2em;
  padding-left: 1.6em;
}

.dashboard-hero-logo {
  height: 40.5px;
  max-width: 98vw;
  object-fit: contain;
  display: block;
}

.breadcrumb-nav-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.7em;
  font-size: 1em;
  color: #425d79;
  margin: 0;
  margin-left: auto;
  min-width: 240px;
  padding-left: 2em;
}

@media (max-width: 1100px) {
  .dashboard-content-wrapper {
    flex-direction: column;
    align-items: stretch;
  }
  .sidebar-menu-left {
    width: 93vw;
    max-width: 99vw;
    height: 100%;
    min-height: calc(100vh - 72px);
    border-radius: 0 1.2em 1.2em 0;
    position: static;
    box-shadow: 0 3px 22px #0001;
  }
  .dashboard-hero-bg {
    flex-direction: column;
    align-items: stretch;
    padding: 0.6em 1em;
  }
  .dashboard-hero-logo-container {
  display: flex;
  align-items: center;
  justify-content: center; /* Logo wirklich zentriert! */
  width: 100%;
  padding-right: 2.2em;
  padding-left: 1.6em;
  position: relative;
  }
  .breadcrumb-nav-top {
  position: absolute;
  right: 2.2em;
  top: 50%;
  transform: translateY(-50%);
  min-width: 200px;
  }
}

.dashboard-main {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2vw;
  background: none;
  flex: 1 1 auto;
  box-sizing: border-box;
}

#dashboard {
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}


.sidebar-menu-left {
  position: fixed;
  left: -300px;
  top: 72px;
  width: 260px;
  max-width: 96vw;
  height: 100%;
  min-height: calc(100vh - 72px);
  z-index: 2102;
  background: #fff;
  box-shadow: 8px 0 32px #00336616, 0 1px 0 #e7eef6;
  border-radius: 0 2.1em 2.1em 0;
  display: flex;
  flex-direction: column;
  padding: 1.5em 0 0 0;
  transition: left 0.22s cubic-bezier(.86,.01,.53,1);
  /* Sidebar ist standardmäßig ausgeblendet (links draußen) */
}

/* Sidebar sichtbar, wenn .open */
.sidebar-menu-left.open {
  left: 0;
}

/* Overlay */
.sidebar-overlay {
  display: none;
  position: fixed;
  left: 0; right: 0; top: 0; bottom: 0;
  background: rgba(0,27,57,0.13);
  z-index: 2101;
  opacity: 0;
  transition: opacity 0.22s;
}

.sidebar-overlay.active {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

/* Responsive: Sidebar bleibt immer gleich, NICHT sticky! */
@media (max-width: 900px) {
  .sidebar-menu-left {
    width: 92vw;
    max-width: 99vw;
    border-radius: 0 1.2em 1.2em 0;
  }
}


.dashboard-hero-logo-container {
  position: relative;
  width: 100%;
  min-height: 72px;
}

.logo-center-helper {
  width: 100%;
  text-align: center;
}

.dashboard-hero-logo {
  height: 40.5px;
  max-width: 98vw;
  object-fit: contain;
  display: inline-block;
  /* kein margin-left/right! */
}

.breadcrumb-nav-top {
  position: absolute;
  top: 50%;
  right: 2.2em;
  transform: translateY(-50%);
  min-width: 200px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.7em;
  font-size: 1em;
  color: #425d79;
  margin: 0;
}


/* Modernes Info-Icon und Tooltip */
.info-icon {
  background: none !important;
  color: #2777b6 !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 1.38em !important;
  vertical-align: middle;
  cursor: pointer;
  margin-left: 0.5em;
  position: relative;
}
.info-icon[data-tooltip]:hover::after,
.info-icon[data-tooltip]:focus::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 120%;
  top: 50%;
  transform: translateY(-50%);
  min-width: 260px;
  max-width: 400px;
  background: #fff;
  color: #1960a5;
  font-size: 1.18em;
  border: 1.5px solid #2186de33;
  box-shadow: 0 6px 32px #156da733;
  border-radius: 13px;
  padding: 1.1em 1.5em;
  z-index: 300;
  white-space: normal;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.01em;
  pointer-events: none;
  opacity: 0.98;
}

/* Upload-Button (Plus-Symbol): nur Plus anzeigen, Kreis erst auf Hover */
.upload-btn {
  background: none !important;
  border-radius: 50%;
  border: none;
  width: 2.1em;
  height: 2.1em;
  font-size: 1.4em;
  cursor: pointer;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.13s, box-shadow 0.13s;
  position: relative;
  padding: 0;
}
.upload-btn:hover, .upload-btn:focus {
  background: #e7f4ff !important;
  box-shadow: 0 1.5px 7px #0077b610 !important;
}
.upload-plus {
  font-size: 1.28em !important;
  font-weight: 700;
  color: #0077b6;
  transition: color 0.14s;
}
.upload-label { display: none !important; }

/* Chat-Input-Zeile (Datei & Senden Button bündig) */
.chat-input-bar {
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  width: 100%;
}

.chat-input-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100%;
  padding: 0; /* kein Abstand oben/unten */
  margin: 0;
}

.chat-upload-block {
  margin-left: 0 !important;
  margin-right: auto !important;
  display: flex;
  align-items: center;
}
#sendBtn {
  display: flex;
  align-items: center; /* zentriert Text oder Icon vertikal */
  justify-content: center;
  height: 2.1em; /* gleiche Höhe wie Upload-Button */
  margin: 0; /* kein zusätzlicher Abstand */
}

#sendBtn:hover {
  background: #0077b6;
}

.projekt-info-box {
  background: #f7fafd;
  border-radius: 14px;
  box-shadow: 0 2px 16px #0077b615;
  padding: 2em 2.2em 1.2em 2.2em;
  margin-bottom: 2.2em;
  position: relative;
  max-width: 520px;
  width: 100%;
}

.projekt-info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.1em;
}

.edit-project-btn {
  background: #eaf4ff;
  color: #2266a6;
  border: none;
  border-radius: 7px;
  font-size: 1.05em;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.2em;
  padding: 0.44em 1.2em 0.44em 0.8em;
  cursor: pointer;
  transition: background 0.13s, color 0.14s;
  box-shadow: 0 1px 6px #0077b612;
}
.edit-project-btn .material-icons {
  font-size: 1.18em;
  vertical-align: middle;
  margin-right: 0.18em;
}
.edit-project-btn:hover {
  background: #d8ebfc;
  color: #006398;
}
.projekt-info-fields > div {
  margin-bottom: 0.42em;
  font-size: 1.07em;
}
.form-row {
  margin-bottom: 0.7em;
}
.save-btn {
  background: #207c37;
  color: #fff;
  border-radius: 7px;
  font-weight: 600;
  border: none;
  padding: 0.6em 1.6em;
  box-shadow: 0 1px 6px #207c3722;
  transition: background 0.13s;
}
.save-btn:hover {
  background: #155528;
}
.cancel-btn {
  background: #ccc;
  color: #333;
  border-radius: 7px;
  border: none;
  padding: 0.6em 1.2em;
  box-shadow: 0 1px 4px #9995;
  transition: background 0.13s;
}
.cancel-btn:hover {
  background: #bbb;
  color: #222;
}


/* Fortschrittsanzeige Container in Chat-Bubble */
.bubble.progress-msg {
  background: #f9fcff;  /* hellblauer Hintergrund (leicht hervorgehoben) */
  border: 1px solid #bee5eb;
}
.progress-container h4 {
  font-weight: 600;
  margin: 0 0 0.5em;
}
.progress-bar {
  background: #e5e9f2;
  border-radius: 4px;
  overflow: hidden;
  height: 8px;
  margin-bottom: 0.5em;
}
.progress-bar-fill {
  background: #0077b6;
  width: 0%;
  height: 100%;
  transition: width 0.8s ease;
}
.progress-step {
  font-size: 0.9em;
  font-weight: 500;
  margin-bottom: 0.3em;
}
.progress-details {
  font-size: 0.85em;
  margin-top: 0.3em;
  padding-left: 1em;
}
.progress-details li {
  margin-bottom: 0.2em;
}


/* Warnhinweis für fehlende Platzhalter */
.bubble.placeholder-warning {
  background: #fff3cd;   /* hellgelber Hintergrund */
  border: 1px solid #ffeeba;
  color: #856404;        /* dunkles Gelb/Braun für Text */
}
.bubble.placeholder-warning ul {
  margin: 0.5em 0;
  padding-left: 1.2em;
}
.bubble.placeholder-warning li {
  list-style: disc;
}


.info-hinweis {
  background: #e7f4ff;
  color: #186da6;
  border-radius: 9px;
  padding: 0.85em 1.2em;
  margin: 0.65em 0 1em 0;
  font-size: 1.01em;
  font-weight: 500;
  line-height: 1.5;
  box-shadow: 0 2px 8px #0077b620;
}


.info-icon {
  font-size: 1em;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  color: #0077b6;
}
#logoInfoTooltip {
  box-shadow: 0 6px 32px 0 rgba(0,0,0,0.09);
}
#logoPreview {
  border-radius: 8px;
  background: #f6f6f6;
  border: 1px solid #e0e0e0;
}



/* =========================================
   FORM ELEMENTE
========================================= */
input[type="text"], input[type="email"], input[type="number"],
select, textarea{
  width:100%; background:#fff; border:1px solid #e5e8ef; border-radius:10px;
  padding:.65em .8em; font-size:1rem; color:var(--ink);
  outline: none; transition: border-color .12s, box-shadow .12s, background .12s;
}
input:focus, select:focus, textarea:focus{
  border-color:#9cc7f2; box-shadow: var(--focus-ring);
}
label{ display:block; font-weight:600; margin:.75em 0 .35em; color:#2b3a4a; }
.form-row{ margin-bottom:.75em; }

/* Platzhalter */
::placeholder{ color:#9aa7b2; }



/* =========================================
   INFO-HINWEISE & POPOVER
========================================= */
.info-hinweis{
  background:#e7f4ff; color:#186da6; border-radius: 9px;
  padding: .85em 1.2em; margin: .65em 0 1em 0; font-size:1.01em; font-weight:500; line-height:1.5;
  box-shadow: 0 2px 8px #0077b620;
}
.info-icon{ font-size:1em; display:inline-block; vertical-align:middle; cursor:pointer; color:var(--primary); }
#logoInfoTooltip{ box-shadow: 0 6px 32px 0 rgba(0,0,0,0.09); }
#logoPreview{
  border-radius:8px; background:#f6f6f6; border:1px solid #e0e0e0; max-height:60px; display:none; margin:.5em 0;
}

/* Info-Button + Popover (mit HTML) */
.info-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; margin-left:.4em; border-radius:50%;
  border:1px solid #b3d8fa; background: var(--primary-weak); color:#176fa6;
  font-weight:700; cursor:pointer;
}
.info-btn:hover, .info-btn:focus{ background:#176fa6; color:#fff; outline:none; }

.info-popover{
  position:absolute; z-index:2000; min-width:320px; max-width:640px; max-height:60vh; overflow:auto;
  background:#fff; color:#183a56; border:1px solid #c4d8ef; border-radius:10px; padding:.9em 1em; box-shadow: var(--shadow-lg);
}
.info-popover h4{ margin:0 0 .4em 0; font-size:1.05em; color: var(--primary-ink); }
.info-popover a{ font-weight:700; color:#0a66c2; text-decoration:none; }
.info-popover a:hover{ text-decoration:underline; }

.form-label-with-info{ position:relative; display:inline-flex; align-items:center; gap:.4em; }

/* Dezente Hervorhebung (Default-Auswahl) */
.field-highlight{ animation: fieldPulse 1.6s ease-out 2; box-shadow:0 0 0 0 rgba(20,184,166,0.0); }
@keyframes fieldPulse{
  0% { box-shadow:0 0 0 0 rgba(20,184,166,0); }
  30%{ box-shadow:0 0 0 3px rgba(20,184,166,.25); }
  100%{ box-shadow:0 0 0 0 rgba(20,184,166,0); }
}

/* =========================================
   PROJEKT-INFOS, PROGRESS & WARNHINWEIS
========================================= */
.projekt-info-box{
  background:#f7fafd; border-radius: var(--radius-lg);
  box-shadow: 0 2px 16px #0077b615; padding:2em 2.2em 1.2em; margin-bottom:2.2em;
  position:relative; max-width:720px; width:100%;
}
.projekt-info-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.1em; }
.edit-project-btn{
  background:#eaf4ff; color:#2266a6; border:none; border-radius: var(--radius-sm);
  font-size:1.05em; font-weight:600; display:flex; align-items:center; gap:.2em;
  padding:.44em 1.2em .44em .8em; cursor:pointer; transition: background .13s, color .14s; box-shadow:0 1px 6px #0077b612;
}
.edit-project-btn .material-icons{ font-size:1.18em; vertical-align:middle; margin-right:.18em; }
.edit-project-btn:hover{ background:#d8ebfc; color:#006398; }
.projekt-info-fields > div{ margin-bottom:.42em; font-size:1.07em; }

.bubble.progress-msg{ background:#f9fcff; border:1px solid #bee5eb; }
.progress-container h4{ font-weight:600; margin:0 0 .5em; }
.progress-bar{ background:#e5e9f2; border-radius:4px; overflow:hidden; height:8px; margin-bottom:.5em; }
.progress-bar-fill{ background: var(--primary); width:0%; height:100%; transition: width .8s ease; }
.progress-step{ font-size:.9em; font-weight:500; margin-bottom:.3em; }
.progress-details{ font-size:.85em; margin-top:.3em; padding-left:1em; }
.progress-details li{ margin-bottom:.2em; }

.bubble.placeholder-warning{
  background: var(--warn-bg); border:1px solid var(--warn-border); color: var(--warn-ink);
}
.bubble.placeholder-warning ul{ margin:.5em 0; padding-left:1.2em; }
.bubble.placeholder-warning li{ list-style: disc; }





/* =========================================
   DATEI-UPLOAD (Dropzone)
========================================= */
#dropZone{
  width:100%; display:flex; align-items:center; justify-content:center;
  margin:1em 0; padding:1em; border:2px dashed #cbd5e1; border-radius:10px; background:#f9fcff;
}
#dropZone.dragover{ border-color: var(--primary); background:#e6f4ff; }
.upload-instruction{ font-weight:500; font-size:1.02em; margin-left:.6em; }
.upload-plus{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%; background: var(--primary); color:#fff; font-size:1.4em;
  margin-right:.6em;
}
.upload-btn{ display:flex; align-items:center; gap:.6em; color: var(--primary); font-weight:700; cursor:pointer; }
.upload-btn input[type=file]{ display:none; }





/* -------------------------------------------------------*/
/* --------------------- Dashboard -----------------------*/
/* -------------------------------------------------------*/


/* =========================================
   Eigenes Formular-Styling für Checkbox-Zeilen und LSB-Tabelle
========================================= */

/* Checkbox-Zeilen: linksbündig, flex Layout */
.checkbox-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6em;
  width: 100%;
  margin: 0.8em 0 0.2em 0;
  padding-left: 0;
}

.checkbox-inline{
  display:inline-flex;
  align-items:center;
  gap:.35em;
}

.checkbox-inline input[type="checkbox"]{
  margin:0;
  transform:scale(1.3);
  transform-origin:left center;
}

/* Info-Button bleibt direkt neben dem Text (nicht nach rechts "wegfliegen") */
.checkbox-row .info-btn{
  margin-left:.2em;
  flex:0 0 auto;
}

/* Vergrößerte Checkbox ohne übermäßigen Klickradius */
.checkbox-row input[type="checkbox"] {
  margin: 0;
  transform: scale(1.35);
  transform-origin: left center;
}

/* Beschriftung neben der Checkbox */
.checkbox-label {
  font-weight: 600;
  color: #2b3a4a;
  white-space: nowrap;
  margin-left: 0;
}

/* Info-Button am Ende der Zeile bleibt klickbar */
.checkbox-row .info-btn {
  margin-left: auto;
}

/* Tabelle zur Darstellung der verschiedenen Leistungsbeschreibungen */
.lsb-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.4em;
  font-size: 0.93em;
}

/* Kopfzeile der Tabelle: dunkles Blau mit weißem Text */
.lsb-table th {
  background: #0077b6;
  color: #fff;
  padding: 0.55em 0.7em;
  font-weight: 600;
}

/* Standardzellen: zarte Umrandung und ausreichendes Padding */
.lsb-table td {
  border: 1px solid #e5eaf1;
  padding: 0.55em 0.7em;
  vertical-align: top;
  line-height: 1.45;
  color: #1f2937;
}

/* Abwechselnde Zeilenhintergründe für bessere Lesbarkeit */
.lsb-table tbody tr:nth-child(even) {
  background: #f7fafc;
}

/* Erste Spalte fett und mit fester Breite */
.lsb-table td:first-child {
  font-weight: 600;
  width: 22%;
  white-space: nowrap;
}

/* Listen in Vorteilszellen ohne zusätzliche Abstände */
.lsb-table ul {
  margin: 0;
  padding-left: 1.2em;
}

.lsb-table li {
  margin: 0.15em 0;
}

/* Größeres Popover für die Leistungsbeschreibungstabelle */
#infoLSBPopover {
  min-width: 720px;
  max-width: 1100px;
  max-height: 85vh;
}

/* PDF-Link im Popover klar erkennbar */
.pdf-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: #0a66c2;
  text-decoration: underline;
  font-weight: 700;
}

.pdf-link:hover {
  color: #084f96;
  text-decoration-thickness: 2px;
}


/* ===== Generic VA Modal ===== */
.va-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1300;
}

.va-modal.is-open,
.va-modal[aria-hidden="false"] {
  display: flex;
}

.va-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 12, 32, 0.6);
}

.va-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(96vw, 720px);
  max-height: 96vh;
  display: flex;
  flex-direction: column;
}

.va-modal__content {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 96vh;
}

/* ===== Projektlauncher Modal ===== */
.project-edit-modal .va-modal__dialog {
  width: min(720px, 96vw);
  max-height: 96vh;
  margin: 4vh auto;
}

.project-edit-modal .va-modal__content {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.25);
  display: flex;
  flex-direction: column;
  max-height: 96vh;
}

.project-modal__panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.project-modal__header {
  padding: 1.6rem 2.2rem 1.2rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.project-modal__titlegroup {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.project-modal__subtitle {
  margin: 0;
  color: #5c6881;
  max-width: 36rem;
  line-height: 1.45;
}

.project-modal__body {
  padding: 1.6rem 2.2rem 2rem;
  background: #f8fafc;
  flex: 1;
  overflow-y: auto;
}

.project-modal__form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.project-modal__section {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 1.15rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.project-modal__section--collapsible {
  gap: 1rem;
}

.project-modal__section-head {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.project-modal__section-head strong {
  font-size: 1rem;
  color: #0b2941;
}

.project-modal__subline {
  margin: 0;
  color: #64748b;
  font-size: 0.92rem;
}

.project-modal__label {
  font-weight: 600;
  color: #0b2941;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.project-modal__label--with-info {
  align-items: center;
}

.project-modal__control {
  width: 100%;
  border: 1px solid #cfd8e3;
  border-radius: 12px;
  padding: 0.85rem 1rem;
  font-size: 1rem;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.project-modal__control:focus {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.25);
  outline: none;
}

.project-modal__hint {
  margin: 0;
  font-size: 0.9rem;
  color: #64748b;
}

.project-modal__info-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  border-radius: 16px;
  border: 1px solid rgba(14, 165, 233, 0.25);
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.95), rgba(226, 239, 255, 0.9));
  color: #0b2941;
}

.project-modal__info-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #0ea5e9;
  color: #fff;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
}

.project-modal__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.project-modal__collapser {
  border: 1px dashed #d4dbea;
  border-radius: 14px;
  padding: 0.9rem 1.1rem;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: #0b2941;
  cursor: pointer;
}

.project-modal__collapser .material-icons {
  transition: transform 0.18s ease;
}

.project-modal__collapser[aria-expanded="true"] .material-icons {
  transform: rotate(180deg);
}

.project-modal__lot {
  border: 1px dashed #bee3f8;
  border-radius: 16px;
  padding: 1.2rem 1.3rem;
  background: #f0f9ff;
  display: grid;
  gap: 1rem;
}

.project-modal__info-card p {
  margin: 0;
  line-height: 1.45;
}

.project-modal__footer {
  border-top: 1px solid rgba(148, 163, 184, 0.35);
  padding: 1rem 2rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  background: #fff;
}

.project-modal__footer .btn {
  min-width: 140px;
}

.project-modal__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  font-weight: 700;
  color: #0ea5e9;
  margin: 0;
}

.project-modal__eyebrow--muted {
  color: #94a3b8;
  letter-spacing: 0.14em;
}

.info-btn--accent {
  background: rgba(13, 191, 190, 0.15);
  color: #0ea5e9;
  border: none;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-weight: 700;
}

#newProjectModal .info-btn,
#newLosModal .info-btn {
  background: rgba(20, 184, 166, 0.16);
  border-color: rgba(20, 184, 166, 0.4);
  color: #0f766e;
}

#newProjectModal .info-btn:hover,
#newProjectModal .info-btn:focus,
#newLosModal .info-btn:hover,
#newLosModal .info-btn:focus {
  background: #0d9488;
  border-color: #0d9488;
  color: #fff;
}

#newProjectModal .ag-template-highlight,
#newLosModal .ag-template-highlight {
  border-color: #2dd4bf;
  background: #f0fdfa;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.18);
}

#newLosModal .ag-template-highlight {
  border-color: #2dd4bf !important;
  background: #f0fdfa !important;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.18) !important;
}

@media (max-width: 960px) {
  .project-modal__dialog {
    width: min(760px, 100vw);
    height: 100vh;
    max-height: 100vh;
  }
  .project-modal__header,
  .project-modal__body {
    padding-left: 1.4rem;
    padding-right: 1.4rem;
  }
}

@media (max-width: 640px) {
  .project-modal__dialog {
    border-radius: 0;
  }
  .project-info-card {
    flex-direction: column;
  }
  .project-modal__header,
  .project-modal__body {
    padding: 1.1rem 1.2rem 1rem;
  }
  .project-modal__close {
    width: 36px;
    height: 36px;
  }
  .project-modal__collapser {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* Header dauerhaft sichtbar */
header {
  position: sticky;  /* vorher: relative */
  top: 0;
  z-index: 2000;     /* über Content/Modalinhalte */
}

/* Der weiße Balken mit großem Logo + Breadcrumb bleibt unter dem Header kleben */
.dashboard-hero-bg {
  position: sticky;
  top: 72px;         /* Höhe des Headers auf Desktop (min-height:72px) */
  z-index: 1500;     /* unter dem Header, über dem Content */
}

/* Auf kleineren Viewports Header niedriger -> Offset anpassen */
@media (max-width: 600px) {
  .dashboard-hero-bg { top: 48px; }  /* min-height:48px im Mobile-Header */
}






/* -------------------------------------------------------*/
/* --------------------- Vorlagen ------------------------*/
/* -------------------------------------------------------*/


/* =========================================
   TABELLE (Vorlagen-Liste)
========================================= */
.templates-table{ width:100%; border-collapse:collapse; background:var(--paper); box-shadow: var(--shadow-md); border-radius: 12px; overflow:hidden; }
.templates-table th, .templates-table td{ padding:.7em .9em; border-bottom:1px solid #edf2f7; }
.templates-table th{ background:#f5faff; text-align:left; color:#223048; font-weight:700; }
.templates-table tbody tr:hover{ background:#fbfdff; }


/* Schöneres Fehlerfeedback auf vorlagen.html */
input.input-error { border-color:#c0392b !important; outline: none; }

/* Sorgt dafür, dass die Inhalte in main links mit Breadcrumb/Logo starten */
.dashboard-main {
  padding: 24px;              /* wie im Dashboard */
}

/* Entfernt eventuelle zusätzliche linke Einzüge deiner Vorlagen-Container */
.dashboard-main .vorlagen-form,
.dashboard-main #fileTab {
  margin-left: 0 !important;
}

/* Optional: Button-Reihe (Tab-Menü) bündig */
.tab-menu { margin: 0 0 1rem 0; }


/* === LSB-Tabelle: dunkler Kopf + dezente, klarere Linien === */
.lsb-table { border-collapse: collapse; }

.lsb-table th {
  /* dunkler, passend zum PDF-Link (#0a66c2) */
  background: #0a66c2;
  color: #fff;
  padding: 0.55em 0.7em;
  font-weight: 700;
  border-bottom: 2px solid #084f96; /* klare Abschlusslinie unter dem Header */
}

/* feine vertikale Trenner im Kopf */
.lsb-table th + th {
  border-left: 1px solid rgba(255,255,255,0.18);
}

/* etwas markantere, aber weiterhin dezente Grid-Linien */
.lsb-table td {
  border: 1px solid #cfd9e6;           /* vorher sehr hell (#e5eaf1) */
  padding: 0.55em 0.7em;
  vertical-align: top;
  line-height: 1.5;
  color: #1f2937;
}

/* leicht kräftigere horizontale/vertikale Linien innen */
.lsb-table tbody tr + tr td { border-top-color: #c6d3e3; }
.lsb-table td + td             { border-left-color: #c6d3e3; }

/* Zebra bleibt dezent */
.lsb-table tbody tr:nth-child(even) { background: #f6f9fc; }

/* === Header immer sichtbar (mitscrollend) === */
header {
  position: sticky;   /* Layout bleibt erhalten, kein extra Padding nötig */
  top: 0;
  z-index: 2000;      /* über dem Content, unter dem Sidebar-Overlay */
  background: #fff;   /* falls transparente Bereiche auftauchen */
}


/* =========================================
   TABS (Vorlagen-Seite)
========================================= */

.tab-menu {
  display: flex; gap: .5rem; margin: 1.2rem 0 1.1rem 0;
  border-bottom: 1.6px solid #e6eef7; padding-bottom: .4rem;
}
.tab-link {
  position: relative;
  padding: .6rem 1rem;
  border-radius: 999px;
  background: #f2f7fc;
  color: #175189;
  font-weight: 700;
  border: 1px solid #e3edf8;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .08s;
}
.tab-link:hover { background:#e8f2fc; transform: translateY(-1px); }
.tab-link:focus-visible { outline: 2px solid #1999ea; outline-offset: 2px; }
.tab-link.active {
  background: #0077b6; color: #fff; border-color: #0077b6;
}
.tab-link.active::after {
  content:""; position:absolute; left:14px; right:14px; bottom:-10px;
  height:3px; border-radius:3px; background: linear-gradient(90deg,#169cd9,#2bd7b1);
}


/* Info-Button wie im Dashboard */
.info-btn{
  display:inline-flex; justify-content:center; align-items:center;
  width:22px; height:22px; border-radius:50%;
  border:1px solid #b3d8fa; background:#e9f5ff; color:#176fa6;
  font-weight:800; font-size:.95em; margin-left:.35em; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s, transform .08s;
}
.info-btn:hover{ background:#176fa6; color:#fff; border-color:#176fa6; transform:translateY(-1px); }

/* Popover */
.info-popover{
  position: fixed; z-index: 3000; background:#fff; border:1px solid #c4d8ef;
  box-shadow: 0 8px 28px #176fa61c; border-radius: 12px; padding: .9em 1em;
  max-width: 360px; width: max(260px, 26vw);
}


.picker-btn{
  background:#f2f7fc; color:#175189; border:1px solid #d3e4f6;
  border-radius:8px; padding:.45em .6em; cursor:pointer;
}
.picker-btn:hover{ background:#e8f2fc; }


.editor-toolbar{
  display:flex; gap:.4em; margin:.3em 0 .4em 0; flex-wrap:wrap;
}
.editor-toolbar button{
  background:#eef6ff; color:#175189; border:1px solid #d3e4f6; border-radius:7px;
  padding:.38em .6em; font-weight:600; cursor:pointer;
}
.editor-toolbar button:hover{ background:#dff0ff; }


/* Globales Overlay: beide Varianten aktivieren */
#dropOverlay { display:none; position: fixed; z-index:15000; inset:0;
  background: rgba(36,66,125,0.16); justify-content:center; align-items:center; }
#dropOverlay.show, #dropOverlay.active { display:flex; }
#dropOverlay .drop-overlay-inner, #dropOverlay .drop-inner{
  text-align:center; background:#fff; border:2px dashed #1999ea; border-radius:22px;
  padding: 2.2em 3em; box-shadow:0 6px 28px #0077b644;
}
#dropZone{
  display:flex; align-items:center; gap:.7em; padding:1.2em; border:2px dashed #cfe5fb;
  border-radius:16px; background:#f7fbff; margin:.8em 0;
}
#dropZone.dragover{ background:#eef7ff; border-color:#1999ea; }
#dropZone .upload-instruction{ color:#31688e; }


.vorlagen-form button[type="submit"]{ margin-top: 1.1em; }


/* Vorlagen-Form breiter nur auf vorlagen.html */
.vorlagen-form { max-width: 900px; }

/* dicker Trenner */
.section-divider { height:3px; border:0; background: linear-gradient(90deg,#e6eef7,#cfe0f4); margin: 2em 0; }

/* Tabelle breiter, kein Zeilenumbruch in Aktionsspalte */
.templates-table { width:100%; border-collapse: collapse; table-layout: auto; }
.templates-table th, .templates-table td { padding:.8em .6em; border-bottom:1px solid #e9eff7; }
.templates-table td:last-child { white-space: nowrap; }
.templates-table .btn { display:inline-flex; align-items:center; gap:.35em; margin-right:.5em; }


/* Tabs in vorlagen.html: standardmäßig verstecken */
.tab-content { display: none; }
.tab-content.active { display: block; }


/* Kompakter Editor-Container wie Chat-Karte */
.text-editor-card{
  background:#fff;border:1px solid #e6eef6;border-radius:14px;
  box-shadow:0 4px 20px #0077b611;margin:1em 0 1.2em 0;
}
.text-editor-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:0.6em 0.8em;border-bottom:1px solid #e6eef6;background:#f7f9fc;
  border-radius:14px 14px 0 0;
}
.text-editor-title{
  margin:0;color:#0a3855;font-size:1.05em;font-weight:700;
}
.text-editor-textarea{
  width:100%;border:none;outline:none;background:#fff;
  padding:0.9em 1em;min-height:120px;font-size:1.02em;resize:vertical;
  border-radius:0 0 14px 14px;
}
.text-editor-hint{
  font-size:0.92em;color:#58779b;padding:0.4em 0.9em 0.8em 0.9em;
}

/* Toolbar-Buttons moderner */
.editor-toolbar button{
  background:#e9f5ff;border:1px solid #d2e8fb;color:#176fa6;
  border-radius:8px;padding:0.35em 0.6em;font-weight:700;cursor:pointer;
  margin-left:0.35em;box-shadow:0 1px 4px #0077b612;transition:background .13s;
}
.editor-toolbar button:hover{ background:#cfeaff; }


.logo-dropzone{
  display:flex;align-items:center;gap:0.8em;border:2px dashed #1999ea;
  background:#f8fcff;border-radius:14px;padding:0.8em 1em;min-height:66px;
}
.logo-dropzone.dragover{ background:#e9f4ff; }
.logo-drop-text{ color:#1e4f79;font-size:0.98em; }
.logo-drop-sub{ font-size:0.9em;color:#6b8aa6;margin-top:0.1em; }

/* Header und Toolbar dichter an das Feld */
.text-editor-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:0.35rem 0.6rem; /* dichter */
  border-bottom:1px solid #e6eef6;background:#f7f9fc;border-radius:14px 14px 0 0;
}
.editor-toolbar button,
.editor-toolbar select{
  margin-left:0.3em;
  background:#e9f5ff;border:1px solid #d2e8fb;color:#176fa6;border-radius:8px;
  padding:0.28em 0.5em;font-weight:600;cursor:pointer;box-shadow:0 1px 4px #0077b612;
}
.editor-toolbar button:hover,
.editor-toolbar select:hover{ background:#cfeaff; }

/* WYSIWYG-Body */
.text-editor-content{
  background:#fff;
  border-radius:0 0 14px 14px;
  outline:none;
  border:1px solid #e6eef6;
  border-top:none; /* direkt an Header */
  font-size:1.02em; 
  line-height:1.45;
  min-height:160px; 
  padding:.9rem 1rem; 
  border-radius:0 0 14px 14px;
  resize: vertical; 
  overflow:auto;
}
.text-editor-content:focus{ box-shadow: inset 0 0 0 2px #cfeaff; }

/* Placeholder für contenteditable */
.text-editor-content[contenteditable="true"]:empty:before{
  content: attr(data-placeholder); color:#8aa1b5;
}

/* Grundformatierungen im Editor */
.text-editor-content h1{ font-size:1.6em; margin:0.4em 0; }
.text-editor-content h2{ font-size:1.4em; margin:0.4em 0; }
.text-editor-content h3{ font-size:1.2em; margin:0.4em 0; }
.text-editor-content ul, .text-editor-content ol{ padding-left:1.2em; }


/* Zentrierte Überschrift im Editor-Container */
.text-editor-header.center{
  justify-content:center !important;
}

/* Toolbar direkt über dem Feld, eine Zeile */
.editor-toolbar{
  display:flex; 
  align-items:center; 
  gap:.4rem;
  padding:.45rem .6rem; 
  border-bottom:1px solid #e6eef6; 
  background:#f7f9fc;
  flex-wrap: nowrap; 
  overflow-x:auto;
}

/* Buttons & Selects einheitlich; aktive States wie „Word“ */
.editor-toolbar button,
.editor-toolbar .toolbar-select,
.editor-toolbar .toolbar-input-number{
  background:#e9f5ff; 
  height:34px; 
  line-height:32px;
  border:1px solid #d2e8fb; 
  color:#176fa6;
  border-radius:8px; 
  padding:.28em .5em; 
  font-weight:600; 
  cursor:pointer;
  box-shadow:0 1px 4px #0077b612;
}
.editor-toolbar button:hover,
.editor-toolbar .toolbar-select:hover,
.editor-toolbar .toolbar-input-number:hover{ background:#cfeaff; }
.editor-toolbar button.active{
  background:#bfe0ff; 
  border-color:#93c7f6;
}

/* Editor-Feld: nur vertikal resize */

.text-editor-content[contenteditable="true"]:empty:before{
  content: attr(data-placeholder); color:#8aa1b5;
}

/* Logo-Dropzone (kleiner im Modal) */
.logo-dropzone.small{ min-height:56px; padding:.6em .8em; }
.logo-edit-row{ display:flex; align-items:center; gap:.6rem; margin-top:.5rem; }
.danger-btn{
  background:#ffe8e8; border:1px solid #ffbaba; color:#b03131; border-radius:8px;
  padding:.35em .6em; cursor:pointer;
}
.danger-btn:hover{ background:#ffdcdc; }


/* Modal: Scrollbereich richtig flexen */
.modal-content { display:flex; flex-direction:column; max-height: 90vh; } /* ist schon vorhanden, doppelt schadet nicht */
.modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* Editor im Modal: nicht höher als halber Screen */
.modal .text-editor-content { max-height: 45vh; }

/* Optional: wenn du safe kein Body-Scroll willst, solange Modal offen ist */
body.modal-open { overflow: hidden; }



/* ----------------------------------------------------*/
/* ------------------- Projekt.html -------------------*/
/* ----------------------------------------------------*/

#projektCPV .cpv-chip {
  display:inline-block; padding:4px 8px; border-radius:14px;
  background:#eef5ff; border:1px solid #cfe0ff; margin-right:6px; margin-top:4px;
  font-size:0.9em; color:#1656a3;
}




/* ----------------------------------------------------*/
/* ------------------- account.html -------------------*/
/* ----------------------------------------------------*/


/* ================================
   Global Settings & Design Tokens
   ================================ */
:root{
  --brand:#175189;
  --brand-ink:#0a3855;
  --bg:#f5f8fc;
  --card:#ffffff;
  --border:#e2eaf5;
  --text:#1e293b;
  --muted:#6b7280;
  --success:#1b7c2c;
  --danger:#b32626;
  --warning:#b25a00;
  --radius:12px;
  --shadow:0 6px 20px rgba(2,18,46,.08);
  --focus:0 0 0 3px rgba(23,81,137,.25);
}

html,body{
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

*{box-sizing:border-box}


/* ============
   Layout: Tabs
   ============ */
.settings-wrapper{
  display:flex;
  gap:1.4rem;
  align-items:flex-start;
}

.settings-tabs{
  display:flex;
  flex-direction:column;
  gap:.55rem;
  min-width:220px;
}

.tab-btn{
  background:#f7faff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:.7em 1em;
  font-weight:600;
  color:var(--brand);
  text-align:left;
  cursor:pointer;
  transition:transform .05s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.tab-btn:hover{ background:#eef5ff; border-color:#cfdbee }
.tab-btn:active{ transform:translateY(1px) }
.tab-btn:focus-visible{ outline:none; box-shadow:var(--focus) }
.tab-btn.active{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
}

.settings-panels{ flex:1; min-width:0 }

.tab-panel{ display:none }
.tab-panel.active{ display:block }

/* =============
   Cards/Forms
   ============= */
.account-form{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.1rem;
  margin-bottom:1.1rem;
}

.account-form h3{
  margin:.2rem 0 1rem;
  color:var(--brand-ink);
}

.account-form label{
  display:block;
  font-size:.95rem;
  color:var(--brand-ink);
  margin:.6rem 0 .25rem;
}

.account-form input,
.account-form select,
.account-form textarea{
  width:100%;
  padding:.7rem .8rem;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  color:var(--text);
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.account-form input:focus,
.account-form select:focus,
.account-form textarea:focus{
  border-color:#cfdbee;
  box-shadow:var(--focus);
}

.account-form .form-row{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:.8rem;
}
.form-col-6{ grid-column:span 6 }
.form-col-4{ grid-column:span 4 }
.form-col-3{ grid-column:span 3 }
.form-col-12{ grid-column:span 12 }

/* =========
   Buttons
   ========= */
button,
.btn{
  background:var(--brand);
  color:#fff;
  border:1px solid var(--brand);
  border-radius:10px;
  padding:.7rem 1rem;
  font-weight:600;
  cursor:pointer;
  transition:filter .15s ease, transform .05s ease, background .2s ease, border-color .2s ease;
}
button:hover,.btn:hover{ filter:brightness(1.05) }
button:active,.btn:active{ transform:translateY(1px) }
button:focus-visible,.btn:focus-visible{ outline:none; box-shadow:var(--focus) }

.secondary{
  background:#eff4fb;
  color:var(--brand);
  border-color:#d8e3f3;
}
.secondary:hover{ background:#e7effb }

.danger-btn{
  background:var(--danger);
  border-color:var(--danger);
}
.danger-btn:hover{ filter:brightness(1.03) }

/* ============
   Helper Tags
   ============ */
.msg-success{ color:var(--success); font-weight:600 }
.msg-error{ color:var(--danger); font-weight:600 }

/* ============
   Danger Zone
   ============ */
.danger-zone{
  border:1px solid #f3c0c0;
  background:#fff6f6;
  border-radius:var(--radius);
  padding:1rem;
}
.danger-zone strong{ color:var(--danger) }

#deleteAccountBtn {
  background: #fff;
  color: var(--danger);
  border: 1px solid rgba(179, 49, 49, 0.25);
  border-radius: 10px;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
#deleteAccountBtn:hover {
  background: #ffe8e8;
  box-shadow: 0 2px 12px rgba(179, 49, 49, 0.15);
  transform: translateY(-1px);
}

/* ==================
   AVV – Vorschau/PDF
   ================== */
#avvPreview{
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  padding:1rem;
  max-height:360px;
  overflow:auto;
}
#avvPreview h2,#avvPreview h3{ color:var(--brand-ink) }
#avvPreview a{ color:var(--brand) }

/* =========
   Footer
   ========= */
/* Verwende <footer class="site-footer"> auf allen Seiten */
.site-footer, footer{
  display:flex;
  align-items:center;
  gap:1.4em;
  border-top:1px solid var(--border);
  padding:1rem 0;
  margin-top:2rem;
  color:var(--muted);
}
.site-footer img, footer img{ height:36px }
.site-footer a, footer a{
  color:var(--brand);
  text-decoration:none;
}
.site-footer a:hover, footer a:hover{ text-decoration:underline }

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

/* =============
   Responsive
   ============= */
@media (max-width: 900px){
  .settings-wrapper{ flex-direction:column }
  .settings-tabs{ flex-direction:row; flex-wrap:wrap }
  .form-col-6,.form-col-4,.form-col-3{ grid-column:span 12 }
}


/* Einheitliche Hauptüberschrift */
.page-title {
  color: #0a3855;          /* blau wie auf den anderen Seiten */
  font-size: 1.8rem;
  font-weight: 800;
  margin: 1rem 0 1.2rem 0;
}

/* Karten/Container im Account-Bereich */
.account-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 3px 24px #0077b610;
  padding: 1.2rem;
  margin: 0 0 1.2rem 0;
}

/* Form-Grid: automatisch in 2-3 Spalten je nach Platz */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem 1.2rem;
}
.form-double-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem 1.2rem;
}
.form-double-row > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.form-grid .col-2 { grid-column: span 2; }
@media (max-width: 720px) {
  .form-grid .col-2 { grid-column: span 1; }
}

/* Tabs (kompakt, bündig zum Inhalt) */
.tab-menu {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: .5rem 0 1rem 0;
}
.tab-link {
  appearance: none; border: 1px solid #d8e7f7; background: #f7fbff; color: #1f4562;
  border-radius: 9px; padding: .5rem .9rem; font-weight: 700; cursor: pointer;
}
.tab-link.active { background: #0077b6; color: #fff; border-color: #0077b6; }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* AVV Vorschau */
.avv-preview {
  max-height: 480px;
  overflow: auto;
  padding: .8rem;
  border: 1px solid #e4edf7;
  border-radius: 9px;
  background: #fbfdff;
}

/* Danger-Zone Blickfang */
.danger-zone { border: 1px solid #f2d4cd; background: #fff8f7; }

/*
 * Globale Vereinheitlichung des Info‑Icons.
 * Viele vorherige Styles definieren .info-icon mehrfach und teils widersprüchlich.
 * Damit auf allen Seiten das gleiche Erscheinungsbild genutzt wird, definieren wir
 * hier am Ende der Datei eine einheitliche Variante. Sie wird dank !important
 * angewandt und übersteuert ältere Definitionen. Das Icon erscheint als runder
 * Button mit dezenter Hintergrundfarbe und wechselt beim Überfahren die Farbe.
 */
.info-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.5em !important;
  height: 1.5em !important;
  border-radius: 50% !important;
  background-color: #e0ecfa !important;
  color: #1466a6 !important;
  border: 1px solid #d2e4f6 !important;
  font-size: 1.05em !important;
  cursor: pointer !important;
  margin-left: 0.4em !important;
  vertical-align: middle !important;
  position: relative !important;
}
.info-icon:hover,
.info-icon:focus {
  background-color: #e5f6fd !important;
  color: #0077b6 !important;
  border-color: #99c1e6 !important;
  outline: none !important;
}

/*
 * Tooltip für Info‑Icons
 * Nutze das data-tooltip‑Attribut, um über CSS einen Tooltip zu generieren.
 * Der Tooltip erscheint rechts vom Icon und passt sich in Breite und
 * Hintergrundfarbe automatisch an. Vorherige Definitionen existierten in mehreren
 * Varianten; diese Version fasst alles zusammen. Der Inhalt wird aus
 * data-tooltip gelesen.
 */
.info-icon[data-tooltip]:hover::after,
.info-icon[data-tooltip]:focus::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 110%;
  top: 50%;
  transform: translateY(-50%);
  min-width: 200px;
  max-width: 340px;
  background: #ffffff;
  color: #183a56;
  font-size: 0.95em;
  border: 1px solid #c4d8ef;
  box-shadow: 0 4px 24px #0077b612;
  border-radius: 10px;
  padding: 0.6em 1em;
  z-index: 300;
  white-space: normal;
}

/*
 * CPV‑Modal: Listen für Vorschläge und Auswahl gestalten
 */
.cpv-list {
  background: #fbfdff;
  border: 1px solid #e4edf7;
  border-radius: 8px;
  max-height: 300px;
  overflow-y: auto;
  padding: 0.2em 0;
  font-size: 0.95em;
}

.cpv-list .cpv-item {
  padding: 0.45em 0.7em;
  border-bottom: 1px solid #e8f0fa;
  cursor: default;
}
.cpv-list .cpv-item:last-child {
  border-bottom: none;
}

.cpv-list .cpv-item:hover {
  background: #f0f7ff;
}

.cpv-list .cpv-item button {
  background: #e0ecfa;
  border: none;
  color: #1466a6;
  border-radius: 50%;
  width: 1.6em;
  height: 1.6em;
  font-size: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.cpv-list .cpv-item button:hover {
  background: #cfe0ff;
}

/* Textanzeige, wenn keine CPV‑Vorschläge vorhanden sind */
.cpv-empty {
  padding: 0.6em;
  color: #666;
  font-size: 0.95em;
  text-align: center;
}







/* Upload-Knopf: gut sichtbar, Plus mittig */
.project-main .chat-upload-block .upload-btn{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,#0077b6,#00a3ff);
  color:#fff;border:none;box-shadow:0 3px 12px rgba(0,119,182,.35);
  cursor:pointer;
}
.project-main .chat-upload-block .upload-btn:hover{ filter:brightness(.96); }
.project-main .chat-upload-block .upload-plus{
  font-size:28px;line-height:1;pointer-events:none;
}
.project-main .chat-upload-block input[type="file"]{
  position:absolute;inset:0;opacity:0;cursor:pointer;
}

/* Info-Button einheitlich */
.project-main .info-btn{ width:26px;height:26px; }


/* Upload-Kreis/Plus: klar erkennbar & mittig */
.project-main .upload-btn {
  width: 42px; height: 42px; border-radius: 50%;
  background: radial-gradient(100% 100% at 50% 0%, #eaf4ff 0%, #d6ebff 100%);
  box-shadow: 0 4px 18px #0077b618;
  border: 1px solid #cfe5ff;
  display: inline-flex; align-items: center; justify-content: center;
}
.project-main .upload-btn:hover { filter: saturate(1.1) brightness(1.02); }
.project-main .upload-plus {
  display: inline-block; line-height: 1; transform: translateY(-1px);
  font-size: 22px; font-weight: 800; color: #0a66c2;
}

/* Einheitliches Info-Icon (alle Seiten) */
.info-icon {
  background: none !important; border: none !important; border-radius: 0 !important;
  color: #2777b6 !important; font-size: 1.38em !important; vertical-align: middle;
  cursor: pointer; margin-left: .5em; position: relative;
}
.info-icon[data-tooltip]:hover::after,
.info-icon[data-tooltip]:focus::after {
  content: attr(data-tooltip);
  position: absolute; left: 120%; top: 50%; transform: translateY(-50%);
  min-width: 240px; max-width: 420px;
  background: #fff; color: #183a56; font-size: 0.98em;
  border: 1px solid #c4d8ef; box-shadow: 0 4px 24px #176fa62a;
  border-radius: 10px; padding: .7em 1.1em; z-index: 300; white-space: normal;
}

/* CPV-Listen: Basiszustände */
.cpv-list { background:#fbfdff; border:1px solid #e4edf7; border-radius:8px; max-height:300px; overflow:auto; padding:.2em 0; font-size:.95em; }
.cpv-list .cpv-item { padding:.45em .7em; border-bottom:1px solid #e8f0fa; display:flex; align-items:center; gap:.6em; }
.cpv-list .cpv-item:last-child { border-bottom:none; }
.cpv-list .cpv-item:hover { background:#f0f7ff; }
.cpv-list .cpv-item button { background:#e0ecfa; border:none; color:#1466a6; border-radius:50%; width:1.6em; height:1.6em; font-size:1em; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.cpv-list .cpv-item button:hover { background:#cfe0ff; }
.cpv-empty { padding:.6em; color:#666; text-align:center; }


#sendBtn{ margin-left:auto !important; }

/* Upload-Knopf: Plus exakt mittig */
.upload-btn{
  width:2.4em; height:2.4em; border-radius:50%;
  display:grid; place-items:center; position:relative;
}
.upload-plus{
  display:block; font-weight:700; font-size:1.2em; line-height:1;
}

/* CPV-Items: Card voll klickbar, Plus groß rechtsbündig */
.cpv-item{ 
  border:1px solid #e7eef6; border-radius:12px; padding:12px 48px 12px 12px; 
  margin:6px 0; background:#fff; cursor:pointer; position:relative;
}
.cpv-item .add-btn{
  position:absolute; right:8px; top:8px; width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:9px; font-size:22px; background:#e9f5ff; color:#0077b6; border:none;
}
.cpv-item:hover{ background:#f9fcff; }


/* ===== Projektseite: Chat & CPV-Modal – Overwrites ===== */



/* 2) Senden rechts, Plus links – auf einer Linie */
.project-main .chat-input-bar{ width:100% !important; }
.project-main .chat-input-row{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:1rem !important;
  flex-wrap:nowrap !important;
}
#sendBtn{ margin-left:auto !important; }

/* 3) Upload-Plus exakt mittig */
.upload-btn{
  width:2.6em; height:2.6em; border-radius:50%;
  display:grid; place-items:center;
  position:relative; font-size:0; /* whitespace kill */
}
.upload-btn .upload-plus{
  font-size:24px; line-height:1; font-weight:700;
  display:block; margin:0; padding:0;
}

/* 4) CPV-Card voll klickbar; Plus groß & rechtsbündig */
.cpv-item{ 
  border:1px solid #e7eef6; border-radius:12px; padding:12px 48px 12px 12px; 
  margin:6px 0; background:#fff; cursor:pointer; position:relative;
}
.cpv-item .add-btn{
  position:absolute; right:8px; top:8px; width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:9px; font-size:22px; background:#e9f5ff; color:#0077b6; border:none;
}
.cpv-item:hover{ background:#f9fcff; }



/* Fix: Logo-Entfernen-Button gut lesbar (auch ohne Hover) */
#editRemoveLogoBtn {
  background: #ffe8e8;
  border: 1px solid #ffbaba;
  color: #b03131;
}
#editRemoveLogoBtn:hover {
  background: #ffdcdc;
  color: #9a2727;
  filter: none;              /* kein starkes Abdunkeln */
}


/* CPV suggestion/selection cards styling */
.cpv-item {
  padding: 0.5em 0.75em;
  margin-bottom: 0.5em;
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}
.cpv-item:hover {
  background: #f1f1f1;
}
.cpv-empty {
  padding: 0.5em;
  font-style: italic;
  color: #555;
}
/* Make add/remove buttons more prominent */
.add-btn, .remove-btn {
  font-size: 1.25em;
  width: 2em;
  height: 2em;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  background: none;
  border: none;
  color: #333;
}
.add-btn:hover, .remove-btn:hover {
  background: #e0e0e0;
  border-radius: 50%;
}

/* Einheitliche Überschrift-Farbe (wie auf den anderen Seiten) */
.section-title { color: #0077b6; }

/* Consent-Row: Text links (max 50%), große Checkbox rechts */
.consent-row {
  display: flex; align-items: center; gap: 1rem;
  border: 1px solid #e4edf7; background:#fbfdff; border-radius: 10px;
  padding: .95rem 1.1rem; margin:.7rem 0 .6rem 0;
}
.consent-text {
  flex: 1 1 auto;
  max-width: none;
  line-height: 1.5;
  text-align: left;
}
.consent-checkbox-wrap {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.consent-checkbox-wrap input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--brand, #0077b6);
}
#dataConsentCheckbox {
  /* doppelt so groß wie vorher (vorher ~1.5x) -> jetzt ~3x */
  width: 28px; height: 28px; transform: scale(3.0);
  accent-color: #0a66c2;
}
#dataConsentCheckbox:focus-visible {
  outline: 2px solid #0a66c2; outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(10,102,194,.2);
}

/* Datenverarbeitung Tab im Stil des Beschaffungs-Modals */
.data-stack { display:flex; flex-direction:column; gap:1.2rem; }
.data-panel {
  border:1px solid #d7e6f3;
  border-radius:22px;
  background:linear-gradient(150deg,#ffffff,#f7fbff);
  box-shadow:0 18px 48px rgba(7,32,56,.12);
  overflow:hidden;
}
.data-panel-head { padding:24px 26px 8px; }
.data-panel .data-icon { box-shadow:0 18px 36px rgba(0,171,186,.35); background:linear-gradient(135deg,#00f2ff,#01aab8); color:#032731; }
.data-panel-subline { margin:0 26px 18px; color:#4b5e72; line-height:1.45; }
.data-panel-body { padding:0 26px 26px; display:grid; gap:1rem; }
.data-panel-body.two-col { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:start; }
@media (max-width: 900px){ .data-panel-body.two-col { grid-template-columns: 1fr; } }

.data-panel-copy ul { padding-left: 1.1rem; color:#122c3f; line-height:1.55; }
.data-panel-copy li { margin: 0 0 .3rem 0; }
.data-panel-copy p { color:#122c3f; }
.data-note { color:#5a7086; font-size:.94rem; }

.account-stack .hub-modal-card{ width:100%; }
.account-stack .hub-modal-head{ gap:1.4rem; }
.account-stack .hub-modal-head .hub-modal-title{ margin-left:0; padding-left:.25rem; }
.panel-head-split{ align-items:center; gap:1.2rem; }
.panel-head-split .hub-modal-title{ flex:1; }
.panel-head-split .status-pill,
.panel-head-split .head-badge{ margin-left:auto; }
.head-badge.admin-badge{
  position:static;
  right:auto; top:auto;
  margin-left:auto;
}

.data-chip {
  display:inline-flex;
  align-items:center;
  padding:.2rem .65rem;
  border-radius:999px;
  background:#e8f4ff;
  color:#0b3c5c;
  font-weight:700;
  font-size:.85rem;
}
.data-chip.soft { background:#f0f5fb; color:#2f4a64; }

.consent-box {
  border:1px solid #dce8f5;
  background:linear-gradient(180deg,#fbfdff,#f3f8ff);
  border-radius:16px;
  padding:1rem;
  display:flex;
  flex-direction:column;
  gap:.8rem;
}
.consent-check { display:flex; gap:.75rem; align-items:flex-start; color:#0c1f30; line-height:1.5; }
.consent-check span { display:block; }
#dataConsentCheckbox { width:18px; height:18px; transform:none; accent-color:#0a66c2; }
.consent-details { margin:0; color:#4c5f73; line-height:1.5; }
.button-row.slim { margin-top:.2rem; gap:.5rem; }

.avv-actions { display:flex; align-items:flex-start; gap:.8rem; flex-wrap:wrap; justify-content:space-between; }
.helper-text { color:#5a7086; font-size:.92rem; }
.helper-text.msg-error { color:#b53a1b; }

.security-list ul{
  margin:.1rem 0 .35rem;
  padding-left:1.1rem;
  color:#102a4e;
  line-height:1.5;
}
.security-list .data-chip{ margin-bottom:.35rem; }
.security-list .helper-text{ margin:0; }
.security-list--planned{
  border-top:1px solid #e4edf7;
  padding-top:.9rem;
}
.mfa-security{
  display:grid;
  gap:1rem;
}
.mfa-security__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  padding:1rem;
  border:1px solid #dce8f5;
  border-radius:10px;
  background:#f8fbfe;
}
.mfa-security__head h3{
  margin:.1rem 0 .25rem;
  color:#0d2742;
  font-size:1.05rem;
}
.mfa-security__head .helper-text{
  margin:0;
}
.mfa-security__summary{
  margin:0;
  color:#17324d;
  line-height:1.5;
}
.mfa-security__body{
  display:grid;
  gap:.9rem;
}
.mfa-factor-list{
  display:grid;
  gap:.6rem;
}
.mfa-factor-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.85rem .95rem;
  border:1px solid #dfeaf5;
  border-radius:10px;
  background:#fff;
}
.mfa-factor-item strong{
  display:block;
  color:#0d2742;
}
.mfa-factor-item p{
  margin:.15rem 0 0;
}
.mfa-factor-item__actions{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.mfa-enroll{
  border:1px solid #dce8f5;
  border-radius:10px;
  background:#fff;
  padding:1rem;
}
.mfa-enroll__intro{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}
.mfa-enroll__intro strong{
  color:#0d2742;
}
.mfa-enroll__intro p{
  margin:.2rem 0 0;
}
.mfa-enroll__details{
  display:grid;
  grid-template-columns:minmax(180px,220px) minmax(0,1fr);
  gap:1rem;
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid #e4edf7;
}
.mfa-qr-box{
  display:grid;
  place-items:center;
  min-height:210px;
  border:1px solid #dfeaf5;
  border-radius:10px;
  background:#fff;
}
.mfa-qr-box img{
  width:min(190px,100%);
  height:auto;
  display:block;
}
.mfa-enroll__form{
  display:grid;
  gap:.7rem;
}
.mfa-enroll__form label,
.mfa-modal label{
  display:grid;
  gap:.3rem;
  color:#16314c;
  font-weight:700;
}
.mfa-enroll__form input,
.mfa-modal input,
.mfa-modal select{
  width:100%;
  border:1px solid #d8e5f2;
  border-radius:9px;
  padding:.75rem .8rem;
  font:inherit;
  background:#fff;
  color:#102a43;
}
.mfa-enroll__form input[readonly]{
  background:#f7fafc;
  font-family:ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}
.mfa-enroll__actions,
.mfa-modal__actions{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-wrap:wrap;
}
.mfa-modal{
  position:fixed;
  inset:0;
  z-index:10050;
  display:none;
  align-items:center;
  justify-content:center;
  padding:1rem;
  background:rgba(10, 25, 41, .52);
}
.mfa-modal.is-visible{
  display:flex;
}
.mfa-modal__panel{
  position:relative;
  width:min(520px,100%);
  border-radius:14px;
  background:#fff;
  box-shadow:0 26px 80px rgba(5, 22, 38, .28);
  padding:1.35rem;
}
.mfa-modal__panel--confirm{
  width:min(560px,100%);
}
.mfa-modal__close{
  position:absolute;
  top:.75rem;
  right:.75rem;
  border:0;
  background:transparent;
  color:#53677c;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
}
.mfa-modal__close:hover{
  background:#edf4fb;
  color:#102a43;
}
.mfa-modal__icon{
  width:46px;
  height:46px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#e7f7f5;
  color:#0c766e;
  margin-bottom:.75rem;
}
.mfa-modal__icon--warning{
  background:#fff7ed;
  color:#c2410c;
}
.mfa-modal h2{
  margin:0 2.5rem .35rem 0;
  color:#0d2742;
  font-size:1.3rem;
}
.mfa-modal p{
  color:#40566e;
  line-height:1.5;
}
.mfa-modal form{
  display:grid;
  gap:.85rem;
  margin-top:1rem;
}
.mfa-modal__message{
  min-height:1.25rem;
  margin:0;
  font-weight:700;
}
.mfa-modal__warning{
  display:flex;
  align-items:flex-start;
  gap:.65rem;
  margin:1rem 0;
  padding:.85rem .95rem;
  border:1px solid #fed7aa;
  border-radius:10px;
  background:#fff7ed;
  color:#7c2d12;
}
.mfa-modal__warning .material-icons{
  color:#ea580c;
}
.mfa-modal__warning p{
  margin:0;
  color:inherit;
}
.mfa-modal__actions--end{
  justify-content:flex-end;
}
.mfa-modal .danger-btn{
  border:1px solid #b53a1b;
  border-radius:9px;
  background:#b53a1b;
  color:#fff;
  cursor:pointer;
  font:inherit;
  font-weight:700;
  padding:.75rem 1rem;
}
.mfa-modal .danger-btn:hover{
  background:#963016;
}
@media (max-width: 720px){
  .mfa-security__head,
  .mfa-factor-item,
  .mfa-enroll__intro{
    flex-direction:column;
    align-items:stretch;
  }
  .mfa-enroll__details{
    grid-template-columns:1fr;
  }
}

.export-actions select{
  width:100%;
  padding:.75rem .8rem;
  border:1px solid #d8e5f2;
  border-radius:10px;
  background:#fff;
}
.export-actions { display:flex; flex-direction:column; gap:.65rem; }
.anchor-btn { text-decoration:none; }

/* AVV-Preview kann viel Inhalt haben: */
.avv-preview { max-height: 60vh; overflow: auto; border: 1px solid #e8eef7; border-radius: 10px; padding: 1rem; background:#fff; }

.avv-panel-body{
  display:grid;
  grid-template-columns:minmax(280px,.92fr) minmax(360px,1.18fr);
  gap:1.1rem;
  align-items:start;
}
.avv-party-editor{
  min-width:0;
}
.avv-party-editor h3,
.avv-history h4{
  margin:.1rem 0 .65rem;
  color:#123c5d;
}
.avv-party-form{
  display:grid;
  gap:.48rem;
}
.avv-party-form label{
  font-weight:700;
  color:#25465f;
  font-size:.92rem;
}
.avv-party-form input,
.avv-party-form textarea{
  width:100%;
  border:1px solid #d8e5f2;
  border-radius:10px;
  padding:.66rem .75rem;
  font:inherit;
  color:#1e293b;
  background:#fff;
}
.avv-party-form textarea{
  resize:vertical;
  min-height:86px;
}
.avv-document-pane{
  min-width:0;
}
.avv-pdf-preview{
  max-height:none;
  min-height:640px;
  padding:0;
  overflow:hidden;
  background:#f8fbff;
}
.avv-pdf-preview object{
  display:block;
  width:100%;
  min-height:min(72vh,760px);
  border:0;
}
.avv-history{
  margin-top:1rem;
  border-top:1px solid #e7eef7;
  padding-top:.85rem;
}
.avv-history-list{
  list-style:none;
  display:grid;
  gap:.5rem;
  margin:0;
  padding:0;
}
.avv-history-list li{
  border-left:3px solid #9fc7e5;
  padding:.2rem 0 .2rem .65rem;
  color:#425466;
  font-size:.92rem;
}
.avv-history-list strong{
  color:#123c5d;
}
@media (max-width: 980px){
  .avv-panel-body{
    grid-template-columns:1fr;
  }
  .avv-pdf-preview{
    min-height:520px;
  }
}

/* Buttons-Row */
.button-row { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin:.6rem 0 .9rem 0; }
.button-row.form-actions{
  grid-column:1 / -1;
  align-self:end;
  margin-top:0;
  margin-bottom:0;
}


/* ==== Startseite: Full-Bleed Video sicherstellen (keine Leerflächen) ==== */
.page-home .hero-video-bg {
  min-height: clamp(760px, 96vh, 1400px);
  background: #000;
}
.page-home .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 1;
}

/* ==== Leistungen: Bild / kurzer Loop im 16:9-Frame, ruhiger ==== */
.page-leistungen .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.35;
  filter: saturate(115%);
}
.page-leistungen .hero-video.animate {
  animation: slow-zoom 12s ease-in-out infinite alternate;
}


/* ------------------------------------------------- */
/* -------------------- STARTSEITE ----------------- */
/* ------------------------------------------------- */

/* ===================== */
/*  Öffentlicher Header  */
/* ===================== */
.header-public {
  max-width: 1200px; margin: 0 auto; padding: .8rem 1rem;
  display: flex; align-items: center; gap: .75rem;
}
.burger-menu { margin-right: .35rem; }
.logo-wrap { display:flex; align-items:center; gap:.6rem; }
.logo-wrap img { height: 31.5px; width: auto; display:block; }
.main-nav ul { list-style:none; display:flex; gap:1rem; margin:0; padding:0; align-items:center; }
.main-nav a { text-decoration:none; color:#163a5c; font-weight:600; padding:.35rem .25rem; }
.main-nav a.active { border-bottom:2px solid currentColor; }
.header-cta { margin-left:auto; display:flex; align-items:center; gap:.6rem; }
.btn-primary {
  background:#0077b6; color:#fff; border:none; border-radius:10px; padding:.55rem .9rem;
  font-weight:700; box-shadow:0 2px 10px #0077b626; text-decoration:none; display:inline-block;
}
.account-icon { cursor:pointer; display:flex; align-items:center; justify-content:center; }
.account-icon .material-icons { font-size: 32px; color:#163a5c; line-height:1; }
@media (max-width: 920px) { .main-nav { display:none; } .header-cta { margin-left:auto; } }

/* ====================== */
/*  Hero – Startseite     */
/* ====================== */
.page-home .hero-video-bg {
  position: relative; min-height: clamp(760px, 96vh, 1400px);
  background:#000; overflow:hidden; border-radius:18px; box-shadow:0 16px 60px #0077b611;
}
.page-home .hero-video {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center center; transform:scale(1.02);
}
.page-home .hero-overlay.hero-overlay-column {
  position:relative; z-index:2; padding-bottom:8px !important; background:transparent !important;
}

/* ====================== */
/*  Hero – Leistungen     */
/* ====================== */
.page-leistungen .hero-video-bg {
  position: relative;
  width: 100%;
  margin: 0;
  min-height: clamp(460px, 70vh, 720px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #0b2c48;
}
.page-leistungen .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.35;
  filter: saturate(115%);
}
.page-leistungen .hero-video.animate { animation: slow-zoom 12s ease-in-out infinite alternate; }

@keyframes slow-zoom { from { transform: scale(1) } to { transform: scale(1.06) } }


/* =============================== */
/*  Leistungen – Layout Refresh    */
/* =============================== */
.page-leistungen main {
  max-width: none !important;
  width: 100%;
  margin: 0 !important;
  padding: 0;
}
.page-leistungen footer {
  max-width: 1100px !important;
  width: min(1160px, calc(100% - 3rem)) !important;
  margin: 0 auto 2.5rem !important;
}
.page-leistungen .hero-video-bg {
  position: relative;
  width: 100%;
  margin: 0;
  min-height: clamp(460px, 70vh, 720px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #0b2c48;
}
.page-leistungen .hero-overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: min(92vw, 1080px);
  padding: clamp(3rem, 6vw, 6rem) clamp(1.5rem, 6vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(11, 44, 72, 0.7) 0%, rgba(11, 44, 72, 0.52) 55%, rgba(11, 44, 72, 0.3) 100%);
}
.page-leistungen .hero-textblock {
  max-width: min(90vw, 720px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.8rem);
  text-align: center;
}
.page-leistungen .hero-headline {
  background: rgba(5, 24, 44, 0.6);
  box-shadow: 0 12px 35px rgba(5, 24, 44, 0.35);
}
.page-leistungen .hero-subline {
  background: rgba(5, 24, 44, 0.45);
  font-size: 1.14rem;
}
.page-leistungen .hero-benefits {
  list-style: none;
  padding: 0;
  margin: clamp(1rem, 3vw, 1.8rem) 0 clamp(1.8rem, 4vw, 2.6rem);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.6rem, 2vw, 1.2rem);
  justify-content: center;
}
.page-leistungen .hero-benefits li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 1.35rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #f5f9ff;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.page-leistungen .hero-benefits li::before {
  content: 'check';
  font-family: 'Material Icons';
  font-size: 1.2rem;
  line-height: 1;
}
.page-leistungen .hero-register-form {
  margin-top: clamp(0.4rem, 2vw, 1.2rem);
  margin-bottom: 0;
  justify-content: center;
}
.page-leistungen .hero-register-form input[type="email"] {
  min-width: clamp(240px, 45vw, 440px);
}
.page-leistungen .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.35;
  filter: saturate(115%);
}
.page-leistungen .section-gap-alt {
  width: 100%;
  margin: 0;
  background: #f1f5fa;
}
.page-leistungen .hero-leistungen {
  padding: clamp(2rem, 6vw, 4rem) 0;
  background: transparent;
}
.page-leistungen .hero-leistungen__shell {
  width: min(1120px, 96vw);
  margin: clamp(1rem, 3vw, 2rem) auto 0;
  background: radial-gradient(circle at 12% 8%, rgba(18, 217, 213, 0.22), transparent 45%), #03162a;
  border-radius: 32px;
  padding: clamp(2.8rem, 6vw, 4.4rem) clamp(2.2rem, 6vw, 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(1.4rem, 4vw, 2.8rem);
  box-shadow: 0 28px 70px rgba(2, 9, 21, 0.45);
  position: relative;
  overflow: hidden;
  min-height: clamp(420px, 70vh, 620px);
}
.page-leistungen .hero-leistungen--primary .hero-leistungen__shell {
  margin-top: clamp(1.2rem, 4vw, 2.4rem);
}
.page-leistungen .hero-leistungen__shell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(3, 11, 26, 0.32), rgba(5, 28, 48, 0.38));
  z-index: 1;
}
.page-leistungen .hero-leistungen__shell::after {
  content: "";
  position: absolute;
  inset: clamp(0.6rem, 1.4vw, 1rem);
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  pointer-events: none;
  z-index: 2;
}
.page-leistungen .hero-leistungen--footer {
  padding-bottom: clamp(2rem, 6vw, 3.6rem);
}
.page-leistungen .hero-leistungen--footer .hero-leistungen__shell {
  margin-top: clamp(1.5rem, 4vw, 2.6rem);
}
.page-leistungen .hero-leistungen__visual-card {
  margin: 0;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.page-leistungen .hero-leistungen__visual-card::before,
.page-leistungen .hero-leistungen__visual-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.page-leistungen .hero-leistungen__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  filter: saturate(115%) brightness(1.02);
  opacity: 0.82;
}
.page-leistungen .hero-leistungen__visual-card::before {
  background: radial-gradient(circle at 18% 22%, rgba(32, 255, 238, 0.18), transparent 55%);
  z-index: 0;
}
.page-leistungen .hero-leistungen__visual-card::after {
  background: linear-gradient(115deg, rgba(1, 5, 18, 0.25), rgba(3, 15, 32, 0.22));
  z-index: 1;
}
.page-leistungen .hero-leistungen__content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  color: #f5fbff;
  width: 100%;
  max-width: 720px;
}
.hero-leistungen__logo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 1.8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(7, 25, 54, 0.12);
  box-shadow: 0 15px 32px rgba(10, 24, 46, 0.25);
  gap: 0.75rem;
}
.hero-leistungen__logo-chip img {
  height: 46px;
  width: auto;
  display: block;
}
.page-leistungen .hero-leistungen__claim {
  font-size: clamp(1.65rem, 3.8vw, 2.4rem);
  font-weight: 700;
  color: #f7fbff;
  line-height: 1.2;
  margin: 0;
  max-width: 28ch;
}
.hero-leistungen__lead {
  margin: 0;
  max-width: 46ch;
  color: rgba(239, 248, 255, 0.82);
  font-size: 1.05rem;
  line-height: 1.6;
}
.hero-leistungen__modules {
  width: 100%;
  margin-top: 0.6rem;
}
.page-leistungen .hero-leistungen__content .register-form {
  width: 100%;
  max-width: 720px;
}
.page-leistungen .hero-leistungen__content .register-form + .hero-leistungen__modules {
  margin-top: 1.2rem;
}
@media (max-width: 1100px) {
  .page-leistungen .hero-leistungen__shell {
    padding: clamp(2.4rem, 8vw, 4rem) clamp(1.4rem, 6vw, 3.5rem);
  }
}
@media (max-width: 640px) {
  .page-leistungen .hero-leistungen {
    padding: clamp(1.5rem, 10vw, 2.5rem) 0;
  }
  .page-leistungen .hero-leistungen__shell {
    padding: clamp(1.8rem, 9vw, 2.6rem);
  }
  .page-leistungen .hero-leistungen__shell::after {
    inset: clamp(0.4rem, 2vw, 0.8rem);
  }
  .page-leistungen .hero-leistungen__claim {
    max-width: 100%;
  }
}
.page-leistungen .core-visual {
  margin: 0 auto;
  width: 100%;
  max-width: min(1120px, 92vw);
  padding: clamp(0.8rem, 3vw, 1.6rem);
  box-sizing: border-box;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.98), rgba(242, 250, 255, 0.98));
  border-radius: 32px;
  border: 1px solid rgba(145, 180, 210, 0.28);
  box-shadow: 0 25px 60px rgba(6, 22, 43, 0.12);
  position: relative;
  overflow: hidden;
}
.page-leistungen .core-visual__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(5, 20, 43, 0.12);
}
.page-leistungen .features {
  padding: clamp(3rem, 5vw, 5.2rem) 0;
  background: #ffffff;
}
.page-leistungen .features-core {
  background: linear-gradient(180deg, #f5f9fe 0%, #ffffff 100%);
  padding-bottom: clamp(3rem, 6vw, 6rem);
}
.page-leistungen .features-core .section-inner {
  padding-top: clamp(2.2rem, 5vw, 4rem);
}
.page-leistungen .features-benefits {
  background: #ffffff;
}
.page-leistungen .features-security {
  background: #f7fbff;
}
.page-leistungen .features-steps {
  background: #ffffff;
}
.page-leistungen .features-cta {
  background: #f0f6fc;
  padding-bottom: clamp(3rem, 6vw, 6rem);
}
.page-leistungen .section-inner {
  width: 100%;
  max-width: min(1120px, 92vw);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 3rem);
  box-sizing: border-box;
}
.page-leistungen .section-inner--narrow {
  max-width: 720px;
  text-align: center;
}
.page-leistungen .section-intro {
  text-align: center;
  margin-bottom: clamp(2.2rem, 4vw, 3.3rem);
}
.page-leistungen .section-intro .lead {
  margin-top: 1.05rem;
}
.page-leistungen .section-intro .lead + .lead {
  margin-top: 0.85rem;
}
.page-leistungen .feature-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.6rem, 3vw, 2.8rem);
  justify-content: center;
  justify-items: stretch;
  width: 100%;
  margin: 0 auto;
}
.page-leistungen .feature-card-grid--steps {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
@media (min-width: 960px) {
  .page-leistungen .feature-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-leistungen .feature-card-grid--steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.page-leistungen .feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  background: #ffffff;
  border-radius: 22px;
  padding: 2.25rem 1.9rem;
  box-shadow: 0 22px 45px rgba(14, 57, 96, 0.08);
  border: 1px solid rgba(14, 57, 96, 0.08);
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  align-items: center;
  width: 100%;
}
.page-leistungen .feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 62px rgba(14, 57, 96, 0.12);
}
.page-leistungen .feature-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: linear-gradient(135deg, #0b6fb2 0%, #22a6e3 100%);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 28px;
  box-shadow: 0 14px 28px rgba(34, 166, 227, 0.35);
}
.page-leistungen .feature-card h3 {
  margin: 0;
  font-size: 1.18rem;
  font-weight: 600;
  color: #0c3051;
  line-height: 1.35;
}
.page-leistungen .feature-card p {
  margin: 0;
  color: #324b65;
  font-size: 0.98rem;
  line-height: 1.58;
}
.page-leistungen .feature-card--step {
  padding: 2.6rem 1.9rem 2.2rem;
}
.page-leistungen .feature-card__badge {
  position: absolute;
  top: 1.9rem;
  left: 1.9rem;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.9rem;
  background: #0b6fb2;
  color: #ffffff;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 1.05rem;
  box-shadow: 0 14px 28px rgba(11, 111, 178, 0.32);
}
.page-leistungen .feature-card--step .feature-card__badge {
  position: static;
  top: auto;
  left: auto;
  width: 3.1rem;
  height: 3.1rem;
  margin: 0 auto 1.2rem;
  border-radius: 50%;
  letter-spacing: 0.02em;
  display: grid;
  place-items: center;
  box-shadow: 0 14px 32px rgba(11, 111, 178, 0.26);
}
.page-leistungen .feature-card--step .feature-card__icon {
  display: none;
}
.page-leistungen .features-security .note {
  text-align: center;
  max-width: 720px;
  margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
  color: #5a6d82;
}
.page-leistungen .features-cta .register-form {
  margin: clamp(1.5rem, 4vw, 2.6rem) auto 0;
  max-width: 520px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}
.page-leistungen .features-cta .register-form input[type="email"] {
  flex: 1 1 260px;
}
.page-leistungen .features-cta .register-features {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.4rem;
}
.page-leistungen .features-cta .register-features li::marker {
  color: #0b6fb2;
}
.page-leistungen .features-cta .lead {
  max-width: 520px;
  margin: 0.85rem auto 0;
}
.page-leistungen .feature-card-grid[role="list"] {
  list-style: none;
  padding: 0;
}
.page-leistungen .feature-card-grid[role="list"] > * {
  margin: 0;
}
.page-leistungen .feature-card-grid[role="list"] > *[role="listitem"] {
  list-style: none;
}
.page-leistungen .feature-card:focus-within {
  box-shadow: 0 0 0 3px rgba(11, 111, 178, 0.3);
  transform: translateY(-4px);
}
.page-leistungen .feature-card a {
  color: inherit;
  text-decoration: none;
}
.page-leistungen .feature-card a:hover {
  text-decoration: underline;
}
.page-leistungen .feature-card:hover .feature-card__icon {
  box-shadow: 0 16px 32px rgba(34, 166, 227, 0.42);
}
@media (max-width: 640px) {
  .page-leistungen .hero-overlay {
    padding: clamp(2.2rem, 9vw, 3.6rem) clamp(1rem, 8vw, 2.4rem);
  }
  .page-leistungen .feature-card {
    padding: 2.1rem 1.6rem;
  }
  .page-leistungen .feature-card__badge {
    top: 1.6rem;
    left: 1.6rem;
  }
}

/* ===================== */
/*  Öffentlicher Header  */
/* ===================== */
.header-public {
  max-width: 1200px; margin: 0 auto; padding: .8rem 1rem;
  display: flex; align-items: center; gap: .75rem;
}
.burger-menu { margin-right: .35rem; }
.logo-wrap { display:flex; align-items:center; gap:.6rem; }
.logo-wrap img { height: 31.5px; width: auto; display:block; }
.main-nav { margin-left: .4rem; }
.main-nav ul { list-style:none; display:flex; gap:1rem; margin:0; padding:0; align-items:center; }
.main-nav a { text-decoration:none; color:#163a5c; font-weight:600; padding:.35rem .25rem; }
.main-nav a.active { border-bottom:2px solid currentColor; }

/* CTA (Jetzt testen) + Auth-Button (Login/Account) rechtsbündig */
.header-cta { margin-left:auto; display:flex; align-items:center; gap:.6rem; }
.btn-primary {
  background:#0077b6; color:#fff; border:none; border-radius:10px; padding:.55rem .9rem;
  font-weight:700; box-shadow:0 2px 10px #0077b626; text-decoration:none; display:inline-block;
  line-height:1; height:44px; display:inline-flex; align-items:center;
}

/* Einheitlicher Header-Auth-Button mit Icon + Text (Login/Account) */
.header-auth-btn {
  background:#fff; color:#163a5c; border:1.5px solid #d0e2f5; border-radius:10px;
  padding:.5rem .9rem; font-weight:700; text-decoration:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:.5rem; height:44px; line-height:1;
  box-shadow:0 2px 10px rgba(0,0,0,0.04);
}
.header-auth-btn .material-icons { font-size: 22px; line-height:1; }

/* Mobile: Navigation einklappen, CTA + Auth-Button bleiben */
@media (max-width: 920px) {
  .main-nav { display:none; }
  .header-cta { margin-left:auto; }
}

/* ========== Hero-Scope (wie zuvor abgestimmt) ========== */
/* Startseite: Full-bleed Video */
.page-home .hero-video-bg {
  position: relative; min-height: clamp(760px, 96vh, 1400px);
  background:#000; overflow:hidden; border-radius:18px; box-shadow:0 16px 60px #0077b611;
}
.page-home .hero-video {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; transform:scale(1.02);
}
.page-home .hero-overlay.hero-overlay-column { position:relative; z-index:2; padding-bottom:8px !important; background:transparent !important; }

/* Leistungen: 16:9 Bild/Loop ruhig */
.page-leistungen .hero-video-bg {
  position: relative;
  width: 100%;
  margin: 0;
  min-height: clamp(460px, 70vh, 720px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #0b2c48;
}
.page-leistungen .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.35;
  filter: saturate(115%);
}
.page-leistungen .hero-video.animate { animation: slow-zoom 12s ease-in-out infinite alternate; }

@keyframes slow-zoom { from { transform: scale(1) } to { transform: scale(1.06) } }


/* Öffentlicher Header: Grid, CTA rechtsbündig */
.header-public{
  max-width:1200px; margin:0 auto; padding:.8rem 1rem;
  display:grid; grid-template-columns:auto 1fr auto; /* Logo | Nav | CTA */
  align-items:center; column-gap:1.2rem;
}

/* Logo mehr Abstand zum Menüpunkt "Start" */
.logo-wrap{ display:flex; align-items:center; gap:.6rem; margin-right:clamp(14px,3.2vw,48px); }
.logo-wrap img{ height:31.5px; width:auto; display:block; }

/* Navigation */
.main-nav ul{ list-style:none; display:flex; gap:1rem; margin:0; padding:0; align-items:center; }
.main-nav a{ text-decoration:none; color:#163a5c; font-weight:600; padding:.35rem .25rem; }
.main-nav a.active{ border-bottom:2px solid currentColor; }

/* CTA-Container: immer ganz rechts */
.header-cta{ justify-self:end; display:flex; align-items:center; gap:.6rem; }

/* Buttons */
.btn-primary{
  background:#0077b6; color:#fff; border:none; border-radius:10px; padding:.55rem .95rem;
  font-weight:700; text-decoration:none; display:inline-flex; align-items:center; height:44px;
  box-shadow:0 2px 10px #0077b626; line-height:1;
}

/* Einheitlicher Auth-Button (Login/Account) – identisch gestylt */
.header-auth-btn{
  background:#0077b6; color:#fff; border:none; border-radius:10px; padding:.55rem 1rem;
  font-weight:700; display:inline-flex; align-items:center; gap:.55rem; height:44px;
  box-shadow:0 2px 10px #0077b626; cursor:pointer; line-height:1;
}
.header-auth-btn .material-icons{ font-size:26px; line-height:1; }

/* Mobile */
@media (max-width:920px){
  .main-nav{ display:none; }
  .header-cta{ justify-self:end; }
}


/* ====== HEADER LAYOUT FIXES (GLOBAL) ====== */

/* Logo+Nav bewusst etwas weiter nach links rücken,
   damit rechts mehr Platz für Menüpunkte + Account/Login bleibt */
.header-center{
  left: 46%;           /* vorher 50% */
  transform: translateX(-50%);
  display:flex;
  align-items:center;
  gap: 1.2rem;         /* Luft zwischen Logo und Menü */
}

/* Navigationsliste sauber in einer Reihe halten und entzerren */
header nav ul{
  display:flex;
  align-items:center;
  gap: 1.25rem;        /* etwas mehr Abstand zwischen den Punkten */
  margin:0;
  padding:0;
  list-style:none;
  white-space: nowrap; /* verhindert Umbruch bei "Über uns" */
}
header nav a{
  margin:0;            /* Margin wird durch gap ersetzt */
}

/* Rechte Aktions-Zone: absolut an den rechten Rand */
.header-actions{
  position: absolute;
  right: 2.2em;        /* bündig am Rand (an dein Padding angepasst) */
  top: 50%;
  transform: translateY(-50%);
  display:flex;
  align-items:center;
  gap: 0.7rem;
  z-index: 20;
}

/* Button-Stil angleichen: Login soll wie Account aussehen */
.login-top-btn{
  background:#0077b6;      /* blau wie Account */
  color:#fff;
  border: 1.4px solid #0077b6;
  border-radius: 18px;
  font-weight: 700;
  padding: 0.52em 1.05em;
  font-size: 1.03em;
  display: flex;
  align-items: center;
  gap: 0.42em;
  box-shadow: 0 1.5px 7px #0077b614;
  cursor: pointer;
  transition: background 0.17s, box-shadow 0.18s;
}
.login-top-btn:hover{
  background:#009ee1;
  box-shadow: 0 2px 16px #0077b62a;
}
.login-top-btn .material-icons{
  font-size: 1.8em;        /* Icon größer wie beim Account */
  line-height: 1;
}

/* Responsiv: bei kleineren Viewports Menü ausblenden -> Burger übernimmt */
@media (max-width: 980px){
  header nav{ display:none; }
  .header-center{ left: 50%; } /* zentrieren, wenn das Menü weg ist */
}

/* Sicherheitsnetz gegen Zeilenumbruch nur für Header-Links */
header nav a{ white-space: nowrap; }


/* Header: Logo weiter nach links (mehr Abstand zu "Start") */
.logo-wrap{ margin-right: clamp(28px, 6.4vw, 96px); } /* vorher ~14/3.2/48 */

/* Header-Navigation entzerren, kein Umbruch bei "Über uns" */
header nav ul{
  display:flex; align-items:center;
  gap: 1.6rem;              /* mehr Abstand zwischen Menüpunkten */
  margin:0; padding:0; list-style:none; white-space: nowrap;
}
header nav a{ margin:0; white-space: nowrap; }

/* Rechte Aktions-Zone wirklich ganz außen rechts */
.header-actions{
  position:absolute; right:2.2em; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:.7rem; z-index:20;
}

/* Login/Account-Button (beide Zustände identisch blau) */
.login-top-btn{
  background:#0077b6; color:#fff; border:1.4px solid #0077b6; border-radius:18px;
  font-weight:700; padding:.52em 1.05em; font-size:1.03em;
  display:flex; align-items:center; gap:.42em; height:44px; line-height:1;
  box-shadow:0 1.5px 7px #0077b614; cursor:pointer; transition:background .17s, box-shadow .18s;
}
.login-top-btn:hover{ background:#009ee1; box-shadow:0 2px 16px #0077b62a; }
.login-top-btn .material-icons{ font-size:1.8em; line-height:1; }

/* (Mobile bleibt wie zuvor – falls du eine Regel hast, die nav ausblendet, so lassen) */


/* Header überlagert die Seite (klickbar über Video/Overlays) */
.site-header { position: relative; z-index: 1000; }

/* Header-Center linksbündiger (Logo weiter nach links); Element muss positioniert sein */
.header-center {
  position: absolute;
  left: 42%;                 /* vorher 46% → jetzt doppelt so weit nach links wie 50%→46% */
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1.2rem;               /* Luft zwischen Logo und Menü */
}

/* Logo noch mehr Abstand von "Start" */
.logo-wrap { margin-right: clamp(32px, 7.2vw, 120px); }

/* Navigation entzerren – kein Umbruch bei „Über uns“ */
header nav ul {
  display:flex; align-items:center;
  gap: 1.6rem;
  margin:0; padding:0; list-style:none; white-space: nowrap;
}
header nav a { margin:0; white-space: nowrap; }

/* Rechte Aktions-Zone wirklich ganz außen rechts */
.header-actions {
  position: absolute; right: 2.2em; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: .7rem; z-index: 1010; /* über .site-header */
}

/* Login/Account-Button – einheitlich blau, gut klickbar */
.login-top-btn {
  background:#0077b6; color:#fff; border:1.4px solid #0077b6; border-radius:18px;
  font-weight:700; padding:.52em 1.05em; font-size:1.03em;
  display:flex; align-items:center; gap:.42em; height:44px; line-height:1;
  box-shadow:0 1.5px 7px #0077b614; cursor:pointer; transition:background .17s, box-shadow .18s;
}
.login-top-btn:hover { background:#009ee1; box-shadow:0 2px 16px #0077b62a; }
.login-top-btn .material-icons { font-size:1.8em; line-height:1; }

/* Mobile: Menü weg, Header-Center wieder zentriert */
@media (max-width: 980px){
  header nav { display:none; }
  .header-center { left: 50%; }
}




/* BEGIN ChatGPT-Style UI – APPEND am Dateiende */

/* ========= Chat-Designsystem (nur Chat) ========= */
:root {
  --chat-bg: #0f172a;                  /* dunkles Slate/Navy, nicht pechschwarz */
  --chat-surface: #111e32;             /* Panel-Farbe */
  --chat-border: #1f2b44;              /* Rahmen/Divider */
  --chat-accent: #0077b6;              /* Markenakzent */
  --chat-accent-2: #36a2e8;            /* hellerer Akzent */
  --chat-text: #e8eef7;                /* Haupttext hell */
  --chat-text-dim: #b5c2d6;            /* sekundär */
  --chat-bubble-user: #0d3350;         /* User-Bubble */
  --chat-bubble-user-text: #d9efff;
  --chat-bubble-assistant: #0f2138;    /* Assistant-Bubble */
  --chat-bubble-assistant-text: #e6eef9;

  /* dynamisch per JS gesetzt: Höhe der Inputleiste */
  --chat-input-h: 132px;
}

/* ========= Chat-Container: Dark-Look, großzügige Fläche ========= */
.chat-container {
  background: linear-gradient(180deg, var(--chat-bg) 0%, #0c1424 100%);
  border-radius: 18px;
  color: var(--chat-text);
  box-shadow: 0 10px 36px rgba(0,0,0,.18);
  padding: 0;                    /* wir gestalten innen neu */
  overflow: hidden;
  min-height: 520px;             /* Grundhöhe */
}

/* Aktiv: deutlich größer */
.chat-container.is-active {
  min-height: 70vh;
}
@media (max-width: 600px) {
  .chat-container.is-active { min-height: 62vh; }
}

/* Topbar */
.chat-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1rem;
  background: color-mix(in srgb, var(--chat-surface) 86%, black 14%);
  border-bottom: 1px solid var(--chat-border);
}
.chat-topbar-title { display:flex; align-items:center; gap:.5rem; color: var(--chat-text); }
.chat-topbar-title .material-icons { font-size: 1.25rem; color: var(--chat-accent-2); }
.chat-topbar-actions { display:flex; gap:.25rem; }

/* Nachrichtenliste */
.chat-messages {
  background: transparent;
  padding: 1rem;
  overflow-y: auto;
  max-height: none; /* Fallback */
  scrollbar-gutter: stable;
}
.chat-container.is-active .chat-messages {
  /* Platz dynamisch: Gesamt (min-height) – Inputleiste – Topbar */
  max-height: calc(70vh - var(--chat-input-h) - 56px);
}
@media (max-width: 600px) {
  .chat-container.is-active .chat-messages {
    max-height: calc(62vh - var(--chat-input-h) - 56px);
  }
}

/* Messages & Bubbles – kompatibel mit .message.* und optional .bubble */
.message {
  position: relative;
  margin: .45rem 0;
  display: inline-flex;
  max-width: min(780px, 88%);
  padding: 0; background: transparent; box-shadow: none;
}
.message .bubble, .message { 
  border-radius: 14px;
  padding: .8rem 1rem;
  border: 1px solid color-mix(in srgb, var(--chat-border) 75%, transparent);
  backdrop-filter: blur(3px);
}
.message.user .bubble, .message.user {
  background: var(--chat-bubble-user);
  color: var(--chat-bubble-user-text);
  margin-left: auto;
}
.message.assistant .bubble, .message.assistant {
  background: var(--chat-bubble-assistant);
  color: var(--chat-bubble-assistant-text);
  margin-right: auto;
}
.message.assistant .copy-btn {
  position: absolute; top: 6px; right: 6px;
  background: transparent; border: 1px solid var(--chat-border);
  border-radius: 8px; width: 32px; height: 32px;
  display: grid; place-items: center; cursor: pointer;
  color: var(--chat-text-dim);
}
.message.assistant .copy-btn:hover { background: #0e2845; color: var(--chat-text); }

/* Markdown-Typografie in Antworten */
.message.assistant .bubble h1, .message.assistant .bubble h2, .message.assistant .bubble h3 {
  margin: .6em 0 .35em; color: #f4f8ff; line-height: 1.25;
}
.message.assistant .bubble p { margin: .4em 0; color: var(--chat-text); }
.message.assistant .bubble ul, .message.assistant .bubble ol { padding-left: 1.2em; margin: .4em 0 .6em; }
.message.assistant .bubble table { width: 100%; border-collapse: collapse; margin: .6em 0; font-size: .96em; }
.message.assistant .bubble th, .message.assistant .bubble td { border: 1px solid #1e3352; padding: .5em .6em; }
.message.assistant .bubble code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: .92em; background:#0b1a2c; padding:.12em .3em; border-radius:6px;}
.message.assistant .bubble pre { overflow-x: auto; background:#0b1a2c; border:1px solid #1e3352; border-radius:10px; padding:.75rem; }

/* Datei-Bubbles enger unter der Topbar */
.filebubble-row { margin: .6rem 1rem .1rem 1rem; }

/* ========= Eingabeleiste (sticky) ========= */
.chat-input-bar {
  position: sticky; bottom: 0; z-index: 3;
  display: grid; grid-template-columns: auto 1fr auto; gap: .5rem;
  align-items: flex-end;
  padding: .6rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--chat-surface) 88%, black 12%), color-mix(in srgb, var(--chat-surface) 96%, black 4%));
  border-top: 1px solid var(--chat-border);
  box-shadow: 0 -8px 24px rgba(0,0,0,.18);
}

/* Linke/rechte Aktionsbereiche */
.chat-actions-left, .chat-actions-right { display:flex; align-items:center; gap:.25rem; }

/* Upload-Button (links) – input selbst visuell versteckt */
.upload-btn { cursor: pointer; }
.visually-hidden, .sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.hidden { display:none !important; }

/* Textarea */
.chat-input-wrap { position: relative; display: flex; align-items: stretch; }
#chatInput {
  width: 100%; max-height: 30vh; min-height: 44px; resize: none;
  border-radius: 12px; border: 1px solid var(--chat-border);
  background: #0b1a2c; color: var(--chat-text);
  padding: .85rem .9rem; line-height: 1.45; font-size: 1rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 0 0 0 transparent;
  transition: box-shadow .15s, border-color .15s, background .15s;
}
#chatInput:focus { outline: none; border-color: var(--chat-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--chat-accent) 25%, transparent); background:#0a2138; }

/* Buttons */
.btn-icon {
  display: inline-flex; align-items:center; justify-content:center;
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--chat-border); background: transparent; color: var(--chat-text-dim);
  cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .05s;
}
.btn-icon:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--chat-accent) 28%, transparent); }
.btn-icon:hover { background: #0e2845; color: var(--chat-text); }
.btn-icon:active { transform: translateY(1px); }
.btn-ghost { background: transparent; }

.btn-primary {
  display: inline-flex; align-items: center; gap:.5rem;
  padding: .7rem 1rem;
  border-radius: 12px; border: 1px solid color-mix(in srgb, var(--chat-accent) 85%, var(--chat-border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--chat-accent) 80%, #ffffff 0%), var(--chat-accent));
  color: white; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 119, 182, .28);
  transition: filter .15s, transform .05s, box-shadow .15s;
}
.btn-primary:hover { filter: brightness(1.05); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: .55; cursor: default; box-shadow: none; }

/* Spinner im Senden-Button */
.btn-spinner {
  display:none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Eingabe-Zustände via data-state */
.chat-input-bar[data-state="sending"] #sendBtn .btn-label { display:none; }
.chat-input-bar[data-state="sending"] #sendBtn .btn-spinner { display:inline-block; }
.chat-input-bar[data-state="sending"] #sendBtn { filter: saturate(.9); }
.chat-input-bar[data-state="recording"] { box-shadow: 0 0 0 3px color-mix(in srgb, #ef4444 35%, transparent) inset; }
.chat-input-bar[data-state="recording"] #micBtn { border-color:#ef4444; color:#ffd3d3; background: #2a0e13; }
.chat-input-bar[data-state="recording"] #micBtn .material-icons { animation: pulse 1.2s infinite ease-in-out; }
@keyframes pulse {
  0% { transform: scale(1); opacity: .9; }
  50% { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: .9; }
}

/* Typing-Indicator (3 Punkte) */
.typing { opacity: .9; }
.typing .dots { display:inline-flex; gap:4px; }
.typing .dot { width:6px; height:6px; border-radius:50%; background:#bcd8ff; display:inline-block; animation: bounce 1.4s infinite; }
.typing .dot:nth-child(2){ animation-delay: .15s; }
.typing .dot:nth-child(3){ animation-delay: .3s; }
@keyframes bounce {
  0%,80%,100%{ transform: translateY(0); opacity: .65; }
  40%{ transform: translateY(-5px); opacity: 1; }
}

/* ========= Projektdetails einklappen ========= */
.projekt-info-box {
  transition: max-height .25s ease, padding .25s ease, opacity .25s ease;
  overflow: hidden;
}
.projekt-info-box .projekt-info-fields { transition: opacity .2s ease; }
.projekt-info-box.is-collapsed { 
  max-height: 70px; padding-bottom: .35rem; 
}
.projekt-info-box.is-collapsed .projekt-info-fields {
  opacity: 0; height: 0; overflow: hidden; pointer-events: none;
}

/* Fokus-Ringe allgemein (A11y) */
.chat-topbar button:focus,
.chat-actions-right button:focus,
.chat-actions-left .upload-btn:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--chat-accent) 30%, transparent); }

/* Scrollbars dezent */
.chat-messages::-webkit-scrollbar { height: 12px; width: 12px; }
.chat-messages::-webkit-scrollbar-thumb { background: #1c2d4e; border-radius: 8px; }
.chat-messages::-webkit-scrollbar-track { background: #0c1526; }

/* END ChatGPT-Style UI */



/* BEGIN ChatGPT-Style UI – APPEND am Dateiende */
/* ===== Farben & Layout ===== */
:root{
  --chat-bg:#0f172a;
  --chat-surface:#111e32;
  --chat-border:#1f2b44;
  --chat-accent:#0077b6;
  --chat-accent-2:#36a2e8;
  --chat-text:#e8eef7;
  --chat-text-dim:#b5c2d6;
  --chat-bubble-user:#0d3350;
  --chat-bubble-user-text:#d9efff;
  /* HELLERE Assistant-Bubble */
  --chat-bubble-assistant:#1b3e6a;          /* deutlich heller als Container */
  --chat-bubble-assistant-text:#f2f7ff;
  --chat-input-h: 132px;                    /* dynamisch via JS aktualisiert */
  --chat-viewport-h: 72vh;                  /* Fallback-Höhe */
}

/* ===== Container füllt fast den Screen ===== */
.chat-container{
  background: linear-gradient(180deg, var(--chat-bg) 0%, #0c1424 100%);
  color: var(--chat-text);
  border-radius:18px; box-shadow:0 10px 36px rgba(0,0,0,.18);
  overflow:hidden; padding:0;
  height: var(--chat-viewport-h);
  min-height: 560px;
  display:block;
}


/* ===== Topbar (Titel wie zuvor, mit Info-Icon) ===== */
.chat-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1rem;
  background: color-mix(in srgb, var(--chat-surface) 86%, black 14%);
  border-bottom:1px solid var(--chat-border);
}
.chat-topbar-title{ display:flex; align-items:center; gap:.5rem; color:var(--chat-text); }
.chat-topbar-title .material-icons{ font-size:1.25rem; color:var(--chat-accent-2); }
.chat-topbar-title .info{ font-size:1.1rem; opacity:.9; }

/* ===== Datei-Bubbles (pill, wie dein Entwurf) ===== */
.filebubble-row{
  display:flex; flex-wrap:wrap; gap:.65rem;
  padding: .9rem 1rem .4rem;
}
#fileBubbleRow > *{
  background:#102946; color:#e1efff;
  border:1px solid #2a3f63; border-radius:14px;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.65rem .75rem; box-shadow:0 3px 10px rgba(0,0,0,.2);
}
#fileBubbleRow .material-icons{ font-size:1.15rem; opacity:.9; }

/* ===== Messages ===== */
.chat-messages{
  flex:1 1 auto;
  padding: 1rem;
  overflow:auto;
  scrollbar-gutter:stable;
}
.message{ position:relative; margin:.5rem 0; display:inline-flex; max-width: min(780px, 96%); }
.message .bubble, .message{
  border-radius:14px; padding:.9rem 1rem;
  border:1px solid color-mix(in srgb, var(--chat-border) 70%, transparent);
  backdrop-filter: blur(2px);
}
.message.user .bubble, .message.user{ background:var(--chat-bubble-user); color:var(--chat-bubble-user-text); margin-left:auto; }
.message.assistant .bubble, .message.assistant{ background:var(--chat-bubble-assistant); color:var(--chat-bubble-assistant-text); margin-right:auto; }

/* Markdown-Verbesserungen */
.message.assistant .bubble h1,.message.assistant .bubble h2,.message.assistant .bubble h3{ margin:.6em 0 .35em; color:#f4f8ff; line-height:1.25; }
.message.assistant .bubble p{ margin:.4em 0; }
.message.assistant .bubble ul,.message.assistant .bubble ol{ padding-left:1.2em; margin:.4em 0 .6em; }
.message.assistant .bubble table{ width:100%; border-collapse:collapse; margin:.6em 0; font-size:.96em; }
.message.assistant .bubble th,.message.assistant .bubble td{ border:1px solid #1e3352; padding:.5em .6em; }
.message.assistant .bubble code{ font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size:.92em; background:#0b1a2c; padding:.12em .3em; border-radius:6px;}
.message.assistant .bubble pre{ overflow:auto; background:#0b1a2c; border:1px solid #1e3352; border-radius:10px; padding:.75rem; }

/* Copy-Button optional */
.message.assistant .copy-btn{
  position:absolute; top:6px; right:6px;
  background:transparent; border:1px solid var(--chat-border);
  border-radius:8px; width:32px; height:32px; display:grid; place-items:center;
  color:var(--chat-text-dim); cursor:pointer;
}
.message.assistant .copy-btn:hover{ background:#0e2845; color:var(--chat-text); }

/* ===== Eingabeleiste: EIN Feld mit Icons innen ===== */
.chat-input-bar{
  position:sticky; bottom:0; z-index:3;
  padding:.6rem 1rem .9rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--chat-surface) 90%, black 10%), color-mix(in srgb, var(--chat-surface) 96%, black 4%));
  border-top:1px solid var(--chat-border);
  box-shadow:0 -8px 24px rgba(0,0,0,.18);
}
.chat-input-wrap{ position:relative; display:flex; align-items:stretch; }
#chatInput{
  width:100%; min-height:56px; max-height:30vh; resize:none;
  border-radius:14px; border:1px solid var(--chat-border);
  background:#0b1a2c; color:var(--chat-text);
  padding: .9rem 116px .9rem 46px;  /* Platz für Icons */
  line-height:1.45; font-size:1rem;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
#chatInput:focus{ outline:none; border-color:var(--chat-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--chat-accent) 25%, transparent); background:#0a2138; }

/* Icons innen */
.upload-inside{
  position:absolute; left:8px; bottom:8px; width:34px; height:34px;
  border-radius:10px; border:1px solid var(--chat-border);
  background:transparent; color:var(--chat-text-dim);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}
.upload-inside:hover{ background:#0e2845; color:var(--chat-text); }

.input-actions-right{
  position:absolute; right:8px; bottom:8px; display:flex; gap:.35rem; align-items:center;
}
.btn-icon{
  width:38px; height:38px; border-radius:10px;
  border:1px solid var(--chat-border); background:transparent; color:var(--chat-text-dim);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition: background .15s, border-color .15s, color .15s, transform .05s;
}
.btn-icon:hover{ background:#0e2845; color:var(--chat-text); }
.btn-icon:focus{ outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--chat-accent) 28%, transparent); }

.btn-primary{
  display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1rem;
  border-radius:12px;
  border:1px solid color-mix(in srgb, var(--chat-accent) 85%, var(--chat-border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--chat-accent) 80%, #fff 0%), var(--chat-accent));
  color:#fff; font-weight:700; cursor:pointer; box-shadow:0 6px 16px rgba(0,119,182,.28);
}
.btn-primary:disabled{ opacity:.55; cursor:default; box-shadow:none; }
.btn-spinner{ display:none; width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; animation:spin .9s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.chat-input-bar[data-state="sending"] #sendBtn .btn-label{ display:none; }
.chat-input-bar[data-state="sending"] #sendBtn .btn-spinner{ display:inline-block; }

/* Typing indicator */
.typing .dots{ display:inline-flex; gap:4px; }
.typing .dot{ width:6px; height:6px; border-radius:50%; background:#bcd8ff; display:inline-block; animation:bounce 1.4s infinite; }
.typing .dot:nth-child(2){ animation-delay:.15s; } .typing .dot:nth-child(3){ animation-delay:.3s; }
@keyframes bounce{ 0%,80%,100%{ transform:translateY(0); opacity:.65; } 40%{ transform:translateY(-5px); opacity:1; } }

/* ===== Projektdetails: sichtbarer Titel, sauberes Collapsing ===== */
.projekt-info-box{ transition: padding .25s ease, opacity .25s ease; overflow:visible; }
.projekt-info-header{ position: sticky; top: 12px; z-index: 1; background: transparent; padding-bottom:.25rem; }

/* NICHT mehr die Box hart beschneiden – nur die Felder ausblenden */
.projekt-info-box.is-collapsed .projekt-info-fields{ opacity:0; height:0; overflow:hidden; pointer-events:none; }

/* Toggle-Button unter der Card (per JS eingefügt) */
#projectDetailsToggleBtn{
  display:inline-flex; align-items:center; gap:.35rem;
  margin:.3rem 0 1rem; padding:.45rem .7rem;
  border:1px solid #d0d7e2; border-radius:10px; background:#fff; color:#2b3a4e;
  cursor:pointer; font-weight:600;
}
#projectDetailsToggleBtn .material-icons{ font-size:1.15rem; }

/* Scrollbars dezent */
.chat-messages::-webkit-scrollbar{ height:12px; width:12px; }
.chat-messages::-webkit-scrollbar-thumb{ background:#1c2d4e; border-radius:8px; }
.chat-messages::-webkit-scrollbar-track{ background:#0c1526; }
/* END ChatGPT-Style UI */


/* ====== BEGIN Chat/Vollbild & Projektdetails – APPEND am Dateiende ====== */

/* 1) Projektdetails: bündig, kleiner, Toggle direkt unter der Card */
.project-main .projekt-info-box{
  margin: 0 1.5vw .6rem 1.5vw !important;  /* gleiche linke Kante wie Chat */
  padding: 1.2rem 1.5rem .9rem 1.5rem !important;
  max-width: none !important;
}
.project-main .projekt-info-header h2#projektTitel{ margin:0; }
.project-main .projekt-info-fields > div{
  font-size: .96rem !important; /* etwas kleiner */
  margin-bottom: .3rem !important;
}
.projekt-info-box.is-collapsed .projekt-info-fields{ opacity:0; height:0; overflow:hidden; pointer-events:none; }

/* dezenter, bündiger Toggle direkt UNTER der Karte */
.projekt-info-box + #projectDetailsToggleBtn{
  display:inline-flex; align-items:center; gap:.35rem;
  margin: .2rem 0 1rem 1.5vw; /* bündig mit Card/Chat */
  padding:.38rem .6rem; border:1px solid #d0d7e2; border-radius:10px;
  background:#fff; color:#2b3a4e; cursor:pointer; font-weight:600; font-size:.9rem;
}
.projekt-info-box + #projectDetailsToggleBtn .material-icons{ font-size:1.1rem; }

/* 2) Chat fast Vollbild (Breite & Höhe) */

/* Topbar/Verlauf/Eingabe gehen über volle Breite; äußere Rundung nur am Container */
.chat-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1rem; border-bottom:1px solid var(--chat-border);
  background: color-mix(in srgb, var(--chat-surface) 86%, black 14%);
}
.chat-messages{
  flex:1 1 auto !important;
  padding: 1rem !important;
  overflow:auto !important;
  max-height: none !important;     /* entfernt die 320px-Deckelung */
  scrollbar-gutter: stable;
}
.chat-input-bar{
  position: sticky; bottom: 0; z-index: 3;
  display: grid; grid-template-columns: auto 1fr auto; gap: .5rem;
  align-items: flex-end;
  padding: .6rem  .6rem .6rem  .6rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--chat-surface) 88%, black 12%), color-mix(in srgb, var(--chat-surface) 96%, black 4%));
  border-top: 1px solid var(--chat-border);
  box-shadow: 0 -8px 24px rgba(0,0,0,.18);
}

/* 3) Controls & Textarea – nichts überlappt */
.chat-actions-left .upload-btn{ width:40px; height:40px; border-radius:10px; border:1px solid var(--chat-border); color:var(--chat-text-dim); background:transparent; display:inline-grid; place-items:center; }
.chat-actions-right .btn-icon{ width:40px; height:40px; }
.chat-input-wrap{ min-height: 44px; display:flex; }
#chatInput{
  width:100%; min-height:64px; max-height:30vh;
  border-radius:12px; border:1px solid var(--chat-border);
  padding: .8rem .9rem; resize:vertical; background:#0e1b2e; color:var(--chat-text);
}

/* 4) Datei-Bubbles wie ursprünglich (Pill) */
.filebubble-row{ display:flex; flex-wrap:wrap; gap:.65rem; padding: .9rem 1rem .4rem; }
#fileBubbleRow > *{
  background:#102946; color:#e1efff; border:1px solid #2a3f63; border-radius:14px;
  display:inline-flex; align-items:center; gap:.6rem; padding:.55rem .7rem;
}

/* 5) Lesbarkeit: hellere Assistant-Bubbles */
:root{
  --chat-bubble-assistant:#214572;   /* deutlich heller */
  --chat-bubble-assistant-text:#f4fbff;
}
.message.assistant,
.message.assistant .bubble{
  background: var(--chat-bubble-assistant) !important;
  color: var(--chat-bubble-assistant-text) !important;
  border:1px solid color-mix(in srgb, var(--chat-border) 65%, transparent);
}

/* 6) Einheitliches Info-Icon (bestehender Stil wird genutzt) */
.info-icon{
  background:none !important; border:none !important; border-radius:0 !important;
  color:#2777b6 !important; font-size:1.25em !important; vertical-align:middle; cursor:pointer; margin-left:.5em;
}
.info-icon[data-tooltip]:hover::after,
.info-icon[data-tooltip]:focus::after{
  content: attr(data-tooltip); position:absolute; left:120%; top:50%; transform:translateY(-50%);
  min-width:240px; max-width:420px; background:#fff; color:#183a56; font-size:.98em;
  border:1px solid #c4d8ef; box-shadow:0 4px 24px #176fa62a; border-radius:10px; padding:.7em 1.1em; z-index:300;
}

/* ====== END Chat/Vollbild & Projektdetails ====== */


/* Projektseiten: Volle Breite/Höhe des Chat-Containers */
.project-main .chat-container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 1.5rem 2rem !important;
  /* Der Chat-Container erstreckt sich nun über die volle Höhe des Viewports */
  height: var(--chat-viewport-h);
  min-height: 560px;
  border-radius: 18px;
  overflow: hidden;
  padding: 0;
  background: linear-gradient(180deg, var(--chat-bg) 0%, #0c1424 100%);
  color: var(--chat-text);
  /* Flex-Innenleben ermöglicht dynamische Höhenverteilung */
  display: block;
}

/* Chat-Header (Topbar) über volle Breite mit abgesetztem Hintergrund */
.chat-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  background: color-mix(in srgb, var(--chat-surface) 86%, black 14%);
  border-bottom: 1px solid var(--chat-border);
  /* Obere Ecken des Containers via border-radius am Container gerundet */
}
.chat-topbar-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--chat-text);
}
.chat-topbar-title .material-icons {
  font-size: 1.25rem;
  color: var(--chat-accent-2);
}
.chat-topbar-title .info {
  font-size: 1.1rem;
  opacity: .9;
}
/* Datei-Bubbles jetzt heller für bessere Lesbarkeit */
.filebubble-row {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  padding: .9rem 1rem .4rem;
}
#fileBubbleRow > * {
  background: #36a2e8;            /* helleres Blau/Türkis */
  color: #0c1526;                 /* dunkle Schrift für Kontrast */
  border: none;                   /* kein dunkler Rand, wirkt wie Pill */
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem .75rem;
  box-shadow: 0 3px 10px rgba(0,0,0,.2);
}
#fileBubbleRow .material-icons {
  font-size: 1.15rem;
  opacity: .9;
}
/* Chat-Nachrichten Liste flex-grow:1 und scrollable */
.chat-messages {
  flex: 1 1 auto;
  padding: 1rem;
  overflow: auto;
  scrollbar-gutter: stable;
}
/* Chat-Bubbles Gestaltung */
.message .bubble, .message {
  border-radius: 14px;
  padding: .9rem 1rem;
  border: 1px solid color-mix(in srgb, var(--chat-border) 70%, transparent);
  backdrop-filter: blur(2px);
}
/* Benutzer-Nachrichten: dunkelblauer Hintergrund, helle Schrift */
.message.user .bubble, .message.user {
  background: var(--chat-bubble-user, #0d3350);
  color: var(--chat-bubble-user-text, #d9efff);
  margin-left: auto;
}
/* KI-Nachrichten: helles Türkis, dunkle Schrift für klaren Kontrast */
.message.assistant .bubble, .message.assistant {
  background: var(--chat-bubble-assistant, #58d3d8);
  color: var(--chat-bubble-assistant-text, #0c1526);
  margin-right: auto;
}
/* ... (Weitere Styles für Markdown-Inhalte in Bubbles bleiben unverändert) ... */

/* Eingabeleiste am unteren Rand (sticky) */
.chat-input-bar {
  position: sticky;
  bottom: 0;
  z-index: 3;
  padding: .6rem 1rem .9rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--chat-surface) 90%, black 10%), 
                              color-mix(in srgb, var(--chat-surface) 96%, black 4%));
  border-top: 1px solid var(--chat-border);
  box-shadow: 0 -8px 24px rgba(0,0,0,.18);
}
/* Eingabe-Wrapper für zentrierte Textarea mit Icons innen */
.chat-input-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}
#chatInput {
  width: 100%;
  min-height: 56px;
  max-height: 30vh;
  resize: none;
  border-radius: 14px;
  border: 1px solid var(--chat-border);
  background: #0b1a2c;
  color: var(--chat-text);
  padding: .9rem 116px .9rem 46px;  /* Platz für Icons: links Upload (46px), rechts Mic+Send (ca. 116px) */
  line-height: 1.45;
  font-size: 1rem;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
#chatInput:focus {
  outline: none;
  border-color: var(--chat-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chat-accent) 25%, transparent);
  background: #0a2138;
}
/* Upload-Icon und Aktions-Buttons innerhalb der Input-Leiste */
.upload-inside {
  position: absolute;
  left: 8px;
  bottom: 8px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--chat-border);
  background: transparent;
  color: var(--chat-text-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.upload-inside:hover {
  background: #0e2845;
  color: var(--chat-text);
}
.input-actions-right {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  gap: .35rem;
  align-items: center;
}
.btn-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--chat-border);
  background: transparent;
  color: var(--chat-text-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .05s;
}
.btn-icon:hover {
  background: #0e2845;
  color: var(--chat-text);
}
.btn-icon:focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chat-accent) 28%, transparent);
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--chat-accent) 85%, var(--chat-border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--chat-accent) 80%, #fff 0%), var(--chat-accent));
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,119,182,.28);
}
.btn-primary:disabled {
  opacity: .55;
  cursor: default;
  box-shadow: none;
}

/* Zentrierter Projekttitel und Toggle-Button für Details */
.projekt-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Titel zentrieren, ohne Bearbeiten-Button zu beeinträchtigen: */
}
.projekt-info-header h2 {
  flex: 1;
  text-align: center;
}
/* Bei eingeklapptem Zustand Felder ausblenden (smooth via Transition) */
.projekt-info-box {
  transition: padding .25s ease, opacity .25s ease;
  overflow: visible;
}
.projekt-info-box.is-collapsed .projekt-info-fields {
  opacity: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Toggle-Button "Details anzeigen/ausblenden" unter der Projektinfo-Box */
#projectDetailsToggleBtn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: .3rem 0 1rem;
  padding: .45rem .7rem;
  border: 1px solid #d0d7e2;
  border-radius: 10px;
  background: #fff;
  color: #2b3a4e;
  cursor: pointer;
  font-weight: 600;
}
#projectDetailsToggleBtn .material-icons {
  font-size: 1.15rem;
}

/* Dezente Scrollbar im Chatverlauf */
.chat-messages::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
.chat-messages::-webkit-scrollbar-thumb {
  background: #1c2d4e;
  border-radius: 8px;
}
.chat-messages::-webkit-scrollbar-track {
  background: #0c1526;
}



/* ====== PROJECT PAGE CHAT FIXES – overrides (append at file end) ====== */

/* Standard: Projektdetails eingeklappt (JS setzt/liest .is-collapsed) */
.projekt-info-box.is-collapsed .projekt-info-fields,
.projekt-info-box.is-collapsed form#projektInfoEdit { display:none !important; }

/* Chat-Container füllt den sichtbaren Bereich unterhalb seiner Oberkante */
.project-main .chat-container{
  height: var(--chat-viewport-h, 70vh) !important;
  min-height: var(--chat-viewport-h, 70vh) !important;
  display: flex;
  border-radius: 18px;
}


/* Alle Hauptbereiche voll breit + gleiche Rundungen wie der Container */
.project-main .chat-container .chat-topbar,
.project-main .chat-container #fileBubbleRow,
.project-main .chat-container .chat-messages,
.project-main .chat-container .chat-input-bar{
  width:100%;
  border-radius: 16px;
}

/* Nachrichtenbereich nimmt den gesamten Rest ein (kein 240px-Limit mehr) */
.project-main .chat-container .chat-messages{
  flex: 1 1 auto !important;
  min-height: 260px;
  max-height: none !important;
  overflow: auto;
}

/* KI-Antwort deutlich heller + gute Lesbarkeit */
.project-main .chat-container .message.assistant .bubble{
  background: #163A56;            /* helleres Blau */
  color: #EAF2FC;
  border: 1px solid rgba(255,255,255,.06);
}

/* Eingabeleiste wie ChatGPT: Textarea oben, Buttons in eigener Unterzeile */
.project-main .chat-container .chat-input-bar{
  position: sticky; bottom: 0;
  display: grid !important;
  grid-template-columns: 1fr auto auto;
  grid-template-areas:
    "ta ta ta"
    "upload . actions";
  gap: .5rem .6rem;
  padding: .75rem;
  background: #0c2138;             /* dunkler, nicht pechschwarz */
  border: 1px solid #0f2a48;
  box-shadow: 0 12px 36px rgba(3,17,34,.35);
}
.project-main .chat-container .chat-input-wrap{ grid-area: ta; }
.project-main .chat-container .chat-actions-left{ grid-area: upload; align-self:center; }
.project-main .chat-container .chat-actions-right{ grid-area: actions; align-self:center; justify-self:end; display:flex; gap:.4rem; }

/* Textarea – höherer Grundzustand, wächst nach oben bis 50% des Chatbereichs */
.project-main .chat-container textarea#chatInput{
  min-height: 110px;                         /* Buttons überdecken nichts */
  max-height: calc(var(--chat-viewport-h, 70vh) * .5);
  overflow:auto;
  resize:none;
  width:100%;
  border-radius: 12px;
  border: 1px solid #163a56;
  background:#0e2845;
  color:#e8f1ff;
  padding: .9rem 1rem;
}

/* Buttons */
.project-main .chat-container .btn-icon{ background:#0b2941; border-color:#123b62; }
.project-main .chat-container .btn-icon:hover{ background:#103653; }
.project-main .chat-container .btn-primary{ background:#0bb1a9; border-color:#0bb1a9; color:#072028; }
.project-main .chat-container .btn-primary:hover{ background:#11c0b8; }

/* Datei-Bubble etwas heller */
.project-main .chat-container .file-bubble{
  background: #0f3b57 !important;
  border-color: #165b86 !important;
  color:#d9f1ff;
}

/* Dezenter Toggle-Button unter der Karte */
#projectDetailsToggleBtn{
  display:inline-flex; align-items:center; gap:.35rem;
  margin:.25rem 0 1rem 0;
  padding:.45rem .7rem;
  border:1px solid #d4dde8; border-radius:10px; background:#fff; color:#2b3a4e;
  font-size:.92rem; font-weight:600; cursor:pointer;
}
#projectDetailsToggleBtn .material-icons{ font-size:1.15rem; }


/* css filename: css/style.css — APPEND am Dateiende */

/* --- Projektdetails standardmäßig eingeklappt --- */
.projekt-info-box.is-collapsed .projekt-info-fields,
.projekt-info-box.is-collapsed form#projektInfoEdit { display:none !important; }

/* --- Chatcontainer: stabil viewporthoch, innen volle Breite & gleiche Rundungen --- */
.project-main .chat-container{
  /* stabil: wird per JS einmalig (und bei Resize) gesetzt */
  height: var(--chat-viewport-h, 72vh) !important;
  min-height: var(--chat-viewport-h, 72vh) !important;
  display:flex; border-radius:18px; padding:14px;
}


/* Topbar dezent, keine schmalere Innenbox */
.project-main .chat-container .chat-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; background:transparent; border:0;
}
.project-main .chat-container .chat-topbar-title{ display:flex; align-items:center; gap:.4rem; }

/* Nachrichtenbereich nutzt gesamten Rest, smooth scroll */
.project-main .chat-container .chat-messages{
  flex:1 1 auto !important; min-height:260px; max-height:none !important;
  overflow:auto; padding:6px 8px; background:transparent; border:0;
}

/* KI-Antwort deutlich heller */
.project-main .chat-container .message.assistant .bubble{
  background:#1b4f77;           /* heller als Container */
  color:#f2f8ff;
  border:1px solid rgba(255,255,255,.10);
}

/* Datei-Bubble etwas heller / turkisiger */
.project-main .chat-container .file-bubble{
  background:#0e3f5f !important; border-color:#167ea1 !important; color:#e5f7ff;
}

/* --- Eingabeleiste im ChatGPT-Stil --- */
.project-main .chat-container .chat-input-bar{
  /* gleiche Breite/Rundung wie Container, keine extra Box-Optik */
  background:transparent; border:0; box-shadow:none;
  display:grid !important; gap:.55rem .6rem; padding:0;
  grid-template-columns: 1fr auto auto;
  grid-template-areas:
    "ta ta ta"
    "upload . actions";
}
.project-main .chat-container .chat-input-wrap{ grid-area: ta; }

/* Textarea: heller, hoher Grundzustand; wächst nach oben bis 50% des Chatbereichs */
.project-main .chat-container textarea#chatInput{
  min-height:120px;
  max-height: calc(var(--chat-viewport-h,72vh) * .5);
  overflow:auto; resize:none; width:100%;
  border-radius:12px; border:1px solid #165a86;
  background:#113a5a; color:#eaf4ff; padding:1rem 1.1rem;
}

/* Button-Zeile unten */
.project-main .chat-container .chat-actions-left{ grid-area: upload; align-self:center; }
.project-main .chat-container .chat-actions-right{ grid-area: actions; align-self:center; justify-self:end; display:flex; gap:.45rem; }

/* Buttons harmonisch */
.project-main .chat-container .btn-icon{
  background:#0b2f49; border:1px solid #134a72; color:#d7ecff;
}
.project-main .chat-container .btn-icon:hover{ background:#104260; }
.project-main .chat-container .btn-primary{
  background:#0cc1b8; border:1px solid #0cc1b8; color:#04242a; font-weight:700;
}
.project-main .chat-container .btn-primary:hover{ background:#14d0c7; }

/* Info-Icon (Standard-Komponente) sitzt neben der Überschrift */
#chatInfoBtn{ margin-left:.25rem; }

/* Kleiner kosmetischer Fix für die Außenrundung der Kinder */
.project-main .chat-container .chat-messages,
.project-main .chat-container .chat-input-bar { border-radius:16px; }



/* ===== PROJECT LAYOUT WIDE & HEADER ===== */
header .app-brand{
  display:inline-block; font-weight:800; letter-spacing:.2px; color:#0b2f49; text-decoration:none;
  font-size:1.35rem;
}
.dashboard-hero-bg, .dashboard-hero-logo-container { display:none !important; } /* altes Logo-Panel aus */
.project-hero{
  padding:12px 0 10px; margin-bottom:10px;
}
.project-hero .breadcrumb-nav-top{ margin:0 auto 6px; max-width:1280px; padding:0 14px; }
.project-hero .project-title{
  margin:2px auto 0; text-align:center; font-size:1.65rem; line-height:1.25; font-weight:800; color:#163a56;
}

/* Seite vollbreit – Chat füllt Bildschirmbreite, passt sich bei Sidebar an */
.project-main.project-wide{ max-width:none; width:100vw; margin-left:calc(env(safe-area-inset-left, 0px)); }
.sidebar-open .project-main.project-wide{ margin-left:280px; } /* Sidebar-Breite (an dein Layout anpassen) */

/* ===== CHAT FULL-WIDTH + STABLE VIEWPORT ===== */
.project-main .chat-container{
  width: calc(100vw - 24px);
  margin: 0 auto;
  height: var(--chat-viewport-h, 74vh) !important;
  min-height: var(--chat-viewport-h, 74vh) !important;
  display:flex; border-radius:18px; padding:14px;
}


/* Topbar – Info-Popover wie auf anderen Seiten */
.project-main .chat-container .chat-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 4px 2px; background:transparent; border:0; position:relative;
}
.project-main .chat-container .chat-topbar-title{ display:flex; align-items:center; gap:.45rem; }
.project-main .chat-container .chat-topbar .info-popover{
  position:absolute; top:100%; left:0; z-index:50; min-width:320px;
}

/* Clear rechts ganz außen spürbar */
.project-main .chat-container .chat-topbar .chat-topbar-actions{ margin-left:auto; }

/* Nachrichtenbereich – füllt restliche Höhe, smooth scroll */
.project-main .chat-container .chat-messages{
  flex:1 1 auto !important; min-height:260px; max-height:none !important;
  overflow:auto; padding:2px 2px; background:transparent; border:0;
}

/* Hellere KI-Bubble + helleres Eingabefeld für Lesbarkeit */
.project-main .chat-container .message.assistant .bubble{
  background:#1B4F77; color:#F2F8FF; border:1px solid rgba(255,255,255,.08);
}

/* Datei-Bubble leicht heller/türkis */
.project-main .chat-container .file-bubble{
  background:#0e3f5f !important; border-color:#167ea1 !important; color:#e5f7ff;
}

/* Eingabe: wie ChatGPT (Textarea oben, Buttonzeile unten), Buttons sauber innen */
.project-main .chat-container .chat-input-bar{
  background:transparent; border:0; box-shadow:none;
  display:grid !important; gap:.55rem .6rem; padding:0;
  grid-template-columns: 1fr auto auto;
  grid-template-areas:
    "ta ta ta"
    "upload . actions";
}
.project-main .chat-container .chat-input-wrap{ grid-area: ta; }

/* Textarea – deutlich heller, wächst nach oben bis 50% des Chatbereichs */
.project-main .chat-container textarea#chatInput{
  min-height:120px;
  max-height: calc(var(--chat-viewport-h,74vh) * .5);
  overflow:auto; resize:none; width:100%;
  border-radius:12px; border:1px solid #165a86;
  background:#113A5A; color:#EAF4FF; padding:1rem 1.1rem;
}

/* Buttonzeile: komplett innen, gleiche Abstände wie Upload links */
.project-main .chat-container .chat-actions-left{ grid-area: upload; align-self:center; padding-left:.25rem; }
.project-main .chat-container .chat-actions-right{ grid-area: actions; align-self:center; justify-self:end; display:flex; gap:.45rem; padding-right:.25rem; }
.project-main .chat-container .btn-icon{
  background:#0b2f49; border:1px solid #134a72; color:#d7ecff; border-radius:10px; padding:.52rem .62rem;
}
.project-main .chat-container .btn-icon:hover{ background:#104260; }
.project-main .chat-container .btn-primary{
  background:#0cc1b8; border:1px solid #0cc1b8; color:#04242a; font-weight:700; border-radius:10px; padding:.55rem .9rem;
}
.project-main .chat-container .btn-primary:hover{ background:#14d0c7; }

/* Details-Toggle unter der Karte – sichtbar, dezent */
.details-toggle{
  display:inline-flex; align-items:center; gap:.35rem;
  margin:.25rem 0 10px; padding:.45rem .7rem;
  border:1px solid #d4dde8; border-radius:10px; background:#fff; color:#2b3a4e;
  font-size:.92rem; font-weight:600; cursor:pointer;
}
.details-toggle .material-icons{ font-size:1.15rem; }

/* Projektdetails standardmäßig eingeklappt */
.projekt-info-box.is-collapsed .projekt-info-fields,
.projekt-info-box.is-collapsed form#projektInfoEdit{ display:none !important; }


/* =========================
   PROJECT PAGE – FULL-WIDTH CHAT + HEADER + DETAILS
   ========================= */
:root {
  --sidebar-w: 280px;
  --chat-viewport-h: 72vh;      /* JS updates this on load/resize */
  --chat-input-h: 120px;        /* JS updates live */
  --chat-topbar-h: 52px;        /* JS updates on load/resize */
  --chat-bg: #0b1e2b;
  --chat-surface: #10283a;
  --chat-surface-2: rgba(255,255,255,.04);
  --chat-border: rgba(255,255,255,.12);
  --assistant-bg: #eaf2f9;      /* much lighter for readability */
  --assistant-fg: #0a2538;
  --user-bg: #0e3a5a;
  --user-fg: #e7f6ff;
}

/* Header brand centered */
.header-center { position: absolute; left: 50%; transform: translateX(-50%); top: 0.8rem; }
.app-brand-logo { display:block; height: 34.5px; }

/* Flatter hero */
.project-hero { padding: .35rem 0 .6rem; }
.project-title { text-align:center; margin: .3rem 0 0; }

/* Project main uses full viewport width – leaves room for sidebar if open */
.project-main.project-wide { max-width: none; width: 100vw; padding-inline: clamp(8px,2vw,16px); }
body.sidebar-open .project-main.project-wide { padding-left: calc(var(--sidebar-w) + clamp(8px,2vw,16px)); }

/* DETAILS: when expanded, show edit button; keep fields aligned left with title */
.projekt-info-box .edit-project-btn { display: none; }
.projekt-info-box:not(.is-collapsed) .edit-project-btn { display: inline-flex; }

.details-toggle {
  display: inline-flex; align-items:center; gap:.4rem;
  margin: .35rem 0 1rem 0; padding: .25rem .55rem;
  font-size: .92rem; border-radius: 999px; border: 1px solid var(--chat-border);
  background: #fff; color:#0b2b45; box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.details-toggle .material-icons { font-size: 1.05em; }

/* CHAT CONTAINER = full width box */
.chat-container { width: 100%; max-width: none !important; background: var(--chat-bg); border-radius: 18px; box-shadow: 0 12px 40px rgba(0,0,0,.18); }

/* Topbar sticks inside the container */
.chat-topbar { display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  background: var(--chat-surface); border-radius: 14px; padding: .6rem .9rem; margin: .6rem .6rem 0;
  position: sticky; top: 0; z-index: 2;
}
.chat-topbar-title { display:flex; align-items:center; gap:.6rem; color:#eaf2ff; }
.chat-topbar-actions { margin-left:auto; }

/* File bubbles row is subtle, wide */
.filebubble-row { margin: .5rem .75rem 0; }

/* Messages area fills the remaining height */
.chat-messages {
  flex: 1 1 auto;
  overflow: auto;
  border-radius: 16px;
  margin: .6rem .6rem 0;
  padding: 1rem 1rem 1.2rem;
  background: var(--chat-surface-2);
  scrollbar-gutter: stable both-edges;
}

/* Messages full width for readability */
.message { width: 100%; max-width: 100%; border-radius: 14px; padding: .85rem 1rem; margin: .5rem 0; }
.message.assistant { background: var(--assistant-bg); color: var(--assistant-fg); }
.message.user { background: var(--user-bg); color: var(--user-fg); }

/* Markdown niceties inside assistant messages (if present) */
.message.assistant .msg-body pre, .message.assistant .msg-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  background: #f6f8fb; color: #0a2538; border: 1px solid #dfe7f2; border-radius: 8px; padding: .5rem .6rem; overflow:auto;
}
.message.assistant .msg-body table { width: 100%; border-collapse: collapse; background:#fff; }
.message.assistant .msg-body th, .message.assistant .msg-body td { border: 1px solid #dbe6f3; padding: .4rem .5rem; }

/* Input bar: textarea on top; button row at the bottom inside the same module */
.chat-input-bar {
  margin: .6rem .6rem .75rem;
  background: var(--chat-surface-2);
  border: 1px solid var(--chat-border);
  border-radius: 16px;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "upload ta   ta"
    ".      .    actions";
  gap: .35rem .5rem;
  padding: .6rem .65rem .6rem;
  position: sticky; bottom: .6rem; z-index: 2;
}
.chat-input-wrap { grid-area: ta; background: rgba(255,255,255,.05); border-radius: 12px; padding: .4rem .6rem; }
#chatInput {
  width: 100%; min-height: 78px; max-height: calc(var(--chat-viewport-h) * .5);
  resize: none; border: none; outline: none; background: transparent; color: #e9f3ff;
}
.chat-actions-left { grid-area: upload; align-self: start; display:flex; align-items:center; }
.chat-actions-right { grid-area: actions; display:flex; align-items:center; gap: .45rem; justify-self: end; }

.btn-icon { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; border:1px solid var(--chat-border); background:#0f2a3d; color:#eaf2ff; }
.btn-icon:hover { filter: brightness(1.06); }
.btn-primary { padding:.75rem 1.05rem; border-radius:12px; border:none; background:#1fb3c6; color:#042433; font-weight:700; }
.btn-primary[disabled] { opacity:.5; cursor:not-allowed; }


/* Use dashboard-style info icon */
.info-btn { border: 1px solid var(--chat-border); width: 24px; height: 24px; border-radius: 50%; background:#0f2a3d; color:#eaf2ff; font-weight:700; line-height:24px; font-size:.82rem; text-align:center; }
.info-popover { position:absolute; background:#fff; color:#0a2538; border:1px solid #e4ecf6; padding:.65rem .75rem; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.08); margin-top:.4rem; width:min(560px, 92vw); }

/* Make assistant/user blocks wider (edge-to-edge look in dark chat) */
.chat-messages .message { margin-left:.25rem; margin-right:.25rem; }



/* ===== PROJECT HEADER / HERO ===== */
.header-center{ position:absolute; left:50%; transform:translateX(-50%); top:0.65rem; }
.app-brand-logo{ display:block; height:34.5px; }

.project-hero{ padding:.35rem 0 .5rem; margin:0 0 .5rem; }
.project-hero .breadcrumb-nav-top{
  margin:0 auto .25rem; max-width:1280px; padding:0 14px; font-size:.95rem;
}
.project-hero .project-title{
  margin:.15rem auto 0; text-align:center; font-size:1.7rem; line-height:1.22; font-weight:800; color:#163a56;
}

/* ===== DETAILS CARD FIX ===== */
/* Sticky header in der Karte sorgt für „weißen Block“ → neutralisieren */
.projekt-info-header{ position:static !important; background:transparent !important; padding-bottom:.25rem; }
.projekt-info-box.is-collapsed .projekt-info-fields{ opacity:0; height:0; overflow:hidden; pointer-events:none; }
.details-toggle{
  display:inline-flex; align-items:center; gap:.35rem;
  margin:.25rem 0 10px; padding:.45rem .7rem;
  border:1px solid #d4dde8; border-radius:10px; background:#fff; color:#2b3a4e;
  font-size:.92rem; font-weight:600; cursor:pointer;
}
.details-toggle .material-icons{ font-size:1.1rem; }

/* ===== PROJECT PAGE LAYOUT – CHAT VOLLBREIT & STABIL ===== */
.project-main.project-wide{ max-width:none; width:100vw; padding-inline: clamp(8px,2vw,16px); }
body.sidebar-open .project-main.project-wide{ padding-left: calc(280px + clamp(8px,2vw,16px)); } /* Platz für Sidebar */

/* Chat-Container: echte Vollbreite/-höhe, ältere max-width Deckel entschärfen */
.project-main .chat-container{
  width: calc(100vw - 24px) !important;
  max-width: none !important;      /* bricht alte Max-Breiten */
  margin: 0 auto 1rem !important;
  height: var(--chat-viewport-h, 74vh) !important;  /* stabil wie ChatGPT */
  min-height: var(--chat-viewport-h, 74vh) !important;
  border-radius: 18px; overflow:hidden; padding: 10px;
  background: linear-gradient(180deg, var(--chat-bg, #0f172a) 0%, #0c1424 100%);
  color: var(--chat-text, #e8eef7);
}


/* Topbar & Messages füllen innen die volle Breite (keine schmalen Innenboxen) */
.project-main .chat-container .chat-topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:.6rem; background: color-mix(in srgb, var(--chat-surface,#10283a) 88%, black 12%);
  border-radius:14px; padding:.6rem .9rem; border:1px solid rgba(255,255,255,.08);
}
.project-main .chat-container .chat-messages{
  flex:1 1 auto !important; overflow:auto; border-radius:16px;
  margin:0; padding: 0.8rem 0.9rem 1rem; background: rgba(255,255,255,.04);
  scrollbar-gutter: stable both-edges;
}

/* Bubbles wirklich full-width und gut lesbar */
.project-main .chat-container .message{ width:100% !important; max-width:none !important; margin:.5rem 0; }
.project-main .chat-container .message.user{
  background:#0e3a5a; color:#e7f6ff; border-radius:14px; padding:.85rem 1rem;
}
.project-main .chat-container .message.assistant{
  background:#eaf2f9; color:#0a2538;  /* deutlich heller */
  border-radius:14px; padding:.9rem 1rem; border:1px solid #dbe6f3;
}

/* Eingabe: Textarea oben, Buttonzeile unten – Buttons NICHT außerhalb */
.project-main .chat-container .chat-input-bar{
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:.6rem .65rem; display:grid;
  grid-template-columns: 52px 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "upload ta   ta"
    ".      .    actions";
  gap:.35rem .5rem; position:sticky; bottom:.4rem; z-index:2;
}
.project-main .chat-container .chat-actions-left{ grid-area: upload; align-self:start; }
.project-main .chat-container .chat-input-wrap{ grid-area: ta; background: rgba(255,255,255,.05); border-radius:12px; padding:.4rem .6rem; }
.project-main .chat-container .chat-actions-right{ grid-area: actions; display:flex; align-items:center; gap:.45rem; justify-self:end; }

.project-main .chat-container #chatInput{
  width:100%; min-height:110px; max-height: calc(var(--chat-viewport-h,74vh)*.5);
  resize:none; border:none; outline:none; background:transparent; color:#eaf4ff;
}
.project-main .chat-container .btn-icon{
  width:42px; height:42px; border-radius:12px; border:1px solid rgba(255,255,255,.12);
  background:#0f2a3d; color:#eaf2ff;
}
.project-main .chat-container .btn-primary{
  padding:.72rem 1.05rem; border-radius:12px; border:none;
  background:#1fb3c6; color:#042433; font-weight:700;
}

/* Datei-Pills heller/türkiser (lesbar auf dunklem Chat-Hintergrund) */
.project-main .chat-container #fileBubbleRow > *{
  background:#36a2e8; color:#0c1526; border:none; border-radius:14px;
  padding:.6rem .75rem; box-shadow:0 3px 10px rgba(0,0,0,.2);
}

/* Info-Icon (Dashboard-Style) sitzt neben der Chat-Überschrift */
.project-main .chat-container .info-btn{ width:26px; height:26px; border-radius:50%; }

/* Sanfter Scrollbar-Look */
.project-main .chat-container .chat-messages::-webkit-scrollbar{ width:12px; height:12px; }
.project-main .chat-container .chat-messages::-webkit-scrollbar-thumb{ background:#1c2d4e; border-radius:8px; }
.project-main .chat-container .chat-messages::-webkit-scrollbar-track{ background:#0c1526; }


/* ===== PATCH (Header/Breadcrumb auf projekt.html) ======================
   - Breadcrumb im Header leicht weiter links und vertikal zentriert
   ==================================================================== */
header .breadcrumb-in-header{
  position: absolute;
  right: 10.5rem;                 /* etwas Abstand zum Account-Button */
  top: 50%;
  transform: translateY(-50%);
  display: flex; align-items: center; gap: .55em;
  white-space: nowrap;
}
@media (max-width: 900px){
  header .breadcrumb-in-header{ right: 8.5rem; }
}


/* projekt.html: Breadcrumb im Header immer mittig (Sicherheitsnetz) */
.project-page header .breadcrumb-in-header{
  top: 50% !important;
  transform: translateY(-50%) !important;
}


/* ===== Header – Projektseite: Breadcrumb weiter links & Buttons zentriert === */
.project-page header { position: relative; }

/* Breadcrumb: etwas weiter vom Account weg, vertikal mittig */
.project-page header .breadcrumb-in-header{
  position: absolute;
  right: 13rem;            /* etwas mehr Abstand als zuvor */
  top: 50%;
  transform: translateY(-50%);
  display: flex; align-items: center; gap: .45rem;
  white-space: nowrap;
}

/* Burger & Account-Button vertikal mittig ausrichten – ohne Position zu ändern */
.project-page header #burgerMenu{
  top: 50% !important; transform: translateY(-50%); /* überschreibt inline top */
}
.project-page header #loginTopBtn,
.project-page header #accountTopBtn,
.project-page header #dashboardTopBtn{
  position: static !important;
  top: auto !important;
  transform: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
}
.project-page header #loginTopBtn .material-icons,
.project-page header #accountTopBtn .material-icons,
.project-page header #dashboardTopBtn .material-icons{ line-height: 1; }
.project-page header #loginTopBtn span,
.project-page header #accountTopBtn span,
.project-page header #dashboardTopBtn span{ line-height: 1; display: inline-block; }


/* ====== projekt.html – CPV-Card kompakt + Modal Fix ====== */

/* kompakte Liste unterhalb der Details-Card */
.cpv-list-compact { background:#fff; border:1px dashed #d7e3f5; border-radius:10px; padding:.6rem .7rem; min-height:42px; }
.cpv-compact-ul { list-style:none; padding:0; margin:0; display:grid; gap:.25rem; }
.cpv-compact-item { font-size:.92em; color:#1b3957; line-height:1.25; overflow-wrap:anywhere; }
.cpv-empty-link { color:#0a66c2; text-decoration:none; font-weight:600; }
.cpv-empty-link:hover { text-decoration:underline; }

/* Modal Sichtbarkeit/Z-Index robust fixen */
.modal { position: fixed; inset: 0; display: none; align-items:center; justify-content:center; background: rgba(0,0,0,.35); z-index: 2000; }
.modal.show { display: flex; }
.modal .modal-content { background:#fff; border-radius:12px; width:min(960px, 92vw); max-height:90vh; overflow:auto; box-shadow:0 16px 60px rgba(0,0,0,.25); }
.modal .modal-header, .modal .modal-footer { padding:.8rem 1rem; border-bottom:1px solid #e6eef8; }
.modal .modal-footer { border-top:1px solid #e6eef8; border-bottom:none; }
.modal .modal-body { padding:1rem; }
.modal .modal-header { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }

/* Grid im CPV-Modal */
.cpv-modal-grid { display:grid; grid-template-columns: 1fr 1fr; gap:1rem; margin-top:.8rem; }
#cpvSearch { width:100%; padding:.6rem .7rem; border:1px solid #cfe0ff; border-radius:10px; }

/* Chips in den Projektdetails (bestehende Regel erweitert) */
#projektCPV .cpv-chip{
  display:inline-block; padding:4px 8px; border-radius:14px;
  background:#eef5ff; border:1px solid #cfe0ff; margin-right:6px; margin-top:4px;
  font-size:0.9em; color:#1656a3;
}


/* ============================
   Projektseite: Footer etwas kompakter
   (nur Padding, keine Layout-Brüche)
   ============================ */
body.project-page footer{
  padding-top: 0.6em;
  padding-bottom: 0.6em;
}

/* ============================
   Projektseite – Footer etwas kompakter (mehr Chat-Höhe)
   ============================ */
body.project-page footer{
  padding-top: .55em;
  padding-bottom: .55em;
}


/* --- Startseite: Eingabefeld gut lesbar --- */
.page-home #guestChatContainer input[type="text"] {
  color: #111 !important;
  caret-color: #111;
  background: #fff;           /* bleibt hell */
}
.page-home #guestChatContainer input::placeholder {
  color: #667085;             /* angenehm grauer Placeholder */
}


/* --- Startseite: Chat-Bubbles --- */
.hero-chatbox .message {
  background: rgba(255,255,255,0.86);  /* etwas transparenter als vorher */
  border: 1px solid #e6eef7;
  border-radius: 12px;
  padding: .7rem .9rem;
  margin: .55rem 0;
  color: #0d2d4a;                      /* guter Kontrast zum Video */
}
.hero-chatbox .message.user  { background: rgba(255,255,255,0.82); }
.hero-chatbox .msg-body      { line-height: 1.5; }


/* Startseite – transparentere Bubbles */
.hero-chatbox .message.user {
  background: rgba(212, 240, 254, 0.65) !important;  /* helles Blau, transparenter */
  color: #1b485e;
}

.hero-chatbox .message.assistant {
  background: rgba(0, 119, 182, 0.12) !important;    /* helles, leicht transparentes Blau */
  color: #123a52;                                     /* gute Lesbarkeit auf hellem Blau */
  backdrop-filter: saturate(1.05) blur(0.2px);        /* ganz dezente „Glasigkeit“ */
}



/* --- Collapser im Projektanlage-Modal auf dashboard.html --- */
.collapser-row { margin: .6rem 0 .2rem; }
.collapse-btn{
  display:inline-flex; align-items:center; gap:.45rem;
  background:#f2f7fd; border:1px solid #d6e4f3; color:#124a73;
  padding:.45rem .75rem; border-radius:10px; cursor:pointer; font-weight:600;
}
.collapse-btn:hover{ background:#e9f4fe; }
.collapse-btn .material-icons{ transition: transform .18s ease; }
.collapse-btn[aria-expanded="true"] .material-icons{ transform: rotate(180deg); }



/* ===== Unified Sidebar: Footer-Layout & kleine UI-Finessen ===== */
.sidebar-menu-left {
  display: flex;
  flex-direction: column;
}

.sidebar-grow {
  flex: 1 1 auto; /* schiebt den unteren Bereich ganz nach unten */
}

/* Unterer Bereich */
.sidebar-bottom {
  margin-top: auto;
  padding: 0.6rem 0 1rem 0;
  border-top: 1px solid #e7eef6;
}

/* Rechtliche Links: bündig wie die oberen Links, aber etwas dezenter */
.sidebar-legal {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0 1.5em; /* identisch zu .sidebar-links Padding */
  margin: 0.2rem 0 0.6rem 0;
}
.sidebar-legal a {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.55em 1em;        /* leicht kompakter als oben */
  border-radius: 10px;
  color: #355d86;             /* dezenter */
  text-decoration: none;
  font-weight: 600;
  font-size: 0.98em;
  transition: background 0.13s, color 0.12s;
}
.sidebar-legal a:hover {
  background: #f5f9fe;
  color: #0077b6;
}
.sidebar-legal .material-icons {
  font-size: 1.18em;
  opacity: 0.8;
}
/* “§” als Icon-Kästchen */
.legal-sym {
  display: inline-grid;
  place-items: center;
  width: 20px; height: 20px;
  border: 1px solid #dbe6f3;
  border-radius: 6px;
  font-weight: 800;
  font-size: 0.95em;
  color: #355d86;
}

/* Brand unten zentriert */
.sidebar-brand {
  text-align: center;
  padding: 0.4rem 0 0.2rem 0;
}
.sidebar-brand img {
  height: 27px;
  width: auto;
  opacity: 0.95;
}




/* Dashboard verbreitern & Cards statt Box */
#dashboard.dashboard-wide{
  max-width: 1440px;          /* nutzt schön die Seitenbreite */
  margin: 2rem auto;
  background: transparent;    /* Karte drumherum weg */
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

/* Grid */
.project-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(14px, 2vw, 22px);
}

/* Card */
.project-card{
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #DBE6F3;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(10,40,70,.06);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
  cursor: pointer;            /* ganze Card klickbar (Öffnen) */
}
.project-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(10,40,70,.10);
  border-color: #BBD3EA;
  background: #FCFEFF;
}
.project-card:focus-within{
  outline: 3px solid #9EC9FF66;
  outline-offset: 2px;
}

/* Linke Spalte (Titel + Meta) */
.project-card .title{
  margin: 2px 0 4px 0;
  font-weight: 800;
  font-size: 1.06rem;
  color: #0B2F55;
}
.project-card .meta{
  display: flex; flex-wrap: wrap; gap: 6px;
}
.meta .chip{
  display:inline-flex; align-items:center; gap:.35em;
  padding:.28em .55em; border-radius: 999px; font-weight:700; font-size:.82rem;
  border:1px solid #E2ECF7; background:#F6FAFF; color:#0B6FB2;
}
.meta .chip.status{
  color:#114B5F; background:#EAF8F1; border-color:#CDEFE0;
}
.meta .chip .material-icons{ font-size:1.05em; }

/* Rechte Spalte (Aktionen) */
.card-actions{
  display:flex; align-items:center; gap:.45rem;
}
.btn-icon, .btn-ghost, .btn-danger, .btn-open{
  height: 34px; padding: 0 .85rem;
  display:inline-flex; align-items:center; gap:.4rem;
  border-radius: 10px; border:1px solid #C8DBEE;
  background:#0F2A3A0F; color:#1d4767; font-weight:700; cursor:pointer;
}
.btn-open{
  background:#0B6FB2; border-color:#0B6FB2; color:#fff;
}
.btn-open:hover{ filter: brightness(1.05); }
.btn-ghost:hover{ background:#EAF3FF; }
.btn-danger{
  border-color:#F2C1C1; color:#9B1C1C; background:#FFF1F1;
}
.btn-danger:hover{ background:#FFE5E5; }
.btn-icon .material-icons,
.btn-ghost .material-icons,
.btn-open .material-icons { font-size: 1.1em; }

/* Subrow (Daten rechtsbündig) */
.card-right{
  display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between;
  gap:8px; min-width: 220px;
}
.card-dates{
  font-size:.86rem; color:#48627D;
}

/* Empty-State */
.project-empty{
  margin: 2.2rem 0;
  padding: 2.2rem;
  border: 1px dashed #CFE0F1;
  border-radius: 12px;
  color:#5f6b7a; text-align:center;
}

/* Neuer „Projekt anlegen“-Button (violett) */
.btn-create{
  --c1:#6D5BD0; --c2:#8F7AEA;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  color:#fff; font-weight:800;
  border:none; border-radius:12px;
  padding:.78em 1.4em; font-size:1.05em;
  box-shadow: 0 8px 24px #6D5BD033;
  transition: transform .1s ease, box-shadow .1s ease, filter .15s ease;
}
.btn-create:hover{ filter: saturate(1.05) brightness(1.03); }
.btn-create:active{ transform: translateY(1px); }

/* (Optional) Kleinere Bildschirme */
@media (max-width:680px){
  .card-right{ align-items:flex-start; min-width: 0; width: 100%; }
  .project-card{ grid-template-columns: 1fr; }
}

/* Dashboard: CTA & Filterleiste */
.project-create-btn{
  border: none;
  border-radius: 999px;
  background: linear-gradient(120deg, #00f0ff, #00aab8 70%, #0093a1);
  color: #032030;
  font-weight: 600;
  padding: 10px 18px;
  font-size: 1.03em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 14px 26px rgba(0,150,165,.35);
  transition: transform .15s ease, box-shadow .15s ease;
  line-height: 1.05;
  text-decoration: none;
  height: 44px;
}
.project-create-btn .material-icons{
  font-size: 20px;
  line-height: 1;
}
.project-create-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 32px rgba(0,150,165,.45);
}
.project-create-btn:focus-visible{
  outline:2px solid #00b7c4;
  outline-offset:2px;
}

.project-toolbar{
  margin: 14px 0 18px;
  display: grid;
  gap: 14px;
  background: linear-gradient(180deg, #fafdff 0%, #ffffff 48%);
  border: 1px solid #dbe6f3;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 28px rgba(10,40,70,.08);
  position: relative;
  overflow: hidden;
}
.project-toolbar::after{
  content:"";
  position:absolute;
  inset:-32px auto auto -24px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle at center, #d7e9ff66 0%, transparent 62%);
  pointer-events:none;
}
.project-toolbar__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 0;
}
.project-toolbar__title{
  display: flex;
  align-items: center;
  gap: 12px;
}
.project-toolbar__title .material-icons{
  background: linear-gradient(135deg, #0f7bdc, #53b3ff);
  color: #fff;
  border-radius: 12px;
  padding: 10px;
  font-size: 1.5rem;
  box-shadow: 0 8px 22px rgba(10,40,70,.16);
}
.project-toolbar__title-text{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.project-toolbar__eyebrow{
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .78rem;
  color: #316391;
  font-weight: 800;
}
.project-toolbar__subtitle{
  margin: 0;
  color: #0b2f55;
  font-weight: 700;
  font-size: 1.02rem;
}
.project-toolbar__badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #dbe6f3;
  background: #f1f7ff;
  color: #0f3d68;
  font-weight: 700;
  font-size: .9rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 18px rgba(10,40,70,.08);
}
.project-toolbar__badge .material-icons{
  font-size: 1.1em;
}
.project-search{
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #dbe6f3;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 24px rgba(10,40,70,.08);
}
.project-search .material-icons{
  color: #2b7ec4;
  font-size: 1.35rem;
}
.project-search input{
  width: 100%;
  border: none;
  outline: none;
  font-size: 1.02rem;
  background: transparent;
  color: #0b2f55;
  font-family: 'Inter','Segoe UI',Arial,sans-serif;
}
.project-search input::placeholder{
  color: #6282a3;
}
.project-toolbar-row{
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 14px 12px;
}
.project-filter{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.project-filter:nth-child(3){
  grid-column: 1;
}
.project-filter:nth-child(4){
  grid-column: 2;
}
.project-filter select,
.project-filter input{
  width: 100%;
  padding: 12px 12px;
  border: 1px solid #dbe6f3;
  border-radius: 12px;
  background: linear-gradient(135deg, #f9fbff 0%, #ffffff 100%);
  font-size: 0.97rem;
  font-weight: 600;
  color: #0b2f55;
  box-shadow: 0 10px 24px rgba(10,40,70,.06);
  transition: border-color .16s ease, box-shadow .16s ease, transform .12s ease;
  font-family: 'Inter','Segoe UI',Arial,sans-serif;
}
.project-filter select:hover,
.project-filter input:hover{
  border-color: #c2d6f1;
  transform: translateY(-1px);
}
.project-filter select:focus,
.project-filter input:focus{
  border-color: #5aa1e3;
  box-shadow: 0 12px 26px rgba(26,103,165,.18), 0 0 0 3px rgba(82,147,209,.15);
  outline: none;
}
.project-filter__label{
  font-size: 0.9rem;
  color: #274b6d;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.project-filter--range .project-range{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
}
.project-range input{
  padding: 12px 12px;
}

@media (max-width: 720px){
  .project-toolbar-row{
    grid-template-columns: 1fr;
  }
  .project-filter:nth-child(3),
  .project-filter:nth-child(4){
    grid-column: auto;
  }
}



/* ==== Dashboard: 1-Spalten-Layout, kompakte Cards ==== */
#dashboard.dashboard-wide { max-width: 1280px; margin: 2rem auto; }

.project-grid{
  display: grid;
  grid-template-columns: 1fr;        /* alles untereinander */
  gap: 12px;
  max-width: 1100px;                 /* angenehm lesbar; volle Breite wirkt schnell unruhig */
  margin-inline: auto;
}

/* Card kompakt */
.project-card{
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 10px 14px;                /* weniger Höhe */
  border-radius: 14px;
  min-height: 64px;                  /* kompakte Mindesthöhe */
}

/* Titel & Meta etwas dichter */
.project-card .title{ font-size: 1rem; margin: 0 0 4px 0; }
.project-card .meta{ gap: 4px; }
.meta .chip{ font-size: .78rem; padding: .2em .5em; }

/* rechte Spalte schmal halten */
.card-right{ min-width: 210px; gap: 6px; }
.card-dates{ font-size: .82rem; }

/* ==== Aktionen: Icon-only, Label klappt auf Hover auf ==== */
.card-actions{ display:flex; align-items:center; gap:.35rem; }

.btn-compact{
  position: relative;
  height: 36px;
  padding: 0 10px;                  /* nur Icon sichtbar */
  border-radius: 999px;
  display: inline-flex; align-items: center;
  border:1px solid #C8DBEE;
  background:#0F2A3A0F; color:#1d4767;
  font-weight: 700; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.btn-compact .material-icons{ font-size: 1.1em; }
.btn-compact .label{
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  margin-left: 0; transform: translateX(-4px);
  transition: max-width .22s ease, opacity .15s ease, transform .22s ease, margin-left .22s ease;
}

/* jedes Icon-Button klappt bei eigenem Hover auf */
.btn-compact:hover .label{
  max-width: 9em; opacity: 1; transform: translateX(0); margin-left: 6px;
}

/* Varianten */
.btn-open{ background:#0B6FB2; border-color:#0B6FB2; color:#fff; }
.btn-open:hover{ filter: brightness(1.05); }

.btn-danger{ border-color:#F2C1C1; color:#9B1C1C; background:#FFF1F1; }
.btn-danger:hover{ background:#FFE5E5; }

/* Hover-Hervorhebung Card bleibt subtil */
.project-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(10,40,70,.10);
  border-color: #BBD3EA;
  background: #FCFEFF;
}



/* ===== Dashboard: 2-Spalten-Layout (Projekte links, Sidebar rechts) ===== */

#dashboard.dashboard-wide{
  max-width: 1440px;
  margin: 2rem auto;
  padding: 0 24px; /* sorgt dafür, dass H2 und Cards links bündig starten */
}

#dashboard .dashboard-split{
  display: grid;
  grid-template-columns: minmax(580px, 72.5%) minmax(260px, 1fr); /* Projektspalte ~25% schmaler */
  gap: clamp(16px, 2.2vw, 28px);
  align-items: start;
}

/* Header bündig mit Cards; Button am rechten Rand der Projektspalte */
#dashboard .dashboard-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin: 0 0 1.1rem 0;
}
#dashboard .dashboard-header h2{
  margin:0;
  font-size:1.6rem;
  line-height:1.1;
  letter-spacing:.1px;
  color:#0b2f55;
}

/* Projektliste: 1 Spalte, kompaktere Cards */
#dashboard .project-grid{
  display:grid;
  grid-template-columns: 1fr;   /* alles untereinander */
  gap: 12px;
  max-width: none;              /* volle Breite der Projektspalte nutzen */
  margin: 0;
}

/* kompaktere Card-Höhe (überschreibt frühere Werte) */
#dashboard .project-card{
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 10px 14px;
  min-height: 64px;
}

/* rechte Card-Spalte etwas schmaler */
#dashboard .card-right{ min-width: 210px; gap: 6px; }
#dashboard .card-dates{ font-size: .82rem; }

/* ==== Rechte Sidebar (Platzhalter-Karten) ==== */
#dashboard .dashboard-aside{
  position: relative;
  padding-top: calc(1.1rem + .2rem); /* optisch auf Höhe der H2 starten */
}
#dashboard .aside-card{
  background:#fff;
  border:1px solid #DBE6F3;
  border-radius:14px;
  box-shadow:0 8px 24px rgba(10,40,70,.06);
  padding:14px 16px 16px;
  margin:0 0 14px 0;
}
#dashboard .aside-card h3{
  margin:0 0 .5rem 0;
  font-size:1.05rem;
  color:#0b2f55;
  display:flex; align-items:center; gap:.5rem;
}
#dashboard .aside-card p{
  margin:.1rem 0 0 0;
  color:#4b6784;
  font-size:.95rem;
  line-height:1.35;
}
#dashboard .badge-soon{
  display:inline-block;
  font-size:.78rem; font-weight:800; letter-spacing:.2px; text-transform:uppercase;
  padding:.18em .55em; border-radius:999px;
  color:#6b4ee6; background:#f1ecff; border:1px solid #e2d8ff;
}
#dashboard .aside-meta{
  margin-top:.55rem;
  display:flex; gap:.45rem; flex-wrap:wrap;
  color:#6a7f96; font-size:.88rem;
}

/* Responsive: Sidebar unter die Projekte schieben */
@media (max-width: 980px){
  #dashboard .dashboard-split{ grid-template-columns: 1fr; }
  #dashboard .dashboard-aside{ padding-top: 0; }
}



/* ===== Dashboard Layout Tuning (Projektspalte + rechte Sidebar weiter außen) ===== */

/* Falls du global ein anderes Seiten-Padding nutzt, passe die Variable an */
#dashboard.dashboard-wide{
  --page-pad: 24px;                   /* sollte dem Horizontal-Padding deines Headers entsprechen */
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

/* Links Projekte (~70%), rechts Sidebar (fix breiter, weiter außen) */
#dashboard .dashboard-split{
  display: grid;
  grid-template-columns: minmax(560px, 68%) minmax(340px, 380px);  /* Sidebar etwas größer */
  gap: clamp(16px, 2.2vw, 28px);
  align-items: start;
}

/* Projektliste bleibt 1-spaltig; Cards kompakt */
#dashboard .project-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* ===== Rechte Sidebar: Cards weiter rechts + größere Fläche ===== */
#dashboard .dashboard-aside{
  position: relative;
  padding-top: calc(1.1rem + .2rem);
  justify-self: end;                  /* Sidebar-Inhalt am rechten Spaltenrand ausrichten */
  width: 100%;
  max-width: 380px;                   /* korrespondiert zu grid-template-columns */
}

/* Basis-Card der Sidebar */
#dashboard .aside-card{
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid #DBE6F3;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(10,40,70,.07);
  padding: 18px 18px 18px;
  margin: 0 0 16px 0;
  min-height: 200px;                  /* etwas größer als vorher */
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
#dashboard .aside-card:hover{
  transform: translateY(-1px);
  border-color: #BBD3EA;
  box-shadow: 0 14px 36px rgba(10,40,70,.12);
}

#dashboard .aside-card h3{
  margin: 0 0 .5rem 0;
  font-size: 1.06rem;
  color: #0b2f55;
  display: flex; align-items: center; gap: .5rem;
  position: relative; z-index: 2;
}
#dashboard .aside-card p,
#dashboard .aside-meta{
  position: relative; z-index: 2;
}
#dashboard .aside-card p{
  margin: .1rem 0 0 0;
  color: #264760;
  font-size: .96rem; line-height: 1.4;
}

/* "Kommt bald" Badge */
#dashboard .badge-soon{
  display:inline-block;
  font-size:.78rem; font-weight:800; letter-spacing:.2px; text-transform:uppercase;
  padding:.18em .55em; border-radius:999px;
  color:#6b4ee6; background:#f1ecff; border:1px solid #e2d8ff;
}

/* ===== Hintergrundbild-Variante mit Transparenz → vivid auf Hover ===== */
#dashboard .aside-card.has-bg::before{
  content:"";
  position:absolute; inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity: .55;                       /* leicht transparent im Default */
  filter: saturate(.9) brightness(.95);
  transition: opacity .25s ease, filter .25s ease, transform .25s ease;
}
#dashboard .aside-card.has-bg::after{
  /* zarter Aufheller für bessere Lesbarkeit der Texte */
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.25));
  transition: background .25s ease;
}
#dashboard .aside-card.has-bg:hover::before{
  opacity: 1;                         /* voller Bildlook */
  filter: saturate(1.05) brightness(1.02);
  transform: scale(1.02);             /* tiny zoom für etwas Dynamik */
}
#dashboard .aside-card.has-bg:hover::after{
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
}

/* Bildzuweisung je Card */
#dashboard .aside-card.card-help::before{
  background-image: url("img/hilfebereich.png");
}
#dashboard .aside-card.card-community::before{
  background-image: url("img/praesenzmeeting.jpg");
}

/* Meta-Zeile unten in den Sidebar-Cards */
#dashboard .aside-meta{
  margin-top:.65rem;
  display:flex; gap:.5rem; flex-wrap:wrap;
  color:#254e71; font-size:.9rem;
}

/* Responsiv: Sidebar unter Projekte schieben */
@media (max-width: 980px){
  #dashboard .dashboard-split{ grid-template-columns: 1fr; }
  #dashboard .dashboard-aside{
    justify-self: stretch;
    max-width: none;
    padding-top: .5rem;
  }
}



/* ===== Dashboard – Overrides (ans Ende der style.css legen) ===== */

/* Gleicher Außenabstand wie der Account-Button im Header (right: 2rem) */
#dashboard.dashboard-wide{
  --page-pad: 2rem;
  max-width: 1440px;
  margin: 2rem auto;
  padding-inline: var(--page-pad) !important;
}

/* Links Projekte ~65%, rechts Sidebar fix breit – deutlich weiter außen */
#dashboard .dashboard-split{
  display: grid;
  grid-template-columns: minmax(560px, 65%) minmax(360px, 420px);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}

/* Projektliste: 1 Spalte, kompaktere Cards (schlanker, weniger Höhe) */
#dashboard .project-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
#dashboard .project-card{
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 10px 14px;
  min-height: 64px;
}

/* Rechte Sidebar: am rechten Rand ausrichten & etwas größer */
#dashboard .dashboard-aside{
  justify-self: end;
  width: 100%;
  max-width: 420px;          /* größer als vorher */
  padding-top: 1.2rem;
}

/* Platzhalter-Cards mit Bild & Hover-„Entnebelung“ */
#dashboard .aside-card{
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid #DBE6F3;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(10,40,70,.08);
  padding: 18px;
  margin: 0 0 18px 0;
  min-height: 230px;         /* etwas höher = „größer“ */
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
#dashboard .aside-card:hover{
  transform: translateY(-1px);
  border-color: #BBD3EA;
  box-shadow: 0 14px 36px rgba(10,40,70,.12);
}

/* Hintergrundbild (Default leicht transparent) */
#dashboard .aside-card.has-bg::before{
  content:"";
  position:absolute; inset:0;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  opacity:.55; filter:saturate(.92) brightness(.95);
  transition: opacity .25s ease, filter .25s ease, transform .25s ease;
}
#dashboard .aside-card.has-bg::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.25));
  transition: background .25s ease;
}
#dashboard .aside-card.has-bg:hover::before{
  opacity:1; filter:saturate(1.05) brightness(1.02); transform: scale(1.02);
}
#dashboard .aside-card.has-bg:hover::after{
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
}

/* Bilder zuweisen (deine Pfade) */
#dashboard .aside-card.card-help::before{
  background-image: url("img/hilfebereich.png");
}
#dashboard .aside-card.card-community::before{
  background-image: url("img/praesenzmeeting.jpg");
}

/* Texte in den Aside-Cards über dem Bild halten */
#dashboard .aside-card h3,
#dashboard .aside-card p,
#dashboard .aside-meta { position: relative; z-index: 2; }

/* „Kommt bald“ Badge */
#dashboard .badge-soon{
  display:inline-block;
  font-size:.78rem; font-weight:800; letter-spacing:.2px; text-transform:uppercase;
  padding:.18em .55em; border-radius:999px;
  color:#6b4ee6; background:#f1ecff; border:1px solid #e2d8ff;
}

/* Responsiv: Sidebar unter die Projekte schieben */
@media (max-width: 980px){
  #dashboard .dashboard-split{ grid-template-columns: 1fr; }
  #dashboard .dashboard-aside{
    justify-self: stretch;
    max-width: none;
    padding-top: .5rem;
  }
}



/* ===== Startseite: Chat-Lock & Video-Fix ===== */

/* 1) Video nicht "reinzoomen" (Skalierung/Animation aus) */
.page-home .hero-video { transform: none !important; }
.page-home .hero-video.animate { animation: none !important; }

/* 2) Chat nach erster Nachricht dauerhaft breit (80% der Seitenbreite) */
.hero-chatbox.is-engaged,
.hero-chatbox.is-engaged:hover,
.hero-chatbox.is-engaged:focus-within {
  max-width: 80vw !important;
  background: #fff; /* etwas klarer, wenn groß */
}

/* 3) Overlay darf breiter werden, damit die große Chatbox Platz hat */
.hero-overlay.is-engaged {
  max-width: 98vw !important;
  padding-left: clamp(8px, 2vw, 16px);
  padding-right: clamp(8px, 2vw, 16px);
}

/* 4) Vor der ersten Nachricht bleibt dein bestehendes "Focus-weitet-aus"-Verhalten bestehen */
.hero-chatbox:not(.is-engaged):focus-within {
  max-width: 90vw; /* wie gehabt */
}



/* Vorteile: Icons als kleine Bilder statt Emojis */
.vorteile-kacheln-container .vorteil-kachel .vorteil-icon-img {
  width: clamp(32px, 3.2rem, 56px);
  height: clamp(32px, 3.2rem, 56px);
  object-fit: contain;
  display: block;
  margin-bottom: 0.6em;
  flex: 0 0 auto;
}

/* Optional: Wenn die alten Emoji-Styles stören, deaktiviere sie in den Kacheln */
.vorteile-kacheln-container .vorteil-kachel .vorteil-icon { display: none !important; }




/* ===== Chat: saubere Typo & Aufzählungen ===== */

/* Assistenten-Text immer linksbündig (auch wenn Container zentriert ist) */
.message.assistant,
.message.assistant .msg-body {
  text-align: left !important;
  line-height: 1.55;
}

/* Absätze & Überschriften mit klaren Abständen */
.message.assistant .msg-body p { margin: 0.5em 0; }
.message.assistant .msg-body h1,
.message.assistant .msg-body h2,
.message.assistant .msg-body h3 {
  margin: 0.7em 0 0.35em;
  line-height: 1.2;
  font-weight: 700;
}

/* Aufzählungen hübsch einrücken und konsistent darstellen */
.message.assistant .msg-body ul,
.message.assistant .msg-body ol {
  margin: 0.4em 0 0.8em 1.25em;   /* links einrücken */
  padding: 0;                      /* kein zusätzliches Padding */
  list-style-position: outside;    /* Bullet außerhalb, sauber ausgerichtet */
}
.message.assistant .msg-body ul  { list-style-type: disc; }
.message.assistant .msg-body ol  { list-style-type: decimal; }
.message.assistant .msg-body li  { margin: 0.25em 0; }

/* Inline-Code & Codeblöcke wirken ruhiger */
.message.assistant .msg-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95em;
  background: #f6f8fa;
  padding: 0.12em 0.35em;
  border-radius: 4px;
}
.message.assistant .msg-body pre code {
  display: block;
  padding: 0.9em 1em;
  border-radius: 6px;
  overflow-x: auto;
}



/* ===== Vorteile-Kacheln größer + mehr Luft nach oben/unten ===== */

/* Falls deine Kacheln in so einem Container liegen: */
.vorteile-kacheln-container {
  /* mehr vertikale Höhe für den Bereich (Hintergrundbild hat so mehr Platz) */
  padding-block: clamp(20px, 4vw, 64px);
  /* optional: etwas mehr Lücke zwischen den Kacheln */
  gap: clamp(12px, 2.4vw, 28px);
}

/* Die einzelne Kachel etwas größer/polsteriger */
.vorteil-kachel {
  padding: clamp(16px, 2.4vw, 28px);
  border-radius: 14px;             /* wirkt großzügiger; anpassen, wenn gewünscht */
  min-height: clamp(150px, 22vh, 240px); /* gibt “Größe” ohne zu dominieren */
}

/* Überschrift & Text leicht hochskalieren, aber responsiv */
.vorteil-kachel h3 {
  font-size: clamp(1.05rem, 1.3vw, 1.35rem);
  line-height: 1.25;
  margin: 0.4em 0 0.35em;
}
.vorteil-kachel p {
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.5;
}

/* Die neuen kleinen Bild-Icons proportional größer (statt Emoji) */
.vorteil-kachel .vorteil-icon-img {
  width: clamp(44px, 4.2rem, 72px);
  height: clamp(44px, 4.2rem, 72px);
  object-fit: contain;
  display: block;
  margin-bottom: 0.6em;
  flex: 0 0 auto;
}



/* === Dashboard: rechte Sidebar ganz rechts + Bild-Cards (final overrides) === */

/* Außenabstand wie der Account-Button (right: 2rem) und volle Breite nutzen */
#dashboard.dashboard-wide{
  --edge: 2rem;
  width: 100%;
  max-width: none;
  margin: 2rem auto;
  padding-inline: var(--edge) !important;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

/* Links Projekte ~64%, rechts Sidebar fix; spürbarer Spalt dazwischen */
#dashboard .dashboard-split{
  display: grid;
  grid-template-columns: minmax(560px, 64%) minmax(360px, 440px);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}

/* Sidebar-Inhalt an den rechten Seitenrand schieben */
#dashboard .dashboard-aside{
  justify-self: end;
  width: 100%;
  max-width: 440px;
  padding-top: 1rem; /* steht optisch auf Höhe der H2 */
}

/* Cards in der Sidebar etwas größer/luftiger */
#dashboard .aside-card{
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid #DBE6F3;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(10,40,70,.08);
  padding: 18px;
  margin: 0 0 18px 0;
  min-height: 260px;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
#dashboard .aside-card:hover{
  transform: translateY(-1px);
  border-color: #BBD3EA;
  box-shadow: 0 14px 36px rgba(10,40,70,.12);
}

/* Texte über dem Bild rendern */
#dashboard .aside-card h3,
#dashboard .aside-card p,
#dashboard .aside-meta{ position: relative; z-index: 2; }

/* Hintergrundbild: default leicht transparent, auf Hover vivid */
#dashboard .aside-card.has-bg::before{
  content:"";
  position:absolute; inset:0;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  opacity:.55; filter:saturate(.92) brightness(.95);
  transition: opacity .25s ease, filter .25s ease, transform .25s ease;
}
#dashboard .aside-card.has-bg::after{
  /* zarter Weißverlauf für Lesbarkeit */
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.25));
  transition: background .25s ease;
}
#dashboard .aside-card.has-bg:hover::before{
  opacity: 1;
  filter: saturate(1.05) brightness(1.02);
  transform: scale(1.02);
}
#dashboard .aside-card.has-bg:hover::after{
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
}

/* WICHTIG: Bildpfade relativ zur CSS-Datei -> ../img/... */
#dashboard .aside-card.card-help::before{
  background-image: url("../img/hilfebereich.png");
}
#dashboard .aside-card.card-community::before{
  background-image: url("../img/praesenzmeeting.jpg");
}

/* Responsiv: Sidebar unter die Projekte schieben */
@media (max-width: 980px){
  #dashboard .dashboard-split{ grid-template-columns: 1fr; }
  #dashboard .dashboard-aside{ justify-self: stretch; max-width: none; padding-top: .5rem; }
}



/* === CHAT: typografische Korrekturen & Layoutbegrenzungen (Overrides) === */
.message .msg-body {
  text-align: left;                 /* kein zentriert mehr */
  line-height: 1.6;
}
.message .msg-body ul,
.message .msg-body ol {
  margin: .4em 0 .6em 0;
  padding-left: 1.3em;              /* Einzug für Bullets */
}
.message .msg-body li { margin: .15em 0; }

/* Chatbox als spaltenorientiertes Flex-Layout, damit die Message-List sauber begrenzt werden kann */
.hero-chatbox {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  /* Anfangs schmal */
  max-width: 430px;
}

/* Breiter Zustand NUR wenn per JS .is-engaged gesetzt wurde */
.hero-chatbox.is-engaged { 
  max-width: min(80vw, 1100px);
}

/* Fokus-Verhalten deaktivieren: nicht beim Klick größer/kleiner werden */
.hero-chatbox:focus-within {
  max-width: 430px !important;
  box-shadow: 0 6px 32px #0002 !important;
  background: rgba(255,255,255,0.94) !important;
}

/* Verlaufsfläche begrenzen: verhindert, dass die Chatbox das Video "aufbläst" */
.hero-chatbox .chat-messages {
  max-height: clamp(220px, 42vh, 520px);
  overflow-y: auto;
}

/* Optional: Gesamthöhe der Chatbox sanft deckeln */
.hero-chatbox {
  max-height: clamp(360px, 70vh, 820px);
  overflow: visible; /* die Eingabe bleibt sichtbar */
}

/* Kopfzeilen-Labels in den Bubbles (Beschaffungsassistent / Deine Nachricht) optisch ruhig */
.message .msg-header {
  margin-bottom: .32em;
}
.message.user .msg-header .assistant-name {
  color: #166ca8;
  font-weight: 600;
}

/* Sicherheitshalber: Video bleibt immer "cover", egal wie die Chatbox wächst */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center center !important;
}




/* === VORTEIL-KACHELN – spacing, width, icon size, background height (Overrides) === */

/* Außen links/rechts etwas dichter an den Rand, zwischen den Kacheln mehr Luft */
.vorteile-kacheln-container {
  padding: 0 1.6vw !important;                                /* außen etwas weniger */
  gap: clamp(28px, 4.8vw, 64px) !important;                   /* mehr Abstand zwischen den Kacheln */
  align-items: stretch !important;
}

/* Cards breiter und gleichmäßig hoch */
.vorteil-kachel {
  min-width: 320px !important;
  max-width: 440px !important;
  padding: 2.1em 1.6em 1.8em !important;
}

/* Icon-Bilder bewusst größer (passt sich responsiv an) */
.vorteil-icon-img {
  width: clamp(56px, 6.6vw, 88px) !important;
  height: auto !important;
  display: block;
  margin: 0 auto .6em auto;
}

/* Hintergrundbild höher */
.vorteile-bildsektion { min-height: 660px !important; }
.vorteile-bg-img      { height: 640px !important; }



/* ========= Dashboard – Sidebar-Abstand, Titel-Zentrierung, Hover-Text ========= */

/* 1) Mehr Abstand zwischen Projektliste (links) und Sidebar (rechts) */
#dashboard .dashboard-split{
  /* nur die Spalten-Lücke anheben, Rest unverändert lassen */
  column-gap: clamp(40px, 6vw, 96px) !important;
}

/* 2) Überschrift in den Sidebar-Cards oben zentrieren, kräftiger & blau */
#dashboard .aside-card h3{
  text-align: center;
  font-weight: 800;
  color: #0b2f55;           /* dein Standard-Überschriften-Blau */
  margin: 14px 48px .75rem; /* rechts etwas Luft, damit das Badge nicht überdeckt */
  position: relative;
  z-index: 2;
}

/* 3) „Kommt bald“-Badge rechtsbündig oben (card-weit, nicht im Textfluss) */
#dashboard .aside-card .badge-soon{
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 3;
  color: #0b2f55;           /* Blau statt Violett */
  background: #eaf3ff;
  border-color: #d3e6ff;
  font-weight: 900;
  letter-spacing: .24px;
}

/* 4) Beschreibungstext (erste <p>) nur auf Hover zeigen und mittig positionieren */
#dashboard .aside-card p:first-of-type{
  position: absolute;
  left: 18px;
  right: 18px;
  top: 52%;
  transform: translateY(-50%);
  margin: 0;
  opacity: 0;                /* versteckt im Normalzustand */
  transition: opacity .22s ease;
  color: #1f4663;
  z-index: 2;
}
#dashboard .aside-card:hover p:first-of-type{
  opacity: 1;                /* nur auf Hover sichtbar */
}

/* 5) Die Meta-Zeile (Icons + „Leitfäden/FAQ/Links“ bzw. „Schritt-für-Schritt/Video“) 
      bleibt linksbündig unten in der Card */
#dashboard .aside-meta{
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
  margin: 0;
  z-index: 2;
}

/* (Optional) bei sehr kleinen Screens wieder normal fließen lassen */
@media (max-width: 980px){
  #dashboard .aside-card p:first-of-type,
  #dashboard .aside-meta{
    position: static;
    transform: none;
    opacity: 1;             /* auf Touch-Geräten ohne Hover sichtbar lassen */
  }
}



/* === Vorteile – Abstände, Breite, Icon-Größe, Transparenz === */
.vorteile-kacheln-container{
  /* mehr Abstand zwischen den Kacheln, außen etwas schmaler */
  gap: clamp(28px, 5.2vw, 64px) !important;
  padding-inline: clamp(8px, 1.2vw, 14px) !important;
}
.vorteile-kacheln-container .vorteil-kachel{
  /* leicht transparente weiße Karten (ca. 15% Transparenz) */
  background: rgba(255,255,255,0.85) !important; /* 0.80 = 20% | 0.90 = 10% */
  backdrop-filter: saturate(120%) blur(4px);
  /* etwas breiter + mehr Innenabstand */
  padding: clamp(18px, 2.2vw, 26px) !important;
}
.vorteile-kacheln-container .vorteil-icon,
.vorteile-kacheln-container .vorteil-icon-img{
  width: clamp(60px, 6.4vw, 96px) !important;
  height: auto !important;
}

/* === Startseiten-Chat – breit auf Fokus, nach Senden dauerhaft; kein Hover-Zoom === */
.hero-chatbox{
  /* Start schmal – kontrolliert die Anfangsbreite der Box */
  max-width: 430px !important;
}
.hero-chatbox:hover:not(.is-engaged){
  /* Hover soll die Box NICHT aufziehen */
  max-width: 430px !important;
}
.hero-chatbox:focus-within,
.hero-chatbox.is-engaged{
  /* beim Fokussieren & nach dem ersten Senden breit */
  max-width: min(80vw, 1100px) !important;
}

/* Chat-Content: linksbündig & sauberes Listenlayout */
.message .msg-body{ text-align: left !important; }
.message .msg-body ul,
.message .msg-body ol{ margin: .4em 0 .6em; padding-left: 1.2em; }

/* Antworten scrollen im Chat-Fenster, nicht die Seite/Video */
.hero-chatbox .chat-messages,
#chatMessages{
  max-height: clamp(260px, 44vh, 560px) !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable both-edges;
}



/* Testen ob schön - Fokus-Farbeffekt Startseitenchat */
.hero-chatbox:focus-within{
  box-shadow: 0 8px 38px rgba(0,119,182,.35) !important;
  background: #fff !important;
}




/* ===== Dashboard – Hilfebereich & Tutorial: Layout, Farben, Hover-Lesbarkeit ===== */

/* Außenabstand wie der Account-Button (right: 2rem) */
#dashboard.dashboard-wide{
  --edge: 2rem;
  padding-inline: var(--edge) !important;
  max-width: none;                /* volle Breite nutzen */
}

/* Links Projekte ~62–64%, rechts Sidebar fix und weiter außen */
#dashboard .dashboard-split{
  display: grid;
  grid-template-columns: minmax(560px, 62%) minmax(380px, 460px);
  column-gap: clamp(36px, 6vw, 96px) !important;  /* deutlich mehr Abstand */
  align-items: start;
}

/* Sidebar ganz nach rechts, oberer Rand bündig mit dem Header der Projektspalte */
#dashboard .dashboard-aside{
  justify-self: end;
  width: 100%;
  max-width: 460px;
  padding-top: .2rem;   /* auf .0–.4rem feinjustieren, bis es exakt mit dem Button fluchtet */
}

#dashboard .aside-card{
  position: relative;
  overflow: hidden;
  border: 1px solid #DBE6F3;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(10,40,70,.08);
  padding: 18px;
  margin: 0 0 22px 0;         /* etwas mehr Abstand zwischen den beiden Cards */
  min-height: 260px;
}

/* Hintergrundbilder (dein Setup mit :before/:after bleibt bestehen) */
#dashboard .aside-card.has-bg::before{ opacity:.55; filter:saturate(.9) brightness(.96); }
#dashboard .aside-card.has-bg:hover::before{ opacity:1; filter:saturate(1.05) brightness(1.02); transform:scale(1.02); }
/* (die Bildzuweisungen card-help/card-community hast du bereits) :contentReference[oaicite:1]{index=1} */

/* Überschrift: zentriert & etwas helleres Blau */
#dashboard .aside-card h3{
  text-align: center;
  font-weight: 800;
  color: #176fa6;               /* helleres Blau */
  margin: 12px 56px .7rem;      /* rechts Luft, damit das Badge nicht kollidiert */
  position: relative;
  z-index: 2;
}

/* „KOMMT BALD“ fest oben rechts in der Ecke */
#dashboard .aside-card .badge-soon{
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 3;
  color: #176fa6;
  background: #eaf3ff;
  border-color: #d3e6ff;
  font-weight: 900;
  letter-spacing: .24px;
}

/* Beschreibungstext NICHT mehr mittig: unten positionieren – direkt über der Meta-Zeile */
#dashboard .aside-card p:first-of-type{
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 56px;                /* sitzt damit direkt über der Meta-Zeile */
  transform: none;
  margin: 0;
  opacity: 0;                  /* nur auf Hover zeigen */
  transition: opacity .22s ease;
  color: #1f4663;              /* gut lesbares Blau im „nebligen“ Default */
  z-index: 2;
}
#dashboard .aside-card:hover p:first-of-type{ opacity: 1; }

/* Meta-Zeile bleibt unten links */
#dashboard .aside-meta{
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
  margin: 0;
  z-index: 2;
}

/* Farbwechsel bei Hover (wenn das Bild stärker sichtbar ist): sehr hell + leichter Shadow */
#dashboard .aside-card:hover h3,
#dashboard .aside-card:hover p:first-of-type,
#dashboard .aside-card:hover .aside-meta{
  color: #f1f7ff;                            /* deutlich heller */
  text-shadow: 0 2px 16px rgba(0,0,0,.35);   /* hebt sich auf lebendigem Bild ab */
}

/* Mobile Fall: ohne Hover alles im Fluss & stets sichtbar */
@media (max-width: 980px){
  #dashboard .aside-card p:first-of-type,
  #dashboard .aside-meta{
    position: static;
    bottom: auto;
    opacity: 1;
    text-shadow: none;
  }
}




/* === CHAT: Layout stabilisieren, Eingabe unten, dezente Scrollbar === */

/* Chatbox als Spalte: Liste oben, Eingabe unten */
.hero-chatbox{
  display: flex;
  flex-direction: column;
  gap: .75rem;
  max-width: 430px;                 /* Start schmal */
}
.hero-chatbox.is-engaged,
.hero-chatbox:focus-within{
  max-width: min(80vw, 1100px) !important; /* breit beim Fokus bzw. nach Senden */
}

/* Reihenfolge sicherstellen: erst Messages, dann Eingabe-Zeile */
.hero-chatbox > .chat-messages{ order: 1; }
.hero-chatbox > .chat-input-row{ order: 2; }

/* Eingabe-Zeile sichtbar am unteren Rand halten */
.hero-chatbox .chat-input-row{
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .25rem;
}
#guestSendBtn{ position: static !important; } /* nicht "rausrutschen" */

/* Nachrichtenfenster: wächst moderat, dann scrollt INHALT (nicht das Video) */
.hero-chatbox .chat-messages,
#chatMessages{
  flex: 1 1 auto;
  min-height: 180px;
  max-height: clamp(260px, 44vh, 560px);
  overflow-y: auto !important;
  scrollbar-gutter: stable both-edges;
}

/* dezente (helle) Scrollbar */
.hero-chatbox .chat-messages::-webkit-scrollbar{ width: 10px; }
.hero-chatbox .chat-messages::-webkit-scrollbar-track{
  background: rgba(255,255,255,.8);
  border-radius: 8px;
}
.hero-chatbox .chat-messages::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.16);
  border-radius: 8px;
}
.hero-chatbox .chat-messages{
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.16) rgba(255,255,255,.8);
}

/* Typo & Abstände in den Bubbles */
.message .msg-body{ text-align: left !important; line-height: 1.6; }
.message .msg-header{ margin-bottom: .5em; }             /* Absatz nach Header */
.message.user .msg-header{ margin-bottom: .6em; }        /* extra Luft bei User */
.message .msg-body ul,
.message .msg-body ol{ margin: .4em 0 .6em; padding-left: 1.2em; }

/* === VORTEIL-KACHELN: mehr Abstand, größere Icons, leichte Transparenz === */
.vorteile-kacheln-container{
  gap: clamp(36px, 5.8vw, 72px) !important;              /* mehr Zwischenraum */
  padding-inline: clamp(8px, 1vw, 14px) !important;      /* außen dezent */
}
.vorteile-kacheln-container .vorteil-kachel{
  background: rgba(255,255,255,.85) !important;          /* leicht transparent */
  backdrop-filter: saturate(120%) blur(4px);
  padding: clamp(18px, 2.4vw, 28px) !important;
}
.vorteile-kacheln-container .vorteil-icon,
.vorteile-kacheln-container .vorteil-icon-img{
  width: clamp(68px, 7.2vw, 102px) !important;           /* Icons etwas größer */
  height: auto !important;
}



/* === DASHBOARD – Sidebar rechtsbündig + Card-Hover-Lesbarkeit + Badge-Position (FINAL OVERRIDES) === */

/* exakt gleicher Außenabstand wie der Account-Button im Header (right: 2rem) */
#dashboard.dashboard-wide{
  --edge: 2rem;
  padding-inline: var(--edge) !important;
}

/* Linke Projektspalte + rechte Sidebar; Sidebar fix breiter und am rechten Rand ausgerichtet */
#dashboard .dashboard-split{
  display: grid;
  grid-template-columns: minmax(560px, 1fr) minmax(360px, 440px) !important;
  align-items: start;
  column-gap: clamp(20px, 3vw, 36px) !important;
}
#dashboard .dashboard-aside{
  justify-self: end !important;   /* bündig am rechten Gridrand */
  width: 100%;
  max-width: 440px !important;
  padding-top: 1rem;
}

/* Überschrift: linksbündig + etwas fetter (überschreibt evtl. frühere Center-Styles) */
#dashboard .dashboard-aside .aside-card h3{
  text-align: left !important;
  font-weight: 800 !important;
  color: #0b2f55 !important;
  margin: .4rem 48px .6rem 0 !important; /* rechts Luft fürs Badge */
  position: relative;
  z-index: 2;
}

/* „Kommt bald“-Badge: oben rechts in die Karten-Ecke (gleich Zeile wie H3) */
#dashboard .dashboard-aside .aside-card{ position: relative; }
#dashboard .dashboard-aside .aside-card h3 .badge-soon{
  position: absolute !important;
  top: 8px; right: 12px;
  z-index: 3;
}

/* Hover-Farben: Text bleibt gut lesbar (hellblau + fett), NICHT weiß */
#dashboard .dashboard-aside .aside-card:hover h3{
  color: #0b2f55 !important; /* Überschrift bleibt dunkelblau und gut lesbar */
}
#dashboard .dashboard-aside .aside-card:hover p,
#dashboard .dashboard-aside .aside-card:hover .aside-meta{
  color: #178fd6 !important;     /* hellblau */
  font-weight: 700 !important;   /* etwas fetter */
}
#dashboard .dashboard-aside .aside-card:hover .aside-meta .material-icons{
  color: #178fd6 !important;
  opacity: .95;
}




/* === PW-Auge in Login/Registrierung: exakt wie Account === */
.auth-form-modern .form-group .pw-wrap {
  position: relative;
  display: block;
}

.auth-form-modern .form-group .pw-wrap > input {
  width: 100%;
  box-sizing: border-box;
  padding-right: 2.75rem;     /* Platz fürs Icon */
  margin: 0 !important;       /* verhindert Versatz durch globale Margins */
}

/* Robust: vertikal immer mittig, egal wie hoch das Input ist */
.auth-form-modern .form-group .pw-toggle {
  position: absolute;
  inset-inline-end: .625rem;  /* right: 10px */
  inset-block: 0;             /* top: 0; bottom: 0 -> volle Feldhöhe */
  transform: none;            /* kein translate nötig */
  width: 2rem;                /* Klickfläche */
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0; margin: 0;
  background: transparent !important;
  border: 0; border-radius: 0;
  box-shadow: none;
  color: #9aa4b2;             /* grau, wie auf Account */
  cursor: pointer;
}

.auth-form-modern .form-group .pw-toggle:hover,
.auth-form-modern .form-group .pw-toggle:focus,
.auth-form-modern .form-group .pw-toggle:focus-visible {
  background: transparent !important; /* keine Box */
  color: #6b7280;                     /* etwas dunkler bei Hover/Focus */
  outline: none;
}

.auth-form-modern .form-group .pw-toggle .material-icons {
  font-size: 20px;
  line-height: 1;
  display: block;
  pointer-events: none;       /* Klick landet sicher auf dem Button */
}



.toast-overlay{
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  background:rgba(16,32,44,.28); z-index:10000;
}
.toast-card{
  background:#fff; color:#1f2a44; font-weight:600;
  padding:1.1em 1.6em; border-radius:18px;
  box-shadow:0 12px 60px #002a5038; display:flex; gap:.7rem; align-items:center;
}
.toast-card .material-icons{ font-size:28px; color:#2e7d32; }




/* === PW-Auge im Account: sauber rechts im Feld, ohne Box === */
#pwForm .pw-wrap { position: relative; display: block; }

#pwForm .pw-wrap > input {
  width: 100%;
  box-sizing: border-box;
  padding-right: 2.75rem;   /* Platz fürs Icon */
  margin: 0 !important;     /* verhindert vertikalen Versatz durch globale Margins */
}

#pwForm .pw-toggle {
  position: absolute;
  inset-inline-end: .625rem;          /* right: 10px */
  inset-block-start: 50%;             /* top: 50% */
  transform: translateY(-50%);        /* perfekt vertikal zentriert */
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  padding: 0; margin: 0;
  background: transparent !important; /* keine farbige Box */
  border: 0; border-radius: 0;
  outline: none; box-shadow: none;
  color: #9aa4b2;                     /* leicht grau */
  cursor: pointer;
}

#pwForm .pw-toggle:hover,
#pwForm .pw-toggle:focus,
#pwForm .pw-toggle:focus-visible {
  background: transparent !important; /* weiterhin ohne Hintergrund */
  color: #6b7280;                     /* etwas dunkler bei Hover */
  outline: none;
}

#pwForm .pw-toggle .material-icons {
  font-size: 20px;
  line-height: 1;
  display: block;                     /* verhindert baseline-shift */
}



/* === Dashboard Aside: rechtsbündig + bessere Lesbarkeit auf Bildkarten === */

/* 0) Seiteninnenabstand so wählen, dass er mit dem Account-Button (right:2rem) fluchtet */
#dashboard.dashboard-wide{
  --page-pad: 2rem; /* bündig zum Account-Button */
  padding-inline: var(--page-pad);
}

/* 1) Rechte Spalte wirklich am rechten Rand „einrasten“ lassen */
#dashboard .dashboard-aside{
  justify-self: end;          /* an rechten Spaltenrand */
  max-width: 420px;           /* etwas großzügiger als zuvor */
}

/* 2) Karten-Basis (Positionierung fürs Badge) */
#dashboard .aside-card{
  position: relative;
  overflow: hidden;
}

/* 3) Headline deutlich größer + dunkelblau + helle Einfassung (Pill/Halo) */
#dashboard .aside-card h3{
  /* Größer: ca. „zwei Stufen“ */
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 900;
  color: #0b2f55 !important;

  /* Pill-Optik für Lesbarkeit auf Bild */
  display: inline-block;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.92);
  border-radius: 10px;
  padding: .12em .58em;

  /* Platz rechts fürs Badge */
  margin: 8px 70px .65rem 12px;

  /* Text-Outline/Stroke (Fallback via Shadow) */
  -webkit-text-stroke: .6px #fff;
  paint-order: stroke fill;
  text-shadow:
    0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff;
  text-align: left !important; /* evtl. alte Zentrierung überschreiben */
}

/* 4) Fließtext & Meta: ebenfalls dunkelblau + helle Einfassung (dezent) */
#dashboard .aside-card p,
#dashboard .aside-card .aside-meta span{
  color: #0b2f55 !important;
  display: inline-block;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(255,255,255,0.92);
  border-radius: 10px;
  padding: .16em .5em;

  -webkit-text-stroke: .4px #fff;
  paint-order: stroke fill;
  text-shadow:
    0 0 1px #fff, 0 0 2px #fff;
}

/* Icons: ohne Stroke/Halo, damit sie knackig bleiben */
#dashboard .aside-card .material-icons{
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: #0b2f55 !important;
}

/* 5) Hover: Farben NICHT verändern */
#dashboard .aside-card:hover h3,
#dashboard .aside-card:hover p,
#dashboard .aside-card:hover .aside-meta,
#dashboard .aside-card:hover .aside-meta span{
  color: #0b2f55 !important;
}

/* 6) „Kommt bald“-Badge ganz rechts oben, bündig zur Headline */
#dashboard .aside-card .badge-soon{
  position: absolute !important;
  top: 8px !important;
  right: 10px !important;
  margin: 0 !important;
  z-index: 3 !important;
}

/* 7) Falls in älteren Styles die Aside-Überschrift zentriert wurde → neutralisieren */
#dashboard .aside-card h3{ text-align: left !important; }

/* 8) (Optional) Kleine Screens: Pill-Backings etwas schlanker */
@media (max-width: 980px){
  #dashboard .aside-card h3{
    padding: .1em .5em;
    margin-right: 58px; /* etwas weniger Platz fürs Badge */
  }
}



/* ===== Dashboard Aside – Feintuning (Überschrift, Badge, Abstände, Rechtsausrichtung) ===== */

/* 1) Headline: nur Text, kein Weiß dahinter */
#dashboard .aside-card > h3{
  background: transparent !important;
  border: 0 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;

  color: #0b2f55 !important;                 /* dunkelblau */
  font-weight: 900;
  font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.2rem);
  line-height: 1.1;
  margin: 8px 0 .5rem 12px;
  padding: 0 !important;

  /* Platz für Badge rechts oben freihalten */
  padding-right: 84px;
}

/* 2) Badge „Kommt bald“ wirklich fix oben rechts an der Card */
#dashboard .aside-card{ position: relative; }
#dashboard .aside-card .badge-soon{
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  margin: 0 !important;
  z-index: 3 !important;
}

/* 3) Mitteltext & Meta: dunkelblau + sehr knapper, weißer „Halo“ ohne zu viel Höhe */
#dashboard .aside-card p,
#dashboard .aside-card .aside-meta span{
  color: #0b2f55 !important;

  /* knapper, ruhiger Pill-Back */
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(255,255,255,0.96);
  border-radius: 10px;
  display: inline-block;
  padding: .05em .50em;                 /* minimaler vertikaler Abstand */
  line-height: 1.25;

  /* leichte Kontur für Lesbarkeit */
  -webkit-text-stroke: .25px #fff;
  text-shadow: 0 0 1px #fff;
}

/* Meta-Spans ggf. noch etwas flacher */
#dashboard .aside-meta span{ padding-top: .05em; padding-bottom: .05em; }

/* Hover soll NICHT die Textfarbe ändern */
#dashboard .aside-card:hover h3,
#dashboard .aside-card:hover p,
#dashboard .aside-card:hover .aside-meta span{
  color: #0b2f55 !important;
}

/* 4) Cards weiter nach rechts: größere Sidebar + größerer Abstand zur Projektliste */
#dashboard .dashboard-split{
  grid-template-columns: minmax(560px, 60%) minmax(380px, 460px) !important;
  column-gap: clamp(28px, 4.5vw, 64px) !important;
}
#dashboard .dashboard-aside{
  margin-left: auto;                      /* falls Flex/Grid-Mix: an rechten Rand drücken */
}

/* Fallback falls der Wrapper (sehr alte Browser) nicht als Grid läuft */
@supports not (display: grid){
  .dashboard-content-wrapper{ display: flex; }
  #dashboard .dashboard-left{ flex: 1 1 auto; }
  #dashboard .dashboard-aside{ flex: 0 0 420px; margin-left: auto; }
}



/* === DASHBOARD: Hilfebereich/Tutorial – Final Overrides === */

/* 1) Mehr Luft zwischen linker Projektspalte und rechter Sidebar */
#dashboard .dashboard-split{
  gap: clamp(42px, 8vw, 120px) !important;  /* deutlich größer */
}

/* 2) Card als Bezugspunkt; H3 wieder "static", Badge absolut oben rechts */
#dashboard .aside-card{ position: relative !important; }
#dashboard .aside-card h3{
  position: static !important;
  margin: 12px 16px .6rem !important;
  font-weight: 800 !important;
  color: #0B2F55 !important;                           /* dunkles Blau */
  /* nur ein Hauch Weißschimmer statt Fläche */
  text-shadow: 0 1px 2px rgba(255,255,255,.75) !important;
  filter: none !important;
  background: transparent !important;
}
#dashboard .aside-card .badge-soon{
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;   /* wirklich ganz rechts */
  z-index: 4 !important;
  color: #0B2F55 !important;
  background: rgba(255,255,255,.95) !important;
  border: 1px solid #fff !important;
  padding: .15em .6em !important;        /* knapp, kein Luftpolster */
  line-height: 1 !important;
  letter-spacing: .25px !important;
  box-shadow: 0 4px 14px rgba(10,40,70,.12) !important;
}

/* 3) Mitteltext: dunkelblau + sehr schlanke helle Kapsel, exakt mittig */
#dashboard .aside-card p:first-of-type{
  color: #0B2F55 !important;
  display: inline-block !important;
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(255,255,255,.92) !important;
  border-radius: 999px !important;
  padding: .22em .6em !important;        /* oben/unten sehr schmal */
  line-height: 1.25 !important;
  text-align: center !important;

  position: absolute !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  top: 50% !important;
  right: auto !important;                 /* nicht auf volle Breite ziehen */
  margin: 0 !important;
  z-index: 2 !important;
}

/* 4) Meta-Zeile (unten links) ebenfalls als kleine Kapsel – nicht volle Breite */
#dashboard .aside-meta{
  position: absolute !important;
  left: 18px !important;
  right: auto !important;
  bottom: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .45rem !important;

  color: #0B2F55 !important;
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(255,255,255,.92) !important;
  border-radius: 999px !important;
  padding: .22em .6em !important;        /* oben/unten schmal */
}
#dashboard .aside-meta .material-icons{ color:#0B2F55 !important; }

/* 5) Keine Farb-/Hover-Spielereien: Schrift bleibt dunkelblau */
#dashboard .aside-card:hover h3,
#dashboard .aside-card:hover p:first-of-type,
#dashboard .aside-card:hover .aside-meta{
  color: #0B2F55 !important;
  text-shadow: 0 0 0 rgba(0,0,0,0) !important;
}

/* 6) Safety: Badge-Stile aus generischen Regeln neutralisieren */
#dashboard .badge-soon{ text-transform: uppercase; }  /* sonst nichts überschreiben */



/* ==== Dashboard Aside – Final: Infotext weg, H3 bleibt dunkel auch im Hover ==== */

/* 1) Mittleren Infotext vollständig ausblenden (falls vorhanden) */
#dashboard .dashboard-aside .aside-card p:first-of-type{
  display: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 2) Überschrift: immer dunkelblau, keine Outline/Glow – auch im Hover */
#dashboard .dashboard-aside .aside-card h3{
  color: #0b2f55 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
}

/* Hover darf die Farbe NICHT mehr ändern */
#dashboard .dashboard-aside .aside-card:hover h3,
#dashboard .dashboard-aside .aside-card h3:hover{
  color: #0b2f55 !important;
  text-shadow: none !important;
}


/* === Aside-Cards: Headline immer sichtbar + rechts mehr Abstand === */

/* 1) Overlay der Bildkarte unter den Text legen */
#dashboard .aside-card { position: relative !important; }
#dashboard .aside-card.has-bg::before,
#dashboard .aside-card.has-bg::after{
  z-index: 0 !important;            /* Bild-/Aufheller-Schicht */
}

/* 2) Headline/Meta über das Overlay heben (sichtbar bleiben) */
#dashboard .aside-card h3,
#dashboard .aside-card .aside-meta{
  position: relative !important;
  z-index: 2 !important;
  color: #0B2F55 !important;         /* dunkelblau – dauerhaft */
}

/* Badge ganz oben rechts und oberste Schicht */
#dashboard .aside-card .badge-soon{
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 3 !important;
}

/* 3) Hover: Headline darf NICHT aufhellen/verschwinden */
#dashboard .aside-card:hover h3{
  color: #0B2F55 !important;
  text-shadow: none !important;
}

/* 4) Mittleren Infotext komplett entfernen (falls noch im DOM) */
#dashboard .aside-card p:first-of-type{
  display: none !important;
}

/* 5) Mehr Abstand zwischen Projektliste (links) und Cards (rechts) */
#dashboard .dashboard-split{
  column-gap: clamp(56px, 9vw, 140px) !important;  /* deutlich weiter rechts */
}

/* Safety: Rechte Spalte wirklich an den rechten Rand drücken */
#dashboard .dashboard-aside{
  justify-self: end !important;
  margin-left: auto !important;
}



/* === Dashboard: Badge oben rechts & Hinweis unten links fixieren === */
.dashboard-aside .aside-card { position: relative; }

/* "Kommt bald" ganz oben rechts, immer sichtbar */
.dashboard-aside .aside-card .badge-soon{
  position: absolute; top: 10px; right: 12px; z-index: 20;
  display: inline-block;
  padding: 6px 12px; line-height: 1;      /* kompakt, kein extra Leerraum */
  border-radius: 9999px; background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  pointer-events: none;                    /* Card bleibt klickbar */
  opacity: 1 !important; filter: none !important;
}

/* Hinweiszeile (Icon + Text) unten links, immer sichtbar */
.dashboard-aside .aside-card .aside-meta{
  position: absolute; left: 14px; bottom: 12px; z-index: 20;
  display: flex; align-items: center; gap: .55rem;
  pointer-events: none;
  opacity: 1 !important; filter: none !important;
}

/* Sicherheit: Hover/Overlays sollen die beiden Elemente nie abdunkeln */
.dashboard-aside .aside-card:hover .badge-soon,
.dashboard-aside .aside-card:hover .aside-meta{
  opacity: 1 !important; filter: none !important;
}



/* === DASHBOARD: Badge oben rechts & Hinweis unten links – immer sichtbar === */
.dashboard-aside .aside-card { position: relative !important; }

.dashboard-aside .aside-card .badge-soon{
  position: absolute !important;
  top: 12px;               /* Abstand zur Ecke */
  right: 12px;
  margin: 0 !important;
  transform: none !important;
  z-index: 5;              /* über etwaigen Overlays */
  opacity: 1 !important;
  filter: none !important;
}

.dashboard-aside .aside-card .aside-meta{
  position: absolute !important;
  left: 12px;
  bottom: 12px;
  margin: 0 !important;
  transform: none !important;
  z-index: 5;
  opacity: 1 !important;
  filter: none !important;
}

/* auch beim Hover niemals ausblenden/abdunkeln */
.dashboard-aside .aside-card:hover .badge-soon,
.dashboard-aside .aside-card:hover .aside-meta{
  opacity: 1 !important;
  filter: none !important;
}



/* === DASHBOARD CARDS – feste Anordnung & rechter Seitenrand ================= */

/* Spalte rechtsbündig; gleicher Außenabstand wie Account-Button (2rem) */
.dashboard-aside{
  margin-left: auto !important;
  margin-right: 2rem !important;              /* wie #loginTopBtn → right:2rem */
}

/* Mehr Abstand zwischen Projektliste (links) und Cards (rechts) */
.dashboard-split{
  column-gap: clamp(32px, 3.2vw, 56px) !important;
}

/* Card als Positionierungs-Referenz */
.dashboard-aside .aside-card{
  position: relative !important;
  isolation: isolate;                         /* sauberer Z-Kontext */
  overflow: hidden;                           /* Pills bleiben im Radius */
}

/* KOMMT-BALD → fix oben rechts */
.dashboard-aside .aside-card .badge-soon{
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 5 !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: none !important;
}

/* Stichpunkte → fix unten links */
.dashboard-aside .aside-card .aside-meta{
  position: absolute !important;
  left: 14px !important;
  bottom: 14px !important;
  right: auto !important;
  top: auto !important;
  z-index: 5 !important;
  transform: none !important;
  opacity: 1 !important;
  margin: 0 !important;
  transition: none !important;
}

/* Headline soll nie verblassen/verschwinden */
.dashboard-aside .aside-card h3,
.dashboard-aside .aside-card:hover h3{
  opacity: 1 !important;
  color: #0A3A69 !important; /* dunkelblau, wie gewünscht */
}

/* Sicherheit: Hover-Effekte dürfen Badge/Meta nicht ausblenden/verschieben */
.dashboard-aside .aside-card:hover .badge-soon,
.dashboard-aside .aside-card:hover .aside-meta{
  opacity: 1 !important;
  transform: none !important;
}




/* === DASHBOARD – Fix: Badge oben rechts, Stichworte unten links, rechte Spalte bündig === */

/* Rechte Spalte an rechten Rand, gleicher Außenabstand wie der Account-Button (2rem) */
#dashboard.dashboard-wide .dashboard-aside{
  margin-left: auto !important;
  margin-right: 2rem !important;  /* wie #loginTopBtn → right:2rem */
}

/* Karte als Bezugspunkt + sauberer Z-Kontext */
#dashboard .dashboard-aside .aside-card{
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden; /* runde Ecken bleiben sauber */
}
/* Falls Bild-Overlays existieren: sicher hinter Text */
#dashboard .dashboard-aside .aside-card::before,
#dashboard .dashboard-aside .aside-card::after{ z-index: 0 !important; }

/* Überschrift darf NICHT das Bezugselement sein */
#dashboard .dashboard-aside .aside-card > h3{
  position: static !important;             /* wichtig: NICHT relative */
  z-index: 2 !important;                   /* über dem Bild */
}

/* BADGE „Kommt bald“ → fix oben rechts an der CARD (nicht am H3) */
#dashboard .dashboard-aside .aside-card > h3 .badge-soon{
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  left: auto !important; bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  z-index: 5 !important;
  pointer-events: none;                     /* Card bleibt klickbar */
}

/* STICHWORTE / META → fix unten links an der CARD */
#dashboard .dashboard-aside .aside-card .aside-meta{
  position: absolute !important;
  left: 14px !important;
  bottom: 12px !important;
  right: auto !important; top: auto !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 5 !important;
  pointer-events: none;                     /* Card bleibt klickbar */
}

/* Sicherheit: Hover/Filter dürfen nichts abdunkeln oder verschieben */
#dashboard .dashboard-aside .aside-card:hover .badge-soon,
#dashboard .dashboard-aside .aside-card:hover .aside-meta{
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}




/* ===== Account-Menü: Logout als Dropdown unter Account-Button ===== */
header .account-menu{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-end;      /* Dropdown rechts ausrichten */
  z-index: 1200;             /* über Breadcrumb/Burger */
}

/* Optisch identischer Button – wir nutzen vorhandene .login-top-btn-Optik */
header .account-menu .logout-drop{
  display:none;              /* standardmäßig versteckt */
  margin-top:.35rem;         /* Abstand zum Account-Button */
  /* optional etwas schmaler ziehen:
  padding-inline: 0.9em !important;
  */
}

/* Anzeigen bei Hover oder Tastaturfokus im Container */
header .account-menu:hover .logout-drop,
header .account-menu:focus-within .logout-drop{
  display:flex;
}

/* Kleinigkeit: Icon-Größe wie beim Account-Button */
header .account-menu .logout-drop .material-icons{
  font-size:1.8em; line-height:1;
}





/* ===== Fix: Header-Aktionen statisch oben rechts, ohne Vertikal-Transform ===== */
header .header-actions{
  position: absolute;
  right: 2rem;
  top: 1.2rem;
  transform: none;       /* verhindert das "Springen" */
  display: flex;
  align-items: center;
  gap: .7rem;
  z-index: 1200;
}

/* Account-Menü: Dropdown exakt unter dem Account-Button, gleiche Breite */
header .account-menu{
  position: relative;             /* Bezugspunkt für das Dropdown */
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
}

header .account-menu .logout-drop{
  position: absolute;
  top: calc(100% + 6px);          /* direkt unter dem Account-Button */
  right: 0;
  width: 100%;                    /* gleiche Breite wie der Account-Button */
  display: none;                  /* nur bei Hover/Fokus sichtbar */
}

header .account-menu:hover .logout-drop,
header .account-menu:focus-within .logout-drop{
  display: flex;
}

/* Logout-Button nutzt exakt den gleichen Look wie Account/Login */
header .account-menu .logout-drop.login-top-btn .material-icons{
  font-size: 1.8em; line-height: 1;
}



/* ===== Header: Aktionen mittig rechts + Dropdown unter Account ===== */
header .header-actions{
  position:absolute;
  right:2rem;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  gap:.7rem;
  z-index:1200;
}

/* Account-Menü (Container) */
header .account-menu{
  position:relative;               /* Bezug für das Dropdown */
  display:inline-flex;
  flex-direction:column;
  align-items:flex-end;
}

/* Logout erscheint exakt unter dem Account-Button, identische Breite */
header .account-menu .logout-drop{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  width:100%;
  display:none;
}
header .account-menu:hover .logout-drop,
header .account-menu:focus-within .logout-drop{
  display:flex;
}

/* Icon-Größe des Logout-Buttons angleichen */
header .account-menu .logout-drop .material-icons{
  font-size:1.8em; line-height:1;
}



/* Dropdown direkt unter dem Account-Button – ohne Hover-Lücke */
header .account-menu .logout-drop{
  position: absolute;
  top: 100%;         /* direkt am unteren Rand des Account-Buttons ansetzen */
  right: 0;
  width: 100%;
  padding-top: 8px;  /* optischer Abstand, ABER Teil des Elements = kein Gap */
  display: none;
}

header .account-menu:hover .logout-drop,
header .account-menu:focus-within .logout-drop{
  display: flex;
}


header .account-menu::after{
  content:"";
  position:absolute;
  top:100%;
  right:0;
  width:100%;
  height:4px;     /* unsichtbare Pufferzone */
}





/* === AUTH MODAL – breiter, sticky Header, sauberer Scroll === */
.modal-backdrop{
  display:flex !important; align-items:flex-start !important; justify-content:center !important;
  padding: 3vh 3vw !important;
}

.auth-modal{
  /* ~30% Seitenbreite, mit sinnvollen Grenzen */
  width: clamp(520px, 30vw, 920px) !important;
  max-width: none !important;
  max-height: 92vh !important;
  /* Modal selbst clippt NICHT die Tooltips – der Tab scrollt */
  overflow: hidden !important;
  padding: 0 !important;                  /* Innenabstände in Tab verschieben */
  border-radius: 18px !important;
}



/* Sticky Titelzeile in beiden Tabs */
#loginTab .modal-title,
#registerTab .modal-title{
  position: sticky; top: 0;
  background: #fff; z-index: 2;
  margin: 0 0 10px 0 !important;
  padding: 14px 6px 12px 6px !important;
  border-bottom: 1px solid #e6eef6;
  font-size: 1.32em !important;
}

/* X-Button bleibt oben rechts sichtbar */
.modal-close-btn{ top: 10px !important; right: 12px !important; z-index: 3 !important; }

/* Formular kompakter & gleichmäßig breit */
.auth-modal .form-group{ margin-bottom: .55em !important; }
.auth-form-modern{ box-shadow: none !important; padding: 0 !important; gap: .9em !important; }
.auth-form-modern label{ font-size: 1rem !important; }
.auth-form-modern input,
.auth-form-modern select,
.auth-form-modern textarea{ width: 100% !important; }

/* Straße & Hausnummer – die umschließende Grid-Zeile war 2-spaltig, obwohl nur 1 Feld: volle Breite erzwingen */
#registerTab .form-group:has(#regStreet){ grid-template-columns: 1fr !important; }

/* PLZ/Ort Grid bleibt 2-spaltig – nichts weiter nötig */

/* Info-Icon (Bundesland) – Tooltip kollidiert nicht mehr mit dem rechten Rand */
#registerTab .info-icon[data-tooltip]:hover::after,
#registerTab .info-icon[data-tooltip]:focus::after{
  left: auto !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
  max-width: min(420px, calc(100vw - 80px)) !important;
}

/* Lizenz-Stepper klar erkennbar */
.seats-stepper button{
  height: 42px; line-height: 40px;
  border: 1px solid #d9e2ef; border-radius: 8px; background: #fff;
  font-weight: 700; font-size: 1.1rem; padding: 0 12px; cursor: pointer;
}
.seats-stepper input{
  height: 42px; text-align: center; border: 1px solid #d9e2ef; border-radius: 8px;
}

/* Checkbox + Text oneline & sauber ausgerichtet */
#registerTab #regAgreeTOS{ width:auto !important; display:inline-block !important; margin-right:.5em; vertical-align: top; }
#registerTab label[for="regAgreeTOS"]{ display:inline !important; font-weight: 500 !important; }

/* Kleiner genereller Font im Modal für mehr Inhalt pro View */
#registerTab, #loginTab{ font-size: .97rem; }




/* Dashboard: Vorlagenverwaltung – Hintergrundbild */
#dashboard .aside-card.card-markt::before{
  background-image: url("../img/markt.png");
}
#dashboard .aside-card.card-templates::before{
  background-image: url("../img/vorlagenbereich.png");
}

/* (Optional – falls bei dir noch nicht vorhanden)
   Headline/Meta immer über dem Bild-Overlay halten */
#dashboard .aside-card.has-bg::before,
#dashboard .aside-card.has-bg::after{ z-index:0 !important; }
#dashboard .aside-card h3,
#dashboard .aside-card .aside-meta{
  position:relative !important;
  z-index:2 !important;
  color:#0B2F55 !important;
}



/* === AUTH MODAL – Fix Pack v2 =========================================== */

/* Backdrop nur anzeigen, wenn Body-Klasse gesetzt ist */
#authModalBackdrop,
#companyModalBackdrop { display: none !important; }
body.modal-open #authModalBackdrop,
body.company-modal-open #companyModalBackdrop {
  display: flex !important;
  align-items: flex-start;
  justify-content: center;
  padding: 3vh 3vw;
}

/* Modal selbst: Overflow sichtbar, damit Tooltips auch außerhalb erscheinen können */
.auth-modal { overflow: visible !important; }

/* Tabs: NICHT zum Anzeigen zwingen – JS steuert display */
.auth-modal > #loginTab,
.auth-modal > #registerTab {
  /* keine display-Forcierung! */
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 14px 18px 18px;
}

/* Wenn per Inline-Style „display:none“ gesetzt ist, dann wirklich verstecken */
.auth-modal > #loginTab[style*="display:none"],
.auth-modal > #loginTab[style*="display: none"],
.auth-modal > #registerTab[style*="display:none"],
.auth-modal > #registerTab[style*="display: none"] {
  display: none !important;
}

/* Sticky Header bleibt sichtbar */
#loginTab .modal-title,
#registerTab .modal-title {
  position: sticky; top: 0; z-index: 2;
  background: #fff;
  margin: 0 0 10px 0;
  padding: 14px 6px 12px 6px;
  border-bottom: 1px solid #e6eef6;
  font-size: 1.22rem;
}

/* Abstände kompakter (≈ halbiert) */
.auth-modal .form-group { margin-bottom: 0.35em !important; }
.auth-form-modern h3,
.auth-form-modern h4 {
  margin: .55em 0 .35em !important;
}
/* Überschrift direkt nach einer Formzeile noch enger */
.auth-form-modern .form-group + h3,
.auth-form-modern .form-group + h4 {
  margin-top: .45em !important;
}

/* Checkbox + Label in einer Zeile */
#registerTab #regAgreeTOS {
  width: auto !important;
  display: inline-block !important;
  margin: 0 .5em 0 0 !important;
  vertical-align: middle !important;
}
#registerTab label[for="regAgreeTOS"] {
  display: inline !important;
  vertical-align: middle !important;
}

/* Lizenz-Stepper: sichtbare +/−, gleiche Höhe wie Input, sauber ausgerichtet */
.seats-stepper { display: flex; align-items: center; gap: 6px; }
.seats-stepper input {
  height: 42px !important;
  line-height: 42px !important;
  text-align: center;
  border: 1px solid #d9e2ef; border-radius: 8px;
  padding: 0 .6rem !important;
  width: 120px !important;
}
.seats-stepper button {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: 42px !important; min-width: 42px !important;
  height: 42px !important; line-height: 42px !important;
  border: 1px solid #d9e2ef !important; border-radius: 8px !important;
  background: #fff !important; color: #0a2a4a !important;
  font-weight: 700 !important; font-size: 1.1rem !important;
  padding: 0 !important; cursor: pointer !important;
}

/* Tooltips am "i": rechts anzeigen, etwas kleiner, nicht abgeschnitten */
#registerTab label { position: relative; } /* Anker für absolut positionierte Tooltips */
#registerTab .info-icon[data-tooltip]:hover::after,
#registerTab .info-icon[data-tooltip]:focus::after{
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 10px) !important; /* RECHTS vom i */
  right: auto !important;
  top: 50%; transform: translateY(-50%);
  min-width: 240px; max-width: 460px;
  background: #fff; color: #183a56; font-size: .92rem;
  border: 1px solid #c4d8ef; box-shadow: 0 4px 24px #176fa62a;
  border-radius: 10px; padding: .7em 1.1em; z-index: 300;
  white-space: normal; line-height: 1.45;
}

/* Kleine Kosmetik: Close-Button immer oben drüber */
.modal-close-btn { z-index: 4 !important; }




/* === AUTH MODAL – Polish v3 ============================================== */

/* Modal-Container bündig unter dem Header starten und bis Seitenende gehen */
:root { --header-h: 72px; } /* wird per JS gemessen/überschrieben */
.modal-backdrop{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  padding:0 !important;           /* oben kein Puffer mehr */
}

/* Breite ist bereits ok; hier nur Höhe & Overflow, damit Tooltips nicht clippen */
.auth-modal{
  width: clamp(520px, 30vw, 920px) !important;
  height: calc(100vh - var(--header-h)) !important;
  margin-top: var(--header-h) !important;
  overflow: visible !important;   /* wichtig: Tooltip darf über Modal hinaus gehen */
  padding: 0 !important;          /* Innenabstand in die Tabs verlagern */
  border-radius: 18px !important;
}


/* Sticky Header (vollflächig weiß) */
#loginTab .modal-title,
#registerTab .modal-title{
  position: sticky; top: 0; z-index: 2;
  background: #fff;               /* komplett weiß bis ganz oben */
  margin: 0;
  padding: 16px 6px 12px;
  border-bottom: 1px solid #e6eef6;
  font-size: 1.24rem;
}

/* Kompaktere Abstände zwischen Formgruppen & Überschriften (≈ halbe Höhe) */
.auth-modal .form-group { margin-bottom: 0.35em !important; }
.auth-form-modern h3, .auth-form-modern h4 { margin: .45em 0 .25em !important; }
.auth-form-modern .form-group + h3,
.auth-form-modern .form-group + h4 { margin-top: .35em !important; }

/* Checkbox + Label in einer Zeile */
#registerTab #regAgreeTOS{
  width:auto !important; display:inline-block !important;
  margin:0 .5em 0 0 !important; vertical-align:middle !important;
}
#registerTab label[for="regAgreeTOS"]{ display:inline !important; vertical-align:middle !important; }

/* Sitzanzahl-Stepper: Buttons sichtbar und fluchten mit dem Feld */
.seats-stepper{ display:flex; align-items:center; gap:6px; }
.seats-stepper input{
  height:42px !important; line-height:42px !important; width:120px !important;
  text-align:center; border:1px solid #d9e2ef; border-radius:8px; padding:0 .6rem !important;
}
.seats-stepper button{
  display:inline-flex !important; align-items:center; justify-content:center;
  width:42px !important; height:42px !important; line-height:1 !important;
  border:1px solid #d9e2ef !important; border-radius:8px !important;
  background:#fff !important; color:#0a2a4a !important; font-weight:700 !important;
  font-size:1.1rem !important; padding:0 !important; cursor:pointer !important;
}
/* Falls der Buttontext mal leer ist: Zeichen per CSS sicherstellen */
.seats-stepper button[data-op="minus"]::before{ content:"–"; }
.seats-stepper button[data-op="plus"]::before{ content:"+"; }

/* Info-Icon im Projekt-Design (wie Vergabeunterlagen) */
.info-icon{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  width:1.5em !important; height:1.5em !important; border-radius:50% !important;
  background:#e0ecfa !important; color:#1466a6 !important; border:1px solid #d2e4f6 !important;
  font-weight:800 !important; cursor:pointer !important; margin-left: .4em !important;
}
/* Nur EIN Tooltip: CSS-Variante behalten, Floating-Duplikat notfalls ausblenden */
.va-floating-tooltip{ display:none !important; }

/* CSS-Tooltip rechts vom Icon, etwas kleinere Schrift */
.info-icon[data-tooltip]:hover::after,
.info-icon[data-tooltip]:focus::after{
  content: attr(data-tooltip);
  position: absolute; left: 110%; top: 50%; transform: translateY(-50%);
  min-width: 200px; max-width: 340px;
  background: #fff; color:#183a56; font-size: .9em; /* kleiner als vorher */
  border: 1px solid #c4d8ef; box-shadow: 0 4px 24px #0077b612;
  border-radius: 10px; padding: .6em 1em; z-index: 300; white-space: normal;
}




/* === AUTH MODAL – Only-One-Tab & No-Background-Scroll ==================== */

/* Overlay immer bildschirmfüllend & fixiert */
#authModalBackdrop{
  position: fixed !important;
  inset: 0 !important;
}

/* Seite komplett sperren, wenn Modal offen (auch HTML-Element) */
html.modal-open, body.modal-open{
  overflow: hidden !important;
  height: 100% !important;
}

/* Verhindert Scroll-Chaining vom Modal zur Seite */
.auth-modal, #loginTab, #registerTab{
  overscroll-behavior: contain;
}







/* === AUTH MODAL – consolidated ========================================== */

/* Backdrop steuert Sichtbarkeit per JS/Body-Klasse */
#authModalBackdrop { display: none !important; }
body.modal-open #authModalBackdrop { display:flex !important; position:fixed !important; inset:0 !important; }

/* Seite sperren, solange Modal offen */
html.modal-open, body.modal-open { overflow:hidden !important; height:100% !important; }

/* Modal bündig unter dem Header und bis Seitenende */
:root { --header-h: 72px; } /* wird von JS gemessen */
.auth-modal{
  width: clamp(520px, 30vw, 920px) !important;
  height: calc(100vh - var(--header-h)) !important;
  margin-top: var(--header-h) !important;
  overflow: visible !important; /* Tooltips dürfen überstehen */
  padding: 0 !important;
  border-radius: 18px !important;
}

/* Tabs enthalten Scrollbereich unterhalb des Headers */
.auth-modal > #loginTab, .auth-modal > #registerTab{
  display:flex !important; flex-direction:column;
  min-height:0 !important; overflow:hidden !important;
  padding: 14px 18px 18px !important;
  overscroll-behavior: contain; /* kein Scroll-Through */
  margin-right: var(--auth-modal-scrollbar-gap);
}

.auth-modal > #loginTab[style*="display:none"],
.auth-modal > #loginTab[style*="display: none"],
.auth-modal > #registerTab[style*="display:none"],
.auth-modal > #registerTab[style*="display: none"]{
  display: none !important;
}

/* Sticky Header (voll weiß) */
#loginTab .modal-title, #registerTab .modal-title{
  position: sticky; top: 0; z-index: 2;
  background:#fff; margin:0; padding:16px 6px 12px;
  border-bottom:1px solid #e6eef6; font-size:1.24rem;
}

/* Kompaktere Abstände */
.auth-modal .form-group{ margin-bottom:.35em !important; }
.auth-form-modern h3, .auth-form-modern h4{ margin:.45em 0 .25em !important; }
.auth-form-modern .form-group + h3, .auth-form-modern .form-group + h4{ margin-top:.35em !important; }

/* Checkbox mit Text in einer Zeile */
#registerTab #regAgreeTOS{ width:auto !important; display:inline-block !important; margin:0 .5em 0 0 !important; vertical-align:middle !important; }
#registerTab label[for="regAgreeTOS"]{ display:inline !important; vertical-align:middle !important; }

/* Seats-Stepper – bündig, keine ::before-Duplikate */
.seats-stepper{ display:flex; align-items:center; gap:6px; }
.seats-stepper input,
.seats-stepper button{ box-sizing:border-box; margin:0 !important; vertical-align:middle; }
.seats-stepper input{
  height:42px !important; line-height:42px !important; width:120px !important;
  text-align:center; border:1px solid #d9e2ef; border-radius:8px; padding:0 .6rem !important;
}
.seats-stepper button{
  display:inline-flex !important; align-items:center; justify-content:center;
  width:42px !important; height:42px !important; line-height:1 !important;
  border:1px solid #d9e2ef !important; border-radius:8px !important;
  background:#fff !important; color:#0a2a4a !important;
  font-weight:700 !important; font-size:1.1rem !important; padding:0 !important; cursor:pointer !important;
}
.seats-stepper button::before{ content:none !important; } /* verhindert doppeltes +/– */

.billing-switch{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:0;
  border-radius:999px;
  background:transparent;
  border:none;
  box-shadow:none;
}
.billing-switch--compact{
  padding:0;
}
.billing-cycle-label{
  border:none;
  background:transparent;
  padding:6px 2px;
  border-radius:8px;
  text-align:center;
  font-weight:800;
  color:#4a6a8f;
  cursor:pointer;
  transition:color .18s ease, opacity .18s ease, transform .18s ease;
  line-height:1.2;
}
#registerTab .billing-switch .billing-cycle-label{
  position:relative;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-width:54px;
  height:34px;
  margin:0 !important;
  padding:0 2px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#5b728a !important;
  font-size:.95rem;
  font-weight:800;
  line-height:1;
  text-shadow:none !important;
  transform:none !important;
  filter:none !important;
}
#registerTab .billing-switch .billing-cycle-label::after{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  bottom:1px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(120deg, #00f0ff, #00aab8 70%, #0093a1);
  opacity:0;
  transform:scaleX(.35);
  transform-origin:center;
  transition:opacity .18s ease, transform .18s ease;
}
#registerTab .billing-switch .billing-cycle-label.active{
  color:#007f8c !important;
}
#registerTab .billing-switch .billing-cycle-label.active::after{
  opacity:1;
  transform:scaleX(1);
}
#registerTab .billing-switch .billing-cycle-label:hover{
  background:transparent !important;
  color:#007f8c !important;
  box-shadow:none !important;
  transform:none !important;
}
.billing-cycle-label.active{
  color:#008c9a;
  text-shadow:0 1px 0 rgba(255,255,255,.75);
}
.billing-cycle-label:hover{
  color:#007985;
  background:transparent;
  transform:none;
}
.billing-cycle-label:focus-visible,
.billing-cycle-toggle:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(0, 170, 184, .22), 0 0 0 6px rgba(0, 170, 184, .10);
}
.billing-cycle-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:none;
  border-radius:999px;
  background:transparent;
  cursor:pointer;
  box-shadow:0 14px 28px rgba(0,150,165,.24);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
#registerTab .billing-switch .billing-cycle-toggle{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:999px !important;
  background:transparent !important;
  color:inherit !important;
  box-shadow:0 14px 28px rgba(0,150,165,.24) !important;
}
.billing-cycle-toggle:hover{
  background:transparent;
  filter:brightness(1.03);
  transform:translateY(-1px);
  box-shadow:0 18px 34px rgba(0,150,165,.32);
}
#registerTab .billing-switch .billing-cycle-toggle:hover{
  background:transparent !important;
  filter:brightness(1.03);
  transform:translateY(-1px) !important;
  box-shadow:0 18px 34px rgba(0,150,165,.32) !important;
}
.billing-cycle-toggle__track{
  display:inline-flex;
  align-items:center;
  width:64px;
  height:34px;
  padding:3px;
  border-radius:999px;
  background:linear-gradient(120deg, #00f0ff, #00aab8 70%, #0093a1);
  border:1px solid rgba(0, 140, 154, .58);
  transition:background .18s ease, border-color .18s ease, box-shadow .18s ease;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.45),
    inset 0 -10px 18px rgba(0, 79, 88, .18);
}
.billing-cycle-toggle__thumb{
  width:28px;
  height:28px;
  border-radius:50%;
  background:linear-gradient(180deg, #ffffff 0%, #edf9fb 100%);
  box-shadow:
    0 7px 16px rgba(4, 51, 57, .28),
    0 1px 0 rgba(255,255,255,.9) inset;
  margin-left:0;
  transition:margin-left .2s cubic-bezier(.2,.85,.25,1);
}
.billing-cycle-toggle[aria-checked="true"] .billing-cycle-toggle__track{
  background:linear-gradient(120deg, #00f0ff, #00aab8 70%, #0093a1);
  border-color:rgba(0, 140, 154, .72);
}
.billing-cycle-toggle[aria-checked="true"] .billing-cycle-toggle__thumb{
  margin-left:30px;
}
.seats-total-display{
  display:inline-flex;
  align-items:center;
}
.seats-total-display input{
  height:42px;
  line-height:42px;
  width:120px;
  text-align:center;
  border:1px solid #cfe0ee;
  border-radius:10px;
  padding:0 .6rem;
  color:#123556;
  background:linear-gradient(180deg, #f8fcff, #eef8fb);
  box-shadow:inset 0 1px 2px rgba(15, 49, 96, .06);
  font-weight:800;
  cursor:default;
  appearance:textfield;
  -moz-appearance:textfield;
}
.seats-total-display input::-webkit-outer-spin-button,
.seats-total-display input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.billing-note{
  margin:.35em 0 0;
  color:#5f738c;
  font-size:.95rem;
}

/* Gesamtkosten-Anzeige */
.price-total{
  margin-top:.35em; color:#0b2f55; font-weight:600;
  font-size: .98rem;
}

.price-total-card{
  margin-top:.55em;
  padding:14px 16px 12px;
  background: linear-gradient(135deg, #f5f8ff 0%, #e7f1ff 100%);
  border:1px solid #d7e5fb;
  border-radius:14px;
  box-shadow:0 12px 30px rgba(15, 49, 96, .12);
}
.price-total-card__header{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; color:#0b2f55; font-weight:700; font-size:.96rem;
}
.price-total-card__chip{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 12px; border-radius:999px;
  background:#0d63d5; color:#fff; font-size:.82rem; letter-spacing:-.01em;
  box-shadow:0 10px 24px rgba(13, 99, 213, .28);
}
.price-total-card__value{
  display:flex; align-items:baseline; flex-wrap:wrap;
  gap:8px; margin:8px 0 6px; color:#0b2f55;
}
.price-total-card__number{ font-size:1.45rem; font-weight:800; }
.price-total-card__per-seat{ font-size:1.05rem; font-weight:700; }
.price-total-card__sum{ font-size:1.6rem; font-weight:800; color:#0f6ad4; }
.price-total-card__discount{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:.25rem;
  padding:.08rem .45rem;
  border-radius:999px;
  background:#eafff4;
  color:#0f8d5f;
  border:1px solid rgba(15,141,95,.22);
  font-size:.9rem;
  font-weight:800;
  line-height:1.1;
  white-space:nowrap;
}
.price-total-card__symbol{ color:#7c93b4; font-weight:700; }
.price-total-card__meta{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:8px; color:#3b556f; font-size:.9rem; margin-top:2px;
}
.price-total-card__pill{
  display:inline-flex; align-items:center;
  padding:6px 10px; border-radius:999px;
  background:rgba(12, 77, 170, .08);
  color:#0c3f86; border:1px solid rgba(12, 77, 170, .18);
  font-weight:600; letter-spacing:-.005em;
}
.price-total-card__pill--ghost{
  background:rgba(255, 255, 255, .7);
  color:#304b6d; border:1px dashed rgba(12, 77, 170, .30);
}
.price-total-card__dot{
  width:6px; height:6px; border-radius:50%;
  background:rgba(12, 77, 170, .24);
}
@media (max-width: 640px){
  .price-total-card{ padding:12px 13px; }
  .price-total-card__value{ gap:6px; }
  .price-total-card__number{ font-size:1.2rem; }
  .price-total-card__sum{ font-size:1.4rem; }
}

/* Info-Icon im Projektlook + Tooltip rechts, etwas kleiner */
.info-icon{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  width:1.5em !important; height:1.5em !important; border-radius:50% !important;
  background:#e0ecfa !important; color:#1466a6 !important; border:1px solid #d2e4f6 !important;
  font-weight:800 !important; cursor:pointer !important; margin-left:.4em !important;
}
#registerTab label{ position:relative; }
#registerTab .info-icon[data-tooltip]:hover::after,
#registerTab .info-icon[data-tooltip]:focus::after{
  content: attr(data-tooltip);
  position:absolute; left:110%; top:50%; transform:translateY(-50%);
  min-width:200px; max-width:340px; background:#fff; color:#183a56; font-size:.9em;
  border:1px solid #c4d8ef; box-shadow:0 4px 24px #0077b612; border-radius:10px; padding:.6em 1em; z-index:300;
}


/* Zeige Tabs nur, wenn explizit per JS gesetzt */
#loginTab, #registerTab {
  display: none;
}
#loginTab.active, #registerTab.active {
  display: block;
}




/* === AUTH MODAL – rescue defaults (safe to append) ======================= */
#authModalBackdrop{
  position: fixed;
  inset: 0;
  background: rgba(7,35,58,.42);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 3vh 3vw;
  z-index: 9999;
}
html.modal-open, body.modal-open{ overflow: hidden; }
body.modal-open #authModalBackdrop{ display: flex; }

.auth-modal{
  width: clamp(520px, 30vw, 920px);
  max-width: none;
  max-height: 92vh;
  overflow: hidden;        /* nur der Tab scrollt */
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 40px rgba(0,0,0,.12);
  padding: 0;
  display: flex;
  flex-direction: column;
}

.auth-modal > #loginTab,
.auth-modal > #registerTab{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 14px 18px 18px;
  min-height: 0;
  overscroll-behavior: contain; /* kein Scrollen der Seite */
  margin-right: var(--auth-modal-scrollbar-gap);
}

.modal-tab-scroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin-top: 0.6em;
  padding-inline-end: var(--auth-modal-scrollbar-gap);
  scrollbar-gutter: stable both-edges;
  display: flex;
  flex-direction: column;
}

#loginTab .modal-title,
#registerTab .modal-title{
  padding-right: calc(6px + var(--auth-modal-scrollbar-gap)) !important;
}

/* Sticky Titelzeile */
#loginTab .modal-title, #registerTab .modal-title{
  position: sticky; top: 0;
  background: #fff;
  margin: 0 0 10px 0;
  padding: 14px 6px 12px 6px;
  border-bottom: 1px solid #e6eef6;
}

/* Stepper bündig */
.seats-stepper{ display:flex; align-items:center; gap:6px; }
.seats-stepper input{
  height:42px; line-height:42px; text-align:center;
  border:1px solid #d9e2ef; border-radius:8px; width:120px; padding:0 .6rem;
}
.seats-stepper button{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; line-height:1;
  border:1px solid #d9e2ef; border-radius:8px; background:#fff; font-weight:700; font-size:1.1rem; padding:0; cursor:pointer;
}




/* ==== ACCOUNT: Breadcrumb wie Preise-Seite ==== */
body.account-page header .breadcrumb-in-header{
  position:absolute; right:13rem; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:.5rem; font-size:.95rem;
  color:#355; white-space:nowrap; z-index:2;
}
body.account-page header .breadcrumb-in-header a{ color:#114084; text-decoration:none; }
body.account-page header .breadcrumb-in-header .breadcrumb-sep{ color:#99a9bf; margin:0 .25rem; }
body.account-page header .breadcrumb-in-header .breadcrumb-current{ color:#222; font-weight:600; }
/* (Basierend auf preise.css) */ /* :contentReference[oaicite:0]{index=0} */

/* ==== Admin-Badge ==== */
.admin-badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.45rem 1.1rem .45rem .95rem;
  border-radius:999px;
  background:linear-gradient(120deg,#0f6bdc 0%,#1da1f2 55%,#35cba4 100%);
  color:#0c1f38;
  border:1px solid rgba(255,255,255,.3);
  box-shadow:0 12px 30px rgba(8,72,143,.25), inset 0 1px 0 rgba(255,255,255,.6);
  font-weight:800;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  line-height:1;
}
.admin-badge .badge-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.9rem;
  height:1.9rem;
  border-radius:50%;
  background:rgba(255,255,255,.22);
  color:#fff;
  box-shadow:0 8px 16px rgba(0,0,0,.14);
  font-size:1.15rem;
}
.admin-badge .badge-label{
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.16);
}
.account-card .admin-badge{
  position:absolute; right:12px; top:10px;
}

/* ==== Benutzerübersicht: Aktionen nur auf Hover zeigen ==== */
#tab-org .org-users .row-actions .btn-ghost{ 
  opacity:0; width:0; padding:.3rem 0; margin:0; overflow:hidden; transition:all .15s ease;
}
#tab-org .org-users tr:hover .row-actions .btn-ghost{
  opacity:1; width:auto; padding:.3rem .55rem; margin-left:.25rem;
}

/* ==== Dezenter "Benutzer hinzufügen"-Button ==== */
.btn-quiet{ background:#f7fbff; border:1px solid #d8e7f7; color:#114084; border-radius:10px; }
.btn-quiet.small{ font-size:.9rem; padding:.35rem .65rem; }

/* ==== Mini-Modal ==== */
.mini-modal-backdrop{ position:fixed; inset:0; background:rgba(7,35,58,.42); display:none; align-items:center; justify-content:center; z-index:9999; }
.mini-modal{ background:#fff; width:min(560px,92vw); border-radius:14px; box-shadow:0 10px 38px rgba(0,0,0,.16); padding:14px 16px 16px; }
.mini-modal .modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.6rem; }
.mini-modal .modal-head h3{ margin:0; font-size:1.1rem; }
.mini-modal .close-x{ cursor:pointer; font-size:1.4rem; line-height:1; padding:.2rem .4rem; }
.mini-modal .form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
.mini-modal .button-row{ display:flex; justify-content:flex-end; gap:.5rem; margin-top:.8rem; }

/* ==== Abo-Zeile (Anzeige + Buttons) ==== */
.org-subscription{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:.6rem; border:1px solid #e6ebf3; background:#fff; border-radius:12px; padding:.6rem .8rem; margin-top:.6rem;
}
.org-subscription--highlight{
  border-color:#8ce9df;
  background:linear-gradient(135deg,#e8fbf8,#f5fdff);
}
.org-subscription-main{
  display:flex;
  flex-direction:column;
  gap:.22rem;
}
.org-subscription-badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  border-radius:999px;
  background:#0da99a;
  color:#fff;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.04em;
  padding:.18rem .65rem;
}
.org-subscription .sub-actions{ display:flex; gap:.4rem; align-items:center; }
.org-seats-edit{ margin-top:.6rem; }

.token-usage-panel{
  margin-top:.9rem;
  border:1px solid #d6e9fb;
  border-radius:14px;
  background:linear-gradient(180deg,#f8fcff,#f3f8ff);
  padding:.9rem 1rem;
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:1rem;
  align-items:flex-start;
}
.token-usage-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.8rem;
}
.token-usage-grid strong{
  display:block;
  margin-top:.1rem;
  font-size:1.06rem;
  color:#0f284a;
}
.token-usage-pricing{
  border-left:1px solid #d0e3f6;
  padding-left:1rem;
  display:flex;
  flex-direction:column;
  gap:.2rem;
}
.token-usage-pricing small{
  color:#24446a;
}
.token-period-hint{
  margin-top:.55rem;
}

.status-pill{
  display:inline-flex; align-items:center; gap:.3rem;
  border-radius:999px; padding:.15rem .8rem;
  font-size:.85rem; font-weight:600; line-height:1.2;
  background:#edf2fb; color:#114084;
}
.status-pill--ok{ background:#e3f5eb; color:#1f7a3d; }
.status-pill--trial{ background:#fff5e5; color:#a06000; }
.status-pill--pending{ background:#fff3cd; color:#7a4c00; }
.status-pill--critical{ background:#fde2e1; color:#a32223; }
.status-pill--muted{ background:#f3f4f6; color:#4b5563; }

.contract-metrics{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:.8rem;
  margin-top:1rem;
}
.contract-metrics .label{
  display:block;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.75rem;
  margin-bottom:.2rem;
}
.contract-metrics strong{
  display:block;
  font-size:1rem;
  color:#102a4e;
}

.contract-hint{
  font-size:.9rem;
  color:#2a3a55;
  margin-top:.8rem;
}

.contract-warning{
  border:1px solid #f8d7da;
  background:#fff5f5;
  border-radius:12px;
  padding:.85rem 1rem;
  color:#651717;
  margin-bottom:1rem;
}
.contract-warning p:last-child{ margin-bottom:0; }

.contract-confirm{
  border:1px dashed #f6c343;
  background:#fffdf5;
  border-radius:12px;
  padding:.85rem 1rem;
  margin-bottom:1rem;
  color:#6b4c00;
}

.trial-lifecycle-card{
  border:1px solid #d6e9fb;
  background:linear-gradient(180deg,#f8fcff,#f4f9ff);
  border-radius:14px;
  padding:1rem 1.1rem;
  display:grid;
  gap:.9rem;
}
.trial-lifecycle-card[hidden]{ display:none; }
.trial-lifecycle-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}
.trial-lifecycle-head h3{ margin:.12rem 0 0; color:#102a4e; }
.trial-lifecycle-facts{
  margin:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:.7rem .9rem;
}
.trial-lifecycle-facts div{
  border:1px solid #dce8f5;
  background:#fff;
  border-radius:10px;
  padding:.65rem .75rem;
}
.trial-lifecycle-facts dt{
  color:#56657a;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.trial-lifecycle-facts dd{
  color:#102a4e;
  font-weight:700;
  margin:.2rem 0 0;
}
.trial-lifecycle-warning{
  margin:0;
  border:1px solid #f2c6c7;
  background:#fff4f4;
  color:#7d2022;
  border-radius:10px;
  padding:.75rem .85rem;
}
.trial-reactivation-form{
  border:1px solid #cbdced;
  background:#fff;
  border-radius:12px;
  padding:.9rem;
  display:grid;
  gap:.85rem;
}
.trial-reactivation-form[hidden]{ display:none; }
.trial-reactivation-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
}
.trial-reactivation-head h4{ margin:.12rem 0 0; color:#102a4e; }
.trial-reactivation-head > strong{ color:#0a6f66; }
.trial-reactivation-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.7rem;
}
.trial-reactivation-grid label{
  display:grid;
  gap:.35rem;
  color:#334a68;
  font-weight:700;
}
.trial-reactivation-grid select,
.trial-reactivation-grid input{
  width:100%;
  border:1px solid #cbd8e8;
  border-radius:9px;
  padding:.58rem .65rem;
  background:#fff;
  color:#102a4e;
}
.trial-license-assignment{
  border:1px solid #f0d49a;
  background:#fffaf0;
  border-radius:10px;
  padding:.75rem;
}
.trial-license-assignment legend{ color:#6d4b08; font-weight:700; padding:0 .25rem; }
.trial-license-members{ display:grid; gap:.45rem; margin-top:.6rem; }
.trial-license-members label{
  display:flex;
  align-items:center;
  gap:.5rem;
  border:1px solid #eadbb9;
  background:#fff;
  border-radius:8px;
  padding:.5rem .6rem;
}
.trial-lifecycle-controls{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem;
}
.trial-renewal-switch{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  color:#173f62;
  font-weight:700;
}
.trial-renewal-switch input{ width:1.15rem; height:1.15rem; accent-color:#0b8f83; }
.trial-renewal-dialog{
  width:min(560px,calc(100vw - 2rem));
  border:0;
  border-radius:14px;
  box-shadow:0 18px 60px rgba(7,35,58,.28);
  padding:1.25rem;
  color:#102a4e;
}
.trial-renewal-dialog::backdrop{ background:rgba(7,35,58,.5); }
.trial-renewal-dialog h2{ margin:0 0 .7rem; }
.trial-renewal-dialog p{ color:#334a68; line-height:1.55; }

@media (max-width:640px){
  .trial-lifecycle-head{ flex-direction:column; }
  .trial-lifecycle-facts{ grid-template-columns:1fr; }
  .trial-reactivation-head{ flex-direction:column; }
  .trial-reactivation-grid{ grid-template-columns:1fr; }
}

.billing-card{
  border:1px solid #dbe6f5;
  background:linear-gradient(180deg,#f8fbff,#f3f7fd);
  border-radius:14px;
  padding:1rem 1.1rem 1.2rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.billing-head .org-eyebrow{ margin:0; }
.billing-head h4{ margin:.1rem 0 0; }
.company-plan-card{
  background:#f9fbfd;
}
.company-plan-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.75rem;
}
.company-plan-option{
  display:flex;
  align-items:center;
  gap:.42rem;
  border:1px solid #d7e5f4;
  background:#fff;
  border-radius:10px;
  padding:.72rem .82rem;
  cursor:pointer;
}
.company-plan-option input{
  flex:0 0 auto;
  margin:0;
  accent-color:#0f6f82;
}
.company-plan-option strong{
  display:block;
  color:#173f62;
}
.company-plan-option small{
  display:block;
  color:#577089;
  margin-top:.12rem;
}
.company-billing-requirements{
  border:1px solid #d7e5f4;
  background:#fff;
  border-radius:10px;
  padding:.75rem .85rem;
}
.company-billing-requirements__title{
  margin:0 0 .45rem;
  font-weight:700;
  color:#173f62;
}
.company-billing-requirements__list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.35rem .8rem;
  margin:0;
  padding:0;
  list-style:none;
}
.company-billing-requirements__list li{
  display:flex;
  align-items:center;
  gap:.35rem;
  color:#36556f;
  font-size:.92rem;
}
.company-billing-requirements__list .material-icons{
  font-size:1rem;
}
.company-billing-requirements__list .is-complete{
  color:#1f7a3d;
}
.company-billing-requirements__list .is-missing{
  color:#a32223;
}
.contract-billing-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.85rem;
}
.invoice-overview-card{
  border:1px solid #dbe6f5;
  background:linear-gradient(180deg,#fbfdff,#f5f9ff);
  border-radius:14px;
  padding:.8rem .9rem;
  display:grid;
  gap:.7rem;
}
.invoice-overview-table-wrap{
  overflow:auto;
  border:1px solid #d7e5f4;
  border-radius:12px;
  background:#fff;
}
.invoice-overview-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:760px;
}
.invoice-overview-table th,
.invoice-overview-table td{
  padding:.62rem .68rem;
  border-bottom:1px solid #edf2f8;
  text-align:left;
  vertical-align:middle;
}
.invoice-overview-table th{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#36556f;
  background:#f6fafe;
}
.invoice-overview-table tbody tr:last-child td{
  border-bottom:0;
}
.invoice-overview-files{
  display:flex;
  gap:.45rem;
  flex-wrap:wrap;
}
.invoice-overview-file-btn{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  border:1px solid #d0e0f2;
  background:#f8fbff;
  color:#173f62;
  border-radius:999px;
  padding:.26rem .62rem;
  font-size:.82rem;
  font-weight:600;
  cursor:pointer;
  transition:background .12s ease, border-color .12s ease, transform .12s ease;
}
.invoice-overview-file-btn:hover{
  background:#eef6ff;
  border-color:#b8d4ef;
  transform:translateY(-1px);
}
.invoice-overview-file-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
}
@media (max-width: 720px){
  .contract-billing-grid{ grid-template-columns:1fr; }
  .company-plan-options,
  .company-billing-requirements__list{ grid-template-columns:1fr; }
  .token-usage-panel{ grid-template-columns:1fr; }
  .token-usage-pricing{
    border-left:0;
    border-top:1px solid #d0e3f6;
    padding-left:0;
    padding-top:.75rem;
  }
}

/* === Auth modal layout overrides === */
:root {
  --auth-modal-offset-top: 72px;
  --auth-modal-scrollbar-gap: clamp(16px, 2.6vw, 28px);
}

@media (max-width: 640px) {
  :root {
    --auth-modal-scrollbar-gap: 14px;
  }
}

#authModalBackdrop {
  padding-top: var(--auth-modal-offset-top);
  padding-bottom: 0;
  align-items: flex-start !important;
}

.auth-modal {
  border-radius: 24px !important;
  border-top-right-radius: 24px !important;
  border-bottom-right-radius: 24px !important;
  height: var(--auth-modal-available-height, calc(100vh - var(--auth-modal-offset-top)));
  max-height: var(--auth-modal-available-height, calc(100vh - var(--auth-modal-offset-top)));
  min-height: var(--auth-modal-available-height, calc(100vh - var(--auth-modal-offset-top)));
}

.auth-modal > #loginTab,
.auth-modal > #registerTab {
  margin-right: var(--auth-modal-scrollbar-gap);
}


/* ===== Support page styles ===== */
.support-page main {
  max-width: 1100px;
}

.support-page footer {
  max-width: 1100px;
}

.support-page .support-hero {
  border-radius: 0 0 24px 24px;
  overflow: hidden;
  min-height: 360px;
}

.support-page .support-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.7) 45%, rgba(255,255,255,0.92) 100%);
  z-index: 2;
  pointer-events: none;
}

.support-page .support-hero-overlay {
  position: relative;
  z-index: 3;
  color: #0b2542;
  text-shadow: none;
  align-items: center;
  text-align: center;
  padding: 32px 1.5rem 54px;
  max-width: 780px;
}

.support-page .support-hero .hero-textblock {
  margin: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}

.project-toolbar-toggle{
  margin: 12px 0 10px;
  display: flex;
  justify-content: flex-start;
}

.project-toolbar__toggle{
  border: 1px solid #dbe6f3;
  background: linear-gradient(120deg, #f5f8ff 0%, #eef4ff 100%);
  color: #0c3a63;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 8px 20px rgba(10,40,70,.1);
  font-weight: 700;
}
.project-toolbar__toggle .material-icons{
  color: #1a73e8;
}
.project-toolbar__toggle:hover{
  background: #eef4ff;
  border-color: #cbdcf5;
}

#projectToolbar[hidden]{
  display: none !important;
}

.support-page .support-hero-title {
  font-size: 3rem;
  line-height: 1.1;
  margin: 0;
  color: #0c2746;
}

.support-page .support-hero-subtitle {
  font-size: 1.25rem;
  margin: 0;
  color: #1d3c63;
  max-width: 640px;
}

.support-page .support-hero-image {
  filter: brightness(0.9);
}

@media (max-width: 720px) {
  .support-page .support-hero-overlay {
    align-items: center;
    text-align: center;
    padding: 48px 1rem 56px;
  }
  .support-page .support-hero .hero-textblock {
    text-align: center;
  }
  .support-page .support-hero-title {
    font-size: 2.4rem;
  }
  .support-page .support-hero-subtitle {
    max-width: none;
  }
}

.support-page .section-gap-alt {
  min-height: 36px;
}

.support-section-header {
  text-align: center;
  margin-bottom: 2.2rem;
}

.support-section-header h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: #0c2746;
}

.support-section-header p {
  margin: 0 auto;
  max-width: 600px;
  color: #4a5d75;
  font-size: 1.05rem;
}

.support-faq {
  max-width: 960px;
  margin: -72px auto 0;
  position: relative;
  z-index: 4;
}

@media (max-width: 980px) {
  .support-faq {
    margin-top: -52px;
  }
}

@media (max-width: 720px) {
  .support-faq {
    margin-top: -28px;
  }
}

.support-faq-grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.support-faq-card {
  background: #fff;
  border: 1px solid #d9e5f5;
  border-radius: 16px;
  padding: 1.15rem 1.4rem;
  box-shadow: 0 12px 32px rgba(15,35,71,0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.support-faq-card summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  font-weight: 600;
  font-size: 1.05rem;
  color: #0c2746;
  cursor: pointer;
}

.support-faq-card summary::-webkit-details-marker {
  display: none;
}

.support-faq-card summary:focus-visible {
  outline: 3px solid #1f62a6;
  outline-offset: 4px;
}

.support-faq-card .material-icons {
  font-size: 1.6rem;
  color: #1f62a6;
  transition: transform 0.2s ease, color 0.2s ease;
}

.support-faq-card:hover {
  border-color: #aac8f0;
  box-shadow: 0 16px 40px rgba(15,35,71,0.12);
  transform: translateY(-2px);
}

.support-faq-card.open {
  border-color: #7daee6;
  box-shadow: 0 18px 48px rgba(15,35,71,0.18);
}

.support-faq-card.open .material-icons {
  transform: rotate(180deg);
  color: #0a4e94;
}

.support-faq-card .faq-answer {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid #e5effc;
  color: #435672;
  font-size: 0.97rem;
  line-height: 1.6;
}

.support-faq-card .faq-answer a {
  color: #0a66c2;
  font-weight: 600;
  text-decoration: none;
}

.support-faq-card .faq-answer a:hover {
  text-decoration: underline;
}

.support-faq-footer {
  margin-top: 2rem;
  text-align: center;
  font-weight: 600;
  color: #124172;
}

.support-faq-footer a {
  color: #0a66c2;
  text-decoration: none;
}

.support-faq-footer a:hover {
  text-decoration: underline;
}

.support-feature-request {
  max-width: 960px;
  margin: 0 auto 4rem;
  position: relative;
  z-index: 2;
}

.feature-wish-card {
  position: relative;
  border-radius: 18px;
  padding: 2.6rem 2.9rem 2.5rem;
  background: linear-gradient(135deg, #fffaf3 0%, #fff4e4 100%);
  border: 1px dashed rgba(235, 195, 134, 0.7);
  box-shadow: 0 20px 54px rgba(15, 35, 71, 0.1);
  overflow: hidden;
}

.feature-wish-card::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 24px;
  right: 24px;
  height: 12px;
  background: rgba(255, 219, 184, 0.65);
  border-radius: 999px;
  filter: blur(0.5px);
  pointer-events: none;
}

.feature-wish-header {
  text-align: center;
  margin-bottom: 2rem;
}

.feature-wish-header h2 {
  font-size: 2rem;
  margin-bottom: 0.55rem;
  color: #0c2746;
}

.feature-wish-header p {
  margin: 0 auto;
  max-width: 600px;
  color: #40556f;
  font-size: 1.05rem;
}

.feature-wish-form {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.feature-wish-inline {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
}

.feature-wish-field {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.feature-wish-field label {
  font-weight: 600;
  font-size: 0.98rem;
  color: #0d1f36;
}

.feature-wish-field input,
.feature-wish-field textarea {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(235, 180, 118, 0.55);
  background: rgba(255, 255, 255, 0.92);
  padding: 0.9rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #1d3c63;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.feature-wish-field textarea {
  min-height: 180px;
  padding: 1rem 1.1rem 1.3rem;
  background-image: repeating-linear-gradient(
    rgba(244, 225, 200, 0.35) 0,
    rgba(244, 225, 200, 0.35) 1px,
    transparent 1px,
    transparent 34px
  );
  background-size: 100% 35px;
  background-origin: border-box;
  resize: vertical;
}

.feature-wish-field input:focus,
.feature-wish-field textarea:focus {
  outline: none;
  border-color: rgba(232, 146, 68, 0.8);
  box-shadow: 0 0 0 4px rgba(232, 146, 68, 0.18);
}

.feature-wish-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.6rem;
}

.feature-wish-actions button {
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #f97316, #fbbf24);
  color: #09203f;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.85rem 2.6rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 12px 24px rgba(249, 115, 22, 0.3);
}

.feature-wish-actions button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(249, 115, 22, 0.35);
}

.feature-wish-actions button:disabled {
  opacity: 0.65;
  cursor: progress;
  box-shadow: none;
}

.feature-wish-hint {
  margin: 0;
  font-size: 0.95rem;
  color: #4b5f76;
}

.feature-wish-status {
  min-height: 1.2rem;
  font-size: 0.96rem;
  font-weight: 500;
  color: #274b75;
  transition: color 0.2s ease;
}

.feature-wish-status[data-state="success"] {
  color: #1c7c54;
}

.feature-wish-status[data-state="error"] {
  color: #b3261e;
}

/* Kontakt-Seite */
.contact-page main {
  background: var(--bg);
  padding: clamp(2.5rem, 5vw, 4rem) 1.25rem 4rem;
}

@media (min-width: 960px) {
  .contact-page main {
    padding-left: 0;
    padding-right: 0;
  }
}

.contact-page .contact-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.1rem;
  max-width: 720px;
  margin: 0 auto clamp(1.4rem, 4vw, 3rem);
}

.contact-page .contact-hero-logo {
  width: 198px;
  max-width: 90vw;
  height: auto;
}

.contact-page .contact-hero h1 {
  font-size: clamp(2rem, 5vw, 2.6rem);
  margin: 0;
  color: var(--brand-ink);
}

.contact-page .contact-hero-subtitle {
  margin: 0;
  font-size: clamp(1.15rem, 3.6vw, 1.35rem);
  color: var(--muted);
}

.contact-page .contact-form-section {
  display: flex;
  justify-content: center;
  padding: 0 1.25rem;
}

@media (min-width: 960px) {
  .contact-page .contact-form-section {
    padding: 0;
  }
}

.contact-page .contact-card {
  width: 100%;
  max-width: 720px;
  border-radius: var(--radius);
  border: 1px solid rgba(21, 93, 151, 0.16);
  background: linear-gradient(180deg, #ffffff 0%, #f9fcff 100%);
  box-shadow: 0 18px 46px rgba(13, 40, 72, 0.12);
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 4vw, 2.75rem);
}

.contact-page .contact-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, #0b6db3 0%, #13c7d7 100%);
}

.contact-page .contact-card-header h2 {
  margin: 0.05rem 0 0.55rem;
  font-size: clamp(1.7rem, 3.6vw, 2.05rem);
  color: var(--brand-ink);
  letter-spacing: -0.01em;
}

.contact-page .contact-card-kicker {
  display: inline-flex;
  margin: 0;
  padding: 0.33rem 0.86rem;
  border-radius: 999px;
  background: rgba(11, 108, 179, 0.08);
  color: var(--brand);
  font-size: 0.81rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.contact-page .contact-card-description {
  margin: 0;
  color: var(--muted);
  font-size: 1.01rem;
  line-height: 1.55;
  max-width: 54ch;
}

.contact-page .contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

.contact-page .contact-form-row {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .contact-page .contact-form-row {
    flex-direction: row;
  }
}

.contact-page .contact-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1 1 auto;
}

.contact-page .contact-form-field label {
  font-weight: 600;
  color: var(--brand-ink);
  font-size: 0.98rem;
}

.contact-page .contact-form-field input,
.contact-page .contact-form-field select,
.contact-page .contact-form-field textarea {
  font-size: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(21, 102, 160, 0.27);
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  min-height: 50px;
  box-shadow: inset 0 1px 2px rgba(12, 41, 79, 0.08);
}

.contact-page .contact-form-field input:focus,
.contact-page .contact-form-field select:focus,
.contact-page .contact-form-field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(23, 81, 137, 0.18);
  transform: translateY(-1px);
}

.contact-page .contact-form-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--brand-ink) 50%), linear-gradient(135deg, transparent 50%, var(--brand-ink) 50%);
  background-position: calc(100% - 24px) calc(50% - 3px), calc(100% - 19px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
  cursor: pointer;
}

.contact-page #contact-message {
  min-height: 180px;
  resize: vertical;
}

.contact-page .contact-form-actions {
  display: flex;
  justify-content: flex-end;
}

.contact-page .contact-form-actions button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.95rem 2.4rem;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #1f75bf 0%, #0ea9d5 100%);
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 10px 26px rgba(16, 52, 94, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.2s ease;
}

.contact-page .contact-form-actions button:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 14px 32px rgba(16, 52, 94, 0.22);
}

.contact-page .contact-form-actions button:active {
  transform: translateY(0);
  box-shadow: 0 10px 24px rgba(16, 52, 94, 0.18);
}

.contact-page .contact-status {
  min-height: 1.2rem;
  margin: -0.5rem 0 0;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.2s ease;
}

.contact-page .contact-status[data-state="success"] {
  color: #1c7c54;
}

.contact-page .contact-status[data-state="error"] {
  color: #b3261e;
}

.contact-page .contact-disclaimer {
  margin: 2rem 0 0;
  color: var(--muted);
  font-size: 0.98rem;
  text-align: center;
}

@media (max-width: 520px) {
  .contact-page .contact-card {
    padding: 1.75rem 1.4rem;
  }

  .contact-page .contact-form-actions {
    justify-content: stretch;
  }

  .contact-page .contact-form-actions button {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 860px) {
  .feature-wish-card {
    padding: 2.2rem 2rem 2.1rem;
  }
  .feature-wish-inline {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .feature-wish-card {
    padding: 2rem 1.5rem 1.9rem;
  }
  .feature-wish-header h2 {
    font-size: 1.75rem;
  }
  .feature-wish-header p {
    font-size: 1rem;
  }
}

.support-guides {
    max-width: 1080px;
    margin: 0 auto 4rem;
  }
  
.support-guides h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: #0c2746;
  }
  
.support-guides-content {
    color: #415872;
  }
  
.support-guides-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.6rem;
  }
  
.support-guide-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, #f5f8ff 100%);
    border: 1px solid rgba(209, 223, 249, 0.9);
    border-radius: 24px;
    padding: 1.9rem;
    box-shadow: 0 22px 50px rgba(15, 33, 61, 0.12);
    display: flex;
    flex-direction: column;
    height: 100%;
    z-index: 0;
  }
  
.support-guide-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 10% 0%, rgba(63, 123, 255, 0.18), rgba(255, 255, 255, 0));
    z-index: -1;
  }
  
.support-guide-card__header {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 0.5rem;
  }
  
.support-guide-card__header h3 {
    margin: 0 0 0.65rem;
    color: #114084;
    font-size: 1.2rem;
  }
  
.support-guide-card__header p {
    margin: 0;
    color: #4c5f78;
  }
  
.support-guide-section {
    margin-top: 1.5rem;
    padding-top: 1.2rem;
    border-top: 1px solid #e3ecfa;
  }
  
.support-guide-section:first-of-type {
    margin-top: 1.2rem;
  }
  
.support-guide-section h4 {
    margin: 0 0 0.85rem;
    font-size: 0.98rem;
    letter-spacing: 0.01em;
    text-transform: none;
    color: #0f305f;
  }
  
  .guide-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }
  
.guide-list li {
    position: relative;
    padding: 0.85rem 1rem 0.85rem 2.85rem;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(237, 244, 255, 0.9), rgba(247, 250, 255, 0.9));
    border: 1px solid #e3ecfa;
    box-shadow: 0 10px 24px rgba(15, 33, 61, 0.08);
    line-height: 1.5;
  }
  
.guide-list li::before {
    content: "";
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #3f7bff, #14c5c4);
    position: absolute;
    left: 1.2rem;
    top: 1.15rem;
    box-shadow: 0 4px 10px rgba(63, 123, 255, 0.35);
  }
  
.guide-list li strong {
    color: #0f305f;
    display: inline-block;
    margin-bottom: 0.1rem;
  }
  
.guide-list li em {
    font-style: normal;
    color: #0f305f;
  }
  
  @media (max-width: 600px) {
    .support-faq-grid {
      grid-template-columns: 1fr;
    }
  .support-guides-grid {
      grid-template-columns: 1fr;
    }
  .support-guide-card {
      padding: 1.4rem;
    }
  }


/* Header layout refresh */
.site-header {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: clamp(0.4rem, 1vw, 1rem);
}

body:is(.page-home, .page-leistungen, .preise-page, .page-ueber-uns, .support-page, .contact-page, .datenschutz-page, .legal-shell, .avv-page) .site-header,
body:is(.page-home, .page-leistungen, .preise-page, .page-ueber-uns, .support-page, .contact-page, .datenschutz-page, .legal-shell, .avv-page) > header.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 3000;
  background: #fff;
  box-shadow: 0 10px 30px rgba(15, 33, 60, 0.08);
}

body:is(.page-home, .page-leistungen, .preise-page, .page-ueber-uns, .support-page, .contact-page, .datenschutz-page, .legal-shell, .avv-page) {
  --va-header-space: clamp(96px, 14vw, 140px);
  padding-top: var(--va-header-space);
}

.site-header .header-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: clamp(1.2rem, 4vw, 2.8rem);
  width: 100%;
}

.site-header .header-left,
.site-header .header-center,
.site-header .header-actions {
  display: flex;
  align-items: center;
  min-width: 0;
}

.site-header .header-left {
  justify-content: flex-start;
  justify-self: start;
}

.site-header .header-center {
  justify-content: center;
  padding: 0 clamp(0.4rem, 2vw, 1.2rem);
  justify-self: center;
  position: static;
  left: auto;
  top: auto;
  transform: none;
}

.site-header .header-actions {
  justify-content: flex-end;
  gap: 0.7rem;
  position: static;
  justify-self: end;
  align-self: center;
  top: auto;
  right: auto;
  left: auto;
  transform: none;
}

.site-header .header-actions > * {
  flex-shrink: 0;
}

.site-header .logo-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: 0;
}

.site-header nav.main-nav {
  width: 100%;
}

.site-header nav.main-nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.4vw, 1.8rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header nav.main-nav a {
  margin: 0;
  white-space: nowrap;
}

body:is(.page-home, .page-leistungen, .preise-page, .page-ueber-uns, .support-page, .contact-page, .datenschutz-page, .legal-shell, .avv-page) .site-header .burger-menu {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid #00b7c4;
  background: linear-gradient(130deg, #00f2ff, #00aab8 72%, #0093a1);
  box-shadow: 0 18px 32px rgba(0, 171, 186, 0.28), 0 2px 10px rgba(6, 28, 61, 0.25);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  transition: transform 0.16s ease, box-shadow 0.18s ease;
}

body:is(.page-home, .page-leistungen, .preise-page, .page-ueber-uns, .support-page, .contact-page, .datenschutz-page, .legal-shell, .avv-page) .site-header .burger-menu span {
  display: block;
  width: 20px;
  height: 2.4px;
  border-radius: 3px;
  background: #042033;
}

body:is(.page-home, .page-leistungen, .preise-page, .page-ueber-uns, .support-page, .contact-page, .datenschutz-page, .legal-shell, .avv-page) .site-header .burger-menu:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 38px rgba(0, 171, 186, 0.34), 0 4px 12px rgba(6, 28, 61, 0.22);
}

body:is(.page-home, .page-leistungen, .preise-page, .page-ueber-uns, .support-page, .contact-page, .datenschutz-page, .legal-shell, .avv-page) .site-header .burger-menu:active {
  transform: translateY(0);
  box-shadow: 0 12px 22px rgba(0, 171, 186, 0.28), 0 2px 8px rgba(6, 28, 61, 0.2);
}

.site-header .breadcrumb-in-header {
  position: static;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin: 0;
  flex-wrap: wrap;
  text-align: center;
  font-size: 0.95rem;
  color: #40608a;
}

.site-header .breadcrumb-in-header a {
  color: inherit;
  text-decoration: none;
}

.site-header .breadcrumb-in-header .breadcrumb-sep {
  color: rgba(64, 96, 138, 0.65);
}

.site-header .breadcrumb-in-header .breadcrumb-current {
  font-weight: 600;
}

@media (max-width: 980px) {
  .site-header nav.main-nav {
    display: block;
  }

  .site-header nav.main-nav ul {
    gap: clamp(0.8rem, 3vw, 1.2rem);
  }

  body:is(.page-home, .page-leistungen, .preise-page, .page-ueber-uns, .support-page, .contact-page, .datenschutz-page, .legal-shell, .avv-page) .site-header nav.main-nav {
    display: none;
  }

  body:is(.page-home, .page-leistungen, .preise-page, .page-ueber-uns, .support-page, .contact-page, .datenschutz-page, .legal-shell, .avv-page) .site-header .burger-menu {
    display: inline-flex;
  }

  body:is(.page-home, .page-leistungen, .preise-page, .page-ueber-uns, .support-page, .contact-page, .datenschutz-page, .legal-shell, .avv-page) .site-header .header-top {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    justify-items: center;
  }

  body:is(.page-home, .page-leistungen, .preise-page, .page-ueber-uns, .support-page, .contact-page, .datenschutz-page, .legal-shell, .avv-page) .site-header .header-left {
    justify-content: flex-start;
    gap: 0.75rem;
  }

  body:is(.page-home, .page-leistungen, .preise-page, .page-ueber-uns, .support-page, .contact-page, .datenschutz-page, .legal-shell, .avv-page) .site-header .header-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 900px) {
  .site-header .header-top {
    grid-template-columns: 1fr;
    row-gap: 0.65rem;
    justify-items: center;
  }

  .site-header .header-left,
  .site-header .header-center,
  .site-header .header-actions {
    justify-content: center;
  }

  .site-header .header-actions {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .site-header {
    gap: 0.5rem;
  }

  .site-header nav.main-nav ul {
    gap: 0.75rem;
  }
}

@media (max-width: 640px) {
  body:is(.page-home, .page-leistungen, .preise-page, .page-ueber-uns, .support-page, .contact-page, .datenschutz-page, .legal-shell, .avv-page) .site-header .burger-menu {
    width: 38px;
    height: 38px;
    gap: 4px;
  }

  body:is(.page-home, .page-leistungen, .preise-page, .page-ueber-uns, .support-page, .contact-page, .datenschutz-page, .legal-shell, .avv-page) .site-header .burger-menu span {
    width: 18px;
  }
}

body:is(.page-home, .page-leistungen, .preise-page, .page-ueber-uns, .support-page, .contact-page, .datenschutz-page, .legal-shell, .avv-page) #sidebarMenu {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(320px, 84vw);
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: var(--va-header-space) clamp(18px, 4.2vw, 26px) clamp(22px, 4.8vw, 30px);
  background: linear-gradient(170deg, #0a1f33 0%, #0a2f45 42%, #081a2d 100%);
  color: #e7f6ff;
  box-shadow: 0 24px 60px rgba(5, 21, 41, 0.45), 0 4px 18px rgba(0, 0, 0, 0.28);
  border-right: 1px solid rgba(0, 171, 186, 0.25);
  border-radius: 0 18px 18px 0;
  transform: translateX(-12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 3600;
  transition: transform 0.22s ease, opacity 0.18s ease, visibility 0s linear 0.22s;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.page-home #sidebarMenu {
  padding-top: calc(var(--va-header-space) + clamp(6px, 2vw, 14px));
}

body:is(.page-home, .page-leistungen, .preise-page, .page-ueber-uns, .support-page, .contact-page, .datenschutz-page, .legal-shell, .avv-page) #sidebarMenu::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 18% 10%, rgba(0, 242, 255, 0.25), transparent 32%),
              radial-gradient(circle at 70% 20%, rgba(0, 171, 186, 0.2), transparent 38%);
  pointer-events: none;
  mix-blend-mode: screen;
}

body:is(.page-home, .page-leistungen, .preise-page, .page-ueber-uns, .support-page, .contact-page, .datenschutz-page, .legal-shell, .avv-page) #sidebarMenu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition-delay: 0s;
}

body:is(.page-home, .page-leistungen, .preise-page, .page-ueber-uns, .support-page, .contact-page, .datenschutz-page, .legal-shell, .avv-page) #sidebarMenu .sidebar-close-btn {
  position: absolute;
  top: clamp(10px, 3vw, 16px);
  right: clamp(10px, 3vw, 16px);
  background: rgba(255, 255, 255, 0.08);
  color: #e7f6ff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 1.6em;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
  transition: transform 0.16s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}

body:is(.page-home, .page-leistungen, .preise-page, .page-ueber-uns, .support-page, .contact-page, .datenschutz-page, .legal-shell, .avv-page) #sidebarMenu .sidebar-close-btn:hover {
  background: rgba(0, 171, 186, 0.18);
  box-shadow: 0 18px 38px rgba(0, 171, 186, 0.32);
  color: #ffffff;
  transform: translateY(-1px);
}

body:is(.page-home, .page-leistungen, .preise-page, .page-ueber-uns, .support-page, .contact-page, .datenschutz-page, .legal-shell, .avv-page) #sidebarMenu .sidebar-close-btn:active {
  transform: translateY(0);
  box-shadow: 0 10px 22px rgba(0, 171, 186, 0.28);
}

body:is(.page-home, .page-leistungen, .preise-page, .page-ueber-uns, .support-page, .contact-page, .datenschutz-page, .legal-shell, .avv-page) #sidebarMenu a {
  position: relative;
  color: #e7f6ff;
  text-decoration: none;
  padding: 0.95em 1.05em;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: 14px;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.14s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

body:is(.page-home, .page-leistungen, .preise-page, .page-ueber-uns, .support-page, .contact-page, .datenschutz-page, .legal-shell, .avv-page) #sidebarMenu a:hover {
  background: linear-gradient(130deg, rgba(0, 242, 255, 0.16), rgba(0, 170, 184, 0.18));
  border-color: rgba(0, 171, 186, 0.55);
  box-shadow: 0 18px 38px rgba(0, 171, 186, 0.26);
  transform: translateY(-1px);
  color: #ffffff;
}

body:is(.page-home, .page-leistungen, .preise-page, .page-ueber-uns, .support-page, .contact-page, .datenschutz-page, .legal-shell, .avv-page) #sidebarMenu a:active {
  transform: translateY(0);
}

body:is(.page-home, .page-leistungen, .preise-page, .page-ueber-uns, .support-page, .contact-page, .datenschutz-page, .legal-shell, .avv-page) #sidebarMenu .sidebar-legal a {
  color: #d9ecff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(130deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
}

body:is(.page-home, .page-leistungen, .preise-page, .page-ueber-uns, .support-page, .contact-page, .datenschutz-page, .legal-shell, .avv-page) #sidebarMenu .sidebar-legal a:hover {
  background: linear-gradient(130deg, rgba(0, 242, 255, 0.16), rgba(0, 170, 184, 0.18));
  color: #ffffff;
}

body:is(.page-home, .page-leistungen, .preise-page, .page-ueber-uns, .support-page, .contact-page, .datenschutz-page, .legal-shell, .avv-page) #sidebarMenu .legal-sym {
  border-color: rgba(255, 255, 255, 0.18);
  color: #d9ecff;
}

body:is(.page-home, .page-leistungen, .preise-page, .page-ueber-uns, .support-page, .contact-page, .datenschutz-page, .legal-shell, .avv-page) .sidebar-overlay {
  display: block;
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 12% 10%, rgba(0, 242, 255, 0.22), transparent 30%),
              rgba(4, 10, 24, 0.72);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
  z-index: 3500;
}

body:is(.page-home, .page-leistungen, .preise-page, .page-ueber-uns, .support-page, .contact-page, .datenschutz-page, .legal-shell, .avv-page) .sidebar-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 720px) {
  body:is(.page-home, .page-leistungen, .preise-page, .page-ueber-uns, .support-page, .contact-page, .datenschutz-page, .legal-shell, .avv-page) #sidebarMenu {
    width: min(360px, 90vw);
    padding: var(--va-header-space) clamp(16px, 5vw, 22px) clamp(18px, 4.8vw, 26px);
  }
}

@media (max-width: 520px) {
  body:is(.page-home, .page-leistungen, .preise-page, .page-ueber-uns, .support-page, .contact-page, .datenschutz-page, .legal-shell, .avv-page) #sidebarMenu {
    width: min(360px, 94vw);
    border-radius: 0 14px 14px 0;
  }
}

.page-ueber-uns {
  background: #f4f8fb;
  color: #0f213c;
}
.page-ueber-uns main {
  background: transparent;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.page-ueber-uns .hero-about {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 7vw, 6rem) 0;
  background: radial-gradient(circle at 78% 12%, rgba(31, 179, 198, 0.2), transparent 52%), linear-gradient(180deg, #f7fbff 0%, #eef4fb 100%);
}
.page-ueber-uns .hero-about__inner {
  width: 100%;
  max-width: min(1180px, 96vw);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.6rem);
  display: grid;
  grid-template-columns: minmax(min(320px, 100%), 1fr);
  gap: clamp(1.6rem, 5vw, 3.6rem);
  align-items: center;
  justify-content: center;
}
.page-ueber-uns .hero-about__card {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  padding: clamp(2.8rem, 6vw, 4.4rem) clamp(2.3rem, 6vw, 4rem);
  background:
    radial-gradient(circle at 14% 18%, rgba(23, 205, 211, 0.28), transparent 40%),
    radial-gradient(circle at 82% 8%, rgba(0, 186, 232, 0.32), transparent 42%),
    linear-gradient(135deg, #03162a 0%, #06365e 46%, #0cb5c7 100%);
  box-shadow: 0 32px 80px rgba(4, 16, 46, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  isolation: isolate;
}
.page-ueber-uns .hero-about__card::before,
.page-ueber-uns .hero-about__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 65%, rgba(0, 255, 240, 0.12), transparent 45%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05), transparent 70%);
  mix-blend-mode: screen;
  opacity: 0.7;
  animation: heroAboutGlow 16s ease-in-out infinite alternate;
  z-index: 0;
}
.page-ueber-uns .hero-about__card::after {
  background:
    radial-gradient(circle at 78% 22%, rgba(0, 173, 255, 0.18), transparent 48%),
    linear-gradient(310deg, rgba(0, 245, 214, 0.08), transparent 62%);
  opacity: 0.6;
  animation-direction: alternate-reverse;
}
@keyframes heroAboutGlow {
  0% {
    transform: translate3d(-14px, 6px, 0) scale(1);
  }
  100% {
    transform: translate3d(12px, -10px, 0) scale(1.04);
  }
}
.page-ueber-uns .hero-about__content {
  display: flex;
  flex-direction: column;
  gap: clamp(0.85rem, 2vw, 1.35rem);
  align-items: center;
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  color: #e8f6ff;
}
.page-ueber-uns .hero-about__brand-wrap {
  background: #ffffff;
  border: 1px solid rgba(3, 22, 42, 0.08);
  border-radius: 18px;
  padding: 0.7rem 1.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(4px);
}
.page-ueber-uns .hero-about__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 0.82rem;
  font-weight: 700;
  margin: 0;
  color: #7ee8f5;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 0.35rem 1.15rem;
}
.page-ueber-uns .hero-about h1 {
  font-size: clamp(2rem, 4.8vw, 2.7rem);
  margin: 0;
  color: #ffffff;
  text-shadow: 0 10px 36px rgba(0, 0, 0, 0.32);
}
.page-ueber-uns .hero-about__title {
  white-space: normal;
  line-height: 1.18;
}
.page-ueber-uns .hero-about__brand {
  width: clamp(150px, 18vw, 210px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.25));
}
.page-ueber-uns .hero-about__vision {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: center;
  width: 100%;
  max-width: 620px;
}
.page-ueber-uns .hero-about__glass {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 16px;
  padding: clamp(0.9rem, 2vw, 1.2rem) clamp(1.1rem, 2vw, 1.6rem);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(10px);
}
.page-ueber-uns .hero-about__label {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: #a8f4ff;
  text-transform: uppercase;
  margin: 0;
}
.page-ueber-uns .hero-about__vision-text {
  margin: 0;
  font-size: 1.15rem;
  color: #e6f8ff;
  font-weight: 500;
}
.page-ueber-uns .hero-about__lead {
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  margin: 0;
  line-height: 1.35;
  color: #0b1f37;
  font-weight: 600;
}
.page-ueber-uns .hero-about__text {
  margin: 0;
  color: #d5e8fa;
  line-height: 1.5;
  font-size: 1.05rem;
}
.page-ueber-uns .hero-about__pills {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}
.page-ueber-uns .hero-about__pills li {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
  font-weight: 600;
  font-size: 0.94rem;
  color: #e9fbff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}
.page-ueber-uns .hero-about__content .register-form {
  width: 100%;
  max-width: 680px;
}
.page-ueber-uns .hero-about__card .register-form--tight {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24);
}
.page-ueber-uns .hero-about__card .register-form--tight input[type="email"] {
  color: #0f213c;
}
.page-ueber-uns .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.26em;
  font-size: 0.82rem;
  font-weight: 700;
  margin: 0;
  color: #00a2c7;
}
.page-ueber-uns .section-gap-alt {
  width: 100%;
  height: 48px;
  background: #ecf2fb;
}
.page-ueber-uns .section-inner {
  width: 100%;
  max-width: min(1120px, 92vw);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 3rem);
  box-sizing: border-box;
}
.page-ueber-uns .section-intro {
  text-align: center;
  max-width: 820px;
  margin: 0 auto clamp(2.4rem, 6vw, 3.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.page-ueber-uns .section-intro h2 {
  font-size: clamp(2rem, 4vw, 2.9rem);
  margin: 0;
  color: #051b32;
}
.page-ueber-uns .section-intro .lead {
  margin: 0;
  font-size: 1.1rem;
  color: #123660;
  line-height: 1.55;
}
.page-ueber-uns .about-vision {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: #ffffff;
}
.page-ueber-uns .vision-grid,
.page-ueber-uns .module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.6rem);
}
.page-ueber-uns .vision-card,
.page-ueber-uns .module-card {
  background: #ffffff;
  border-radius: 20px;
  padding: clamp(1.6rem, 3vw, 2.3rem);
  box-shadow: 0 25px 50px rgba(5, 23, 53, 0.08);
  border: 1px solid rgba(6, 36, 74, 0.08);
  text-align: left;
}
.page-ueber-uns .vision-card h3,
.page-ueber-uns .module-card h3 {
  margin: 0 0 0.7rem;
  font-size: 1.25rem;
  color: #092b4f;
}
.page-ueber-uns .vision-card p,
.page-ueber-uns .module-card p {
  margin: 0;
  color: #1a3456;
  line-height: 1.5;
}
.page-ueber-uns .mission-modules {
  padding: clamp(3.2rem, 6vw, 5.6rem) 0;
  background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
}
.page-ueber-uns .mission-modules .section-intro h2 {
  font-size: clamp(2.4rem, 5vw, 3.2rem);
}
.page-ueber-uns .module-points {
  padding-left: 1.2rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  color: #173552;
  line-height: 1.5;
}
.page-ueber-uns .module-points li {
  list-style: disc;
}
.page-ueber-uns .module-grid {
  text-align: center;
}
.page-ueber-uns .module-card {
  position: relative;
  overflow: hidden;
  padding-top: clamp(2.2rem, 4vw, 2.8rem);
  padding-bottom: clamp(1.8rem, 3vw, 2.3rem);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), #f7fbff);
  box-shadow: 0 25px 60px rgba(4, 31, 63, 0.12);
  border: 1px solid rgba(6, 36, 74, 0.08);
}
.page-ueber-uns .module-card__icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(16, 192, 209, 0.12);
  color: #10c0d1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  margin-bottom: 1rem;
}
.page-ueber-uns .module-card h3 {
  margin-top: 0;
}
.page-ueber-uns .about-proof {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: #f2f6fb;
}
.page-ueber-uns .about-proof__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.6rem, 4vw, 3rem);
}
.page-ueber-uns .impact-card,
.page-ueber-uns .quote-card {
  background: #ffffff;
  border-radius: 22px;
  padding: clamp(1.8rem, 3vw, 2.6rem);
  box-shadow: 0 18px 40px rgba(4, 27, 50, 0.08);
  border: 1px solid rgba(8, 27, 60, 0.08);
}
.page-ueber-uns .impact-list {
  margin: 1.5rem 0 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  color: #152c47;
}
.page-ueber-uns .impact-list li {
  line-height: 1.5;
}
.page-ueber-uns .quote-card {
  position: relative;
}
.page-ueber-uns .quote-card--profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1.4rem;
}
.page-ueber-uns .quote-card__person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.95rem;
  text-align: center;
}
.page-ueber-uns .quote-card__avatar {
  width: clamp(176px, 18vw, 196px);
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  object-fit: cover;
  object-position: center;
  font-size: 0;
  color: transparent;
  border: 3px solid rgba(85, 196, 105, 0.72);
  background: #ffffff;
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.08),
    0 18px 34px rgba(0, 0, 0, 0.28);
}
.page-ueber-uns .quote-card__meta {
  margin: 0;
}
.page-ueber-uns .quote-card blockquote {
  margin: 0;
  padding-left: 1.4rem;
  border-left: 4px solid #19a5c7;
  color: #0e2a45;
  font-size: 1.05rem;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.page-ueber-uns .quote-card--profile blockquote {
  width: 100%;
  padding-left: 0;
  padding-top: 1.25rem;
  border-left: 0;
  border-top: 4px solid #19a5c7;
}
.page-ueber-uns .quote-card figcaption {
  margin-top: 1.4rem;
  font-size: 0.95rem;
  color: #47607e;
}
.page-ueber-uns .quote-card cite {
  font-style: normal;
  font-weight: 600;
  color: #0a4b70;
}
.page-ueber-uns .quote-card--profile .quote-card__meta {
  margin-top: 0;
  font-size: 0.95rem;
  color: #47607e;
}
@media (max-width: 720px) {
  .page-ueber-uns .quote-card--profile {
    text-align: center;
  }
  .page-ueber-uns .quote-card--profile blockquote {
    text-align: left;
  }
  .page-ueber-uns .quote-card--profile .quote-card__meta {
    margin-top: 0;
  }
}
.page-ueber-uns .about-cta {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(3.5rem, 7vw, 6rem);
  background: transparent;
}
.page-ueber-uns .about-cta__surface {
  width: 100%;
  max-width: min(1120px, 94vw);
  margin: 0 auto;
  padding: clamp(0.4rem, 2vw, 1.5rem);
  background: radial-gradient(circle at 10% 20%, rgba(0, 158, 225, 0.18), transparent 55%), #04182b;
  border-radius: 32px;
  box-shadow: 0 30px 60px rgba(2, 14, 30, 0.35);
  position: relative;
  overflow: hidden;
}
.page-ueber-uns .about-cta__surface .section-inner {
  padding-top: clamp(2rem, 5vw, 3rem);
  padding-bottom: clamp(2rem, 5vw, 3rem);
}
.page-ueber-uns .about-cta__card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  padding: clamp(2rem, 5vw, 3.4rem);
  backdrop-filter: blur(6px);
  color: #e6f5ff;
}
.page-ueber-uns .about-cta__content h2 {
  color: #ffffff;
  margin-top: 0.4rem;
}
.page-ueber-uns .about-cta .eyebrow {
  color: #7beaff;
}
.page-ueber-uns .about-cta .lead {
  color: #c8e7ff;
}
.page-ueber-uns .cta-list {
  margin: 1.4rem 0 0;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.page-ueber-uns .cta-list li {
  color: #d6f0ff;
}
.page-ueber-uns .about-cta__actions {
  margin-top: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
.page-ueber-uns .about-cta__actions form {
  flex: 1 1 320px;
}
.page-ueber-uns .about-cta__actions .btn-primary {
  background: #20c7d6;
  color: #042433;
  font-weight: 700;
  padding: 0.85rem 1.4rem;
}
.page-ueber-uns .about-cta__actions .register-form__cta {
  box-shadow: none;
}
.page-ueber-uns .about-cta__actions a.btn {
  text-decoration: none;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.4rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #04182b;
  background: #ffffff;
}
@media (max-width: 720px) {
  .page-ueber-uns .hero-about__inner {
    text-align: center;
  }
  .page-ueber-uns .hero-about__content {
    align-items: center;
  }
  .page-ueber-uns .hero-about__pills {
    justify-content: center;
  }
  .page-ueber-uns .about-cta__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .page-ueber-uns .about-cta__actions a.btn {
    width: 100%;
  }
}
/* === Dashboard (project list + aside cards) overrides === */
body.dashboard-page #dashboard.dashboard-wide{
  max-width: none !important;
  margin: clamp(24px, 4vh, 40px) 0 32px !important;
  padding-left: clamp(2.2rem, 5vw, 5rem) !important;
  padding-right: clamp(2rem, 4.5vw, 4.4rem) !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.dashboard-page .dashboard-main{
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.dashboard-page #dashboard .dashboard-split{
  display: grid !important;
  grid-template-columns: minmax(min(50vw, 760px), 1fr) minmax(320px, 420px) !important;
  gap: clamp(20px, 3vw, 36px) !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
}

body.dashboard-page #dashboard .dashboard-left{
  max-width: min(50vw, 760px) !important;
  width: 100% !important;
  justify-self: start !important;
}

body.dashboard-page #dashboard .dashboard-header #addProjectBtn{
  margin-left: auto !important;
}

body.dashboard-page #dashboard .project-grid{
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

body.dashboard-page #dashboard .dashboard-aside{
  justify-self: stretch !important;
  width: 100% !important;
  max-width: min(420px, 100%) !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: clamp(20px, 2.6vw, 32px) !important;
  padding-top: calc(1.1rem + .2rem) !important;
  margin-right: 0 !important;
}

@media (max-width: 980px){
  body.dashboard-page #dashboard .dashboard-split{
    grid-template-columns: 1fr !important;
  }
  body.dashboard-page #dashboard .dashboard-aside{
    grid-template-columns: 1fr !important;
    max-width: none !important;
    margin-right: 0 !important;
  }
}

body.dashboard-page #dashboard .card-left{
  display: flex !important;
  flex-direction: column !important;
  gap: 0.4rem !important;
}

body.dashboard-page #dashboard .card-left .meta{
  margin-top: auto !important;
}

body.dashboard-page #dashboard .project-card{
  padding: 12px 16px !important;
}

body.dashboard-page #dashboard .project-card .title{
  font-size: clamp(1rem, 1.6vw, 1.18rem) !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: #0b2f55 !important;
}

body.dashboard-page #dashboard .project-card .meta{
  gap: 4px !important;
}

body.dashboard-page #dashboard .project-card .meta .chip{
  padding: .24em .5em !important;
  font-size: .78rem !important;
  border-radius: 18px !important;
}

body.dashboard-page #dashboard .project-card .meta .chip .material-icons{
  font-size: 1em !important;
}

body.dashboard-page #dashboard .aside-card{
  margin: 0 !important;
  min-height: 210px !important;
  padding: 18px 20px !important;
  border-radius: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(0.55rem, 1.4vw, 0.85rem) !important;
  align-items: stretch !important;
}

body.dashboard-page #dashboard .aside-card.has-bg::before,
body.dashboard-page #dashboard .aside-card.has-bg::after{
  z-index: 0 !important;
}

body.dashboard-page #dashboard .aside-card h3{
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #0b2f55 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-size: clamp(1.02rem, 1.6vw, 1.24rem) !important;
  margin: 0 !important;
  order: 3 !important;
  margin-top: auto !important;
  padding-top: clamp(0.6rem, 1.6vw, 1rem) !important;
  align-self: flex-start !important;
}

body.dashboard-page #dashboard .aside-card:hover h3{
  color: #0b2f55 !important;
}

body.dashboard-page #dashboard .aside-card p{
  position: relative !important;
  z-index: 2 !important;
  color: #264760 !important;
  text-shadow: none !important;
  font-size: .92rem !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  text-align: left !important;
  order: 1 !important;
}

body.dashboard-page #dashboard .aside-card .aside-meta{
  position: relative !important;
  z-index: 2 !important;
  color: #264760 !important;
  text-shadow: none !important;
  font-size: .85rem !important;
  display: flex !important;
  align-items: center !important;
  gap: .45rem !important;
  margin-top: clamp(0.45rem, 1.2vw, 0.8rem) !important;
  order: 2 !important;
}

body.dashboard-page #dashboard .aside-card:hover p,
body.dashboard-page #dashboard .aside-card:hover .aside-meta{
  color: #264760 !important;
}

body.dashboard-page #dashboard .badge-soon{
  font-size: .74rem !important;
  padding: .16em .5em !important;
}

body.dashboard-page #dashboard .card-community{
  position: relative !important;
}

body.dashboard-page #dashboard .card-community h3{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.6rem !important;
}

/* ===== Startseite: Hero & Section Refresh ===== */
.page-home .hero-video-bg {
  width: min(1120px, 96vw);
  min-width: 0;
  min-height: clamp(320px, 46vh, 470px);
  margin: clamp(0.6rem, 2vw, 1.2rem) auto 2.2rem;
  padding: clamp(1rem, 2.8vw, 2.4rem);
  border-radius: 32px;
  position: relative;
  overflow: hidden;
  background: #03162a;
  box-shadow: 0 28px 70px rgba(2, 9, 21, 0.45);
}
.page-home .hero-video {
  opacity: 0.4;
  filter: saturate(115%);
  transform: scale(0.92);
}
.hero-video-bg {
  --hero-logo-chip-logo-h: 31.5px;
  --hero-logo-chip-clearance: calc(var(--hero-logo-chip-logo-h) + clamp(0.8rem, 1.8vw, 1.35rem));
}
.hero-logo-chip {
  position: absolute;
  top: clamp(0.4rem, 1.5vw, 1rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(7,25,54,0.12);
  border-radius: 999px;
  padding: clamp(0.1rem, 0.28vw, 0.22rem) clamp(0.45rem, 1.1vw, 0.82rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 15px 32px rgba(10,24,46,0.2);
}
.hero-logo-chip img {
  height: var(--hero-logo-chip-logo-h);
  width: auto;
  display: block;
  transform: none;
  transform-origin: center center;
}
.page-home .hero-overlay.hero-overlay-stack {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  text-align: left;
  margin-top: var(--hero-logo-chip-clearance);
}

body.page-leistungen .leistungen-hero-stage .hero-overlay.hero-overlay-stack,
body.page-ueber-uns .hero-about.hero-video-bg .hero-overlay.hero-overlay-stack,
body.page-ueber-uns .about-cta.hero-video-bg .hero-overlay.hero-overlay-stack {
  margin-top: var(--hero-logo-chip-clearance) !important;
}
.hero-inline-heading {
  color: #ffffff;
  text-align: center;
  font-size: clamp(1.65rem, 4vw, 2rem);
  margin: 0;
  text-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.hero-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.2rem;
}
.hero-module-grid--hero {
  max-width: 640px;
  margin: 0 auto;
  justify-items: stretch;
  margin-top: 0.4rem;
}
.hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.35em;
  font-size: 0.78rem;
  font-weight: 600;
  color: #08b6c8;
  margin-bottom: 1rem;
}
.hero-lead {
  margin-top: 1rem;
  font-size: 1.08rem;
  line-height: 1.6;
  color: #dfefff;
}
.hero-pill-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.hero-pill-list li {
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28);
  padding: 0.35rem 1.1rem;
  font-size: 0.92rem;
  color: #f4fbff;
  background: rgba(255,255,255,0.12);
}
.hero-module-card {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1rem 1.2rem;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(3,13,27,0.75);
  box-shadow: 0 16px 40px rgba(1,11,24,0.45);
  position: relative;
  overflow: hidden;
}
.hero-module-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  border-top: 4px solid rgba(58, 224, 220, 0.85);
  pointer-events: none;
}
.hero-module-card h3 {
  margin: 0 0 0.35rem;
  font-size: 1.08rem;
  color: #fff;
}
.hero-module-card p {
  margin: 0;
  color: #dce8fb;
  font-size: 0.92rem;
  line-height: 1.45;
}
.hero-module-icon {
  font-size: 1.7rem;
  color: #8fd0ff;
}
.hero-modules-note {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  color: #c6defa;
}

.home-eyebrow {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: #0d6efd;
  margin-bottom: 0.4rem;
}
.home-section-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.4rem);
  box-sizing: border-box;
}
.home-section-intro {
  text-align: left;
  max-width: 760px;
  margin: 0 auto 2.6rem auto;
}
.home-section-intro h2 {
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  margin: 0;
  color: #0f2744;
}
.home-lead {
  margin-top: 0.8rem;
  color: #4b5b71;
  font-size: 1.05rem;
  line-height: 1.6;
}
.home-highlights {
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
}
.home-highlights .home-section-intro,
.home-module-strip .home-section-intro {
  text-align: center;
}
.home-highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1rem, 2vw, 1.8rem);
}
.home-highlight-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  padding: 1.5rem;
  box-shadow: 0 18px 48px rgba(15, 34, 58, 0.08);
  text-align: center;
}
.home-highlight-card .material-icons {
  font-size: 1.9rem;
  color: #039fb7;
  background: #d9f7fb;
  border-radius: 16px;
  padding: 0.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.home-highlight-card h3 {
  margin: 1rem 0 0.4rem;
  font-size: 1.15rem;
  color: #102949;
}
.home-highlight-card p {
  margin: 0;
  color: #4b5f75;
}

.home-public-proc {
  padding: clamp(2.6rem, 6vw, 4.4rem) 0;
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
}
.home-public-proc__card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: clamp(1.2rem, 3vw, 1.8rem);
  box-shadow: 0 18px 50px rgba(12, 40, 70, 0.08);
}
.home-public-proc__state {
  color: #4a5f78;
  font-weight: 600;
  text-align: center;
  padding: 1.1rem 0.4rem;
}
.home-public-proc__table-wrap {
  overflow-x: auto;
}
.home-public-proc__table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}
.home-public-proc__table.home-public-proc__table--extended {
  width: max-content;
  min-width: 100%;
}
.home-public-proc--wide {
  --home-public-proc-gutter: clamp(16px, 2vw, 24px);
}
.home-public-proc--wide .home-section-inner,
.market-list.home-public-proc--wide {
  width: 100%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--home-public-proc-gutter);
  padding-right: var(--home-public-proc-gutter);
  box-sizing: border-box;
}
.home-public-proc--wide .home-public-proc__header,
.home-public-proc--wide .home-section-intro {
  text-align: left;
}
.home-public-proc--wide .home-public-proc__header h2,
.home-public-proc--wide .home-section-intro h2 {
  text-align: center;
}
.home-public-proc--wide .home-public-proc__header,
.home-public-proc--wide .home-section-intro,
.home-public-proc--wide .home-public-proc__card {
  width: 100%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

#geplante-beschaffungen.home-public-proc--wide {
  width: auto;
  max-width: none !important;
  margin-left: calc(50% - 50vw + var(--home-public-proc-gutter));
  margin-right: calc(50% - 50vw + var(--home-public-proc-gutter));
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}
#geplante-beschaffungen .home-section-intro {
  max-width: none;
  text-align: center;
}
#geplante-beschaffungen .home-section-intro h2,
#geplante-beschaffungen .home-section-intro .home-lead,
#geplante-beschaffungen .home-public-proc__state {
  text-align: center;
}
#geplante-beschaffungen .home-public-proc__table.home-public-proc__table--extended {
  width: 100%;
  min-width: 100%;
  table-layout: auto;
}
#geplante-beschaffungen .home-public-proc__table.home-public-proc__table--extended th:nth-child(5),
#geplante-beschaffungen .home-public-proc__table.home-public-proc__table--extended td:nth-child(5),
#geplante-beschaffungen .home-public-proc__table.home-public-proc__table--extended th:nth-child(6),
#geplante-beschaffungen .home-public-proc__table.home-public-proc__table--extended td:nth-child(6) {
  width: auto;
  max-width: none;
}
#geplante-beschaffungen .home-public-proc__table.home-public-proc__table--extended th:nth-child(1),
#geplante-beschaffungen .home-public-proc__table.home-public-proc__table--extended td:nth-child(1) {
  width: clamp(190px, 20vw, 300px);
  max-width: clamp(190px, 20vw, 300px);
}
#geplante-beschaffungen .home-public-proc__table.home-public-proc__table--extended th:nth-child(4),
#geplante-beschaffungen .home-public-proc__table.home-public-proc__table--extended td:nth-child(4) {
  min-width: 130px;
}
#geplante-beschaffungen .home-public-proc__table.home-public-proc__table--extended th:nth-child(4) {
  white-space: nowrap;
}
#geplante-beschaffungen .home-public-proc__table th,
#geplante-beschaffungen .home-public-proc__table td {
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}
#geplante-beschaffungen .home-public-proc__table th:nth-child(1),
#geplante-beschaffungen .home-public-proc__table td:nth-child(1) {
  text-align: left !important;
}
#geplante-beschaffungen #planned-proc-body td[style*="text-align"]:not(:first-child) {
  text-align: center !important;
}
#geplante-beschaffungen .home-public-proc__action {
  white-space: nowrap;
}
.home-public-proc__table th,
.home-public-proc__table td {
  padding: 0.9rem 0.8rem;
  text-align: left;
  border-bottom: 1px solid #edf1f6;
  color: #1b2e46;
}
.home-public-proc__table .home-public-proc__cell--deadline {
  white-space: nowrap;
}
.home-public-proc__table.home-public-proc__table--extended th:nth-child(1),
.home-public-proc__table.home-public-proc__table--extended td:nth-child(1) {
  width: clamp(220px, 26vw, 380px);
  max-width: clamp(220px, 26vw, 380px);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.home-public-proc__table.home-public-proc__table--extended th:nth-child(5),
.home-public-proc__table.home-public-proc__table--extended td:nth-child(5) {
  width: clamp(150px, 16vw, 240px);
  max-width: clamp(150px, 16vw, 240px);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.home-public-proc__table.home-public-proc__table--extended th:nth-child(6),
.home-public-proc__table.home-public-proc__table--extended td:nth-child(6) {
  width: 1%;
  white-space: nowrap;
}
.home-public-proc__table th {
  background: #f7f9fc;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #4c5d74;
}
.home-public-proc__table tr:hover {
  background: #f4f8fd;
}
.home-public-proc__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  background: linear-gradient(120deg, #0ec1d2, #14a3dc);
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(14, 163, 204, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
  text-decoration: none;
}
.home-public-proc__action:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(14, 163, 204, 0.32);
}
.home-public-proc__action--icon {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
}
.home-public-proc__action--icon .material-icons {
  font-size: 1.25rem;
  line-height: 1;
}
.market-action-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
}
.home-public-proc__action--secondary {
  background: #ffffff;
  color: #0e5e7a;
  border: 1px solid rgba(14, 163, 204, 0.34);
  box-shadow: none;
}
.home-public-proc__action--secondary:hover {
  box-shadow: 0 10px 22px rgba(14, 163, 204, 0.14);
}
.home-public-proc__meta {
  margin-top: 0.35rem;
  font-size: 0.86rem;
  color: #526072;
  font-weight: 600;
}

/* === Markt-Seite === */
body.markt-page {
  width: 100%;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow-x: hidden;
}
body.markt-page.vendor-shell,
body.markt-page.vendor-profile,
body.markt-page.sidebar-open,
body.markt-page.vendor-sidebar-open {
  margin-left: 0 !important;
  padding-left: 0 !important;
}
main.market-page {
  width: 100vw !important;
  min-width: 100vw;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0 !important;
  box-sizing: border-box;
}
.market-page {
  background: #f3f7ff;
  padding-bottom: 3rem;
}
.market-hero {
  padding: 2.6rem 1.6rem 1.4rem;
  text-align: center;
}
.market-hero__inner {
  max-width: 900px;
  margin: 0 auto;
}
.market-eyebrow {
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: #3f5675;
  margin: 0 0 0.65rem;
  font-weight: 700;
}
.market-hero h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  color: #0d2340;
}
.market-lead {
  margin: 0 auto;
  color: #4a5c72;
  max-width: 760px;
  font-size: 1.05rem;
}
.market-radar {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto 1.8rem;
  padding: 1rem;
  background: #ffffff;
  border: 1px solid #dbe5f1;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(15, 34, 58, 0.06);
  box-sizing: border-box;
}
.market-radar__head,
.market-radar__panel-head,
.market-radar__actions,
.market-radar__form-actions,
.market-radar__notify {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.market-radar__head {
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.market-radar__head h2,
.market-radar__panel-head h3 {
  margin: 0;
  color: #0d2340;
}
.market-radar__head p:not(.market-eyebrow) {
  margin: 0.45rem 0 0;
  max-width: 760px;
  color: #4a5c72;
  line-height: 1.5;
}
.market-radar__panel {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e7eef7;
}
.market-radar__panel[hidden] {
  display: none;
}
.market-radar__panel-toolbar {
  justify-content: flex-end;
  margin-bottom: 0.9rem;
}
.market-radar__btn {
  border: 1px solid #0f766e;
  border-radius: 8px;
  background: #0f766e;
  color: #ffffff;
  min-height: 40px;
  padding: 0.55rem 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-weight: 800;
  cursor: pointer;
}
.market-radar__btn:hover {
  background: #115e59;
  border-color: #115e59;
}
.market-radar__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.market-radar__btn--ghost {
  background: #f8fbff;
  border-color: #cbd8e8;
  color: #15324f;
}
.market-radar__btn--ghost:hover {
  background: #edf5ff;
  border-color: #a8c4e7;
}
.market-radar__btn--danger {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #9f1239;
}
.market-radar__btn--danger:hover {
  background: #ffe4e6;
  border-color: #fda4af;
}
.market-radar__status {
  margin: 0.9rem 0;
  padding: 0.65rem 0.8rem;
  border-radius: 8px;
  background: #f1f5f9;
  color: #334155;
  font-weight: 700;
}
.market-radar__status:empty {
  display: none;
}
.market-radar__status[data-tone="success"] {
  background: #ecfdf5;
  color: #047857;
}
.market-radar__status[data-tone="warning"] {
  background: #fffbeb;
  color: #854d0e;
}
.market-radar__status[data-tone="error"] {
  background: #fff1f2;
  color: #9f1239;
}
.market-radar__refinement {
  margin: 0.9rem 0;
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  background: #f8fbff;
  color: #1e293b;
  padding: 0.85rem;
  display: grid;
  gap: 0.65rem;
}
.market-radar__refinement[hidden] {
  display: none;
}
.market-radar__refinement h3 {
  margin: 0;
  color: #0d2340;
  font-size: 1rem;
}
.market-radar__refinement p {
  margin: 0;
  color: #475569;
  line-height: 1.45;
}
.market-radar__refinement ul {
  margin: 0;
  padding-left: 1.1rem;
  color: #334155;
}
.market-radar__refinement li {
  margin: 0.22rem 0;
  overflow-wrap: anywhere;
}
.market-radar__refinement-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.market-radar__layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.36fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.market-radar__profiles,
.market-radar__form,
.market-radar__matches {
  border: 1px solid #dbe5f1;
  border-radius: 8px;
  background: #fbfdff;
  padding: 1rem;
}
.market-radar__panel-head {
  justify-content: space-between;
  margin-bottom: 0.8rem;
}
.market-radar__panel-head span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0.2rem 0.55rem;
  border-radius: 8px;
  background: #e8f6f4;
  color: #0f766e;
  font-weight: 800;
  font-size: 0.82rem;
}
.market-radar__profile-list,
.market-radar__match-list {
  display: grid;
  gap: 0.65rem;
}
.market-radar__profile-card {
  width: 100%;
  text-align: left;
  border: 1px solid #d8e3f2;
  border-radius: 8px;
  background: #ffffff;
  padding: 0.75rem;
  cursor: pointer;
  color: #10233f;
}
.market-radar__profile-card:hover,
.market-radar__profile-card.is-active {
  border-color: #0f766e;
  box-shadow: 0 10px 22px rgba(15, 118, 110, 0.12);
}
.market-radar__profile-card strong {
  display: block;
  margin-bottom: 0.3rem;
}
.market-radar__profile-card span,
.market-radar__empty {
  color: #5b6b80;
  font-size: 0.9rem;
  line-height: 1.45;
}
.market-radar__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}
.market-radar__field,
.market-radar__inline-field {
  display: grid;
  gap: 0.35rem;
}
.market-radar__field--wide,
.market-radar__form .market-radar__panel-head {
  grid-column: 1 / -1;
}
.market-radar__field label,
.market-radar__inline-field label {
  font-weight: 800;
  color: #20324b;
  font-size: 0.92rem;
}
.market-radar__field input,
.market-radar__field textarea,
.market-radar__inline-field input,
.market-radar__inline-field select,
.market-radar__region-grid select,
.market-radar__select-btn {
  width: 100%;
  border: 1px solid #d8e3f2;
  border-radius: 8px;
  padding: 0.65rem 0.72rem;
  font: inherit;
  background: #ffffff;
  box-sizing: border-box;
}
.market-radar__field textarea {
  resize: vertical;
}
.market-radar__cpv-picker,
.market-radar__buyer-picker {
  display: grid;
  gap: 0.55rem;
  position: relative;
}
.market-radar__cpv-results,
.market-radar__buyer-options {
  border: 1px solid #d8e3f2;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 32px rgba(15, 34, 58, 0.13);
  max-height: 280px;
  overflow: auto;
  padding: 0.35rem;
  z-index: 8;
}
.market-radar__cpv-result,
.market-radar__buyer-option {
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #10233f;
  display: grid;
  gap: 0.15rem;
  padding: 0.58rem 0.65rem;
  text-align: left;
  cursor: pointer;
}
.market-radar__cpv-result:hover,
.market-radar__buyer-option:hover,
.market-radar__buyer-option:focus-within {
  background: #edf5ff;
}
.market-radar__cpv-result strong,
.market-radar__buyer-option strong {
  color: #0d2340;
  font-size: 0.9rem;
}
.market-radar__cpv-result span,
.market-radar__buyer-option span {
  color: #5b6b80;
  font-size: 0.82rem;
}
.market-radar__buyer-option {
  grid-template-columns: auto 1fr;
  align-items: flex-start;
}
.market-radar__buyer-option input {
  margin-top: 0.18rem;
  accent-color: #0f766e;
}
.market-radar__select-btn {
  background: #ffffff;
  color: #15324f;
  cursor: pointer;
  text-align: left;
  font-weight: 700;
}
.market-radar__chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-height: 0;
}
.market-radar__chip-button {
  border: 1px solid #cbd8e8;
  border-radius: 8px;
  background: #f8fafc;
  color: #10233f;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  min-height: 30px;
  padding: 0.24rem 0.5rem;
  font-size: 0.82rem;
  font-weight: 800;
  overflow-wrap: anywhere;
  white-space: normal;
}
.market-radar__chip-button button {
  border: 0;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  display: inline-grid;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  place-items: center;
}
.market-radar__region-grid {
  display: grid;
  grid-template-columns: minmax(100px, 140px) minmax(130px, 160px) minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
}
.market-radar__region-grid textarea {
  min-height: 44px;
}
.market-radar__notify {
  align-items: flex-end;
  border: 1px solid #dbe5f1;
  border-radius: 8px;
  background: #ffffff;
  padding: 0.8rem;
}
.market-radar__check {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 36px;
  font-weight: 700;
  color: #1b2e46;
}
.market-radar__check input {
  accent-color: #0f766e;
}
.market-radar__inline-field {
  min-width: 145px;
}
.market-radar__matches {
  margin-top: 1rem;
}
.market-radar__match-card {
  border: 1px solid #dbe5f1;
  border-radius: 8px;
  background: #ffffff;
  padding: 0.9rem;
  display: grid;
  gap: 0.65rem;
}
.market-radar__match-head {
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: flex-start;
}
.market-radar__match-head h4 {
  margin: 0 0 0.25rem;
  color: #0d2340;
}
.market-radar__match-meta {
  color: #5b6b80;
  font-size: 0.88rem;
}
.radar-score {
  min-width: 58px;
  min-height: 44px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  padding: 0.25rem 0.45rem;
  font-weight: 900;
  background: #f1f5f9;
  color: #334155;
}
.radar-score--excellent {
  background: #dcfce7;
  color: #166534;
}
.radar-score--good {
  background: #e0f2fe;
  color: #075985;
}
.radar-score--medium {
  background: #fef3c7;
  color: #92400e;
}
.radar-score--weak,
.radar-score--excluded {
  background: #ffe4e6;
  color: #9f1239;
}
.market-radar__match-why {
  margin: 0;
  color: #334155;
  line-height: 1.45;
}
.market-radar__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.market-radar__chip,
.radar-inline-match {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 8px;
  border: 1px solid #dbe5f1;
  background: #f8fafc;
  color: #334155;
  padding: 0.22rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 800;
}
.radar-inline-match {
  width: fit-content;
}
.radar-inline-match--excellent {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}
.radar-inline-match--good {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}
.radar-inline-match--medium {
  background: #fffbeb;
  border-color: #fde68a;
  color: #854d0e;
}
.radar-inline-match--excluded {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #9f1239;
}
.market-radar__feedback {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.market-radar__feedback button {
  border: 1px solid #cbd8e8;
  border-radius: 8px;
  background: #ffffff;
  color: #15324f;
  padding: 0.42rem 0.6rem;
  font-weight: 800;
  cursor: pointer;
}
.market-radar__feedback button.is-selected,
.market-radar__feedback button:hover {
  border-color: #0f766e;
  background: #e8f6f4;
  color: #0f766e;
}
@media (max-width: 920px) {
  .market-radar__layout,
  .market-radar__form,
  .market-radar__region-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .market-radar {
    width: calc(100% - 20px);
    padding: 0.85rem;
  }
  .market-radar__head,
  .market-radar__actions,
  .market-radar__btn,
  .market-radar__panel-toolbar {
    width: 100%;
  }
  .market-radar__match-head {
    flex-direction: column;
  }
}
.market-filters {
  max-width: 1100px;
  margin: 0 auto 1.8rem;
  padding: 0 1.6rem;
}
.market-filters__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
  align-items: end;
}
.market-filters .field label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.35rem;
  color: #20324b;
}
.market-filters input,
.market-filters select {
  width: 100%;
  border: 1px solid #d8e3f2;
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
  font-size: 1rem;
  background: #ffffff;
}
.market-result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: rgba(20, 163, 220, 0.12);
  border: 1px solid rgba(20, 163, 220, 0.2);
  color: #0e2b49;
  font-weight: 700;
}
.market-result__label {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #2e4a66;
}
.market-title-cell {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}
.market-title-cell > strong {
  color: #10233f;
  line-height: 1.35;
}
.market-list .market-title-cell {
  align-content: start;
  align-items: start;
  gap: 0.3rem;
  max-height: calc(var(--market-table-row-height) - 0.85rem);
  overflow: hidden;
}
.market-list .market-title-cell > strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.28;
}
.market-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.market-list .market-badge-row {
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
}
.market-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  border: 1px solid #d7e2f0;
  background: #f5f8fc;
  color: #31475f;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}
.market-list .market-badge {
  max-width: 100%;
  min-height: 20px;
  padding: 0.12rem 0.45rem;
  font-size: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.market-badge--source-bkms {
  background: #eef8f5;
  border-color: #b9dfd2;
  color: #0d644f;
}
.market-badge--source-va {
  background: #eef5ff;
  border-color: #bfd5f5;
  color: #174276;
}
.market-badge--updated,
.market-badge--new {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}
.market-badge--deadline-urgent,
.market-badge--deadline-expired {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #9f1239;
}
.market-badge--deadline-soon {
  background: #fffbeb;
  border-color: #fde68a;
  color: #854d0e;
}
.market-badge--relevance-high {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}
.market-badge--relevance-medium {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}
.market-change-note {
  margin: 0;
  color: #5a3b12;
  font-size: 0.84rem;
  line-height: 1.4;
}
.market-list .market-change-note {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.market-cpv-row {
  margin: 0;
  color: #35506a;
  font-size: 0.82rem;
  line-height: 1.35;
}
.market-list .market-cpv-row {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: 0.78rem;
  line-height: 1.25;
}
.market-deadline {
  font-weight: 700;
}
.market-deadline--urgent {
  color: #be123c !important;
}
.market-deadline--active {
  color: #0f766e !important;
}
.market-deadline--expired {
  color: #64748b !important;
}
.home-public-proc__table tr.is-updated-notice {
  background: linear-gradient(90deg, rgba(255, 251, 235, 0.72), rgba(255, 255, 255, 0));
}
.market-list {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.6rem;
}
.market-list.home-public-proc--wide {
  width: min(1720px, calc(100vw - 32px), 100%);
  max-width: calc(100vw - 32px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}
.market-list.home-public-proc--wide .home-public-proc__card {
  width: 100%;
  max-width: 100%;
  padding: clamp(0.35rem, 0.8vw, 0.65rem) 0 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
  overflow: hidden;
}
.market-list .home-public-proc__table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
}
.market-list .home-public-proc__table.home-public-proc__table--extended {
  --market-table-row-height: 96px;
  width: 100%;
  min-width: 960px;
  table-layout: fixed;
}
.market-list .home-public-proc__table.home-public-proc__table--extended th,
.market-list .home-public-proc__table.home-public-proc__table--extended td {
  padding: 0.55rem 0.55rem;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  vertical-align: middle;
}
.market-list .home-public-proc__table.home-public-proc__table--extended tbody tr {
  height: var(--market-table-row-height);
}
.market-list .home-public-proc__table.home-public-proc__table--extended tbody td {
  height: var(--market-table-row-height);
  overflow: hidden;
}
.market-list .home-public-proc__table.home-public-proc__table--extended th:nth-child(1),
.market-list .home-public-proc__table.home-public-proc__table--extended td:nth-child(1) {
  width: 40%;
  max-width: none;
}
.market-list .home-public-proc__table.home-public-proc__table--extended th:nth-child(2),
.market-list .home-public-proc__table.home-public-proc__table--extended td:nth-child(2) {
  width: 11%;
  max-width: none;
}
.market-list .home-public-proc__table.home-public-proc__table--extended th:nth-child(3),
.market-list .home-public-proc__table.home-public-proc__table--extended td:nth-child(3) {
  width: 12%;
}
.market-list .home-public-proc__table.home-public-proc__table--extended th:nth-child(4),
.market-list .home-public-proc__table.home-public-proc__table--extended td:nth-child(4) {
  width: 10%;
}
.market-list .home-public-proc__table.home-public-proc__table--extended th:nth-child(5),
.market-list .home-public-proc__table.home-public-proc__table--extended td:nth-child(5) {
  width: 18%;
  max-width: none;
}
.market-list .home-public-proc__table.home-public-proc__table--extended th:nth-child(6),
.market-list .home-public-proc__table.home-public-proc__table--extended td:nth-child(6) {
  width: 9%;
  white-space: nowrap;
}
.market-list .home-public-proc__table.home-public-proc__table--extended tbody td:nth-child(n+2):nth-child(-n+5) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#geplante-beschaffungen.market-list .home-public-proc__table.home-public-proc__table--extended {
  width: 100%;
  min-width: 960px;
  table-layout: fixed;
}
#geplante-beschaffungen.market-list .home-public-proc__table.home-public-proc__table--extended th:nth-child(1),
#geplante-beschaffungen.market-list .home-public-proc__table.home-public-proc__table--extended td:nth-child(1) {
  width: 40%;
  max-width: none;
}
#geplante-beschaffungen.market-list .home-public-proc__table.home-public-proc__table--extended th:nth-child(2),
#geplante-beschaffungen.market-list .home-public-proc__table.home-public-proc__table--extended td:nth-child(2) {
  width: 11%;
  max-width: none;
}
#geplante-beschaffungen.market-list .home-public-proc__table.home-public-proc__table--extended th:nth-child(3),
#geplante-beschaffungen.market-list .home-public-proc__table.home-public-proc__table--extended td:nth-child(3) {
  width: 12%;
}
#geplante-beschaffungen.market-list .home-public-proc__table.home-public-proc__table--extended th:nth-child(4),
#geplante-beschaffungen.market-list .home-public-proc__table.home-public-proc__table--extended td:nth-child(4) {
  width: 10%;
}
#geplante-beschaffungen.market-list .home-public-proc__table.home-public-proc__table--extended th:nth-child(5),
#geplante-beschaffungen.market-list .home-public-proc__table.home-public-proc__table--extended td:nth-child(5) {
  width: 18%;
  max-width: none;
}
#geplante-beschaffungen.market-list .home-public-proc__table.home-public-proc__table--extended th:nth-child(6),
#geplante-beschaffungen.market-list .home-public-proc__table.home-public-proc__table--extended td:nth-child(6) {
  width: 9%;
  max-width: none;
  white-space: nowrap;
}
#geplante-beschaffungen.market-list .home-public-proc__table.home-public-proc__table--extended tbody td:nth-child(n+2):nth-child(-n+5) {
  white-space: nowrap;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
}
.market-list .home-public-proc__table .home-public-proc__cell--deadline {
  line-height: 1.35;
  white-space: nowrap;
}
.market-list .home-public-proc__action {
  min-width: min(176px, 100%);
  min-height: 42px;
  box-sizing: border-box;
  padding: 0.54rem 0.82rem;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}
.market-list .home-public-proc__action--secondary {
  min-width: min(136px, 100%);
}
.market-list .home-public-proc__action--icon,
.market-list .home-public-proc__action--secondary.home-public-proc__action--icon {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 999px;
  white-space: nowrap;
}
.market-list .market-action-group {
  justify-content: center;
  gap: 0.35rem;
  max-width: 100%;
}
.market-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1rem;
  border-top: 1px solid #e5e7eb;
}
.market-pagination[hidden] {
  display: none !important;
}
.market-pagination__btn {
  min-width: 84px;
  min-height: 38px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #1f3654;
  font-weight: 700;
  cursor: pointer;
}
.market-pagination__btn:hover:not(:disabled) {
  border-color: #0e9fc4;
  color: #0d607b;
}
.market-pagination__btn:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}
.market-pagination__info {
  min-width: 120px;
  color: #334155;
  font-weight: 700;
  text-align: center;
}

.home-public-proc-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(5rem, 12vh, 7rem) 1.5rem 1.5rem;
}
.home-public-proc-modal[hidden] {
  display: none !important;
}
.home-public-proc-modal[aria-hidden="false"] {
  display: flex;
}
.home-public-proc-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(5, 12, 24, 0.62);
  backdrop-filter: blur(4px);
}
.home-public-proc-modal__dialog {
  position: relative;
  width: min(960px, 94vw);
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  background: linear-gradient(135deg, #f7fbff 0%, #f2f7ff 55%, #ffffff 100%);
  border: 1px solid rgba(14, 98, 191, 0.2);
  border-radius: 22px;
  box-shadow: 0 26px 80px rgba(7, 27, 57, 0.38);
  padding: clamp(1.2rem, 2.8vw, 1.8rem);
}
.home-public-proc-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgba(15, 35, 65, 0.12);
  padding-bottom: 0.8rem;
}
.home-public-proc-modal__label {
  margin: 0 0 0.25rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #5c6e85;
  font-weight: 700;
}
.home-public-proc-modal__header h3 {
  margin: 0;
  color: #0f2744;
  font-size: 1.4rem;
}
.home-public-proc-modal__close {
  border: none;
  background: rgba(15, 40, 70, 0.08);
  border-radius: 999px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #1d365a;
}
.home-public-proc-modal__body {
  display: grid;
  gap: 1rem;
  padding-top: 1rem;
}
.home-public-proc-modal__card {
  background: #ffffff;
  border: 1px solid rgba(15, 40, 70, 0.12);
  border-radius: 16px;
  padding: 1rem 1.2rem;
  box-shadow: 0 12px 30px rgba(6, 21, 43, 0.08);
}
.home-public-proc-modal__card h4 {
  margin: 0 0 0.35rem;
  font-size: 1.1rem;
  color: #0f2744;
}
.home-public-proc-modal__meta {
  margin: 0;
  color: #4b5f75;
}
.home-public-proc-modal__text {
  color: #1f344f;
  line-height: 1.6;
}
.home-public-proc-modal__text p {
  margin: 0 0 0.7rem;
}
.home-public-proc-modal__text ul,
.home-public-proc-modal__text ol {
  margin: 0.6rem 0 0.6rem 1.2rem;
}
.home-public-proc-modal__footer {
  margin-top: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  border-top: 1px solid rgba(15, 35, 65, 0.12);
  padding-top: 1rem;
}
.home-public-proc-modal__status {
  color: #30517a;
  font-weight: 600;
}
.home-public-proc-modal__status[data-tone="warning"] {
  color: #b45309;
}
.home-public-proc-modal__status[data-tone="error"] {
  color: #b42318;
}
.home-public-proc-modal__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.home-public-proc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border-radius: 999px;
  padding: 0.55rem 1.2rem;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.home-public-proc-btn--primary {
  background: linear-gradient(120deg, #0ec1d2, #14a3dc);
  color: #ffffff;
  box-shadow: 0 12px 25px rgba(14, 163, 204, 0.32);
}
.home-public-proc-btn--ghost {
  background: rgba(15, 55, 100, 0.08);
  color: #0f2c53;
  border: 1px solid rgba(15, 55, 100, 0.12);
}
.home-public-proc-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

.home-module-strip {
  background: #f6f9fc;
  padding: clamp(2.8rem, 6vw, 4.8rem) 0;
}
.home-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: clamp(1rem, 2vw, 1.7rem);
}
.home-module-pill {
  background: #fff;
  border: 1px solid #d9e3f1;
  border-radius: 22px;
  padding: 1.4rem 1.6rem;
  box-shadow: 0 18px 50px rgba(13, 40, 74, 0.08);
}
.home-module-pill h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.7rem;
  font-size: 1.05rem;
  color: #0f2744;
}
.home-module-pill .material-icons {
  font-size: 1.3rem;
  color: #0d6efd;
}
.home-module-pill ul {
  margin: 0;
  padding-left: 1.1rem;
  color: #45566c;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.home-register {
  background: #f0fbfd;
  padding: clamp(2.8rem, 6vw, 4.2rem) 0;
}
.home-register__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: stretch;
}
.home-register__card {
  background: #ffffff;
  border-radius: 26px;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid #e1edf0;
  box-shadow: 0 22px 50px rgba(12, 45, 63, 0.08);
  position: relative;
}
.home-register__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 26px;
  border-top: 4px solid #0fc5d3;
  pointer-events: none;
}
.home-register__card--form {
  background: linear-gradient(180deg,#fbfeff,#f1fbff);
}
.home-register__points {
  margin: 1.4rem 0 0;
  padding-left: 1.2rem;
  color: #4a6878;
}
.home-register__points li {
  margin-bottom: 0.45rem;
}
.home-register .register-form {
  flex-direction: column;
  align-items: stretch;
  gap: 0.8rem;
}
.home-register .register-form input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border-radius: 12px;
  border: 1px solid #b6d7df;
  padding: 1rem 1.3rem;
}
.home-register .register-form button {
  border-radius: 12px;
  flex: 1 1 auto;
  width: 100%;
  background: linear-gradient(120deg,#0ec1d2,#14a3dc);
  box-shadow: 0 12px 25px rgba(14, 163, 204, 0.35);
  padding: 1.05rem 1.4rem;
  font-size: 1.05rem;
  white-space: normal;
}
.home-register .register-features {
  margin-bottom: 0;
  color: #547287;
  padding-left: 1rem;
}
.home-register__card--form .register-features li::marker {
  color: #10b5ce;
}

@media (max-width: 960px) {
  .home-register__inner {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .home-register .register-form {
    flex-direction: column;
  }
  .home-register .register-form input[type="email"],
  .home-register .register-form button {
    width: 100%;
    border-radius: 10px;
  }
  .hero-meta-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .hero-module-grid {
    grid-template-columns: 1fr;
  }
}
.home-advantages {
  padding: clamp(2.8rem, 6vw, 4.5rem) 0;
  background: #f7fbfd;
}
.home-advantages__stage {
  width: min(1120px, 96vw);
  margin: 0 auto;
  position: relative;
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 6rem);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.home-advantages__visual {
  margin: 0 auto;
  width: 100%;
  border-radius: 32px;
  overflow: hidden;
  border: 1px solid #d7e7f0;
  box-shadow: 0 24px 60px rgba(15, 34, 58, 0.12);
}
.home-advantages__visual img {
  display: block;
  width: 100%;
  height: auto;
}
.home-advantages__cards {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(88%, 900px);
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1.2rem, 2.6vw, 2rem);
}
.home-adv-card {
  background: #fff;
  border-radius: 22px;
  border: 1px solid #dce9ef;
  padding: 1.4rem;
  box-shadow: 0 22px 52px rgba(13, 38, 64, 0.1);
  position: relative;
}
.home-adv-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  border-top: 4px solid #11bbcb;
  pointer-events: none;
}
.home-adv-card__icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: #e0fbff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.9rem auto;
}
.home-adv-card__icon img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}
.home-adv-card h3 {
  margin: 0 0 0.4rem;
  color: #0c2a43;
}
.home-adv-card p {
  margin: 0;
  color: #4a5d70;
}
@media (max-width: 900px) {
  .home-advantages__cards {
    position: static;
    transform: none;
    width: 100%;
    margin-top: clamp(1.5rem, 5vw, 3rem);
  }
}
/* ============================================================
   Referenzen Page
============================================================ */
.page-referenzen #content {
  max-width: 1240px;
  width: 100%;
  padding: 0 clamp(1rem, 4vw, 3rem) 4rem;
  margin: 2.4em auto 3.5rem;
}
.page-referenzen footer {
  max-width: 1240px;
  margin-bottom: 2rem;
}
.reference-highlight {
  margin-top: clamp(1.2rem, 4vw, 3rem);
}
.reference-highlight__surface {
  display: grid;
  grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(1.5rem, 3vw, 3.5rem);
  border-radius: 32px;
  background: radial-gradient(120% 120% at 15% 20%, rgba(58,224,220,0.18), rgba(3,10,24,0.95));
  border: 1px solid rgba(103,161,255,0.35);
  box-shadow: 0 30px 60px rgba(2,8,20,0.55);
  color: #edf4ff;
}
.reference-highlight__media img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: 0 20px 45px rgba(1,6,18,0.65);
}
.reference-highlight__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.reference-highlight__eyebrow,
.reference-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.78rem;
  color: #7fd8ff;
  font-weight: 600;
  margin: 0;
}
.reference-highlight blockquote {
  margin: 0;
  padding: 1rem 1.5rem;
  border-radius: 18px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 1.28rem;
  line-height: 1.55;
  position: relative;
}
.reference-quote-icon {
  font-size: 2.5rem;
  color: #64e8ff;
  margin-bottom: 0.3rem;
  display: inline-flex;
}
.reference-highlight__person {
  border-left: 2px solid rgba(255,255,255,0.2);
  padding-left: 1rem;
}
.reference-highlight__name {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}
.reference-highlight__role,
.reference-highlight__org {
  margin: 0;
  color: rgba(237,244,255,0.85);
}
.reference-highlight__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
}
.reference-highlight__metrics div {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  padding: 0.9rem 1rem;
}
.reference-highlight__metrics span {
  display: block;
  font-size: 1.45rem;
  font-weight: 600;
  color: #76f5c6;
}
.reference-highlight__metrics p {
  margin: 0.2rem 0 0;
  color: rgba(237,244,255,0.78);
}
.reference-impact {
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.reference-impact__intro {
  max-width: 760px;
}
.reference-impact__grid {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}
.impact-card {
  border-radius: 24px;
  padding: 1.8rem;
  background: #fff;
  box-shadow: 0 15px 40px rgba(15,23,42,0.08);
  border: 1px solid #e4ecfb;
}
.impact-card__value {
  display: block;
  font-size: 2.3rem;
  font-weight: 600;
  color: #0054ff;
  margin-bottom: 0.2rem;
}
.impact-card h3 {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
  color: #0f172a;
}
.impact-card p {
  margin: 0;
  color: #4b5563;
}
.reference-cases {
  margin-top: clamp(3rem, 6vw, 4.8rem);
}
.reference-cases__intro {
  max-width: 780px;
}
.reference-case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.4rem;
  margin-top: 2rem;
}
.reference-case-card {
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff, #f5f8ff);
  border: 1px solid #e0e8f7;
  padding: 1.5rem 1.6rem;
  box-shadow: 0 12px 32px rgba(15,23,42,0.08);
}
.reference-case-card__tag {
  display: inline-flex;
  padding: 0.32rem 0.8rem;
  border-radius: 999px;
  background: rgba(0,86,255,0.1);
  color: #004add;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
}
.reference-case-card h3 {
  margin: 0.8rem 0 0.5rem;
  color: #0b1f37;
}
.reference-case-card ul {
  margin: 0;
  padding-left: 1.1rem;
  color: #42526b;
}
.reference-case-card li {
  margin-bottom: 0.45rem;
}
.reference-case-card li:last-child {
  margin-bottom: 0;
}
.reference-cta {
  margin-top: clamp(3rem, 7vw, 5rem);
}
.reference-cta__surface {
  border-radius: 32px;
  padding: clamp(1.8rem, 4vw, 3rem);
  background: linear-gradient(135deg, #041431, #0b2c6c 60%, #103c8a);
  color: #f4fbff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: center;
  box-shadow: 0 25px 50px rgba(7,13,34,0.55);
}
.reference-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}
.reference-cta__btn {
  background: #5de0d2;
  color: #051021;
  text-decoration: none;
  font-weight: 600;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  box-shadow: 0 15px 30px rgba(7,12,30,0.35);
}
.reference-cta__btn:hover {
  transform: translateY(-1px);
}
.reference-cta__link {
  color: #d3e7ff;
  text-decoration: underline;
  font-weight: 500;
}
@media (max-width: 900px) {
  .reference-highlight__surface {
    grid-template-columns: 1fr;
  }
  .reference-highlight__media img {
    min-height: 260px;
  }
}

/* Gemeinsamer Pill-CTA wie der \"Benutzer hinzuf\u00fcgen\"-Button aus dem Projektteam-Modal */
.cta-pill-gradient,
.team-add-user-btn,
.login-top-btn{
  border: none;
  border-radius: 999px;
  background: linear-gradient(120deg, #00f0ff, #00aab8 70%, #0093a1);
  color: #032030;
  font-weight: 600;
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 14px 26px rgba(0,150,165,.35);
  transition: transform .15s ease, box-shadow .15s ease;
  line-height: 1.05;
  text-decoration: none;
}
.team-add-user-btn{ margin-top: 12px; }
.login-top-btn{
  margin-top: 0;
  height: 44px;
}
.cta-pill-gradient .material-icons,
.team-add-user-btn .material-icons,
.login-top-btn .material-icons{
  font-size: 20px;
  line-height: 1;
}
.cta-pill-gradient:hover,
.team-add-user-btn:hover,
.login-top-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 32px rgba(0,150,165,.45);
}
@media (max-width: 640px) {
  .page-referenzen #content {
    padding: 0 1rem 3rem;
  }
  .page-referenzen .referenzen-hero .hero-overlay {
    padding: 2.5rem 1.5rem;
  }
  .reference-cta__surface {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* Auth modal (Hub-Style) */
body.auth-modal-open #authModalBackdrop.hub-auth-backdrop{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding: clamp(12px, 2vw, 32px) !important;
  background: radial-gradient(circle at top, rgba(7,182,197,.25), rgba(4,10,24,.92));
  backdrop-filter: blur(4px);
}
body.company-modal-open #companyModalBackdrop.hub-auth-backdrop{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding: clamp(12px, 2vw, 32px) !important;
  background: radial-gradient(circle at top, rgba(7,182,197,.25), rgba(4,10,24,.92));
  backdrop-filter: blur(4px);
}
body.modal-open:not(.auth-modal-open) #authModalBackdrop,
body.company-modal-open #authModalBackdrop{
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}
body.auth-modal-open #companyModalBackdrop{
  display: none !important;
}
#authModalBackdrop.hub-auth-backdrop,
#companyModalBackdrop.hub-auth-backdrop{
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at top, rgba(7,182,197,.25), rgba(4,10,24,.92));
  backdrop-filter: blur(4px);
}
.hub-auth-shell{
  width: min(680px, 92vw);
  height: 100vh;
  max-height: none;
  display: flex;
  justify-content: center;
  position: relative;
}
.hub-auth-modal{
  --auth-modal-scrollbar-gap: 0px;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  margin-top: 0 !important;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 32px 70px rgba(3, 14, 33, .32);
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  position: relative;
}
.hub-auth-modal > .auth-tab{
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 12px;
  padding: 26px 28px 24px;
  margin: 0;
  background: #fff;
  flex: 1 1 auto;
}
.hub-auth-head{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: flex-start;
  gap: 10px;
}
#registerTab .hub-auth-head{
  /* Match the white header block height with the login modal */
  margin-top: 0;
  padding-top: 26px;
  padding-bottom: 18px;
  min-height: 120px;
  box-sizing: border-box;
}
.hub-auth-icon{
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: linear-gradient(135deg, #00f2ff, #01aab8);
  box-shadow: 0 18px 36px rgba(0, 171, 186, .35);
  color: #032731;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hub-auth-icon .material-icons{ font-size: 28px; }
.hub-auth-title .modal-eyebrow{
  margin: 0 0 2px;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: #5c6674;
  text-align: right;
}
.hub-auth-modal .modal-title{
  position: static !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 2px 0 4px !important;
  font-size: 1.65rem !important;
  color: #071226 !important;
  text-align: right;
}
.hub-auth-subline{
  margin: 0;
  color: #4c5c70;
  font-size: .98rem;
  line-height: 1.5;
  text-align: right;
}
.auth-close-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(7,19,43,.08);
  border: none;
  border-radius: 999px;
  width: 42px;
  height: 42px;
  color: #0d1b2e;
  cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}
.auth-close-btn:hover{
  background: rgba(7,19,43,.16);
  transform: translateY(-1px);
}
.auth-close-btn .material-icons{ font-size: 22px; line-height: 1; }
.hub-auth-modal .modal-tab-scroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin-top: 6px;
  padding: 18px 20px;
  background: linear-gradient(180deg, #f9fbff 0%, #f4f7fb 100%);
  border: 1px solid #e4ebf5;
  border-radius: 16px;
  box-shadow: inset 0 -1px 0 #edf2fa;
}
.hub-auth-modal .auth-form-modern{
  padding: 0;
  gap: .8em;
  background: transparent;
  box-shadow: none;
}
.hub-auth-modal .auth-form-modern label{
  font-weight: 600;
  font-size: .98rem;
  color: #0f1c30;
}
.hub-auth-modal .auth-form-modern input,
.hub-auth-modal .auth-form-modern select,
.hub-auth-modal .auth-form-modern textarea{
  width: 100%;
  border: 1px solid #d0d5dd;
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
  font-size: 1rem;
  box-shadow: none;
}
.hub-auth-modal .auth-form-modern input:focus,
.hub-auth-modal .auth-form-modern select:focus,
.hub-auth-modal .auth-form-modern textarea:focus{
  border-color: #00b7c4;
  box-shadow: 0 0 0 3px rgba(0,183,196,.18);
  outline: none;
}
.hub-auth-modal .auth-form-modern h3,
.hub-auth-modal .auth-form-modern h4{
  margin: .45em 0 .25em;
  color: #415364;
  font-weight: 700;
}
.hub-auth-modal .auth-form-modern .form-group + h3,
.hub-auth-modal .auth-form-modern .form-group + h4{ margin-top: .35em; }
.hub-auth-modal .form-group{ margin-bottom: .5em; }
.hub-auth-modal .modal-links{
  margin-top: 14px;
  gap: .8em;
  justify-content: flex-start;
  color: #4c5c70;
  font-size: .98rem;
}
.hub-auth-modal .modal-links a{
  color: #008dab;
  font-weight: 700;
}
.hub-auth-modal .login-btn-modern,
.hub-auth-modal .register-btn-modern{
  width: 100%;
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(120deg, #00f2ff, #00aab8 70%, #0093a1);
  color: #041522;
  font-weight: 700;
  font-size: 1rem;
  box-shadow: 0 18px 32px rgba(0, 171, 186, .35);
  transition: transform .16s ease, box-shadow .16s ease;
}
.hub-auth-modal .login-btn-modern:hover,
.hub-auth-modal .register-btn-modern:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 40px rgba(0, 171, 186, .4);
}
.hub-auth-modal .form-error{ color: #d02b20; font-weight: 600; }
.hub-auth-modal .sso-block{
  border: 1px solid #d7e0eb;
  background: #fff;
  border-radius: 14px;
  padding: 12px 12px 10px;
  margin: 10px 0 0;
  box-shadow: 0 10px 26px rgba(10, 24, 48, .12);
}
.hub-auth-modal .sso-eyebrow{
  margin: 0 0 6px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #4f6478;
}
.hub-auth-modal .sso-btn{
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 14px;
  border: 1px solid #cfd6e3;
  background: #fff;
  color: #0f1c30;
  padding: 12px 14px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(8, 25, 52, .14);
  transition: transform .14s ease, box-shadow .14s ease, border-color .12s ease;
}
.hub-auth-modal .sso-btn[disabled]{
  cursor: wait;
  opacity: .74;
  transform: none;
}
.hub-auth-modal .sso-label{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}
.hub-auth-modal .sso-btn .sso-text{
  font-weight: 700;
}
.hub-auth-modal .sso-subtext{
  color: #516174;
  font-size: .82rem;
  font-weight: 600;
  margin-top: 2px;
}
.hub-auth-modal .sso-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(8, 25, 52, .16);
  border-color: #00b7c4;
}
.hub-auth-modal .sso-hint{
  margin: 10px 4px 4px;
  color: #4b5565;
  font-size: .95rem;
}
.hub-auth-modal .sso-divider{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 8px;
  color: #607080;
  font-weight: 600;
}
.hub-auth-modal .sso-divider::before,
.hub-auth-modal .sso-divider::after{
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(97,116,132,.22), rgba(97,116,132,.08));
}
.hub-auth-modal .sso-logo{
  height: 42px;
  max-height: 52px;
  width: auto;
  display: block;
}

.keycloak-sso-docs .data-panel-body{
  display: grid;
  gap: 16px;
}
.keycloak-sso-summary{
  display: grid;
  gap: 8px;
}
.keycloak-callback-box{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid #d7e0eb;
  background: #f7fafc;
  border-radius: 8px;
  padding: 14px;
}
.keycloak-callback-box code{
  display: block;
  max-width: min(72vw, 760px);
  overflow-wrap: anywhere;
  color: #102033;
  background: transparent;
  font-size: .93rem;
}
.keycloak-doc-grid{
  display: grid;
  gap: 12px;
}
.keycloak-doc-grid details{
  border: 1px solid #d7e0eb;
  border-radius: 8px;
  background: #fff;
  padding: 0;
  overflow: hidden;
}
.keycloak-doc-grid summary{
  cursor: pointer;
  font-weight: 700;
  color: #102033;
  padding: 14px 16px;
  background: #f8fafc;
}
.keycloak-doc-grid details[open] summary{
  border-bottom: 1px solid #e2e8f0;
}
.keycloak-doc-grid details > :not(summary){
  margin: 14px 16px;
}
.keycloak-doc-grid h3{
  margin: 12px 16px 6px;
  font-size: 1rem;
  color: #102033;
}
.keycloak-two-col{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.keycloak-definition-list{
  display: grid;
  gap: 8px;
}
.keycloak-definition-list div{
  display: grid;
  grid-template-columns: minmax(150px, .4fr) 1fr;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #edf1f6;
}
.keycloak-definition-list dt{
  font-weight: 700;
  color: #243348;
}
.keycloak-definition-list dd{
  margin: 0;
  color: #48566a;
}
.keycloak-code-stack{
  display: grid;
  gap: 8px;
}
.keycloak-code-stack code,
.keycloak-doc-grid code{
  overflow-wrap: anywhere;
}
.keycloak-steps{
  padding-left: 1.2rem;
  color: #122c3f;
  line-height: 1.55;
}
.keycloak-steps li{
  margin-bottom: 6px;
}
@media (max-width: 760px){
  .keycloak-callback-box{
    align-items: stretch;
    flex-direction: column;
  }
  .keycloak-callback-box .team-btn{
    width: 100%;
    justify-content: center;
  }
  .keycloak-two-col,
  .keycloak-definition-list div{
    grid-template-columns: 1fr;
  }
}

.forgot-modal{
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vw, 28px);
  background: rgba(4, 10, 24, .72);
  backdrop-filter: blur(4px);
  z-index: 10;
}
.forgot-modal.is-visible{
  display: flex;
}
.forgot-modal__panel{
  position: relative;
  width: min(430px, 100%);
  background: #fff;
  border-radius: 20px;
  padding: 28px 26px 24px;
  box-shadow: 0 26px 70px rgba(3, 17, 36, .28);
  border: 1px solid rgba(9, 28, 48, .08);
  text-align: left;
}
.forgot-modal__close{
  position: absolute;
  top: 14px;
  right: 14px;
  border: none;
  background: rgba(7,19,43,.08);
  border-radius: 999px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #071226;
}
.forgot-modal__close:hover{
  background: rgba(7,19,43,.16);
}
.forgot-modal__icon{
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: linear-gradient(135deg, #00f2ff, #00aab8);
  box-shadow: 0 16px 32px rgba(0,171,186,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #041522;
  margin-bottom: 14px;
}
.forgot-modal__icon .material-icons{
  font-size: 28px;
}
.forgot-modal__panel h3{
  margin: 0 0 6px;
  font-size: 1.5rem;
  color: #061126;
}
.forgot-modal__intro{
  margin: 0 0 16px;
  color: #4c5c70;
  line-height: 1.5;
}
.forgot-modal__form{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.forgot-modal__form label{
  font-weight: 600;
  color: #0f1c30;
}
.forgot-modal__form input{
  width: 100%;
  border: 1px solid #d0d5dd;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 1rem;
}
.forgot-modal__form input:focus{
  border-color: #00b7c4;
  box-shadow: 0 0 0 3px rgba(0,183,196,.18);
  outline: none;
}
.forgot-modal__submit{
  margin-top: 6px;
}
#forgotPwFeedback{
  min-height: 1.2em;
}
#forgotPwFeedback.success{
  color: #0f8b5d;
}
.forgot-modal__hint{
  margin: 12px 0 0;
  color: #4f5c6d;
  font-size: .92rem;
}
.confirm-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vw, 28px);
  background: rgba(4, 10, 24, .72);
  backdrop-filter: blur(4px);
  z-index: 10010;
}
.confirm-modal.is-visible{
  display: flex;
}
.confirm-modal__card{
  position: relative;
  width: min(560px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid rgba(9, 28, 48, .08);
  border-radius: 22px;
  box-shadow: 0 26px 70px rgba(3, 17, 36, .28);
  overflow: hidden;
}
.confirm-modal__card .confirm-modal__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 14px;
  border-bottom: 1px solid #edf1f7;
}
.confirm-modal__card .va-modal__title{
  margin: 0;
  color: #061126;
  font-size: 1.22rem;
  font-weight: 800;
}
.confirm-modal__card .confirm-modal__close{
  position: static;
  flex: 0 0 auto;
}
.confirm-modal__card .confirm-modal__body{
  padding: 20px 24px 4px;
}
.confirm-modal__card .confirm-modal__message{
  margin: 0;
  color: #41526a;
  line-height: 1.55;
}
.confirm-modal__card .confirm-warning{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #7c2d12;
}
.confirm-modal__card .confirm-warning[hidden]{
  display: none !important;
}
.confirm-modal__card .confirm-warning .material-icons{
  color: #f97316;
}
.confirm-modal__card .confirm-warning p{
  color: inherit;
}
.confirm-modal__card .confirm-modal__footer{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px 22px;
  border-top: 1px solid #edf1f7;
}
.confirm-modal__card .confirm-modal__footer .spacer{
  flex: 1 1 auto;
}
.confirm-modal__panel{
  position: relative;
  width: min(460px, 100%);
  background: #fff;
  border-radius: 22px;
  padding: 30px 28px 26px;
  box-shadow: 0 26px 70px rgba(3, 17, 36, .28);
  border: 1px solid rgba(9, 28, 48, .08);
  text-align: left;
}
.confirm-modal__close{
  position: absolute;
  top: 14px;
  right: 14px;
  border: none;
  background: rgba(7,19,43,.08);
  border-radius: 999px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #071226;
}
.confirm-modal__close:hover{
  background: rgba(7,19,43,.16);
}
.confirm-modal__icon{
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: linear-gradient(135deg, #00f2ff, #00aab8);
  box-shadow: 0 16px 32px rgba(0,171,186,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #041522;
  margin-bottom: 14px;
}
.confirm-modal__icon .material-icons{
  font-size: 28px;
}
.confirm-modal__panel h3{
  margin: 0 0 6px;
  font-size: 1.5rem;
  color: #061126;
}
.confirm-modal__intro{
  margin: 0 0 12px;
  color: #4c5c70;
  line-height: 1.5;
}
.confirm-modal__meta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f2f7ff;
  color: #1d2a3a;
  font-weight: 600;
  font-size: .95rem;
  border: 1px solid rgba(20, 50, 90, .12);
  margin-bottom: 12px;
  word-break: break-all;
}
.confirm-modal__hint{
  margin: 0 0 14px;
  color: #4f5c6d;
  font-size: .93rem;
}
.confirm-modal__prompt{
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 14px 0 16px;
  text-align: left;
}
.confirm-modal__prompt[hidden]{
  display: none !important;
}
.confirm-modal__prompt label{
  color: #10233d;
  font-size: .94rem;
  font-weight: 800;
}
.confirm-modal__prompt textarea{
  width: 100%;
  min-height: 118px;
  border: 1px solid #cfd8e7;
  border-radius: 14px;
  background: #f8fbff;
  color: #10233d;
  font: inherit;
  line-height: 1.48;
  padding: 12px 14px;
  resize: vertical;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.confirm-modal__prompt textarea:focus{
  border-color: #00a8ba;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(0, 168, 186, .16);
  outline: none;
}
.confirm-modal__prompt textarea[aria-invalid="true"]{
  border-color: #d0472f;
  box-shadow: 0 0 0 4px rgba(208, 71, 47, .14);
}
.confirm-modal__prompt-hint,
.confirm-modal__prompt-error{
  margin: 0;
  font-size: .88rem;
  line-height: 1.4;
}
.confirm-modal__prompt-hint{
  color: #607086;
}
.confirm-modal__prompt-error{
  color: #b53a1b;
  font-weight: 800;
}
.confirm-modal__actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.confirm-modal__btn{
  flex: 1;
  min-width: 140px;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
}
.confirm-modal__btn--primary{
  background: #00a8ba;
  color: #fff;
  border-color: #00a8ba;
  box-shadow: 0 12px 24px rgba(0, 168, 186, .28);
}
.confirm-modal__btn--ghost{
  background: #f7f9fc;
  color: #122033;
  border-color: #d9dfeb;
}
.subscription-manage-modal{
  align-items: center;
  padding-block: clamp(16px, 3vh, 32px);
}
.subscription-manage-modal__panel{
  width: min(760px, 98vw);
  max-height: min(90vh, calc(100vh - 48px));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}
@supports (height: 100dvh){
  .subscription-manage-modal__panel{
    max-height: min(90dvh, calc(100dvh - 48px));
  }
}
.subscription-manage-modal__panel .confirm-modal__actions{
  position: sticky;
  bottom: -26px;
  margin: 14px -28px -26px;
  padding: 14px 28px 26px;
  border-top: 1px solid #edf1f7;
  background: linear-gradient(180deg, rgba(255,255,255,.94), #fff 34%);
}
.subscription-manage-modal__current{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #d5e6f6;
  background: linear-gradient(180deg, #f7fcff, #f3f8ff);
  margin-bottom: 12px;
}
.subscription-manage-modal__packages{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.subscription-package-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.subscription-package-option{
  border: 1px solid #d5e6f6;
  background: #f8fbff;
  border-radius: 12px;
  padding: 10px 12px;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  color: #123556;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .15s ease;
}
.subscription-package-option__main{
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0;
  text-align: left;
}
.subscription-package-option strong{
  font-size: .95rem;
}
.subscription-package-option small{
  color: #51657f;
}
.subscription-package-option:hover{
  border-color: #8ac7f7;
  box-shadow: 0 10px 20px rgba(15, 59, 112, .08);
}
.subscription-package-option.is-selected{
  border-color: #00a8ba;
  background: linear-gradient(180deg, #e6fcff, #f2fdff);
  box-shadow: 0 12px 26px rgba(0, 168, 186, .18);
}
.subscription-package-seat-stepper input{
  width: 72px;
  text-align: center;
}
.subscription-manage-modal__package-note{
  margin: 0;
  font-size: .9rem;
  color: #39506b;
}
.subscription-manage-modal__stepper{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.subscription-manage-modal__stepper .seats-stepper input{
  width: 96px;
  text-align: center;
}
.subscription-manage-modal__preview{
  border: 1px dashed #b9d2eb;
  border-radius: 12px;
  background: #f8fbff;
  color: #163554;
  padding: 10px 12px;
  margin-bottom: 12px;
  line-height: 1.5;
}
.subscription-manage-modal__pending{
  color: #39506b;
  font-size: .9rem;
}
.subscription-change-confirm__panel{
  width: min(620px, 98vw);
}
.subscription-change-confirm__rows{
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #d5e6f6;
  background: linear-gradient(180deg, #f7fcff, #f3f8ff);
}
.subscription-change-confirm__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.subscription-change-confirm__label{
  color: #3f5773;
  font-size: .92rem;
}
.subscription-change-confirm__value{
  color: #071226;
  font-size: .98rem;
  text-align: right;
}
.subscription-change-confirm__value.is-highlight{
  color: #007a8a;
}
.subscription-change-confirm__value.is-date{
  color: #123556;
}
@media (max-width: 740px){
  .subscription-package-grid{
    grid-template-columns: 1fr;
  }
  .subscription-package-option{
    grid-template-columns: 1fr;
  }
  .subscription-manage-modal__stepper{
    flex-direction: column;
    align-items: flex-start;
  }
  .subscription-manage-modal__stepper .seats-stepper{
    width: 100%;
  }
}
.setpw-modal{
  z-index: 10020;
}
.setpw-modal__panel{
  width: min(460px, 100%);
}
.setpw-modal__form{
  box-shadow: none !important;
  padding: 0 !important;
  gap: 10px;
}
#setPasswordFeedback{
  min-height: 1.2em;
}
#setPasswordFeedback.success{
  color: #0f8b5d;
}
#setPasswordSubmit{
  border: none;
  border-radius: 999px;
  background: linear-gradient(120deg, #00f0ff, #00aab8 70%, #0093a1);
  color: #032030;
  font-weight: 600;
  padding: 10px 18px;
  font-size: 1.03em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 14px 26px rgba(0,150,165,.35);
  transition: transform .15s ease, box-shadow .15s ease;
  line-height: 1.05;
  text-decoration: none;
  height: 44px;
  width: 100%;
  margin-top: 8px;
}
#setPasswordSubmit:hover:not(:disabled){
  transform: translateY(-1px);
  box-shadow: 0 18px 32px rgba(0,150,165,.45);
}
#setPasswordSubmit:disabled{
  opacity: .65;
  cursor: not-allowed;
  transform: none;
}
@media (max-width: 740px){
  .hub-auth-shell{ width: 100%; }
  .hub-auth-modal > .auth-tab{ padding: 22px 18px 20px; }
  .hub-auth-head{ align-items: flex-start; }
  .hub-auth-icon{ width: 52px; height: 52px; }
  .hub-auth-modal .modal-tab-scroll{ padding: 14px 16px; }
}
/****************************************
 * Account: Hub-inspiriertes Layout
 ****************************************/
body.account-page #billingLockModal.modal,
body.account-page #deleteAccountModal.modal{
  --account-dialog-gap: clamp(12px, 2vw, 32px);
  z-index: 12110;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: var(--account-dialog-gap) var(--account-dialog-gap) var(--account-dialog-gap)
    calc(var(--buyer-sidebar-width) + var(--account-dialog-gap));
  overflow-y: auto;
}
body.account-page #billingLockModal .modal-content,
body.account-page #deleteAccountModal .modal-content{
  width: min(680px, 100%);
  max-height: calc(100dvh - 2rem);
  margin: auto;
}
@media (max-width: 900px){
  body.account-page #billingLockModal.modal,
  body.account-page #deleteAccountModal.modal{
    padding-left: var(--account-dialog-gap);
  }
}
.account-page .hub-tab-menu{
  display:flex; flex-wrap:wrap; gap:.6rem;
  padding:.55rem .65rem;
  margin:1.2rem 0 1rem 0;
  border:none;
  background:linear-gradient(120deg,#f6fdff,#eef4ff);
  border-radius:16px;
  box-shadow:0 12px 28px rgba(7,32,56,.08);
}
.account-page .hub-tab{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.6rem 1rem;
  border-radius:12px;
  border:1px solid #d3e8f4;
  background:#fff;
  color:#0e2f45;
  font-weight:700;
  box-shadow:0 10px 24px rgba(5,25,45,.08);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.account-page .hub-tab .material-icons{ font-size:20px; color:inherit; }
.account-page .hub-tab:hover{
  transform:translateY(-1px);
  border-color:#b9dff0;
  box-shadow:0 16px 30px rgba(5,25,45,.14);
}
.account-page .hub-tab.active{
  background:linear-gradient(120deg,#00f0ff,#00aab8 70%,#008ea0);
  color:#03202f;
  border-color:#00b0c1;
  box-shadow:0 18px 40px rgba(0,160,180,.25);
}
.account-card.hub-card{
  border:1px solid #d7e6f3;
  border-radius:16px;
  background:linear-gradient(150deg,#ffffff,#f7fbff);
  box-shadow:0 18px 48px rgba(7,32,56,.1);
}
.hub-tab-panel{ margin-top:.2rem; }

#tab-org .org-card{ padding:1.2rem 1.4rem; }
#tab-org .org-header{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
}
#tab-org .org-meta{
  display:flex; align-items:center; gap:.75rem;
  flex-wrap:wrap; justify-content:flex-end;
}
.org-eyebrow{
  text-transform:uppercase; letter-spacing:.05em; color:#4a6b82;
  font-size:.78rem; font-weight:700; margin:0 0 .15rem 0;
}
@media (max-width: 900px){
  body.account-page .dashboard-content-wrapper{
    overflow-x:hidden;
  }
  body.account-page .sidebar-menu-left{
    left:-100vw;
  }
  body.account-page .sidebar-menu-left.open{
    left:0;
  }
}
.org-subtitle{ margin:.15rem 0 0 0; }
.org-search{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .6rem;
  border:1px solid #d5e8f5;
  background:#f8fcff;
  border-radius:12px;
  box-shadow:0 8px 20px rgba(7,32,56,.08);
}
.org-search input{
  border:none; background:transparent; outline:none;
  padding:.2rem .1rem; min-width:180px;
}
.org-search .material-icons{ color:#00aab8; }

.org-users-card{ margin-top:1rem; }
#tab-org .org-users{
  width:100%; border-collapse:separate; border-spacing:0 10px;
}
#tab-org .org-users th{
  background:#e9f6fa; color:#0c3044; font-weight:700;
  padding:.65rem .75rem; border:none; text-align:left;
  border-radius:10px;
}
#tab-org .org-users th:last-child{ text-align:right; }
#tab-org .org-users tbody tr{
  background:#fff;
  border:1px solid #dbe8f5;
  border-radius:14px;
  box-shadow:0 14px 32px rgba(7,32,56,.08);
}
#tab-org .org-users tbody td{
  padding:.75rem .8rem;
  vertical-align:middle;
}
#tab-org .org-users tbody tr td:first-child{ border-radius:14px 0 0 14px; }
#tab-org .org-users tbody tr td:last-child{ border-radius:0 14px 14px 0; }
.org-user-meta{ display:flex; align-items:center; gap:.75rem; }
.org-user-line{ display:flex; align-items:center; gap:.5rem; }
.org-user-email{ color:#4c5c6a; font-size:.9rem; }
.role-pill{
  display:inline-flex; align-items:center; gap:.25rem;
  padding:.25rem .6rem; border-radius:999px;
  font-weight:700; font-size:.85rem;
}
.role-pill.role-admin{ background:rgba(0,170,184,.14); color:#046170; }
.role-pill.role-member{ background:#eef2f7; color:#234; }
.role-pill.role-revision{ background:rgba(29,78,216,.12); color:#1d4ed8; }
.status-pill.positive{ background:rgba(0,185,165,.14); color:#0c615a; }
.status-pill.warning{ background:rgba(241,143,1,.14); color:#824b05; }
.icon-actions{ display:flex; gap:.4rem; justify-content:flex-end; align-items:center; }
.icon-action{
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px; border:1px solid #d5e7f4;
  background:#fff; box-shadow:0 10px 24px rgba(6,32,50,.12);
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.icon-action .material-icons{ color:#0b2c3a; font-size:22px; display:block; line-height:1; }
.icon-action:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 32px rgba(6,32,50,.16);
  border-color:#b7d9ea;
}
.icon-action.ghost{ background:#f4fbfd; }
.icon-action.muted{
  background:#f9f2ea; color:#9a5a00; border-color:#f3d7af;
}
.icon-action.muted .material-icons{ color:#9a5a00; }
.icon-action.danger{
  background:linear-gradient(150deg,#ffe9ec,#ffd5db);
  border-color:#ffc5cd;
}
.icon-action.danger .material-icons{ color:#9f1f32; }
.row-highlight{
  outline:2px solid rgba(0,180,186,.4);
  box-shadow:0 0 0 6px rgba(0,180,186,.12);
}
#tab-org .org-users .cell-center{ text-align:center; }
#tab-org .org-users .switch{ gap:.35rem; }
#tab-org .org-users .switch input[type="checkbox"]{ margin-top:1px; }
#tab-org .org-users .status-pill{ display:inline-flex; align-items:center; gap:.3rem; padding:.3rem .5rem; border-radius:10px; font-weight:700; }
.org-team-chips{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  min-width:120px;
}
.org-team-chip{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  max-width:180px;
  padding:.25rem .55rem;
  border-radius:999px;
  background:#eef6f9;
  color:#123548;
  font-size:.82rem;
  font-weight:700;
}
.org-team-chip--scope{
  background:rgba(0,170,184,.14);
  color:#046170;
}
.org-team-chip--muted{
  background:#eef2f7;
  color:#526170;
  font-weight:600;
}
.org-team-chip .material-icons{
  font-size:15px;
}
.org-teams-card{
  margin-top:1.25rem;
}
.org-teams-card .muted{
  margin:.2rem 0 0;
}
.org-teams-layout{
  display:grid;
  grid-template-columns:minmax(230px, 300px) minmax(0, 1fr);
  gap:1rem;
  margin-top:1rem;
}
.org-teams-list{
  display:flex;
  flex-direction:column;
  gap:.55rem;
  min-width:0;
}
.org-team-list-item{
  width:100%;
  text-align:left;
  border:1px solid #d9e8f5;
  border-radius:12px;
  background:#fff;
  padding:.72rem .8rem;
  box-shadow:0 10px 24px rgba(6,32,50,.08);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.org-team-list-item:hover{
  transform:translateY(-1px);
  border-color:#b7d9ea;
  box-shadow:0 15px 28px rgba(6,32,50,.12);
}
.org-team-list-item.active{
  border-color:#00aab8;
  box-shadow:0 0 0 3px rgba(0,170,184,.16);
}
.org-team-list-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  font-weight:800;
  color:#0f2d3d;
}
.org-team-list-meta{
  display:block;
  margin-top:.25rem;
  color:#506476;
  font-size:.88rem;
}
.org-team-editor{
  min-width:0;
  border:1px solid #d9e8f5;
  border-radius:12px;
  background:#fff;
  padding:1rem;
  box-shadow:0 12px 28px rgba(6,32,50,.08);
}
.org-team-editor-empty{
  min-height:220px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  text-align:center;
  color:#506476;
}
.org-team-editor-empty .material-icons{
  color:#00aab8;
  font-size:34px;
}
.org-team-editor-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(140px,180px);
  gap:.75rem;
}
.org-team-editor .org-field textarea{
  min-height:72px;
  resize:vertical;
}
.org-team-members-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  margin:1rem 0 .55rem;
}
.org-team-members-head h5{
  margin:.15rem 0 0;
  font-size:1rem;
}
.org-team-member-count{
  min-width:34px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 .55rem;
  border-radius:999px;
  background:#e9f6fa;
  color:#0c3044;
  font-weight:800;
}
.org-team-members-list{
  display:grid;
  gap:.5rem;
  max-height:430px;
  overflow:auto;
  padding-right:.25rem;
}
.org-team-member-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(180px, 240px);
  gap:.75rem;
  align-items:center;
  border:1px solid #e2edf6;
  border-radius:10px;
  padding:.65rem .7rem;
  background:#f9fcff;
}
.org-team-member-main{
  display:flex;
  align-items:center;
  gap:.55rem;
  min-width:0;
}
.org-team-member-main strong,
.org-team-member-main span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.org-team-member-main span{
  color:#526170;
  font-size:.86rem;
}
.org-team-member-access{
  display:flex;
  align-items:center;
  gap:.45rem;
  justify-content:flex-end;
}
.org-team-member-access select{
  min-width:170px;
}
.org-team-actions{
  display:flex;
  justify-content:flex-end;
  gap:.65rem;
  margin-top:1rem;
}
.org-team-msg{
  margin-top:.75rem;
}
#addUserModal .org-invite-team-grid{
  display:grid;
  gap:.55rem;
}
#addUserModal .org-invite-team-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(160px, 220px);
  gap:.65rem;
  align-items:center;
  border:1px solid #e2edf6;
  border-radius:10px;
  padding:.6rem .7rem;
  background:#f9fcff;
}
#addUserModal .org-invite-team-row label{
  display:flex;
  align-items:center;
  gap:.45rem;
  font-weight:700;
  color:#123548;
}
#addUserModal .org-invite-team-row select{
  width:100%;
}
@media (max-width: 980px){
  .org-teams-layout{
    grid-template-columns:1fr;
  }
  .org-team-editor-grid,
  .org-team-member-row,
  #addUserModal .org-invite-team-row{
    grid-template-columns:1fr;
  }
  .org-team-member-access{
    justify-content:space-between;
  }
}
#tab-roles .roles-card{ padding:1.2rem 1.4rem; }
#tab-roles .roles-layout{
  display:grid;
  grid-template-columns:minmax(260px, 340px) minmax(0, 1fr);
  gap:1rem;
  margin-top:1rem;
}
#tab-roles .roles-list-pane,
#tab-roles .roles-editor-pane{
  min-width:0;
}
.org-roles-list{
  display:flex;
  flex-direction:column;
  gap:.55rem;
}
.org-role-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  width:100%;
  text-align:left;
  border:1px solid #d9e8f5;
  border-radius:12px;
  background:#fff;
  padding:.72rem .8rem;
  box-shadow:0 10px 24px rgba(6,32,50,.08);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.org-role-item:hover{
  transform:translateY(-1px);
  border-color:#b7d9ea;
  box-shadow:0 15px 28px rgba(6,32,50,.12);
}
.org-role-item.active{
  border-color:#00aab8;
  box-shadow:0 0 0 3px rgba(0,170,184,.16);
}
.org-role-main{
  display:flex;
  flex-direction:column;
  gap:.2rem;
  min-width:0;
}
.org-role-name{
  display:flex;
  align-items:center;
  gap:.45rem;
  flex-wrap:wrap;
  color:#102435;
  font-weight:700;
}
.org-role-meta{
  color:#4f6072;
  font-size:.88rem;
}
.org-role-badges{
  display:flex;
  align-items:center;
  gap:.35rem;
}
.role-mini-badge{
  display:inline-flex;
  align-items:center;
  gap:.2rem;
  padding:.2rem .45rem;
  border-radius:999px;
  font-size:.74rem;
  font-weight:700;
  border:1px solid #d5e7f4;
  background:#f5fbff;
  color:#19425d;
}
.role-mini-badge.system{
  background:rgba(0,170,184,.14);
  color:#046170;
  border-color:rgba(0,170,184,.32);
}
#tab-roles .roles-form{
  display:flex;
  flex-direction:column;
  gap:.8rem;
}
#tab-roles .roles-system-hint{
  margin:0;
  padding:.55rem .7rem;
  border-radius:10px;
  border:1px solid #cfe9f5;
  background:linear-gradient(120deg,#f3fcff,#edf6ff);
  color:#2b4e66;
  font-size:.9rem;
}
#tab-roles .roles-permissions{
  display:flex;
  flex-direction:column;
  gap:.7rem;
  margin-top:.2rem;
}
#tab-roles .perm-group{
  border:1px solid #dbe8f5;
  border-radius:12px;
  background:#fff;
  box-shadow:0 8px 18px rgba(6,32,50,.06);
  overflow:hidden;
}
#tab-roles .perm-group-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  padding:.62rem .75rem;
  background:linear-gradient(120deg,#f7fcff,#eff8ff);
  border-bottom:1px solid #e3eef8;
}
#tab-roles .perm-group-head h5{
  margin:0;
  font-size:.96rem;
  color:#0f2739;
}
#tab-roles .perm-group-items{
  display:flex;
  flex-direction:column;
  gap:.2rem;
  padding:.45rem;
}
#tab-roles .perm-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.8rem;
  padding:.45rem .45rem;
  border-radius:10px;
}
#tab-roles .perm-item:hover{
  background:#f7fbff;
}
#tab-roles .perm-item .perm-label{
  display:flex;
  flex-direction:column;
  gap:.16rem;
  min-width:0;
}
#tab-roles .perm-item .perm-label strong{
  font-size:.93rem;
  color:#10283d;
}
#tab-roles .perm-item .perm-label span{
  font-size:.83rem;
  color:#4f6072;
}
#tab-roles .perm-item.is-disabled{
  opacity:.56;
}
#tab-roles .perm-item input[type="checkbox"]{
  margin-top:.12rem;
  inline-size:17px;
  block-size:17px;
  accent-color:#00aab8;
}
.team-btn.ghost.danger{
  border-color:#f3ccd5;
  color:#9f1f32;
  background:linear-gradient(140deg,#fff6f7,#ffe8ec);
}
.team-btn.ghost.danger:hover{
  border-color:#edb5c3;
  background:linear-gradient(140deg,#ffecef,#ffdce3);
}
@media (max-width: 980px){
  #tab-roles .roles-layout{
    grid-template-columns:1fr;
  }
}

/* Account: Benutzer hinzufügen Modal */
#addUserModal{
  --org-invite-viewport-gap: clamp(18px, 4vh, 44px);
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--org-invite-viewport-gap) clamp(10px, 2vw, 32px);
  background: radial-gradient(circle at top, rgba(7,182,197,.25), rgba(4,10,24,.9));
  backdrop-filter: blur(4px);
  z-index: 12000;
}
#addUserModal[hidden]{ display: none !important; }
#addUserModal.open{ display: flex !important; }

body.account-page #orgMemberConfirmModal.confirm-modal,
body.account-page #orgSubscriptionManageModal.confirm-modal{
  z-index: 12120;
}
body.account-page #orgSubscriptionChangeConfirmModal.confirm-modal{
  z-index: 12130;
}

#addUserModal .org-invite-shell{
  width: min(840px, 96vw);
  height: calc(100vh - (var(--org-invite-viewport-gap) * 2));
  height: calc(100dvh - (var(--org-invite-viewport-gap) * 2));
  display: flex;
  justify-content: center;
  padding: 0;
}
#addUserModal .org-invite-card{
  max-height: 100%;
}
#addUserModal .org-invite-subline{
  margin-bottom: 0;
}
#addUserModal .org-invite-body{
  flex: 1;
  padding: 0 36px 32px;
  overflow-y: auto;
}
#addUserModal .org-invite-form{
  display: flex;
  flex-direction: column;
  gap: 18px;
}
#addUserModal .org-invite-section{
  background: linear-gradient(135deg, #f9fcff, #ffffff);
  border: 1px solid #dbe8f5;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 14px 34px rgba(6,32,50,.08);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#addUserModal .org-section-title{
  margin: 0;
  font-size: 1.05rem;
  color: #0b2239;
  font-weight: 700;
}
#addUserModal .org-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#addUserModal .org-field label{
  font-weight: 600;
  color: #0f1c30;
}
#addUserModal .org-field-hint{
  margin: 0;
  color: #5c6c80;
  font-size: .88rem;
}
#addUserModal .org-package-assignment-grid{
  display: grid;
  gap: 8px;
}
#addUserModal .org-package-assignment{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #dbe8f5;
  border-radius: 12px;
  background: #f8fcff;
  padding: 10px 12px;
}
#addUserModal .org-package-assignment span{
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #123556;
  font-weight: 700;
}
#addUserModal .org-package-assignment small{
  color: #60728a;
}
#addUserModal .org-package-assignment input{
  width: 18px;
  height: 18px;
  accent-color: #00b7c4;
}
#addUserModal input,
#addUserModal select,
#addUserModal textarea{
  width: 100%;
  border: 1px solid #d0d5dd;
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
  font-size: 1rem;
  box-sizing: border-box;
  transition: border-color .16s ease, box-shadow .16s ease;
}
#addUserModal input:focus,
#addUserModal select:focus,
#addUserModal textarea:focus{
  border-color: #00b7c4;
  box-shadow: 0 0 0 3px rgba(0,183,196,.18);
  outline: none;
}
#addUserModal .org-role-toggle{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #dbe8f5;
  border-radius: 12px;
  background: #f8fcff;
  box-shadow: 0 10px 26px rgba(6,32,50,.08);
}
#addUserModal .org-role-text{
  flex: 1;
  text-align: left;
}
#addUserModal .org-role-toggle input{
  margin-top: 0;
  accent-color: #00b7c4;
  width: 18px;
  height: 18px;
}
#addUserModal .org-role-toggle strong{
  display: block;
  color: #0c1f30;
  font-size: .98rem;
  margin-bottom: 2px;
}
#addUserModal .org-role-toggle p{
  margin: 2px 0 0;
  color: #4c5c70;
  font-size: .93rem;
}
#addUserModal .org-invite-actions{
  display: flex;
  justify-content: flex-start;
  margin-top: 4px;
}
#addUserModal .org-invite-submit{
  align-self: flex-start;
}
@media (max-width: 720px){
  #addUserModal .org-invite-body{ padding: 0 22px 26px; }
  #addUserModal .org-invite-section{ padding: 14px 14px; }
}

/* Account: Rollen/Rechte Audit-Log Modal */
#roleAuditLogModal{
  --role-audit-viewport-gap: clamp(18px, 4vh, 40px);
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--role-audit-viewport-gap) clamp(10px, 2vw, 32px);
  background: radial-gradient(circle at top, rgba(7,182,197,.22), rgba(4,10,24,.9));
  backdrop-filter: blur(4px);
  z-index: 12010;
}
#roleAuditLogModal[hidden]{ display: none !important; }
#roleAuditLogModal.open{ display: flex !important; }

#roleAuditLogModal .role-audit-shell{
  width: min(1120px, 98vw);
  height: calc(100vh - (var(--role-audit-viewport-gap) * 2));
  height: calc(100dvh - (var(--role-audit-viewport-gap) * 2));
  display: flex;
  justify-content: center;
  padding: 0;
}
#roleAuditLogModal .role-audit-card{
  max-height: 100%;
  width: 100%;
}
#roleAuditLogModal .role-audit-subline{
  margin-bottom: 0;
}
#roleAuditLogModal .role-audit-body{
  flex: 1;
  padding: 0 34px 30px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#roleAuditLogModal .role-audit-toolbar{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 3;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,.94) 100%);
  padding: 4px 0 8px;
}
#roleAuditLogModal .role-audit-filters{
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
  flex: 1;
  min-width: min(740px, 100%);
}
#roleAuditLogModal .role-audit-filter{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#roleAuditLogModal .role-audit-filter span{
  font-size: .85rem;
  color: #31506c;
  font-weight: 700;
}
#roleAuditLogModal .role-audit-filter select{
  width: 100%;
  border: 1px solid #d0dbe8;
  border-radius: 11px;
  padding: 10px 12px;
  background: #fff;
  color: #102435;
  font-size: .95rem;
}
#roleAuditLogModal .role-audit-filter select:focus{
  outline: none;
  border-color: #00b7c4;
  box-shadow: 0 0 0 3px rgba(0,183,196,.18);
}
#roleAuditLogModal .role-audit-actions{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#roleAuditLogModal .role-audit-actions .team-btn{
  padding: 10px 14px;
  font-size: .89rem;
}
#roleAuditLogModal .role-audit-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#roleAuditLogModal .role-audit-item{
  border: 1px solid #d7e6f3;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(7,32,56,.08);
  padding: 12px 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#roleAuditLogModal .role-audit-item-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
#roleAuditLogModal .role-audit-item-title{
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#roleAuditLogModal .role-audit-action{
  display: inline-flex;
  align-items: center;
  padding: .22rem .58rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .01em;
  background: linear-gradient(120deg, #e6fbff, #eaf4ff);
  color: #0e4961;
  border: 1px solid #cde7f4;
}
#roleAuditLogModal .role-audit-time{
  color: #4e6074;
  font-size: .84rem;
  font-weight: 600;
}
#roleAuditLogModal .role-audit-summary{
  margin: 0;
  color: #1a334a;
  font-size: .92rem;
}
#roleAuditLogModal .role-audit-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#roleAuditLogModal .role-audit-meta span{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #dbe8f5;
  background: #f7fbff;
  color: #204059;
  border-radius: 999px;
  padding: .2rem .56rem;
  font-size: .78rem;
}
#roleAuditLogModal .role-audit-diff{
  border-top: 1px dashed #d8e4f1;
  padding-top: 8px;
}
#roleAuditLogModal .role-audit-diff summary{
  cursor: pointer;
  color: #10426c;
  font-weight: 700;
  font-size: .86rem;
}
#roleAuditLogModal .role-audit-diff-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
#roleAuditLogModal .role-audit-diff-grid.role-audit-diff-grid--readable{
  grid-template-columns: 1fr;
  border: 1px solid #dbe8f5;
  border-radius: 11px;
  background: #fbfdff;
  overflow: hidden;
  gap: 0;
}
#roleAuditLogModal .role-audit-diff-row{
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 8px 10px;
  border-top: 1px solid #e8f0f8;
}
#roleAuditLogModal .role-audit-diff-row:first-child{
  border-top: none;
}
#roleAuditLogModal .role-audit-diff-row > span{
  font-size: .82rem;
  color: #18334f;
  word-break: break-word;
}
#roleAuditLogModal .role-audit-diff-row > span:nth-child(2){
  color: #6b7c90;
}
#roleAuditLogModal .role-audit-diff-row > span:nth-child(3){
  color: #0e4961;
  font-weight: 600;
}
#roleAuditLogModal .role-audit-diff-row.role-audit-diff-head{
  background: #eff7ff;
}
#roleAuditLogModal .role-audit-diff-row.role-audit-diff-head > span{
  color: #254663;
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
#roleAuditLogModal .role-audit-diff-row .role-audit-diff-field{
  font-weight: 700;
  color: #193e5d;
}
#roleAuditLogModal .role-audit-diff-empty{
  margin: 0;
  padding: 10px;
  color: #5b6f85;
  font-size: .84rem;
}
#roleAuditLogModal .role-audit-diff-col{
  border: 1px solid #dbe8f5;
  border-radius: 11px;
  overflow: hidden;
  background: #f8fcff;
}
#roleAuditLogModal .role-audit-diff-col strong{
  display: block;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #33506b;
  background: #eff7ff;
  border-bottom: 1px solid #dbe8f5;
  padding: 7px 9px;
}
#roleAuditLogModal .role-audit-diff-col pre{
  margin: 0;
  font-size: .78rem;
  color: #16334f;
  max-height: 220px;
  overflow: auto;
  padding: 9px;
  white-space: pre-wrap;
  word-break: break-word;
  background: #fbfdff;
}
@media (max-width: 1100px){
  #roleAuditLogModal .role-audit-filters{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: min(420px, 100%);
  }
}
@media (max-width: 820px){
  #roleAuditLogModal .role-audit-body{
    padding: 0 20px 24px;
  }
  #roleAuditLogModal .role-audit-diff-grid{
    grid-template-columns: 1fr;
  }
  #roleAuditLogModal .role-audit-diff-row{
    grid-template-columns: 1fr;
    gap: 4px;
  }
  #roleAuditLogModal .role-audit-diff-row.role-audit-diff-head{
    display: none;
  }
  #roleAuditLogModal .role-audit-diff-row > span{
    position: relative;
    padding-left: 108px;
    min-height: 18px;
  }
  #roleAuditLogModal .role-audit-diff-row > span::before{
    position: absolute;
    left: 0;
    top: 0;
    width: 98px;
    font-size: .72rem;
    color: #577089;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
  }
  #roleAuditLogModal .role-audit-diff-row > span:nth-child(1)::before{ content: "Feld"; }
  #roleAuditLogModal .role-audit-diff-row > span:nth-child(2)::before{ content: "Vorher"; }
  #roleAuditLogModal .role-audit-diff-row > span:nth-child(3)::before{ content: "Nachher"; }
}
@media (max-width: 640px){
  #roleAuditLogModal{
    --role-audit-viewport-gap: 0;
    padding: 0;
  }
  #roleAuditLogModal .role-audit-shell{
    width: 100%;
    height: 100dvh;
  }
  #roleAuditLogModal .role-audit-card{
    border-radius: 0;
  }
  #roleAuditLogModal .role-audit-actions .team-btn{
    width: 100%;
    justify-content: center;
  }
  #roleAuditLogModal .role-audit-filters{
    grid-template-columns: 1fr;
    min-width: 0;
  }
}


.home-register__company-cta {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: 18px;
  background: #e8f9f8;
  border: 1px solid rgba(0, 160, 173, 0.25);
}
.home-register__company-cta p {
  margin: 0 0 0.8rem;
  font-weight: 600;
  color: #0f4a51;
}
.home-register__company-btn {
  border: none;
  border-radius: 999px;
  padding: 0.65rem 1.5rem;
  background: linear-gradient(120deg, #00c2c7, #009fb8);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(0, 160, 173, 0.35);
}
.home-register__company-btn:hover {
  transform: translateY(-1px);
}
.company-modal .company-modal-intro {
  background: #f6fbfb;
  border-radius: 16px;
  border: 1px solid rgba(0, 160, 173, 0.2);
  padding: 1.25rem 1.35rem;
  margin-bottom: 1.4rem;
}
.company-benefits {
  list-style: none;
  padding: 0;
  margin: 0.8rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  color: #0f2b33;
}
.company-benefits li {
  position: relative;
  padding-left: 1.6rem;
  line-height: 1.4;
}
.company-benefits li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: #00b0af;
  font-weight: 700;
}
.company-modal .register-btn-modern {
  background: linear-gradient(120deg, #00b6c4, #008fb2);
}

#registerTab .reg-selected-package-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: .35em;
}

#registerTab .reg-selected-package-head label {
  display: block;
  margin: 0;
}

#registerTab .reg-selected-package-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  color: #0a7b88;
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  padding: 2px 2px;
  border-bottom: 1px solid rgba(10, 123, 136, 0.35);
  text-align: right;
  white-space: nowrap;
}

#registerTab .reg-selected-package-link:hover {
  color: #095f69;
  border-bottom-color: rgba(9, 95, 105, 0.6);
}

#registerTab .reg-selected-package-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#registerTab .reg-selected-package-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(0, 142, 199, 0.28);
  background: rgba(0, 142, 199, 0.1);
  color: #0a4f76;
  padding: 4px 12px;
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.2;
}

#registerTab .reg-package-license-list {
  display: grid;
  gap: 8px;
}

#registerTab .reg-package-license-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(0, 142, 199, 0.18);
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fcff, #f2f9ff);
  padding: 10px 12px;
}

#registerTab .reg-package-license-row strong,
#registerTab .reg-package-license-row small {
  display: block;
}

#registerTab .reg-package-license-row strong {
  color: #123556;
  font-size: .93rem;
}

#registerTab .reg-package-license-row small {
  color: #60728a;
  font-size: .78rem;
}

#registerTab .seats-stepper--mini input {
  width: 64px;
  min-width: 64px;
}

#registerTab .reg-package-license-row.is-selected {
  border-color: rgba(0, 168, 186, .5);
  background: linear-gradient(180deg, #eafdff, #f5feff);
  box-shadow: 0 10px 24px rgba(0, 168, 186, .12);
}

#registerTab .reg-trial-renewal {
  margin: 14px 0 18px;
  padding: 16px;
  border: 1px solid rgba(13, 99, 213, .24);
  border-radius: 14px;
  background: #f7faff;
}

#registerTab .reg-trial-renewal[hidden] {
  display: none !important;
}

#registerTab .reg-trial-renewal h3 {
  margin: 0 0 10px;
  color: #123556;
  font-size: 1.05rem;
}

#registerTab .reg-trial-renewal__choice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

#registerTab .reg-trial-renewal__choice input[type="checkbox"] {
  width: 1rem !important;
  min-width: 1rem;
  height: 1rem;
  display: block !important;
  margin: 4px 2px 0 2px !important;
  flex: 0 0 auto;
}

#registerTab .reg-trial-renewal__choice label {
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
  color: #143b62;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

#registerTab .reg-trial-renewal__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  margin: 12px 0 8px;
}

#registerTab .reg-trial-renewal__details div {
  min-width: 0;
  padding-top: 7px;
  border-top: 1px solid rgba(18, 53, 86, .1);
}

#registerTab .reg-trial-renewal__details dt {
  color: #60728a;
  font-size: .76rem;
}

#registerTab .reg-trial-renewal__details dd {
  margin: 2px 0 0;
  color: #123556;
  font-size: .88rem;
  font-weight: 700;
}

@media (max-width: 560px) {
  #registerTab .reg-package-license-row {
    grid-template-columns: 1fr;
  }

  #registerTab .reg-trial-renewal__details {
    grid-template-columns: 1fr;
  }
}
/* Account: Genehmigungsprozesse */
#tab-approvals .approvals-card{ padding:1.2rem 1.4rem; }
#tab-approvals .approvals-layout{
  display:grid;
  grid-template-columns:minmax(260px, 0.9fr) minmax(420px, 1.4fr);
  gap:1rem;
  align-items:start;
}
#tab-approvals .approval-rules-list{
  display:flex;
  flex-direction:column;
  gap:.65rem;
}
#tab-approvals .approval-rule-item{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:.85rem;
  border:1px solid rgba(27, 78, 133, .14);
  border-radius:16px;
  background:#fff;
  color:#17345d;
  padding:.82rem .9rem;
  text-align:left;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(20, 46, 86, .06);
}
#tab-approvals .approval-rule-item:hover,
#tab-approvals .approval-rule-item.active{
  border-color:#82b4f8;
  background:linear-gradient(135deg, #f7fbff 0%, #eef6ff 100%);
}
#tab-approvals .approval-rule-main{
  display:flex;
  flex-direction:column;
  gap:.25rem;
  min-width:0;
}
#tab-approvals .approval-rule-title{
  font-weight:800;
  color:#102a4c;
}
#tab-approvals .approval-rule-meta{
  font-size:.82rem;
  color:#5c6f89;
  line-height:1.35;
}
#tab-approvals .approval-rule-badges{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.3rem;
  flex:0 0 auto;
}
#tab-approvals .approval-rule-form{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
#tab-approvals .approvals-empty-card{
  min-height:320px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.75rem;
  text-align:center;
  color:#526780;
  background:linear-gradient(135deg, #fbfdff 0%, #f1f7ff 100%);
  border:1px dashed rgba(27, 78, 133, .22);
}
#tab-approvals .approvals-empty-card > .material-icons{
  width:54px;
  height:54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  color:#0c5db8;
  background:rgba(12, 93, 184, .1);
  font-size:1.9rem;
}
#tab-approvals .approvals-empty-card h4{
  margin:0;
  color:#102a4c;
  font-size:1.05rem;
}
#tab-approvals .approvals-empty-card p{
  max-width:440px;
  margin:0;
  line-height:1.5;
}
#tab-approvals .approval-help-card{
  margin:.95rem 0 1.1rem;
  border:1px solid rgba(27, 78, 133, .14);
  border-radius:18px;
  background:linear-gradient(135deg, #f8fbff 0%, #eef6ff 100%);
  box-shadow:0 14px 30px rgba(20, 46, 86, .07);
  overflow:hidden;
}
#tab-approvals .approval-help-card summary{
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.95rem 1rem;
  cursor:pointer;
  color:#12325d;
  font-weight:800;
  list-style:none;
}
#tab-approvals .approval-help-card summary::-webkit-details-marker{
  display:none;
}
#tab-approvals .approval-help-card summary .material-icons{
  color:#d08a00;
  font-size:1.3rem;
}
#tab-approvals .approval-help-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.75rem;
  padding:0 1rem 1rem;
}
#tab-approvals .approval-help-grid article{
  border:1px solid rgba(27, 78, 133, .1);
  border-radius:14px;
  background:rgba(255,255,255,.76);
  padding:.8rem .85rem;
}
#tab-approvals .approval-help-grid h4{
  margin:0 0 .32rem;
  color:#102a4c;
  font-size:.96rem;
}
#tab-approvals .approval-help-grid p{
  margin:0;
  color:#526780;
  font-size:.88rem;
  line-height:1.45;
}
#tab-approvals .org-field select{
  min-height:44px;
  appearance:auto;
  background:#fff;
  color:#102a4c;
  border:1px solid rgba(27, 78, 133, .18);
}
#tab-approvals .org-field select option{
  background:#fff;
  color:#102a4c;
}
#tab-approvals .org-field select:focus{
  border-color:#82b4f8;
  box-shadow:0 0 0 3px rgba(130, 180, 248, .22);
}
#tab-approvals .approval-form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.85rem;
}
#tab-approvals .approval-rule-options{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.75rem;
}
#tab-approvals .approval-role-picker{
  border:1px solid rgba(27, 78, 133, .12);
  border-radius:18px;
  background:#f8fbff;
  padding:.95rem;
}
#tab-approvals .approval-role-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.65rem;
}
#tab-approvals .approval-role-option{
  display:grid;
  grid-template-columns:22px minmax(0, 1fr);
  align-items:center;
  column-gap:.7rem;
  border:1px solid rgba(27, 78, 133, .12);
  border-radius:14px;
  padding:.72rem;
  background:#fff;
}
#tab-approvals .approval-role-option input[type="checkbox"]{
  width:18px;
  height:18px;
  margin:0;
  justify-self:center;
  align-self:center;
}
#tab-approvals .approval-role-option span{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.18rem;
}
#tab-approvals .approval-role-option small{
  color:#6b7c92;
  line-height:1.35;
}
#tab-approvals .approval-sequential-builder{
  border:1px solid rgba(27, 78, 133, .12);
  border-radius:18px;
  background:#f8fbff;
  padding:.95rem;
}
#tab-approvals .approval-sequential-steps{
  display:flex;
  flex-direction:column;
  gap:.65rem;
}
#tab-approvals .approval-step-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:end;
  gap:.75rem;
  border:1px solid rgba(27, 78, 133, .12);
  border-radius:14px;
  background:#fff;
  padding:.75rem;
}
#tab-approvals .approval-step-title{
  margin:0 0 .32rem;
  color:#17345d;
  font-size:.83rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}
#tab-approvals .approval-step-remove{
  min-height:42px;
  border:1px solid rgba(181, 58, 27, .2);
  color:#a33a1f;
  background:#fff8f6;
  border-radius:12px;
  padding:0 .8rem;
  font-weight:800;
  cursor:pointer;
}
#tab-approvals .approval-rule-preview{
  border:1px solid #c9ddf7;
  border-radius:16px;
  background:linear-gradient(135deg, #f6fbff 0%, #edf6ff 100%);
  padding:.9rem 1rem;
  color:#17345d;
}
#tab-approvals .approval-rule-preview strong{
  display:block;
  margin-bottom:.25rem;
  color:#0f2c55;
}
#tab-approvals .approval-rule-preview p{
  margin:0;
  line-height:1.45;
}
#tab-approvals details.approval-rule-preview > summary{
  cursor:pointer;
  font-weight:800;
  color:#0f2c55;
}
#tab-approvals #approvalRuleVersionsList{
  margin-top:.8rem;
}
#tab-approvals .approval-rule-version-item{
  cursor:default;
  background:rgba(255, 255, 255, .78);
}
#tab-approvals .approval-rule-version-item:hover{
  border-color:rgba(27, 78, 133, .14);
  background:rgba(255, 255, 255, .78);
}
#tab-approvals #approvalRuleConflictResult .data-list{
  margin:.65rem 0 .4rem;
}
#tab-approvals .role-mini-badge.is-muted{
  background:#eef2f6;
  color:#69788a;
}
@media (max-width: 980px){
  #tab-approvals .approvals-layout,
  #tab-approvals .approval-form-grid,
  #tab-approvals .approval-rule-options,
  #tab-approvals .approval-role-list,
  #tab-approvals .approval-help-grid{
    grid-template-columns:1fr;
  }
  #tab-approvals .approval-step-row{
    grid-template-columns:1fr;
  }
}

/* ===== Startseite: End-to-End Refresh ===== */
.page-home {
  background:
    radial-gradient(circle at top left, rgba(18, 217, 213, 0.12), transparent 28%),
    radial-gradient(circle at top right, rgba(14, 163, 220, 0.14), transparent 24%),
    linear-gradient(180deg, #f6fbff 0%, #eef5fb 36%, #f8fbfe 100%);
}

.page-home .home-main {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 0 clamp(3rem, 6vw, 5rem);
}

.page-home .home-section-inner {
  max-width: 1180px;
  padding: 0 clamp(1rem, 3vw, 2.5rem);
}

.page-home .home-section-intro {
  max-width: 820px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
}

.page-home .home-section-intro h2,
.page-home .innovation-agent__content h2,
.page-home .home-hero__panel-title {
  margin: 0;
  line-height: 1.08;
}

.page-home .home-section-intro h2,
.page-home .innovation-agent__content h2 {
  font-size: clamp(2rem, 4.1vw, 3rem);
  color: #0f2744;
}

.page-home .home-lead {
  margin-top: 0.95rem;
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  line-height: 1.7;
  color: #4b6077;
}

.page-home .home-eyebrow {
  margin: 0 0 0.7rem;
  letter-spacing: 0.24em;
  color: #0d78c6;
}

.page-home .home-highlights,
.page-home .innovation-agent,
.page-home .home-process,
.page-home .home-module-strip,
.page-home .home-trust,
.page-home .home-advantages,
.page-home .home-register {
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.page-home .home-hero {
  width: min(1220px, 96vw);
  min-height: clamp(680px, 85vh, 840px);
  margin: clamp(1rem, 2vw, 1.5rem) auto clamp(2.8rem, 6vw, 4.6rem);
  padding: clamp(1rem, 2vw, 1.4rem);
  border-radius: 36px;
  background:
    radial-gradient(circle at 15% 20%, rgba(22, 215, 214, 0.18), transparent 24%),
    linear-gradient(135deg, rgba(5, 21, 43, 0.92), rgba(5, 37, 71, 0.94) 48%, rgba(9, 59, 86, 0.9));
  box-shadow: 0 36px 90px rgba(2, 12, 28, 0.32);
}

.page-home .home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(4, 17, 35, 0.34), rgba(4, 17, 35, 0.12) 45%, rgba(18, 217, 213, 0.08));
  pointer-events: none;
  z-index: 1;
}

.page-home .home-hero .hero-video {
  opacity: 0.18;
  transform: scale(1.08);
  filter: saturate(112%) blur(1px);
}

.page-home .home-hero__overlay {
  margin-top: calc(var(--hero-logo-chip-clearance) + 0.35rem);
  padding-top: 0;
}

.page-home .home-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(320px, 0.84fr);
  gap: clamp(1.4rem, 3vw, 2.8rem);
  align-items: stretch;
  width: 100%;
}

.page-home .home-hero__content {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  padding: clamp(1.1rem, 1.8vw, 1.8rem) 0;
}

.page-home .home-hero__eyebrow {
  margin: 0;
  color: #7fdfff;
}

.page-home .home-hero .hero-inline-heading {
  margin: 0;
  max-width: 13ch;
  text-align: left;
  font-size: clamp(2.5rem, 5vw, 4.2rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.page-home .home-hero__lead {
  margin: 0;
  max-width: 62ch;
  color: rgba(233, 241, 252, 0.94);
  font-size: clamp(1.05rem, 1.55vw, 1.2rem);
  line-height: 1.72;
}

.page-home .home-hero__badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.page-home .home-hero__badges li {
  padding: 0.6rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(160, 211, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #f2f8ff;
  font-size: 0.94rem;
  font-weight: 600;
  backdrop-filter: blur(12px);
}

.page-home .home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.page-home .home-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0.9rem 1.45rem;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.page-home .home-hero__cta:focus-visible {
  outline: 3px solid rgba(127, 223, 255, 0.42);
  outline-offset: 3px;
}

.page-home .home-hero__cta--primary {
  color: #08223d;
  background: linear-gradient(135deg, #50e1ef, #8fe3ff);
  box-shadow: 0 18px 42px rgba(80, 225, 239, 0.28);
}

.page-home .home-hero__cta--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 24px 50px rgba(80, 225, 239, 0.34);
}

.page-home .home-hero__cta--secondary {
  color: #eef7ff;
  border: 1px solid rgba(173, 212, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
}

.page-home .home-hero__cta--secondary:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(173, 212, 255, 0.34);
}

.page-home .home-hero__signals {
  max-width: none;
  margin: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.page-home .home-hero__signals .hero-module-card {
  min-height: 100%;
  padding: 1.15rem 1.15rem 1.1rem;
  border-radius: 22px;
  background: rgba(8, 23, 43, 0.7);
  border: 1px solid rgba(173, 212, 255, 0.12);
  box-shadow: 0 18px 40px rgba(1, 11, 24, 0.28);
}

.page-home .home-hero__signals .hero-module-card::before {
  border-top-width: 3px;
}

.page-home .home-hero__signals .hero-module-card h3 {
  margin: 0 0 0.35rem;
  color: #ffffff;
  font-size: 1.05rem;
  line-height: 1.3;
}

.page-home .home-hero__signals .hero-module-card p {
  color: #d5e7f8;
  font-size: 0.95rem;
}

.page-home .home-hero__panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.4rem, 2.2vw, 2rem);
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(4, 19, 40, 0.9), rgba(8, 32, 59, 0.92));
  border: 1px solid rgba(152, 205, 255, 0.18);
  box-shadow: 0 24px 50px rgba(4, 15, 31, 0.3);
}

.page-home .home-hero__panel::before {
  content: "";
  position: absolute;
  inset: auto auto -20% -15%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(80, 225, 239, 0.2), transparent 68%);
  pointer-events: none;
}

.page-home .home-hero__panel-label {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #80e4ff;
  font-weight: 700;
}

.page-home .home-hero__panel-title {
  color: #ffffff;
  font-size: clamp(1.55rem, 2vw, 2rem);
  font-weight: 700;
}

.page-home .home-hero__panel > p {
  margin: 0;
  color: #d6e6f7;
  line-height: 1.7;
}

.page-home .home-hero__panel-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.8rem;
}

.page-home .home-hero__panel-flow li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: center;
  padding: 0.85rem 0.95rem;
  border-radius: 18px;
  border: 1px solid rgba(160, 211, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #f2f7fb;
}

.page-home .home-hero__panel-flow span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4ae5eb, #7dc8ff);
  color: #06213d;
  font-weight: 800;
  font-size: 0.88rem;
}

.page-home .home-hero__panel-note {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(160, 211, 255, 0.14);
  color: #e8f2fb;
}

.page-home .home-hero__panel-note .material-icons {
  font-size: 1.4rem;
  color: #72ddff;
}

.page-home .home-hero__panel-note p {
  margin: 0;
  line-height: 1.65;
}

.page-home .home-highlights--innovation {
  padding-top: 0;
}

.page-home .innovation-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.35rem);
}

.page-home .innovation-card {
  grid-column: span 3;
  position: relative;
  overflow: hidden;
  padding: 1.45rem 1.4rem 1.35rem;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(13, 44, 81, 0.08);
  box-shadow: 0 20px 48px rgba(10, 35, 66, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.page-home .innovation-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 4px solid rgba(16, 190, 214, 0.88);
  border-radius: 24px;
  pointer-events: none;
}

.page-home .innovation-card:hover,
.page-home .home-module-pill--system:hover,
.page-home .home-trust__badge:hover,
.page-home .home-adv-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 26px 58px rgba(10, 35, 66, 0.12);
}

.page-home .innovation-card--wide {
  grid-column: span 6;
}

.page-home .innovation-card--accent {
  background: linear-gradient(145deg, #072340, #0a365d 55%, #0b5470);
  border-color: rgba(141, 207, 255, 0.2);
}

.page-home .innovation-card .material-icons,
.page-home .home-trust__badge .material-icons {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
}

.page-home .innovation-card .material-icons {
  background: linear-gradient(135deg, #dff9fd, #e8f1ff);
  color: #0b6fbe;
}

.page-home .innovation-card--accent .material-icons {
  background: rgba(255, 255, 255, 0.12);
  color: #81ecff;
}

.page-home .innovation-card h3 {
  margin: 1rem 0 0.55rem;
  font-size: 1.12rem;
  line-height: 1.35;
  color: #0d2743;
}

.page-home .innovation-card--accent h3,
.page-home .innovation-card--accent p {
  color: #f3f9ff;
}

.page-home .innovation-card p {
  margin: 0;
  color: #53657b;
  line-height: 1.66;
}

.page-home .innovation-agent__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(320px, 0.84fr);
  gap: clamp(1.2rem, 3vw, 2.4rem);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border-radius: 32px;
  background:
    radial-gradient(circle at top right, rgba(77, 231, 241, 0.18), transparent 28%),
    linear-gradient(135deg, #06203b, #0a3057 54%, #0b4a68);
  border: 1px solid rgba(134, 200, 255, 0.16);
  box-shadow: 0 28px 70px rgba(2, 14, 30, 0.2);
}

.page-home .innovation-agent__content h2,
.page-home .innovation-agent__content .home-lead,
.page-home .innovation-agent__content .home-eyebrow,
.page-home .innovation-agent__list li,
.page-home .innovation-agent__callout h3,
.page-home .innovation-agent__callout p,
.page-home .innovation-agent__quote {
  color: #eef6ff;
}

.page-home .innovation-agent__content .home-eyebrow {
  color: #7be9ff;
}

.page-home .innovation-agent__content .home-lead {
  max-width: none;
  color: #d7e7f9;
}

.page-home .innovation-agent__list {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.page-home .innovation-agent__list li,
.page-home .innovation-agent__callout {
  border-radius: 20px;
  border: 1px solid rgba(163, 210, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.page-home .innovation-agent__list li {
  position: relative;
  padding: 0.95rem 1rem 0.95rem 3rem;
  line-height: 1.55;
}

.page-home .innovation-agent__list li::before {
  content: "done";
  position: absolute;
  left: 1rem;
  top: 0.95rem;
  font-family: "Material Icons";
  font-size: 1.1rem;
  color: #81ecff;
}

.page-home .innovation-agent__aside {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.page-home .innovation-agent__callout {
  padding: 1.2rem 1.15rem;
}

.page-home .innovation-agent__callout .material-icons {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  background: rgba(255, 255, 255, 0.08);
  color: #81ecff;
}

.page-home .innovation-agent__callout h3 {
  margin: 0.85rem 0 0.35rem;
  font-size: 1.06rem;
}

.page-home .innovation-agent__callout p {
  margin: 0;
  line-height: 1.65;
  color: #d9e8f6;
}

.page-home .innovation-agent__quote {
  padding: 1.2rem 1.25rem;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(80, 225, 239, 0.16), rgba(255, 255, 255, 0.1));
  border: 1px solid rgba(160, 211, 255, 0.18);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.6;
}

.page-home .home-process {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(245, 250, 255, 0.95));
}

.page-home .home-process__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.page-home .home-process__step {
  position: relative;
  padding: 1.35rem 1.35rem 1.25rem;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(13, 44, 81, 0.08);
  box-shadow: 0 18px 40px rgba(10, 35, 66, 0.07);
}

.page-home .home-process__step::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  border-top: 4px solid rgba(17, 192, 213, 0.82);
  pointer-events: none;
}

.page-home .home-process__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 30px;
  padding: 0 0.6rem;
  border-radius: 999px;
  background: #e6f8fd;
  color: #0b6fbe;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.page-home .home-process__step h3 {
  margin: 0.95rem 0 0.45rem;
  color: #102949;
  font-size: 1.08rem;
}

.page-home .home-process__step p {
  margin: 0;
  color: #4f6278;
  line-height: 1.62;
}

.page-home .home-module-strip--expanded {
  background: linear-gradient(180deg, #f7fbff 0%, #eef5fc 100%);
}

.page-home .home-module-grid--system {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
}

.page-home .home-module-pill--system {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.4rem 1.3rem;
  border-radius: 24px;
  border: 1px solid rgba(12, 49, 88, 0.08);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 48px rgba(11, 36, 67, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.page-home .home-module-pill--system .material-icons {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #dff7fd, #ecf3ff);
  color: #0c73c3;
  font-size: 1.45rem;
}

.page-home .home-module-pill--system h3 {
  margin: 0 0 0.45rem;
  color: #102949;
  font-size: 1.08rem;
  line-height: 1.35;
}

.page-home .home-module-pill--system p {
  margin: 0;
  color: #4f6278;
  line-height: 1.64;
}

.page-home .home-trust {
  background: linear-gradient(135deg, #051b32, #0a2e52 52%, #0a4967);
}

.page-home .home-trust .home-section-intro h2,
.page-home .home-trust .home-section-intro .home-lead,
.page-home .home-trust .home-section-intro .home-eyebrow {
  color: #eef7ff;
}

.page-home .home-trust .home-section-intro .home-eyebrow {
  color: #81ecff;
}

.page-home .home-trust .home-section-intro .home-lead {
  color: #d5e7f8;
}

.page-home .home-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.page-home .home-trust__badge {
  padding: 1.25rem 1.2rem 1.15rem;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(160, 211, 255, 0.12);
  box-shadow: 0 18px 44px rgba(3, 12, 28, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.page-home .home-trust__badge .material-icons {
  background: rgba(255, 255, 255, 0.1);
  color: #82ecff;
}

.page-home .home-trust__badge h3 {
  margin: 1rem 0 0.45rem;
  font-size: 1.02rem;
  color: #ffffff;
  line-height: 1.35;
}

.page-home .home-trust__badge p {
  margin: 0;
  color: #d6e6f6;
  line-height: 1.62;
}

.page-home .home-advantages--proof {
  background: linear-gradient(180deg, #f8fcff 0%, #eef5fb 100%);
}

.page-home .home-advantages__stage {
  width: 100%;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: clamp(1.2rem, 2.4vw, 1.8rem);
  align-items: stretch;
}

.page-home .home-advantages__visual {
  min-height: 100%;
  border-radius: 32px;
  box-shadow: 0 24px 60px rgba(15, 34, 58, 0.12);
}

.page-home .home-advantages__visual img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}

.page-home .home-advantages__cards {
  position: static;
  transform: none;
  width: auto;
  margin: 0;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.page-home .home-adv-card {
  padding: 1.4rem 1.4rem 1.35rem;
}

.page-home .home-adv-card__icon {
  margin: 0 0 0.95rem;
  background: linear-gradient(135deg, #dff7fd, #ecf3ff);
}

.page-home .home-adv-card__icon .material-icons {
  font-size: 1.5rem;
  color: #0c73c3;
}

.page-home .home-adv-card h3 {
  line-height: 1.34;
}

.page-home .home-adv-card p {
  line-height: 1.66;
}

.page-home .home-register {
  background: linear-gradient(180deg, #edf9fc 0%, #f5fbff 100%);
}

.page-home .home-register__inner {
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: clamp(1.2rem, 2.8vw, 2rem);
}

.page-home .home-register__card {
  border-radius: 28px;
  border: 1px solid rgba(12, 49, 88, 0.08);
  box-shadow: 0 22px 54px rgba(12, 45, 63, 0.08);
}

.page-home .home-register__card--form {
  background: linear-gradient(180deg, #fbfeff, #eff9ff);
}

.page-home .home-register__card p:not(.home-eyebrow),
.page-home .home-register__points,
.page-home .home-register .register-features {
  color: #48667a;
  line-height: 1.68;
}

.page-home .home-register__card h2 {
  margin: 0;
  color: #102949;
  font-size: clamp(1.9rem, 3vw, 2.45rem);
  line-height: 1.1;
}

.page-home .home-register__points,
.page-home .home-register .register-features {
  display: grid;
  gap: 0.55rem;
}

.page-home .home-register .register-form {
  gap: 0.85rem;
}

.page-home .home-register .register-form input[type="email"] {
  min-height: 54px;
  padding: 1rem 1.15rem;
  border-radius: 14px;
  border-color: #bddae7;
}

.page-home .home-register .register-form input[type="email"]:focus-visible {
  outline: 3px solid rgba(14, 163, 220, 0.2);
  outline-offset: 2px;
}

.page-home .home-register .register-form button {
  min-height: 54px;
  border-radius: 14px;
  font-size: 1rem;
}

.page-home .home-register__company-btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}

@media (max-width: 1120px) {
  .page-home .home-hero__layout,
  .page-home .innovation-agent__panel,
  .page-home .home-advantages__stage,
  .page-home .home-register__inner {
    grid-template-columns: 1fr;
  }

  .page-home .home-hero__panel,
  .page-home .innovation-agent__aside {
    max-width: 820px;
  }

  .page-home .innovation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-home .innovation-card,
  .page-home .innovation-card--wide {
    grid-column: auto;
  }

  .page-home .home-process__grid,
  .page-home .home-module-grid--system,
  .page-home .home-trust__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .page-home .home-hero {
    min-height: auto;
    border-radius: 28px;
  }

  .page-home .innovation-agent__list {
    grid-template-columns: 1fr;
  }

  .page-home .home-hero__signals {
    display: none;
  }

  .page-home .home-hero .hero-inline-heading {
    max-width: none;
    font-size: clamp(2.1rem, 8vw, 3.1rem);
  }

  .page-home .home-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .page-home .home-hero__cta {
    width: 100%;
  }
}

@media (max-width: 680px) {
  .page-home .home-highlights,
  .page-home .innovation-agent,
  .page-home .home-process,
  .page-home .home-module-strip,
  .page-home .home-trust,
  .page-home .home-advantages,
  .page-home .home-register {
    padding: 2.8rem 0;
  }

  .page-home .home-process__grid,
  .page-home .home-module-grid--system,
  .page-home .home-trust__grid,
  .page-home .innovation-grid {
    grid-template-columns: 1fr;
  }

  .page-home .home-hero__signals {
    grid-template-columns: 1fr;
  }

  .page-home .home-hero__panel {
    display: none;
  }

  .page-home .home-module-pill--system {
    grid-template-columns: 1fr;
  }

  .page-home .home-hero__badges {
    gap: 0.6rem;
  }

  .page-home .home-hero__badges li {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .page-home .home-advantages__visual img {
    min-height: 300px;
  }
}

/* ===== Startseite: Simplified / Leistungen-aligned ===== */
.page-home {
  background: linear-gradient(180deg, #f7fbff 0%, #eef5fb 100%);
}

.page-home .home-main {
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.page-home .home-hero {
  width: min(1040px, 92vw) !important;
  max-width: none;
  min-width: 0;
  height: clamp(500px, 68vh, 780px) !important;
  min-height: clamp(500px, 68vh, 780px) !important;
  margin: clamp(0.6rem, 2vw, 1.2rem) auto 2.2rem;
  padding: clamp(1.2rem, 3.2vw, 2.8rem);
  border-radius: 32px;
  position: relative;
  overflow: hidden;
  background: #03162a;
  box-shadow: 0 28px 70px rgba(2, 9, 21, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.page-home .home-hero::before {
  display: none;
}

.page-home .home-hero .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
  opacity: 0.4;
  filter: saturate(115%);
  background: #0077b6;
  pointer-events: none;
}

.page-home .home-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  min-height: auto;
  height: 100%;
  margin-top: 0;
  padding: clamp(1.2rem, 3.2vw, 2.8rem);
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  background: transparent !important;
  box-shadow: none !important;
}

.page-home .home-hero__content,
.page-home .home-hero__content--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  max-width: min(920px, 100%);
  margin: -3.25rem 0 0;
  padding: 0;
  text-align: center;
}

.page-home .home-hero__eyebrow {
  color: #7fdfff;
}

.page-home .home-hero .hero-inline-heading {
  max-width: 18ch;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(1.45rem, 2.7vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.page-home .home-hero .hero-inline-heading span {
  display: block;
}

.page-home .home-hero .leistungen-register-form {
  width: min(680px, 100%);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
  margin: 0.35rem auto 0;
  padding: 0.45rem;
  border-radius: 18px;
  border: 1px solid rgba(13, 48, 82, 0.18);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 20px 40px rgba(3, 17, 34, 0.2);
  box-sizing: border-box;
}

.page-home .home-hero .leistungen-register-form__icon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 12px;
  background: #e8f5ff;
  color: #0b6fb2;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

.page-home .home-hero .leistungen-register-form input[type="email"] {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  border: none;
  border-radius: 12px;
  padding: 0.95rem 0.8rem;
  font-size: 1rem;
  background: transparent;
  color: #0f2744;
  box-shadow: none;
}

.page-home .home-hero .leistungen-register-form input[type="email"]::placeholder {
  color: #607087;
}

.page-home .home-hero .leistungen-register-form input[type="email"]:focus {
  outline: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

.page-home .home-hero .leistungen-register-form:focus-within {
  border-color: rgba(18, 114, 181, 0.5);
  box-shadow: 0 0 0 3px rgba(18, 114, 181, 0.2), 0 20px 40px rgba(3, 17, 34, 0.2);
}

.page-home .home-hero .leistungen-register-form .register-form__cta {
  margin: 0;
  border: none;
  border-radius: 12px;
  padding: 0.95rem 1.3rem;
  background: linear-gradient(120deg, #0ec1d2, #14a3dc);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 10px 20px rgba(14, 163, 204, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.page-home .home-hero .leistungen-register-form .register-form__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(14, 163, 204, 0.32);
}

.page-home .home-hero__lead,
.page-home .home-hero__badges,
.page-home .home-hero__actions,
.page-home .home-hero__flow,
.page-home .home-hero__signals {
  display: none;
}

.page-home .home-hero__panel,
.page-home .home-hero__layout {
  display: none;
}

.page-home .features {
  padding: clamp(2.8rem, 4vw, 4.3rem) 0;
  background: #ffffff;
}

.page-home .home-modules-compact,
.page-home .home-trust-compact {
  background: #f7fbff;
}

.page-home .section-inner {
  width: 100%;
  max-width: min(1120px, 92vw);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 3rem);
  box-sizing: border-box;
}

.page-home .section-intro {
  text-align: center;
  margin-bottom: clamp(1.8rem, 3vw, 2.6rem);
}

.page-home .section-intro h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 2.9rem);
  color: #0f2744;
}

.page-home .section-intro .lead {
  margin: 0.85rem auto 0;
  max-width: 690px;
  color: #4b6077;
  font-size: 1rem;
  line-height: 1.58;
}

.page-home .feature-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  width: 100%;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}

.page-home .home-features-overview .feature-card-grid {
  max-width: 980px;
}

@media (min-width: 960px) {
  .page-home .feature-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-home .home-modules-compact .feature-card-grid,
  .page-home .home-trust-compact .feature-card-grid {
    max-width: 920px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.page-home .feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  align-items: center;
  min-width: 0;
  width: 100%;
  padding: 1.7rem 1.35rem;
  border-radius: 22px;
  border: 1px solid rgba(14, 57, 96, 0.08);
  background: #ffffff;
  box-shadow: 0 18px 38px rgba(14, 57, 96, 0.08);
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.page-home .feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 62px rgba(14, 57, 96, 0.12);
}

.page-home .feature-card:focus-within {
  box-shadow: 0 0 0 3px rgba(11, 111, 178, 0.2), 0 24px 52px rgba(14, 57, 96, 0.12);
}

.page-home .feature-card__icon {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: 18px;
  background: linear-gradient(135deg, #0b6fb2 0%, #22a6e3 100%);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 28px;
  box-shadow: 0 14px 28px rgba(34, 166, 227, 0.28);
}

.page-home .feature-card h3,
.page-home .feature-card p,
.page-home .home-register__card h2,
.page-home .home-register__card p,
.page-home .home-register__points li,
.page-home .register-features li {
  overflow-wrap: anywhere;
  hyphens: auto;
}

.page-home .feature-card h3 {
  margin: 0;
  max-width: 18ch;
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.35;
  color: #0c3051;
}

.page-home .feature-card p {
  margin: 0;
  max-width: 30ch;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #324b65;
}

.page-home .home-section-footer {
  margin-top: clamp(1.5rem, 3vw, 2.2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  text-align: center;
}

.page-home .home-section-footer p {
  margin: 0;
  max-width: 760px;
  color: #566a80;
  line-height: 1.6;
}

.page-home .home-inline-link {
  color: #0b6fb2;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(11, 111, 178, 0.22);
}

.page-home .home-inline-link--light {
  color: #eef7ff;
  border-bottom-color: rgba(238, 247, 255, 0.3);
}

.page-home .home-inline-link:hover {
  border-bottom-color: rgba(11, 111, 178, 0.55);
}

.page-home .home-inline-link--light:hover {
  border-bottom-color: rgba(238, 247, 255, 0.72);
}

.page-home .home-register {
  background: #f0f6fc;
}

.page-home .home-register__inner {
  gap: clamp(1.2rem, 2.4vw, 1.8rem);
}

.page-home .home-register__card {
  padding: clamp(1.6rem, 3vw, 2.2rem);
  border-radius: 24px;
  box-shadow: 0 20px 42px rgba(14, 57, 96, 0.08);
}

.page-home .home-register__card::before {
  border-top-width: 3px;
}

.page-home .home-register__card h2 {
  font-size: clamp(1.7rem, 3vw, 2.2rem);
}

.page-home .home-register__card p:not(.home-eyebrow) {
  font-size: 1rem;
  line-height: 1.58;
}

.page-home .home-register__points,
.page-home .home-register .register-features {
  gap: 0.45rem;
}

.page-home .home-register .register-form button {
  font-size: 0.98rem;
}

@media (max-width: 960px) {
  .page-home .home-register__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .page-home .home-hero {
    height: clamp(500px, 68vh, 780px) !important;
    min-height: clamp(500px, 68vh, 780px) !important;
  }

  .page-home .home-hero .hero-inline-heading {
    max-width: min(100%, 21rem);
    font-size: 1.7rem;
    line-height: 1.04;
    text-align: center;
  }

  .page-home .home-hero__overlay {
    height: 100%;
    min-height: auto;
    padding: 1.4rem;
    text-align: center;
  }

  .page-home .home-hero__content,
  .page-home .home-hero__content--center {
    align-items: center;
    margin-top: -2rem;
    text-align: center;
  }

  .page-home .home-hero .leistungen-register-form {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.6rem;
    margin-top: 0.75rem;
    width: min(100%, 22rem);
  }

  .page-home .home-hero .leistungen-register-form__icon {
    display: none;
  }

  .page-home .home-hero .leistungen-register-form input[type="email"] {
    flex: 0 0 auto;
    width: 100%;
    margin-bottom: 0;
    border-radius: 12px;
    background: #fff;
    text-align: center;
  }

  .page-home .home-hero .leistungen-register-form .register-form__cta {
    width: 100%;
    margin-bottom: 0;
  }

  .page-home .section-intro h2 {
    font-size: clamp(1.8rem, 7vw, 2.4rem);
  }

  .page-home .feature-card {
    padding: 1.5rem 1.1rem;
  }
}

@media (max-width: 560px) {
  .page-home .home-hero .leistungen-register-form {
    padding: 0.65rem;
  }

  .page-home .home-hero .leistungen-register-form__icon {
    display: none;
  }

  .page-home .home-hero .leistungen-register-form input[type="email"] {
    width: 100%;
    flex: 0 0 auto;
    padding: 0.85rem 0.7rem;
  }
}
.vendor-permission-locked {
  opacity: .55 !important;
  cursor: not-allowed !important;
  filter: saturate(.55);
}

.vendor-access-note {
  margin: .75rem 0 0;
  border: 1px solid #d7e4f2;
  border-radius: 12px;
  background: #f7fbff;
  color: #264761;
  padding: .8rem 1rem;
  line-height: 1.45;
}

.vendor-admin-grid {
  display: grid;
  gap: 1rem;
}

.vendor-admin-grid.two {
  grid-template-columns: minmax(0, 1fr) minmax(280px, .75fr);
  align-items: start;
}

.vendor-invite-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: .75rem;
  align-items: end;
}

.vendor-invite-panel {
  margin-top: .85rem;
}

.vendor-invite-panel + .success-msg {
  margin-top: .65rem;
}

.org-users-head #vendorInviteToggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
}

.vendor-invite-form .hub-modal-submit {
  align-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
}

.vendor-invite-form label,
.vendor-role-editor label {
  display: grid;
  gap: .3rem;
  font-weight: 700;
  color: #183654;
}

.vendor-invite-form input,
.vendor-invite-form select,
.vendor-role-editor input,
.vendor-role-editor textarea,
.vendor-role-editor select {
  border: 1px solid #cbd8e6;
  border-radius: 10px;
  padding: .7rem .8rem;
  font: inherit;
  background: #fff;
}

.vendor-role-list {
  display: grid;
  gap: .75rem;
}

.vendor-role-item {
  border: 1px solid #d7e4f2;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  text-align: left;
}

.vendor-role-item.is-active {
  border-color: #1596d2;
  box-shadow: 0 0 0 2px rgba(21, 150, 210, .12);
}

.vendor-role-toggle {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  padding: .85rem 1rem;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.vendor-role-toggle:hover,
.vendor-role-toggle:focus-visible {
  background: #f7fbff;
}

.vendor-role-title {
  display: grid;
  gap: .2rem;
  min-width: 0;
}

.vendor-role-title strong {
  display: block;
  color: #102033;
}

.vendor-role-title span {
  color: #60758b;
  font-size: .9rem;
  line-height: 1.35;
}

.vendor-role-meta {
  justify-self: end;
  white-space: nowrap;
  border-radius: 999px;
  background: #eef6fb;
  color: #24516d;
  font-size: .86rem;
  font-weight: 800;
  padding: .28rem .65rem;
}

.vendor-role-editor {
  display: grid;
  gap: .9rem;
  max-height: min(68vh, 680px);
  overflow: auto;
  padding: 1rem;
  border-top: 1px solid #e7eef6;
  background: #fbfdff;
}

.vendor-role-fields {
  display: grid;
  grid-template-columns: minmax(180px, .7fr) minmax(240px, 1fr);
  gap: .75rem;
}

.vendor-permission-groups {
  display: grid;
  gap: .9rem;
}

.vendor-permission-group {
  border: 1px solid #d7e4f2;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.vendor-permission-group h4 {
  margin: 0;
  padding: .75rem .9rem;
  border-bottom: 1px solid #e7eef6;
  background: #f7fbff;
  color: #183654;
}

.vendor-permission-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .75rem;
  align-items: center;
  padding: .75rem .9rem;
  border-bottom: 1px solid #edf2f7;
  font-weight: 700;
  color: #102033;
}

.vendor-permission-row:last-child {
  border-bottom: 0;
}

.vendor-permission-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  justify-self: end;
}

.vendor-audit-list {
  display: grid;
  gap: .75rem;
}

.vendor-audit-entry {
  border: 1px solid #d7e4f2;
  border-radius: 12px;
  background: #fff;
  padding: .85rem 1rem;
}

.vendor-audit-entry__head {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  color: #102033;
  font-weight: 800;
}

.vendor-audit-entry p {
  margin: .35rem 0 0;
  color: #60758b;
}

@media (max-width: 900px) {
  .vendor-admin-grid.two,
  .vendor-invite-form,
  .vendor-role-fields {
    grid-template-columns: 1fr;
  }

  .vendor-role-toggle {
    grid-template-columns: 1fr;
  }

  .vendor-role-meta {
    justify-self: start;
  }
}

/* Auth/Login registration modal: shared full-height sheet layout */
:root {
  --auth-modal-outer-gap: clamp(10px, 1.8vh, 18px);
  --auth-modal-outer-gap: clamp(10px, 1.8dvh, 18px);
  --auth-modal-width: min(760px, calc(100vw - var(--auth-modal-outer-gap) - var(--auth-modal-outer-gap)));
  --auth-modal-height: calc(100vh - var(--auth-modal-outer-gap) - var(--auth-modal-outer-gap));
  --auth-modal-height: calc(100dvh - var(--auth-modal-outer-gap) - var(--auth-modal-outer-gap));
  --auth-modal-radius: 24px;
}

body.auth-modal-open #authModalBackdrop.hub-auth-backdrop,
body.company-modal-open #companyModalBackdrop.hub-auth-backdrop {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box;
  padding: var(--auth-modal-outer-gap) !important;
  background: radial-gradient(circle at top, rgba(7,182,197,.25), rgba(4,10,24,.92));
  backdrop-filter: blur(4px);
}

#authModalBackdrop.hub-auth-backdrop,
#companyModalBackdrop.hub-auth-backdrop {
  position: fixed !important;
  inset: 0 !important;
  overflow: hidden;
}

.hub-auth-shell,
#companyModalBackdrop .hub-auth-shell {
  width: var(--auth-modal-width) !important;
  max-width: var(--auth-modal-width) !important;
  height: var(--auth-modal-height) !important;
  max-height: var(--auth-modal-height) !important;
  min-height: 0 !important;
  display: flex;
  align-items: stretch;
  justify-content: center;
  position: relative;
}

.hub-auth-modal,
#companyModalBackdrop .hub-auth-modal {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  border-radius: var(--auth-modal-radius) !important;
  overflow: hidden !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column;
}

.hub-auth-modal > .auth-tab,
.auth-modal > #loginTab,
.auth-modal > #registerTab {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: clamp(20px, 2.6vh, 28px) clamp(20px, 3vw, 30px) clamp(18px, 2.4vh, 26px) !important;
  gap: 12px;
  box-sizing: border-box;
}

.hub-auth-modal > .auth-tab[style*="display:none"],
.hub-auth-modal > .auth-tab[style*="display: none"],
.auth-modal > #loginTab[style*="display:none"],
.auth-modal > #loginTab[style*="display: none"],
.auth-modal > #registerTab[style*="display:none"],
.auth-modal > #registerTab[style*="display: none"] {
  display: none !important;
}

.hub-auth-head,
#registerTab .hub-auth-head {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  min-height: 0;
  position: sticky;
  top: 0;
  z-index: 6;
  background: #fff;
  border-radius: calc(var(--auth-modal-radius) - 6px) calc(var(--auth-modal-radius) - 6px) 0 0;
}

.hub-auth-head .auth-close-btn {
  position: relative;
  z-index: 7;
  flex: 0 0 auto;
}

.hub-auth-modal .modal-tab-scroll,
#companyModalBackdrop .modal-tab-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 8px;
  padding: 18px 20px;
  padding-inline-end: 18px;
  border-radius: 18px;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.hub-auth-modal .form-error,
.hub-auth-modal .error-msg,
#register-global-error,
#login-global-error {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

#register-global-error,
#login-global-error {
  box-sizing: border-box;
  margin-top: 10px;
}

#register-global-error:not(:empty),
#login-global-error:not(:empty) {
  padding: 10px 12px;
  border: 1px solid rgba(208, 43, 32, .22);
  border-radius: 12px;
  background: #fff7f5;
  line-height: 1.45;
}

.hub-auth-modal .modal-tab-scroll::-webkit-scrollbar {
  width: 12px;
}

.hub-auth-modal .modal-tab-scroll::-webkit-scrollbar-track {
  margin-block: 12px;
  border-radius: 999px;
  background: transparent;
}

.hub-auth-modal .modal-tab-scroll::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: rgba(111, 131, 158, .62);
  background-clip: content-box;
}

.hub-auth-modal .modal-tab-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(71, 91, 120, .78);
  background-clip: content-box;
}

.hub-auth-modal .modal-tab-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(111, 131, 158, .72) transparent;
}

.hub-auth-shell > .forgot-modal {
  border-radius: var(--auth-modal-radius);
  overflow: hidden;
}

@media (max-width: 740px) {
  :root {
    --auth-modal-outer-gap: 8px;
    --auth-modal-width: calc(100vw - 16px);
    --auth-modal-height: calc(100vh - 16px);
    --auth-modal-height: calc(100dvh - 16px);
    --auth-modal-radius: 18px;
  }

  .hub-auth-modal > .auth-tab,
  .auth-modal > #loginTab,
  .auth-modal > #registerTab {
    padding: 18px 14px 16px !important;
  }

  .hub-auth-modal .modal-tab-scroll,
  #companyModalBackdrop .modal-tab-scroll {
    padding: 14px 14px;
    border-radius: 14px;
  }

  .hub-auth-head {
    grid-template-columns: auto 1fr auto;
    gap: 8px;
  }

  .hub-auth-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
  }

  .hub-auth-modal .modal-title {
    font-size: 1.32rem !important;
  }
}

/****************************************
 * Anbieterportal: gemeinsame linke Navigation
 ****************************************/
body.vendor-shell {
  --vendor-sidebar-width: 272px;
  --vendor-sidebar-top: 72px;
}

body.vendor-dashboard.vendor-shell {
  --vendor-sidebar-top: 0px;
}

body.vendor-headerless.vendor-shell {
  --vendor-sidebar-top: 0px;
}

body.vendor-headerless > .header-actions {
  display: none !important;
}

.vendor-app-sidebar,
.vendor-app-sidebar * {
  box-sizing: border-box;
}

.vendor-app-sidebar {
  position: fixed;
  left: 0;
  top: var(--vendor-sidebar-top);
  bottom: 0;
  z-index: 2102;
  width: var(--vendor-sidebar-width);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1rem 0.8rem;
  overflow-y: auto;
  background: #ffffff;
  border-right: 1px solid #d9e6f2;
  box-shadow: 10px 0 32px rgba(10, 42, 73, 0.12);
}

.vendor-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0 0.2rem 0.65rem;
  border-bottom: 1px solid #e6eef6;
}

.vendor-sidebar-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.vendor-sidebar-brand img {
  display: block;
  width: 112.5px;
  max-width: 100%;
  height: auto;
}

.vendor-sidebar-close,
.vendor-sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid #cdddea;
  border-radius: 8px;
  background: #ffffff;
  color: #113c5f;
  cursor: pointer;
}

.vendor-sidebar-close {
  width: 34px;
  height: 34px;
}

.vendor-nav-section {
  display: grid;
  gap: 0.3rem;
}

.vendor-nav-section--primary {
  margin-top: 0;
}

.vendor-nav-section[hidden],
.vendor-nav-link[hidden] {
  display: none !important;
}

.vendor-nav-title {
  margin: 0.55rem 0.35rem 0.2rem;
  color: #60758a;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.vendor-nav-list {
  display: grid;
  gap: 0.15rem;
}

.vendor-nav-link {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 0.68rem;
  width: 100%;
  padding: 0.56rem 0.72rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #173a5e;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.vendor-nav-link:visited {
  color: #173a5e;
}

.vendor-nav-link .material-icons {
  width: 1.28rem;
  flex: 0 0 1.28rem;
  overflow-wrap: normal;
  color: #008ea0;
  font-size: 1.2rem;
  line-height: 1;
  text-align: center;
}

.vendor-nav-link:hover,
.vendor-nav-link:focus-visible {
  background: #eef7fb;
  color: #083552;
  outline: none;
}

.vendor-nav-link.active {
  border-color: #bdeaf0;
  background: linear-gradient(120deg, #e6fbff, #eef7ff);
  color: #061d2f;
  box-shadow: inset 3px 0 0 #00aab8;
}

.vendor-nav-link.active .material-icons {
  color: #006d7a;
}

.vendor-nav-link--local {
  min-height: 34px;
  padding-block: 0.46rem;
  color: #39536c;
  font-size: 0.88rem;
  font-weight: 650;
}

.vendor-nav-link--utility {
  color: #254d72;
  font-weight: 700;
}

.vendor-nav-action {
  appearance: none;
}

.vendor-sidebar-bottom {
  display: grid;
  gap: 0.2rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid #e6eef6;
}

.vendor-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2101;
  background: rgba(2, 20, 38, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.vendor-sidebar-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.vendor-sidebar-close--floating {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1;
}

body.vendor-workspace-page.vendor-shell .workspace-header-nav {
  display: none !important;
}

body.vendor-shell header #logoutBtn {
  display: none !important;
}

@media (min-width: 1024px) {
  body.vendor-shell:not(.vendor-profile) {
    padding-left: var(--vendor-sidebar-width);
  }

  body.vendor-profile.vendor-shell .vp-main {
    margin-left: var(--vendor-sidebar-width);
    width: calc(100% - var(--vendor-sidebar-width));
  }

  body.vendor-profile.vendor-shell .vendor-app-sidebar {
    top: 0;
    bottom: 0;
    --vendor-sidebar-top: 0px;
  }

  .vendor-sidebar-close--floating {
    display: none !important;
  }

}

@media (max-width: 1023px) {
  body.vendor-shell {
    padding-left: 0;
  }

  .vendor-app-sidebar {
    top: 0;
    height: 100vh;
    height: 100dvh;
    width: min(320px, 92vw);
    max-width: 92vw;
    border-radius: 0 12px 12px 0;
    transform: translateX(-105%);
    transition: transform 0.2s ease;
  }

  body.vendor-sidebar-open .vendor-app-sidebar {
    transform: translateX(0);
  }

  .vendor-sidebar-overlay.active {
    display: block;
  }

  .vendor-sidebar-close,
  .vendor-sidebar-toggle {
    display: inline-flex;
  }

  .vendor-sidebar-toggle {
    position: relative;
    width: 42px;
    height: 42px;
    margin-right: 0.45rem;
    box-shadow: 0 8px 20px rgba(10, 40, 70, 0.14);
  }

  body.dashboard-page.vendor-dashboard #vendorSidebarToggle {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 2200;
    margin: 0;
  }

  body.vendor-headerless.vendor-shell #vendorSidebarToggle {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 2200;
    margin: 0;
  }

  body.vendor-profile.vendor-shell .vp-main {
    margin-left: 0;
    width: 100%;
  }
}

/* Öffentliche Terminbuchung: gemeinsame Links und entscheidungsnahe CTAs */
.booking-cta {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.72rem 1.15rem;
  border: 1px solid rgba(0, 119, 182, 0.28);
  border-radius: 999px;
  background: linear-gradient(120deg, #00c8d4, #008db7 72%, #0077a8);
  color: #ffffff;
  box-shadow: 0 12px 26px rgba(0, 119, 166, 0.24);
  font: inherit;
  font-weight: 750;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  touch-action: manipulation;
  transition: transform 0.16s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.booking-cta:hover {
  color: #ffffff;
  filter: saturate(1.08) brightness(1.03);
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(0, 119, 166, 0.3);
}

.booking-cta:focus-visible,
.booking-choice-card__link:focus-visible {
  outline: 3px solid #f4a300;
  outline-offset: 3px;
}

.booking-cta .material-icons {
  flex: 0 0 auto;
  font-size: 1.25rem;
  line-height: 1;
}

.booking-cta--header {
  min-height: 44px;
  padding: 0.62rem 1rem;
  white-space: nowrap;
}

.booking-cta__label--short {
  display: none;
}

.booking-hero-alternative {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.42rem;
  width: min(720px, 100%);
  margin: 0 auto;
  color: #ffffff;
  text-align: center;
}

.booking-hero-alternative p {
  margin: 0;
  color: #edf8ff;
  font-size: 0.93rem;
  line-height: 1.4;
  text-shadow: 0 1px 10px rgba(0, 18, 38, 0.7);
}

.booking-hero-alternative .booking-cta--hero {
  min-height: 46px;
  padding-block: 0.64rem;
  background: linear-gradient(120deg, #2be0dc, #16a8c8 70%, #0b8daf);
  color: #05273b;
  border-color: rgba(255, 255, 255, 0.46);
  box-shadow: 0 14px 30px rgba(0, 17, 35, 0.3);
}

.booking-hero-alternative .booking-cta--hero:hover {
  color: #05273b;
}

.booking-hero-alternative .booking-hero-alternative__microcopy {
  max-width: 68ch;
  color: #d8ecf8;
  font-size: 0.79rem;
}

.pricing-booking-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(0, 142, 199, 0.22);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
}

.pricing-booking-cta h2,
.pricing-booking-cta h3 {
  margin: 0;
  color: #06263b;
  font-size: 1rem;
  line-height: 1.35;
}

.pricing-booking-cta p {
  margin: 0.35rem 0 0;
  color: #4d6a83;
  font-size: 0.9rem;
  line-height: 1.5;
}

.pricing-booking-cta .booking-cta {
  max-width: 340px;
  min-height: 46px;
  font-size: 0.92rem;
}

.booking-choice-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 1.5rem);
  width: min(1120px, calc(100% - 2.5rem));
  margin: clamp(1.5rem, 3vw, 2.4rem) auto;
}

.booking-choice-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: clamp(1.35rem, 3vw, 2rem);
  border: 1px solid #cfe1eb;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 20px 45px rgba(8, 47, 72, 0.09);
}

.booking-choice-card--primary {
  border-color: rgba(0, 166, 190, 0.34);
  background: linear-gradient(145deg, #f5feff, #e8f9fc);
}

.booking-choice-card__eyebrow {
  margin: 0 0 0.55rem;
  color: #087b95;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.booking-choice-card h2 {
  margin: 0;
  color: #0b2d46;
  font-size: clamp(1.28rem, 2.6vw, 1.65rem);
  line-height: 1.2;
}

.booking-choice-card > p:not(.booking-choice-card__eyebrow) {
  flex: 1 1 auto;
  margin: 0.8rem 0 1.2rem;
  color: #45647a;
  line-height: 1.6;
}

.booking-choice-card__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.72rem 1.15rem;
  border: 1px solid #1689ae;
  border-radius: 999px;
  color: #087698;
  font-weight: 750;
  text-decoration: none;
}

.booking-choice-card__link:hover {
  background: #edf9fc;
  color: #075f7b;
}

@media (max-width: 1280px) {
  .booking-cta--header .booking-cta__label--full {
    display: none;
  }

  .booking-cta--header .booking-cta__label--short {
    display: inline;
  }
}

@media (max-width: 1180px) {
  .public-booking-page:not(.page-referenzen) .site-header nav.main-nav {
    display: none !important;
  }

  .public-booking-page:not(.page-referenzen) .site-header .burger-menu {
    display: inline-flex !important;
  }

  .public-booking-page:not(.page-referenzen) .site-header .header-top {
    grid-template-columns: minmax(0, 1fr) auto !important;
    row-gap: 0 !important;
  }

  .public-booking-page:not(.page-referenzen) .site-header .header-center {
    display: none !important;
  }

  .public-booking-page:not(.page-referenzen) .site-header .header-actions {
    width: auto !important;
    justify-self: end !important;
  }

  .page-referenzen.public-booking-page .site-header .header-top {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 0.6rem;
  }

  .page-referenzen.public-booking-page .site-header .header-center {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 760px) {
  .pricing-booking-cta,
  .booking-choice-section {
    grid-template-columns: 1fr;
  }

  .pricing-booking-cta .booking-cta,
  .booking-choice-card .booking-cta,
  .booking-choice-card__link {
    width: 100%;
    max-width: none;
  }

  .page-referenzen.public-booking-page .site-header nav.main-nav ul {
    gap: 0.45rem 0.8rem;
  }
}

@media (max-width: 560px) {
  .public-booking-page:not(.page-referenzen) .site-header {
    padding: 0.55rem 0.65rem !important;
  }

  .public-booking-page:not(.page-referenzen) .site-header .header-top {
    column-gap: 0.45rem !important;
  }

  .public-booking-page:not(.page-referenzen) .site-header .header-left {
    gap: 0.42rem !important;
    overflow: hidden;
  }

  .public-booking-page:not(.page-referenzen) .site-header .header-firm-logo {
    width: clamp(76px, 25vw, 108px);
    max-height: 32px;
    object-fit: contain;
  }

  .public-booking-page .site-header .header-actions {
    gap: 0.4rem !important;
  }

  .booking-cta--header {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
  }

  .booking-cta--header .booking-cta__label--short {
    display: none;
  }

  .public-booking-page:not(.page-referenzen) .site-header :is(#loginTopBtn, #accountTopBtn) {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0 !important;
    justify-content: center;
  }

  .public-booking-page:not(.page-referenzen) .site-header :is(#loginTopBtn, #accountTopBtn) > span:not(.material-icons) {
    display: none;
  }

  .page-home .home-hero__overlay {
    gap: 0.65rem;
  }

  .booking-hero-alternative p {
    font-size: 0.84rem;
  }

  .booking-hero-alternative .booking-cta--hero {
    width: min(100%, 22rem);
    padding-inline: 0.8rem;
    font-size: 0.88rem;
  }

  .booking-hero-alternative .booking-hero-alternative__microcopy {
    font-size: 0.72rem;
  }

  .booking-choice-section {
    width: min(100% - 1.25rem, 1120px);
  }

  .booking-choice-card {
    padding: 1.25rem;
    border-radius: 20px;
  }

  .page-referenzen.public-booking-page .site-header .header-top {
    grid-template-columns: 1fr;
  }

  .page-referenzen.public-booking-page .site-header .header-actions,
  .page-referenzen.public-booking-page .site-header .header-left {
    justify-self: center;
  }

  .page-referenzen.public-booking-page .site-header .header-center {
    grid-row: 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .booking-cta {
    transition: none;
  }
}

@media (max-width: 560px) {
  .public-booking-page:not(.page-referenzen) .site-header .logo-wrap img {
    width: clamp(76px, 25vw, 108px) !important;
    max-width: 100% !important;
    max-height: 32px !important;
    object-fit: contain;
  }
}

@media (max-width: 360px) {
  .page-home .home-hero {
    height: 655px !important;
    min-height: 655px !important;
  }

  .page-home .home-hero__overlay {
    justify-content: center;
  }

  .page-home .home-hero .hero-inline-heading {
    max-width: 100%;
    font-size: 1.35rem;
    line-height: 1.08;
  }

  .page-home .home-hero .hero-inline-heading span {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .page-home .home-hero .leistungen-register-form,
  .page-home .home-hero .leistungen-register-form > * {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .page-home .home-hero .leistungen-register-form .register-form__cta {
    white-space: normal;
  }
}

/* Startseite: Alle Inhalte des Video-Heros bleiben auf schmalen Viewports sichtbar. */
@media (max-width: 700px) {
  .page-home .home-hero {
    height: clamp(680px, 90svh, 760px) !important;
    min-height: clamp(680px, 90svh, 760px) !important;
  }

  .page-home .home-hero__overlay.hero-overlay-stack {
    inset: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: calc(var(--hero-logo-chip-clearance) + 1.1rem) 1.4rem 1.4rem !important;
    justify-content: center !important;
    box-sizing: border-box;
  }

  .page-home .home-hero__content,
  .page-home .home-hero__content--center {
    margin-top: 0 !important;
  }
}