/* =====================================================================
   2026-11-12 | Claude | Contao R1 – Aufbau analog WordPress R3–R5
   Abstände nach claude/gestaltung-inhaltsseiten.md (H2 → Inhalt 32/24,
   H2 → Einleitung 14, Einleitung → Inhalt 44/32). Kacheln wie WordPress
   (Kandidat für einen gemeinsamen Baustein).
   ===================================================================== */
.vt-contao-angebot > .vt-band { padding-block: clamp(28px, 3vw, 48px); }
.vt-contao-angebot > .vt-band--hell + .vt-band--hell { padding-block-start: clamp(12px, 1.5vw, 24px); }

.vt-contao-angebot .vt-band__title { margin-top: 0; margin-bottom: 32px; }
.vt-contao-angebot__copy { max-width: 860px; }
.vt-contao-angebot .vt-band :where(p) { margin: 0 0 18px; color: #34445e; font-size: 17px; line-height: 1.65; }
.vt-contao-angebot .vt-band :where(p:last-child) { margin-bottom: 0; }
.vt-contao-angebot .vt-band h3 {
    margin: 0 0 12px;
    color: #0b1730;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
}

/* Blaues Band */
.vt-contao-angebot .vt-band--blau :where(p) { color: rgba(255, 255, 255, .94); }

/* Bilder */
.vt-contao-angebot__bild { display: block; width: 100%; height: auto; border-radius: 14px; }

/* Praxisbeispiele: volle Textbreite, untereinander */
.vt-contao-angebot__beispiel { max-width: 860px; }
.vt-contao-angebot__beispiel + .vt-contao-angebot__beispiel { margin-top: 48px; }
.vt-contao-angebot__beispiel .vt-contao-angebot__copy { margin-bottom: 18px; }
.vt-contao-angebot__bild--hinweis { margin-top: 12px; border-radius: 10px; }
.vt-contao-angebot__paar {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
    gap: 16px;
}

/* Ihr Design im Editor: Text und Bild je halb */
.vt-contao-angebot__zwei {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 32px;
}
.vt-contao-angebot__zwei .vt-contao-angebot__bild { border: 1px solid #d6dde7; }

/* Dunkle Bänder */
.vt-contao-angebot .vt-band--dunkel :where(.vt-contao-angebot__einleitung) { max-width: 860px; color: #d5deeb; }
.vt-contao-angebot .vt-band__title:has(+ .vt-contao-angebot__einleitung + .vt-contao-angebot__kacheln) { margin-bottom: 14px; }
.vt-contao-angebot .vt-contao-angebot__einleitung:has(+ .vt-contao-angebot__kacheln) { margin-bottom: 0; }
.vt-contao-angebot .vt-band--dunkel .vt-textlink { color: #fff; }
.vt-contao-angebot .vt-contao-angebot__einleitung--nach { margin-top: 44px; }

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

/* Demos: kleiner, gleiche Höhe, oberer Ausschnitt */
.vt-contao-angebot__demos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    max-width: 860px;
    margin-top: 32px;
}
.vt-contao-angebot__demos .vt-contao-angebot__bild {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: top;
    margin-bottom: 12px;
    background: #f6f7f8;
}
.vt-contao-angebot__links { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 24px; }
.vt-contao-angebot .vt-contao-angebot__projekt { margin-top: 24px; }

/* Tabelle */
.vt-contao-angebot__table { overflow-x: auto; margin-top: 24px; }
.vt-contao-angebot__table table { width: 100%; max-width: 760px; border-collapse: collapse; margin: 0; }
.vt-contao-angebot__table :is(th, td) { padding: 10px 12px; border: 1px solid #d6e0eb; text-align: left; }
.vt-contao-angebot__table thead { background: #ecf2f8; }

@media (max-width: 960px) {
    .vt-contao-angebot__kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .vt-contao-angebot .vt-band__title { margin-bottom: 24px; }
    .vt-contao-angebot .vt-band__title:has(+ .vt-contao-angebot__einleitung + .vt-contao-angebot__kacheln) { margin-bottom: 14px; }
    .vt-contao-angebot__kacheln,
    .vt-contao-angebot .vt-contao-angebot__einleitung--nach { margin-top: 32px; }
    .vt-contao-angebot__paar,
    .vt-contao-angebot__zwei,
    .vt-contao-angebot__demos,
    .vt-contao-angebot__kacheln { grid-template-columns: minmax(0, 1fr); }
}

/* R2 – Zickzack: Impftermine und Demos rechts auf der Bühne */
.vt-contao-angebot .vt-contao-angebot__beispiel--rechts,
.vt-contao-angebot .vt-contao-angebot__rechts{margin-left:auto;max-width:860px}
@media (max-width:767px){
  .vt-contao-angebot .vt-contao-angebot__beispiel--rechts,
  .vt-contao-angebot .vt-contao-angebot__rechts{margin-left:0;max-width:none}
}
/* R2c – externe Links (neuer Tab): schräger Pfeil statt Chevron.
   .vt-textlink ist inline-flex mit gap 6px; die Unterstreichung beim
   Hover liegt nur auf dem Linktext (span), nicht auf dem Pfeil. */
.vt-contao-angebot a[target="_blank"]::after{content:"\2197"}
.vt-contao-angebot a.vt-textlink[target="_blank"]:hover{text-decoration:none}
.vt-contao-angebot a.vt-textlink[target="_blank"]:hover .vt-textlink__text{text-decoration:underline;text-underline-offset:3px}
/* R4 2026-11-13 – Demo-Bereich: mehr Abstand zwischen den Demo-Links und der
   zweiten Linkzeile (Contao im Detail · Contao-Upgrade · Angebot für Arztpraxen). */
.vt-contao-angebot .vt-contao-angebot__links--demo{margin-top:40px}
@media (max-width:767px){.vt-contao-angebot .vt-contao-angebot__links--demo{margin-top:32px}}