/* 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
   .paper-panel, which deliberately inverts to a light ground. */

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 24px); }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
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-num, .flow-step, .contrast-title,
.service-example-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, .contrast-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; }

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

.offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.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);
}
.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 worked example, set on paper --------------- */

.example-band { padding-block: 24px 96px; }

/* The only inverted surface on the site. Everything inside re-declares its
   colour against --clr-paper, because the global heading rule paints white. */
.paper-panel {
  --panel-ink: var(--clr-paper-ink);
  --panel-muted: var(--clr-paper-muted);
  --panel-accent: var(--clr-accent-deep);
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 56px;
  align-items: center;
  padding: 56px 56px 48px;
  background: var(--clr-paper);
  border-radius: calc(var(--radius-lg) + 8px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .38);
}
.paper-panel .eyebrow { color: var(--panel-accent); }
.paper-panel h2 {
  color: var(--panel-ink);
  font-size: clamp(1.7rem, 2.8vw, 2.35rem);
  line-height: 1.15; letter-spacing: -.025em;
}
.paper-lead { color: var(--panel-muted); font-size: 1.08rem; line-height: 1.65; margin-top: 16px; }

.paper-flow { list-style: none; display: grid; gap: 0; margin: 32px 0 0; }
.paper-flow li {
  position: relative;
  padding: 18px 0 18px 46px;
  border-top: 1px solid var(--clr-paper-line);
}
.paper-flow li:last-child { border-bottom: 1px solid var(--clr-paper-line); }
.paper-flow .flow-step {
  position: absolute; left: 0; top: 20px;
  margin: 0; color: var(--panel-accent); font-size: .74rem;
}
.paper-flow h3 { color: var(--panel-ink); font-size: 1.05rem; margin-bottom: 4px; letter-spacing: -.01em; }
.paper-flow p { color: var(--panel-muted); margin: 0; line-height: 1.55; font-size: .96rem; }
.paper-note {
  margin: 24px 0 0; color: var(--panel-muted);
  font-family: var(--ff-label); font-size: .74rem; line-height: 1.6;
}

/* Abstract stand-in for "one report". No figures, nothing to misread. */
.report-mock {
  background: #fff;
  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: #faf8f5;
}
.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);
}
.report-mock-body { padding: 22px 20px 20px; }
.report-mock-chart {
  display: flex; align-items: flex-end; gap: 9px;
  height: 128px; padding-bottom: 12px;
  border-bottom: 1px solid var(--clr-paper-line);
}
.report-mock-chart span { flex: 1; border-radius: 3px 3px 0 0; background: #c8d2d8; }
.report-mock-chart .is-accent { background: var(--clr-accent); }
.report-mock-lines { display: grid; gap: 11px; padding-top: 18px; }
.report-mock-lines i { display: block; height: 8px; border-radius: var(--radius-full); background: #e4e0d9; }

/* ---------- 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 > *,
.paper-panel > *,
.insight-row > *,
.consultation-band > * { min-width: 0; }
.offer-card h3, .paper-panel h2, .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; }
  .paper-panel { grid-template-columns: 1fr; gap: 36px; padding: 44px 40px 40px; }
}

@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; }

  .example-band { padding-block: 8px 64px; }
  .paper-panel { grid-template-columns: 1fr; gap: 32px; padding: 34px 24px 30px; border-radius: var(--radius-lg); }
  .paper-flow li { padding-left: 0; padding-block: 16px 16px; }
  .paper-flow .flow-step { position: static; display: block; margin-bottom: 8px; }

  .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; }
}