/* Dating-Neustart 40+ — gemeinsames Stylesheet der Ratgeberartikel.
   Aenderungen hier wirken auf alle Artikel. Die Werte sind in DESIGNSYSTEM.md dokumentiert.
   Seitenspezifisches gehoert weiterhin in den style-Block der jeweiligen Seite. */

  @font-face { font-family:"Fraunces"; font-style:normal; font-weight:600 700; font-display:swap; src:url(/fonts/fraunces.woff2) format("woff2"); }
  @font-face { font-family:"Public Sans"; font-style:normal; font-weight:400 700; font-display:swap; src:url(/fonts/publicsans.woff2) format("woff2"); }
  :root { --focus:#FBF8F6; --paper:#FBF8F6; --card:#FFFFFF; --ink:#2A2226; --ink-soft:#6B5D64; --line:#E7DDDF; --wine:#93264A; --wine-dark:#6E1C38; --rose:#93264A; --sand:#F3EAE6; }
  * { box-sizing:border-box; margin:0; }
  body { background:var(--paper); color:var(--ink); font-family:"Public Sans","Segoe UI",system-ui,sans-serif; font-size:17px; line-height:1.7; }
  .wrap { max-width:720px; margin:0 auto; padding:0 22px; }
  header.site { background:var(--ink); padding:14px 0; }
  header.site .wrap { display:flex; justify-content:space-between; align-items:center; }
  header.site a.brand img { display:inline-block; }
  header.site a.brand { color:#FBF8F6; text-decoration:none; font-weight:700; font-size:17px; letter-spacing:0.05em; }
  header.site a.cta { color:#DE9DB4; text-decoration:none; font-size:14px; font-weight:600; }
  article { padding:44px 0 20px; }
  .kicker { font-size:13.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--wine); font-weight:700; margin-bottom:10px; }
  h1 { font-family:"Fraunces",Georgia,serif; font-weight:700; font-size:clamp(28px,5vw,38px); line-height:1.15; margin-bottom:14px; text-wrap:balance; }
  h2 { font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:23px; line-height:1.25; margin:34px 0 10px; }
  p { margin:13px 0; }
  ul, ol { margin:13px 0; padding-left:24px; }
  li { margin:7px 0; }
  a { color:var(--wine); }
  .muted { color:var(--ink-soft); }
  .lead { font-size:18.5px; color:var(--ink-soft); }
  .aufgabe { background:var(--ink); color:#FBF8F6; border-radius:10px; padding:18px 22px; margin:24px 0; }
  .aufgabe .k { font-size:13px; letter-spacing:0.13em; text-transform:uppercase; color:#DE9DB4; font-weight:700; margin-bottom:6px; }
  .folge { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px 22px; margin:24px 0; }
  .folge .k { font-size:13px; letter-spacing:0.13em; text-transform:uppercase; color:var(--wine); font-weight:700; margin-bottom:8px; }
  .folge ol { margin:0; padding-left:22px; }
  .folge li { margin:5px 0; }
  .testbox { background:var(--wine); color:#fff; border-radius:12px; padding:28px 28px; margin:36px 0 10px; }
  .testbox h2 { color:#fff; margin:0 0 8px; font-size:22px; }
  .testbox p { color:#E8D5DA; font-size:15.5px; }
  .btn { display:inline-block; background:var(--ink); color:#fff; font-weight:700; font-size:16px; text-decoration:none; padding:14px 28px; border-radius:8px; margin-top:8px; }
  .btn:hover { background:#000; }
  .weiter { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px 22px; margin:24px 0; }
  .weiter .k { font-size:13px; letter-spacing:0.13em; text-transform:uppercase; color:var(--wine); font-weight:700; margin-bottom:8px; }
  .weiter a { display:block; margin:6px 0; }

  .optin { background:var(--sand); border-left:4px solid var(--wine); border-radius:0 10px 10px 0; padding:18px 20px; margin:28px 0; }
  .optin .k { font-size:13px; letter-spacing:0.13em; text-transform:uppercase; color:var(--wine); font-weight:700; margin-bottom:6px; }
  .optin p { margin:0 0 12px; font-size:15.5px; }
  .optin form { display:flex; gap:9px; flex-wrap:wrap; margin:0; }
  .optin input[type="email"] { flex:1 1 210px; min-width:0; padding:12px 14px; font-size:16px; border:1px solid var(--line); border-radius:8px; font-family:inherit; background:#fff; color:var(--ink); }
  .optin input[name="website"] { position:absolute; left:-9999px; }
  .optin button { background:var(--wine); color:#fff; font-weight:700; font-size:15px; padding:14px 22px; border:none; border-radius:8px; cursor:pointer; font-family:inherit; }
  .optin button:hover { background:var(--wine-dark); }
  .optin p.consent { font-size:12.5px; color:var(--ink-soft); margin:11px 0 0; line-height:1.5; }
  @media (max-width:520px) { .optin input[type="email"], .optin button { flex:1 1 100%; width:100%; } }
  .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  input:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--focus); outline-offset:2px; box-shadow: 0 0 0 6px rgba(42,34,38,0.55); }
  .topcta { background:var(--sand); border-radius:10px; padding:14px 18px; margin:20px 0 4px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
  .topcta p { margin:0; font-size:15px; flex:1 1 250px; }
  .topcta a { display:inline-block; background:var(--wine); color:#fff; font-weight:700; font-size:14.5px; text-decoration:none; padding:10px 18px; border-radius:8px; white-space:nowrap; }
  .topcta a:hover { background:var(--wine-dark); }
  .angebot { background:var(--ink); color:#FBF8F6; border-left:4px solid var(--rose); border-radius:0 10px 10px 0; padding:20px 24px; margin:28px 0; }
  .angebot .k { font-size:13px; letter-spacing:0.13em; text-transform:uppercase; color:#DE9DB4; font-weight:700; margin-bottom:8px; }
  .angebot p { margin:8px 0; font-size:15.5px; color:#D8CCD1; }
  .angebot p strong { color:#FBF8F6; }
  .angebot a.btn3 { display:inline-block; background:var(--wine); color:#fff; font-weight:700; font-size:15px; text-decoration:none; padding:11px 20px; border-radius:8px; margin-top:4px; }
  .angebot a.btn3:hover { background:var(--wine-dark); }
  .angebot p.klein { font-size:13px; color:#A99AA0; margin-top:10px; }
  button:disabled { opacity: 0.55; cursor: default; }

  /* Aktueller Schritt im Reihenfolge-Kasten */
  .folge li.hier { color:var(--ink-soft); }
  .folge li.hier strong { color:var(--ink); }
  .folge li.hier em { font-style:normal; color:var(--wine); font-size:13px; letter-spacing:0.06em; text-transform:uppercase; font-weight:700; margin-left:6px; }