/* ================================================================
   Lognow AI — base and component rules (layer 3)

   Load order on every page:
     1. /assets/shared/base-tokens.css   spacing, radii, layout, semantic names
     2. /assets/brand.css                palette, fonts, theme mapping
     3. /assets/site.css                 this file

   Rules shared by every page of this site: reset, nav, footer, buttons,
   hero rhythm, scroll aid, utilities. Uses tokens only — no hex values;
   a colour that is missing belongs in brand.css.
   ================================================================ */

/* ----------------------------------------------------------------
   Base styles (unchanged from original)
   ---------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
body { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.mono { font-family: var(--font-family-mono); letter-spacing: 0.02em; }
.display { font-family: var(--font-family-display); font-weight: 600; letter-spacing: -0.02em; line-height: 0.95; }
.up { text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; }

/* Closing CTA — shared by the two homepages and the two approach pages.
   Identical markup on all four, so the rules live here rather than in each
   page's own <style>. */
.cta-block {
  border-top: 1px solid var(--color-border);
  padding: 120px 0 40px;
}
.cta-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end;
}
.cta-block h2 {
  /* Same treatment as .sc-title, so the closing CTA and the section heading
     that leads to it read at one level. */
  font-family: var(--font-family-display); font-weight: 500;
  font-size: clamp(36px, 4.8vw, 60px); line-height: 1.05; letter-spacing: -0.025em;
  max-width: 14ch;
}
.cta-block h2 em { color: var(--color-accent); font-weight: 600; font-style: normal; }
.cta-block .sub { color: var(--color-text-muted); font-size: 16px; max-width: 42ch; margin-bottom: 24px; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
/* Phones: .btn is nowrap, and "Opportunity Assessment buchen" is wider than a
   280px column — the whole CTA grid grew and the page scrolled sideways. Full
   width and wrapping, as the story pages already do. */
@media (max-width: 480px) {
  .cta-actions .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
}
/* Phones: German compounds in large headings are wider than a 280px column
   ("Geschäftsbereiche.", "Maßgeschneiderte", "Innovationsfreude" at 36–40px)
   and pushed whole pages sideways. Hyphenate there — long compounds only, so
   ordinary words stay whole. Buttons may wrap too, instead of forcing their
   column wider. */
@media (max-width: 480px) {
  main h1, main h2, main h3 { hyphens: auto; hyphenate-limit-chars: 14 5 5; overflow-wrap: anywhere; }
  main .btn { white-space: normal; }
}
@media (max-width: 800px) { .cta-grid { grid-template-columns: 1fr; gap: 32px; } }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) { .container { padding: 0 20px; } }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: var(--radius-full);
  font-family: var(--font-family-base); font-weight: 500; font-size: 14px;
  letter-spacing: 0.01em; transition: all 0.2s ease;
  border: 1px solid transparent; white-space: nowrap;
}
.btn-primary {
  background: var(--color-accent); color: var(--color-navy-950);
  box-shadow: 0 0 0 0 var(--color-accent-soft);
}
.btn-primary:hover {
  box-shadow: 0 0 0 8px var(--color-accent-soft);
  transform: translateY(-1px);
}
.btn-ghost {
  border-color: var(--color-border-strong); color: var(--color-text);
}
.btn-ghost:hover { background: var(--color-bg-hover); }
.btn .arr { transition: transform .2s ease; }
.btn:hover .arr { transform: translateX(3px); }

/* Nav */
/* Placeholder keeps the space before the bar exists. */
#nav-mount { min-height: var(--nav-height); }

.nav {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(16px);
  background: var(--color-bg-topbar);
  border-bottom: 1px solid var(--color-border);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px; max-width: var(--max-width); margin: 0 auto;
  /* Minus the 1px border-bottom on .nav, so the bar totals --nav-height. */
  min-height: calc(var(--nav-height) - 1px);
}
/* Logo and controls never shrink — their content is nowrap, so flex would push
   it out of the bar instead of narrowing it. All the give sits in .nav-links. */
.brand { display: flex; align-items: center; gap: 8px; flex: none; }
.brand-logo { height: 28px; width: auto; display: block; }
.brand-logo-on-light { display: none; }
:root[data-theme="light"] .brand-logo-on-dark { display: none; }
:root[data-theme="light"] .brand-logo-on-light { display: block; }
.brand-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-accent); box-shadow: 0 0 16px var(--color-accent-soft);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.7; }
}
.nav-links {
  display: flex; align-items: center; gap: 28px;
  /* Seven items plus the CTA no longer fit at every width. This is the only
     flexible item in the bar: it takes what is left and scrolls if that is not
     enough, rather than pushing the page sideways. */
  flex: 1 1 auto; min-width: 0; overflow-x: auto;
  justify-content: center;
  scrollbar-width: none; -ms-overflow-style: none;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
  font-size: 14px; color: var(--color-text-muted); transition: color .2s;
  position: relative; white-space: nowrap;
}
.nav-links a:hover { color: var(--color-text); }
.nav-links a.active { color: var(--color-text); }
.nav-links a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; background: var(--color-accent);
}
.nav-right { display: flex; align-items: center; gap: 12px; flex: none; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-full);
  font-family: var(--font-family-mono); font-size: 11px; color: var(--color-text-muted);
  cursor: pointer; transition: all .2s;
}
.chip:hover { background: var(--color-bg-hover); color: var(--color-text); }
.chip.active { color: var(--color-accent); border-color: var(--color-accent); }
.chip-icon {
  width: 36px; height: 36px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 4px;
}
.chip-icon .icon-theme-light { display: none; }
:root[data-theme="light"] .chip-icon .icon-theme-dark { display: none; }
:root[data-theme="light"] .chip-icon .icon-theme-light { display: inline-block; }
/* Tighten before anything has to scroll. */
@media (max-width: 1280px) {
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 13px; }
}
/* The nav CTA is the widest item in the bar and it duplicates the Kontakt
   link right beside it, so it is the first thing to go. Every page still ends
   in its own CTA block. */
@media (max-width: 1180px) {
  .nav-right .btn-primary { display: none; }
}
@media (max-width: 1040px) {
  .nav-inner { padding: 18px 20px; }
  .nav-links { gap: 14px; }
  .nav-right { gap: 8px; }
}
/* [PLACEHOLDER: there is no mobile menu — below 900px the navigation is hidden
   entirely and pages are only reachable via the footer. Needs a decision.] */
@media (max-width: 900px) { .nav-links { display: none; } }

/* One rhythm above every page headline.
   Each page used to set its own hero padding and its own gap under the eyebrow,
   and three pages had no gap at all, so the headline landed at a different
   height on each. Moving between pages shifted the content visibly. Both
   values come from the spacing scale and are defined only here. */
.page-hero, .hero, .story-hero, .legal-hero, .err { padding-top: var(--space-9); }
.page-hero .tag,
.story-hero .tag,
.legal-hero .tag,
.err .tag,
.hero-pre { margin-bottom: var(--space-6); }

/* Scroll affordance — chip bottom centre, position rail right edge.
   Injected by partials.js, driven by app.js. States: off · down · rail · top. */
.scroll-aid[data-state="off"] { display: none; }

.scroll-rail {
  position: fixed; top: 50%; right: 10px; transform: translateY(-50%);
  width: 2px; height: 22vh; min-height: 90px;
  background: var(--color-border); border-radius: var(--radius-full);
  z-index: 40; pointer-events: none;
  opacity: 0; transition: opacity .3s ease;
}
.scroll-rail-fill {
  display: block; width: 100%; height: 100%;
  background: var(--color-accent); border-radius: var(--radius-full);
  transform-origin: top; transform: scaleY(0);
}
.scroll-aid[data-state="rail"] .scroll-rail,
.scroll-aid[data-state="top"] .scroll-rail { opacity: 1; }

/* Deliberately prominent: in the muted grey it read as chrome and was missed.
   Accent outline, accent text and a soft halo make it the one thing at the
   bottom edge that asks to be noticed. */
.scroll-hint {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: 11px 22px;
  border: 1px solid var(--color-accent); border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--color-accent) 12%, var(--color-bg));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 0 0 6px var(--color-accent-soft), 0 8px 24px -8px var(--color-accent);
  font-family: var(--font-family-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-accent);
  cursor: pointer; z-index: 41;
  transition: opacity .35s ease, transform .35s ease, background-color .2s ease, box-shadow .2s ease;
}
.scroll-hint:hover {
  background: var(--color-accent);
  color: var(--color-navy-950);
  box-shadow: 0 0 0 8px var(--color-accent-soft), 0 10px 28px -8px var(--color-accent);
}
.scroll-hint:hover .scroll-hint-arrow { color: var(--color-navy-950); }
.scroll-hint-arrow { color: var(--color-accent); font-size: 15px; line-height: 1; }

/* Hidden but still laid out, so showing it does not shift anything. */
.scroll-aid[data-state="rail"] .scroll-hint {
  opacity: 0; transform: translateX(-50%) translateY(12px); pointer-events: none;
}
.scroll-aid[data-state="down"] .scroll-hint,
.scroll-aid[data-state="top"] .scroll-hint { opacity: 1; transform: translateX(-50%); }

/* Only the "scroll down" state moves; the top button is a real control and
   should sit still. The whole chip breathes and the arrow travels further than
   before — the previous 3px nudge on the arrow alone was too quiet to catch. */
@media (prefers-reduced-motion: no-preference) {
  .scroll-aid[data-state="down"] .scroll-hint { animation: scroll-breathe 2.6s ease-in-out infinite; }
  .scroll-aid[data-state="down"] .scroll-hint-arrow { animation: scroll-nudge 1.4s ease-in-out infinite; }
}
.scroll-hint:hover { animation: none !important; }
@keyframes scroll-nudge {
  0%, 100% { transform: translateY(-2px); opacity: 0.75; }
  50%      { transform: translateY(4px); opacity: 1; }
}
@keyframes scroll-breathe {
  0%, 100% { box-shadow: 0 0 0 6px var(--color-accent-soft), 0 8px 24px -8px var(--color-accent); }
  50%      { box-shadow: 0 0 0 11px transparent, 0 8px 24px -8px var(--color-accent); }
}

/* On a phone the rail crowds the edge and the chip covers content. */
@media (max-width: 640px) {
  .scroll-rail { display: none; }
  /* Smaller, but not so small that it stops registering — the halo is what
     makes it visible, so it stays. */
  .scroll-hint { bottom: 20px; padding: 9px 18px; font-size: 11px; letter-spacing: 0.14em; }
}

/* Footer */
.foot {
  border-top: 1px solid var(--color-border);
  padding: 64px 0 32px;
  margin-top: 120px;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.foot h5 {
  font-family: var(--font-family-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--color-text-subtle); margin-bottom: 16px; font-weight: 500;
}
.foot ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.foot a { color: var(--color-text-muted); font-size: 14px; }
.foot a:hover { color: var(--color-accent); }
.foot-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px; border-top: 1px solid var(--color-border);
  font-family: var(--font-family-mono); font-size: 11px; color: var(--color-text-subtle); gap: 16px;
  flex-wrap: wrap;
}
/* Imprint and privacy — reachable from every page, as they have to be.
   Grouped to the right edge: the scroll chip is fixed to the bottom centre,
   and in the middle of this row it covered them. */
.foot-end {
  display: flex; align-items: center; gap: 24px;
  margin-left: auto; flex-wrap: wrap; justify-content: flex-end;
}
.foot-legal { display: flex; gap: 20px; }
.foot-legal a { color: var(--color-text-muted); }
.foot-legal a:hover { color: var(--color-accent); }
/* Keep the last row clear of the chip when the page is scrolled to the end. */
.foot-bottom { padding-bottom: 44px; }
@media (max-width: 560px) {
  .foot-end { width: 100%; justify-content: flex-start; gap: 16px; }
}
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }

/* Utility */
/* Eyebrow label above a page headline.
   The casing is set here, not in the text: the older pages wrote their labels
   in capitals by hand while newer ones take them from i18n.json and the story
   frontmatter, where shouting would be wrong. Tracking matches the .up utility,
   which is what every other uppercase mono label on the site uses. */
.tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  font-family: var(--font-family-mono); font-size: 11px; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.12em;
}
.tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }

.section { padding: 96px 0; position: relative; }
.section-head {
  display: grid; grid-template-columns: 180px 1fr; gap: 32px;
  margin-bottom: 56px; align-items: start;
}
.section-head .num { font-family: var(--font-family-mono); font-size: 12px; color: var(--color-text-subtle); }
.section-head h2 {
  font-family: var(--font-family-display); font-weight: 400;
  font-size: clamp(36px, 5vw, 64px); line-height: 1;
  position: relative;
  top: -1px; letter-spacing: -0.02em;
}
.section-head .lede { color: var(--color-text-muted); max-width: 58ch; font-size: 16px; margin-top: 16px; }
@media (max-width: 760px) {
  .section-head { grid-template-columns: 1fr; gap: 16px; }
  .section { padding: 64px 0; }
}

/* Grid motif */
.bg-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--color-border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-border) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  opacity: 0.6;
}

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }

.hl { color: var(--color-accent); }

/* Two Pillars */
.two-pillars {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  margin-bottom: 32px; position: relative;
}
.two-pillars::before {
  content: "";
  position: absolute; top: 12%; bottom: 12%;
  left: 50%; transform: translateX(-50%);
  width: 1px; border-left: 1px dashed var(--color-border-strong);
  pointer-events: none;
}
@media (max-width: 900px) { .two-pillars::before { display: none; } }
.tp {
  display: flex; flex-direction: column; gap: 18px;
  padding: 40px; border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-elevated);
  transition: all .25s; position: relative; overflow: hidden;
}
.tp::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 100% 0%, var(--color-accent-soft) 0, transparent 55%);
  opacity: .5;
}
.tp-ai { background: linear-gradient(160deg, rgba(93,167,254,0.06), transparent 55%), var(--color-bg-elevated); }
.tp:hover { border-color: var(--color-accent); transform: translateY(-3px); }
.tp-top { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 1; }
.tp-badge {
  display: inline-flex; padding: 6px 12px; border-radius: var(--radius-sm);
  background: var(--color-accent); color: var(--color-navy-950);
  font-family: var(--font-family-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.14em;
}
.tp-num { font-family: var(--font-family-mono); font-size: 11px; color: var(--color-text-subtle); letter-spacing: 0.14em; }
.tp-title {
  font-family: var(--font-family-display); font-weight: 400;
  font-size: clamp(28px, 3vw, 40px); line-height: 1.05; letter-spacing: -0.02em;
  position: relative; z-index: 1;
}
.tp-lede { color: var(--color-text-muted); font-size: 15px; line-height: 1.55; position: relative; z-index: 1; }
.tp-list {
  list-style: none; display: flex; flex-direction: column; gap: 10px;
  padding-top: 16px; border-top: 1px solid var(--color-border); position: relative; z-index: 1;
}
.tp-list li {
  display: grid; grid-template-columns: 110px 1fr; gap: 14px;
  font-size: 13px; color: var(--color-text-muted); align-items: baseline;
}
.tp-list li b {
  font-family: var(--font-family-mono); font-weight: 500; font-size: 12px;
  letter-spacing: 0.08em; color: var(--color-accent);
}
.tp-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap; margin-top: auto;
  padding-top: 20px; border-top: 1px solid var(--color-border);
  position: relative; z-index: 1;
}
.tp-tagline { font-family: var(--font-family-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--color-text-subtle); }
.tp-cta { font-family: var(--font-family-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--color-accent); position: relative; z-index: 1; }

.biz-sep {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 24px; padding: 32px 0 8px;
}
.biz-sep-rule { height: 1px; background: var(--color-border-strong); }
.biz-sep-note {
  font-family: var(--font-family-mono); font-size: 12px;
  letter-spacing: 0.04em; color: var(--color-text-subtle);
  text-align: center; max-width: 72ch; line-height: 1.55;
}

.intersect {
  display: grid; grid-template-columns: 180px 1fr; gap: 32px;
  padding: 32px 40px; border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg); align-items: center;
}
.intersect-label {
  font-family: var(--font-family-display); font-weight: 400;
  font-size: 40px; letter-spacing: -0.02em;
  background: linear-gradient(90deg, var(--color-accent), var(--color-blue-600));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.intersect-text h4 { font-size: 20px; font-weight: 500; margin-bottom: 8px; line-height: 1.3; }
.intersect-text p { color: var(--color-text-muted); font-size: 14px; line-height: 1.55; max-width: 72ch; }

@media (max-width: 900px) {
  .two-pillars { grid-template-columns: 1fr; }
  .intersect { grid-template-columns: 1fr; gap: 12px; padding: 24px; }
  .tp { padding: 28px; }
  .tp-list li { grid-template-columns: 90px 1fr; }
}

/* Logo AI suffix */
.brand { display: flex; align-items: center; }
.brand-ai {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1em;
  color: var(--accent);
  line-height: 1;
  position: relative;
  top: -1px;
  margin-left: -12px;
}