/* 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. */

.lawquote{margin:22px 0;padding:18px 20px;border-left:3px solid var(--lime);
  background:var(--panel);border-radius:0 var(--r) var(--r) 0}
.lawquote blockquote{margin:0}
.lawquote blockquote p{margin:0;font-size:15.5px;line-height:1.62}
.lawquote figcaption{margin-top:10px;font-size:13px;color:var(--muted)}
.lawquote figcaption a{color:var(--lime)}

.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)}

/* ===== Schranke =========================================================
   Der Inhalt bleibt vollstaendig im HTML, auch fuer Googlebot. Nur die
   Darstellung ist gesperrt: unscharf, nicht markierbar, nicht anklickbar.
   Wer den Quelltext liest, kommt heran, und das ist der bewusste Preis
   dafuer, die Rankings zu behalten. ====================================== */

.nl{position:relative}

/* Die gesperrten Zeilen. Der Verlauf laeuft ueber die ersten gesperrten
   Zeilen hinweg, damit die Grenze weich ist und nicht wie ein Fehler wirkt. */
.nl__i.paywall{
  filter:blur(5px) saturate(.75);
  opacity:.55;
  user-select:none;
  pointer-events:none;
  transition:filter .2s ease;
}
.nl__i.paywall .nl__t{color:var(--muted)}

/* Zwei unscharfe Zeilen als Andeutung, dann wird geklappt. Ohne das steht die
   Karte erst nach sieben verwischten Zeilen und man scrollt durch eine Wand.
   Wichtig: max-height 0, NICHT display:none. Der Text bleibt im Dokument und
   im Layoutbaum, nur seine Hoehe ist null. display:none waere der Punkt, an dem
   eine Suchmaschine anfaengt, Inhalt geringer zu gewichten. */
.nl__i.paywall:nth-of-type(4){opacity:.45}
.nl__i.paywall:nth-of-type(5){opacity:.26}
.nl__i.paywall:nth-of-type(n+6){
  max-height:0;padding-top:0;padding-bottom:0;border:0;overflow:hidden;opacity:0;
}

@media (prefers-reduced-motion:reduce){
  .nl__i.paywall{transition:none}
}

/* ===== Die Karte ======================================================== */
.pw{
  position:relative;
  margin:-58px 0 0;               /* schiebt sich ueber den Verlauf */
  padding:34px clamp(22px,4vw,40px) 30px;
  background:linear-gradient(180deg,rgba(28,28,51,.72) 0%,var(--panel) 34%,var(--panel) 100%);
  border:1px solid var(--rule-2);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
  overflow:hidden;
  isolation:isolate;
}
.pw__glow{
  position:absolute;inset:-60% -20% auto;height:260px;z-index:-1;
  background:radial-gradient(60% 100% at 50% 0%,rgba(52,49,165,.55),transparent 70%);
  pointer-events:none;
}
.pw__eyebrow{
  margin:0 0 6px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lime);font-weight:600;
}
.pw__h{
  margin:0 0 10px;font-size:clamp(20px,2.4vw,27px);line-height:1.25;
  letter-spacing:-.015em;color:var(--white);text-wrap:balance;
}
.pw__p{margin:0 0 18px;max-width:62ch;color:var(--muted);line-height:1.6}

.pw__list{
  list-style:none;margin:0 0 24px;padding:0;
  display:grid;gap:9px;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
}
.pw__list li{
  position:relative;padding-left:26px;color:rgba(255,255,255,.82);
  font-size:15px;line-height:1.45;
}
.pw__list li::before{
  content:"";position:absolute;left:0;top:.42em;width:13px;height:8px;
  border-left:2px solid var(--lime);border-bottom:2px solid var(--lime);
  transform:rotate(-45deg);
}

.pw__acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.pw__cta,.pw__alt{
  font:inherit;font-weight:650;cursor:pointer;border-radius:11px;
  padding:14px 22px;transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.pw__cta{
  background:var(--lime);color:#1a1a10;border:1px solid var(--lime);
  box-shadow:0 10px 26px rgba(245,255,171,.17);
}
.pw__cta:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(245,255,171,.26)}
.pw__alt{background:transparent;color:var(--white);border:1px solid var(--rule-2)}
.pw__alt:hover{background:rgba(255,255,255,.06);border-color:var(--rule-2)}
.pw__cta:focus-visible,.pw__alt:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.pw__cta[disabled],.pw__alt[disabled]{opacity:.55;cursor:progress;transform:none}

.pw__fine{margin:16px 0 0;font-size:13px;color:var(--faint);line-height:1.55}
.pw__fine a{color:var(--muted);text-underline-offset:3px}
.pw__fine a:hover{color:var(--white)}

/* Wer bezahlt hat, sieht nie eine Schranke. Eine Klasse am <html>, gesetzt
   bevor gezeichnet wird, damit nichts aufblitzt und wieder verschwindet. */
html.is-entitled .nl__i.paywall{filter:none;opacity:1;user-select:auto;pointer-events:auto}
html.is-entitled .pw{display:none}

/* ===== Konto und Preise ================================================= */
.acct{max-width:620px;margin:0 auto}
.acct__card{
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);
  padding:clamp(22px,4vw,34px);box-shadow:var(--shadow);
}
.acct__row{display:flex;justify-content:space-between;gap:16px;padding:13px 0;
  border-bottom:1px solid var(--rule)}
.acct__row:last-child{border-bottom:0}
.acct__k{color:var(--muted)}
.acct__v{color:var(--white);font-weight:600}
.acct__in{
  width:100%;font:inherit;padding:13px 15px;border-radius:11px;
  background:var(--ink);border:1px solid var(--rule-2);color:var(--white);
}
.acct__in:focus{outline:2px solid var(--lime);outline-offset:2px;border-color:transparent}
.acct__msg{margin:14px 0 0;font-size:14px;color:var(--lime)}
.acct__msg.is-bad{color:var(--bad)}

.plans{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));
  margin:26px 0 0}
.plan{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);
  padding:26px;display:flex;flex-direction:column}
.plan.is-best{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime) inset,var(--shadow)}
.plan__tag{font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--lime);font-weight:650;margin:0 0 8px}
.plan__price{font-size:36px;font-weight:700;color:var(--white);margin:0;letter-spacing:-.02em}
.plan__per{font-size:14px;color:var(--faint)}
.plan__l{list-style:none;padding:0;margin:16px 0 22px;display:grid;gap:8px;flex:1}
.plan__l li{padding-left:24px;position:relative;color:rgba(255,255,255,.82);font-size:15px}
.plan__l li::before{content:"";position:absolute;left:0;top:.42em;width:12px;height:7px;
  border-left:2px solid var(--lime);border-bottom:2px solid var(--lime);transform:rotate(-45deg)}