:root {
  --text: #ffffff; /* Weiße Schrift */
  --muted: rgba(255, 255, 255, 0.9);
  --card: #0096a1; /* etwas dunkleres Türkis für die Box */
  --card-border: #00717f; /* leicht dunklere Kante */
  --brand: #00717f; /* Türkis für Titel */
  --btn: rgba(255, 255, 255, 0.18);
  --btn-hover: rgba(255, 255, 255, 0.28);
  --radius: 20px;
  --shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  --font: Calibri, 'Calibri', 'Segoe UI', Roboto, Arial, sans-serif;
}
#calc-body {
  height: 100%;
  margin: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  font-synthesis-weight: none;
}

#calc-body .section-title {
  text-align: left;
}

.calc-container {
  max-width: 900px;
  margin: 32px auto;
  padding: 0 18px;
}
.calc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.brand {
  color: var(--brand);
  font-weight: 700;
  font-size: clamp(22px, 3.4vw, 32px);
  letter-spacing: 0.2px;
}
.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.panel {
  padding: 22px;
}

/* Sprachumschalter */
.lang-switch {
  display: flex;
  gap: 6px;
}

.lang-btn {
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--brand);
  background: transparent;
  color: var(--brand); /* statt weiß */
  font-size: 12px;
  font-weight: 600;
}

.lang-btn.active {
  background: var(--brand); /* aktiver Button türkis */
  color: #ffffff; /* Text weiß */
  border-color: var(--brand);
}

/* Segmente innen */
.segments {
  display: grid;
  gap: 14px;
}
.seg {
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  padding: 32px;
}
.seg-progress {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.06)
  );
  display: flex;
  flex-direction: column;
  min-height: 260px;
}
.seg-risk {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18),
    rgba(255, 255, 255, 0.08)
  );
}
.seg-recs {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.06)
  );
}

.progress {
  height: 10px;
  background: rgba(255, 255, 255);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255);
}
.bar {
  height: 100%;
  width: 0%;
  background: #0096a1;
  transition: width 0.3s ease;
}
.stephead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 0 2px;
}
.stepno {
  font-weight: 700;
  opacity: 0.95;
}
.question {
  font-size: clamp(18px, 2.6vw, 22px);
  font-weight: 700;
  line-height: 1.35;
  margin: 8px 0 0;
}
.question a {
  color: #ffffff;
  text-decoration: underline;
  font-weight: 700;
}
.barlabel a {
  color: #ffffff;
  text-decoration: underline;
  font-weight: 700;
}
.list a {
  color: #ffffff;
  text-decoration: underline;
  font-weight: 700;
}
.small {
  font-size: 13px;
  color: var(--muted);
}

/* Wizard-Bereich */
#wizard {
  flex: 1;
  display: flex;
}
#qWrap {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
}

button {
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  margin-left: 5px;
  margin-right: 5px;
  background: var(--btn);
  color: var(--text);
  padding: 12px 14px;
  font-weight: 700;
}
button:hover {
  background: var(--btn-hover);
}
button.primary {
  background: #ffffff;
  color: #0f5f5c;
  border: none;
}
button.primary:hover {
  background: rgba(255, 255, 255, 0.92);
}

.summary {
  display: grid;
  gap: 16px;
}
.kpi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.kpi strong {
  font-size: 28px;
  font-weight: 700;
}
.section-title {
  color: var(--text);
  font-weight: 700;
  font-size: 20px;
  margin: 0 0 8px;
}
.list {
  display: grid;
  gap: 10px;
}
li {
  margin-left: 1.1em;
}

/* Top-3 Balkendiagramm */
.bars {
  display: grid;
  gap: 10px;
}
.barrow {
  display: flex;
  align-items: center;
  gap: 12px;
}
.barlabel {
  flex: 0 0 46%;
  line-height: 1.25;
}
.barwrap {
  position: relative;
  flex: 1 1 auto;
  height: 28px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
}
.barfill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #ffffff;
  color: #0f5f5c;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
  font-weight: 700;
}
.barFill_right {
  padding-right: 10px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.center {
  text-align: center;
}
.hidden {
  display: none !important;
}

#btnRestart {
  margin-right: 20px;
}

/* Waskie ekrany: telefon oraz waski widok na komputerze */
@media (max-width: 640px) {
  .calc-container {
    margin: 16px auto;
    padding: 0 12px;
  }
  .panel {
    padding: 16px;
  }

  .calc-header {
    flex-wrap: wrap;
    gap: 8px 12px;
  }
  .calc-header img {
    width: 140px;
    height: auto;
  }
  .brand {
    font-size: 20px;
  }

  .question {
    font-size: 18px;
  }
  .section-title {
    font-size: 18px;
  }

  /* Pytanie i przyciski: podpowiedz w swoim wierszu, przyciski pod nia */
  .actions {
    gap: 8px;
  }
  .actions > #questionHint {
    flex: 1 1 100%;
  }
  .actions > button {
    flex: 1 1 auto;
    min-width: 92px;
  }

  /* Wynik */
  .kpi {
    flex-wrap: wrap;
    gap: 4px 12px;
  }
  .kpi strong {
    font-size: 24px;
  }

  /* Paski: etykieta nad paskiem, oba na pelna szerokosc */
  .barrow {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .barlabel {
    flex: 1 1 auto;
  }

  #btnRestart {
    margin-right: 0;
  }
}

/* Dlugie adresy i nazwy nie rozpychaja ukladu w bok */
#calc-body {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Beim Drucken: */
@media print {
  .center,
  .lang-switch,
  #content-navigation,
  .skin-layout-footer,
  #hero-content,
  #main-content > div:not(#content-12270721),
  #embeddedMessagingConversationButton {
    display: none;
  }
  .calc-header img {
    display: none;
  }

  /* Wydruk: interfejs jest bialym tekstem na turkusie, a przegladarki domyslnie
     nie drukuja tel. Bez tego bloku wydruk wychodzi bialy na bialym. */
  #calc-body {
    --text: #000000;
    --muted: #333333;
    --card: #ffffff;
    --card-border: #999999;
    --shadow: none;
    background: #ffffff;
    color: #000000;
  }
  #calc-body .card {
    background: #ffffff;
    border: 1px solid #999999;
    box-shadow: none;
  }
  #calc-body .seg {
    background: none;
    border: 1px solid #cccccc;
    box-shadow: none;
  }
  #calc-body .section-title,
  #calc-body .stepno,
  #calc-body .question,
  #calc-body li {
    color: #000000;
  }
  #calc-body .small {
    color: #333333;
  }
  #calc-body .kpi {
    background: none;
    border: 1px solid #999999;
  }
  #calc-body .question a,
  #calc-body .barlabel a,
  #calc-body .list a {
    color: #000000;
    text-decoration: underline;
  }
  #calc-body .barwrap {
    background: none;
    border: 1px solid #666666;
  }
  /* Wypelnienie paska to tlo, a tla moga sie nie wydrukowac. Prawa krawedz
     pokazuje ten sam procent nawet wtedy, gdy tlo zostanie pominiete. */
  #calc-body .barfill {
    background: #cccccc;
    border-right: 1px solid #666666;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  #calc-body .barFill_right {
    color: #000000;
  }
}