/* ---------- Anschluss-Schema (Mobile Heizzentrale) ---------------------- *
 * Vektor-Nachbau der Quellgrafik „Mobile Heizung anschließen: Überblick":
 * Aufbau und Positionen wie im Original, aber gestochen scharf und mit den
 * Schriften der Website. Vor- und Rücklauf tragen in der ganzen Zeichnung
 * dieselben Farben (Rot/Blau): die Leitungen vom Heizanhänger zu Punkt 6
 * genauso wie die Heizkreise, die von Punkt 6 weggehen. Leitungen laufen als
 * Schläuche mit Kante, Glanz und hellem Saum über Wand und Tür und enden in
 * Muffen; Bauteile tragen Verläufe, Kanten und Details (Türfüllung, Lüftung,
 * Felgen), Nummernkreise einen grünen Verlauf mit weißem Ring.
 * Auf schmalen Displays wird die Zeichnung oben beschnitten und die
 * Punkteliste darunter als HTML gezeigt. Alle Regeln gelten nur für diese
 * Abbildung.
 * ------------------------------------------------------------------------ */
.anschluss-schema {
  --schema-panel: #f3f3f3;
  --schema-wall-edge: #b4b4b4;
  --schema-door-edge: #c4c4c4;
  --schema-nut: #6f747b;
  --schema-halo: #fff;
  --schema-badge-light: #7cb15b;
  --schema-badge-dark: #588a3e;
  --schema-badge-ring: #fff;
  --schema-flow: #b00909;
  --schema-return: #4871b6;
  --schema-power: #edc01e;
  --schema-water: #77aa57;
}

.anschluss-schema__frame {
  border: 1px solid var(--color-ink-200);
  border-radius: var(--radius-card);
  background: #fff;
  padding: clamp(1rem, 0.8rem + 1vw, 1.75rem);
  box-shadow: var(--shadow-soft);
}

.anschluss-schema__title {
  margin: 0 0 clamp(0.8rem, 0.6rem + 0.6vw, 1.1rem);
  font-family: var(--font-display);
  font-size: var(--text-fluid-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-ink-900);
  text-wrap: balance;
}

.anschluss-schema__svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  background: var(--schema-panel);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.05);
}

/* Bauteile: Verläufe tragen die Bauteile als Attribut im SVG (je Instanz
   eindeutige IDs); hier nur Konturen, Kanten und Details. */
.anschluss-schema__wall {
  fill: none;
  stroke: var(--schema-wall-edge);
  stroke-width: 16;
  stroke-linejoin: miter;
}

.anschluss-schema__wall-fill {
  fill: none;
  stroke-width: 13;
  stroke-linejoin: miter;
}

.anschluss-schema__door {
  stroke: var(--schema-door-edge);
  stroke-width: 1.5;
}

.anschluss-schema__body,
.anschluss-schema__stack,
.anschluss-schema__collar {
  stroke: rgb(0 0 0 / 0.1);
  stroke-width: 1;
}

/* Vertiefte Füllung von Tür und Schranktür: dunkle Kante, helle Lichtkante */
.anschluss-schema__inset {
  fill: none;
  stroke: rgb(0 0 0 / 0.08);
  stroke-width: 1.5;
  filter: drop-shadow(1px 1px 0 rgb(255 255 255 / 0.85));
}

.anschluss-schema__highlight {
  fill: none;
  stroke: rgb(255 255 255 / 0.75);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.anschluss-schema__seam {
  fill: none;
  stroke: rgb(0 0 0 / 0.12);
  stroke-width: 1.5;
}

.anschluss-schema__seam-light {
  fill: none;
  stroke: rgb(255 255 255 / 0.6);
  stroke-width: 1;
}

.anschluss-schema__vent {
  fill: none;
  stroke: rgb(0 0 0 / 0.17);
  stroke-width: 2.5;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 0 rgb(255 255 255 / 0.7));
}

.anschluss-schema__chassis {
  fill: rgb(0 0 0 / 0.09);
}

.anschluss-schema__rim-ring {
  stroke: rgb(0 0 0 / 0.2);
  stroke-width: 1;
}

.anschluss-schema__nut {
  fill: var(--schema-nut);
}

/* Leitungen: heller Saum, dunkle Kante, farbige Leitung, Glanz auf der
   Lichtseite (um 1 nach oben/links versetzt) */
.anschluss-schema__halo {
  fill: none;
  stroke: var(--schema-halo);
  stroke-width: 11;
  stroke-linecap: butt;
  stroke-linejoin: round;
  opacity: 0.92;
}

.anschluss-schema__rim,
.anschluss-schema__pipe,
.anschluss-schema__sheen {
  fill: none;
  stroke-linecap: butt;
  stroke-linejoin: round;
}

.anschluss-schema__rim {
  stroke: rgb(0 0 0 / 0.22);
  stroke-width: 7;
}

.anschluss-schema__pipe {
  stroke-width: 5.5;
}

.anschluss-schema__sheen {
  stroke: rgb(255 255 255 / 0.38);
  stroke-width: 1.5;
  transform: translate(-1px, -1px);
}

.anschluss-schema__pipe--flow {
  stroke: var(--schema-flow);
}

.anschluss-schema__pipe--return {
  stroke: var(--schema-return);
}

.anschluss-schema__pipe--power {
  stroke: var(--schema-power);
}

.anschluss-schema__pipe--water {
  stroke: var(--schema-water);
}

/* Nummernkreise in der Zeichnung: grüner Verlauf mit weißem Ring */
.anschluss-schema__badge circle,
.anschluss-schema__list circle {
  stroke: var(--schema-badge-ring);
  stroke-width: 5;
  paint-order: stroke fill;
}

.anschluss-schema__badge text,
.anschluss-schema__list-num {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  fill: #fff;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

/* Die sechs Punkte oben rechts in der Zeichnung */
.anschluss-schema__list-text {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  fill: var(--color-ink-900);
  dominant-baseline: central;
}

/* Punkteliste als HTML: unter der Zeichnung auf schmalen Displays, sonst nur
   für Vorlesehilfen (die Zeichnung ist als Bild ausgezeichnet). */
.anschluss-schema__steps {
  list-style: none;
  margin: clamp(0.9rem, 0.7rem + 0.6vw, 1.25rem) 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  font-size: var(--text-fluid-sm);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-ink-900);
}

.anschluss-schema__steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
}

.anschluss-schema__num {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  margin-top: 0.05rem;
  border-radius: 50%;
  background: linear-gradient(var(--schema-badge-light), var(--schema-badge-dark));
  box-shadow: 0 0 0 2px var(--schema-badge-ring), 0 2px 4px rgb(0 0 0 / 0.15);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
}

@media (max-width: 767px) {
  /* Zeichnung oben beschneiden: der Platz der Punkteliste entfällt */
  .anschluss-schema__svg {
    aspect-ratio: 1024 / 360;
  }

  .anschluss-schema__list {
    display: none;
  }

  .anschluss-schema__badge {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(1.9);
  }
}

@media (min-width: 768px) {
  .anschluss-schema__steps {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}