/* Hainberg Digital — Unterseiten. Laedt nach hd-site.css und nimmt dieselbe Linie auf:
   Stage-Hintergrund, helle Schrift, eckige Karten mit 2px Fuge, Blau nur fuer Hervorhebungen,
   Orange nur als kleine Punkte und Pfeile. Werte kommen aus den Tokens. */

a { text-decoration: none; }
strong, b { font-weight: 600; }
h1, h2, h3, h4, figure, blockquote, dl, dd { margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
body { color: var(--ink); }
.hd-btn--primary { background: var(--royal); color: var(--on-royal); }
.hd-btn--ghost { color: var(--ink); }
.hd-btn { justify-content: center; text-align: center; }
.hd-btn .ar { font-size: 1.15em; line-height: 1; }

/* ---------- Raster ---------- */
.wrap { max-width: 1200px; margin-inline: auto; padding-inline: var(--space-8); }
.wrap--narrow { max-width: 820px; }
.sec { padding-block: var(--space-24); }
.sec--tight { padding-block: var(--space-16); }
.sec--soft + .sec--soft { padding-top: 0; }
.split { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-12); align-items: center; }
.split--top { align-items: start; }
.split--rev > *:first-child { order: 2; }

/* ---------- Typografie ---------- */
h1, h2, h3, .h1, .h2, .h3 { font-family: var(--font-display); overflow-wrap: break-word; hyphens: manual; }
h1, .h1 { font-size: clamp(44px, 7vw, var(--text-display-xl-size)); line-height: .95; font-weight: var(--text-display-xl-weight); letter-spacing: var(--text-display-xl-ls); word-spacing: .08em; }
h1 .hd-serif { letter-spacing: -.02em; font-size: 1.06em; }
h2, .h2 { font-size: var(--text-display-l-size); line-height: 1; font-weight: var(--text-display-l-weight); letter-spacing: var(--text-display-l-ls); word-spacing: .08em; }
h3, .h3 { font-size: var(--text-title-size); line-height: var(--text-title-lh); font-weight: var(--text-title-weight); letter-spacing: var(--text-title-ls); }
.h4 { font-family: var(--font-display); font-size: var(--text-title-size); line-height: var(--text-title-lh); font-weight: var(--text-title-weight); letter-spacing: var(--text-title-ls); }
.article-title { font-size: clamp(36px, 5.4vw, var(--text-display-l-size)); hyphens: auto; }
.accent { color: inherit; }
.lede { font-size: var(--text-lead-size); line-height: var(--text-lead-lh); letter-spacing: var(--text-lead-ls); color: var(--ink-muted); max-width: 60ch; }
.muted { color: var(--ink-muted); }
p + p { margin-top: var(--space-4); }
.eyebrow { display: block; margin-bottom: var(--space-4); font-size: var(--text-label-size); line-height: var(--text-label-lh); font-weight: var(--text-label-weight); letter-spacing: var(--text-label-ls); text-transform: uppercase; color: var(--paper); }
.sec-head { margin-bottom: var(--space-12); }
.sec-head .lede { margin-top: var(--space-6); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.link-arrow { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink); font-weight: 600; }
.link-arrow:hover { text-decoration: underline; }
.link-arrow .ar { color: var(--tangerine); }
[style*="border-bottom:1px solid"] { text-decoration: none; }

/* ---------- Brotkrumen ---------- */
.crumb { padding-top: var(--space-8); font-size: var(--text-small-size); line-height: var(--text-small-lh); color: var(--ink-muted); }
.crumb ol { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0; padding: 0; list-style: none; }
.crumb li + li::before { content: "/"; margin-right: var(--space-2); }
.crumb a:hover { color: var(--ink); }

/* ---------- Seiten-Hero ---------- */
.hero { padding-block: var(--space-16); }
.hero--page { padding-top: var(--space-12); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
.hero__grid--proof { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; }
.hero .hd-pilot { margin-bottom: var(--space-6); }
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: var(--text-small-size); line-height: var(--text-small-lh); }
.hero__meta li { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-muted); }
.hero__meta li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--tangerine); }
.hero__meta a { color: var(--ink); font-weight: 600; }
.hero__meta a:hover { text-decoration: underline; }
.proof { display: grid; gap: var(--space-3); padding: var(--space-8); background: var(--night-raised); align-content: center; }
.proof__k { font-size: var(--text-label-size); line-height: var(--text-label-lh); font-weight: var(--text-label-weight); letter-spacing: var(--text-label-ls); text-transform: uppercase; color: var(--ink-muted); }
.proof__n { font-family: var(--font-display); font-size: var(--text-display-xl-size); line-height: var(--text-display-xl-lh); font-weight: var(--text-display-xl-weight); letter-spacing: var(--text-display-xl-ls); }
.proof__l { font-size: var(--text-lead-size); line-height: var(--text-lead-lh); }
.proof__s { font-size: var(--text-small-size); line-height: var(--text-small-lh); color: var(--ink-muted); }

/* ---------- Kennzahlen ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
.stats--1 { grid-template-columns: minmax(0, 1fr); }
.stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--night-raised); }
.stat__n { font-family: var(--font-display); font-size: var(--text-headline-size); line-height: var(--text-headline-lh); font-weight: var(--text-headline-weight); letter-spacing: var(--text-headline-ls); }
.stat__l { color: var(--ink-muted); }

/* ---------- Referenzen ---------- */
.cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.case { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--night-raised); }
.case--wide { grid-column: 1 / -1; }
.case__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--space-12); }
.case__tag { flex: none; font-size: var(--text-label-size); line-height: var(--text-label-lh); font-weight: var(--text-label-weight); letter-spacing: var(--text-label-ls); text-transform: uppercase; color: var(--ink-muted); }
.case__visual { aspect-ratio: 16 / 8; display: grid; place-items: center; overflow: hidden; background: var(--night); }
.case__visual img { width: 100%; height: 100%; object-fit: contain; }
.case__visual--cover img { object-fit: cover; }
.case__visual--portrait img { width: auto; max-width: 64%; }
.case dl { display: grid; gap: var(--space-4); }
.case dt { margin-bottom: var(--space-1); font-size: var(--text-label-size); line-height: var(--text-label-lh); font-weight: var(--text-label-weight); letter-spacing: var(--text-label-ls); text-transform: uppercase; color: var(--ink-muted); }
.case__result { display: flex; align-items: center; gap: var(--space-4); margin-top: auto; padding: var(--space-4) var(--space-6); background: var(--night); color: var(--paper); }
.case__result .n { flex: none; font-family: var(--font-display); font-size: var(--text-headline-size); line-height: var(--text-headline-lh); font-weight: var(--text-headline-weight); letter-spacing: var(--text-headline-ls); }
.case__result .t { min-width: 0; font-weight: 500; line-height: var(--text-small-lh); }
.case__result--link { justify-content: space-between; }
.case__result--link > span:first-child { display: flex; align-items: center; gap: var(--space-4); flex: 1; min-width: 0; }
.case__result .ar { flex: none; color: var(--tangerine); line-height: 1; }
.case__fine { font-size: var(--text-small-size); line-height: var(--text-small-lh); color: var(--ink-muted); }
.logos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }
.logos li { display: flex; align-items: center; justify-content: center; min-height: 120px; padding: var(--space-6) var(--space-4); background: var(--paper); }
.logos img { width: auto; max-height: var(--space-12); object-fit: contain; }
.logos img.is-stacked { max-height: var(--space-16); }
.wordmark { font-family: var(--font-display); font-weight: 800; text-align: center; color: var(--charcoal); line-height: 1.15; }
.wordmark small { display: block; margin-top: var(--space-1); font-size: var(--text-label-size); font-weight: 600; letter-spacing: var(--text-label-ls); }

/* ---------- Ablauf, Kacheln, Chips ---------- */
.steps { counter-reset: s; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
.steps:has(> .step:nth-child(3):last-child), .steps:has(> .step:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.step { counter-increment: s; padding: var(--space-6); background: var(--night-raised); }
.step::before { content: counter(s, decimal-leading-zero); display: block; margin-bottom: var(--space-6); font-size: var(--text-label-size); line-height: var(--text-label-lh); font-weight: var(--text-label-weight); letter-spacing: var(--text-label-ls); opacity: .7; }
.step h3 { margin-bottom: var(--space-3); }
.step p { color: var(--ink-muted); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.tile { padding: var(--space-6); background: var(--night-raised); }
.tile h3, .tile h2.h3 { margin-bottom: var(--space-2); }
.tile p { color: var(--ink-muted); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chips li { padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); background: var(--night-raised); font-weight: 600; }
.cta-band { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-8); align-items: center; }

/* ---------- Karten ---------- */
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.card-grid:has(> .card-link:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-link { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--night-raised); }
.card-link p { color: var(--ink-muted); }
.card-link > a::after, .card-link h2 a::after, .card-link h3 a::after { content: ""; position: absolute; inset: 0; }
.card-link:hover h2 a, .card-link:hover h3 a { text-decoration: underline; }
.card-link__meta { font-size: var(--text-label-size); line-height: var(--text-label-lh); font-weight: var(--text-label-weight); letter-spacing: var(--text-label-ls); text-transform: uppercase; color: var(--ink-muted); }
.card-link h2 { font-size: var(--text-title-size); line-height: var(--text-title-lh); font-weight: var(--text-title-weight); letter-spacing: var(--text-title-ls); word-spacing: normal; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); padding-block: var(--space-6); cursor: pointer; list-style: none; font-family: var(--font-display); font-size: var(--text-title-size); line-height: var(--text-title-lh); font-weight: var(--text-title-weight); letter-spacing: var(--text-title-ls); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "→"; flex: none; font-family: var(--font-sans); font-size: var(--text-body-size); font-weight: 400; color: var(--tangerine); transition: transform .15s ease; }
.faq details[open] summary::after { transform: rotate(90deg); }
.faq__a { padding-bottom: var(--space-6); max-width: 70ch; color: var(--ink-muted); }
.faq__a ul { display: grid; gap: var(--space-2); margin-top: var(--space-3); }

/* ---------- Listen in Texten ---------- */
.faq__a li, .prose li, .article ul li, .lp-list li { position: relative; padding-left: var(--space-6); }
.faq__a li::before, .prose li::before, .article ul li::before, .lp-list li::before { content: ""; position: absolute; left: 0; top: .65em; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--tangerine); }

/* ---------- Kontakt ---------- */
.contact-grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-12); }
.contact-card { display: grid; gap: 2px; }
.contact-card a, .contact-card div { display: grid; gap: var(--space-1); padding: var(--space-6); background: var(--night-raised); }
.contact-card .k { font-size: var(--text-label-size); line-height: var(--text-label-lh); font-weight: var(--text-label-weight); letter-spacing: var(--text-label-ls); text-transform: uppercase; color: var(--ink-muted); }
.contact-card .v { font-weight: 600; overflow-wrap: anywhere; }
.contact-card a:hover .v { text-decoration: underline; }
.map-card { display: grid; grid-template-columns: 5fr 7fr; background: var(--night-raised); }
.map-card__copy { display: grid; align-content: center; gap: var(--space-4); padding: var(--space-8); }
.map-card__frame { display: block; width: 100%; height: 420px; border: 0; }
.form .btn-row { margin-top: var(--space-2); }

/* ---------- Bilder ---------- */
.portrait img { width: 100%; height: auto; }

/* ---------- Rechtstexte ---------- */
.prose { max-width: 74ch; }
.prose h2 { font-size: var(--text-headline-size); line-height: var(--text-headline-lh); font-weight: var(--text-headline-weight); letter-spacing: var(--text-headline-ls); margin-top: var(--space-16); margin-bottom: var(--space-6); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--space-8); margin-bottom: var(--space-2); }
.prose p, .prose li { color: var(--ink-muted); }
.prose strong { color: var(--ink); }
.prose ul { display: grid; gap: var(--space-2); margin: var(--space-4) 0; }
.prose a, .article a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Ratgeber-Artikel und Referenz-Details ---------- */
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--space-16); align-items: start; }
.article { max-width: 74ch; }
.article > p, .article > ul, .article > ol { color: var(--ink-muted); }
.article > p { margin-top: var(--space-6); }
.article h2 { font-size: var(--text-headline-size); line-height: var(--text-headline-lh); font-weight: var(--text-headline-weight); letter-spacing: var(--text-headline-ls); margin-top: var(--space-12); margin-bottom: var(--space-6); }
.article h3 { margin-top: var(--space-8); margin-bottom: var(--space-2); }
.article ul, .article ol { display: grid; gap: var(--space-3); margin: var(--space-6) 0; }
.article ol { counter-reset: item; list-style: none; padding: 0; }
.article ol li { position: relative; padding-left: var(--space-6); counter-increment: item; }
.article ol li::before { content: counter(item) "."; position: absolute; left: 0; top: 0; color: var(--ink); font-weight: 700; }
.article strong { color: var(--ink); }
.article__intro { font-size: var(--text-lead-size); line-height: var(--text-lead-lh); color: var(--ink) !important; }
.article__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-top: var(--space-6); font-size: var(--text-small-size); line-height: var(--text-small-lh); color: var(--ink-muted); }
.article-callout { margin-block: var(--space-8); padding: var(--space-6); background: var(--night-raised); }
.article-callout p:first-child { margin-top: 0; }
.article-source { font-size: var(--text-small-size); color: var(--ink-muted) !important; }
.article-aside { position: sticky; top: var(--space-6); display: grid; gap: 2px; }
.article-aside > div, .article-aside > a { padding: var(--space-4); background: var(--night-raised); }
.article-aside a:hover { text-decoration: underline; }
.article-aside .k { display: block; margin-bottom: var(--space-1); font-size: var(--text-label-size); line-height: var(--text-label-lh); font-weight: var(--text-label-weight); letter-spacing: var(--text-label-ls); text-transform: uppercase; color: var(--ink-muted); }
.author-box { display: grid; grid-template-columns: 72px 1fr; gap: var(--space-4); align-items: center; margin-top: var(--space-12); padding: var(--space-6); background: var(--night-raised); }
.author-box img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-pill); }
.author-box p { margin-top: var(--space-1); font-size: var(--text-small-size); line-height: var(--text-small-lh); color: var(--ink-muted); }
.inline-links { display: grid; gap: var(--space-3); margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.project-gallery { display: grid; gap: var(--space-6); margin: var(--space-8) auto 0; align-items: start; }
.project-gallery--single { max-width: 880px; }
.project-gallery--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 980px; }
.project-visual__frame { display: grid; place-items: center; overflow: hidden; background: var(--night-raised); }
.project-visual__frame img { width: 100%; height: 100%; object-fit: contain; }
.project-visual--landscape .project-visual__frame { aspect-ratio: 16 / 9; }
.project-visual--square .project-visual__frame { aspect-ratio: 1; }
.project-visual--square { max-width: 620px; margin-inline: auto; }
.project-visual--portrait { max-width: 420px; margin-inline: auto; }
.project-visual--portrait .project-visual__frame { aspect-ratio: 9 / 16; }
.project-visual--cover .project-visual__frame img { object-fit: cover; }
.project-visual figcaption { margin-top: var(--space-2); font-size: var(--text-small-size); line-height: var(--text-small-lh); color: var(--ink-muted); }

/* ---------- Einseiter-Landingpage ---------- */
.lp-hdr .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-6); }
.lp-hdr img { height: 28px; width: auto; }
.lp-hero { padding-block: var(--space-12) var(--space-16); }
.lp-hero__grid { display: grid; grid-template-columns: 11fr 9fr; gap: var(--space-12); align-items: center; }
.lp-shots { display: grid; gap: var(--space-4); }
.lp-shots figure { overflow: hidden; background: var(--night-raised); }
.lp-shots img { width: 100%; height: auto; }
.lp-shots figcaption { padding: var(--space-2) var(--space-4); font-size: var(--text-label-size); font-weight: var(--text-label-weight); letter-spacing: var(--text-label-ls); text-transform: uppercase; color: var(--ink-muted); }
.lp-two { display: grid; grid-template-columns: 5fr 4fr; gap: 2px; }
.lp-box { padding: var(--space-8); background: var(--night-raised); }
.lp-box h2 { margin-bottom: var(--space-4); font-size: var(--text-headline-size); line-height: var(--text-headline-lh); }
.lp-list { display: grid; gap: var(--space-3); }
.lp-list--no li::before { background: var(--ink-muted); }
.lp-note { margin-top: var(--space-6); color: var(--ink-muted); }
.lp-minifoot { padding-block: var(--space-6); border-top: 1px solid var(--line); font-size: var(--text-small-size); color: var(--ink-muted); }
.lp-minifoot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-6); }
.lp-minifoot a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Mobil ---------- */
@media (max-width: 980px) {
  .article-layout, .contact-grid, .split, .hero__grid--proof, .cta-band, .map-card, .lp-hero__grid, .lp-two { grid-template-columns: minmax(0, 1fr); }
  .split--rev > *:first-child { order: 0; }
  .article-aside { position: static; }
  .steps, .steps:has(> .step:nth-child(3):last-child), .steps:has(> .step:nth-child(6):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .wrap { padding-inline: var(--space-4); }
  .sec { padding-block: var(--space-16); }
  .sec--tight { padding-block: var(--space-12); }
  .hero { padding-block: var(--space-8) var(--space-12); }
  h2, .h2 { font-size: var(--text-headline-size); line-height: var(--text-headline-lh); letter-spacing: var(--text-headline-ls); }
  .proof__n { font-size: var(--text-display-l-size); }
  .stats, .stats--2, .stats--3, .cases, .steps, .steps:has(> .step:nth-child(3):last-child), .steps:has(> .step:nth-child(6):last-child), .tiles, .card-grid, .card-grid:has(> .card-link:nth-child(3):last-child), .project-gallery--pair { grid-template-columns: minmax(0, 1fr); }
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portrait img { max-height: 340px; object-fit: cover; object-position: 50% 22%; }
  .map-card__frame { height: 340px; }
  .faq summary { font-size: var(--text-body-size); line-height: var(--text-body-lh); }
}
@media (max-width: 560px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .hd-btn { width: 100%; }
  .hero__meta { flex-direction: column; }
  .case__top { flex-wrap: wrap; }
  .case__result { padding: var(--space-4); }
}
.inline-links > strong { color: var(--hs-heading); }