/* ============================================================================
   BRUECKE: alte Seiten auf das neue Design.

   Die Website hat zwei Stylesheets. `site.css` traegt das neue Design (Shop-
   Seiten), `base.css` das alte (Konto, Anmeldung, Blog, Rechtsseiten). Sie
   benutzen fast durchgehend ANDERE NAMEN fuer dieselbe Sache — `--text` gegen
   `--ink`, `--accent` gegen `--acc`, `--muted` gegen `--ink2` — und base.css
   ist dunkel-zuerst, site.css hell-zuerst. Ein Suchen-und-Ersetzen haette
   entweder die Farben oder die Klassen zerlegt.

   Diese Datei wird NACH site.css geladen und uebersetzt: sie fuellt die alten
   Variablennamen mit den neuen Werten und ergaenzt die wenigen Klassen, die
   es nur in base.css gab. Die alten Seiten behalten damit ihr Markup und
   bekommen trotzdem Schrift, Farben, Rundungen und Glas des neuen Designs.

   base.css wird auf diesen Seiten NICHT mehr geladen.
   ========================================================================== */

:root {
  /* --- Schrift ------------------------------------------------------- */
  --font-ui:    var(--font);
  --font-body:  var(--font);
  --font-brand: var(--font);

  /* --- Flaechen ------------------------------------------------------ */
  --bg:   var(--ground);
  --bg-1: var(--surface);
  --bg-2: var(--glass3);
  --bg-3: var(--glass2);
  --card: var(--glass3);

  /* --- Linien -------------------------------------------------------- */
  --line-strong: var(--cardLine);

  /* --- Text ---------------------------------------------------------- */
  --text:       var(--ink);
  --text-dim:   var(--ink2);
  --text-faint: var(--ink3);
  --muted:      var(--ink2);

  /* --- Akzent -------------------------------------------------------- */
  --accent:      var(--acc);
  --accent-hi:   var(--accSoft, var(--acc));
  --accent-lo:   var(--accDeep, var(--acc));
  --accent-2:    var(--acc);
  --accent-line: var(--accLine);
  /* ⚠️ NICHT --accSoft nehmen: das ist in site.css ein kraeftiger Ton fuer
     Verlaeufe (#7ea6f8), keine Flaeche. Als Kartenhintergrund gab das einen
     knallblauen Kasten. Hier braucht es eine sehr leichte Toenung. */
  --accent-soft:   rgb(from var(--acc) r g b / .13);
  --accent-softer: rgb(from var(--acc) r g b / .07);
  --accent-glow: var(--accGlow);
  --shadow-accent: 0 8px 18px -8px var(--accGlow);

  /* --- Status -------------------------------------------------------- */
  --warn:        #c8891f;
  --shield:      var(--ok);
  --shield-soft: var(--okBg);

  /* --- Form ---------------------------------------------------------- */
  --radius: var(--r);
}

/* Dunkelmodus: site.css schaltet seine eigenen Tokens um, die Uebersetzung
   muss nur die zwei Flaechen nachziehen, die hier fest stehen. */
/* 2026-10-02: --bg and --bg-1 follow --ground/--surface, which site.css switches itself —
   nothing to repeat here. (js/theme.js sets data-theme on every page before it paints.) */
:root[data-theme="dark"] {
  --bg:   var(--ground);
  --bg-1: var(--surface);
}

/* ---------------------------------------------------------------------------
   ⚠️ NAMENSKOLLISION — der eine Fall, der wirklich weh tut.

   `.landing` heisst in site.css ein kleiner Textkasten (max-width 440px,
   Rahmen, Polsterung). Auf den alten Seiten ist `landing` die Klasse am
   <body>. Ohne dieses Zurechtruecken quetscht sich die komplette Seite auf
   440 px — gemessen an /terms: body 440 px breit statt 1280.

   Die vier anderen gemeinsamen Namen (btn, btn-big, btn-primary, card) sind
   ABSICHT: dort sollen die alten Seiten genau das neue Aussehen bekommen.
   --------------------------------------------------------------------------- */
body.landing {
  max-width: none;
  width: auto;
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  /* Verlauf kommt aus site.css `body::before` (eigene feststehende Ebene). Hier stand
     `var(--wall) fixed` — genau das liess /cancel, /terms & Co. beim Scrollen ruckeln. */
  background: transparent;
  font: 400 16px/1.6 var(--font);
}
body.landing > b { font-weight: 600; }

/* ---------------------------------------------------------------------------
   Klassen, die es nur in base.css gab. Bewusst knapp: alles andere kommt aus
   site.css, damit die alten Seiten nicht wieder ein eigenes Aussehen bekommen.
   --------------------------------------------------------------------------- */

/* Kleiner Knopf — in site.css gibt es nur die normale und die grosse Groesse. */
.btn-small {
  padding: 7px 12px;
  font-size: 13px;
  border-radius: var(--r-sm);
  height: auto;
}

/* Knopf ohne Flaeche, fuer Nebenwege. */
.btn-ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--ink2);
}
.btn-ghost:hover { background: var(--glass3); color: var(--ink); }

/* Alles, was loescht oder kuendigt. */
.btn-danger, .a-btn-danger {
  color: #fff;
  background: var(--bad);
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}
/* ⚠️ Den Hintergrund MUSS diese Regel selbst setzen. `site.css` hat
   `.btn:hover { background: var(--glassHov) }` — gleich spezifisch, also
   gewinnt beim Hintergrund, was NICHT ueberschrieben wird. Ergebnis war
   weisse Schrift auf hellem Grund: der Knopf verschwand beim Ueberfahren
   (gemessen an „Delete my account", „Cancel subscription", „Withdraw"). */
.btn-danger:hover, .a-btn-danger:hover,
.btn-danger:focus-visible, .a-btn-danger:focus-visible {
  background: var(--bad);
  filter: brightness(1.08);
  color: #fff;
  border-color: transparent;
}

/* Der rote Eintrag in der Seitenleiste soll beim Ueberfahren rot BLEIBEN —
   `.a-side a:hover` haette ihn auf die normale Textfarbe gezogen. */
.a-side a.a-side-danger:hover { color: var(--bad); background: rgb(from var(--bad) r g b / .10); }

/* ---------------------------------------------------------------------------
   UNTERSTREICHUNGEN. `site.css` unterstreicht JEDEN Link beim Ueberfahren
   (`a:hover { text-decoration: underline }`). Auf den neuen Seiten ist das kein
   Problem, weil deren Bausteine (.nav-links, .brand, .btn) es selbst wieder
   abschalten. Die alten Seiten haben diese Klassen nicht — dort bekam jede
   Kachel, jede Karte und jeder Knopf beim Ueberfahren einen dicken Strich.
   Unterstrichen wird nur noch, was wirklich ein Textlink ist.
   --------------------------------------------------------------------------- */
/* ⚠️ Nicht mehr Klassennamen aufzaehlen — genau daran ist es gescheitert:
   `.blog-card` fehlte in der Liste, und jede Guide-Karte war beim Ueberfahren
   komplett unterstrichen, Ueberschrift samt Beschreibungstext.

   Die Regel fragt jetzt nach der FORM statt nach dem Namen: ein Link, der eine
   Ueberschrift, einen Absatz oder eine Liste enthaelt, ist eine Kachel und kein
   Textlink. Das deckt auch Karten ab, die es heute noch nicht gibt. */
a:hover:has(h1, h2, h3, h4, p, ul, li, img, svg) { text-decoration: none; }
a:hover > h1, a:hover > h2, a:hover > h3, a:hover > h4,
a:hover > p, a:hover > span, a:hover > div { text-decoration: none; }

/* Dazu die bekannten Bausteine — als Rueckfall fuer Browser ohne :has(). */
.blog-card:hover, .blog-card:hover *, .l-nav a:hover, .l-brand:hover, .l-footer a:hover,
.l-card:hover, .g-card:hover, .btn:hover, .icon-btn:hover, .brand:hover,
.a-side a:hover, .a-nav-mid a:hover, .a-prod:hover, .a-prod:hover *,
.l-nav-back:hover, .l-social-btn:hover, .l-theme-btn:hover,
a.card:hover, a[class*="-card"]:hover { text-decoration: none; }

/* Textlinks im Fliesstext behalten die Unterstreichung — aber duenn, nicht
   als Balken. */
.legal-wrap a:hover, .l-prose a:hover, .g-prose a:hover, article a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Gruppenkopf im Guide-Center: je Produkt ein Abschnitt, erkennbar an der
   Kennfarbe des Produkts. */
.blog-group { display: flex; align-items: center; gap: 10px; margin: 42px 0 4px; font-size: 20px; }
.blog-group:first-of-type { margin-top: 26px; }
.blog-group-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.blog-group-atom   { background: #4A7DFF; }
.blog-group-scribe { background: #8b3ede; }
.blog-group-sub { margin: 0 0 16px; color: var(--ink2); font-size: 14px; }
/* Der Kasten am Ende jedes Guides. Stand bisher nur im <style> von blog.html — in den
   Artikeln selbst klebte die Ueberschrift ohne Rahmen und ohne Abstand am letzten Absatz. */
/* „Weiterlesen" am Artikelende — verwandte Anleitungen. */
.weiter { margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--line); }
.weiter h2 { font-size: 17px; margin: 0 0 12px; }
.weiter ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.weiter li a { display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg-1); color: var(--text); font-size: 14.5px; line-height: 1.45; }
.weiter li a:hover { border-color: var(--accent-line); text-decoration: none; }
.blog-cta { margin-top: 36px; padding: 22px; border: 1px solid var(--line-strong); border-radius: 14px;
  background: var(--bg-1); text-align: center; }
.blog-cta .btn + .btn { margin-left: 10px; }
.blog-cta-scribe { --acc: #8b3ede; --accFill: linear-gradient(158deg, #9f6ce4, #7200c6);
                   --accLine: rgb(139 62 222 / .4); --accGlow: rgb(139 62 222 / .9); }
/* Handy: beide Knoepfe volle Breite, Text mittig. `display:block` allein hob die
   Zentrierung von .btn (inline-flex) auf — der Text stand links im breiten Knopf. */
@media (max-width: 520px) {
  .blog-cta .btn { display: flex; width: 100%; justify-content: center; }
  .blog-cta .btn + .btn { margin: 10px 0 0; }
}

/* ---- Blog: Vergleichsseiten (2026-10-12) ------------------------------------
   Tabellen als ECHTE <table> (KI-Suchmaschinen und Vorleser lesen sie), in einem
   Rahmen, der auf dem Handy IN SICH seitwaerts rollt — die Seite selbst rollt nie
   seitwaerts. `.blog-t-breit` haelt vielspaltige Tabellen lesbar breit, statt
   sieben Spalten in 340 px zu quetschen. Die eigene Zeile (`tr.uns`) ist nur
   leicht getoent: es bleibt ein Vergleich, kein Werbebanner. */
.blog-tw { margin: 18px 0 28px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-1);
  overflow-x: auto; -webkit-overflow-scrolling: touch; }
.blog-t { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.blog-t-breit { min-width: 820px; }
/* Am Rechner darf die breite Tabelle ueber die Textspalte (760 px) hinausragen — sieben Spalten
   in 720 px rollten sonst auch dort seitwaerts. */
@media (min-width: 1120px) { .blog-tw-breit { margin-left: -150px; margin-right: -150px; } }
.blog-t th, .blog-t td { padding: 11px 14px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line); color: var(--ink2); }
.blog-t thead th { font: 600 12.5px/1.35 var(--font); letter-spacing: .02em; color: var(--ink); vertical-align: bottom; }
.blog-t tbody th { font-weight: 600; color: var(--ink); }
.blog-t tbody tr:last-child > * { border-bottom: 0; }
.blog-t td b, .blog-t td strong { color: var(--ink); font-weight: 600; }
.blog-t tr.uns > * { background: rgb(139 62 222 / .07); }
.blog-t .nr { width: 1%; white-space: nowrap; color: var(--ink3); font-variant-numeric: tabular-nums; }
/* „Short answer" ganz oben: das, was eine Suchmaschine oder ein eiliger Leser mitnimmt. */
.blog-kurz { margin: 0 0 14px; padding: 16px 18px; border: 1px solid var(--line-strong); border-left: 3px solid #8b3ede;
  border-radius: 12px; background: var(--bg-1); }
.legal-wrap .blog-kurz p { margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.65; }
/* Offenlegung („We make atomAI Scribe") — gut lesbar, aber leiser als der Text. */
.legal-wrap .blog-offen { margin: 0 0 30px; font-size: 13.5px; line-height: 1.6; color: var(--ink3); }
.legal-wrap .blog-offen b { color: var(--ink2); }
.legal-wrap .blog-quellen, .legal-wrap .blog-marken { font-size: 13px; line-height: 1.65; color: var(--ink3); }
.legal-wrap .blog-quellen a { word-break: break-word; }
.legal-wrap .blog-weiter { margin: 14px 0 0; }
@media (max-width: 520px) {
  .blog-t { font-size: 13.5px; }
  .blog-t th, .blog-t td { padding: 10px 12px; }
}

/* ---------------------------------------------------------------------------
   Aus landing.css uebernommen. Die Blog- und Rechtsseiten brauchten dort nur
   noch diese Handvoll Klassen — dafuer 54 KB Stylesheet zu laden (und den
   Browser 54 KB Regeln gegen jedes Element pruefen zu lassen) kostet beim
   Scrollen mehr als es bringt. base.css brauchten sie gar nicht mehr.
   --------------------------------------------------------------------------- */
/* ---------------- FOOTER ---------------- */ .l-footer { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; padding: 24px 5vw; border-top: 1px solid var(--line); color: var(--text-dim); font-size: 13px; }
.l-footer .l-brand { font-family: var(--font-brand); font-weight: 700; gap: 7px; }
.l-footer-links { display: flex; gap: 18px; flex-wrap: wrap; min-width: 0; }
.l-footer-links a { color: var(--text-dim); }
.l-footer-links a:hover { color: var(--text); }
.l-footer-note { margin-left: auto; color: var(--text-faint); font-size: 12px; }
.legal-wrap .legal-meta { color: var(--text-faint); font-size: 12.5px; margin-bottom: 34px; }
.l-footer .l-logo-img { height: 22px; }
/* ---- Blog: "what the app does / what you do" --------------------------------- The guides used to read like a manual workflow with the app as a footnote, which both undersold it and made the job look hard. This split says the division of labour before the reader has to parse a sentence. */ .blog-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 26px 0 34px; }
.blog-half { border: 1px solid var(--line-strong); border-radius: 14px; padding: 18px 20px; background: var(--bg-1); }
.blog-half:first-child { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong)); }
.blog-half h3 { margin: 0 0 10px; font-size: 15px; letter-spacing: .02em; }
.blog-half:first-child h3 { color: var(--accent); }
.blog-half ul { margin: 0; padding-left: 18px; }
.blog-half li { margin: 0 0 6px; color: var(--text-dim); font-size: 14.5px; line-height: 1.5; }
.blog-half-note { margin: 12px 0 0; font-size: 12.5px; color: var(--text-faint); }

/* ⚠️ Diese beiden standen in landing.css INNERHALB einer @media-Abfrage. Beim
   Herauskopieren sind sie ohne ihre Bedingung gelandet und galten damit auf
   jedem Bildschirm — der zweispaltige Block war ueberall einspaltig (gemessen:
   grid-template-columns 632px statt zwei Spalten). */
@media (max-width: 720px) { .blog-split { grid-template-columns: 1fr; } }
@media (max-width: 980px) { .l-footer-note { margin-left: 0; } }

/* Beschriftung links in einer Zeile, Wert rechts. */
.k { color: var(--ink2); font-size: 13.5px; }
.dim { color: var(--ink3); }

/* Eingabefelder: base.css hatte eigene Regeln, site.css kennt kaum Formulare. */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], select, textarea {
  font: inherit;
  color: var(--ink);
  background: var(--glass3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 11px;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="number"]:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accLine);
  box-shadow: 0 0 0 3px var(--accRing);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--acc); }

/* ---------------------------------------------------------------------------
   2026-10-02 · NEW DRESS for the pages that still carry the old markup
   (legal pages, cancel, the guides, sign-in, account). Their bar, text column
   and footer are landing.css classes; this block puts them in the same clothes
   as .nav / .foot in site.css, so every page of the site looks like one site.
   --------------------------------------------------------------------------- */
.l-nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 18px;
  width: auto; height: 64px; margin: 0;
  padding: 0 max(20px, calc((100% - 1180px) / 2));
  background: rgb(from var(--ground) r g b / .82);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none;
}
.l-brand { gap: 10px; color: var(--ink); }
.l-brand-name { font: 600 19px/1 var(--brand); letter-spacing: -.012em; }
.l-logo-img { height: 28px; }
.l-nav-right { margin-left: auto; }
.l-nav-links a { font: 450 14.5px/1 var(--font); color: var(--ink2); }
.l-nav-links a:hover { color: var(--ink); }

.legal-wrap { max-width: 760px; padding: clamp(40px, 6vw, 76px) 20px 96px; }
.legal-wrap h1 { font-size: clamp(34px, 5vw, 54px); line-height: 1.03; margin-bottom: 12px; }
/* clauses are read, not admired: sans, as before — only the page title is display type */
.legal-wrap h2 { font: 600 19px/1.3 var(--font); letter-spacing: -.01em; margin: 40px 0 10px; }
.legal-wrap h3 { font: 600 15.5px/1.35 var(--font); letter-spacing: 0; margin: 24px 0 8px; }
.legal-wrap p, .legal-wrap li { color: var(--ink2); font-size: 15px; line-height: 1.72; }
.legal-wrap b, .legal-wrap strong { color: var(--ink); font-weight: 600; }
.legal-wrap .legal-meta { color: var(--ink3); font-size: 13px; }
.legal-nav { gap: 6px 22px; margin-bottom: 44px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.legal-nav a { font: 500 12.5px/1.3 var(--brand); letter-spacing: .06em; color: var(--ink3); }
.legal-nav a.active, .legal-nav a:hover { color: var(--ink); }

.l-footer { gap: 14px 26px; padding: 30px max(20px, calc((100% - 1180px) / 2)) 36px; border-top: 1px solid var(--line);
  background: var(--surface); color: var(--ink2); font-size: 13px; }
.l-footer-links a { color: var(--ink2); }
.l-footer-links a:hover { color: var(--ink); }
.l-footer-note { color: var(--ink3); font-size: 12.5px; }

/* headings of the account, sign-in and guides pages: the page title in the serif, the
   small card titles in sans — a 15px serif reads as a mistake, not as a choice */
.a-main h1 { font-size: clamp(30px, 3.4vw, 40px); line-height: 1.05; letter-spacing: -.026em; }
.a-card h2 { font: 600 15.5px/1.3 var(--font); letter-spacing: -.005em; }
.login-card h1 { font-size: 30px; line-height: 1.1; margin: 6px 0 8px; }
.blog-card h2 { font-size: 23px; line-height: 1.15; letter-spacing: -.02em; }
.blog-tag { font-family: var(--brand); font-weight: 500; letter-spacing: .12em; color: var(--accInk); }