/* Artikelbausteine — kundenneutral.
   Die Bausteine sind nach ihrer Funktion benannt, nicht nach der Branche des
   ersten Kunden: eine Stationenliste trägt eine Kreuzfahrtroute genauso wie
   Behandlungsschritte, Projektphasen oder Produktvarianten. */

.artikel { margin: 0; padding: 0; }

.artikel-aufmacher { width: 100%; overflow: hidden; line-height: 0; }
.artikel-aufmacher img {
  width: 100%; height: var(--aufmacher-hoehe);
  object-fit: cover; object-position: center 30%; display: block;
}

/* Die Lesespalte selbst misst --textbreite; der Rand kommt zusätzlich dazu,
   damit auf dem Telefon nichts an der Kante klebt und am Schreibtisch die
   Zeilenlänge trotzdem stimmt. */
.artikel-text {
  max-width: calc(var(--textbreite) + 2 * var(--rand));
  margin: 0 auto; padding: clamp(32px, 5vw, 56px) var(--rand) 80px;
}

/* Die Wortmarke folgt der Lesespalte, nicht der breiteren Präsentationsschiene.
   Sonst steht sie links daneben — und mit offener Erklärschicht noch enger,
   weil der Körper rechts schrumpft und die 1120er-Spalte nicht mehr passt. */
body:has(.artikel-text) .seite-kopf {
  padding-left: max(var(--rand), calc((100% - var(--textbreite)) / 2));
  padding-right: max(var(--rand), calc((100% - var(--textbreite)) / 2));
}

.artikel-rubrik {
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--akzent-schrift); display: block; margin-bottom: 16px; font-weight: 700;
}

.artikel-text h1 { margin: 0 0 28px; font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.35rem); line-height: 1.15; letter-spacing: -0.015em; font-weight: 700; color: var(--text); }
.artikel-text h2 { margin: 44px 0 16px; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.55rem); line-height: 1.25; font-weight: 700; color: var(--text); scroll-margin-top: calc(var(--kopf-hoehe) + 16px); }
.artikel-text h3 { margin: 24px 0 12px; font-size: 1.1rem; font-weight: 700; color: var(--text); }
.artikel-text p  { margin: 0 0 20px; line-height: 1.75; color: var(--text-weich); }

.artikel-text .artikel-lead {
  font-size: clamp(1.02rem, 0.97rem + 0.35vw, 1.18rem); margin: 0 0 40px; padding-bottom: 36px;
  border-bottom: 1px solid var(--linie); line-height: 1.75; color: var(--text-weich);
}

/* ── Stationenliste: aufklappbare Schritte mit Bild und Text ──────────── */
.artikel-text .etappen { border-top: 1px solid var(--linie); margin: 32px 0; padding: 0; list-style: none; }
.artikel-text .etappen > li { border-bottom: 1px solid var(--linie); }
.artikel-text .etappen .etappen-marke {
  min-width: 52px; font-weight: 700; color: var(--text-leise); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.08em; padding-top: 4px; flex-shrink: 0;
}
.etappen .etappen-klapp { display: block; }
.etappen .etappen-kopf {
  display: flex; gap: 20px; padding: 16px 40px 16px 0;
  font-size: 0.93rem; line-height: 1.6; color: var(--text-weich);
  cursor: pointer; list-style: none; position: relative;
}
.etappen .etappen-kopf::-webkit-details-marker { display: none; }

/* Das Klappzeichen ist eine Maske, keine eingefärbte Grafik — dadurch nimmt es
   die Markenfarbe an, statt einen fremden Blauton mitzuschleppen. */
.etappen .etappen-kopf::after {
  content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; background-color: var(--primaer-schrift);
  -webkit-mask: var(--zeichen-auf) center/22px no-repeat;
          mask: var(--zeichen-auf) center/22px no-repeat;
}
.etappen details[open] > .etappen-kopf::after {
  -webkit-mask: var(--zeichen-zu) center/22px no-repeat;
          mask: var(--zeichen-zu) center/22px no-repeat;
}
:root {
  --zeichen-auf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='8 10 12 14 16 10'/%3E%3C/svg%3E");
  --zeichen-zu:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='8 14 12 10 16 14'/%3E%3C/svg%3E");
}

.etappe-tafel { padding: 0 0 20px 72px; }
.artikel-text .etappen h3, .etappe-text h3 { scroll-margin-top: calc(var(--kopf-hoehe) + 16px); }
.etappe-tafel-innen {
  display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 0;
  background: var(--flaeche-leise); overflow: hidden; border-radius: 2px;
}
.etappe-bild { width: 100%; height: 165px; object-fit: cover; display: block; }
.etappe-text { padding: 18px 20px; }
.etappe-text p { margin: 0; font-size: 0.88rem; line-height: 1.75; color: var(--text-leise); }

/* ── Handlungsaufforderungen ─────────────────────────────────────────── */
.artikel-text .cta-zeile {
  margin: 32px 0; padding: 20px 28px;
  background: color-mix(in srgb, var(--akzent-schrift) 7%, var(--flaeche)); border-left: 4px solid var(--akzent-schrift);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.artikel-text .cta-zeile p { margin: 0; font-size: 0.9rem; color: var(--text-weich); flex: 1; }
.artikel-text .cta-zeile a {
  display: inline-block; padding: 10px 24px; font-size: 0.85rem; font-weight: 700;
  text-decoration: none; color: var(--auf-akzent); background: var(--marke-akzent-flaeche);
  text-align: center;
}
.artikel-text .cta-zeile a:hover { background: var(--marke-akzent-dunkel); }

.artikel-text .cta-block {
  margin-top: 56px; padding: 36px 40px;
  background: color-mix(in srgb, var(--primaer-schrift) 6%, var(--flaeche)); text-align: center; border-radius: 2px;
}
.artikel-text .cta-block p { margin: 0 0 20px; font-size: 1rem; color: var(--text-weich); }
/* Nur der direkte Knopf ist die Fläche. Ein Link im Fließtext darüber
   bleibt ein Textlink — sonst liegen zwei Limetten-Knöpfe im selben Block. */
.artikel-text .cta-block > a {
  display: inline-block; padding: 16px 36px; font-size: 0.9rem; font-weight: 700;
  text-decoration: none; color: var(--auf-akzent); background: var(--marke-akzent-flaeche);
  border-radius: 3px; letter-spacing: 0.02em;
}
.artikel-text .cta-block > a:hover { background: var(--marke-akzent-dunkel); }
.artikel-text .cta-block p a {
  color: var(--akzent-schrift); font-weight: 700; text-decoration: underline;
  text-underline-offset: 2px; background: none; padding: 0; border-radius: 0;
}

/* ── Hinweiskasten ───────────────────────────────────────────────────── */
.artikel-text .info-kasten {
  border-left: 3px solid var(--akzent-schrift); padding: 16px 20px; margin: 28px 0;
  background: color-mix(in srgb, var(--primaer-schrift) 6%, var(--flaeche)); font-size: 0.93rem; line-height: 1.7;
  border-radius: 0 2px 2px 0;
}

/* ── Merkmalsliste ───────────────────────────────────────────────────── */
.merkmale { list-style: none; padding: 0; margin: 0 0 32px; }
.merkmale li { padding: 16px 0; border-bottom: 1px solid var(--linie); line-height: 1.65; }
.merkmale li:last-child { border-bottom: none; }

/* ── Leistungsvergleich: enthalten gegen Aufpreis ────────────────────── */
.leistungen { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin: 24px 0 40px; }
/* Ohne enthalten/zusatz (Peer-Vergleich) trotzdem eine lesbare Fläche. */
.leistungen-block {
  padding: 24px;
  background: var(--flaeche-leise);
  border-top: 3px solid var(--linie);
}
.leistungen-enthalten { background: color-mix(in srgb, var(--akzent-schrift) 7%, var(--flaeche)); border-top: 3px solid var(--akzent-schrift); }
.leistungen-zusatz { background: var(--flaeche-leise); border-top: 3px solid var(--linie); }
.leistungen-block h3 {
  margin: 0 0 16px; font-size: 0.95rem; text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 700;
}
.leistungen-enthalten h3 { color: var(--akzent-schrift); }
.leistungen-zusatz h3 { color: var(--text-leise); }
.leistungen-block ul { margin: 0; padding: 0 0 0 18px; }
.leistungen-block li { font-size: 0.9rem; line-height: 1.7; color: var(--text-weich); }

/* ── Fragen und Antworten ────────────────────────────────────────────── */
.fragen { margin: 8px 0 40px; }
.frage { border-bottom: 1px solid var(--linie); }
.frage summary {
  cursor: pointer; font-weight: 700; padding: 18px 32px 18px 0;
  font-size: 0.95rem; list-style: none; position: relative; line-height: 1.5;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: "+"; position: absolute; right: 0; top: 18px;
  font-size: 1.2rem; color: var(--akzent-schrift); font-weight: 400;
}
.frage[open] > summary::after { content: "−"; }
.frage p { margin: 0 0 20px; font-size: 0.92rem; line-height: 1.75; color: var(--text-leise); padding-right: 32px; }

@media (max-width: 640px) {
  /* Auf schmalen Fenstern wird aus der Zeile ein Block: Text oben, Knopf
     darunter über die volle Breite. Nebeneinander blieben für den Knopf
     wenige Zeichen, und die Aufforderung wäre unlesbar. */
  .artikel-text .cta-zeile { padding: 18px 20px; flex-direction: column; align-items: stretch; }
  .artikel-text .cta-zeile a { width: 100%; }
  .artikel-text .cta-block { padding: 28px 20px; }
  .artikel-text .cta-block > a { display: block; padding: 16px 20px; }
  .etappe-tafel { padding-left: 0; }
  .etappen .etappen-kopf { gap: 12px; padding-right: 34px; }
  .etappe-tafel-innen { grid-template-columns: 1fr; }
  .etappe-bild { height: 180px; }
}

/* Klärfeld — eine Stelle, die der Kunde noch beisteuern muss.
   Im Quellstand standen solche Lücken als roher Klammertext im Fließtext und
   sahen wie ein Redaktionsfehler aus; ausgezeichnet sind sie eine sichtbare,
   gezählte Rückfrage. */
.klaerfeld {
  border: 1px dashed color-mix(in srgb, var(--akzent-schrift) 60%, transparent);
  border-radius: 4px;
  padding: 0.05em 0.45em;
  background: color-mix(in srgb, var(--akzent-schrift) 7%, var(--flaeche));
  color: var(--text-weich);
  font-style: italic;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.klaerfeld::before { content: "?"; font-weight: 700; margin-right: 0.35em; font-style: normal; color: var(--akzent-schrift); }

/* Tafel ohne Bild: eine Spalte statt Bild plus Text. Im Quellstand war das ein
   style-Attribut am Element. */
.etappe-tafel-innen[data-spalten="eins"] { grid-template-columns: 1fr; }