/* ==========================================================================
   Anwendungsfälle V2 – Bausteine, Grafiken, Werkzeuge
   Baut auf front-page.css / components.css auf (gleiches Design).
   ========================================================================== */

.af2 [hidden] {
  display: none !important;
}

.af2 .fp-section {
  padding-block: 4.5rem;
}

.af2 .fp-head {
  margin-bottom: 2.5rem;
}

.af2-h2 {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.af2-h3 {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-ink);
}

.af2-h4 {
  margin: 1.25rem 0 0.6rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-ink);
}

.af2-lead {
  margin: 0 0 1.25rem;
  color: var(--color-muted);
}

.af2-small {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-muted);
}

.af2-note {
  margin: 1.25rem 0 0;
  padding: 0.85rem 1.1rem;
  border-left: 3px solid #D5D9DF;
  background: var(--color-gray-50);
  border-radius: 0 8px 8px 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-body);
}

.af2-statement {
  margin: 2rem auto 0;
  max-width: 44rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-ink);
}

.af2-statement--sm {
  margin: 0 0 1.25rem;
  max-width: none;
  text-align: left;
  font-size: 1rem;
}

/* ---------- Kopfbereich ---------- */
.af2-hero::before {
  width: 58%;
}

.af2-hero::after {
  background: linear-gradient(90deg,
    rgba(248, 246, 242, 1) 0%,
    rgba(248, 246, 242, 1) 40%,
    rgba(248, 246, 242, 0.75) 46%,
    rgba(248, 246, 242, 0) 60%);
}

.af2-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-height: 23rem;
}

.af2-hero__inner.has-card {
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: 3rem;
}

.af2-hero .fp-hero__content {
  max-width: 36rem;
}

.af2-hero .fp-hero__title {
  font-size: clamp(2rem, 1.3rem + 2.1vw, 3rem);
}

.af2-herocard {
  padding: 1.25rem;
  background: var(--color-white);
  border-radius: 12px;
  box-shadow: 0 24px 56px rgba(24, 32, 43, 0.18);
}

.af2-herocard ul {
  display: grid;
  gap: 0.7rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.af2-herocard li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.9063rem;
  font-weight: 500;
  color: var(--color-ink);
}

.af2-herocard .fp-icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

/* ---------- Tableiste der Übersicht ---------- */
.af2-tabbar {
  position: relative;
  z-index: 2;
  margin-top: -3.75rem;
  background: linear-gradient(180deg, transparent 50%, var(--color-white) 50%);
}

.af2-tabbar__inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--color-white);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(24, 32, 43, 0.12);
  overflow: hidden;
}

.af2-tabbar__inner a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 3px solid transparent;
  font-weight: 600;
  color: var(--color-ink);
}

.af2-tabbar__inner a + a {
  border-left: 1px solid var(--color-border);
}

.af2-tabbar__inner a.is-active,
.af2-tabbar__inner a:hover {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary);
}

.af2-tabbar .fp-icon svg {
  width: 1.6rem;
  height: 1.6rem;
}

/* ---------- Sprungnavigation ---------- */
.af2-jump {
  position: sticky;
  top: var(--header-height);
  z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--color-border);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.admin-bar .af2-jump {
  top: calc(var(--header-height) + 32px);
}

.af2-jump .container {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3rem;
  overflow-x: auto;
}

.af2-jump span {
  flex-shrink: 0;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.af2-jump ul {
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.af2-jump a {
  display: block;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-ink);
}

.af2-jump a:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.af2-sec {
  scroll-margin-top: calc(var(--header-height) + 3.5rem);
}

/* ---------- Karten ---------- */
.af2-cards {
  display: grid;
  gap: 1.25rem;
}

.af2-cols-1 { grid-template-columns: minmax(0, 1fr); }
.af2-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.af2-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.af2-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.af2-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.af2-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.af2-card .fp-card__body,
.af2-problem .fp-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
}

.fp .af2-card h3,
.fp .af2-problem h3 {
  margin: 0.3rem 0 0;
  font-size: 1.125rem;
  line-height: 1.3;
}

.af2-card p,
.af2-problem p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-body);
}

.af2-card__media {
  aspect-ratio: 16 / 9;
}

.af2-card__checks {
  margin: 0.4rem 0 0;
  font-size: 0.9063rem;
}

.af2-card__btn {
  margin-top: auto;
}

.af2-cards--models .af2-card__btn {
  margin-top: 1rem;
}

.af2-cards--models .fp-card__body {
  height: 100%;
}

.af2-problem {
  border-top: 3px solid var(--color-primary);
}

.af2-problem__answer strong {
  color: var(--color-primary);
}

.af2-soon {
  display: inline-block;
  margin-top: auto;
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 600;
  color: var(--color-muted);
}

.af2-rolecard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  height: 100%;
  padding: 1.4rem 1.25rem 2.5rem;
  color: inherit;
}

.af2-rolecard strong {
  font-size: 1.0625rem;
  color: var(--color-ink);
}

.af2-rolecard span:not(.fp-icon) {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--color-muted);
}

.af2-rolecard > svg,
.af2-rolecard .af2-soon {
  position: absolute;
  left: 1.25rem;
  bottom: 1rem;
  width: 1rem;
  height: 1rem;
  color: var(--color-primary);
}

.af2-rolecard .af2-soon {
  width: auto;
  height: auto;
  color: var(--color-muted);
}

.af2-rolecard.is-soon {
  opacity: 0.75;
}

/* Beispiele der Übersicht */
.af2-example {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  overflow: hidden;
}

.af2-example__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.af2-example__body {
  padding: 1.1rem 1.25rem 1.25rem;
}

.fp .af2-example h3 {
  margin: 0.25rem 0 0.5rem;
  font-size: 1.0625rem;
  line-height: 1.35;
}

.af2-example__more p {
  margin: 0.5rem 0 0;
  font-size: 0.9063rem;
  color: var(--color-body);
}

.af2-linkbtn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.9063rem;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
}

.af2-linkbtn:hover {
  text-decoration: underline;
}

/* ---------- Matrix ---------- */
.af2-matrix-wrap {
  overflow-x: auto;
  border: 1px solid #ECEEF1;
  border-radius: 12px;
  background: var(--color-white);
}

.af2-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.af2-matrix th,
.af2-matrix td {
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid #ECEEF1;
  text-align: left;
  vertical-align: top;
  line-height: 1.45;
}

.af2-matrix thead th {
  background: var(--color-gray-50);
  font-size: 0.875rem;
  color: var(--color-ink);
}

.af2-matrix thead th .fp-icon {
  display: inline-flex;
  margin-right: 0.4rem;
  vertical-align: middle;
}

.af2-matrix thead th .fp-icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

.af2-matrix tbody th {
  font-weight: 600;
  color: var(--color-ink);
}

.af2-matrix tr:last-child th,
.af2-matrix tr:last-child td {
  border-bottom: 0;
}

.af2-matrix--sm th,
.af2-matrix--sm td {
  padding: 0.65rem 0.8rem;
  font-size: 0.875rem;
}

.af2-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.af2-check svg {
  width: 1.1rem;
  height: 1.1rem;
  padding: 0.15rem;
  border-radius: 50%;
  background: #1E8E3E;
  color: #fff;
}

.af2-dash {
  color: #B9BEC6;
}

.af2-role {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--color-gray-50);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-ink);
}

.af2-role--entscheidet { background: var(--color-primary); color: #fff; }
.af2-role--setzt-um { background: #1B2129; color: #fff; }
.af2-role--liefert-daten,
.af2-role--liefert-unterlagen { background: #E8F0FE; color: #1A56B6; }
.af2-role--betreut,
.af2-role--unterstuetzt { background: #E8F5EC; color: #1E6B36; }

/* ---------- Schritte ---------- */
.af2-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 1.75rem 1.25rem;
  list-style: none;
  background: var(--color-white);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(24, 32, 43, 0.06);
}

.af2-steps li {
  position: relative;
  padding: 0 0.75rem;
  text-align: center;
}

.af2-steps li:not(:last-child)::after {
  content: "›";
  position: absolute;
  top: 1.6rem;
  right: -0.6rem;
  font-size: 1.5rem;
  color: var(--color-primary);
}

.af2-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  margin-bottom: 0.5rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  flex-shrink: 0;
}

.af2-steps .fp-icon {
  display: flex;
  justify-content: center;
}

.fp .af2-steps h3 {
  margin: 0.75rem 0 0.35rem;
  font-size: 1rem;
}

.af2-steps p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-muted);
}

.af2-steps--roles li {
  padding: 1.25rem;
  border: 1px solid #ECEEF1;
  border-radius: 10px;
  text-align: left;
}

.af2-steps--roles .fp-icon {
  justify-content: flex-start;
}

.af2-steps--roles li:not(:last-child)::after {
  top: 50%;
  right: -0.85rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--color-primary-light);
  font-size: 1rem;
  line-height: 1.3rem;
  text-align: center;
  transform: translateY(-50%);
}

/* ---------- Checklisten-Box ---------- */
.af2-checkbox {
  display: grid;
  gap: 2rem;
  padding: 2rem;
  background: var(--color-white);
  border: 1px solid #ECEEF1;
  border-radius: 14px;
}

.af2-checkbox.has-image {
  grid-template-columns: 18rem minmax(0, 1fr);
  align-items: center;
}

.af2-checkbox.is-inner {
  height: 100%;
}

.af2-checkbox__img {
  width: 100%;
  height: 100%;
  min-height: 12rem;
  object-fit: cover;
  border-radius: 10px;
}

.af2-checkbox__list {
  display: grid;
  gap: 0.55rem 2rem;
  margin: 0.5rem 0 0;
}

.af2-cols-list-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.af2-cols-list-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.af2-print {
  margin-top: 1.25rem;
}

.af2-print svg {
  width: 1rem;
  height: 1rem;
}

.af2-split {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 1.75rem;
  align-items: stretch;
}

.af2-split .fp-head {
  margin-bottom: 1.25rem;
}

/* ---------- FAQ und Abschluss ---------- */
.af2-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

.af2-faq__grid header .fp-link {
  margin-top: 0.5rem;
}

.af2-closing__btns {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: stretch;
}

.af2-btn--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.85);
  color: #fff;
}

.af2-btn--ghost:hover {
  background: #fff;
  color: var(--color-ink);
}

/* ==========================================================================
   Werkzeuge – gemeinsame Formteile
   ========================================================================== */

.af2-tool {
  padding: 2rem;
  background: var(--color-white);
  border: 1px solid #ECEEF1;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(24, 32, 43, 0.05);
}

.fp-section--light .af2-tool {
  box-shadow: none;
}

.af2-tool__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.af2-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  align-items: start;
}

.af2-grid-2--wide {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}

.af2-grid-2--house {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
}

.af2-panel {
  min-width: 0;
}

.container.af2-grid-2 > .af2-panel,
.af2-grid-2 > .af2-panel.af2-result,
.af2-site__panel {
  padding: 1.5rem;
  background: var(--color-white);
  border: 1px solid #ECEEF1;
  border-radius: 12px;
}

.af2-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1rem;
}

.af2-span-2 {
  grid-column: 1 / -1;
}

.af2-field {
  margin: 0;
}

.af2-field label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.8438rem;
  font-weight: 600;
  color: var(--color-ink);
}

.af2-costhead {
  margin-top: 0.4rem;
  padding-top: 0.75rem;
  border-top: 1px solid #ECEEF1;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.af2-input {
  display: flex;
  align-items: stretch;
  border: 1px solid #D5D9DF;
  border-radius: 8px;
  background: var(--color-white);
  overflow: hidden;
}

.af2-input:focus-within {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.af2-input input {
  flex: 1;
  min-width: 0;
  padding: 0.6rem 0.7rem;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--color-ink);
}

.af2-input input:focus {
  outline: none;
}

.af2-input input.is-example {
  color: #6B7280;
  font-style: italic;
}

.af2-input:has(input.is-example) {
  border-style: dashed;
}

.af2-input input.is-user {
  font-weight: 600;
}

.af2-unit {
  display: flex;
  align-items: center;
  padding: 0 0.65rem;
  background: var(--color-gray-50);
  font-size: 0.8125rem;
  color: var(--color-muted);
  white-space: nowrap;
}

.af2-hint {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--color-muted);
}

.af2-field select,
.af2-triage select,
.af2-triage input {
  width: 100%;
  padding: 0.55rem 0.6rem;
  border: 1px solid #D5D9DF;
  border-radius: 8px;
  background: var(--color-white);
  font: inherit;
  font-size: 0.9063rem;
  color: var(--color-ink);
}

.af2-slider {
  margin-bottom: 1rem;
}

.af2-slider label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-ink);
}

.af2-slider__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.5rem;
  gap: 0.9rem;
  align-items: center;
}

.af2-slider input[type="range"] {
  width: 100%;
  accent-color: var(--color-primary);
}

.af2-input--sm input {
  padding: 0.45rem 0.5rem;
  text-align: right;
}

.af2-switch {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: var(--color-gray-50);
}

.af2-switch button {
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-ink);
  cursor: pointer;
}

.af2-switch button[aria-checked="true"] {
  background: var(--color-primary);
  color: #fff;
}

.af2-switch button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.af2-toolbtns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  margin-top: 1rem;
}

.af2-toolbtns .af2-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.af2-toolbtns .af2-field label {
  margin: 0;
  white-space: nowrap;
}

.af2-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
}

.af2-tag {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.af2-tag--ex { background: #FFF4D6; color: #8A5A00; border: 1px dashed #E0B44C; }
.af2-tag--in { background: #E8F0FE; color: #1A56B6; }
.af2-tag--chk { background: var(--color-primary-light); color: var(--color-primary-dark); }

.af2-checks {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.af2-checks legend {
  margin-bottom: 0.4rem;
  font-size: 0.8438rem;
  font-weight: 600;
  color: var(--color-ink);
}

.af2-checks label,
.af2-check-inline {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.9063rem;
  color: var(--color-body);
}

.af2-checks input,
.af2-check-inline input {
  margin-top: 0.2rem;
  accent-color: var(--color-primary);
}

/* ---------- Ergebnisse ---------- */
.af2-result {
  margin-top: 1.5rem;
}

.af2-grid-2 > .af2-result {
  margin-top: 0;
}

.af2-empty {
  margin: 0;
  padding: 1.25rem;
  border: 1px dashed #D5D9DF;
  border-radius: 10px;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--color-muted);
}

.af2-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.8rem;
  margin: 1rem 0;
}

.af2-kpis--5 {
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.af2-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1rem;
  border: 1px solid #ECEEF1;
  border-radius: 10px;
  background: var(--color-white);
}

.af2-kpi span {
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.af2-kpi strong {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--color-ink);
}

.af2-kpi em {
  font-size: 0.75rem;
  font-style: normal;
  line-height: 1.4;
  color: var(--color-muted);
}

.af2-kpi.is-good { border-color: #B7DFC3; background: #F2FAF4; }
.af2-kpi.is-good strong { color: #1E6B36; }
.af2-kpi.is-bad { border-color: #F3C4C6; background: #FDF3F3; }
.af2-kpi.is-bad strong { color: var(--color-primary-dark); }
.af2-kpi.is-scenario { border-style: dashed; }

.af2-missing {
  margin-top: 1rem;
  padding: 1rem 1.2rem;
  border-radius: 10px;
  background: #FFF7E6;
  border: 1px solid #F3DDA6;
  font-size: 0.9063rem;
}

.af2-missing ul {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
}

.af2-warn,
.af2-warn-inline {
  color: var(--color-primary-dark);
  font-weight: 600;
}

.af2-warn {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
}

.af2-exhint {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.af2-svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-body, sans-serif);
}

.af2-axis { stroke: #C9CDD3; stroke-width: 1; }
.af2-bar { fill: #C9CDD3; }
.af2-bar.is-gray { fill: #BFC4CB; }
.af2-bar.is-red { fill: var(--color-primary); }
.af2-bar.is-green { fill: #7FCB98; }
.af2-bar.is-dark { fill: #1B2129; }
.af2-bar.is-bad { fill: #E46A6F; }
.af2-bar.is-open { fill: transparent; stroke: #B9BEC6; stroke-dasharray: 5 5; }
.af2-svg-val { font-size: 14px; font-weight: 700; fill: #1B2129; }
.af2-svg-lbl { font-size: 12px; fill: #5F6873; }
.af2-line { fill: none; stroke: var(--color-primary); stroke-width: 2.5; }
.af2-dotmark { fill: var(--color-primary); stroke: #fff; stroke-width: 2; }

.af2-chart {
  min-height: 12rem;
}

.af2-chartkey {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin: 0.6rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.af2-chartkey i {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  margin-right: 0.3rem;
  vertical-align: -0.1rem;
  border-radius: 3px;
}

.af2-chartkey i.is-green { background: #7FCB98; }
.af2-chartkey i.is-bad { background: #E46A6F; }
.af2-chartkey i.is-line,
.af2-chartkey i.is-pvline { height: 3px; vertical-align: 0.2rem; background: var(--color-primary); }
.af2-chartkey i.is-pvline { background: #F2B705; }

/* gestapelter Balken */
.af2-stack {
  display: flex;
  height: 1.6rem;
  overflow: hidden;
  border-radius: 6px;
  background: var(--color-gray-50);
}

.af2-stack__seg { height: 100%; }
.af2-stack__seg.is-gray, .af2-stack__legend i.is-gray { background: #BFC4CB; }
.af2-stack__seg.is-red, .af2-stack__legend i.is-red { background: var(--color-primary); }
.af2-stack__seg.is-dark, .af2-stack__legend i.is-dark { background: #1B2129; }

.af2-stack__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.2rem;
  margin: 0.5rem 0 0.75rem;
  padding: 0;
  list-style: none;
  font-size: 0.8438rem;
  color: var(--color-body);
}

.af2-stack__legend i {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.35rem;
  border-radius: 2px;
  vertical-align: -0.05rem;
}

.af2-sharebar {
  height: 1.1rem;
  margin: 0.5rem 0 0.75rem;
  border-radius: 999px;
  background: var(--color-gray-50);
  overflow: hidden;
}

.af2-sharebar span {
  display: block;
  height: 100%;
  background: var(--color-primary);
}

.af2-lights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.af2-lights li {
  padding: 0.8rem 1rem 0.8rem 2.4rem;
  position: relative;
  border-radius: 10px;
  background: var(--color-gray-50);
  font-size: 0.875rem;
  line-height: 1.45;
}

.af2-lights li::before {
  content: "";
  position: absolute;
  left: 0.9rem;
  top: 1rem;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
}

.af2-lights .is-ok::before { background: #1E8E3E; }
.af2-lights .is-warn::before { background: #E0A100; }
.af2-lights .is-bad::before { background: var(--color-primary); }

.af2-lights strong {
  display: block;
  color: var(--color-ink);
}

/* ==========================================================================
   Einzelne Module
   ========================================================================== */

/* Übersicht: Finder */
.af2-finder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 1.5rem 2.5rem;
  padding: 2rem;
  background: var(--color-white);
  border-radius: 14px;
  border: 1px solid #ECEEF1;
}

.af2-finder__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1rem;
}

.af2-finder__result,
.af2-finder .af2-note {
  grid-column: 1 / -1;
}

.af2-finder__res {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 12px;
  background: var(--color-primary-light);
}

.fp .af2-finder__res h3 {
  margin: 0.2rem 0 0.5rem;
  font-size: 1.125rem;
}

.af2-finder__res ol {
  margin: 0.3rem 0 0;
  padding-left: 1.2rem;
  font-size: 0.9063rem;
}

/* Eigentümer: Rollenplan */
.af2-roleplan {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: q;
}

.af2-roleplan li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.15rem 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid #ECEEF1;
  border-radius: 10px;
  counter-increment: q;
}

.af2-roleplan li::before {
  content: counter(q);
  grid-row: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
}

.af2-roleplan__q {
  font-weight: 600;
  color: var(--color-ink);
}

.af2-roleplan__a {
  font-size: 0.9063rem;
  color: var(--color-primary-dark);
}

/* WEG: Ebenen */
.af2-levels {
  display: grid;
  grid-template-columns: minmax(0, 3fr) 3rem minmax(0, 1.3fr);
  gap: 1rem;
  align-items: stretch;
}

.af2-level {
  padding: 1.5rem;
  border-radius: 14px;
  background: var(--color-white);
  border: 1px solid #ECEEF1;
}

.af2-level--home {
  border: 2px solid var(--color-primary);
}

.af2-level__tag {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.fp .af2-level h3 {
  margin: 0.25rem 0 1rem;
  font-size: 1.25rem;
}

.af2-level__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.75rem;
}

.af2-mini {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem;
  border-radius: 10px;
  background: var(--color-gray-50);
}

.af2-mini strong {
  color: var(--color-ink);
}

.af2-mini span:not(.fp-icon) {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--color-body);
}

.af2-levels__divider {
  display: flex;
  align-items: center;
  justify-content: center;
}

.af2-levels__divider span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
}

/* Mieter: Stromweg */
.af2-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: 2rem;
  align-items: center;
}

.af2-flow__controls {
  display: grid;
  gap: 0.6rem;
  margin: 1.25rem 0;
}

.af2-flow__state {
  min-height: 4.5rem;
  margin: 0 0 0.75rem;
  font-weight: 500;
  color: var(--color-ink);
}

.af2-flow__key {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-muted);
}

.af2-flow__fig {
  margin: 0;
}

.af2-flow__img {
  position: relative;
  aspect-ratio: 1992 / 636;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.af2-flow__img svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.af2-path {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 14 12;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: af2-dash 1.4s linear infinite;
}

.af2-path--pv-home,
.af2-path--pv-grid { stroke: #F2B705; }
.af2-path--grid-home { stroke: #1A56B6; }

.af2-path--pv-bat,
.af2-path--bat-home { stroke: #4CAF73; }

.af2-flow[data-time="abend"] .af2-path--grid-home { opacity: 0.45; }

.af2-flow[data-time="sommer"] .af2-path--pv-home,
.af2-flow[data-time="sommer"] .af2-path--pv-grid,
.af2-flow[data-time="sommer"] .af2-path--pv-bat,
.af2-flow[data-time="abend"] .af2-path--bat-home,
.af2-flow[data-time="winter"] .af2-path--grid-home {
  opacity: 0.95;
}

.af2-flow.is-static .af2-path {
  animation: none;
  stroke-dasharray: none;
}

@keyframes af2-dash {
  to { stroke-dashoffset: -52; }
}

@media (prefers-reduced-motion: reduce) {
  .af2-path { animation: none; stroke-dasharray: none; }
}

.af2-flowlabel {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(24, 32, 43, 0.16);
  font-size: 0.75rem;
  line-height: 1.25;
  color: var(--color-ink);
}

.af2-flowlabel em {
  display: block;
  font-style: normal;
  color: var(--color-muted);
}

.af2-flowlabel .fp-icon svg {
  width: 1.3rem;
  height: 1.3rem;
}

.af2-flowlabel--pv { left: 31%; top: 4%; width: 20%; min-height: 21%; }
.af2-flowlabel--home { left: 1.5%; top: 56%; width: 26%; min-height: 31%; }
.af2-flowlabel--grid { left: 71.5%; top: 61%; width: 27.5%; min-height: 31%; }
.af2-flowlabel--bat { left: 43%; top: 77%; width: 22%; }

/* Abendstimmung: Bild abdunkeln, Beschriftungen bleiben hell */
.af2-flow__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 30, 60, 0);
  transition: background 0.4s;
  pointer-events: none;
}

.af2-flow[data-time="abend"] .af2-flow__img::after { background: rgba(40, 30, 70, 0.28); }
.af2-flow[data-time="winter"] .af2-flow__img::after { background: rgba(20, 30, 60, 0.42); }
.af2-flow__img svg,
.af2-flowlabel { z-index: 1; }
.af2-key--bat::before { background: #4CAF73; }

.af2-flow__fig figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--color-body);
}

.af2-key::before {
  content: "";
  display: inline-block;
  width: 1.4rem;
  height: 4px;
  margin-right: 0.4rem;
  border-radius: 2px;
  vertical-align: 0.2rem;
}

.af2-key--pv::before { background: #F2B705; }
.af2-key--grid::before { background: #1A56B6; }
.af2-key--contract::before { background: var(--color-primary); height: 2px; }
.af2-figcap { color: var(--color-muted); }

/* Mieter: Musterrechnung */
.af2-bill {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.af2-bill__paper {
  padding: 1.5rem;
  background: #fff;
  border: 1px solid #DCDFE4;
  border-radius: 6px;
  box-shadow: 0 16px 40px rgba(24, 32, 43, 0.1);
  font-size: 0.9063rem;
}

.af2-bill__row {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.55rem 0;
  border-bottom: 1px dashed #E3E5E9;
}

.af2-bill__row > span:first-child {
  grid-column: 2;
}

.af2-bill__head {
  grid-template-columns: minmax(0, 1fr) auto;
  border-bottom: 2px solid #1B2129;
}

.af2-bill__head > :first-child { grid-column: 1; }
.af2-bill__sub { color: var(--color-muted); }
.af2-bill__sum { font-weight: 700; color: var(--color-ink); }

.af2-mark {
  width: 1.7rem;
  height: 1.7rem;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  background: #fff;
  color: var(--color-primary);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}

.af2-mark.is-active,
.af2-mark:hover {
  background: var(--color-primary);
  color: #fff;
}

.af2-bill__item {
  padding: 1.5rem;
  border-radius: 12px;
  background: var(--color-primary-light);
}

.fp .af2-bill__item h3 {
  margin: 0.25rem 0 0.4rem;
  font-size: 1.125rem;
}

/* Bestands-PV */
.af2-pvtoday .af2-switch {
  margin-bottom: 1.5rem;
}

.af2-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
}

.af2-compare__card {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1rem;
  align-items: start;
}

.af2-compare__card img {
  width: 100%;
  height: 100%;
  min-height: 12rem;
  object-fit: cover;
  border-radius: 8px;
}

.fp .af2-compare__card h3 {
  margin: 0.2rem 0 0.6rem;
  font-size: 1.1875rem;
}

.af2-compare__card.is-new .fp-card__cat {
  color: var(--color-primary);
}

.af2-compare__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
}

.af2-compare__arrow svg {
  width: 1.2rem;
  height: 1.2rem;
}

.af2-graylist {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9063rem;
}

.af2-graylist li {
  position: relative;
  padding: 0.25rem 0 0.25rem 1.5rem;
  color: var(--color-body);
}

.af2-graylist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: #9AA1AB;
}

/* Kleines MFH: Haus mit Markierungen */
.af2-house {
  position: relative;
  margin: 0;
}

.af2-house img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.af2-tag-pin {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.65rem;
  background: #fff;
  border: 1px solid #F3C4C6;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(24, 32, 43, 0.14);
  font-size: 0.75rem;
  line-height: 1.25;
  color: var(--color-ink);
}

.af2-tag-pin em {
  display: block;
  font-style: normal;
  color: var(--color-muted);
}

.af2-tag-pin .fp-icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

.af2-tag-pin--pv { left: 5%; top: 5.5%; width: 31.5%; min-height: 21%; }
.af2-tag-pin--we { left: 2.6%; top: 40%; width: 32%; min-height: 20%; }
.af2-tag-pin--tech { left: 5%; top: 72.5%; width: 33.5%; min-height: 20.5%; }

.af2-sflow .af2-switch {
  margin-bottom: 1.25rem;
}

.af2-sflow__chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.af2-sflow__chain span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  background: var(--color-gray-50);
  font-size: 0.875rem;
  font-weight: 600;
}

.af2-sflow__chain span svg {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--color-primary);
}

.af2-sflow__chain i {
  width: 1.5rem;
  height: 2px;
  background: var(--color-primary);
}

/* Wohnanlage: Lageplan */
.af2-site {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.af2-site__map {
  position: relative;
  margin: 0;
}

.af2-site__map img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.af2-sitepin {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.65rem;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(24, 32, 43, 0.18);
  font: inherit;
  font-size: 0.75rem;
  line-height: 1.25;
  text-align: left;
  color: var(--color-ink);
  cursor: pointer;
}

.af2-sitepin em {
  display: block;
  font-style: normal;
  color: var(--color-muted);
}

.af2-sitepin[aria-pressed="true"] {
  border-color: var(--color-primary);
}

.af2-sitepin .fp-icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

.af2-sitepin--a { left: 1.5%; top: 5.5%; width: 28.5%; min-height: 23%; }
.af2-sitepin--b { left: 67%; top: 2.5%; width: 29%; min-height: 24.5%; }
.af2-sitepin--c { left: 7%; top: 72.5%; width: 29.5%; min-height: 26%; }

.af2-open {
  margin: 0.75rem 0 0;
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  background: #FFF7E6;
  font-size: 0.875rem;
}

/* Wohnanlage: Baum */
.af2-tree {
  display: grid;
  justify-items: center;
  gap: 1rem;
  margin: 1rem 0;
}

.af2-tree__root,
.af2-tree__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-ink);
}

.af2-tree__level {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;
  padding-top: 1rem;
  border-top: 2px solid var(--color-primary);
}

.af2-tree__leaves {
  display: flex;
  gap: 0.2rem;
}

.af2-tree__leaves svg {
  width: 1.1rem;
  height: 1.1rem;
}

.af2-meterlegend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8438rem;
}

.af2-meterlegend li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.af2-meterlegend svg {
  width: 1.1rem;
  height: 1.1rem;
}

.af2-path-steps {
  display: grid;
  gap: 0.6rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.af2-path-steps li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
  border: 1px solid #ECEEF1;
  border-radius: 10px;
  font-size: 0.9375rem;
}

.af2-path-steps .af2-steps__num {
  margin: 0;
}

/* Wohnanlage: Regelbetrieb */
.af2-rollout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.af2-rollout__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.af2-rollout__steps button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  height: 100%;
  padding: 0.75rem;
  border: 1px solid #ECEEF1;
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
  color: var(--color-ink);
  cursor: pointer;
}

.af2-rollout__steps .af2-steps__num {
  margin: 0;
}

.af2-rollout__steps button[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.af2-rollout__detail dl {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 1.5rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #ECEEF1;
}

.af2-rollout__detail dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.af2-rollout__detail dd {
  margin: 0 0 0.75rem;
  color: var(--color-ink);
}

/* Wohnanlage: Bausteine */
.af2-blocks__rows {
  display: grid;
  gap: 0.75rem;
}

.af2-blockrow {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 1rem;
  border: 1px solid #ECEEF1;
  border-radius: 10px;
}

.af2-blockrow legend {
  padding: 0 0.4rem;
  font-weight: 700;
  color: var(--color-ink);
}

.af2-blockcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.9rem;
}

.af2-blockcard {
  padding: 1rem 1.1rem;
  border-radius: 10px;
  border: 1px solid #ECEEF1;
  border-left: 5px solid #E0A100;
  background: #fff;
}

.af2-blockcard.is-ok { border-left-color: #1E8E3E; }
.af2-blockcard.is-bad { border-left-color: var(--color-primary); }

.af2-blockcard header {
  display: flex;
  justify-content: space-between;
  font-size: 0.9375rem;
}

.af2-blockcard header span {
  font-size: 0.75rem;
  color: var(--color-muted);
}

.af2-blockcard__status {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  font-weight: 600;
}

.af2-blockcard ul {
  margin: 0.3rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.8438rem;
  color: var(--color-body);
}

/* Hausverwaltung */
.af2-objtabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.af2-objtabs button {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border: 1px solid #ECEEF1;
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-weight: 600;
  text-align: left;
  color: var(--color-ink);
  cursor: pointer;
}

.af2-objtabs button[aria-checked="true"] {
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

/* Neubau: Ebenen */
.af2-layers {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 2rem;
  align-items: center;
}

.af2-layers__fig {
  position: relative;
  margin: 0;
}

.af2-layers__fig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.af2-dot {
  position: absolute;
  width: 1.9rem;
  height: 1.9rem;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  box-shadow: 0 0 0 4px rgba(200, 22, 29, 0.2);
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.af2-dot.is-active {
  box-shadow: 0 0 0 7px rgba(200, 22, 29, 0.35);
}

.af2-dot--0 { left: 64.7%; top: 11.8%; }
.af2-dot--1 { left: 64.7%; top: 36.3%; }
.af2-dot--2 { left: 64.7%; top: 59.2%; }
.af2-dot--3 { left: 64.7%; top: 83.6%; }

.af2-layers__list {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.af2-layers__list button {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid #ECEEF1;
  border-radius: 10px;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.af2-layers__list button.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.af2-layers__list strong {
  display: block;
  color: var(--color-ink);
}

.af2-layers__list em {
  display: block;
  font-size: 0.875rem;
  font-style: normal;
  color: var(--color-muted);
}

.af2-layers__q {
  margin: 0.4rem 0 0;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  background: #FFF7E6;
  font-size: 0.9063rem;
}

.af2-meter {
  margin: 1rem 0 0.5rem;
  padding: 0.7rem 1rem;
  border-radius: 8px;
}

.af2-meter.is-ok { background: #E8F5EC; color: #1E6B36; }
.af2-meter.is-warn { background: #FFF4D6; color: #8A5A00; }
.af2-meter.is-bad { background: var(--color-primary-light); color: var(--color-primary-dark); }

.af2-scen3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.af2-scen3__card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.875rem;
  color: var(--color-body);
}

.af2-scen3__card img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: 8px;
}

.af2-scen3__card strong {
  color: var(--color-ink);
}

.af2-numlist {
  margin: 0;
  padding-left: 1.3rem;
  font-weight: 500;
}

.af2-paths {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

.af2-paths li {
  padding: 0.6rem 0.8rem;
  border: 1px solid #ECEEF1;
  border-radius: 8px;
}

.af2-paths li.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

/* Mischgebäude: Diagramm */
.af2-area.is-wohn { fill: #F7A7AE; }
.af2-area.is-gew { fill: #E5484D; }
.af2-area.is-allg { fill: #8FB3E8; }
.af2-area.is-wp { fill: #5F6873; }
.af2-pvline { fill: none; stroke: #F2B705; stroke-width: 3; }
.af2-chartkey i.is-wohn { background: #F7A7AE; }
.af2-chartkey i.is-gew { background: #E5484D; }
.af2-chartkey i.is-allg { background: #8FB3E8; }
.af2-chartkey i.is-wp { background: #5F6873; }

/* Wohnungswirtschaft */
.af2-portfolio {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}

.af2-ptile button {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  padding: 0 0 1rem;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.af2-ptile__img {
  position: relative;
  display: block;
}

.af2-ptile__img img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.af2-ptile button > strong,
.af2-ptile button > .fp-link,
.af2-ptile p {
  margin: 0;
  padding: 0 1rem;
}

.af2-ptile p {
  padding-bottom: 1rem;
  font-size: 0.875rem;
  color: var(--color-body);
}

.af2-ptile .af2-badge {
  position: absolute;
  left: 0.6rem;
  top: 0.6rem;
}

.af2-badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
}

.af2-badge--pilot { background: #1E8E3E; }
.af2-badge--daten { background: #E0A100; color: #1B2129; }
.af2-badge--sanierung { background: var(--color-primary); }
.af2-badge--pv { background: #1A56B6; }
.af2-badge--zaehler { background: #0E7C7B; }

.af2-triage {
  width: 100%;
  min-width: 56rem;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.af2-triage th {
  padding: 0.6rem 0.5rem;
  background: var(--color-gray-50);
  text-align: left;
  font-size: 0.8125rem;
}

.af2-triage td {
  padding: 0.4rem 0.4rem;
  border-bottom: 1px solid #ECEEF1;
}

.af2-triage__list {
  display: grid;
  gap: 0.6rem;
  margin: 0 0 1rem;
  padding-left: 1.4rem;
}

.af2-triage__list li {
  padding: 0.75rem 1rem;
  border: 1px solid #ECEEF1;
  border-radius: 10px;
}

.af2-triage__list p {
  margin: 0.25rem 0 0;
}

/* Szenariokarten */
.af2-scencards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.af2-scencard {
  padding: 1.1rem 1.2rem;
  border: 1px solid #ECEEF1;
  border-radius: 12px;
}

.af2-scencard.is-active {
  border: 2px solid var(--color-primary);
}

.af2-scencard dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 0.75rem;
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
}

.af2-scencard dt {
  color: var(--color-muted);
}

.af2-scencard dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
}

.af2-scencard .is-good { color: #1E6B36; }
.af2-scencard .is-bad { color: var(--color-primary-dark); }

/* ==========================================================================
   Druck: nur die gewählte Checkliste
   ========================================================================== */
@media print {
  body.af2-printing * { visibility: hidden !important; }
  body.af2-printing .af2-print-target,
  body.af2-printing .af2-print-target * { visibility: visible !important; }
  body.af2-printing .af2-print-target { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; border: 0; }
  body.af2-printing .af2-print { display: none !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  .af2-cols-5,
  .af2-cols-6,
  .af2-portfolio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .af2-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .af2-blockrow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .af2-finder { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 960px) {
  .af2 .fp-section { padding-block: 3.5rem; }
  .af2-hero::before { width: 100%; }
  .af2-hero__inner.has-card { grid-template-columns: minmax(0, 1fr); }
  .af2-herocard { max-width: 26rem; }
  .af2-cols-3,
  .af2-scencards,
  .af2-lights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .af2-grid-2,
  .af2-grid-2--wide,
  .af2-grid-2--house,
  .af2-split,
  .af2-flow,
  .af2-bill,
  .af2-site,
  .af2-rollout,
  .af2-layers,
  .af2-faq__grid,
  .af2-checkbox.has-image { grid-template-columns: minmax(0, 1fr); }
  .af2-levels { grid-template-columns: minmax(0, 1fr); }
  .af2-levels__divider { transform: rotate(90deg); }
  .af2-compare { grid-template-columns: minmax(0, 1fr); }
  .af2-compare__arrow { transform: rotate(90deg); margin-inline: auto; }
  .af2-finder__res { grid-template-columns: minmax(0, 1fr); }
  .af2-tabbar__inner a { padding: 1rem; font-size: 0.9063rem; }
}

@media (max-width: 640px) {
  .af2-cols-2,
  .af2-cols-3,
  .af2-cols-4,
  .af2-cols-5,
  .af2-cols-6,
  .af2-portfolio,
  .af2-scencards,
  .af2-lights,
  .af2-form-grid,
  .af2-finder__form,
  .af2-objtabs,
  .af2-scen3,
  .af2-meterlegend,
  .af2-cols-list-2,
  .af2-cols-list-3 { grid-template-columns: minmax(0, 1fr); }
  .af2-tabbar__inner { grid-template-columns: minmax(0, 1fr); }
  .af2-tabbar__inner a + a { border-left: 0; border-top: 1px solid var(--color-border); }
  .af2-blockrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .af2-tool,
  .af2-finder,
  .af2-checkbox { padding: 1.25rem; }
  .af2-steps li:not(:last-child)::after { display: none; }
  .af2-compare__card { grid-template-columns: minmax(0, 1fr); }
  .af2-compare__card img { min-height: 9rem; }
  .af2-example { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .af2-flowlabel { font-size: 0.625rem; padding: 0.3rem 0.4rem; }
  .af2-flowlabel em,
  .af2-tag-pin em,
  .af2-sitepin em { display: none; }
  .af2-flowlabel .fp-icon,
  .af2-tag-pin .fp-icon,
  .af2-sitepin .fp-icon { display: none; }
  .af2-tag-pin,
  .af2-sitepin { font-size: 0.625rem; padding: 0.25rem 0.4rem; }
  .af2-slider__row { grid-template-columns: minmax(0, 1fr) 6rem; }
  .af2-switch { border-radius: 12px; }
  .af2-toolbtns .af2-field { margin-left: 0; }
}

/* Lange deutsche Wörter auf schmalen Bildschirmen umbrechen */
.af2 h1,
.af2 h2,
.af2 h3,
.af2-kpi strong {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* ==========================================================================
   V2.1 – Szenario-Module (Regler links, Ergebnis rechts, Details aufklappbar)
   ========================================================================== */

.af2-scn {
  padding: 2rem;
  background: var(--color-white);
  border: 1px solid #ECEEF1;
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(24, 32, 43, 0.06);
}

.af2-scn > .af2-switch {
  margin-bottom: 1.5rem;
}

.af2-scn__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 2.5rem;
  align-items: start;
}

.af2-scn__grid--wide {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

.af2-scn__results {
  position: sticky;
  top: calc(var(--header-height) + 4rem);
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: 14px;
  background: var(--color-gray-50);
}

/* Große Regler */
.af2-scn .af2-slider {
  margin-bottom: 1.4rem;
}

.af2-scn .af2-slider label {
  font-size: 1rem;
}

.af2-scn .af2-slider__row {
  grid-template-columns: minmax(0, 1fr) 10.5rem;
}

.af2-scn input[type="range"] {
  height: 2rem;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.af2-scn input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary) var(--af2-fill, 50%), #E3E6EA var(--af2-fill, 50%));
}

.af2-scn input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -9px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 2px 8px rgba(24, 32, 43, 0.3);
}

.af2-scn input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: #E3E6EA;
}

.af2-scn input[type="range"]::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--color-primary);
}

.af2-scn input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 2px 8px rgba(24, 32, 43, 0.3);
}

.af2-scn input[type="range"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: 999px;
}

.af2-scn .af2-input--sm input {
  font-size: 1.0625rem;
  font-weight: 700;
  padding: 0.55rem 0.6rem;
}

.af2-hintline {
  margin: -0.6rem 0 1rem;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

/* Große Kennzahlen */
.af2-big {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.af2-big--4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.af2-bigkpi {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #ECEEF1;
}

.af2-bigkpi span {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-muted);
}

.af2-bigkpi strong {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.9rem);
  line-height: 1.15;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.af2-bigkpi em {
  font-size: 0.75rem;
  font-style: normal;
  line-height: 1.4;
  color: var(--color-muted);
}

.af2-bigkpi.is-good { background: #F2FAF4; border-color: #B7DFC3; }
.af2-bigkpi.is-good strong { color: #1E6B36; }
.af2-bigkpi.is-bad { background: #FDF3F3; border-color: #F3C4C6; }
.af2-bigkpi.is-bad strong { color: var(--color-primary-dark); }
.af2-bigkpi.is-scenario { border-style: dashed; }

/* Animierte horizontale Balken */
.af2-hbars,
.af2-mini-wf > div {
  display: grid;
  gap: 0.75rem;
}

.af2-hbar {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr) 6.5rem;
  gap: 0.75rem;
  align-items: center;
}

.af2-hbar__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-ink);
}

.af2-hbar__track {
  height: 2.1rem;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.af2-hbar__fill {
  display: block;
  height: 100%;
  border-radius: 8px;
  background: #BFC4CB;
  transition: width 0.45s cubic-bezier(.2, .8, .2, 1);
}

.af2-hbar__fill.is-red { background: var(--color-primary); }
.af2-hbar__fill.is-green { background: #4CAF73; }
.af2-hbar__fill.is-dark { background: #1B2129; }
.af2-hbar__fill.is-bad { background: #E46A6F; }

.af2-hbar__val {
  font-family: var(--font-display);
  font-size: 1.125rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

.af2-mini-wf {
  margin-top: 0.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid #ECEEF1;
  border-radius: 12px;
}

.af2-mini-wf .af2-h4 {
  margin: 0 0 0.6rem;
}

.af2-mini-wf .af2-hbar {
  grid-template-columns: 6rem minmax(0, 1fr) 6.5rem;
}

.af2-mini-wf .af2-hbar__track {
  height: 1.3rem;
  background: var(--color-gray-50);
}

.af2-mini-wf .af2-hbar__val {
  font-size: 0.9375rem;
}

/* Gestapelte Energiebalken */
.af2-energy {
  display: grid;
  gap: 1rem;
}

.af2-ebar__title {
  margin: 0 0 0.4rem;
  font-weight: 700;
  color: var(--color-ink);
}

.af2-ebar__track {
  display: flex;
  height: 3rem;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
}

.af2-ebar__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  overflow: hidden;
  transition: width 0.5s cubic-bezier(.2, .8, .2, 1);
}

.af2-ebar__seg em {
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.af2-ebar__seg.is-gray { background: #AEB4BC; }
.af2-ebar__seg.is-red { background: var(--color-primary); }
.af2-ebar__seg.is-dark { background: #1B2129; }

@media (prefers-reduced-motion: reduce) {
  .af2-hbar__fill,
  .af2-ebar__seg { transition: none; }
}

/* Aufklappbereiche */
.af2-more {
  margin-top: 1rem;
  border: 1px solid #E3E6EA;
  border-radius: 12px;
  background: #fff;
}

.af2-more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  font-weight: 700;
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
}

.af2-more summary::-webkit-details-marker { display: none; }

.af2-more summary svg {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-primary);
  transition: transform 0.2s ease;
}

.af2-more[open] summary svg { transform: rotate(180deg); }

.af2-more summary:hover span { color: var(--color-primary); }

.af2-more__body {
  display: grid;
  gap: 1rem;
  padding: 0 1.25rem 1.25rem;
}

.af2-more .af2-toolbtns { margin-top: 0; }

.af2-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.af2-form-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.af2-scnnote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

/* Modellwahl (Eigentümer, Bestands-PV) */
.af2-modelpick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

.af2-modelpick button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.2rem 0.8rem;
  align-items: start;
  padding: 1.1rem 1.2rem;
  border: 2px solid #ECEEF1;
  border-radius: 14px;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.af2-modelpick button .fp-icon {
  grid-row: span 2;
}

.af2-modelpick button strong {
  font-size: 1.0625rem;
  color: var(--color-ink);
}

.af2-modelpick button span:not(.fp-icon) {
  font-size: 0.8438rem;
  line-height: 1.45;
  color: var(--color-muted);
}

.af2-modelpick--sm button {
  grid-template-columns: minmax(0, 1fr);
}

.af2-modelpick button[aria-checked="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  box-shadow: 0 8px 20px rgba(200, 22, 29, 0.12);
}

.af2-modelpick button[aria-checked="true"] strong { color: var(--color-primary-dark); }

.af2-modelpick button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Gebäudeskizze */
.af2-sketch {
  margin: 0 0 1.25rem;
  padding: 0.5rem;
  border-radius: 12px;
  background: linear-gradient(180deg, #EEF4FB 0%, #F8FAFC 100%);
}

.sk-ground { fill: #D9E6CF; }
.sk-wall { fill: #fff; stroke: #CBD1D8; }
.sk-win { fill: #F5C66B; transition: fill 0.3s; }
.sk-win.is-off { fill: #E4E7EB; }
.sk-roof { fill: #59616C; }
.sk-panel { fill: #1F3B66; stroke: #6F8FBF; stroke-width: 0.6; }
.sk-sun circle { fill: #F2B705; }

.af2-rolebox {
  padding: 1rem 1.1rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #ECEEF1;
}

.af2-rolebox .af2-h4 { margin-top: 0; }

.af2-roledl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.35rem 1rem;
  margin: 0;
  font-size: 0.9063rem;
}

.af2-roledl dt { color: var(--color-muted); }
.af2-roledl dd { margin: 0; font-weight: 600; color: var(--color-ink); }

/* WEG: Fluss und Folgen */
.af2-wegflow {
  display: grid;
  gap: 0.6rem;
  padding: 1rem;
  border-radius: 12px;
  background: var(--color-gray-50);
}

.af2-flowrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.af2-chip {
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #DDE1E6;
  font-size: 0.8438rem;
  font-weight: 700;
  color: var(--color-ink);
}

.af2-chip.is-red { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.af2-chip.is-dark { background: #1B2129; border-color: #1B2129; color: #fff; }
.af2-chip.is-home { border: 2px solid var(--color-primary); }

.af2-arrow {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 3.5rem;
  font-size: 0.6875rem;
  color: var(--color-muted);
}

.af2-arrow::after {
  content: "→";
  font-size: 1.1rem;
  line-height: 1;
  color: var(--color-primary);
}

.af2-arrow em { font-style: normal; }

.af2-conseq {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.af2-conseq li {
  padding: 0.75rem 1rem;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #ECEEF1;
  font-size: 0.9063rem;
  line-height: 1.45;
}

.af2-conseq strong {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-primary);
}

/* Mieter: Preis-Chips */
.af2-pricechips {
  display: grid;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: 12px;
  background: var(--color-gray-50);
}

.af2-pricechips p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  margin: 0;
  font-size: 0.9063rem;
  color: var(--color-ink);
}

.af2-pricechip__k {
  min-width: 4.6rem;
  font-weight: 700;
}

.af2-btn-sm {
  justify-self: start;
  margin-top: 0.25rem;
  padding: 0.55rem 1rem;
  font-size: 0.875rem;
}

.af2-check-inline--strong {
  font-weight: 600;
  color: var(--color-ink);
}

/* Investoren */
.af2-scencmp {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin: 0;
  grid-column: 1 / -1;
  font-size: 0.8438rem;
  color: var(--color-muted);
}

.af2-scencmp span.is-active { font-weight: 700; color: var(--color-ink); }
.af2-scencmp .is-good { color: #1E6B36; }
.af2-scencmp .is-bad { color: var(--color-primary-dark); }
.af2-scencmp em { font-style: normal; }

.af2-anim { transition: y 0.3s, height 0.3s; }

/* Responsive Szenario-Module: Ergebnis direkt unter den Reglern */
@media (max-width: 960px) {
  .af2-scn { padding: 1.25rem; }
  .af2-scn__grid,
  .af2-scn__grid--wide { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .af2-scn__results { position: static; padding: 1rem; }
  .af2-form-grid--3,
  .af2-form-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .af2-modelpick { grid-template-columns: minmax(0, 1fr); }
  .af2-form-grid--3,
  .af2-form-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .af2-scn .af2-slider__row { grid-template-columns: minmax(0, 1fr) 7.25rem; }
  .af2-scn .af2-input--sm input { font-size: 1rem; padding-inline: 0.4rem; }
  .af2-roledl { grid-template-columns: minmax(0, 1fr); gap: 0 0; }
  .af2-roledl dd { margin-bottom: 0.5rem; }
  .af2-bigkpi { padding: 0.8rem; }
  .af2-bigkpi strong { font-size: 1.3rem; }
  .af2-hbar { grid-template-columns: minmax(0, 1fr) auto; }
  .af2-hbar__label { grid-column: 1 / -1; }
  .af2-mini-wf .af2-hbar { grid-template-columns: minmax(0, 1fr) auto; }
  .af2-sketch { max-width: 22rem; margin-inline: auto; }
}

/* ==========================================================================
   Lösungen V2 – gemeinsame Bausteine
   ========================================================================== */

/* Rollen-Pillen */
.af2-pill {
  display: inline-block;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.af2-pill--mss { background: var(--color-primary); color: #fff; }
.af2-pill--eigen { background: #1B2129; color: #fff; }
.af2-pill--partner { background: #1A56B6; color: #fff; }
.af2-pill--offen { background: #FFF4D6; color: #8A5A00; border: 1px dashed #E0A100; }
.af2-pill--extern { background: #EEF0F3; color: #3B434D; border: 1px solid #D5D9DF; }

/* Übernehmen / Prüfen */
.af2-takeover {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.af2-takeover__col {
  padding: 1.75rem;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #ECEEF1;
}

.af2-takeover__col.is-ours { border-top: 4px solid var(--color-primary); }
.af2-takeover__col.is-check { border-top: 4px solid #E0A100; }

.fp .af2-takeover h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1rem;
  font-size: 1.1875rem;
}

.af2-qlist {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.af2-qlist li {
  position: relative;
  padding-left: 1.7rem;
  line-height: 1.5;
}

.af2-qlist li::before {
  content: "?";
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: #FFF4D6;
  color: #8A5A00;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.2rem;
  text-align: center;
}

/* Rollenleiste */
.af2-rolestrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.af2-rolestrip li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1.25rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #ECEEF1;
}

.af2-rolestrip__role {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-ink);
}

.af2-rolestrip__text {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-muted);
}

.af2-rolestrip .af2-pill { white-space: normal; }

/* Weiterleitungen */
.af2-combos {
  display: grid;
  gap: 1.25rem;
}

.af2-combo {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.5rem;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s;
}

.af2-combo:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(24, 32, 43, 0.1);
}

.af2-combo strong {
  font-size: 1.125rem;
  color: var(--color-ink);
}

.af2-combo span:not(.fp-icon) {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-body);
}

.af2-combo em {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  font-style: normal;
  font-weight: 700;
  color: var(--color-primary);
}

.af2-combo em svg { width: 1rem; height: 1rem; }

/* Mieterstrom: Betreiberwege */
.lo2-operator {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 2rem;
  align-items: start;
}

.lo2-operator__fig { margin: 0; }

.lo2-operator__fig img {
  display: block;
  width: 100%;
  border-radius: 14px;
}

.lo2-flowkeys {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8438rem;
}

.lo2-flowkeys i,
.lo2-legend-line i {
  display: inline-block;
  width: 1.4rem;
  height: 4px;
  margin-right: 0.35rem;
  border-radius: 2px;
  vertical-align: 0.2rem;
}

i.is-pv { background: #F2B705; }
i.is-grid { background: #1A56B6; }
i.is-feed { background: repeating-linear-gradient(90deg, #F2B705 0 5px, transparent 5px 8px); }
i.is-common { background: #8FB3E8; }
i.is-opt { background: repeating-linear-gradient(90deg, #9AA1AB 0 3px, transparent 3px 6px); }
i.is-store { background: #4CAF73; }
i.is-ctl { background: repeating-linear-gradient(90deg, #5F6873 0 2px, transparent 2px 5px); }

.lo2-operator__panel {
  padding: 1.5rem;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #ECEEF1;
}

.af2-modelpick--stack {
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 1.25rem;
}

.lo2-roletable th { width: 55%; }

/* Projektierung */
.lo2-concept {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lo2-concept li {
  overflow: hidden;
}

.lo2-concept img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.lo2-concept li > div { padding: 1.25rem 1.4rem 1.5rem; }
.fp .lo2-concept h3 { margin: 0.6rem 0 0.4rem; font-size: 1.125rem; }
.lo2-concept p { margin: 0; font-size: 0.9375rem; color: var(--color-body); }

.lo2-result {
  margin-top: 0.75rem !important;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  background: var(--color-primary-light);
  font-weight: 600;
  color: var(--color-primary-dark) !important;
}

/* PV: Kette */
.lo2-chain {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 2rem;
  align-items: start;
}

.lo2-chain__img {
  width: 100%;
  border-radius: 14px;
}

.lo2-chain__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  counter-reset: st;
}

.lo2-chain__steps li { position: relative; }

.lo2-chain__steps li:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -0.55rem;
  top: 40%;
  z-index: 1;
  color: var(--color-primary);
  font-weight: 700;
}

.lo2-chain__steps button {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
  height: 100%;
  padding: 1rem 0.8rem;
  border: 2px solid #ECEEF1;
  border-radius: 12px;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.lo2-chain__steps button.is-optional { border-style: dashed; }
.lo2-chain__steps button[aria-checked="true"] { border-color: var(--color-primary); background: var(--color-primary-light); }
.lo2-chain__steps strong { color: var(--color-ink); }
.lo2-chain__steps em { font-size: 0.8125rem; font-style: normal; color: var(--color-muted); }

.lo2-chain__detail {
  padding: 1.25rem 1.4rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #ECEEF1;
}

.lo2-chain__detail .af2-h4 { margin-top: 0; }

/* Messkonzepte */
.lo2-meter > .af2-switch { margin-bottom: 1.25rem; }

.lo2-meter__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
}

.lo2-meter__fig {
  margin: 0;
  padding: 1rem;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #ECEEF1;
}

.lo2-b-wall { fill: #F7F8FA; stroke: #CBD1D8; }
.lo2-b-roof { fill: #59616C; }
.lo2-b-panel { fill: #1F3B66; }
.lo2-b-flat { fill: #fff; stroke: #D5D9DF; }
.lo2-b-flat.is-in { fill: #FDEBEC; stroke: var(--color-primary); }
.lo2-b-flat.is-out { fill: #F1F2F4; stroke: #9AA1AB; stroke-dasharray: 4 3; }
.lo2-b-flat.is-common { fill: #E9F0FB; stroke: #8FB3E8; }
.lo2-b-lbl { font-size: 11px; font-weight: 600; fill: #3B434D; }
.lo2-b-lbl--w { fill: #fff; }
.lo2-b-line { stroke: #1A56B6; stroke-width: 2; }
.lo2-b-grid { fill: #1A56B6; }
.lo2-b-data { stroke: #9AA1AB; stroke-dasharray: 3 3; }
.lo2-m rect { fill: #fff; stroke: #1B2129; stroke-width: 1.4; }
.lo2-m text { font-size: 9px; font-weight: 800; fill: #1B2129; }
.lo2-m.is-gen rect { stroke: #E0A100; fill: #FFF4D6; }
.lo2-m.is-smart rect { stroke: #1A56B6; fill: #E8F0FE; }
.lo2-m.is-smart text { fill: #1A56B6; font-size: 8px; }
.lo2-m.is-sum rect { fill: var(--color-primary); stroke: var(--color-primary); }
.lo2-m.is-sum text { fill: #fff; font-size: 9px; }
.lo2-cloud rect { fill: #E8F0FE; stroke: #1A56B6; stroke-dasharray: 4 3; }
.lo2-cloud text { font-size: 11px; font-weight: 700; fill: #1A56B6; }

.lo2-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.lo2-m-key {
  display: inline-block;
  min-width: 1.9rem;
  padding: 0 0.3rem;
  border: 1.4px solid #1B2129;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 800;
  text-align: center;
  color: #1B2129;
}

.lo2-m-key.is-gen { border-color: #E0A100; background: #FFF4D6; }
.lo2-m-key.is-smart { border-color: #1A56B6; background: #E8F0FE; color: #1A56B6; }

/* Betrieb: zwei Spuren */
.lo2-lanes {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.lo2-lane {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #ECEEF1;
}

.lo2-lane.is-pv { border-left: 6px solid #F2B705; }
.lo2-lane.is-data { border-left: 6px solid #1A56B6; }

.lo2-lane__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--color-ink);
}

.lo2-lane ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lo2-lane li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.8rem;
  border-radius: 10px;
  background: var(--color-gray-50);
  font-size: 0.875rem;
  font-weight: 600;
}

.lo2-lane li:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -0.7rem;
  color: var(--color-primary);
}

.lo2-when {
  padding: 1.5rem;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #ECEEF1;
}

.lo2-when__list { margin-top: 1rem; }

/* Teilleistungen-Matrix */
.lo2-matrix > .af2-switch { margin-bottom: 1rem; }
.lo2-mx td { text-align: center; }
.lo2-dot { font-size: 1.25rem; line-height: 1; }
.lo2-dot--mss { color: var(--color-primary); }
.lo2-dot--eigen { color: #1B2129; }
.lo2-dot--partner { color: #1A56B6; }
.lo2-dot--extern { color: #9AA1AB; }
.lo2-dot--offen { color: #E0A100; }

/* Speicher / EMS / Wärme */
.af2-area.is-direct { fill: #F2B705; }
.af2-area.is-charge { fill: #4CAF73; }
.af2-area.is-dis { fill: #1E8E3E; }
.lo2-loadline { fill: none; stroke: #1B2129; stroke-width: 2; stroke-dasharray: 5 4; }
.af2-chartkey i.is-direct { background: #F2B705; }
.af2-chartkey i.is-charge { background: #4CAF73; }
.af2-chartkey i.is-dis { background: #1E8E3E; }
.af2-chartkey i.is-loadline { height: 3px; background: #1B2129; vertical-align: 0.2rem; }

.lo2-inline-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
}

.lo2-prio ol {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.875rem;
  line-height: 1.6;
}

.lo2-heatbar { fill: #F7A7AE; }
.lo2-heatcov { fill: var(--color-primary); }
.lo2-pvbar { fill: #F2B705; }
.af2-chartkey i.lo2-k-heat { background: #F7A7AE; }
.af2-chartkey i.lo2-k-cov { background: var(--color-primary); }
.af2-chartkey i.lo2-k-pv { background: #F2B705; }

.lo2-heatpath,
.lo2-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.lo2-path {
  margin-bottom: 1.5rem;
  padding: 1rem;
  border-radius: 12px;
  background: var(--color-gray-50);
}

/* Allgemeinstrom */
.lo2-consumers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.lo2-consumers legend {
  grid-column: 1 / -1;
  margin-bottom: 0.6rem;
}

.lo2-consumers label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 0.9rem;
  border: 2px solid #ECEEF1;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}

.lo2-consumers label:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.lo2-consumers input { accent-color: var(--color-primary); }
.lo2-consumers strong { display: block; font-size: 0.9375rem; color: var(--color-ink); }
.lo2-consumers em { display: block; font-size: 0.8125rem; font-style: normal; color: var(--color-muted); }

.lo2-split2 {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 0.75rem;
}

.lo2-col {
  padding: 1rem;
  border-radius: 12px;
  background: #fff;
  font-size: 0.875rem;
}

.lo2-col.is-flats { border-top: 4px solid #1B2129; }
.lo2-col.is-common { border-top: 4px solid var(--color-primary); }

.lo2-col__t {
  margin: 0 0 0.5rem;
  font-weight: 800;
  color: var(--color-ink);
}

.lo2-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; }
.lo2-col li strong { display: block; color: var(--color-ink); }
.lo2-col li span { font-size: 0.8125rem; color: var(--color-muted); }

/* Ladeinfrastruktur */
.lo2-lots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1.25rem;
  padding: 0.9rem;
  border-radius: 12px;
  background: #EEF0F3;
}

.lo2-lot {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 2rem;
  height: 3rem;
  border: 2px solid #fff;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
}

.lo2-lot i {
  width: 0.9rem;
  height: 1.4rem;
  margin-bottom: 0.3rem;
  border-radius: 3px;
  background: var(--color-primary);
}

.lo2-lot-more {
  align-self: center;
  font-weight: 700;
  color: var(--color-muted);
}

.lo2-gap { margin: 1rem 0 0.4rem !important; font-weight: 700; color: var(--color-ink); }

/* ==========================================================================
   Lösungsübersicht: Projektschema
   ========================================================================== */
.lo2-schema {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  grid-template-areas: "controls stage" "controls result";
  gap: 1.5rem 2rem;
  padding: 2rem;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #ECEEF1;
  box-shadow: 0 14px 40px rgba(24, 32, 43, 0.06);
}

.lo2-schema__controls { grid-area: controls; display: grid; gap: 1rem; align-content: start; }
.lo2-schema__stage { grid-area: stage; min-width: 0; }
.lo2-schema__result { grid-area: result; }

.lo2-step {
  margin: 0;
  padding: 1rem;
  border: 1px solid #ECEEF1;
  border-radius: 12px;
}

.lo2-step legend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.3rem;
  font-weight: 700;
  color: var(--color-ink);
}

.lo2-step legend span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.8125rem;
}

.lo2-step .af2-switch { margin-bottom: 0.75rem; }

.lo2-scencards {
  display: grid;
  gap: 0.5rem;
}

.lo2-scencards button {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.75rem 0.9rem;
  border: 2px solid #ECEEF1;
  border-radius: 10px;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.lo2-scencards strong { font-size: 0.9375rem; color: var(--color-ink); }
.lo2-scencards span { font-size: 0.8125rem; line-height: 1.4; color: var(--color-muted); }
.lo2-scencards button[aria-checked="true"] { border-color: var(--color-primary); background: var(--color-primary-light); }
.lo2-scencards button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.lo2-extchecks {
  display: grid;
  gap: 0.35rem;
}

.lo2-extchecks label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9063rem;
  cursor: pointer;
}

.lo2-extchecks input { accent-color: var(--color-primary); }
.lo2-extchecks .fp-icon svg { width: 1.1rem; height: 1.1rem; }

.lo2-roles-more { margin-top: 0; }
.lo2-roles-more .af2-field label { font-size: 0.8125rem; }

.lo2-schema__stage > .af2-switch { margin-bottom: 1rem; }

.lo2-house {
  position: relative;
  margin: 0;
}

.lo2-house img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  transition: opacity 0.3s;
}

.lo2-house[data-layer="roles"] img { opacity: 0.35; }

.lo2-house__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: opacity 0.3s;
}

.lo2-house[data-layer="roles"] .lo2-house__svg { opacity: 0; }

.lo2-p { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.lo2-p.is-pv { stroke: #F2B705; }
.lo2-p.is-grid { stroke: #1A56B6; }
.lo2-p.is-feed { stroke: #F2B705; stroke-dasharray: 6 5; }
.lo2-p.is-store { stroke: #4CAF73; }
.lo2-p.is-ctl { stroke: #5F6873; stroke-width: 2; stroke-dasharray: 2 4; }
.lo2-mk.is-pv, .lo2-mk.is-feed { fill: #F2B705; }
.lo2-mk.is-grid { fill: #1A56B6; }
.lo2-mk.is-store { fill: #4CAF73; }
.lo2-mk.is-ctl { fill: #5F6873; }

.lo2-house__svg.is-anim .lo2-p { animation: lo2-draw 0.6s ease-out; }

@keyframes lo2-draw {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .lo2-house__svg.is-anim .lo2-p { animation: none; }
}

.lo2-spot {
  position: absolute;
  z-index: 3;
  width: 1.4rem;
  height: 1.4rem;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(200, 22, 29, 0.22);
  transform: translate(-50%, -50%);
}

.lo2-spot__tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.5rem);
  display: none;
  width: max-content;
  max-width: 14rem;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  background: #1B2129;
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.35;
  transform: translateX(-50%);
}

.lo2-spot__tip strong { display: block; }
.lo2-spot:hover .lo2-spot__tip,
.lo2-spot:focus-visible .lo2-spot__tip { display: block; }
.lo2-house[data-layer="roles"] .lo2-spot { opacity: 0.3; }

.lo2-extnode {
  position: absolute;
  z-index: 2;
  padding: 0.3rem 0.6rem;
  border: 2px solid var(--color-primary);
  border-radius: 999px;
  background: #fff;
  font-size: 0.75rem;
  line-height: 1.2;
  color: var(--color-ink);
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.lo2-house[data-layer="roles"] .lo2-extnode { opacity: 0.35; }

.lo2-house__roles {
  position: absolute;
  inset: 0;
  display: none;
}

.lo2-house[data-layer="roles"] .lo2-house__roles { display: block; }

.lo2-rolepin {
  position: absolute;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.35rem 0.6rem;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(24, 32, 43, 0.18);
  font-size: 0.75rem;
  line-height: 1.2;
  text-align: center;
  transform: translate(-50%, -50%);
}

.lo2-rolepin { width: 27%; }
.lo2-rolepin em { font-style: normal; color: var(--color-muted); }
.lo2-rolepin strong { padding: 0.1rem 0.45rem; border-radius: 999px; }
.lo2-rolepin.is-mss strong { background: var(--color-primary); color: #fff; }
.lo2-rolepin.is-eigen strong { background: #1B2129; color: #fff; }
.lo2-rolepin.is-partner strong { background: #1A56B6; color: #fff; }
.lo2-rolepin.is-offen strong { background: #FFF4D6; color: #8A5A00; border: 1px dashed #E0A100; }
.lo2-rolepin.is-extern { background: #EEF0F3; }
.lo2-rolepin.is-extern strong { color: #3B434D; }

.lo2-legend-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.9rem;
  margin: 0.8rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-body);
}

.lo2-process {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.lo2-process li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.75rem;
  border-radius: 10px;
  background: var(--color-gray-50);
  font-size: 0.8125rem;
  line-height: 1.35;
}

.lo2-process .af2-steps__num { margin: 0 0 0.2rem; width: 1.5rem; height: 1.5rem; font-size: 0.75rem; }
.lo2-process strong { color: var(--color-ink); }
.lo2-process em { font-style: normal; color: var(--color-primary-dark); font-weight: 600; }
.lo2-process li.is-open em { color: #8A5A00; }

.lo2-schema__result {
  padding: 1.25rem 1.4rem;
  border-radius: 14px;
  background: var(--color-gray-50);
}

.lo2-schema__result .af2-h4 { margin-top: 0; }

.lo2-rolecard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem 1rem;
  margin: 0;
  font-size: 0.9063rem;
}

.lo2-rolecard dt { color: var(--color-body); }
.lo2-rolecard dd { margin: 0; text-align: right; }

.lo2-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 1rem;
}

.lo2-context { margin-top: 0.75rem; font-size: 0.8438rem; }

/* Übersicht: Wege, Gruppen, Bausteine, nächste Schritte */
.lo2-ways {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.lo2-way {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 2rem;
  border-top: 4px solid var(--color-primary);
}

.fp .lo2-way h3 { margin: 0.3rem 0 0; font-size: 1.375rem; }
.lo2-way p { margin: 0 0 0.6rem; color: var(--color-body); }

.lo2-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.lo2-group h3 {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.lo2-group ul {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lo2-group a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.1rem 0.75rem;
  align-items: center;
  padding: 0.85rem 1rem;
  border: 1px solid #ECEEF1;
  border-radius: 10px;
  background: #fff;
  color: inherit;
}

.lo2-group a:hover { border-color: var(--color-primary); }
.lo2-group a strong { color: var(--color-ink); }
.lo2-group a span { grid-column: 1; font-size: 0.8438rem; color: var(--color-muted); }
.lo2-group a svg { grid-column: 2; grid-row: 1 / span 2; width: 1rem; height: 1rem; color: var(--color-primary); }

.lo2-addons {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}

.lo2-addon {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.4rem;
}

.fp .lo2-addon h3 { margin: 0.3rem 0 0; font-size: 1.0625rem; }
.lo2-addon p { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--color-body); }
.lo2-cond { color: var(--color-muted) !important; font-style: italic; }

.lo2-toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.8438rem;
  font-weight: 600;
  cursor: pointer;
}

.lo2-toggle input { accent-color: var(--color-primary); width: 1.1rem; height: 1.1rem; }

.lo2-nextgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.lo2-nextcol { padding: 1.75rem; }
.fp .lo2-nextcol h3 { margin: 0.5rem 0 0.75rem; font-size: 1.1875rem; }
.lo2-nextcol ul { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.lo2-nextcol a:not(.fp-btn) { display: flex; justify-content: space-between; gap: 0.5rem; font-weight: 600; color: var(--color-ink); }
.lo2-nextcol a:not(.fp-btn) svg { width: 1rem; height: 1rem; color: var(--color-primary); }
.lo2-nextcol.is-cta { background: var(--color-primary); color: #fff; }
.lo2-nextcol.is-cta h3, .lo2-nextcol.is-cta p { color: #fff; }
.lo2-nextcol.is-cta .fp-icon { color: #fff; }

/* Responsive Lösungen */
@media (max-width: 1200px) {
  .lo2-addons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .af2-rolestrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lo2-schema { grid-template-columns: minmax(0, 1fr); grid-template-areas: "controls" "stage" "result"; }
  .lo2-schema__controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .af2-takeover,
  .lo2-operator,
  .lo2-chain,
  .lo2-meter__grid,
  .lo2-groups,
  .lo2-nextgrid { grid-template-columns: minmax(0, 1fr); }
  .lo2-concept { grid-template-columns: minmax(0, 1fr); }
  .lo2-lane { grid-template-columns: minmax(0, 1fr); }
  .lo2-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .af2-rolestrip,
  .lo2-ways,
  .lo2-addons,
  .lo2-consumers,
  .lo2-split2,
  .lo2-schema__controls,
  .lo2-chain__steps,
  .lo2-lane ol { grid-template-columns: minmax(0, 1fr); }
  .lo2-chain__steps li::after,
  .lo2-lane li::after { display: none; }
  .lo2-schema { padding: 1rem; }
  .lo2-process { grid-template-columns: minmax(0, 1fr); }
  .lo2-rolepin { font-size: 0.5625rem; padding: 0.2rem 0.35rem; }
  .lo2-extnode { font-size: 0.5625rem; padding: 0.15rem 0.4rem; }
  .lo2-spot { width: 1rem; height: 1rem; }
  .lo2-rolecard { grid-template-columns: minmax(0, 1fr); }
  .lo2-rolecard dd { text-align: left; margin-bottom: 0.3rem; }
}

/* ==========================================================================
   Mieterstrom einfach erklärt (/was-ist-mieterstrom/)
   ========================================================================== */
.af2-hero__more { margin: 0.9rem 0 0; font-size: 0.9375rem; }
.af2-hero__more a { font-weight: 600; color: var(--color-primary); }
.af2-herocard li em { display: block; font-size: 0.8125rem; font-style: normal; font-weight: 400; color: var(--color-muted); }

.af2-cardmore { margin-top: 0.25rem; font-size: 0.875rem; }
.af2-cardmore summary { cursor: pointer; font-weight: 700; color: var(--color-primary); }
.af2-cardmore p { margin: 0.4rem 0 0; color: var(--color-body); }

.af2-merk {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #ECEEF1;
  border-left: 5px solid var(--color-primary);
}

.af2-merk strong { display: block; color: var(--color-ink); }
.af2-merk p { margin: 0.3rem 0 0; color: var(--color-body); }

.af2-after {
  max-width: 56rem;
  margin: 1.75rem auto 0;
  text-align: center;
}

.af2-after p { margin: 0; color: var(--color-body); }

.af2-after__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.75rem;
  margin-top: 0.75rem !important;
}

.af2-sec--note { padding-block: 0 3rem !important; }

.ko-house {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  grid-template-areas: "head fig" "controls fig" "state state" "info info";
  gap: 1.25rem 2.5rem;
  align-items: start;
}

.ko-house__head { grid-area: head; }
.ko-house__fig { grid-area: fig; margin: 0; padding: 1rem; border-radius: 16px; background: linear-gradient(180deg, #EEF4FB, #F8FAFC); transition: background 0.4s; }
.ko-house__controls { grid-area: controls; display: grid; gap: 0.6rem; }
.ko-house__state { grid-area: state; margin: 0; padding: 1rem 1.25rem; border-radius: 12px; background: var(--color-primary-light); font-weight: 600; color: var(--color-ink); }
.ko-house__info { grid-area: info; }

.ko-house[data-time="abend"] .ko-house__fig { background: linear-gradient(180deg, #2B3446, #4A5468); }
.ko-house[data-time="abend"] .ko-house__fig .ko-lbl,
.ko-house[data-time="abend"] .ko-house__fig .ko-sub { fill: #fff; }
.ko-house[data-time="abend"] .ko-flat .ko-lbl,
.ko-house[data-time="abend"] .ko-flat .ko-sub { fill: #1B2129; }

.ko-sky-sun circle { fill: #F2B705; }
.ko-rays path { stroke: #F2B705; stroke-width: 3; stroke-linecap: round; }
.ko-sky-moon path { fill: #E6E9EF; }
.ko-house[data-time="tag"] .ko-sky-moon,
.ko-house[data-time="abend"] .ko-sky-sun { display: none; }

.ko-roof { fill: #59616C; }
.ko-panels rect { fill: #1F3B66; stroke: #6F8FBF; stroke-width: 0.8; }
.ko-wall { fill: #fff; stroke: #CBD1D8; }
.ko-flat rect { fill: #F7F8FA; stroke: #D5D9DF; stroke-width: 1.5; }
.ko-flat--2 rect,
.ko-house[data-teil="ja"] .ko-flat--1 rect { fill: #FDEBEC; stroke: var(--color-primary); }
.ko-house[data-time="abend"] .ko-flat rect { fill: #FFF3D1; }
.ko-ground { fill: #D9E6CF; }
.ko-meter rect { fill: #1B2129; }
.ko-pylon path { fill: none; stroke: #59616C; stroke-width: 3; }
.ko-lbl { font-size: 14px; font-weight: 700; fill: #1B2129; }
.ko-lbl--w { fill: #fff; font-size: 12px; }
.ko-sub { font-size: 12px; fill: #5F6873; }
.ko-contract rect { fill: #fff; stroke: #1B2129; stroke-dasharray: 4 3; }
.ko-contract text { font-size: 11px; font-weight: 700; fill: #1B2129; }

.ko-house[data-teil="ja"] .ko-teil-nein,
.ko-house[data-teil="nein"] .ko-teil-ja { display: none; }

.ko-p { fill: none; stroke-width: 5; stroke-linecap: round; opacity: 0; transition: opacity 0.35s; }
.ko-p--pv1, .ko-p--pv2 { stroke: #F2B705; }
.ko-p--grid1, .ko-p--grid2, .ko-p--trunk { stroke: #1A56B6; }
/* Netzanschluss → Hausanschluss: sichtbar, sobald Strom aus dem Netz kommt */
.ko-house[data-time="abend"] .ko-p--trunk,
.ko-house[data-mehr="nein"] .ko-p--trunk,
.ko-house[data-teil="nein"] .ko-p--trunk { opacity: 1; stroke-width: 5; }
.ko-p--feed { stroke: #C8161D; stroke-dasharray: 9 7; }

/* Tag: Solarstrom zu teilnehmenden Wohnungen */
.ko-house[data-time="tag"] .ko-p--pv2,
.ko-house[data-time="tag"][data-teil="ja"] .ko-p--pv1 { opacity: 1; }
/* Normale Erzeugung: Zusatzstrom sichtbar (dünner) */
.ko-house[data-time="tag"][data-mehr="nein"] .ko-p--grid2,
.ko-house[data-time="tag"][data-mehr="nein"][data-teil="ja"] .ko-p--grid1 { opacity: 0.55; stroke-width: 3; }
/* Nicht teilnehmende Wohnung: Strom über ihren eigenen Lieferanten */
.ko-house[data-teil="nein"] .ko-p--grid1 { opacity: 1; stroke-width: 5; }
/* Überschuss */
.ko-house[data-time="tag"][data-mehr="ja"] .ko-p--feed { opacity: 1; }
/* Abend: alles aus dem Netz */
.ko-house[data-time="abend"] .ko-p--grid1,
.ko-house[data-time="abend"] .ko-p--grid2 { opacity: 1; stroke-width: 5; }

@media (prefers-reduced-motion: reduce) {
  .ko-p, .ko-house__fig { transition: none; }
}

.ko-house__keys {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  color: var(--color-body);
}

.ko-house[data-time="abend"] .ko-house__keys { color: #fff; }
.ko-house__keys i { display: inline-block; width: 1.4rem; height: 4px; margin-right: 0.35rem; border-radius: 2px; vertical-align: 0.2rem; }
i.is-feedred { background: repeating-linear-gradient(90deg, #C8161D 0 6px, transparent 6px 10px); }

.ko-house__controls .af2-switch button:disabled { opacity: 0.4; cursor: not-allowed; }

.ko-terms { margin-top: 0.75rem !important; }

.ko-term { position: relative; display: inline-block; margin-right: 0.35rem; }

.ko-term__btn {
  padding: 0.15rem 0.6rem;
  border: 1px dashed var(--color-primary);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 0.8438rem;
  font-weight: 700;
  color: var(--color-primary);
  cursor: help;
}

.ko-term__pop {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.5rem);
  z-index: 20;
  display: none;
  width: 17rem;
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  background: #1B2129;
  color: #fff;
  font-size: 0.8125rem;
  line-height: 1.45;
  box-shadow: 0 10px 28px rgba(24, 32, 43, 0.3);
}

.ko-term__btn[aria-expanded="true"] + .ko-term__pop { display: block; }

@media (max-width: 960px) {
  .ko-house { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "fig" "controls" "state" "info"; }
}

@media (max-width: 640px) {
  .ko-term__pop { width: 14rem; }
}

.lo2-roletable .af2-pill,
.lo2-rolecard .af2-pill { white-space: normal; }

@media (max-width: 640px) {
  .lo2-roletable th,
  .lo2-roletable td { display: block; width: auto; border-bottom: 0; padding-block: 0.3rem; }
  .lo2-roletable tr { display: block; padding: 0.5rem 0; border-bottom: 1px solid #ECEEF1; }
}

.af2-hero__lead { margin: 0 0 0.6rem; font-family: var(--font-display); font-size: 1.1875rem; font-weight: 700; color: var(--color-ink); }
.ko-house[data-time="abend"] .ko-pylon path { stroke: #C9CED6; }

/* Mobil: Rollenmarken als lesbares Raster unter dem Haus statt übereinander */
@media (max-width: 640px) {
  .lo2-house[data-layer="roles"] .lo2-house__roles {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    margin-top: 0.6rem;
  }
  .lo2-house[data-layer="roles"] .lo2-rolepin {
    position: static;
    width: auto;
    transform: none;
    font-size: 0.6875rem;
    box-shadow: none;
    border: 1px solid #ECEEF1;
  }
}

/* ==========================================================================
   Über uns, Partner, Rechtliches
   ========================================================================== */
.af2-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.9rem;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.af2-crumbs li:not(:last-child)::after { content: "/"; margin-left: 0.35rem; color: #B9BEC6; }
.af2-crumbs a { color: var(--color-muted); }
.af2-crumbs a:hover { color: var(--color-primary); }

.af2-prose {
  max-width: 50rem;
  margin: 0 auto;
}

.af2-prose p {
  margin: 0 0 1rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-body);
}

.af2-sec--text .af2-after { margin-top: 0.5rem; text-align: left; max-width: 50rem; }
.af2-sec--text .af2-after__links { justify-content: flex-start; }

/* Ablauf */
.uu-process {
  position: relative;
  display: grid;
  gap: 1rem;
  max-width: 52rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.uu-process::before {
  content: "";
  position: absolute;
  left: 0.95rem;
  top: 1rem;
  bottom: 1rem;
  width: 2px;
  background: var(--color-primary-light);
}

.uu-process li {
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 1rem;
}

.uu-process .af2-steps__num { position: relative; z-index: 1; margin: 0.9rem 0 0; }

.uu-process__body {
  padding: 1.25rem 1.5rem;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #ECEEF1;
}

.fp .uu-process h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.4rem;
  font-size: 1.125rem;
}

.uu-process p { margin: 0 0 0.5rem; color: var(--color-body); }
.uu-process .af2-cardmore { margin-top: 0.35rem; }

/* Rollenmodelle */
.uu-roles__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.uu-roles__panel {
  padding: 1.5rem;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #ECEEF1;
}

.uu-roles__list {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.uu-roles__list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  background: var(--color-gray-50);
}

/* Rechtsseiten */
.uu-legal__title {
  margin: 0.25rem 0 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
  font-weight: 800;
  color: var(--color-ink);
}

.uu-legal__lead { margin: 0 0 1.5rem; color: var(--color-muted); }

.uu-legal__grid {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  margin-top: 1.5rem;
}

.uu-legal__toc {
  position: sticky;
  top: calc(var(--header-height) + 1.5rem);
  padding: 1.25rem;
  border-radius: 12px;
  background: var(--color-gray-50);
  font-size: 0.875rem;
}

.uu-legal__toc p { margin: 0 0 0.6rem; font-weight: 700; color: var(--color-ink); }
.uu-legal__toc ol { display: grid; gap: 0.45rem; margin: 0; padding-left: 1.1rem; }
.uu-legal__toc a { color: var(--color-body); }
.uu-legal__toc a:hover { color: var(--color-primary); }

.uu-legal__body { display: grid; gap: 1rem; }

.uu-legal__sec {
  padding: 1.4rem 1.6rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #ECEEF1;
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

.fp .uu-legal__sec h2 { margin: 0 0 0.6rem; font-size: 1.125rem; }
.uu-legal__sec p { margin: 0 0 0.6rem; line-height: 1.65; color: var(--color-body); }

.uu-checks {
  margin: 1rem 0;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  background: #FFF7E6;
  border: 1px dashed #E0A100;
  font-size: 0.875rem;
}

.uu-checks ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }

/* Partnerformular */
.uu-form-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  gap: 2rem;
  align-items: start;
}

.uu-form {
  padding: 2rem;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #ECEEF1;
}

.uu-formgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
}

.uu-formgrid p { margin: 0; }
.uu-span2 { grid-column: 1 / -1; }

.uu-formgrid label,
.uu-radios legend {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-ink);
}

.uu-formgrid input[type="text"],
.uu-formgrid input[type="email"],
.uu-formgrid input[type="tel"],
.uu-formgrid select,
.uu-formgrid textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid #D5D9DF;
  border-radius: 8px;
  font: inherit;
  background: #fff;
}

.uu-radios { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.uu-radios legend { width: 100%; }
.uu-radios label { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-weight: 500; }
.uu-check label { display: flex; gap: 0.5rem; font-weight: 400; }
.uu-check input, .uu-radios input { accent-color: var(--color-primary); }
.uu-hp { position: absolute; left: -9999px; }

.uu-msg { margin-bottom: 1.25rem; padding: 1rem 1.25rem; border-radius: 10px; font-weight: 600; }
.uu-msg.is-ok { background: #E8F5EC; color: #1E6B36; }
.uu-msg.is-err { background: var(--color-primary-light); color: var(--color-primary-dark); }

.uu-form-aside {
  padding: 1.5rem;
  border-radius: 14px;
  background: var(--color-gray-50);
}

@media (max-width: 960px) {
  .uu-legal__grid,
  .uu-form-wrap { grid-template-columns: minmax(0, 1fr); }
  .uu-legal__toc { position: static; }
}

@media (max-width: 640px) {
  .uu-formgrid { grid-template-columns: minmax(0, 1fr); }
  .uu-form { padding: 1.25rem; }
  .uu-roles__list li { flex-direction: column; align-items: flex-start; }
}