/* Neurobird tender matching. Shares the agency palette and Satoshi, but is a
   self contained stylesheet: the demo is an app, not a marketing page, and it
   should not inherit 2900 lines of landing page rules to override them again. */

:root{
  --navy:#17172B;
  --ink:#0e0e1c;
  --panel:#1c1c33;
  --panel-2:#21213b;
  --lime:#F5FFAB;
  --blue:#3431A5;
  --white:#fff;
  --muted:rgba(255,255,255,.60);
  --faint:rgba(255,255,255,.38);
  --rule:rgba(255,255,255,.13);
  --rule-2:rgba(255,255,255,.22);
  --ok:#B8F5A0;
  --warn:#FFD68A;
  --bad:#FF9E8F;
  --max:1320px;
  --pad:clamp(20px,4vw,56px);
  --r:14px;
  --shadow:0 18px 50px rgba(0,0,0,.38);
  /* ---- semantic surface and text, both themes define all of these ---- */
  --bg:#17172B;              /* page ground */
  --bg-grad-1:rgba(52,49,165,.30);
  --bg-grad-2:rgba(245,255,171,.07);
  --fg:#fff;                 /* primary text */
  --surface:#1c1c33;         /* cards, panels */
  --surface-2:#21213b;       /* nested panels */
  --topbar:rgba(23,23,43,.86);
  --text-strong:rgba(255,255,255,.86);
  --text-body:rgba(255,255,255,.84);
  --text-dim:rgba(255,255,255,.72);
  --tint-xs:rgba(255,255,255,.025);
  --tint-sm:rgba(255,255,255,.05);
  --tint-md:rgba(255,255,255,.09);
  --tint-lg:rgba(255,255,255,.13);
  --well:rgba(0,0,0,.18);
  --well-2:rgba(0,0,0,.22);
  --accent:#F5FFAB;          /* the thing that draws the eye */
  --accent-ink:#17172B;      /* text ON the accent */
  --accent-tint:rgba(245,255,171,.12);
  --accent-tint-2:rgba(245,255,171,.30);
  --accent-line:rgba(245,255,171,.35);
  --bar:#F5FFAB;             /* score bar fill */
  --bar-track:rgba(255,255,255,.10);
  --blue-tint:rgba(52,49,165,.26);
  --blue-tint-2:rgba(52,49,165,.55);
  --chip-ted-fg:#c8c6ff;
  --letter-bg:#F7F6F1;
  --letter-fg:#14141f;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{
  margin:0;background:var(--navy);color:var(--white);
  font-family:"Satoshi",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(900px 520px at 12% -8%, var(--bg-grad-1), transparent 62%),
    radial-gradient(720px 420px at 92% 4%, var(--bg-grad-2), transparent 60%);
  background-repeat:no-repeat;
}
h1,h2,h3{margin:0;font-weight:900;letter-spacing:-.02em;line-height:1.08}
p{margin:0}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;
  background:var(--tint-sm);padding:.15em .45em;border-radius:5px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--accent);color:var(--accent-ink);
  padding:10px 16px;border-radius:8px;font-weight:700}

/* ---------- header ---------- */
.top{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;
  padding:14px var(--pad);border-bottom:1px solid var(--rule);
  background:var(--topbar);backdrop-filter:blur(14px);
}
.top__home{display:flex;align-items:center;gap:9px;font-weight:900;
  letter-spacing:-.02em;text-decoration:none;font-size:17px}
.top__mark{width:11px;height:11px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px rgba(245,255,171,.16)}
.top__tag{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);border:1px solid var(--rule);padding:4px 10px;border-radius:99px}
.top__cta{margin-left:auto;font-size:14px;font-weight:700;text-decoration:none;
  color:var(--accent-ink);background:var(--accent);padding:9px 16px;border-radius:99px;
  white-space:nowrap;transition:transform .15s ease}
@media(max-width:560px){
  .top{gap:9px;padding:11px var(--pad)}
  .top__tag{display:none}
  .top__cta{font-size:13px;padding:8px 13px}
}
.top__cta:hover{transform:translateY(-1px)}
/* Der Knopf traegt white-space:nowrap, und ein Flex-Kind schrumpft per Vorgabe nicht
   unter seinen Inhalt. Auf schmalen Geraeten steht deshalb das kurze Wort, damit die
   Kopfzeile in einer Zeile bleibt, statt die Seite seitlich zu schieben. */
.top__cta__sm{display:none}
.top__home{min-width:0}
@media(max-width:430px){
  .top__cta__lg{display:none}
  .top__cta__sm{display:inline}
}

/* ---------- hero ---------- */
main{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.hero{padding:clamp(30px,4vw,52px) 0 clamp(24px,3vw,34px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);
  gap:clamp(24px,3vw,46px);align-items:center}
@media(max-width:960px){.hero__grid{grid-template-columns:1fr;gap:24px}}

.eyebrow{display:flex;align-items:center;gap:9px;font-size:11.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:14px}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;
  animation:pulse 1.9s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(245,255,171,.5)}
  50%{opacity:.55;box-shadow:0 0 0 6px rgba(245,255,171,0)}}

.hero h1{font-size:clamp(28px,3.9vw,44px);max-width:19ch}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero__lead{margin-top:14px;font-size:clamp(14.5px,1.05vw,16px);color:var(--muted);
  max-width:62ch;line-height:1.58}
.hero__lead strong{color:var(--white);font-weight:700}

.statbar{display:grid;grid-template-columns:repeat(4,auto);gap:0 clamp(18px,2.4vw,34px);
  margin-top:22px;justify-content:start}
@media(max-width:520px){.statbar{grid-template-columns:repeat(2,1fr);gap:16px 20px}}
.stat{position:relative;padding-left:13px}
.stat::before{content:"";position:absolute;left:0;top:5px;bottom:4px;width:2px;
  border-radius:2px;background:rgba(245,255,171,.32)}
.stat__n{display:block;font-size:clamp(18px,1.8vw,23px);font-weight:900;
  letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1.1}
.stat__l{display:block;font-size:11.5px;color:var(--faint);margin-top:2px;line-height:1.3}

/* live console: every line is a stage the server actually ran */
.console{background:var(--ink);border:1px solid var(--rule);border-radius:var(--r);
  padding:0;overflow:hidden;font-variant-numeric:tabular-nums;box-shadow:var(--shadow)}
.console__bar{display:flex;align-items:center;gap:9px;padding:11px 15px;
  border-bottom:1px solid var(--rule);background:var(--tint-xs)}
.console__dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  animation:pulse 1.6s ease-in-out infinite}
.console__dot[data-idle="1"]{background:var(--rule-2);animation:none}
.console__title{font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--faint);font-weight:700}
.console__ms{margin-left:auto;font-size:11.5px;color:var(--accent);font-weight:700}
.console__lines{margin:0;padding:11px 15px 13px;list-style:none;display:grid;gap:0;
  min-height:196px;align-content:start}
.console__lines li{display:grid;grid-template-columns:15px 1fr auto;gap:9px;
  align-items:baseline;padding:4.5px 0;font-size:12.5px;line-height:1.4;
  animation:linein .28s ease both}
@keyframes linein{from{opacity:0;transform:translateX(-5px)}to{opacity:1;transform:none}}
.console__lines .tick{color:var(--accent);font-weight:900;font-size:11px}
.console__lines .lbl{color:var(--text-strong);min-width:0}
.console__lines .lbl b{display:block;font-weight:700}
.console__lines .lbl span{display:block;color:var(--faint);font-size:11.5px;
  margin-top:1px}
.console__lines .t{color:var(--faint);font-size:11px;white-space:nowrap}
.console__lines li.is-live .tick{animation:blink .8s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}

/* ---------- layout ---------- */
.split{display:grid;grid-template-columns:340px minmax(0,1fr);gap:34px;
  align-items:start;padding-bottom:70px}
/* On one column the profile panel is a full screen of controls sitting between
   the visitor and the ranking, which is the thing they came for. Put the
   results first and leave a link back up to the controls. */
@media(max-width:1040px){
  .split{grid-template-columns:1fr;gap:26px}
  .results{order:1}
  .profile{order:2}
  .tolink{display:inline-block}
}
.tolink{display:none;font-size:12.5px;color:var(--accent);text-decoration:none;
  border-bottom:1px solid var(--accent-line);padding-bottom:1px}

/* ---------- profile rail ---------- */
.profile__inner{position:sticky;top:78px;background:var(--panel);
  border:1px solid var(--rule);border-radius:var(--r);padding:22px}
@media(max-width:1040px){.profile__inner{position:static}}
.profile__head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.profile__head h2{font-size:15px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--faint);font-weight:700}
.badge{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:3.5px 9px;border-radius:99px;white-space:nowrap}
.badge--warn{background:rgba(255,214,138,.14);color:var(--warn);
  border:1px solid rgba(255,214,138,.32)}
.profile__name{margin-top:14px;font-size:20px;font-weight:900;letter-spacing:-.02em}
.profile__meta{font-size:13.5px;color:var(--faint);margin-top:2px}

.facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:18px 0 0;
  background:var(--rule);border:1px solid var(--rule);border-radius:10px;overflow:hidden}
.facts>div{background:var(--panel);padding:11px 12px}
.facts dt{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.facts dd{margin:3px 0 0;font-size:13.5px;font-weight:700}

.disc{margin-top:16px;border-top:1px solid var(--rule);padding-top:14px}
.disc summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--accent);
  list-style:none}
.disc summary::-webkit-details-marker{display:none}
.disc summary::before{content:"+ ";font-weight:900}
.disc[open] summary::before{content:"− "}
.disc__h{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);margin:14px 0 6px}
.disc ul li{font-size:12.8px;color:var(--muted);padding-left:14px;position:relative;
  margin-bottom:4px;line-height:1.45}
.disc ul li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;
  border-radius:50%;background:var(--accent);opacity:.6}
.ul--no li::before{background:var(--bad);border-radius:1px;height:2px;width:7px;top:9px}

.tune{margin-top:20px;border-top:1px solid var(--rule);padding-top:16px}
.tune__h{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);margin-bottom:12px}
.fld{display:block;margin-bottom:13px}
.fld>span{display:flex;justify-content:space-between;font-size:12.5px;
  color:var(--muted);margin-bottom:5px}
.fld>span b{color:var(--accent);font-variant-numeric:tabular-nums}
.fld select{width:100%;background:var(--ink);color:var(--white);
  border:1px solid var(--rule-2);border-radius:8px;padding:8px 10px;font:inherit;
  font-size:13.5px}
.fld input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:3px;
  background:var(--rule-2);border-radius:99px;outline:none}
.fld input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;
  height:15px;border-radius:50%;background:var(--accent);cursor:pointer;
  border:3px solid var(--panel);box-shadow:0 0 0 1px var(--accent)}
.fld input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;
  background:var(--accent);cursor:pointer;border:3px solid var(--panel)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font:inherit;font-weight:700;border-radius:99px;cursor:pointer;text-decoration:none;
  border:1px solid transparent;transition:transform .15s ease,background .15s ease;
  padding:10px 18px;font-size:14px}
.btn:hover{transform:translateY(-1px)}
.btn--lime{background:var(--accent);color:var(--accent-ink)}
.btn--ghost{background:transparent;color:var(--white);border-color:var(--rule-2)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn--sm{padding:7.5px 14px;font-size:13px}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}

/* ---------- results ---------- */
.results__head{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:16px;scroll-margin-top:80px}
.results__head h2{font-size:clamp(22px,2.4vw,29px)}
.results__sub{font-size:13px;color:var(--faint);font-variant-numeric:tabular-nums}

.list{display:flex;flex-direction:column;gap:12px}
.card{display:grid;grid-template-columns:56px minmax(0,1fr);
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;transition:border-color .18s ease}
.card:hover{border-color:var(--rule-2)}
.card--top{border-color:var(--accent-tint-2)}
/* a high structural score whose written verdict says do not bid */
.card--veto{border-color:rgba(255,158,143,.34)}
.card--veto .card__rank .s{color:var(--bad)}
.card--veto .card__title{color:var(--text-dim)}
.chip--veto{border-color:rgba(255,158,143,.5);background:rgba(255,158,143,.14);
  color:var(--bad)}
.card__rank{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding-top:20px;gap:3px;background:var(--panel-2);border-right:1px solid var(--rule)}
.card__rank .n{font-size:12px;color:var(--faint);font-weight:700}
.card__rank .s{font-size:19px;font-weight:900;color:var(--accent);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.card__rank .sl{font-size:9px;color:var(--faint);letter-spacing:.06em;text-transform:uppercase}
.card__body{padding:18px 20px 18px 18px;min-width:0}
.card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:9px}
.card__badges{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 8px;border-radius:5px;border:1px solid var(--rule-2);color:var(--muted);
  white-space:nowrap}
.chip--ted{border-color:rgba(52,49,165,.7);background:rgba(52,49,165,.28);color:var(--chip-ted-fg)}
.chip--bund{border-color:rgba(184,245,160,.35);background:rgba(184,245,160,.12);color:var(--ok)}
.chip--both{border-color:rgba(245,255,171,.4);background:var(--accent-tint);color:var(--accent)}
.card__deadline{font-size:12.5px;font-weight:700;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.dl--ok{color:var(--ok)} .dl--warn{color:var(--warn)} .dl--bad{color:var(--bad)}
.card__title{font-size:17.5px;line-height:1.28;letter-spacing:-.015em}
.card__buyer{font-size:13px;color:var(--faint);margin-top:5px}

.card__facts{display:flex;flex-wrap:wrap;gap:0 22px;margin:13px 0 0}
.card__facts>div{min-width:0}
.card__facts dt{font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint)}
.card__facts dd{margin:1px 0 0;font-size:13px;font-weight:700}

.scores{margin-top:15px;border-top:1px solid var(--rule);padding-top:13px;
  display:grid;gap:12px}
.sc{display:grid;grid-template-columns:118px 1fr 34px;align-items:center;
  gap:2px 12px}
.sc__n{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
/* both must be block: a span is inline, and an inline box ignores height, so
   the track collapsed and the lime fill never showed at all. */
.sc__track{display:block;height:5px;border-radius:99px;
  background:var(--bar-track);overflow:hidden}
.sc__fill{display:block;height:5px;border-radius:99px;background:var(--bar);
  min-width:2px;transition:width .55s cubic-bezier(.22,.9,.28,1)}
.sc__v{font-size:12px;font-weight:700;text-align:right;color:var(--white);
  font-variant-numeric:tabular-nums}
.sc--unknown .sc__track{background:repeating-linear-gradient(100deg,
  var(--tint-lg) 0 4px,transparent 4px 9px)}
.sc--unknown .sc__fill{display:none}
.sc--unknown .sc__n,.sc--unknown .sc__v{color:var(--faint)}
/* the reason belongs to the bar above it, so it hugs that row and keeps clear
   air before the next one */
.sc__why{grid-column:2/-1;font-size:11.5px;color:var(--faint);line-height:1.35;
  margin-top:1px}
@media(max-width:560px){
  .sc{grid-template-columns:92px 1fr 30px;gap:2px 9px}
}

.card__actions{display:flex;gap:8px;margin-top:15px;flex-wrap:wrap}

/* ---------- verdict ---------- */
.verdict{margin-top:16px;border-top:1px solid var(--rule);padding-top:16px;
  display:grid;gap:15px;animation:rise .3s ease both}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.vd__h{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);font-weight:700;margin-bottom:6px}
.vd__text{font-size:14.5px;color:var(--text-strong);line-height:1.62}
.vd__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:620px){.vd__row{grid-template-columns:1fr}}
.vd__box{background:var(--ink);border:1px solid var(--rule);border-radius:11px;padding:14px}
.vd__big{font-size:27px;font-weight:900;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums}
.vd__band{font-size:12.5px;color:var(--faint);margin-top:4px}
.vd__note{font-size:12.8px;color:var(--muted);margin-top:9px;line-height:1.5}
.risk--hoch{color:var(--bad)} .risk--mittel{color:var(--warn)} .risk--niedrig{color:var(--ok)}

.dq{display:grid;gap:8px}
.dq li{background:var(--ink);border:1px solid var(--rule);border-left-width:3px;
  border-radius:9px;padding:11px 13px}
.dq li[data-sev=hoch]{border-left-color:var(--bad)}
.dq li[data-sev=mittel]{border-left-color:var(--warn)}
.dq li[data-sev=niedrig]{border-left-color:var(--rule-2)}
.dq__t{font-size:13.5px;font-weight:700}
.dq__d{font-size:12.8px;color:var(--muted);margin-top:3px;line-height:1.5}

/* the draft letter, deliberately inverted: it is the one artefact the user
   would actually paste into their own letterhead */
.letter{background:var(--letter-bg);color:var(--letter-fg);border-radius:12px;padding:22px 24px;
  box-shadow:var(--shadow);position:relative}
.letter__betreff{font-weight:900;font-size:15px;letter-spacing:-.01em;
  padding-bottom:11px;margin-bottom:13px;border-bottom:1px solid rgba(0,0,0,.13)}
.letter__body{font-size:14.2px;line-height:1.72;white-space:pre-wrap;
  color:rgba(20,20,31,.88)}
.letter__copy{position:absolute;top:14px;right:14px;background:var(--letter-fg);color:#fff;
  border:0;border-radius:7px;padding:6px 11px;font:inherit;font-size:11.5px;
  font-weight:700;cursor:pointer;opacity:.82}
.letter__copy:hover{opacity:1}

.next{background:rgba(245,255,171,.09);border:1px solid rgba(245,255,171,.26);
  border-radius:11px;padding:13px 15px;font-size:14px}
.next b{color:var(--accent)}

.vd__loading{font-size:13.5px;color:var(--faint);display:flex;align-items:center;gap:9px}
.spin{width:13px;height:13px;border:2px solid var(--rule-2);border-top-color:var(--accent);
  border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.vd__err{font-size:13.5px;color:var(--bad)}

/* ---------- rejected ---------- */
.rejected{margin-top:52px;padding-top:30px;border-top:1px solid var(--rule)}
.rejected h2{font-size:clamp(19px,2vw,24px)}
.rejected__lead{font-size:14px;color:var(--faint);margin:9px 0 16px;max-width:66ch}
.list--slim .card{opacity:.62;grid-template-columns:56px minmax(0,1fr)}
.list--slim .card:hover{opacity:1}
.list--slim .card__rank .s{color:var(--bad)}

/* ---------- method ---------- */
.method{padding:56px 0;border-top:1px solid var(--rule)}
.method h2{font-size:clamp(23px,2.6vw,32px);margin-bottom:26px}
.method__grid{display:grid;grid-template-columns:1fr 1fr;gap:38px}
@media(max-width:900px){.method__grid{grid-template-columns:1fr;gap:30px}}
.method h3{font-size:16px;margin-bottom:11px;color:var(--accent)}
.method p{font-size:14.5px;color:var(--muted);line-height:1.68}
.weights{margin-top:18px;display:grid;gap:9px}
.weights li{display:grid;grid-template-columns:132px 1fr 44px;align-items:center;gap:11px;
  font-size:13px}
.weights .wt{height:5px;background:var(--tint-md);border-radius:99px;overflow:hidden}
.weights .wt i{display:block;height:100%;background:var(--blue);border-radius:99px}
.weights .wv{text-align:right;color:var(--accent);font-weight:700;
  font-variant-numeric:tabular-nums}
.notes li{font-size:14px;color:var(--muted);line-height:1.65;padding-left:17px;
  position:relative;margin-bottom:12px}
.notes li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--accent);opacity:.55}
.notes b{color:var(--white)}
.method__models{margin-top:26px;font-size:12.5px;color:var(--faint)}

/* ---------- cta + footer ---------- */
.cta{padding:52px 0 62px;border-top:1px solid var(--rule);max-width:760px}
.cta h2{font-size:clamp(23px,2.6vw,32px)}
.cta p{margin:14px 0 24px;color:var(--muted);font-size:15.5px;line-height:1.68}
.foot{border-top:1px solid var(--rule);padding:26px var(--pad) 40px;
  max-width:var(--max);margin:0 auto;font-size:12.8px;color:var(--faint);
  display:grid;gap:8px}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--accent)}

.empty{padding:40px;text-align:center;color:var(--faint);border:1px dashed var(--rule-2);
  border-radius:var(--r);font-size:14px}
.skel{height:132px;border-radius:var(--r);border:1px solid var(--rule);
  background:linear-gradient(100deg,var(--panel) 30%,var(--panel-2) 50%,var(--panel) 70%);
  background-size:220% 100%;animation:sheen 1.25s ease-in-out infinite}
@keyframes sheen{to{background-position:-220% 0}}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}


/* ===== Gesperrte Karten ================================================= */
/* Unscharf ist allein die Vergabestelle. Titel, Frist, CPV, Bundesland und
   vor allem die sechs Faktoren der Bewertung bleiben scharf: sie zeigen, dass
   gerechnet wurde, und genau das ist das Argument. Kein display:none und kein
   Abschneiden der Hoehe, der Text bleibt vollstaendig im Dokument. */
.card.paywall .nl__blur{
  display:inline-block;
  filter:blur(5px);
  opacity:.75;
  user-select:none;
  transition:filter .18s ease,opacity .18s ease;
}
.card.paywall:hover .nl__blur{filter:blur(3.2px);opacity:.9}
.card.paywall .card__title::after{
  content:"";display:inline-block;width:11px;height:13px;margin-left:8px;
  vertical-align:-2px;opacity:.5;background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 13'%3E%3Cpath d='M1.6 5.5V3.6a3.9 3.9 0 0 1 7.8 0v1.9h.3a.9.9 0 0 1 .9.9v5.2a.9.9 0 0 1-.9.9H1.3a.9.9 0 0 1-.9-.9V6.4a.9.9 0 0 1 .9-.9h.3Zm1.7 0h4.4V3.6a2.2 2.2 0 0 0-4.4 0v1.9Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 13'%3E%3Cpath d='M1.6 5.5V3.6a3.9 3.9 0 0 1 7.8 0v1.9h.3a.9.9 0 0 1 .9.9v5.2a.9.9 0 0 1-.9.9H1.3a.9.9 0 0 1-.9-.9V6.4a.9.9 0 0 1 .9-.9h.3Zm1.7 0h4.4V3.6a2.2 2.2 0 0 0-4.4 0v1.9Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.btn--locked{
  opacity:.72;
}
.btn--locked::before{
  content:"";display:inline-block;width:10px;height:12px;margin-right:7px;
  vertical-align:-1px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 13'%3E%3Cpath d='M1.6 5.5V3.6a3.9 3.9 0 0 1 7.8 0v1.9h.3a.9.9 0 0 1 .9.9v5.2a.9.9 0 0 1-.9.9H1.3a.9.9 0 0 1-.9-.9V6.4a.9.9 0 0 1 .9-.9h.3Zm1.7 0h4.4V3.6a2.2 2.2 0 0 0-4.4 0v1.9Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 13'%3E%3Cpath d='M1.6 5.5V3.6a3.9 3.9 0 0 1 7.8 0v1.9h.3a.9.9 0 0 1 .9.9v5.2a.9.9 0 0 1-.9.9H1.3a.9.9 0 0 1-.9-.9V6.4a.9.9 0 0 1 .9-.9h.3Zm1.7 0h4.4V3.6a2.2 2.2 0 0 0-4.4 0v1.9Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.btn--locked:hover{opacity:1;border-color:var(--accent);color:var(--accent)}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}

html.is-entitled .card.paywall .nl__blur{filter:none;opacity:1;user-select:auto}
html.is-entitled .card.paywall .card__title::after{display:none}
html.is-entitled .btn--locked{opacity:1}
html.is-entitled .btn--locked::before{display:none}

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

/* ===== Das helle Thema ==================================================
   Limettengrund mit Tinte darauf, wie der helle Abschnitt der Agenturseite.
   Die Marke kehrt sich um statt zu verblassen: auf Marine ist der Akzent
   Limette, auf Limette ist er Marine. Lange Texte und Listen stehen auf
   weissen Flaechen, weil ein ganzseitiges Limettengrund unter 900 Woertern
   Fliesstext ermuedet. */
:root[data-theme="light"]{
  --bg:#F5FFAB;
  --bg-grad-1:rgba(52,49,165,.10);
  --bg-grad-2:rgba(255,255,255,.55);
  --fg:#17172B;
  --surface:#FFFFFF;
  --surface-2:#FBFBF4;
  --topbar:rgba(245,255,171,.92);
  --navy:#F5FFAB;
  --ink:#17172B;
  --panel:#FFFFFF;
  --panel-2:#FBFBF4;
  --white:#17172B;
  --muted:rgba(23,23,43,.66);
  --faint:rgba(23,23,43,.46);
  --rule:rgba(23,23,43,.14);
  --rule-2:rgba(23,23,43,.26);
  --text-strong:rgba(23,23,43,.88);
  --text-body:rgba(23,23,43,.80);
  --text-dim:rgba(23,23,43,.62);
  --tint-xs:rgba(23,23,43,.035);
  --tint-sm:rgba(23,23,43,.06);
  --tint-md:rgba(23,23,43,.10);
  --tint-lg:rgba(23,23,43,.16);
  --well:rgba(23,23,43,.05);
  --well-2:rgba(23,23,43,.07);
  --accent:#17172B;
  --accent-ink:#F5FFAB;
  --accent-tint:rgba(23,23,43,.07);
  --accent-tint-2:rgba(23,23,43,.22);
  --accent-line:rgba(23,23,43,.30);
  --bar:#3431A5;
  --bar-track:rgba(23,23,43,.12);
  --blue-tint:rgba(52,49,165,.12);
  --blue-tint-2:rgba(52,49,165,.22);
  --chip-ted-fg:#2a279a;
  --ok:#1F7A3D;
  --warn:#8A5A00;
  --bad:#A32C1B;
  --shadow:0 14px 38px rgba(23,23,43,.13);
}
/* Ohne ausdrueckliche Wahl folgt die Seite dem System, aber eine getroffene
   Wahl gewinnt immer, deshalb der :not()-Schutz. */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]):not([data-theme="light"]){
    color-scheme:light;
  }
}


/* ===== Design-Umschalter ================================================ */
.top__theme{
  width:34px;height:34px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--rule-2);border-radius:99px;
  background:transparent;color:var(--fg);cursor:pointer;
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.top__theme:hover{border-color:var(--accent);background:var(--tint-sm)}
.top__theme:active{transform:scale(.94)}
.top__theme:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.top__theme__i{
  width:16px;height:16px;display:block;background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 9.8A6 6 0 0 1 6.2 2.5a6 6 0 1 0 7.3 7.3Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 9.8A6 6 0 0 1 6.2 2.5a6 6 0 1 0 7.3 7.3Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* Das Symbol zeigt, wohin der Klick fuehrt, nicht wo man gerade ist. */
:root[data-theme="light"] .top__theme__i{
  -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6Zm0-9.5a.75.75 0 0 1 .75.75v1a.75.75 0 0 1-1.5 0v-1A.75.75 0 0 1 8 1.5Zm0 11a.75.75 0 0 1 .75.75v1a.75.75 0 0 1-1.5 0v-1A.75.75 0 0 1 8 12.5ZM1.5 8a.75.75 0 0 1 .75-.75h1a.75.75 0 0 1 0 1.5h-1A.75.75 0 0 1 1.5 8Zm11 0a.75.75 0 0 1 .75-.75h1a.75.75 0 0 1 0 1.5h-1A.75.75 0 0 1 12.5 8ZM3.6 3.6a.75.75 0 0 1 1.06 0l.7.7a.75.75 0 0 1-1.06 1.06l-.7-.7a.75.75 0 0 1 0-1.06Zm7.04 7.04a.75.75 0 0 1 1.06 0l.7.7a.75.75 0 1 1-1.06 1.06l-.7-.7a.75.75 0 0 1 0-1.06ZM12.4 3.6a.75.75 0 0 1 0 1.06l-.7.7a.75.75 0 1 1-1.06-1.06l.7-.7a.75.75 0 0 1 1.06 0ZM5.36 10.64a.75.75 0 0 1 0 1.06l-.7.7a.75.75 0 0 1-1.06-1.06l.7-.7a.75.75 0 0 1 1.06 0Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6Zm0-9.5a.75.75 0 0 1 .75.75v1a.75.75 0 0 1-1.5 0v-1A.75.75 0 0 1 8 1.5Zm0 11a.75.75 0 0 1 .75.75v1a.75.75 0 0 1-1.5 0v-1A.75.75 0 0 1 8 12.5ZM1.5 8a.75.75 0 0 1 .75-.75h1a.75.75 0 0 1 0 1.5h-1A.75.75 0 0 1 1.5 8Zm11 0a.75.75 0 0 1 .75-.75h1a.75.75 0 0 1 0 1.5h-1A.75.75 0 0 1 12.5 8ZM3.6 3.6a.75.75 0 0 1 1.06 0l.7.7a.75.75 0 0 1-1.06 1.06l-.7-.7a.75.75 0 0 1 0-1.06Zm7.04 7.04a.75.75 0 0 1 1.06 0l.7.7a.75.75 0 1 1-1.06 1.06l-.7-.7a.75.75 0 0 1 0-1.06ZM12.4 3.6a.75.75 0 0 1 0 1.06l-.7.7a.75.75 0 1 1-1.06-1.06l.7-.7a.75.75 0 0 1 1.06 0ZM5.36 10.64a.75.75 0 0 1 0 1.06l-.7.7a.75.75 0 0 1-1.06-1.06l.7-.7a.75.75 0 0 1 1.06 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media (prefers-reduced-motion:reduce){.top__theme{transition:none}}
@media (max-width:640px){.top__theme{width:30px;height:30px}}


/* ===== Helle Feinabstimmung =============================================
   Auf Limette wird aus einem blauen Schleier ein truebes Gruen. Alles, was
   auf dunklem Grund ein Hauch war, wird hier eine weisse Flaeche. */
:root[data-theme="light"] .cta-box,
:root[data-theme="light"] .profile,
:root[data-theme="light"] .console,
:root[data-theme="light"] .statbar,
:root[data-theme="light"] .pw{
  background:var(--surface);
  border:1px solid var(--rule);
  box-shadow:var(--shadow);
}
:root[data-theme="light"] .hero::before,
:root[data-theme="light"] .pw::before{background:none}
:root[data-theme="light"] body{background-image:none}
/* Fristen: Bernstein auf Limette ist schwer zu lesen, Marine traegt besser. */
:root[data-theme="light"] .nl__d{color:var(--blue-ink,#2a279a);font-weight:650}
:root[data-theme="light"] .card{background:var(--surface);border:1px solid var(--rule)}
:root[data-theme="light"] .card--top{border-color:var(--accent);box-shadow:var(--shadow)}
/* Der unscharfe Name braucht auf Weiss etwas mehr Deckung, sonst verschwindet er. */
:root[data-theme="light"] .nl__blur,
:root[data-theme="light"] .card.paywall .nl__blur{opacity:.9}


/* ===== Bewertung zusammengefasst ========================================
   Die Karte fuehrt mit der einen Zeile, die entscheidet. Die sechs Balken
   liegen darunter in einem <details>, also ohne Javascript, mit Tastatur
   bedienbar und fuer Crawler weiterhin im Dokument. */
.scores__d{margin-top:14px;border-top:1px solid var(--rule);padding-top:12px}
.scores__d > summary{
  list-style:none;cursor:pointer;border-radius:10px;padding:7px 9px;margin:-7px -9px;
  transition:background .16s ease;
}
.scores__d > summary::-webkit-details-marker{display:none}
.scores__d > summary:hover{background:var(--tint-xs)}
.scores__d > summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.scd{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.scd__k{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.scd__v{font-size:13.5px;font-weight:650;color:var(--fg)}
.scd__s{
  font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums;
  padding:2px 8px;border-radius:99px;border:1px solid transparent;
}
.scd__s.is-ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.scd__s.is-mid{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.scd__s.is-low{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.scd__u{font-size:11.5px;color:var(--faint)}
.scd__more{
  margin-left:auto;font-size:12px;color:var(--muted);
  display:inline-flex;align-items:center;gap:6px;
}
.scd__more::after{
  content:"";width:7px;height:7px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);
  transition:transform .18s ease;
}
.scores__d[open] .scd__more::after{transform:rotate(-135deg) translate(-2px,-2px)}
.scores__d[open] .scd__more{color:var(--accent)}
.scores__d .scores{margin-top:13px;border-top:0;padding-top:0}
@media (prefers-reduced-motion:reduce){
  .scores__d > summary,.scd__more::after{transition:none}
}
@media(max-width:560px){
  .scd__more{margin-left:0;width:100%;margin-top:2px}
}


/* ===== Feinschliff ======================================================
   Typografie, Tiefe, Fokus und Bewegung. Nichts hiervon veraendert, was
   gesperrt ist oder was ein Crawler bekommt. */

/* Zahlen in Tabellen und Bewertungen stehen untereinander. */
.sc__v,.scd__s,.card__rank .s,.stat b,.num,.tbl .num{font-variant-numeric:tabular-nums}

/* Ueberschriften etwas enger, Fliesstext etwas luftiger. */
h1,h2,h3{letter-spacing:-.018em;text-wrap:balance}
p{text-wrap:pretty}

/* Auswahl in Markenfarbe statt Systemblau. */
::selection{background:var(--accent);color:var(--accent-ink)}

/* Ein sichtbarer, einheitlicher Fokusring auf allem, was bedienbar ist. */
a:focus-visible,button:focus-visible,select:focus-visible,
input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:6px;
}

/* Karten bekommen Tiefe erst bei Aufmerksamkeit. */
.card{transition:transform .2s cubic-bezier(.22,.9,.28,1),
                box-shadow .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--rule-2)}
.card--top{box-shadow:var(--shadow)}

/* Der Preis am Schloss: er beantwortet die Frage, die das Schloss stellt. */
.nl__lock__p{
  margin-left:2px;padding-left:9px;
  border-left:1px solid currentColor;
  opacity:.72;font-weight:700;font-variant-numeric:tabular-nums;
}

/* Die Feineinstellung im Profil. */
.tune__more{margin:4px 0 2px;border-top:1px solid var(--rule);padding-top:12px}
.tune__more > summary{
  list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:2px;
  padding:8px 10px;margin:-8px -10px;border-radius:10px;
  transition:background .16s ease;
}
.tune__more > summary::-webkit-details-marker{display:none}
.tune__more > summary:hover{background:var(--tint-xs)}
.tune__more > summary > span:first-child{
  font-size:13px;font-weight:650;color:var(--fg);
  display:flex;align-items:center;gap:8px;
}
.tune__more > summary > span:first-child::after{
  content:"";width:7px;height:7px;margin-left:auto;
  border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .18s ease;
}
.tune__more[open] > summary > span:first-child::after{
  transform:rotate(-135deg) translate(-2px,-2px)
}
.tune__more__n{font-size:11.5px;color:var(--faint)}
.tune__more[open]{padding-bottom:4px}

/* ===== Telefon ==========================================================
   Alles hier war auf Desktopbreite geschrieben. Tippflaechen mindestens
   44px, keine waagerechte Scrollleiste, keine abgeschnittenen Zahlen. */
@media (max-width:760px){
  .card__actions{display:flex;flex-wrap:wrap;gap:9px}
  .card__actions > *{flex:1 1 auto;min-height:44px;justify-content:center}
  .btn--sm{padding:11px 15px;font-size:14px}
}
@media (max-width:560px){
  .card__facts{grid-template-columns:1fr 1fr;gap:10px 14px}
  .card__top{flex-wrap:wrap;gap:6px}
  .card__deadline{width:100%}
  /* Faktorname ueber den Balken, sonst bleiben 92px fuer "Auftragsgroesse". */
  .sc{grid-template-columns:1fr 34px;gap:3px 10px}
  .sc__n{grid-column:1/-1;font-size:11px}
  .sc__track{grid-column:1}
  .sc__v{grid-column:2}
  .sc__why{grid-column:1/-1}
  .nl__m{flex-wrap:wrap;gap:4px 10px}
  .nl__d{width:100%}
  .nl__lock{width:100%;justify-content:center;min-height:44px}
  .top__nav{display:none}
  .top__cta{padding:10px 14px;font-size:13.5px}
  .tune__more > summary{min-height:44px}
}
@media (max-width:420px){
  .card__facts{grid-template-columns:1fr}
  .card__rank{min-width:44px}
}

/* Karten treten beim Laden einmal ruhig ein, nie beim Scrollen. */
@keyframes cardIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.card{animation:cardIn .32s cubic-bezier(.22,.9,.28,1) both}
@media (prefers-reduced-motion:reduce){
  .card,.card:hover{animation:none;transform:none;transition:none}
  .tune__more > summary,.tune__more > summary > span:first-child::after{transition:none}
}


/* ===== Aufdecken, Zaehler, Blatt ========================================= */
.nl__lock{font:inherit;cursor:pointer;background:transparent}
.nl__lock.is-busy,.btn--locked.is-busy{opacity:.55;pointer-events:none}
.nl__lock__p:empty{display:none}

.top__free{
  display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px;
  border:1px solid var(--rule-2);border-radius:99px;font-size:12.5px;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.top__free b{font-size:14px;color:var(--fg);font-weight:800}
.top__free.is-empty b{color:var(--bad)}
.top__free.is-tick{animation:tick .5s cubic-bezier(.22,.9,.28,1)}
@keyframes tick{0%{transform:scale(1)}35%{transform:scale(1.12);border-color:var(--accent)}100%{transform:scale(1)}}

/* Die Aufdeckung: Unschaerfe geht in einem Zug weg, nicht als Schnitt. */
.is-revealed .nl__blur{animation:unblur .55s cubic-bezier(.22,.9,.28,1) both}
@keyframes unblur{from{filter:blur(5px);opacity:.75}to{filter:blur(0);opacity:1}}
.nl__i.is-revealed,.card.is-revealed{animation:settle .5s ease both}
@keyframes settle{0%{background:var(--accent-tint)}100%{background:transparent}}

/* Das Blatt. Ein ruhiges Modal, nichts springt. */
.sheet{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .22s ease}
.sheet.is-open{opacity:1;pointer-events:auto}
.sheet__bg{position:absolute;inset:0;background:rgba(10,10,20,.55);backdrop-filter:blur(6px)}
.sheet__p{
  position:relative;width:min(560px,100%);max-height:92vh;overflow:auto;
  background:var(--surface);color:var(--fg);border:1px solid var(--rule);
  border-radius:22px 22px 0 0;padding:26px 24px 22px;box-shadow:var(--shadow);
  transform:translateY(24px);transition:transform .26s cubic-bezier(.22,.9,.28,1);
}
.sheet.is-open .sheet__p{transform:none}
@media(min-width:640px){
  .sheet{align-items:center;padding:24px}
  .sheet__p{border-radius:22px;padding:30px 30px 24px}
}
.sheet__x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:99px;
  border:1px solid var(--rule);background:transparent;color:var(--muted);font-size:20px;cursor:pointer}
.sheet__x:hover{color:var(--fg);border-color:var(--rule-2)}
.sheet__eyebrow{margin:0 0 10px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:700}
.meter{display:flex;gap:7px;margin:0 0 14px}
.meter i{width:26px;height:6px;border-radius:99px;background:var(--bar-track);display:block}
.meter i.on{background:var(--accent)}
.sheet__h{margin:0 0 8px;font-size:clamp(22px,3vw,28px);letter-spacing:-.02em}
.sheet__t{margin:0 0 18px;color:var(--text-body);line-height:1.55}
.sheet__plans{display:grid;gap:10px}
@media(min-width:640px){.sheet__plans{grid-template-columns:1.15fr 1fr}}
.sheet__plan{
  display:grid;gap:4px;text-align:left;padding:16px 16px 14px;border-radius:14px;
  border:1px solid var(--rule-2);background:var(--surface-2);color:var(--fg);
  font:inherit;cursor:pointer;transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.sheet__plan:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow)}
.sheet__plan--best{border-color:var(--accent);background:var(--accent-tint)}
.sheet__plan__k{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:700}
.sheet__plan__v{font-size:26px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sheet__plan__v small{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:0}
.sheet__plan__d{font-size:13px;color:var(--text-dim);line-height:1.45}
.sheet__fine{margin:14px 0 0;font-size:12.5px;color:var(--faint)}
.sheet__fine a{color:var(--muted)}
body.has-sheet{overflow:hidden}

/* Suchauftraege */
.watch{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--rule)}
.watch:last-child{border-bottom:0}
.watch__m{display:block;font-size:12.5px;color:var(--faint);margin-top:2px}
.watch__x{width:32px;height:32px;border-radius:99px;border:1px solid var(--rule);
  background:transparent;color:var(--muted);cursor:pointer;font-size:18px}
.watch__x:hover{color:var(--bad);border-color:var(--bad)}

@media (prefers-reduced-motion:reduce){
  .top__free.is-tick,.is-revealed .nl__blur,.nl__i.is-revealed,.card.is-revealed{animation:none}
  .sheet,.sheet__p,.sheet__plan{transition:none}
}


/* ===== Empfehlung im hellen Thema ======================================
   Auf Limette wird aus dem Akzentschleier ein grauer Hauch, und damit sah
   die empfohlene Karte matter aus als die Alternative. Genau verkehrt. Im
   hellen Thema traegt die Empfehlung deshalb die Marke selbst. */
:root[data-theme="light"] .sheet__plan{background:#fff;border-color:var(--rule)}
:root[data-theme="light"] .sheet__plan--best{
  background:var(--bg);                 /* Limette */
  border-color:var(--fg);
  box-shadow:0 10px 30px rgba(23,23,43,.12);
}
:root[data-theme="light"] .sheet__plan--best .sheet__plan__k{color:rgba(23,23,43,.66)}
:root[data-theme="light"] .sheet__plan--best .sheet__plan__d{color:rgba(23,23,43,.78)}
:root[data-theme="light"] .meter i.on{background:var(--fg)}