/* Netwise Solutions – Stylesheet „Darmstädter Moderne, weich“ (Branch design-darmstadt).
   Tokens: /assets/tokens.css. Eine Rundungsskala (14/20/28/40px, Buttons rund). Keine harten Linien.
   Animiert werden nur transform und opacity. */

/* ── Basis ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 24px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { font: 400 var(--fs-body)/1.6 var(--font-body); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--cobalt); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; transition: color var(--dur-short) var(--ease); }
a:hover { color: var(--action); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.005em; line-height: 1.08; text-wrap: balance; }
p, li, dd, blockquote { text-wrap: pretty; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--wash); color: var(--ink); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-xs); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 100; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: var(--r-pill); }
.skip:focus, .skip:hover { top: 16px; color: #fff; }

@view-transition { navigation: auto; }
.nav { view-transition-name: site-nav; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-mid); animation-timing-function: var(--ease); }

/* ── Navigation: schwebende Pille ────────────────────────── */
.nav { position: sticky; top: 12px; z-index: 50; height: var(--nav-h); padding: 0 clamp(8px, 1.5vw, 20px); margin-top: 12px; }
.nav-inner { position: relative; max-width: calc(var(--maxw) + 24px); height: 100%; margin: 0 auto; padding: 0 12px 0 24px; display: flex; align-items: center; gap: 20px;
  background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
  border-radius: var(--r-pill); box-shadow: var(--shadow-soft); }
.nav-logo { flex: none; display: block; padding: 4px 0; transform-origin: left center; transition: transform var(--dur-mid) var(--ease); }
.nav-logo img { height: 40px; width: auto; }
.nav.is-scrolled .nav-logo { transform: scale(.92); }
.nav-links { display: flex; gap: 2px; list-style: none; padding: 0; margin: 0 0 0 auto; }
.nav-links a { display: flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); color: var(--ink); text-decoration: none;
  font: 600 15px/1 var(--font-display); letter-spacing: .02em; transition: background-color var(--dur-short) var(--ease), color var(--dur-short) var(--ease); }
.nav-links a:hover { background: var(--stone); color: var(--ink); }
.nav-links a[aria-current="true"] { background: var(--wash); color: var(--cobalt); }
.nav-call { flex: none; }
.nav-toggle, .nav-tel { display: none; }
.js .nav-call { opacity: 0; visibility: hidden; transform: scale(.92);
  transition: opacity var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease), visibility 0s linear var(--dur-mid); }
.js .nav.show-call .nav-call { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (prefers-reduced-transparency: reduce) { .nav-inner { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ── Buttons ─────────────────────────────────────────────── */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 16px 28px; border: 0; border-radius: var(--r-pill);
  font: 600 17px/1 var(--font-display); letter-spacing: .02em; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform var(--dur-mid) var(--ease), background-color var(--dur-short) var(--ease), color var(--dur-short) var(--ease), box-shadow var(--dur-mid) var(--ease); }
.pill:hover { text-decoration: none; transform: translateY(-2px); }
.pill:active { transform: scale(.97); transition-duration: 90ms; }
.pill svg { width: 18px; height: 18px; flex: none; }
.pill-primary { background: var(--action); color: #fff; box-shadow: 0 8px 22px rgba(29, 88, 214, .24); }
.pill-primary:hover { background: var(--action-hover); color: #fff; box-shadow: 0 12px 28px rgba(29, 88, 214, .3); }
.pill-outline { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(20, 24, 33, .14); }
.pill-outline:hover { background: var(--wash); color: var(--cobalt); box-shadow: inset 0 0 0 1.5px rgba(29, 88, 214, .25); }
.pill-small { min-height: 44px; padding: 12px 20px; font-size: 15px; }
.pill[disabled] { opacity: .6; cursor: progress; transform: none; }
.more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 600 16px/1 var(--font-display); letter-spacing: .02em; color: var(--cobalt); text-decoration: none; }
.more .chev { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--wash); transition: transform var(--dur-mid) var(--ease), background-color var(--dur-short) var(--ease); }
.more:hover .chev, a:hover > .more .chev { transform: translateX(4px); background: #dce8ff; }

/* ── Reveal ──────────────────────────────────────────────── */
.js [data-reveal] { opacity: 0; transform: translateY(var(--reveal-distance)) scale(.985);
  transition: opacity var(--dur-long) var(--ease), transform var(--dur-long) var(--ease);
  transition-delay: calc(var(--i, 0) * var(--reveal-stagger)); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ── Abschnitte als weiche Flächen ───────────────────────── */
.section { padding: var(--section) 0; }
.section-alt { background: var(--stone); border-radius: var(--r-xl); margin: 0 clamp(8px, 1.5vw, 20px); }
.head { max-width: var(--maxw); margin: 0 auto clamp(36px, 4.5vw, 56px); padding: 0 var(--gutter); }
.head h2 { font-size: var(--fs-h2); max-width: 18ch; }
.head p { margin-top: 16px; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-width: 52ch; }

/* ── Hero ────────────────────────────────────────────────── */
.hero { padding: clamp(24px, 4vw, 64px) 0 0; overflow: clip; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
.hero-copy { align-self: center; padding-bottom: clamp(32px, 5vw, 80px); }
.hero h1 { font-size: var(--fs-hero); max-width: 14ch; }
.hero h1 .l2 { display: block; margin-top: 14px; font-size: var(--fs-hero-2); line-height: 1.2; color: var(--slate); max-width: 26ch; }
.hero-sub { margin-top: 22px; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-width: 40ch; }
.hero-sub strong { color: var(--ink); font-weight: 600; }
.hero-contact { margin-top: 28px; display: grid; gap: 4px; }
.hero-number { font: 600 clamp(2rem, 1.4rem + 1.8vw, 2.75rem)/1.05 var(--font-display); color: var(--cobalt); text-decoration: none; font-variant-numeric: tabular-nums; width: fit-content; }
.hero-number:hover { color: var(--action); }
.hero-hours { color: var(--ink-2); font-size: var(--fs-small); font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }

.hero-visual { position: relative; display: grid; align-items: end; justify-items: center; }
.hero-visual .crown { position: absolute; left: 50%; bottom: 0; width: min(100%, 500px); height: auto; transform: translateX(-50%); }
.hero-visual picture { position: relative; width: min(64%, 300px); }
.hero-visual img { width: 100%; height: auto; }

@media (prefers-reduced-motion: no-preference) {
  .hero h1 { animation: rise .9s var(--ease) .05s both; }                 /* LCP: bleibt sichtbar */
  .js .hero-copy > :not(h1) { animation: rise-fade .9s var(--ease) both; }
  .js .hero-copy > :nth-child(2) { animation-delay: .12s; }
  .js .hero-copy > :nth-child(3) { animation-delay: .2s; }
  .js .hero-copy > :nth-child(4) { animation-delay: .28s; }
  .hero-visual picture { animation: rise 1s var(--ease) .1s both; }
  .js .hero-visual .crown { animation: crown-in 1.1s var(--ease) both; }
}
@keyframes rise { from { transform: translateY(18px); } to { transform: none; } }
@keyframes rise-fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes crown-in { from { opacity: 0; transform: translateX(-50%) translateY(28px) scale(.97); } to { opacity: 1; transform: translateX(-50%); } }

/* Eckdaten: weiche Fläche mit vier Werten */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 8px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-soft); }
.facts div { padding: 18px 20px; border-radius: var(--r-md); background: var(--bg); }
.facts dt { font-size: var(--fs-small); color: var(--ink-2); }
.facts dd { margin-top: 4px; font: 600 19px/1.3 var(--font-display); letter-spacing: .01em; }
.facts del { color: var(--ink-2); font-weight: 400; text-decoration-color: var(--blue); text-decoration-thickness: 2px; margin-right: 6px; }

/* ── Leistungen ──────────────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tile { position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(24px, 2.6vw, 34px); background: var(--surface); border-radius: var(--r-lg);
  color: var(--ink); text-decoration: none; min-height: 250px; box-shadow: 0 1px 2px rgba(20, 24, 33, .04);
  transition: transform var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease); }
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); color: var(--ink); }
.tile:active { transform: translateY(-1px) scale(.99); transition-duration: 90ms; }
.tile .icon { width: 44px; height: 44px; padding: 10px; border-radius: 14px; background: var(--wash); color: var(--cobalt); margin-bottom: 6px; }
.tile h3 { font-size: var(--fs-h3); }
.tile p { color: var(--ink-2); max-width: 36ch; }
.tile .more { margin-top: auto; }
.t-2x2 { grid-column: span 2; grid-row: span 2; background: var(--wash); }
.t-2x2 .icon { background: #fff; }
.t-2x2 h3 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.375rem); }
.apps { list-style: none; padding: 0; margin: 14px 0 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; flex: 1; align-content: stretch; }
.apps li { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-height: 92px; padding: 16px 18px; border-radius: var(--r-md); background: rgba(255, 255, 255, .78); font: 600 19px/1.2 var(--font-display); }
.apps svg { width: 20px; height: 20px; color: var(--cobalt); }
.tile-ki { background: var(--deep); color: var(--on-deep); }
.tile-ki:hover { color: var(--on-deep); }
.tile-ki p { color: var(--on-deep-2); }
.tile-ki .icon { background: rgba(143, 179, 255, .16); color: var(--link-on-deep); }
.tile-ki .more { color: var(--link-on-deep); }
.tile-ki .more .chev { background: rgba(143, 179, 255, .16); }
.tile-ki:focus-visible { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--link-on-deep); }
.bento-more { margin-top: 28px; }

/* ── Zitat: dunkles Panel ────────────────────────────────── */
.quote-dark .panel { margin: 0 clamp(8px, 1.5vw, 20px); padding: clamp(40px, 7vw, 96px) 0; background: var(--deep); color: var(--on-deep); border-radius: var(--r-xl); }
.quote-dark blockquote p { font: 600 clamp(1.5rem, 1.05rem + 1.6vw, 2.375rem)/1.32 var(--font-display); max-width: 34ch; }
.quote-dark figcaption { margin-top: 28px; color: var(--on-deep-2); }
.quote-dark figcaption strong { display: block; color: var(--on-deep); font-weight: 600; }
.quote-dark .mark { display: block; width: 56px; height: 56px; margin-bottom: 24px; border-radius: 50%; background: rgba(143, 179, 255, .16); color: var(--link-on-deep); font: 600 44px/72px var(--font-display); text-align: center; }

/* ── Über mich ───────────────────────────────────────────── */
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.about-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-xl); background: #8f949b; box-shadow: var(--shadow-soft); }
.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transform: scaleX(-1); }
.about h2 { font-size: var(--fs-h2); }
.about .prose { margin-top: 20px; color: var(--ink-2); font-size: 19px; max-width: 54ch; }
.about .prose p + p { margin-top: 14px; }
.about .prose strong { color: var(--ink); font-weight: 600; }
.ledger { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ledger div { padding: 16px 18px; border-radius: var(--r-md); background: var(--surface); box-shadow: 0 1px 2px rgba(20, 24, 33, .04); }
.ledger dt { font-size: var(--fs-small); color: var(--ink-2); }
.ledger dd { margin-top: 2px; font-weight: 600; }
.tech { padding: 0 0 var(--section); }
.tech .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.tech h2, .tech h3 { font: 600 var(--fs-small)/1.3 var(--font-body); color: var(--ink-2); letter-spacing: 0; }
.tech ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tech li { padding: 10px 18px; border-radius: var(--r-pill); background: var(--surface); box-shadow: 0 1px 2px rgba(20, 24, 33, .05); font: 600 16px/1.2 var(--font-display); letter-spacing: .02em; }

/* ── Vorgehen ────────────────────────────────────────────── */
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: s; }
.steps li { counter-increment: s; position: relative; padding: 28px 24px; border-radius: var(--r-lg); background: var(--surface); }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--wash); color: var(--cobalt); font: 600 18px/1 var(--font-display); margin-bottom: 20px; }
.steps li::after { content: ""; position: absolute; top: 49px; left: 80px; right: 16px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(29, 88, 214, .3), rgba(29, 88, 214, 0)); transform-origin: left; }
.steps li:last-child::after { display: none; }
.js .steps:not(.is-in) li::after { transform: scaleX(0); }
.js .steps li::after { transition: transform 1s var(--ease) .3s; }
.steps h3 { font-size: 22px; }
.steps p { margin-top: 8px; color: var(--ink-2); }

/* ── Kundenstimmen: eine große, zwei kleine ──────────────── */
.quotes { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 16px; }
.quote-card { margin: 0; padding: clamp(24px, 3vw, 36px); border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 1px 2px rgba(20, 24, 33, .04); display: flex; flex-direction: column; gap: 20px; }
.quote-card:first-child { grid-row: span 2; background: var(--wash); }
.quote-card:first-child blockquote p { font: 600 clamp(1.25rem, 1.05rem + .7vw, 1.625rem)/1.4 var(--font-display); }
.quote-card blockquote p { font-size: 18px; }
.quote-card figcaption { margin-top: auto; color: var(--ink-2); font-size: var(--fs-small); }
.quote-card figcaption strong { display: block; color: var(--ink); font: 600 17px/1.3 var(--font-display); letter-spacing: .01em; }
.quote-full { margin-top: 20px; }
.quote-full summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--r-pill); background: var(--surface); cursor: pointer; color: var(--cobalt); font: 600 16px/1 var(--font-display); letter-spacing: .02em; list-style: none; box-shadow: 0 1px 2px rgba(20, 24, 33, .05); }
.quote-full summary::-webkit-details-marker { display: none; }
.quote-full summary::after { content: "›"; display: inline-block; transition: transform var(--dur-mid) var(--ease); }
.quote-full[open] summary::after { transform: rotate(90deg); }
.quote-full blockquote { max-width: 64ch; margin-top: 16px; padding: 24px 28px; border-radius: var(--r-lg); background: var(--surface); }
.quote-full-by { margin: 10px 0 0 28px; color: var(--ink-2); font-size: var(--fs-small); }
.quote-full[open] blockquote { animation: msg-in var(--dur-mid) var(--ease) both; }

/* ── Kontakt ─────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.contact-side { display: grid; gap: 16px; }
.contact-direct { display: grid; gap: 10px; }
.contact-direct div { padding: 18px 22px; border-radius: var(--r-md); background: var(--surface); }
.contact-direct dt { font-size: var(--fs-small); color: var(--ink-2); }
.contact-direct dd { margin-top: 4px; font: 600 20px/1.3 var(--font-display); letter-spacing: .01em; }
.contact-direct .big { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.375rem); }
.contact-direct address { font-style: normal; }
.map-card { padding: 22px; background: var(--surface); border-radius: var(--r-md); display: grid; gap: 12px; overflow: hidden; }
.map-card h3 { font-size: 20px; }
.map-card p { color: var(--ink-2); font-size: var(--fs-small); }
.map-card .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.map-card.is-loaded { padding: 0; }
.map-card iframe { display: block; width: 100%; height: 340px; border: 0; }
.form { background: var(--surface); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 44px); box-shadow: var(--shadow-soft); }
.form-intro { color: var(--ink-2); margin-bottom: 22px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.field { display: grid; gap: 8px; align-content: start; }
.field-full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 16px; }
.field label .opt { font-weight: 400; color: var(--ink-2); }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 14px 16px; background: var(--bg); border: 1.5px solid #c9ced6; border-radius: var(--r-sm); font-size: 17px;
  transition: border-color var(--dur-short) var(--ease), box-shadow var(--dur-short) var(--ease), background-color var(--dur-short) var(--ease); }
.field textarea { min-height: 10rem; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #8e95a1; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background: #fff; border-color: var(--action); box-shadow: 0 0 0 4px rgba(29, 88, 214, .16); }
.field [aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 4px rgba(180, 35, 24, .12); }
.field-error { color: var(--error); font-size: 15px; font-weight: 600; }
.field-error:empty { display: none; }
.field-error:not(:empty) { animation: msg-in var(--dur-mid) var(--ease) both; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 24px; }
.form-note { flex: 1 1 16rem; color: var(--ink-2); font-size: 15px; }
.form-status { margin-top: 20px; padding: 16px 20px; border-radius: var(--r-md); font-weight: 600; }
.form-status:empty { display: none; }
.form-status.is-ok { color: var(--ok); background: #e7f4ec; animation: msg-in var(--dur-mid) var(--ease) both; }
.form-status.is-error { color: var(--error); background: #fbeceb; animation: msg-in var(--dur-mid) var(--ease) both; }
@keyframes msg-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ── Fußzeile ────────────────────────────────────────────── */
.footer { margin: var(--section) clamp(8px, 1.5vw, 20px) clamp(8px, 1.5vw, 20px); background: var(--deep); color: var(--on-deep-2); font-size: 15px; padding: 56px 0 28px; border-radius: var(--r-xl); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; padding-bottom: 28px; }
.footer .logo-plate { display: inline-block; background: #fff; padding: 10px 16px; border-radius: var(--r-pill); margin-bottom: 14px; }
.footer .logo-plate img { height: 32px; width: auto; }
.footer .footer-title { font: 600 15px/1.3 var(--font-display); letter-spacing: .04em; color: var(--on-deep); margin-bottom: 10px; }
.footer ul { list-style: none; padding: 0; display: grid; gap: 2px; }
.footer a { display: inline-flex; align-items: center; min-height: 36px; color: var(--on-deep); text-decoration: none; }
.footer a:hover { color: var(--link-on-deep); }
.footer :focus-visible { box-shadow: 0 0 0 3px var(--deep), 0 0 0 6px var(--link-on-deep); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 20px; border-top: 1px solid rgba(238, 242, 251, .12); }
@media (pointer: coarse) { .footer a { min-height: 44px; } }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { transform: none; }
  .pill:hover, .tile:hover { transform: none; }
}

/* ── Responsiv ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-2x2 { grid-column: span 2; grid-row: auto; }
  .bento > .tile:last-child { grid-column: span 2; }
  .steps { grid-template-columns: 1fr 1fr; }
  .steps li::after { display: none; }
  .quotes { grid-template-columns: 1fr; }
  .quote-card:first-child { grid-row: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .nav-inner { padding: 0 8px 0 18px; }
  .nav-links { position: absolute; top: calc(100% + 8px); left: 0; right: 0; flex-direction: column; gap: 4px; margin: 0; padding: 10px;
    background: rgba(255, 255, 255, .97); border-radius: var(--r-lg); box-shadow: var(--shadow-lift);
    opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transform-origin: top center;
    transition: opacity var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease), visibility 0s linear var(--dur-mid); }
  .nav-links.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav-links a { font-size: 20px; padding: 16px 18px; border-radius: var(--r-md); }
  .nav-call { display: none; }
  .nav-tel, .nav-toggle { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--stone); color: var(--ink); cursor: pointer; }
  .nav-tel { margin-left: auto; background: var(--wash); color: var(--cobalt); }
  .nav-toggle svg, .nav-tel svg { width: 22px; height: 22px; }
  .nav-toggle .bar { transition: transform var(--dur-mid) var(--ease); transform-origin: center; transform-box: fill-box; }
  .nav-toggle[aria-expanded="true"] .bar-1 { transform: translateY(4px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bar-2 { transform: translateY(-4px) rotate(-45deg); }
  .nav-logo img { height: 36px; }
  .about { grid-template-columns: 1fr; }
  .about-photo { max-width: 440px; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  :root { --nav-h: 64px; }
  .nav { top: 8px; margin-top: 8px; }
  .hero { padding-top: 20px; }
  .hero-grid { grid-template-columns: 1fr; gap: 8px; }
  .hero-copy { padding-bottom: 8px; }
  .hero h1 .l2 { margin-top: 10px; }
  .hero-sub { margin-top: 14px; }
  .hero-contact { margin-top: 18px; }
  .hero-actions { margin-top: 18px; }
  .hero-actions .pill { flex: 1 1 auto; }
  .hero-visual { margin-top: 40px; }
  .hero-visual picture { width: min(60%, 240px); }
  .hero-visual .crown { width: min(100%, 400px); }
  .facts { grid-template-columns: 1fr 1fr; }
  .bento { grid-template-columns: 1fr; }
  .t-2x2, .bento > .tile:last-child { grid-column: auto; }
  .tile { min-height: 0; }
  .steps { grid-template-columns: 1fr; }
  .ledger { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-foot .pill { flex: 1 1 100%; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ── Korrekturen nach Detektor (keine verschachtelten Karten, Hover-Kontrast in der KI-Kachel) ── */
.tile-ki:hover .more .chev, .tile-ki .more:hover .chev { background: rgba(143, 179, 255, .28); }
.facts { padding: 0; background: none; box-shadow: none; gap: 12px; }
.facts div { background: var(--surface); box-shadow: 0 1px 2px rgba(20, 24, 33, .05); border-radius: var(--r-md); }
.apps { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; flex: 0 0 auto; margin: 12px 0 20px; }
.apps li { flex-direction: row; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px 10px 14px; border-radius: var(--r-pill); background: #fff; font-size: 17px; }
.t-2x2 > p { font-size: var(--fs-lead); line-height: 1.5; max-width: 30ch; }
.t-2x2 { justify-content: flex-end; }
.t-2x2 .icon { width: 64px; height: 64px; padding: 14px; border-radius: 20px; margin-bottom: auto; }
/* Raster: M365 breit (2 Spalten), Hardware als Querkachel über die volle Breite – keine Leerflächen */
.t-2x2 { grid-row: auto; justify-content: flex-start; }
.t-2x2 .icon { width: 44px; height: 44px; padding: 10px; border-radius: 14px; margin-bottom: 6px; }
.bento > .tile:last-child { grid-column: 1 / -1; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: center; gap: 12px 28px; }
.bento > .tile:last-child .icon { margin: 0; }
.bento > .tile:last-child .more { margin: 0; }
@media (max-width: 860px) {
  .bento > .tile:last-child { display: flex; flex-direction: column; align-items: flex-start; }
  .bento > .tile:last-child .more { margin-top: auto; }
}
.t-2x2 .more .chev { background: #fff; }
.apps { gap: 6px 22px; }
.apps li { background: none; padding: 4px 0; min-height: 32px; border-radius: 0; }

/* ── Fließende Linie (Hochzeitsturm-Kontur), zeichnet sich beim Laden einmal ── */
.hero { position: relative; }
.flow-line { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; opacity: 0; }
.flow-line.is-ready { opacity: 1; }
.flow-line path { fill: none; stroke: var(--cobalt); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.hero-grid { position: static; }
.hero-copy { position: relative; z-index: 2; }
.hero-visual .crown { z-index: 0; }
.hero-visual picture { z-index: 2; }
.flow-line { z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
  .flow-line.is-ready path { animation: flow-draw 2.6s var(--ease) .2s both; }
}
@keyframes flow-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ── Geist: Buchstabenabstand je Größe (groß enger, klein neutral) ── */
h1, h2, h3 { letter-spacing: -0.03em; }
.hero h1 .l2 { letter-spacing: -0.02em; font-weight: 500; }
.tile h3, .steps h3 { letter-spacing: -0.02em; }
.nav-links a, .pill, .more, .quote-full summary, .footer .footer-title, .facts dd, .apps li, .tech li, .contact-direct dd { letter-spacing: -0.005em; }
.hero-number { letter-spacing: -0.02em; }
body { font-size: 1.0625rem; }
/* Linie: links und rechts weich ausblenden, ruhiger zeichnen */
.flow-line { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
.flow-line { transition: opacity 1.2s cubic-bezier(.45, .05, .25, 1); }
.flow-line path { stroke-width: 1.5; }
@media (prefers-reduced-motion: no-preference) {
  .flow-line.is-ready path { animation: flow-draw 3.4s cubic-bezier(.45, .05, .25, 1) .25s both; }
}
@media (max-width: 700px) {
  .flow-line { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); }
}

/* ── Vorgehen: Fortschrittslinie läuft durch 1–4, Kreise füllen sich nacheinander ──
      Reihenfolge: 1. Kacheln blenden gestaffelt ein, 2. die hellblaue Schiene startet, wenn die letzte Kachel
      zu ca. 70 % eingeblendet ist, 3. dann läuft die Füllung von 1 nach 4; jeder Kreis leuchtet, wenn die Füllung
      seinen Rand erreicht. Alle Zeiten hängen an --steps-delay. Bei 1280 px: letzter Kreis nach ca. 1,7 s, fertig nach ca. 2 s.
      Die Schiene liegt über den Kacheln (wirkt in den Lücken durchgehend), aber unter den Kreisen; auf ihrer Höhe
      steht in der Kachel nur der Kreis, sie verdeckt also keinen Inhalt. */
.steps { position: relative;
  --tile-dur: .5s; --tile-stagger: .08s;
  --steps-delay: calc(3 * var(--tile-stagger) + var(--tile-dur) * .7);   /* 0,59 s: letzte Kachel zu ~70 % da */
  --rail-fade: .2s; --fill-dur: 1s;
  --fill-start: calc(var(--steps-delay) + var(--rail-fade)); }
.steps li::after { content: none; }
/* --hit: Anteil der Füllzeit, bis die Füllung den Kreisrand erreicht (berechnet für die Kurve unten) */
.steps li { --k: 0; --hit: 0; z-index: auto; }
.steps li:nth-child(2) { --k: 1; --hit: .38; } .steps li:nth-child(3) { --k: 2; --hit: .585; } .steps li:nth-child(4) { --k: 3; --hit: .889; }
.steps li::before { position: relative; z-index: 2; transition: background-color .45s var(--ease), color .45s var(--ease), transform .6s var(--ease), box-shadow .6s var(--ease);
  transition-delay: calc(var(--fill-start) + var(--hit) * var(--fill-dur)); }
.steps.is-in li::before, html:not(.js) .steps li::before { background: var(--action); color: #fff; box-shadow: 0 0 0 6px rgba(29, 88, 214, .14); }
.steps::before, .steps::after { content: ""; position: absolute; top: 49px; left: 46px; right: calc((100% - 48px) / 4 - 46px); height: 3px; border-radius: 3px; z-index: 1; }
.steps::before { background: rgba(29, 88, 214, .14); }
.steps::after { background: var(--action); transform-origin: left; transform: scaleX(1); }
.js .steps:not(.is-in)::after { transform: scaleX(0); }
.js .steps::after { transition: transform var(--fill-dur) cubic-bezier(.4, 0, .6, 1) var(--fill-start); }
/* Schiene erst zeigen, wenn alle Kacheln da sind */
.js .steps::before { opacity: 0; transition: opacity var(--rail-fade) var(--ease) var(--steps-delay); }
.js .steps.is-in::before { opacity: 1; }
/* Kacheln erscheinen nacheinander, Kreis pulsiert beim Erreichen kurz */
.js .steps li { opacity: 0; transform: translateY(18px); transition: opacity var(--tile-dur) var(--ease), transform var(--tile-dur) var(--ease); transition-delay: calc(var(--k) * var(--tile-stagger)); }
.js .steps.is-in li { opacity: 1; transform: none; }
.js .steps[data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .steps.is-in li::before { animation: step-pulse .7s var(--ease) both; animation-delay: calc(var(--fill-start) + var(--hit) * var(--fill-dur)); }
}
@keyframes step-pulse { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }
/* Tablet/Handy: keine Linie, nur die Kacheln blenden ein; Kreise erscheinen gleich im Endzustand */
@media (max-width: 1024px) {
  .steps::before, .steps::after { display: none; }
  .steps li::before, .steps.is-in li::before { transition: none; animation: none; }
}
@media (prefers-reduced-motion: reduce) { .steps li::before { transition-delay: 0s; } .js .steps li { transform: none; } }

/* ── Abstands-Rhythmus: alle Flächen mit gleichem Abstand rundum (seitlich = zwischen Flächen) ── */
:root { --sheet-gap: clamp(10px, 1.5vw, 20px); }
.section-alt { margin: var(--sheet-gap); }
.quote-dark { padding: 0; }
.quote-dark .panel { margin: var(--sheet-gap); }
.footer { margin: var(--sheet-gap); }
main > .wrap:has(> .facts) { margin-bottom: clamp(40px, 5vw, 72px); }
#about { padding-bottom: clamp(36px, 4vw, 56px); }
.tech { padding-bottom: var(--section); }
.tech { padding-bottom: clamp(40px, 5vw, 72px); }

/* ── Ruhiger Hero: eine Familie, zwei Textfarben, Blau nur am Primär-Button ── */
.hero h1 { font-size: clamp(2.75rem, 1.5rem + 4.2vw, 5rem); letter-spacing: -0.035em; color: var(--ink); max-width: 12ch; }
.hero-sub { margin-top: 20px; font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.4375rem); line-height: 1.45; color: var(--ink-2); max-width: 40ch; font-weight: 400; }
.hero-actions { margin-top: 32px; }
.hero { padding-bottom: clamp(48px, 5vw, 64px); }
/* Navigation: Anruf-Pill immer sichtbar */
.js .nav-call, .js .nav.show-call .nav-call { opacity: 1; visibility: visible; transform: none; transition: none; }

/* ── Argument-Kacheln unter dem Hero ── */
.facts div { padding: 22px 22px 24px; }
.facts dt { font: 600 18px/1.3 var(--font-display); color: var(--ink); letter-spacing: -0.01em; }
.facts dd { margin-top: 8px; font: 400 16px/1.5 var(--font-body); color: var(--ink-2); letter-spacing: 0; }
.facts dd del { display: block; margin: 0 0 2px; color: var(--ink-2); font-weight: 600; text-decoration-color: var(--blue); text-decoration-thickness: 2px; }
@media (max-width: 1024px) { .facts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .hero h1 { max-width: 11ch; }
  .hero-actions .pill { flex: 1 1 100%; }
}
.hero-sub { max-width: 31em; }
@media (max-width: 700px) { .hero-sub { max-width: none; } }
.hero-sub { font-size: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem); max-width: 34em; }
.hero-sub { text-wrap: balance; }

/* ── Hero: WhatsApp-Glyphe (Markenfarbe, einzige Ausnahme vom Farbgesetz) und Telefonzeile ── */
.wa-logo { width: 22px; height: 22px; flex: none; }
.hero-call { margin-top: 18px; font-size: 1rem; color: var(--ink-2); }
.hero-call a { color: var(--ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.hero-call a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Hero-Grafik: weicher unterer Abschluss. Füllung folgt der Linie (main.js) und läuft per SVG-Verlauf aus;
      das Foto läuft per Maske aus (kein Opacity-Startzustand, LCP unverändert) ── */
.hero-visual .crown { overflow: visible; }
.hero-visual picture { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 84px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 84px), transparent); }
@media (max-width: 700px) {
  .hero-visual picture { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent); }
}

/* ── Unterseiten (Leistungsseiten, Übersicht, Rechtstexte) im Stil der Startseite ── */
.nav-links a[aria-current="page"] { background: var(--wash); color: var(--cobalt); }
.breadcrumb { padding-top: clamp(20px, 3vw, 36px); font-size: var(--fs-small); color: var(--ink-2); }
.breadcrumb ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.breadcrumb li { display: flex; align-items: center; gap: 10px; }
.breadcrumb li + li::before { content: "›"; color: var(--ink-2); opacity: .7; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ink-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 600; }

.page-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: end;
  padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(56px, 7vw, 96px); }
.page-hero h1 { font-size: clamp(2.375rem, 1.4rem + 3.2vw, 4rem); letter-spacing: -0.035em; max-width: 16ch; }
.page-hero .lead { margin-top: 20px; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-width: 46ch; }
.contact-card { display: grid; grid-template-columns: 76px 1fr; gap: 6px 18px; align-items: center; padding: 24px; background: var(--surface);
  border-radius: var(--r-lg); box-shadow: var(--shadow-soft); }
.contact-card picture { grid-row: span 2; width: 76px; height: 76px; border-radius: 50%; overflow: hidden; background: var(--wash); }
.contact-card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.contact-card .who { font: 600 1.1875rem/1.25 var(--font-display); color: var(--ink); letter-spacing: -0.01em; }
.contact-card .who > span { display: block; margin-top: 2px; font: 400 15px/1.4 var(--font-body); color: var(--ink-2); letter-spacing: 0; }
.contact-card .num { font: 600 1.5rem/1.1 var(--font-display); color: var(--ink); text-decoration: none; letter-spacing: -0.02em; white-space: nowrap; }
.contact-card .num:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.contact-card .hours { grid-column: 1 / -1; margin-top: 12px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--bg); font-size: 15px; line-height: 1.4; color: var(--ink-2); }

.section-tint { background: var(--stone); border-radius: var(--r-xl); margin: var(--sheet-gap); }
.section-head h2, .section > .wrap > h2 { font-size: var(--fs-h2); letter-spacing: -0.03em; max-width: 20ch; }
.section-head { display: grid; gap: 16px; margin-bottom: clamp(28px, 4vw, 48px); max-width: 46rem; }
.section-head p { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-width: 52ch; }
.section h2 + .prose { margin-top: 20px; }
.prose { max-width: 68ch; color: var(--ink-2); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: 16px; }
.prose ul { padding-left: 1.25rem; }
.more-link { margin-top: 28px; font-weight: 600; }

.entries { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.entries li { padding: clamp(22px, 2.4vw, 30px); background: var(--surface); border-radius: var(--r-lg); }
.section:not(.section-tint) .entries li { box-shadow: var(--shadow-soft); }
.entries h3 { font-size: 1.1875rem; line-height: 1.25; letter-spacing: -0.015em; margin-bottom: 8px; }
.entries p { font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.entries-flush { margin-top: 32px; }

.index { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.index a { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 28px 28px 76px; background: var(--surface);
  border-radius: var(--r-lg); color: var(--ink); text-decoration: none; transition: transform var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease); }
.section:not(.section-tint) .index a { box-shadow: var(--shadow-soft); }
.index a:hover { color: var(--ink); transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.index .t { font: 600 var(--fs-h3)/1.15 var(--font-display); letter-spacing: -0.02em; }
.index .d { font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.index .dots { display: none; }

.figures { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.figures li { padding: 26px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-soft); }
.section-tint .figures li { box-shadow: none; }
.figures .v { display: block; font: 600 clamp(2.25rem, 1.6rem + 2vw, 3rem)/1 var(--font-display); letter-spacing: -0.035em; color: var(--ink); }
.figures p { margin-top: 12px; font-size: 1rem; line-height: 1.5; }
.figures small { display: block; margin-top: 12px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }

.cta-band { margin: var(--sheet-gap); padding: clamp(56px, 7vw, 104px) 0; background: var(--deep); color: var(--on-deep-2); border-radius: var(--r-xl); }
.cta-band .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 56px; align-items: end; }
.cta-band h2 { font-size: var(--fs-h2); letter-spacing: -0.03em; color: var(--on-deep); }
.cta-band p { margin-top: 16px; font-size: var(--fs-lead); line-height: 1.5; max-width: 36ch; }
.cta-band .actions { display: grid; gap: 12px; }
.cta-band .num { margin-bottom: 8px; font: 600 clamp(2rem, 1.4rem + 2.2vw, 2.75rem)/1 var(--font-display); letter-spacing: -0.03em; color: var(--on-deep); text-decoration: none; white-space: nowrap; }
.cta-band .num:hover { color: var(--on-deep); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.pill-on-deep { background: transparent; color: var(--on-deep); box-shadow: inset 0 0 0 1.5px rgba(238, 242, 251, .32); }
.pill-on-deep:hover { background: rgba(238, 242, 251, .1); color: #fff; }
.cta-band :focus-visible { box-shadow: 0 0 0 3px var(--deep), 0 0 0 6px var(--link-on-deep); }

.legal { max-width: 46rem; padding-top: clamp(24px, 3vw, 40px); padding-bottom: var(--section); }
.legal h1 { font-size: clamp(2.375rem, 1.4rem + 3.2vw, 3.5rem); letter-spacing: -0.035em; }
.legal h2 { font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.02em; margin: 48px 0 12px; }
.legal h3 { font-size: 1.1875rem; line-height: 1.3; letter-spacing: -0.01em; margin: 28px 0 8px; }
.legal p, .legal ul { margin-top: 12px; }
.legal ul { padding-left: 1.25rem; }
.legal li + li { margin-top: 6px; }
.legal .stand { margin-top: 12px; color: var(--ink-2); }
.legal .box, .toc { margin-top: 20px; padding: 22px 24px; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-soft); }
.toc { margin-top: 32px; }
.toc h2 { margin: 0 0 12px; font-size: 1.1875rem; }
.toc ol { padding-left: 1.4rem; display: grid; gap: 4px; }

@media (max-width: 860px) {
  .page-hero, .cta-band .wrap { grid-template-columns: 1fr; align-items: start; }
  .contact-card { max-width: 30rem; }
  .figures { grid-template-columns: 1fr; }
}

/* ── Unterseiten: Feinschliff ── */
.nowrap { white-space: nowrap; }

/* Abschnittsrhythmus (alle Seiten): genau ein Abstand (--space-section) zwischen allen Blöcken; Flächen innen mit
   demselben Wert. Plain-Abschnitte haben nur Außenabstand – benachbarte Außenabstände fallen zusammen.
   Teile, die zu einem Abschnitt gehören (Hero → Eckdaten, Über mich → Technik-Leiste), nutzen --space-group. */
.subpage > .page-hero { padding-bottom: 0; }
main > .section { padding: 0; margin: var(--space-section) 0; }
main > .section-alt, main > .section-tint { margin: var(--space-section) var(--sheet-gap); padding: var(--space-section) 0; }
main > .quote-dark { margin: var(--space-section) 0; padding: 0; }
main > .quote-dark .panel { margin: 0 var(--sheet-gap); padding: var(--space-section) 0; }
main > .hero { padding-bottom: var(--space-group); }
main > .hero + .wrap { margin-bottom: var(--space-section); }
main > #about { padding-bottom: 0; margin-bottom: var(--space-group); }
main > .tech { margin: 0 0 var(--space-section); padding: 0; }
.footer { margin: var(--space-section) var(--sheet-gap) var(--sheet-gap); }
/* Aufruf und Footer bilden bewusst eine nachtblaue Einheit (getrennt durch eine feine Linie) */
main > .cta-band { margin: var(--space-section) var(--sheet-gap) 0; padding: var(--space-section) 0; border-radius: var(--r-xl) var(--r-xl) 0 0; }
main:has(> .cta-band) + .footer { margin-top: 0; padding-top: 0; border-radius: 0 0 var(--r-xl) var(--r-xl); }
main:has(> .cta-band) + .footer .footer-grid { padding-top: 56px; border-top: 1px solid rgba(238, 242, 251, .12); }
.subpage .legal { padding-bottom: 0; }

/* Überschriften: H2 dürfen breiter laufen */
.subpage .section-head { max-width: none; }
.subpage .section-head h2, .subpage .section > .wrap > h2 { max-width: 34ch; }
.subpage .section-head p { max-width: 56ch; }

/* Kacheln: ein Innenabstand, eine Titelgröße, mehr Luft zwischen Titel und Text */
.subpage .entries li, .subpage .index a, .subpage .figures li { padding: clamp(24px, 2.4vw, 30px); }
.subpage .entries h3, .subpage .index .t { margin: 0; font: 600 1.3125rem/1.25 var(--font-display); letter-spacing: -0.015em; }
.subpage .entries h3 + p, .subpage .index .d { margin-top: 12px; }
.subpage .entries p, .subpage .index .d { font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.subpage .index a { gap: 0; }
.subpage .index .t { order: 0; }
.subpage .index .d { order: 1; }
.subpage .index .more { order: 2; margin-top: auto; padding-top: 16px; }

/* Kontaktkachel im Seitenkopf: oben bündig mit der H1, Primär-Button und Telefonzeile */
.subpage .page-hero { align-items: start; }
.contact-card { grid-template-columns: 64px 1fr; gap: 16px; padding: 24px; }
.contact-card picture { grid-row: auto; width: 64px; height: 64px; }
.contact-card .pill { grid-column: 1 / -1; width: 100%; margin-top: 4px; }
.contact-card .hero-call { grid-column: 1 / -1; margin: 0; padding: 12px 16px; border-radius: var(--r-sm); background: var(--bg); font-size: 15px; line-height: 1.4; text-align: center; }

/* Aufruf-Panel wie der Startseiten-Hero: Kontakt aufnehmen, WhatsApp, Telefonzeile */
.cta-band .hero-call { margin-top: 6px; max-width: none; font-size: 1rem; line-height: 1.5; text-align: center; color: var(--on-deep-2); }
.cta-band .hero-call a, .cta-band .hero-call a:hover { color: var(--on-deep); }
.cta-band .pill-primary, .cta-band .pill-primary:hover { box-shadow: none; } /* kein Blau-Glühen auf Nachtblau */

/* Navigation: Links und Anruf-Pill rechtsbündig in der Pille (Desktop) */
@media (min-width: 861px) { .nav-inner > nav { margin-left: auto; } .nav-links { margin-left: 0; } }

/* Nutzen-Abschnitt der Leistungsseiten: ruhige Liste mit kleinem Häkchen statt Karten */
.benefits { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 36px 48px; }
.benefits li { position: relative; padding-left: 52px; }
.benefits li::before { content: ""; position: absolute; left: 0; top: -4px; width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c3f9e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 18px no-repeat; }
.section:not(.section-tint) .benefits li::before { background-color: var(--wash); }
.benefits h3 { font: 600 1.3125rem/1.25 var(--font-display); letter-spacing: -0.015em; }
.benefits p { margin-top: 8px; font-size: 1rem; line-height: 1.55; color: var(--ink-2); }

/* „Was ist …“: genannte Dienste als Pills (wie die Technik-Leiste der Startseite) */
.pills { list-style: none; padding: 0; margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; max-width: 68ch; }
.pills li { padding: 10px 18px; border-radius: var(--r-pill); background: var(--surface); box-shadow: 0 1px 2px rgba(20, 24, 33, .05);
  font: 600 16px/1.2 var(--font-display); letter-spacing: -0.005em; color: var(--ink); }
.pills + .figures { margin-top: 40px; }

/* ── Kontaktbereich kompakt: vier Schriftgrößen (H2, 17 px Text, 15 px Labels, 14 px Kleintext), zwei Textfarben ── */
#kontakt .head { margin-bottom: 32px; }
#kontakt .head p { margin-top: 12px; font-size: 17px; line-height: 1.5; }
.contact-direct { gap: 8px; }
.contact-direct div, .map-card { padding: 16px 20px; border-radius: var(--r-md); background: var(--surface); }
.contact-direct dt, .map-card h3 { font: 400 15px/1.4 var(--font-body); color: var(--ink-2); letter-spacing: 0; }
.contact-direct dd { margin-top: 2px; font: 600 17px/1.4 var(--font-display); letter-spacing: -0.005em; color: var(--ink); }
.contact-direct a { color: var(--ink); text-decoration: none; }
.contact-direct a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.map-card { gap: 8px; }
.map-card p { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.map-card .actions { margin-top: 4px; }
.map-card .more { min-height: 44px; font-size: 14px; }
.map-card.is-loaded { padding: 0; }

.form { padding: 32px; }
.form-grid { gap: 16px; }
.field { gap: 6px; }
.field label { font-size: 15px; line-height: 1.4; }
.field label .opt { font-size: 15px; }
.field input, .field select { height: 46px; min-height: 0; padding: 0 14px; font-size: 17px; line-height: 1.4; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23545b66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 16px no-repeat; }
.field select:focus { background-color: #fff; }
.field textarea { min-height: calc(4 * 1.45em + 22px); padding: 11px 14px; font-size: 17px; line-height: 1.45; }
.field-error { font-size: 14px; }
.form-foot { margin-top: 20px; gap: 12px 20px; }
.form-note { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.form-note .req-note { display: block; color: var(--ink-2); }
.form-status { font-size: 15px; }
@media (max-width: 700px) { .form { padding: 24px; } }

/* ── Phase 6 (QA) ── */
/* Bewegung reduzieren: Vorgehen-Abschnitt sofort im Endzustand (Linie voll, Schritte sichtbar), keine Übergänge */
@media (prefers-reduced-motion: reduce) {
  .js .steps::before, .js .steps::after, .js .steps li, .steps li::before { transition: none; }
  .js .steps li { opacity: 1; transform: none; }
  .js .steps:not(.is-in)::after { transform: none; }
  .js .steps::before { opacity: 1; }
}
/* Sehr schmale Bildschirme: lange Komposita in Überschriften trennen statt überlaufen („Netzwerksegmentierung“) */
@media (max-width: 480px) {
  h1, h2, h3 { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }
}
#kontakt .head h2 { max-width: none; } /* „Sprechen wir über Ihre IT.“ in einer Zeile (Wunsch Nico) */

/* ── Kontakt: Karte bzw. Platzhalter in fester Größe, Formular unten bündig ──
      Die Kachel bestimmt ihre Größe selbst (Mindesthöhe + Strecken im Raster), deshalb ersetzt die Google-Karte
      den Platzhalter ohne Layoutsprung. Breit: beide Spalten gleich hoch, das Nachrichtenfeld wächst mit. */
.map-card.map-ph { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 340px; padding: 24px; overflow: hidden; }
.map-bg { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; object-fit: cover; }
/* Hinweis-Kachel auf der Kartengrafik: Glas wie die Navigation, Rundung, Schatten und Innenabstand wie die Kontaktkacheln */
.map-overlay { display: grid; justify-items: center; gap: 10px; width: fit-content; max-width: min(21rem, 100%); padding: 16px 20px; text-align: center;
  background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
  border-radius: var(--r-md); box-shadow: var(--shadow-soft); }
@media (prefers-reduced-transparency: reduce) { .map-overlay { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } }
.map-pin { width: 36px; height: 36px; }
.map-overlay p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.map-overlay .actions { justify-content: center; margin-top: 2px; }
.map-card.map-ph iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (min-width: 861px) {
  .contact-grid { align-items: stretch; }
  .contact-side { grid-template-rows: auto 1fr; }
  .form { display: flex; flex-direction: column; }
  .form-grid { flex: 1; grid-template-rows: auto auto auto 1fr; }
  .field-full { display: flex; flex-direction: column; }
  .field-full textarea { flex: 1; }
}
@media (max-width: 860px) { .map-card.map-ph { height: 300px; min-height: 0; padding: 16px; } } /* feste Höhe: Karte ersetzt den Platzhalter ohne Sprung */
@media (max-width: 480px) {
  .map-overlay { gap: 8px; padding: 16px; }
  .map-overlay .actions { gap: 8px 10px; }
  .map-overlay .pill-small { padding-inline: 18px; }
  .map-pin { width: 30px; height: 30px; }
}

/* ── Hero mobil (≤ 767 px): aufgeräumt. Großes Foto, Krone und Welle entfallen (Bild wird dort gar nicht geladen,
      siehe <source media>); stattdessen kleiner Avatar mit Namen. Telefonzeile entfällt (Anruf-Button im Header).
      Desktop unverändert. ── */
.hero-person, .hero-facts { display: none; }
/* Einblend-Verzögerung an Klassen statt Position, damit der (auf Desktop ausgeblendete) Avatar nichts verschiebt */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-copy > .hero-sub { animation-delay: .12s; }
  .js .hero-copy > .hero-person { animation-delay: .16s; }
  .js .hero-copy > .hero-actions { animation-delay: .2s; }
  .js .hero-copy > .hero-call { animation-delay: .28s; }
}
@media (max-width: 767px) {
  .hero-visual, .hero .flow-line, .hero-call { display: none; }
  .hero { padding-top: 28px; }
  .hero-copy { padding-bottom: 0; }
  .hero h1 { font-size: 2.5rem; line-height: 1.06; }
  .hero-sub { margin-top: 16px; font-size: 1.125rem; line-height: 1.5; text-wrap: pretty; }
  .hero-person { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
  .hero-person img { width: 56px; height: 56px; border-radius: 50%; background: var(--wash); box-shadow: 0 0 0 3px var(--surface), var(--shadow-soft); }
  .hero-person-text { display: grid; gap: 1px; line-height: 1.3; text-align: left; }
  .hero-person strong { font: 600 17px/1.3 var(--font-display); color: var(--ink); }
  .hero-person-text > span { font-size: 15px; color: var(--ink-2); }
  .hero-actions { margin-top: 24px; }
  /* Buttons nebeneinander (ab 375 px in einer Zeile, darunter sauberer Umbruch) */
  .hero-actions { flex-wrap: wrap; gap: 8px; }
  .hero-actions .pill { flex: 1 1 auto; padding-inline: 14px; font-size: 16px; gap: 8px; }
  .hero-actions .wa-logo { width: 20px; height: 20px; }
}

/* ── Winterling: „Ganze Kundenstimme lesen“ im dunklen Zitat-Panel (alle Größen) ── */
.quote-dark .quote-full { margin-top: 28px; }
.quote-dark .quote-full summary { background: rgba(143, 179, 255, .16); color: var(--link-on-deep); }
.quote-dark .quote-full summary:hover { background: rgba(143, 179, 255, .26); }
.quote-dark .quote-full summary:focus-visible { box-shadow: 0 0 0 3px var(--deep), 0 0 0 6px var(--link-on-deep); }
.quote-dark .quote-full blockquote { background: rgba(255, 255, 255, .06); }
.quote-dark .quote-full blockquote p { font: 400 17px/1.6 var(--font-body); max-width: none; color: var(--on-deep); }
.quote-dark .quote-full-by { color: var(--on-deep-2); }

/* ── Startseite mobil (≤ 767 px) entschlackt: weniger Kacheln, gleiche Inhalte. Tablet/Desktop unverändert. ── */
@media (max-width: 767px) {
  /* Die vier Eckdaten-Kacheln gibt es mobil nicht; dafür zwei Kacheln im Hero (.hero-facts) */
  .facts-box { display: none; }

  /* Leistungen: Microsoft 365 groß, die übrigen fünf als kompakte Liste in einer Fläche */
  .bento { gap: 0; }
  .bento > .t-2x2 { margin-bottom: 12px; }
  .bento > .tile:not(.t-2x2), .bento > .tile:last-child { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-rows: auto auto;
    column-gap: 14px; row-gap: 2px; align-items: center; padding: 14px 16px; border-radius: 0; box-shadow: none; background: var(--surface); color: var(--ink); }
  .bento > .tile:not(.t-2x2) + .tile { box-shadow: inset 0 1px 0 var(--stone); }
  .bento > .t-2x2 + .tile { border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .bento > .tile:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg); }
  .bento > .tile:not(.t-2x2) .icon { grid-row: 1 / 3; width: 40px; height: 40px; padding: 9px; margin: 0; border-radius: 12px; background: var(--wash); color: var(--cobalt); }
  .bento > .tile:not(.t-2x2) h3 { grid-column: 2; font-size: 17px; line-height: 1.3; }
  .bento > .tile:not(.t-2x2) p { grid-column: 2; max-width: none; font-size: 14px; line-height: 1.4; color: var(--ink-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bento > .tile:not(.t-2x2) .more { grid-column: 3; grid-row: 1 / 3; min-height: 0; margin: 0; font-size: 0; gap: 0; color: var(--cobalt); }
  .bento > .tile:not(.t-2x2) .more .chev { font-size: 16px; background: var(--wash); }
  .bento > .tile:not(.t-2x2):hover, .bento > .tile:not(.t-2x2):active { transform: none; box-shadow: none; background: var(--wash); }
  .bento > .tile:not(.t-2x2) + .tile:hover { box-shadow: inset 0 1px 0 var(--stone); }
  .bento > .tile:not(.t-2x2):focus-visible { position: relative; z-index: 1; box-shadow: inset 0 0 0 3px var(--action); }
  /* Link unter den Leistungen: Pfeil direkt hinter dem Text */
  .bento-more .more { display: inline; line-height: 1.5; padding: 10px 0; }
  .bento-more .more .chev { display: inline-grid; vertical-align: middle; margin-left: 6px; }

  /* Über mich: Faktenkacheln 2×2 */
  .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ledger dd { -webkit-hyphens: auto; hyphens: auto; }
  .ledger div { padding: 14px; }

  /* Vorgehen: schlanke senkrechte Zeitleiste ohne Kachelrahmen */
  .steps { gap: 0; }
  .steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding: 0 0 28px; background: none; border-radius: 0; }
  .steps li:last-child { padding-bottom: 0; }
  .steps li::before { grid-row: 1 / 3; margin: 0; }
  .steps h3 { grid-column: 2; align-self: center; min-height: 44px; display: flex; align-items: center; font-size: 20px; }
  .steps p { grid-column: 2; margin-top: 2px; }
  .steps li::after { content: ""; display: block; position: absolute; left: 21px; top: 52px; bottom: 8px; right: auto; width: 2px; height: auto;
    border-radius: 2px; background: rgba(29, 88, 214, .22); transform-origin: top; }
  .steps li:last-child::after { display: none; }
  .js .steps li::after { transform: scaleY(1); transition: transform .5s var(--ease) calc(.25s + var(--k) * .1s); }
  .js .steps:not(.is-in) li::after { transform: scaleY(0); }

  /* Kontakt: Telefon, E-Mail, Adresse in einer Kachel; Karte etwas niedriger */
  .contact-direct { gap: 0; background: var(--surface); border-radius: var(--r-md); }
  .contact-direct div { background: none; border-radius: 0; padding: 14px 20px; }
  .contact-direct div + div { box-shadow: inset 0 1px 0 var(--stone); }
  .map-card.map-ph { height: 260px; }

  /* Footer: Leistungen und Netwise-Links zweispaltig */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer-grid > :nth-child(1), .footer-grid > :nth-child(2) { grid-column: 1 / -1; }
}
@media (max-width: 374px) { .map-card.map-ph { height: 300px; } }   /* Hinweis-Kachel bricht schmaler um */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { .js .steps li::after { transition: none; transform: none; } }

/* ── Hero mobil: Avatar-Zeile klappt die Eckdaten auf (main.js macht daraus einen <button>).
      Ohne JavaScript bleiben die Eckdaten sichtbar. Aufklappen über grid-template-rows (Wunsch Nico, nur nach Antippen). ── */
@media (max-width: 767px) {
  button.hero-person { appearance: none; border: 0; background: none; font: inherit; color: inherit; cursor: pointer;
    margin-left: -6px; padding: 6px 14px 6px 6px; border-radius: var(--r-pill); -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-short) var(--ease); }
  button.hero-person:hover, button.hero-person[aria-expanded="true"] { background: var(--wash); }
  button.hero-person:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--action); }
  .hero-person-chev { width: 18px; height: 18px; margin-left: 2px; color: var(--cobalt); flex: none; transition: transform var(--dur-mid) var(--ease); }
  button.hero-person[aria-expanded="true"] .hero-person-chev { transform: rotate(180deg); }
  /* Puls: weicher Ring hinter dem Avatar, 3× nach dem Laden, nach dem ersten Antippen nie wieder */
  .hero-person picture { position: relative; display: block; flex: none; }
  .hero-person picture img { position: relative; z-index: 1; display: block; }
  .hero-person picture::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(29, 88, 214, .22); opacity: 0; }
  /* Eckdaten im Hero: direkt unter der Avatar-Zeile, eingeklappt (Zustand ab dem ersten Bild: kein Layoutsprung).
     Höhen-Animation über grid-template-rows: dokumentierte Ausnahme, nur nach Antippen (CLAUDE.md). */
  .hero-facts { display: grid; grid-template-rows: 1fr; }
  .hero-facts > dl { min-height: 0; overflow: hidden; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hero-facts dl > div { margin: 14px 0 2px; padding: 14px; border-radius: var(--r-md); background: var(--surface); box-shadow: 0 1px 2px rgba(20, 24, 33, .05); }
  .hero-facts dt { font: 600 16px/1.3 var(--font-display); color: var(--ink); -webkit-hyphens: auto; hyphens: auto; }
  .hero-facts dd { margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
  .js .hero-facts { grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
  .js .hero-facts > dl { visibility: hidden; transition: visibility 0s linear .4s; }
  .js .hero-facts.is-open { grid-template-rows: 1fr; }
  .js .hero-facts.is-open > dl { visibility: visible; transition-delay: 0s; }
  .js .hero-facts dl > div { opacity: 0; transform: translateY(-6px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
  .js .hero-facts.is-open dl > div { opacity: 1; transform: none; }
  .js .hero-facts.is-open dl > div:nth-child(2) { transition-delay: .06s; }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  button.hero-person:not(.is-seen) picture::before { animation: avatar-pulse 1.8s var(--ease) .9s 3; }
}
@keyframes avatar-pulse { 0% { opacity: .9; transform: scale(1); } 70% { opacity: 0; transform: scale(1.45); } 100% { opacity: 0; transform: scale(1.45); } }
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .js .hero-facts, .js .hero-facts dl > div, .hero-person-chev { transition: none; }
}
/* Mobil ist die Unterzeile der größte Textblock und damit LCP-Element: nur bewegen, nie bei Opacity 0 starten */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .js .hero-copy > .hero-sub { animation-name: rise; }
}
/* Hero mobil (≤ 767 px), „Kontaktkarte“ (Variante C, von Nico am 24.10.2026 gewählt): natürliche Höhe, 48 px Luft
   unter der Navigation; „Leistungen“ ragt unten in den ersten Bildschirm. Avatar, Name und Pfeil in einer weißen Karte,
   die Eckdaten klappen in derselben Karte als Zeilen mit Trennlinie auf (keine Kacheln in der Karte). */
@media (max-width: 767px) {
  main > .hero { padding-top: 48px; padding-bottom: 8px; }
  .hero-actions { margin-top: 28px; }
  .hero-card { margin-top: 24px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-soft); overflow: hidden; }
  .hero-card .hero-person { width: 100%; margin: 0; padding: 12px 18px 12px 12px; border-radius: 0; }
  .hero-card button.hero-person:hover, .hero-card button.hero-person[aria-expanded="true"] { background: none; }
  .hero-card button.hero-person:focus-visible { box-shadow: inset 0 0 0 3px var(--action); }
  .hero-card .hero-person-chev { margin-left: auto; }
  .hero-card .hero-facts > dl { grid-template-columns: 1fr; gap: 0; }
  .hero-card .hero-facts dl > div { margin: 0; padding: 12px 18px 14px 80px; border-radius: 0; background: none; box-shadow: inset 0 1px 0 var(--stone); }
  .hero-card .hero-facts dt { font-size: 16px; }
  .hero-card .hero-facts dd { margin-top: 2px; }
  main > .hero + .facts-box + .section { margin-top: 40px; }
  /* „Leistungen“ steht im ersten Bildschirm und kann LCP-Element werden: nie bei Opacity 0 starten */
  .js #services > .head[data-reveal] { opacity: 1; }
}

/* ── Hero: kleine H1-Zeile (Pill wie auf der alten Seite) + großer Display-Satz, in Geist.
      Semantisch ist die Pill die H1; der Satz ist ein <p class="display"> und LCP-Element (nie bei Opacity 0).
      Farben auf der nachtblauen Hero-Fläche: siehe Block „Hero v2 Nachtblau“ weiter unten. ── */
.hero h1.hero-kicker { display: inline-block; max-width: none; padding: 7px 16px; border: 1.5px solid rgba(255, 255, 255, .7); border-radius: var(--r-pill);
  font: 600 12.5px/1.45 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: #fff; text-wrap: pretty; }
.hero h1.hero-kicker::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 9px; border-radius: 50%; background: #fff; vertical-align: .12em; }
.hero .display { margin-top: 28px; max-width: 12ch; font: 600 clamp(2.75rem, 1.4rem + 4.4vw, 5.25rem)/1.04 var(--font-display);
  letter-spacing: -0.035em; color: #fff; text-wrap: balance; }
.hero .hero-sub { margin-top: 26px; max-width: none; text-wrap: balance; }
.hero .hero-actions { margin-top: 36px; }
.hero .hero-call { margin-top: 22px; }
@media (prefers-reduced-motion: no-preference) {
  .hero h1.hero-kicker { animation: rise-fade .9s var(--ease) both; }
  .js .hero-copy > .display { animation: rise .9s var(--ease) .05s both; }   /* LCP: bleibt sichtbar */
}
@media (max-width: 767px) {
  /* einzeilig auf jeder Breite: Schrift skaliert mit der Breite (390 px ≈ 10,5 px, 375 px = 10 px, 320 px ≈ 8 px) */
  .hero h1.hero-kicker { align-self: flex-start; padding: 6px 8px; font-size: clamp(7px, calc((100vw - 80px) / 29.5), 11px); letter-spacing: .02em; line-height: 1.6; }
  .hero h1.hero-kicker::before { width: 5px; height: 5px; margin-right: 6px; }
  .hero .display { margin-top: 16px; max-width: none; font-size: min(3.5rem, 15vw); line-height: 1.02; }
  .hero .hero-sub { margin-top: 16px; max-width: none; }
  .hero .hero-actions { margin-top: 28px; }
}

/* ── Hero Desktop (zweispaltig, ab 861 px): Krone oben bündig mit dem Display-Satz (Pill 18 + 14 + 3 = 35 px, dazu
      28 px Abstand = 63 px); Foto und Fläche blenden unten 48 px unter der Telefonzeile weich aus. Die Konturlinie
      (main.js) folgt nur den Türmen, die Seiten laufen gerade nach unten und blenden wie die Fläche aus (v2). Kacheln folgen
      40 px unter dem sichtbaren Ende der Grafik (Wunsch Nico, 24.10.2026). ── */
@media (min-width: 861px) {
  .hero { --hero-kicker-offset: 63px; --hero-fade: 48px; }
  .hero h1.hero-kicker { line-height: 18px; }
  .hero-grid { align-items: stretch; }
  .hero-copy { align-self: center; padding-bottom: 0; }
  .hero-visual { display: block; position: relative; margin-top: var(--hero-kicker-offset); margin-bottom: calc(-1 * var(--hero-fade)); }
  /* Krone: Spitze der Linie um den mittleren Bogen an der Oberkante. Die Linie liegt um den Faktor 1,045 außen
     (main.js), ihre Spitze bei SVG y = 700 − 660 · 1,045 ≈ 10,3 (Box −30…700) → Höhe = 100 % · 730 / 689,7 */
  .hero-visual .crown { top: auto; bottom: 0; height: calc(100% * 730 / 689.7); width: auto; aspect-ratio: 540 / 730; }
  .hero-visual picture { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin-inline: auto; height: 100%; width: auto; aspect-ratio: 684 / 1357;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--hero-fade) - 72px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - var(--hero-fade) - 72px), transparent); }
  .hero-visual picture img { width: 100%; height: 100%; }
  main > .hero { padding-bottom: calc(var(--hero-fade) + 40px); }   /* Kacheln 40 px unter dem Ende des Ausfadens */
}

/* ── Hero-Pill: immer einzeilig ── */
.hero h1.hero-kicker { white-space: nowrap; }
@media (min-width: 768px) and (max-width: 1023px) { .hero h1.hero-kicker { font-size: 11px; letter-spacing: .03em; } }   /* schmale Textspalte */

/* ── Hero v2 „Nachtblau“ (von Nico am 25.10.2026 final gewählt): Der Hero der Startseite ist eine große runde Fläche
      in Nachtblau (--deep) mit einem weichen Licht in Logo-Blau oben rechts, gleich wie das Zitat-Panel (reines CSS,
      kein Bild). Texte auf der Fläche in Weiß (≥ 12:1); Türme und Glasflächen leicht blau getönt, damit sie nicht grau wirken. ── */
main > .hero { margin: 8px clamp(8px, 1.5vw, 20px) 0; border-radius: var(--r-xl); overflow: clip; color: #fff;
  background: radial-gradient(70% 90% at 92% 0%, rgba(52, 120, 254, .28) 0%, rgba(52, 120, 254, 0) 60%), var(--deep); }
.hero .display-accent { color: #8db6ff; }   /* „wirklich“ (Nico, 25.10.2026): deutlich vom Weiß abgesetzt, ≥ 7:1 auf Nachtblau */
.hero .hero-sub { color: #fff; }
.hero .hero-call { color: #fff; }
.hero .hero-call a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 4px; }
.hero .hero-call a:hover { text-decoration-color: #fff; }
/* Buttons auf Nachtblau: „Kontakt aufnehmen“ weiß mit Kobalt-Schrift; WhatsApp als blau getönter Glas-Button. Glyphe hier weiß:
   dokumentierte Ausnahme von der Grün-Vorgabe, nur auf der Hero-Fläche (Nico, 25.10.2026) */
.hero .hero-actions .pill-outline .wa-logo path { fill: #fff; }
.hero .hero-actions .pill-primary { background: #fff; color: var(--cobalt); box-shadow: 0 10px 26px rgba(15, 26, 58, .28); }
.hero .hero-actions .pill-primary:hover { background: var(--wash); color: var(--cobalt); box-shadow: 0 14px 30px rgba(15, 26, 58, .32); }
.hero .hero-actions .pill-outline { background: rgba(143, 179, 255, .12); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); }
.hero .hero-actions .pill-outline:hover { background: rgba(143, 179, 255, .22); color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
/* Fokus auf Nachtblau: weißer Ring mit Abstand */
.hero :focus-visible { outline: none; box-shadow: 0 0 0 3px var(--action), 0 0 0 6px #fff !important; }
.hero .hero-call a:focus-visible { border-radius: 4px; }
/* Krone und Konturlinie hell auf der Fläche; beide laufen unten weich aus (Linie: Maske aus main.js) */
.hero .flow-line path { stroke: rgba(255, 255, 255, .75); }
.hero .crown path { fill: rgba(52, 120, 254, .26) !important; }
.hero .crown { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 110px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 110px), transparent); }
/* Desktop: Eckdaten-Kacheln greifen weich über die Unterkante der Fläche (kein Loch, keine harte Kante) */
@media (min-width: 861px) {
  main > .hero { padding-top: 64px; padding-bottom: calc(var(--hero-fade) + 40px + 56px); }
  main > .hero + .facts-box { position: relative; z-index: 3; margin-top: -56px; }
  main > .hero + .facts-box .facts div { box-shadow: 0 1px 2px rgba(20, 24, 33, .05), 0 14px 34px rgba(15, 26, 58, .14); }
}
@media (min-width: 768px) and (max-width: 860px) { main > .hero { padding-bottom: 48px; } }
@media (max-width: 767px) {
  main > .hero { border-radius: var(--r-lg); padding-top: 36px; padding-bottom: 28px; }
}
@media (prefers-reduced-transparency: reduce) { .hero .hero-actions .pill-outline { background: rgba(15, 26, 58, .3); } }
/* Zitat-Panel: dieselbe Fläche wie der Hero (Nachtblau mit Logo-Blau-Licht oben rechts) */
main > .quote-dark .panel { background: radial-gradient(70% 90% at 92% 0%, rgba(52, 120, 254, .28) 0%, rgba(52, 120, 254, 0) 60%), var(--deep); }

/* ── Audit-Umsetzung 25.10.2026 (v2, nur Startseite) ── */
/* P2-1: beide Hero-Buttons exakt gleich hoch, gleiche Innenabstände (Rahmen als inset-Schatten, Glyphe ohne Zusatzhöhe) */
.hero .hero-actions .pill { box-sizing: border-box; height: 54px; min-height: 0; padding-block: 0; white-space: nowrap; }
/* P2-3: eine gemeinsame Innenkante für alle Abschnitte: Flächen (Hero, getönte Abschnitte, Zitat-Panel, Footer) sitzen
   --sheet-gap vom Rand und rücken ihren Inhalt um --gutter ein; Abschnitte ohne Fläche rücken um beides ein. */
/*   Gilt auf allen Seiten (Unterseiten seit 25.10.2026, Nico), damit Logo und Text überall auf einer Linie stehen. */
main :is(.wrap, .head) { max-width: calc(var(--maxw) + 2 * var(--sheet-gap)); padding-inline: calc(var(--sheet-gap) + var(--gutter)); }
main :is(.hero, .section-alt, .section-tint, .quote-dark .panel, .cta-band) :is(.wrap, .head) { max-width: var(--maxw); padding-inline: var(--gutter); }
main > .hero { margin-inline: var(--sheet-gap); }
/* Header auf allen Seiten gleich (Nico, 25.10.2026): Logo am Desktop auf der Textkante der Startseite
   (Navigationspille so breit wie die Textspalte) */
@media (min-width: 861px) { .nav .nav-inner { max-width: var(--maxw); padding-left: var(--gutter); } }
/* P2-2: mobile Kontaktkarte als blau getönte Glasfläche (ohne backdrop-filter); der weiße Button bleibt das hellste Element */
@media (max-width: 767px) {
  .hero .hero-card { background: rgba(143, 179, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38); color: #fff; }
  .hero .hero-card .hero-person strong, .hero .hero-card .hero-facts dt { color: #fff; }
  .hero .hero-card .hero-person-text > span, .hero .hero-card .hero-facts dd { color: #fff; }
  .hero .hero-card .hero-person-chev { color: #fff; }
  .hero .hero-card .hero-person img { box-shadow: 0 0 0 2px rgba(255, 255, 255, .55); }
  .hero .hero-card .hero-person picture::before { background: rgba(255, 255, 255, .35); }
  .hero .hero-card .hero-facts dl > div { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
  .hero .hero-card button.hero-person:focus-visible { box-shadow: inset 0 0 0 3px #fff !important; }
}
/* P3: Fast-gleiche Schriftgrößen zusammengelegt (nichts größer): 22 → 21, 18/19 → 17, 16 → 15 */
main:not(.subpage) { --fs-lead: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem); }   /* = Hero-Unterzeile, 18–21 px */
main:not(.subpage) .steps h3 { font-size: var(--fs-lead); }   /* wie Einleitungen: 21 px Desktop */
main:not(.subpage) .about .prose, main:not(.subpage) .facts dt, main:not(.subpage) .quote-card:not(:first-child) blockquote p { font-size: 17px; }
main:not(.subpage) :is(.more, .tech li, .quote-full summary, .field label, .facts dd, .hero-call) { font-size: 15px; }
@media (max-width: 767px) {
  main:not(.subpage) .steps h3 { font-size: 20px; }
  main:not(.subpage) :is(.hero-actions .pill, .hero-card .hero-facts dt), main:not(.subpage) .bento > .tile:not(.t-2x2) .more .chev { font-size: 15px; }
}
/* P3: „Technik, mit der ich arbeite“ ist jetzt H3 (Teil von „Persönlich erreichbar“) und sieht wie eine Zwischenüberschrift aus */
main:not(.subpage) .tech h3 { font: 600 17px/1.3 var(--font-display); color: var(--ink); letter-spacing: -0.01em; }
/* Pill mobil: Größe richtet sich nach der echten Spaltenbreite (Container-Einheit), nie breiter als die Spalte.
   Einzeilig ab 10 px (Breite ≈ 30 × Schriftgröße + 26 px); passt das nicht (Spalte < 326 px), zweizeilig nach
   „IT-Dienstleister ·“ in 11 px. Die Spalte darf nicht über ihren Inhalt wachsen (minmax(0, 1fr)). */
.hero h1.hero-kicker .kicker-br { display: none; }
@media (max-width: 767px) {
  .hero .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero .hero-copy { container-type: inline-size; min-width: 0; }
  .hero .hero-copy h1.hero-kicker { max-width: 100%; font-size: clamp(10px, (100cqi - 26px) / 30, 11px); }
}
@container (max-width: 325.98px) {
  .hero .hero-copy h1.hero-kicker { white-space: normal; font-size: 11px; line-height: 1.55; letter-spacing: .03em; padding: 8px 16px 8px 26px; text-indent: -12px; border-radius: var(--r-lg); }   /* Punkt hängt, beide Zeilen auf einer Kante */
  .hero h1.hero-kicker .kicker-br { display: inline; }
  .hero h1.hero-kicker::before { width: 5px; height: 5px; margin-right: 7px; }
}
/* Logo mobil auf der Textkante: Navigationspille so breit wie die Flächen, Logo um --gutter eingerückt (alle Seiten) */
@media (max-width: 860px) {
  .nav { padding-inline: var(--sheet-gap); }
  .nav .nav-inner { padding-left: var(--gutter); }
}
/* Header mobil deckend weiß, nichts schimmert durch (Nico, 25.10.2026; alle Seiten) */
@media (max-width: 767px) { .nav .nav-inner { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* Listen mit genau drei Kacheln (z. B. KI „E-Mails / Meetings / Prozesse“): drei Spalten oder eine, nie 2 + 1 */
.entries:has(> li:nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .entries:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }