/* Editorial pages: the Gewerk and Bundesland landing pages, the explainers and their
   index. Loaded after app.css and reusing its tokens, so the palette stays one
   decision. Everything here is content typography, no app chrome. */

.top__nav{font-size:14px;font-weight:600;text-decoration:none;color:var(--muted);
  padding:6px 2px}
.top__nav:hover{color:var(--white)}
.top__cta{margin-left:auto}

.doc{max-width:min(var(--max),1120px);margin:0 auto;padding:0 var(--pad) 72px}
.doc h1{font-size:clamp(30px,5vw,50px);margin:6px 0 14px;text-wrap:balance}
.doc h2{font-size:clamp(21px,2.6vw,28px);margin:44px 0 12px;text-wrap:balance}
.doc h3{font-size:17px;margin:26px 0 8px}
.doc p{margin:0 0 14px;max-width:72ch}
.doc .lede{font-size:clamp(17px,2.1vw,20px);color:rgba(255,255,255,.86);
  line-height:1.55;max-width:66ch;margin-bottom:16px}
.doc .meta{font-size:12.5px;color:var(--faint);letter-spacing:.04em;
  text-transform:uppercase;margin-bottom:26px}
.doc .muted{color:var(--muted)}

.crumbs{padding:22px 0 4px}
.crumbs ul{display:flex;flex-wrap:wrap;gap:6px;font-size:12.5px;color:var(--faint)}
.crumbs li+li::before{content:"/";margin-right:6px;opacity:.5}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--white)}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--lime);margin:0 0 6px}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--lime)}

.art .bul{list-style:none;margin:0 0 16px;padding:0;max-width:72ch}
.art .bul li,.two .bul li{position:relative;padding:0 0 0 20px;margin:0 0 9px;
  color:rgba(255,255,255,.84)}
.art .bul li::before,.two .bul li::before{content:"";position:absolute;left:2px;top:.62em;
  width:7px;height:2px;background:var(--lime)}

/* tables scroll inside their own box, never the page */
.tw{overflow-x:auto;margin:0 0 18px;border:1px solid var(--rule);border-radius:var(--r)}
.tbl{border-collapse:collapse;width:100%;min-width:520px;font-size:14.5px}
.tbl th,.tbl td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--rule)}
.tbl thead th{background:var(--panel);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);font-weight:700}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.src{font-size:12.5px;color:var(--faint);max-width:72ch}
.src a{color:var(--muted)}

.dia{margin:26px 0 30px;padding:18px;border:1px solid var(--rule);
  border-radius:var(--r);background:rgba(255,255,255,.025);overflow-x:auto}
.dia svg{width:100%;min-width:560px;height:auto;display:block}
.dia figcaption{margin-top:12px;font-size:13px;color:var(--muted);max-width:72ch}

.statbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r);overflow:hidden;margin:22px 0 8px}
.stat{background:var(--panel);padding:16px 18px}
.stat__n{display:block;font-size:26px;font-weight:900;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.stat__l{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}

.cta-box{margin:34px 0;padding:24px;border:1px solid var(--rule-2);
  border-radius:var(--r);background:linear-gradient(180deg,rgba(52,49,165,.26),rgba(52,49,165,.06))}
.cta-box h2{margin:0 0 10px;font-size:20px}
.cta-box p{color:rgba(255,255,255,.84);margin-bottom:16px}
.btn{display:inline-block;padding:11px 20px;border-radius:10px;font-weight:800;
  font-size:14.5px;text-decoration:none;border:1px solid transparent}
.btn--lime{background:var(--lime);color:var(--ink)}
.btn--lime:hover{filter:brightness(1.06)}

.nl{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r);overflow:hidden;margin:0 0 8px}
.nl__i{background:var(--panel);padding:15px 18px}
.nl__t{display:block;font-weight:700;font-size:15.5px;line-height:1.35;
  text-decoration:none;margin-bottom:5px}
.nl__t:hover{color:var(--lime)}
.nl__b{margin:0 0 6px;font-size:13.5px;color:var(--muted)}
.nl__m{margin:0;font-size:12.5px;color:var(--faint);display:flex;flex-wrap:wrap;
  gap:8px;align-items:baseline}
.nl__d{margin-left:auto;white-space:nowrap;color:var(--warn)}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.chips li a{display:inline-flex;align-items:center;gap:9px;padding:8px 13px;
  border:1px solid var(--rule-2);border-radius:999px;text-decoration:none;
  font-size:14px;background:rgba(255,255,255,.03)}
.chips li a:hover{border-color:var(--lime)}
.chips li a b{font-variant-numeric:tabular-nums;color:var(--lime);font-size:13px}
.chips--plain li a b{display:none}

.two{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media (max-width:760px){.two{grid-template-columns:1fr;gap:6px}}

.faq{margin-top:44px}
.faq__i{border:1px solid var(--rule);border-radius:var(--r);margin:0 0 9px;
  background:rgba(255,255,255,.025)}
.faq__i summary{cursor:pointer;padding:14px 18px;font-weight:700;font-size:15px;
  list-style:none}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary::after{content:"+";float:right;color:var(--lime);font-weight:900}
.faq__i[open] summary::after{content:"\2212"}
.faq__i p{padding:0 18px 15px;margin:0;color:rgba(255,255,255,.84)}

.rel__l{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.rel__l li a{display:block;height:100%;padding:16px 18px;border:1px solid var(--rule);
  border-radius:var(--r);text-decoration:none;background:rgba(255,255,255,.025)}
.rel__l li a:hover{border-color:var(--rule-2);background:rgba(255,255,255,.05)}
.rel__l b{display:block;font-size:15.5px;margin-bottom:6px}
.rel__l span{display:block;font-size:13px;color:var(--muted);line-height:1.5}

.foot{border-top:1px solid var(--rule);margin-top:56px;
  padding:34px var(--pad) 44px;background:rgba(0,0,0,.18)}
.foot__cols{max-width:var(--max);margin:0 auto 26px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px}
.foot__h{font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin:0 0 10px;font-weight:700}
.foot__cols ul li{margin:0 0 7px}
.foot__cols a{font-size:13.5px;color:var(--muted);text-decoration:none}
.foot__cols a:hover{color:var(--white)}
.foot__legal{max-width:var(--max);margin:0 auto 8px;font-size:12.5px;color:var(--faint)}
.foot__legal a{color:var(--muted)}

@media (max-width:600px){
  .doc p,.doc .lede{max-width:none}
  .nl__d{margin-left:0}
}

/* ---------- search on the index ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}
.hsearch{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 0;align-items:stretch}
.hsearch__f{flex:1 1 190px;min-width:0;display:flex}
.hsearch__f--sel{flex:0 1 190px}
.hsearch input,.hsearch select{
  width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--rule-2);
  background:rgba(255,255,255,.05);color:var(--white);font:inherit;font-size:16px;
  -webkit-appearance:none;appearance:none}
.hsearch select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
  linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px}
.hsearch input::placeholder{color:var(--faint)}
.hsearch input:focus,.hsearch select:focus{outline:2px solid var(--lime);outline-offset:1px}
.hsearch .btn{flex:0 0 auto;cursor:pointer;border:0;font-family:inherit}

.sres{margin:16px 0 0;border:1px solid var(--rule);border-radius:var(--r);
  background:rgba(0,0,0,.22);max-height:430px;overflow-y:auto}
.sres__h{margin:0;padding:12px 16px;font-size:12.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--rule)}
.sres__e{margin:0;padding:16px;color:var(--muted);font-size:14px}
.sres__l{display:grid;gap:1px;background:var(--rule)}
.sres__l li{background:var(--panel);padding:13px 16px}
.sres__l li a{font-weight:700;font-size:14.5px;line-height:1.35;text-decoration:none;
  display:block;margin-bottom:4px}
.sres__l li a:hover{color:var(--lime)}
.sres__l li p{margin:0;font-size:12.5px;color:var(--muted)}
.sres__m{display:flex;flex-wrap:wrap;gap:8px;color:var(--faint) !important;margin-top:4px !important}
.sres__m span{margin-left:auto;color:var(--warn);white-space:nowrap}

/* ---------- index blocks ---------- */
.blocks{max-width:var(--max);margin:0 auto;padding:38px var(--pad) 0}
.blocks h2{font-size:clamp(21px,2.6vw,28px);margin:0 0 8px}
.blocks__lead{margin:0 0 16px;color:var(--muted);max-width:70ch;font-size:15px}
.blocks .dia{margin-top:8px}
.blocks .faq{margin-top:0}
.rel__l.cols{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

@media (max-width:640px){
  .hsearch__f,.hsearch__f--sel{flex:1 1 100%}
  .hsearch .btn{width:100%;text-align:center}
  .sres__m span{margin-left:0}
}

@media (max-width:560px){
  .top{gap:10px;padding-left:14px;padding-right:14px}
  .top__nav{display:none}
  .top__cta{font-size:12.5px;padding:7px 11px;white-space:nowrap}
  .top__home{font-size:15px}
}

.barc{width:110px;padding-right:14px !important}
.bar{display:block;height:7px;border-radius:4px;background:var(--lime);min-width:2px}

/* keyword chips: the phrases a page is written to answer, shown as content not as a tag cloud */
.kwl{display:inline}
.kwl li{display:inline;color:var(--muted)}
.kwl li:not(:last-child)::after{content:" · ";color:var(--faint)}