/* ==========================================================================
   VertexPK – Startseite
   Hero (dunkel) · Leistungen · Leitsatz · Individualität + Beispiele · Werte · Team · Kontakt
   Die Seite scrollt ganz normal durch: nichts wird festgehalten (kein Pinning, kein
   horizontaler Scroll). Alles ist ohne JavaScript vollständig lesbar.
   ========================================================================== */

/* ---- Übergang dunkel → hell: Hero klebt, der helle Abschnitt gleitet darüber ---------- */
.stack { position: relative; }
.stack > .hero { position: relative; z-index: 0; }
.stack > .svc { position: relative; z-index: 1; background: var(--paper); box-shadow: 0 -1px 0 var(--paper); }

/* ---- 1 · Hero ---------------------------------------------------------------- */
.hero {
    position: relative;
    isolation: isolate;
    display: flex;
    min-height: min(100svh, 640px);
    padding: calc(var(--header-h) + var(--safe-top) + clamp(20px, 4vh, 48px)) 0 clamp(32px, 6vh, 64px);
    overflow: hidden;
    overflow: clip;
}
.hero__canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.hero__inner {
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    row-gap: clamp(28px, 4.5vh, 48px);
}
.hero__meta {
    grid-row: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    font-size: var(--fs-14);
    font-weight: 600;
    color: var(--on-ink-2);
}
.hero__meta-rule { display: block; width: 40px; height: 1px; background: currentColor; opacity: 0.6; }
.hero__title {
    grid-row: 3;
    max-width: 12.5em;
    font-size: clamp(2.125rem, 1.3rem + 3.5vw, 4.25rem);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
.hero__line { padding-block: 0.06em 0.1em; margin-block: -0.06em -0.1em; }
.hero__line--accent { color: var(--orange); }
.hero__foot { grid-row: 4; display: grid; gap: 28px; align-items: end; }
.hero__text { max-width: 30em; font-size: var(--fs-20); line-height: 1.5; color: var(--on-ink-2); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 900px) {
    .hero__foot { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
    .hero__text { grid-column: 1 / span 5; }
    .hero__actions { grid-column: 7 / span 5; justify-self: start; }
}
@media (max-width: 479px) {
    .hero__actions { flex-direction: column; align-items: stretch; }
}

/* ---- 2 · Leistungen ------------------------------------------------------------ */
/* overflow-x: clip – die Server der Hosting-Szene starten rechts außerhalb und dürfen die Seite
   nicht seitlich scrollbar machen (clip statt hidden: kein eigener Scroll-Container) */
.svc { position: relative; padding-block: var(--section-y); overflow-x: clip; }
.svc__grid { display: grid; gap: clamp(48px, 7vw, 96px); }
.svc__intro { display: grid; gap: 24px; }
.svc__title { max-width: 18ch; font-size: var(--fs-h1); letter-spacing: -0.02em; line-height: 1.12; }
.svc__list { display: grid; gap: clamp(48px, 6vw, 88px); counter-reset: svc; }
.svc__item { display: grid; gap: 18px 24px; }
.svc__num { display: none; font-size: var(--fs-14); font-weight: 600; color: var(--orange-deep); font-variant-numeric: tabular-nums; }
.svc__body { display: grid; gap: 14px; align-content: start; }
.svc__name { max-width: 16ch; font-size: var(--fs-h3); letter-spacing: -0.02em; line-height: 1.15; }
.svc__desc { max-width: 32em; font-size: var(--fs-17); color: var(--text-2); }
.svc__visual { margin-top: 12px; }
.svc__more { margin-top: -12px; }

@media (min-width: 900px) {
    .svc__item { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
    /* Text 5 Spalten, eine Spalte Luft, Mockup 5 Spalten – im Wechsel links/rechts. Die 5 Textspalten
       sind nötig, damit „eigenen Servern“ zusammen in eine Zeile passt (kein Einzelwort am Ende) */
    .svc__num { grid-column: 1; padding-top: 0.5em; }
    .svc__body { grid-column: 1 / span 5; }
    .svc__visual { grid-column: 8 / -1; margin-top: 0; }
    .svc__item:nth-child(even) .svc__body { grid-column: 8 / -1; grid-row: 1; }
    .svc__item:nth-child(even) .svc__num { grid-column: 7; grid-row: 1; }
    .svc__item:nth-child(even) .svc__visual { grid-column: 1 / span 5; grid-row: 1; }
}

/* ---- 3 · Leitsatz ------------------------------------------------------------------ */
.manifest { padding-block: var(--section-y); }
.manifest__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.manifest__mark { position: relative; grid-column: 1 / span 2; display: none; height: 0.9em; margin-top: 0.15em; font-size: clamp(1.25rem, 1.06rem + 0.8vw, 1.75rem); }
.manifest__mark i { position: absolute; top: 0; width: 1.5px; height: 100%; transform-origin: 50% 0; }
.manifest__mark i:first-child { left: 18%; background: var(--ink); transform: rotate(-26deg); }
.manifest__mark i:last-child { left: 46%; background: var(--orange); transform: rotate(26deg); }
.manifest__text {
    grid-column: 1 / -1;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.06rem + 0.8vw, 1.75rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: pretty;
}
@media (min-width: 900px) {
    .manifest__text { grid-column: 1 / span 9; }
}

/* ---- 4 · Individualität + Beispiel-Entwürfe ------------------------------------- */
.examples { position: relative; padding-block: var(--section-y); overflow: hidden; overflow: clip; }
.examples__intro { display: grid; gap: clamp(20px, 3vw, 36px); padding-inline: max(var(--gutter), var(--safe-left)); margin-bottom: clamp(48px, 7vw, 88px); }
.examples__word {
    font-size: var(--fs-h1);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.examples__text { max-width: 26em; font-size: var(--fs-20); line-height: 1.5; color: var(--on-ink-2); }
/* Mobil: Entwürfe zum Wischen, einrastend */
.examples__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(86vw, 560px);
    gap: 18px;
    padding: 4px max(var(--gutter), var(--safe-right)) 8px max(var(--gutter), var(--safe-left));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: max(var(--gutter), var(--safe-left));
    scrollbar-width: none;
}
.examples__list::-webkit-scrollbar { display: none; }
.examples__list > * { scroll-snap-align: start; }
/* Desktop: alle Entwürfe auf einen Blick im Raster – kein seitliches Scrollen nötig */
@media (min-width: 900px) {
    .examples__intro { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
    .examples__word { grid-column: 1 / -1; }
    .examples__text { grid-column: 1 / span 6; }
    .examples__list {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(48px, 5vw, 88px) clamp(32px, 4vw, 72px);
        max-width: calc(var(--maxw) + 2 * var(--gutter));
        margin-inline: auto;
        padding: 0 var(--gutter);
        overflow: visible;
        scroll-snap-type: none;
    }
}