/* Ratgeber in style C "Redaktion": white paper, print black, ink blue; Newsreader for reading, Libre Franklin for labels.
   Only the slim top bar keeps the cobalt of the homepage so readers know where they are. */
:root{
  --paper:#FFFFFF; --box:#F2F4F8; --ink:#121212; --ink-2:#3D3D3D; --grey:#5F5F5F; --rule:#D9D9D9; --blue:#1C3F94;
  --cobalt:#2A3BD8; --soft:#DDE1FF;
  --read:"Newsreader",Georgia,"Times New Roman",serif;
  --ui:"Libre Franklin","Helvetica Neue",Arial,sans-serif;
  --brand:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.55 var(--ui);-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-underline-offset:3px}
a:hover{color:var(--blue)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

.rb-bar{background:var(--cobalt);color:#FFFFFF}
.rb-bar .in{max-width:1180px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.rb-brand{display:flex;align-items:center;gap:9px;font:800 21px/1 var(--brand);letter-spacing:-.035em;color:#FFFFFF;text-decoration:none}
.rb-brand:hover{color:#FFFFFF}
.rb-brand i{width:19px;height:23px;background:#FFFFFF;clip-path:polygon(0 0,100% 0,100% 74%,86% 84%,70% 76%,55% 92%,38% 80%,20% 95%,0 82%)}
.rb-brand .tld{font-weight:500;color:rgba(255,255,255,.6)}
.rb-bar .cta{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:999px;background:#FFFFFF;color:var(--cobalt);font:700 14.5px var(--brand);text-decoration:none}
.rb-bar .cta:hover{background:var(--soft);color:var(--cobalt)}

.rb{max-width:1180px;margin:0 auto;padding:40px 20px 80px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px 72px;align-items:start}
.rb-crumbs{grid-column:1 / -1;font-size:13px;color:var(--grey)}
.rb-crumbs a{color:var(--grey)}
.rb-head{grid-column:1 / -1;padding-bottom:24px;border-bottom:3px solid var(--ink)}
.rb-rubric{margin:0;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.rb-head h1{margin:12px 0 0;max-width:24em;font:500 clamp(34px,4.6vw,58px)/1.04 var(--read);letter-spacing:-.02em;text-wrap:balance}
.rb-meta{margin:16px 0 0;font-size:15px;color:var(--grey)}

.prose{min-width:0;font:400 20px/1.62 var(--read);color:var(--ink)}
.prose > *{max-width:720px}
.prose p{margin:0 0 1em}
.prose h2{margin:1.9em 0 .55em;padding-top:14px;border-top:3px solid var(--ink);font:600 clamp(25px,2.4vw,31px)/1.15 var(--read);letter-spacing:-.015em}
.prose h3{margin:1.5em 0 .4em;font:600 22px/1.25 var(--read)}
.prose ul,.prose ol{margin:0 0 1em;padding-left:1.15em}
.prose li{margin:.3em 0}
.prose strong{font-weight:600}
.prose a{color:var(--blue)}
.prose blockquote{margin:1.2em 0;padding-left:18px;border-left:3px solid var(--blue);font-style:italic;color:var(--ink-2)}
/* "Kurz gesagt": the bold one-liner followed by a list becomes the summary box */
.prose > p:has(> strong:only-child):has(+ ul){margin:0;padding:18px 22px 4px;background:var(--box);border-top:4px solid var(--blue);font:700 13px/1.4 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.prose > p:has(> strong:only-child) + ul{margin:0 0 1.6em;padding:6px 22px 18px 42px;background:var(--box);font-size:18.5px}
.prose .tbl{max-width:100%;overflow-x:auto;margin:0 0 1.2em}
.prose table{width:100%;min-width:520px;border-collapse:collapse;font:15px/1.45 var(--ui)}
.prose th,.prose td{padding:10px 12px 10px 0;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
.prose th{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);border-bottom:2px solid var(--ink)}
.prose hr{border:0;border-top:1px solid var(--rule);margin:2em 0}

.rb-aside{position:sticky;top:24px;display:flex;flex-direction:column;gap:12px;padding:22px;background:var(--box);border-top:4px solid var(--blue)}
.rb-aside h2{margin:0;font:600 26px/1.1 var(--read)}
.rb-aside p{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.rb-aside .btn{display:flex;align-items:center;justify-content:center;min-height:50px;margin-top:6px;background:var(--blue);color:#FFFFFF;font-weight:600;font-size:15.5px;text-decoration:none}
.rb-aside .btn:hover{background:#15306f;color:#FFFFFF}
.rb-aside small{font-size:13px;color:var(--grey)}

.rb-note{grid-column:1 / -1;max-width:46em;padding-top:20px;border-top:1px solid var(--rule);font-size:14px;color:var(--grey)}

.rb-foot{border-top:3px solid var(--ink)}
.rb-foot .in{max-width:1180px;margin:0 auto;padding:22px 20px 40px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;font-size:14px;color:var(--grey)}
.rb-foot nav{display:flex;gap:18px}
.rb-foot a{color:var(--grey)}

.rb-list{grid-column:1 / -1;list-style:none;margin:0;padding:0;max-width:52em}
.rb-list li{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--rule)}
.rb-list li:first-child{border-top:3px solid var(--ink)}
.rb-list .n{font:400 34px/.9 var(--read);color:var(--blue);min-width:1.1em}
.rb-list a{font:500 24px/1.25 var(--read);text-decoration:none}
.rb-list p{margin:6px 0 0;font-size:15.5px;color:var(--grey)}

@media (max-width:980px){
  .rb{grid-template-columns:minmax(0,1fr)}
  .rb-aside{position:static}
}
@media (max-width:480px){
  .rb-bar .cta{padding:0 14px}
  .rb-brand{font-size:19px}
  .prose{font-size:18.5px}
}