.beispiel-inhalt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 22px 0 0; }
.beispiel-inhalt-titel { flex: 0 0 100%; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-70); }
.beispiel-inhalt .chip { text-decoration: none; }

.erg-erklaerung { margin: 6px 0 14px; padding: 9px 14px; max-width: 72ch; font-size: 14px; line-height: 1.55; color: var(--ink-70);
  background: var(--paper-2); border-left: 3px solid var(--effekt-aktuell, var(--violet)); }
.beispiel-haupt .erg-erklaerung, .beispiel-haupt #eingabe, .beispiel-haupt #weitere { scroll-margin-top: calc(var(--kopf-h, 58px) + 18px); }

.beispiel-brief { margin: 12px 0 0; padding: 16px 20px; max-width: 72ch; font-size: 16.5px; line-height: 1.6; color: var(--ink);
  border: 1.5px solid var(--ink); background: var(--paper-2); box-shadow: 6px 6px 0 var(--effekt-aktuell, var(--violet)); }

.beispiel-haupt .btn:disabled, .beispiel-haupt input:disabled { cursor: not-allowed; }
.beispiel-haupt .btn:disabled { opacity: .55; }
.beispiel-haupt .opt:has(input:disabled) { opacity: .8; }

.beispiel-art { margin: 18px 0 0; border: 1.5px solid var(--ink); background: var(--paper-2); box-shadow: 6px 6px 0 var(--effekt-aktuell, var(--violet)); }
.beispiel-art > summary { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 14px 18px; cursor: pointer; list-style: none;
  font-size: 19px; font-weight: 900; letter-spacing: -.02em; color: var(--ink); }
.beispiel-art > summary::-webkit-details-marker { display: none; }
.beispiel-art > summary::after { content: "+"; margin-left: auto; font-family: var(--font-mono); font-size: 22px; color: var(--effekt-text, var(--violet-text)); }
.beispiel-art[open] > summary::after { content: "−"; }
.beispiel-art[open] > summary { border-bottom: 1px solid var(--rule); }
.beispiel-art > :not(summary) { margin-left: 18px; margin-right: 18px; }
.beispiel-art > .result { margin-bottom: 18px; }
.beispiel-art > .beispiel-brief { margin-bottom: 18px; box-shadow: none; }

.beispiel-cta { margin-top: 48px; padding: 28px 28px 30px; border: 1.5px solid var(--ink); background: var(--paper-2);
  box-shadow: 8px 8px 0 var(--effekt-aktuell, var(--violet)); }
.beispiel-cta h2 { margin: 0 0 10px; font-size: clamp(26px, 3.6vw, 37px); font-weight: 900; letter-spacing: -.035em; }
.beispiel-cta .next-actions { margin-top: 18px; }

@media (max-width: 599px) {
  .beispiel-art > summary { font-size: 17px; padding: 12px 14px; }
  .beispiel-art > :not(summary) { margin-left: 12px; margin-right: 12px; }
  .beispiel-cta { padding: 20px 16px 22px; }
}

@media print {
  .beispiel-inhalt { display: none; }
  .beispiel-art { box-shadow: none; }
}