/* Hallmark · shape: Index-First (the hub is its list: six services as full-width rows, then the sample sites, then where to start) · genre: modern-minimal · theme: dose (by request, blue ground, the logo blue as its one signal) · redesign: full · job: hire (quote request, callback) · hero: Banner (head on 1 to 7, the line and the action on 9 to 12; the index starts above the fold) · nav: three-part bar (shared chrome, 5 real destinations) · footer: index columns under a mast (shared chrome, a hub with a real sitemap) · signature: the six services set as one index, Social Media as the larger lead row · imagery: 5 screenshots of the sample sites (rail, Musterprojekt) · posture: restrained, no night band, the night footer only · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H5 E4 S3 R5 V4 · weakest: S, a list of services fits any agency; the rows keep the owner's own lines and the sample sites show the webdesign row instead of describing it */
/* Hallmark · reworded "Der Schwerpunkt liegt auf Social Media. Website, SEO und Branding bauen wir so, dass sie Ihre Kanäle stützen statt danebenzustehen, ein Ansprechpartner für alles, auf Deutsch und Türkisch." to "Der Schwerpunkt liegt auf Social Media. Website, SEO und Branding stützen Ihre Kanäle." · 58 the hero holds one line; the Ansprechpartner fact moved to the close */
/* Hallmark · reworded every " – " in the service lines to a comma or semicolon · 19 names spaced dashes */
/* Hallmark · dropped badge "Leistungen" over the head · 54 eyebrow; the crumb back to Startseite stays */
/* Hallmark · dropped link labels "Social Media entdecken", "Webdesign entdecken", "SEO entdecken", "Branding entdecken", "Lösungen entdecken", "Support entdecken" · each whole row is the link now, the label repeated its heading */
/* Hallmark · dropped Material Symbols icon font and the six icon tiles · 3; rows carry no icon tiles, the arrow comes from the shared sprite */
/* Hallmark · dropped js/motion.js, js/reveal.js · one IntersectionObserver reveal on section heads replaces both scripts on this page */
/* Hallmark · dropped the inline footer-year script · chrome.js writes the footer year on every page */
/* Hallmark · dropped btn-de, btn-tr, btn-de-footer, btn-tr-footer · the shared chrome buttons carry data-lang-btn and chrome.js syncs aria-pressed */
/* Hallmark · added the five Musterprojekte, the Profesyonel Paket line and the Hotel Solutions line · the coordinator allowed the sample-site screenshots; the hub had 6 rows and nothing to show, the lines are the homepage's own words */
/* Hallmark · waive 78 · the 31px h2 are the six index rows of a hub, real section heads run at --text-section · the hub index keeps all six services on the first two screens, so each row title sits at --text-2xl */
/* Hallmark · waive 77 · a band of one head, one line and the quote action, once a page · the close after the Musterseiten rail asks only where to start, the rail above carries the mass */
/* Hallmark · answered F4 · the hero and the close each carry the filled quote button; the hub is a crossroads and the quote is the one action */

/* ── hero, a banner ───────────────────────────────────────── */
.hub-hero { padding-block: var(--space-2xl) var(--space-xl); }
.hub-hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); align-items: end; }
.hub-hero__head { grid-column: 1 / 8; }
.hub-hero h1 { max-width: 13ch; font-size: clamp(2.75rem, 3.6vw + 1rem, 4.75rem); }
.hub-hero__side { grid-column: 9 / 13; display: grid; gap: var(--space-lg); justify-items: start; }
.crumb { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 44px; margin-bottom: var(--space-md); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 500; text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.crumb .icon { width: 16px; height: 16px; }
.crumb:hover { color: var(--color-accent); }
.crumb:active { color: var(--color-ink); }
.crumb:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }

/* ── the index ────────────────────────────────────────────── */
.hub-index { padding-block: var(--space-xl) var(--section-gap); }
.hub { margin: 0; padding: 0; list-style: none; counter-reset: svc; border-top: 2px solid var(--color-ink); }
.hub > li { counter-increment: svc; border-bottom: 1px solid var(--color-rule); }
.hub-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-sm) var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); color: inherit; text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.hub-row::before { content: counter(svc); grid-column: 1; font: 700 var(--text-xl)/1 var(--font-display); color: var(--color-muted); font-variant-numeric: tabular-nums; padding-left: var(--space-sm); }
.hub-row h2 { grid-column: 2 / 7; max-width: none; font-size: var(--text-2xl); line-height: 1.15; }
.hub-row p { grid-column: 7 / 12; color: var(--color-ink-2); max-width: 56ch; }
.hub-row__arrow { grid-column: 12; justify-self: end; align-self: center; margin-right: var(--space-sm); color: var(--color-muted); transition: color var(--dur-short) var(--ease-out); }
.hub-row:hover { background: var(--color-paper-2); }
.hub-row:hover h2, .hub-row:hover .hub-row__arrow { color: var(--color-accent); }
.hub-row:active { background: var(--color-paper-3); }
.hub-row:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.hub__lead .hub-row { padding-block: var(--space-xl); }
.hub__lead .hub-row h2 { font-size: var(--text-section); }
.hub__lead .hub-row::before { color: var(--color-accent); }
.hub-row__tag { margin: 0 var(--space-xs) 0 0; }
.hub__also { margin-top: var(--space-lg); color: var(--color-ink-2); }
.hub__also a { color: var(--color-ink); font-weight: 500; }
.hub__also a:hover { color: var(--color-accent); }
.hub__also a:active { color: var(--color-ink-2); }
.hub__also a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ── close ────────────────────────────────────────────────── */
.hub-close { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); align-items: start; padding-top: var(--space-2xl); border-top: 1px solid var(--color-rule); }
.hub-close h2 { grid-column: 1 / 7; }
.hub-close__body { grid-column: 8 / 13; }
.hub-close__note { margin-top: var(--space-md); color: var(--color-ink-2); font-weight: 500; }
.hub-close__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }

@media (prefers-reduced-motion: reduce) { .hub-row, .hub-row__arrow, .crumb { transition: none; } }

/* ── responsive ───────────────────────────────────────────── */
@media (max-width: 60rem) {
  .hub-hero__grid, .hub-close { grid-template-columns: minmax(0, 1fr); }
  .hub-hero__grid > *, .hub-close > * { grid-column: 1 / -1; }
  .hub-row { grid-template-columns: 40px minmax(0, 1fr) 24px; }
  .hub-row::before { grid-column: 1; grid-row: 1; padding-left: 0; }
  .hub-row h2 { grid-column: 2; grid-row: 1; }
  .hub-row p { grid-column: 2; grid-row: 2; }
  .hub-row__arrow { grid-column: 3; grid-row: 1; margin-right: 0; }
  .hub__lead .hub-row h2 { font-size: var(--text-2xl); }
}