/* thinkinvoice.com — Dachseite der thinkinvoice GmbH.
   Gleiches System wie die invoicetotal-Landing (IBM-Plex-Typo, Weissraum,
   rechteckige Kanten, Hell/Dunkel automatisch, KEIN CDN/Font vom Fremdserver).
   Unterschied bewusst: die Dachmarke bleibt tintenfarben; die beiden Produkte
   tragen ihr EIGENES Blau (invoicetotal #0057e7, SubEtha #0f62fe) — so bleibt
   die Mutter neutral und jede Marke erkennbar. */
:root{
  --bg:#fff; --fg:#161616; --muted:#6f6f6f; --soft:#f4f4f4; --line:#e0e0e0;
  --accent:#161616;                 /* Dachmarke: Tinte, kein eigenes Blau */
  --it:#0057e7;                     /* invoicetotal */
  --se:#0f62fe;                     /* SubEtha Studio */
  --maxw:64rem; --gutter:1.5rem;
  --font:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#161616; --fg:#f4f4f4; --muted:#a8a8a8; --soft:#262626; --line:#454545;
         --accent:#f4f4f4; --it:#4d8bff; --se:#4d8bff; }
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--font);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a{ color:var(--it); text-decoration:none; }
a:hover{ text-decoration:underline; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
.eyebrow{ font-family:var(--mono); font-size:.8rem; letter-spacing:.02em;
  text-transform:uppercase; color:var(--muted); margin:0 0 1rem; }

header{ background:var(--bg); position:sticky; top:0; z-index:10; }
.masthead{ display:flex; align-items:center; gap:2rem; height:3.5rem; }
.brand{ font-size:1.15rem; font-weight:600; letter-spacing:-.01em; color:var(--accent); }
.brand:hover{ text-decoration:none; }
.mnav{ display:flex; align-items:center; gap:1.75rem; flex:1; overflow-x:auto; }
.mnav a{ color:var(--fg); font-size:.92rem; white-space:nowrap; }
.mnav .spacer{ flex:1; }

.hero{ padding:5rem 0 3rem; }
.hero h1{ font-size:clamp(2.4rem,6vw,4rem); line-height:1.03; letter-spacing:-.03em;
  font-weight:600; margin:0 0 1.25rem; }
.hero .lead{ font-size:1.2rem; color:var(--muted); max-width:42rem; margin:0; }

section{ padding:3.5rem 0; }
section.soft{ background:var(--soft); }
h2.sec{ font-size:clamp(1.5rem,3vw,2rem); font-weight:600; letter-spacing:-.015em;
  margin:0 0 2rem; max-width:32ch; }

/* Produktkarten — je Marke ein Akzent an der Oberkante */
.cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; align-items:stretch; }
.card{ border:1px solid var(--line); border-top:3px solid var(--line);
  padding:1.75rem 1.5rem; display:flex; flex-direction:column; background:var(--bg); }
.card.it{ border-top-color:var(--it); }
.card.se{ border-top-color:var(--se); }
.card .kicker{ font-family:var(--mono); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.04em; color:var(--muted); margin:0 0 .75rem; }
.card h3{ font-size:1.5rem; font-weight:600; letter-spacing:-.02em; margin:0 0 .3rem; }
.card.it h3{ color:var(--it); }
.card.se h3{ color:var(--se); }
.card .tag{ font-weight:500; margin:0 0 .9rem; }
.card p{ color:var(--fg); margin:0 0 .9rem; }
.card ul{ list-style:none; margin:0 0 1.25rem; padding:0; font-size:.92rem; flex:1; }
.card ul li{ padding:.35rem 0 .35rem 1.4rem; position:relative; color:var(--muted); }
.card ul li::before{ content:"—"; position:absolute; left:0; }
.card .go{ margin:0; font-weight:500; }
.card.it .go a{ color:var(--it); }
.card.se .go a{ color:var(--se); }

.cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.cols h4{ font-size:1.05rem; font-weight:600; margin:0 0 .5rem; }
.cols p{ color:var(--muted); margin:0; font-size:.95rem; }

footer{ padding:3rem 0; color:var(--muted); font-size:.9rem; border-top:1px solid var(--line); }
footer strong{ color:var(--fg); }
footer a{ color:var(--fg); }
.legal{ font-size:.85rem; margin:.5rem 0 0; }

@media (max-width:52rem){
  .cards, .cols{ grid-template-columns:1fr; }
  .hero{ padding:3rem 0 2rem; }
}