/* Layout and rhythm for the business-facing pages.
   Colour, type scale and buttons come from the tokens in base.css; this file
   is composition only and defines no colours of its own except inside
   .story-doc, the paper document /services builds its journey in. */

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 24px); }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* German compounds routinely outrun a phone column: "Datenschutzerklärung" as
   an h1 measured 305px inside a 222px box at 320px wide, and pushed the whole
   page into horizontal scroll. <html lang> is set on every page, so the
   browser hyphenates at real German break points instead of chopping
   mid-syllable the way overflow-wrap does; overflow-wrap stays underneath as
   the backstop for anything with no legal break point at all, such as a URL. */
@media (max-width: 768px) {
  h1, h2, h3, h4, p, li, dd, dt, figcaption {
    hyphens: auto;
    overflow-wrap: break-word;
  }
}
a, button, summary { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--clr-accent); color: var(--clr-bg); }

.site-footer { background: var(--clr-surface-1); }
.site-nav-link:focus-visible { outline: 3px solid var(--clr-accent); outline-offset: 5px; }
.lang-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 6px; }
.lang-toggle { gap: 0; }

.wrap { width: min(100% - 64px, 1136px); margin-inline: auto; }
.section-space { padding-block: 88px; }

/* One label style, used for every eyebrow on the site. Monospace is the
   accent here — it no longer runs through the headings. */
.eyebrow, .offer-label, .service-deliverables-label {
  font-family: var(--ff-label);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--clr-accent-text);
  margin-bottom: 16px;
}

.section-intro { max-width: 660px; margin-bottom: 44px; }
.section-intro h2, .consultation-band h2, .process-band h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -.025em;
}
.section-intro > p:not(.eyebrow), .consultation-band p:not(.eyebrow) {
  color: var(--clr-text-muted); font-size: 1.05rem; line-height: 1.65; margin-top: 14px;
}

.text-link {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  font-family: var(--ff-label); font-size: .85rem; font-weight: 600; letter-spacing: .04em;
  color: var(--clr-accent-text);
  text-decoration: underline; text-decoration-color: var(--clr-accent-a40); text-underline-offset: 5px;
}
.text-link:hover { color: var(--clr-accent); text-decoration-color: var(--clr-accent); }
.btn > span { margin-left: 12px; }
.text-link > span, .btn > span { transition: transform .2s ease; }
.text-link:hover > span, .btn:hover > span { transform: translate(2px, -2px); }

/* ---------- Home hero ------------------------------------- */

.home-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: min(760px, 92svh);
  padding-block: calc(var(--header-height) + 72px) 88px;
  text-align: center;
}
.home-hero-inner { position: relative; z-index: 2; max-width: 860px; }
.home-hero .hero-heading {
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -.035em;
  /* 1.08 put the baselines 76.03px apart at the 70.4px cap, while the German
     line pairs a "g" descender (14.6px) above a capital umlaut (67.1px ascent):
     81.7px of ink in a 76.03px gap, so "Weniger Routine." and "Mehr Uberblick"
     collided by 5.7px. 1.16 is the break-even; 1.18 keeps a small buffer. */
  line-height: 1.18;
  margin-bottom: 1.5rem;
}
/* The 2.4rem floor made "Mehr Uberblick_" 324px wide inside a 288px column at
   320px, which forced a wrap the reservation below cannot absorb. */
@media (max-width: 359px) {
  .home-hero .hero-heading { font-size: 2.05rem; }
}
/* home_animation.js reserves this box at the width of the longest phrase, so
   typing and deleting can never rewrap the headline. Contents stay centred
   inside the reservation, so the spare width splits evenly and the line still
   reads as centred. max-width keeps it inside the column on small screens. */
.home-hero .hero-typed-line {
  display: inline-block;
  max-width: 100%;
  text-align: center;
}
/* The typed word is the one place the monospace face still carries a
   headline — it is what makes the caret read as typing. */
.home-hero #typing-text { font-family: var(--ff-code); font-weight: 700; letter-spacing: -.02em; }
.home-hero .hero-lead {
  max-width: 620px; margin-inline: auto;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  color: var(--clr-text-muted); font-weight: 300; line-height: 1.6;
  margin-bottom: 2.25rem;
}
.home-hero .hero-cta-group { justify-content: center; }
.home-hero .hero-microtrust { margin-top: 1.5rem; }

/* The entrance: eyebrow, headline, lead, buttons and the reassurance line
   arrive one after another. Scoped to .hero-enter, which hero_intro.js puts
   on <html> before first paint and only when motion is welcome, once per
   session; without it every line renders in place. These are animations
   with fill-mode both rather than transitions, so each line is held at its
   first frame until its turn and never flashes in beforehand. `translate`,
   not `transform`, for the same reason as the scroll reveals. */
@keyframes heroRise {
  from { opacity: 0; translate: 0 22px; filter: blur(8px); }
  to { opacity: 1; translate: none; filter: none; }
}
@keyframes heroGlow {
  from { opacity: 0; scale: .6; }
}
.hero-enter .home-hero-inner > * { animation: heroRise .9s var(--ease-out) both; }
.hero-enter .home-hero-inner > .hero-eyebrow { animation-delay: .1s; }
.hero-enter .home-hero-inner > .hero-heading { animation-delay: .22s; }
.hero-enter .home-hero-inner > .hero-lead { animation-delay: .42s; }
.hero-enter .home-hero-inner > .hero-cta-group { animation-delay: .58s; }
.hero-enter .home-hero-inner > .hero-microtrust { animation-delay: .74s; }
/* The glows swell into place behind the copy. `scale`, so the orbs' own
   positioning is untouched; the end state is simply their resting style. */
.hero-enter .glow-orb { animation: heroGlow 2.2s var(--ease-out) both; }
.hero-enter .orb-2 { animation-delay: .25s; }

/* ---------- What I do: three cards ------------------------ */

.offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.offer-journey { margin: 32px 0 0; }
.offer-card {
  display: flex; flex-direction: column;
  padding: 32px 28px 26px;
  background: var(--clr-surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: transform .25s var(--ease-out), border-color .25s ease, background .25s ease;
}
.offer-card:hover {
  transform: translateY(-6px);
  background: var(--clr-surface-2);
  border-color: var(--clr-accent-a40);
}
.offer-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; margin-bottom: 24px;
  border-radius: var(--radius-md);
  background: var(--clr-accent-a12);
  color: var(--clr-accent);
}
/* The card lights from wherever the cursor is. site.js writes --sx/--sy on
   pointermove; the defaults here mean the highlight sits sensibly with no
   JavaScript at all, and it is painted on a ::before so the card's own
   background transition is untouched.

   Deliberately a surface step (--clr-surface-3, the original brand blue)
   rather than a low-alpha orange. docs/color_palette.md is explicit that an
   accent tint over the blue ground blends to dead grey — and surface-3 is
   already contrast-audited as the lightest ground the text has to clear. */
.offer-card {
  --sx: 50%;
  --sy: 0%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.offer-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(
    circle 260px at var(--sx) var(--sy),
    var(--clr-surface-3),
    transparent 70%
  );
  transition: opacity 0.3s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .offer-card:hover::before,
  .offer-card:focus-visible::before {
    opacity: 1;
  }
}

/* A rim of light that follows the cursor round the card's edge. The accent
   stays on a 1px ring, never on the surface: the mask cuts the gradient down
   to the padding band, so only the ring shows. It sits just inside the
   border, because the card's overflow: hidden clips at the padding edge. */
.offer-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1.5px;
  border-radius: inherit;
  background: radial-gradient(
    circle 240px at var(--sx) var(--sy),
    var(--clr-accent-text),
    var(--clr-accent) 30%,
    transparent 75%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out);
}

/* The card tips a few degrees toward the pointer. site.js writes --rx/--ry
   alongside --sx/--sy; their zero defaults leave the plain lift. The card's
   own .25s transform transition is what smooths the tilt behind the cursor. */
.offer-card { --rx: 0deg; --ry: 0deg; }
@media (hover: hover) and (pointer: fine) {
  .offer-card:hover::after,
  .offer-card:focus-visible::after { opacity: 1; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .offer-card:hover {
    transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px);
  }
}

.offer-icon svg { width: 28px; height: 28px; }
.offer-label { display: block; color: var(--clr-text-subtle); margin-bottom: 10px; }
.offer-card h3 { font-size: 1.3rem; letter-spacing: -.02em; margin-bottom: .75rem; }
.offer-card > p { color: var(--clr-text-muted); line-height: 1.6; margin-bottom: 22px; flex-grow: 1; }
.offer-more {
  font-family: var(--ff-label); font-size: .8rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--clr-accent-text);
  display: inline-flex; align-items: center; gap: 10px;
}
.offer-more > span { transition: transform .2s ease; }
.offer-card:hover .offer-more > span { transform: translate(3px, -3px); }
.offer-card:hover h3 { color: var(--clr-accent-text); }

/* ---------- The paper document ---------------------------
   The white window /services builds its journey in: a title bar and an
   Excel-style sheet tab. Abstract on purpose, so there is nothing to
   misread. The paper tokens in base.css have no white or grey fill, so the
   document's neutrals are declared here, once, and services.css reads them
   from these properties. */
.story-doc {
  --doc-bg: #fff;
  --doc-chrome: #faf8f5;
  background: var(--doc-bg);
  border: 1px solid var(--clr-paper-line);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 40px rgba(22, 38, 46, .14);
  overflow: hidden;
}
.report-mock-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--clr-paper-line);
  background: var(--doc-chrome);
}
.report-mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--clr-paper-line); }
.report-mock-bar i:first-child { background: var(--clr-accent); }
.report-mock-bar span {
  margin-left: 8px; font-family: var(--ff-label); font-size: .68rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--clr-paper-muted);
}
.sheet-tabs {
  display: flex; align-items: stretch;
  height: 32px; padding-left: 30px;
  background: var(--doc-chrome);
}
.sheet-tab, .sheet-tab-add {
  display: flex; align-items: center; padding: 0 14px;
  font-size: .74rem; color: var(--clr-paper-muted);
}
.sheet-tab.is-active {
  background: var(--doc-bg);
  color: var(--clr-paper-ink); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--clr-accent);
}

/* ---------- Insights -------------------------------------- */

.insights-section { padding-bottom: 88px; }
.inline-intro { display: flex; max-width: none; justify-content: space-between; align-items: end; gap: 24px; }
.inline-intro h2 { margin: 0; }
.insight-list { display: grid; grid-template-columns: 1fr; }
.insight-row {
  display: grid; grid-template-columns: 130px 1.2fr 1fr; gap: 32px; align-items: start;
  border-top: 1px solid var(--border-color); padding-block: 28px;
}
.insight-meta { display: flex; flex-direction: column; gap: 6px; font-family: var(--ff-label); color: var(--clr-text-subtle); font-size: .78rem; }
.insight-row h3 { font-size: 1.3rem; line-height: 1.3; letter-spacing: -.015em; }
.insight-row h3 a { display: block; }
.insight-row h3 a:hover { color: var(--clr-accent-text); }
.insight-row > p { color: var(--clr-text-muted); margin: 0; line-height: 1.6; }

/* ---------- Closing CTA ----------------------------------- */

.consultation-band {
  border-top: 1px solid var(--border-color);
  padding-block: 64px 88px;
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: center;
}
.consultation-band .eyebrow { margin-bottom: 14px; }
.consultation-action { display: flex; flex-direction: column; align-items: start; gap: 14px; justify-self: end; }
.consultation-action > span { font-family: var(--ff-label); color: var(--clr-text-subtle); font-size: .78rem; }

/* The three-step process in one line: the detail lives on /services. */
.mini-process {
  list-style: none; counter-reset: mini; display: flex; flex-wrap: wrap; gap: 10px 28px;
  margin: 26px 0 0; padding: 0;
}
.mini-process li {
  counter-increment: mini;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--ff-label); font-size: .8rem; color: var(--clr-text-muted);
}
.mini-process li::before {
  content: '0' counter(mini);
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--clr-accent-a15); color: var(--clr-accent-text);
  font-size: .7rem; font-weight: 700;
}

.footer-tagline { max-width: 340px; }

/* ---------- Supporting pages ------------------------------ */

.page-container { padding-top: calc(var(--header-height) + 56px); padding-inline: 32px; }
.internal-hero { max-width: 760px; margin-bottom: 40px; }
.hero-title { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.12; letter-spacing: -.03em; }
.hero-lead { color: var(--clr-text-muted); font-size: 1.08rem; line-height: 1.65; margin-top: 18px; }
.about-inner { gap: 56px; }
.about-title { font-size: 1.8rem; }
.values-grid { gap: 28px; }
.value-card h3 { font-size: 1.15rem; }
.value-card p { line-height: 1.6; }
.about-tools { margin-bottom: 56px; }

.contact-surface { max-width: 840px; }
.contact-header h1 { font-size: clamp(2.3rem, 4.6vw, 3.4rem); }
.contact-form { margin-top: 28px; }
.form-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.contact-info { margin-top: 36px; }
.contact-info h2 { font-size: 1.15rem; }
.form-guidance { color: var(--clr-text-muted); font-size: .85rem; }
.message { margin-top: 24px; }

.article-shell { padding-top: calc(var(--header-height) + 40px); max-width: 850px; margin-inline: auto; }
.article-shell .post-title { font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.15; letter-spacing: -.025em; margin-bottom: 1.25rem; }
.article-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; font-family: var(--ff-label); color: var(--clr-text-subtle); font-size: .8rem; margin-bottom: 18px; }
.article-summary { font-size: 1.15rem; line-height: 1.6; color: var(--clr-text-muted); border-bottom: 1px solid var(--border-color); padding-bottom: 24px; margin-bottom: 28px; }
.article-shell .prose { font-size: 1.05rem; line-height: 1.8; }
.article-shell .prose h2 { font-size: 1.65rem; margin: 40px 0 16px; letter-spacing: -.02em; }
.article-shell .prose h3 { font-size: 1.25rem; margin-top: 26px; }
.article-shell .prose p { margin-bottom: 20px; }
.article-shell .prose img { width: 100%; }
.article-author { border-top: 1px solid var(--border-color); margin-top: 40px; padding-top: 24px; display: flex; align-items: center; gap: 16px; }
.article-author .signature-icon { width: 48px; height: 48px; opacity: .8; flex-shrink: 0; }
.article-author p { margin: 0; color: var(--clr-text-muted); font-size: .88rem; }
.article-author a { display: block; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.language-note { font-family: var(--ff-label); font-size: .82rem; color: var(--clr-text-subtle); padding: 12px 0; border-bottom: 1px solid var(--border-color); }

/* ---------- Responsive ------------------------------------ */

/* Same guard as on /services: grid children size to min-content by default,
   and one long compound word would otherwise widen the page on a phone. */
.offer-grid > *,
.insight-row > *,
.consultation-band > * { min-width: 0; }
.offer-card h3, .insight-row h3 { overflow-wrap: break-word; }

@media (min-width: 769px) and (max-width: 1000px) {
  .site-nav-list { gap: 16px; }
  .site-header-inner { padding-inline: 24px; }
  .logo svg { width: 148px; }
  .header-right { gap: 14px; }
  .offer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .wrap { width: calc(100% - 40px); }
  .section-space { padding-block: 60px; }
  .section-intro { margin-bottom: 32px; }

  .home-hero { min-height: auto; padding-block: calc(var(--header-height) + 44px) 56px; }
  .home-hero .hero-heading { font-size: clamp(2.1rem, 9vw, 2.9rem); }
  .home-hero .hero-lead { font-size: 1.02rem; margin-bottom: 1.75rem; }
  .home-hero .hero-cta-group .btn { width: 100%; }

  .offer-grid { grid-template-columns: 1fr; gap: 16px; }
  .offer-card { padding: 26px 22px 22px; }
  .offer-icon { width: 46px; height: 46px; margin-bottom: 18px; }
  .offer-icon svg { width: 24px; height: 24px; }

  .inline-intro { align-items: start; flex-direction: column; gap: 12px; }
  .insight-row { grid-template-columns: 1fr; gap: 8px; padding-block: 22px; }
  .insight-meta { flex-direction: row; gap: 16px; }
  .insights-section { padding-bottom: 40px; }

  .consultation-band { grid-template-columns: 1fr; gap: 28px; padding-block: 48px 60px; }
  .consultation-action { justify-self: start; }
  .mini-process { flex-direction: column; gap: 12px; }

  .page-container { padding-inline: 20px; padding-top: calc(var(--header-height) + 32px); }
  .hero-title { font-size: clamp(1.9rem, 7vw, 2.4rem); }
  .about-inner { gap: 32px; }
  .values-grid { grid-template-columns: 1fr; gap: 16px; }
  .form-two-col { grid-template-columns: 1fr; gap: 0; }
  .article-shell { padding-top: calc(var(--header-height) + 24px); }
  .article-shell .post-title { font-size: clamp(1.6rem, 6vw, 2.1rem); overflow-wrap: anywhere; }
  .article-shell .prose { font-size: 1rem; }
  .article-shell .prose h2 { font-size: 1.45rem; }
}

/* Navigation stays usable when JavaScript is unavailable. */
@media (max-width: 768px) {
  .site-header:not(.navigation-ready) { position: static; height: auto; }
  .site-header:not(.navigation-ready) .site-header-inner { flex-wrap: wrap; padding-top: 12px; }
  .site-header:not(.navigation-ready) .header-right { width: 100%; }
  .site-header:not(.navigation-ready) .mobile-nav-toggle { display: none; }
  .site-header:not(.navigation-ready) .site-nav { position: static; opacity: 1; visibility: visible; pointer-events: auto; transform: none; height: auto; padding: 12px 0; width: 100%; }
  .site-header:not(.navigation-ready) .site-nav-list { flex-direction: row; flex-wrap: wrap; gap: 8px 16px; justify-content: center; }
  .site-header:not(.navigation-ready) .nav-lang { margin-top: 8px; padding-top: 4px; }
  .site-header:not(.navigation-ready) + main .home-hero { padding-top: 40px; }
}

/* ---------- The person, above the closing CTA -------------
   A one-person business should show who the visitor would be hiring before
   it asks for the call. */

.owner-signature {
  display: flex; align-items: center; gap: 16px;
  margin-top: 28px; padding-top: 26px;
  border-top: 1px solid var(--border-subtle);
}
.owner-photo {
  width: 72px; height: 72px; flex-shrink: 0;
  border-radius: var(--radius-full);
  object-fit: cover; object-position: top center;
  border: 1px solid var(--border-color);
}
.owner-lines { display: grid; gap: 4px; min-width: 0; }
.owner-name { font-weight: 600; font-size: 1.02rem; }
.owner-role {
  font-family: var(--ff-label); font-size: .76rem; letter-spacing: .04em;
  color: var(--clr-accent-text);
}
.owner-note { color: var(--clr-text-muted); font-size: .95rem; line-height: 1.5; }
.owner-role, .owner-note, .owner-name { overflow-wrap: break-word; }

@media (max-width: 768px) {
  .owner-signature { gap: 14px; margin-top: 24px; padding-top: 22px; }
  .owner-photo { width: 60px; height: 60px; }
}