html.hell:has(#bildAbo[data-an="1"]) { --grund:#fff; }
.abo { max-width:780px; margin:auto; color:var(--text); letter-spacing:0; }
.abo-header { display:flex; align-items:center; gap:10px; min-height:44px; }
.abo-header > button { width:40px; height:40px; display:grid; place-items:center; color:var(--text); background:none; border:0; cursor:pointer; }
.abo-header svg { width:20px; height:20px; }
.abo-header > span { font-size:12px; }
.abo-header .abo-draft { margin-left:auto; color:var(--text-leise); }
.abo-intro { padding:20px 0 18px; }
.abo-intro h1 { margin:0; font:750 28px/1.2 var(--anzeige); letter-spacing:0; }
.abo-intro > p { margin:8px 0 0; font-size:15px; }
.abo-intro img { display:block; width:100%; height:190px; object-fit:contain; margin:18px 0; background:#fff; }
.abo-intro .abo-description { font-size:13px; line-height:1.6; color:var(--text-leise); }
.abo-benefits { padding:2px 0 22px; }
.abo-benefits h2 { margin:0 0 12px; font:700 19px/1.3 var(--anzeige); letter-spacing:0; }
.abo-benefits ul { list-style:none; margin:0; padding:0; }
.abo-benefits li { display:flex; align-items:flex-start; gap:10px; padding:10px 0; }
.abo-benefits li > svg { width:18px; height:18px; flex:none; margin-top:1px; color:var(--text); }
.abo-benefits li > div { min-width:0; }
.abo-benefits h3 { margin:0 0 4px; font:700 13px/1.4 var(--schrift); letter-spacing:0; }
.abo-benefits li p { margin:0; font-size:12px; line-height:1.55; color:var(--text-leise); }
.abo-benefits__note { margin:12px 0 0; font-size:11px; line-height:1.55; color:var(--text-leise); }
.abo-tiers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:4px 0 20px; }
.abo-tiers button { display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-height:112px; min-width:0; padding:12px 10px; border:1px solid var(--linie); border-radius:8px; background:var(--flaeche); color:var(--text); text-align:left; cursor:pointer; }
.abo-tiers svg { width:23px; height:23px; flex:none; color:#187d62; }
.abo-tiers button:nth-child(2) svg { color:#2877d4; }
.abo-tiers button:nth-child(3) svg { color:#dc5166; }
.abo-tiers b { font-size:13px; line-height:1.3; }
.abo-tiers small { font-size:10px; line-height:1.4; color:var(--text-leise); }
.abo-tiers button[aria-pressed="true"] { border-color:var(--text); box-shadow:inset 0 0 0 1px var(--text); }
.abo-detail { border-top:1px solid var(--linie); padding:20px 0 0; }
.abo-eyebrow { margin:0 0 8px; font-size:11px; color:var(--text-leise); }
.abo-detail h2, .abo-gate h2 { margin:0; font:700 21px/1.3 var(--anzeige); letter-spacing:0; }
.abo-detail ul { list-style:none; margin:20px 0; padding:0; }
.abo-detail li { display:flex; align-items:flex-start; gap:12px; padding:13px 0; border-bottom:1px solid var(--linie); }
.abo-detail li > svg { width:18px; height:18px; flex:none; color:#218668; margin-top:2px; }
.abo-detail h3, .abo-terms h3 { margin:0 0 5px; font-size:13px; }
.abo-detail li p, .abo-terms p, .abo-gate p { margin:0; font-size:12px; line-height:1.6; color:var(--text-leise); }
.abo-price { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin:20px 0 10px; }
.abo-price span { font-size:12px; color:var(--text-leise); }
.abo-price strong { font-size:15px; }
.abo-pending, .abo-selection { font-size:11px; line-height:1.6; color:var(--text-leise); }
.abo-book, .abo-button { min-height:46px; width:100%; border:0; border-radius:6px; background:var(--text); color:var(--flaeche); font:650 13px/1.4 var(--schrift); padding:10px 14px; }
.abo-book:disabled { opacity:.45; cursor:not-allowed; }
.abo-button { display:flex; align-items:center; justify-content:space-between; gap:8px; cursor:pointer; color:var(--flaeche); }
.abo-button svg { width:18px; height:18px; flex:none; }
.abo-terms { border-top:1px solid var(--linie); margin-top:24px; padding-top:20px; }
.abo-terms p + p { margin-top:12px; }
.abo-gate { border-top:1px solid var(--linie); padding:22px 0; }
.abo-gate > svg { width:24px; height:24px; margin-bottom:14px; color:var(--text-leise); }
.abo-gate > p { margin:12px 0 20px; }
.abo-gate > a { display:inline-block; min-height:44px; margin-top:12px; font-size:12px; color:var(--text); text-underline-offset:4px; }
.abo button:focus-visible, .abo a:focus-visible { outline:2px solid #2877d4; outline-offset:3px; }
@media (prefers-reduced-motion:no-preference) {
  .abo-detail { animation:abo-appear .22s ease-out; }
  @keyframes abo-appear { from {opacity:0;transform:translateY(5px);} to {opacity:1;transform:none;} }
}