/* Gemeinsames Design der Unterseiten (Leads, Freelance, Blog) im Stil der Startseite:
   warmer Hintergrund, feine Linien, abgerundete Karten, Pill-Buttons, mitlaufende Kopfzeile.
   Wird nach dem seiteneigenen <style> geladen und überschreibt dieses gezielt. */

:root{
  --bg:#f7f6f3; --surface:#ffffff; --tint:#ffffff;
  --ink:#161410; --ink-2:#4b4842; --muted:#6f6b64;
  --rule:#e6e3dc; --line:#e6e3dc; --code:#efece6; --faint:#c9c5bd;
  --r-card:18px; --r-panel:26px;
  --lift:0 14px 28px -18px rgba(0,0,0,.35);
}
html{scroll-padding-top:88px}
body{background:var(--bg)}

/* ---------- Kopfzeile: läuft mit wie auf der Startseite ---------- */
.top{position:sticky;top:0;z-index:50;transition:background .3s,box-shadow .3s}
.top__in{transition:padding .3s}
.top--solid{background:color-mix(in oklab,#f7f6f3 85%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px #e6e3dc}
.top--solid .top__in{padding-block:12px}

/* ---------- gemeinsame Bausteine ---------- */
.upbox,.cta__box{border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);padding:0 20px;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.upbox:hover,.cta__box:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.upcard,.cta__card{padding:18px 0}
.upcard:hover,.cta__card:hover{background:transparent}
.cta__in{border-top:1px solid var(--line)}
.cta__links a{border:1.5px solid var(--line);border-radius:100px;padding:9px 16px;background:var(--surface);transition:transform .18s,box-shadow .18s,border-color .18s}
.cta__links a:hover{transform:translateY(-2px);box-shadow:var(--lift);border-color:var(--acc);color:#161410}
.cta__links a:first-child{background:#16140f;border-color:#16140f;color:#fff}
.cta__links a:first-child:hover{color:#fff}

/* ---------- Leads ---------- */
.tool{border:1px solid var(--line);border-radius:var(--r-panel);background:var(--surface);padding:clamp(22px,3vw,40px);gap:clamp(24px,3vw,48px);margin-top:24px}
.tool__txt{padding:0}
.tool__img{border-left:0;padding:0}
.tool__img img{border:1px solid var(--line);border-radius:14px}
.pair,.pair--top{border:0;gap:24px;margin-top:24px}
.pair > div:first-child,.pair > div:last-child{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);padding:clamp(22px,3vw,36px)}
.free,.host,.sub,.list > div{border-top:1px solid var(--line)}
.blogx{border:1px solid color-mix(in oklab,var(--acc) 22%,var(--line));border-radius:var(--r-panel);background:color-mix(in oklab,var(--acc) 5%,var(--surface));padding:clamp(26px,4vw,44px);margin-top:24px}
.grid4{border-top:0;gap:16px}
.grid4 > div,.grid4 > div:nth-child(odd),.grid4 > div:nth-child(even),.grid4 > div:nth-last-child(-n+2){background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:26px}
.proj{border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);padding:0 24px}
.proj__row,.proj__row:last-child{border-bottom:1px solid var(--line)}
.proj__row:last-child{border-bottom:0}
.quote,.learn,blockquote{border-left-width:3px;border-radius:2px}

/* ---------- Freelance ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;max-width:none}
.tab,.tab+.tab{margin:0;border:1.5px solid var(--line);border-radius:100px;background:var(--surface);padding:12px 20px;min-height:0}
.tab[aria-selected="true"]{background:#16140f;border-color:#16140f;color:#fff}
.tab:not([aria-selected="true"]):hover{background:var(--surface);border-color:var(--ink)}
.panel{border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden}
.panel__col+.panel__col{border-left:1px solid var(--line);margin-left:0}
.sym{border-radius:8px}
.sym--minus{border:1.5px solid var(--faint)}
.box{border:1px solid var(--line);border-radius:var(--r-panel)}
.box__minus{border-top:1px solid var(--line)}
.plats{border-top:0;gap:24px}
.plat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);padding:28px}
.plat__h img{border-radius:12px}
.fee{border-top:1px solid var(--line)}
.fee:last-of-type{border-bottom:1px solid var(--line)}
.stand{border-top:0;padding-top:4px}
.nl{border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden}
.nl__btn{border-radius:100px}
.posts{border-top:1px solid var(--line)}
.post{border-bottom:1px solid var(--line)}

/* ---------- Blog-Übersicht ---------- */
.bhero{border-bottom:1px solid var(--line)}
.cat{border-bottom:1px solid var(--line)}
.card{border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s}
.card:hover{transform:translateY(-3px);box-shadow:var(--lift);border-color:color-mix(in oklab,var(--acc) 30%,var(--line))}
.card--soon,.card--soon:hover{border:1.5px dashed var(--faint);background:transparent;transform:none;box-shadow:none}

/* ---------- Artikel ---------- */
.phead{border-bottom:1px solid var(--line)}
figure img{border:1px solid var(--line);border-radius:14px}
.video{border:0;border-radius:var(--r-card);overflow:hidden}
.note,.toc{border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
th{border-bottom:1px solid var(--ink)}
td{border-bottom:1px solid var(--line)}
.tpl{border-top:1px solid var(--line)}
.tpl__row,.tpl__row:last-child{border-bottom:1px solid var(--line)}
.case{border-top:1px solid var(--line)}
.pbody .fine{border-top:1px solid var(--line)}
pre{border-radius:14px}
.pbody code{border-radius:6px}

@media (max-width:860px){
  .pair > div:first-child{border-bottom:1px solid var(--line)}
  .panel__col+.panel__col{border-left:0;border-top:1px solid var(--line)}
  .tool{padding:22px}
}

/* "Profil und Bewertungen ansehen →" in der Karte mit dem runden Foto ohne Unterstreichung */
.upcard__lk,.cta__lk{border-bottom:0}