/* =====================================================================
   2026-11-12 | Claude | WordPress R3 – neuer Aufbau (Text freigegeben)
   Bänder: vt-band hell/dunkel. Seitenlokal nur Sonderelemente
   (Kacheln, Schritte, Vergleichsbild, Einstieg 2/3 : 1/3).
   ===================================================================== */
.vt-wordpress > .vt-band { padding-block: clamp(28px, 3vw, 48px); }
.vt-wordpress > .vt-band--hell + .vt-band--hell { padding-block-start: clamp(12px, 1.5vw, 24px); }

.vt-wordpress__copy { max-width: 860px; } /* R4: wie Rechtsseiten */
.vt-wordpress .vt-wordpress__copy :where(p),
.vt-wordpress :where(.vt-wordpress__einleitung, .vt-wordpress__nachsatz) {
    margin: 0 0 18px;
    font-size: 17px;
    line-height: 1.65;
}
.vt-wordpress .vt-wordpress__copy :where(p:last-child) { margin-bottom: 0; }
.vt-wordpress__copy a { color: #1d5fae; }

/* Vorher/Nachher: so breit wie die Textspalte */
.vt-wordpress__vergleich { max-width: 860px; margin: 24px 0 0; }
.vt-wordpress__vergleich-bild { overflow: hidden; border-radius: 14px; }
.vt-wordpress__vergleich img,
.vt-wordpress__collage img { display: block; width: 100%; height: auto; }
.vt-wordpress__vergleich figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: #5b6b80; }

/* Dunkle Bänder: Text */
.vt-wordpress .vt-band--dunkel :where(.vt-wordpress__einleitung) { max-width: 860px; color: #d5deeb; }
.vt-wordpress .vt-wordpress__einleitung--nach { margin: 28px 0 0; }
.vt-wordpress .vt-band--dunkel .vt-textlink { color: #fff; }

/* Kacheln */
.vt-wordpress__kacheln {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}
.vt-wordpress__kachel {
    margin: 0;
    padding: 20px 22px;
    border: 1px solid rgba(94, 169, 255, .24);
    border-radius: 20px;
    background: rgba(255, 255, 255, .04);
}
.vt-wordpress .vt-wordpress__kachel h3 { margin: 0 0 6px; color: #fff; font-size: 18px; line-height: 1.3; text-transform: none; }
.vt-wordpress .vt-wordpress__kachel p { margin: 0; color: #d5deeb; font-size: 16px; line-height: 1.55; }

/* Auswahl: Text 2/3, Bild 1/3 */
.vt-wordpress__einstieg {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start; /* R4: H2 in der Textspalte, oben bündig */
    gap: 32px;
}
.vt-wordpress__collage { overflow: hidden; border-radius: 14px; }

/* Praxis: drei Schritte */
.vt-wordpress__schritte {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.vt-wordpress__schritt { margin: 0; }
.vt-wordpress__schritt img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 14px;
    border: 1px solid #d6dde7;
    border-radius: 14px;
}
.vt-wordpress .vt-wordpress__schritt p { margin: 0; font-size: 16px; line-height: 1.55; }
.vt-wordpress .vt-wordpress__schritt .vt-wordpress__schritt-titel {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    color: #12233e;
    font-weight: 700;
}
.vt-wordpress__schritt-titel span {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #1d5fae;
    color: #fff;
    font-size: 14px;
}
.vt-wordpress .vt-wordpress__nachsatz { margin: 24px 0 0; }

/* Abschluss */
.vt-wordpress__links { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 18px 0 0; }
.vt-wordpress .vt-wordpress__projekt { margin: 24px 0 0; }

@media (max-width: 960px) {
    .vt-wordpress__kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .vt-wordpress__einstieg,
    .vt-wordpress__schritte,
    .vt-wordpress__kacheln { grid-template-columns: minmax(0, 1fr); }
    .vt-wordpress__einstieg { gap: 20px; }
}

/* R4: Block 1 im blauen Band */
.vt-wordpress .vt-band--blau .vt-band__dachzeile { color: rgba(255, 255, 255, .85); }
.vt-wordpress .vt-band--blau .vt-wordpress__copy :where(p) { color: rgba(255, 255, 255, .94); }
.vt-wordpress .vt-wordpress__einstieg .vt-band__title { margin-top: 0; }

/* R5 2026-11-12: Abstände nach Leitfaden (claude/gestaltung-inhaltsseiten.md)
   Band-Überschrift → Inhalt 32/24, Überschrift → Einleitung 14, Einleitung → Inhalt 44/32 */
.vt-wordpress .vt-band__title { margin-top: 0; margin-bottom: 32px; }
.vt-wordpress .vt-band__title:has(+ .vt-wordpress__einleitung + .vt-wordpress__kacheln) { margin-bottom: 14px; }
.vt-wordpress .vt-wordpress__einleitung:has(+ .vt-wordpress__kacheln) { margin-bottom: 0; }
.vt-wordpress .vt-wordpress__kacheln { margin-top: 44px; }
.vt-wordpress .vt-wordpress__einleitung--nach { margin-top: 44px; }
@media (max-width: 767px) {
    .vt-wordpress .vt-band__title { margin-bottom: 24px; }
    .vt-wordpress .vt-band__title:has(+ .vt-wordpress__einleitung + .vt-wordpress__kacheln) { margin-bottom: 14px; }
    .vt-wordpress .vt-wordpress__kacheln,
    .vt-wordpress .vt-wordpress__einleitung--nach { margin-top: 32px; }
}