/* Bausteine: Typografie-Klassen, Buttons, Flächen und wiederverwendbare Komponenten. Nicht an einen Seitenbereich gebunden. */
/* ---------- Typografie ---------- */
.display-xl,
.display-l,
.display-m {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  text-transform: uppercase;
  line-height: var(--leading-display);
  letter-spacing: 0;
  text-wrap: balance;
  -webkit-hyphens: manual;
  hyphens: manual;
  overflow-wrap: break-word;
}
.display-xl {
  font-size: var(--type-display-xl);
}
.display-l {
  font-size: var(--type-display-l);
}
.display-m {
  font-size: var(--type-display-m);
}
.statement {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  text-transform: uppercase;
  font-size: var(--type-statement);
  line-height: var(--leading-statement);
  letter-spacing: var(--tracking-statement);
  max-width: 40ch;
  text-wrap: balance;
}
.accent {
  color: var(--on-accent);
}
.label {
  font-size: var(--type-label);
  font-weight: var(--weight-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-label);
  color: var(--on-label);
}
.label--plain {
  color: var(--on-text);
}
.lead {
  font-size: var(--type-lead);
  line-height: 1.5;
  max-width: var(--measure-lead);
}
.body {
  max-width: var(--measure-body);
}
.body-s {
  font-size: var(--type-small);
  max-width: var(--measure-body);
}
.muted {
  color: var(--on-muted);
}
.tagline {
  font-weight: 300;
  font-size: var(--type-tagline);
  letter-spacing: 0.01em;
  line-height: 1.1;
}
.numeral {
  font-family: var(--font-text);
  font-weight: 900;
  line-height: 0.8;
  font-variant-numeric: tabular-nums;
  color: var(--clary-moss);
  font-size: var(--type-display-l);
}

/* ---------- Aktionen ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* Buttons ohne automatische Trennung. Nur an weichen Trennstrichen im Text (U+00AD),
     damit lange Komposita wie „Bauherren­vertretung“ in schmalen Spalten nicht überstehen. */
  -webkit-hyphens: manual;
  hyphens: manual;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1;
  padding: 14px 26px;
  border-radius: var(--radius-full);
  border: 0;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--dur-quick) var(--ease-settle),
    color var(--dur-quick) var(--ease-settle);
}
.btn--lg {
  padding: 18px 32px;
}
.btn--primary {
  background: var(--clary-lime);
  color: var(--clary-forest);
}
.btn--primary:hover {
  background: var(--clary-white);
  color: var(--clary-forest);
}
.btn--dark {
  background: var(--clary-forest);
  color: var(--clary-white);
}
.btn--dark:hover {
  background: var(--clary-forest-deep);
  color: var(--clary-lime);
}
.btn--outline {
  background: transparent;
  color: var(--on-text);
  border: 1.5px solid currentColor;
}
.btn--outline:hover {
  color: var(--on-label);
}
.btn--text {
  padding: 6px 0;
  background: transparent;
  color: var(--on-text);
  text-decoration: underline;
  text-underline-offset: 0.35em;
}
.btn--text:hover {
  color: var(--on-label);
}
.btn .icon {
  width: 18px;
  height: 18px;
}
.btn--primary:active,
.btn--dark:active {
  filter: brightness(0.94);
}
.social {
  display: inline-flex;
  align-items: center;
  color: var(--on-text);
}
.social .icon {
  width: 24px;
  height: 24px;
}
.social:hover {
  color: var(--on-accent);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-related);
  align-items: center;
}

/* ---------- Flächen ---------- */
.plane {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-none);
  background: var(--on-panel);
}
.panel {
  background: var(--on-panel);
  padding: var(--pad-panel);
  border-radius: var(--radius-none);
}
.icon {
  width: 24px;
  height: 24px;
  flex: none;
  stroke: currentColor;
  fill: none;
}
.icon--feature {
  width: 40px;
  height: 40px;
  color: var(--on-text);
}

/* ---------- Bausteine ---------- */
/* Komponente .wordband: Begriffe in Statement-Typo, jeder mit eigenem Ring-Marker (bricht sauber um) */
.wordband {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, max-content);
  align-items: center;
  column-gap: var(--space-5);
  row-gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  text-transform: uppercase;
  font-size: var(--type-statement);
  line-height: var(--leading-statement);
  letter-spacing: var(--tracking-statement);
}
@media (max-width: 900px) {
  .wordband {
    grid-template-columns: repeat(2, max-content);
  }
}
@media (max-width: 560px) {
  .wordband {
    grid-template-columns: 1fr;
  }
}
.wordband li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.wordband li::before {
  content: "";
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  border: 0.13em solid var(--on-ring);
}
.ring-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.ring-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}
.ring-list li::before {
  content: "";
  width: 14px;
  height: 14px;
  margin-top: 0.38em;
  border-radius: 50%;
  border: 3.5px solid var(--on-ring);
}
.faq {
  display: flex;
  flex-direction: column;
}
.faq details {
  border-top: 1px solid var(--on-line);
}
.faq details:last-of-type {
  border-bottom: 1px solid var(--on-line);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  font-weight: var(--weight-emphasis);
  font-size: var(--type-small);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary .i-min {
  display: none;
}
.faq details[open] .i-plus {
  display: none;
}
.faq details[open] .i-min {
  display: block;
}
.faq details p {
  padding: 0 40px var(--space-5) 0;
  font-size: var(--type-small);
}
.source {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-5);
  row-gap: var(--space-2);
  align-items: baseline;
}
.source .numeral {
  grid-row: span 2;
  font-size: var(--type-display-m);
  color: var(--on-accent);
  padding-block: 16px;
}
.source cite {
  font-style: normal;
  font-size: var(--type-micro);
  color: var(--on-muted);
  letter-spacing: 0.02em;
}
.source .label {
  grid-column: 1/-1;
}
.portrait {
  height: auto;
  border-radius: 50%;
  object-fit: cover;
  aspect-ratio: 1/1;
  flex: none;
  background: var(--clary-lime);
}
.person {
  display: flex;
  gap: var(--space-5);
  align-items: center;
}
.person .portrait {
  width: 96px;
}
.kpis {
  margin-top: var(--gap-to-group);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-related) var(--grid-gutter);
}
.kpis dt {
  font-size: var(--type-label);
  font-weight: var(--weight-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--on-label);
}
.kpis dd {
  font-family: var(--font-text);
  font-weight: 900;
  text-transform: uppercase;
  font-size: var(--type-display-m);
  line-height: var(--leading-display);
  color: var(--on-accent);
}
.kpis dd.kpi-text {
  font-family: var(--font-text);
  font-weight: var(--weight-emphasis);
  text-transform: none;
  font-size: var(--type-body);
  line-height: 1.4;
  color: var(--on-text);
}
.supergraphic {
  position: absolute;
  pointer-events: none;
  color: var(--clary-white);
  opacity: 0.12;
}