/* ==========================================================================
   VertexPK – Unterseiten
   Seitenkopf (dunkel) · Leistungen · Ablauf · Abschluss · Über uns · Kontakt ·
   Rechtliches · Fehlerseite
   ========================================================================== */

/* ---- Seitenkopf (dunkel) ------------------------------------------------------- */
.page-hero {
    position: relative;
    overflow: hidden;
    overflow: clip;
    padding: calc(var(--header-h) + var(--safe-top) + clamp(72px, 14vh, 160px)) 0 clamp(64px, 10vw, 128px);
}
.page-hero__inner { position: relative; z-index: 1; display: grid; gap: clamp(28px, 4vw, 48px); }
.page-hero__title {
    font-size: var(--fs-display);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.02em;
}
.page-hero__title .mask { padding-bottom: 0.12em; margin-bottom: -0.12em; }
.page-hero__text { max-width: 32em; font-size: var(--fs-20); line-height: 1.5; color: var(--on-ink-2); }
@media (min-width: 900px) {
    .page-hero__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
    .page-hero__title { grid-column: 1 / span 8; }
    .page-hero__text { grid-column: 8 / -1; grid-row: 2; }
}
/* Zwei Linien wachsen zum V (rechts, dekorativ) */
.page-hero__v { display: none; position: absolute; top: 0; right: 0; bottom: 0; width: min(42vw, 560px); pointer-events: none; }
.page-hero__arm { position: absolute; top: -4%; width: 1px; height: 54%; transform-origin: 50% 0; }
.page-hero__arm--a { left: 22%; background: var(--line-ink-strong); --r: -22deg; transform: rotate(var(--r)); }
.page-hero__arm--b { right: 22%; background: var(--orange); --r: 22deg; transform: rotate(var(--r)); }
.page-hero__dot { position: absolute; left: 50%; top: 46%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--orange); }
@keyframes arm-grow { from { transform: rotate(var(--r)) scaleY(0); } to { transform: rotate(var(--r)) scaleY(1); } }
@keyframes dot-pop { from { transform: scale(0); } }
@media (max-width: 899px) {
    .page-hero__v { width: 60vw; opacity: 0.55; }
}

/* ---- Leistungen ------------------------------------------------------------------ */
.services { overflow-x: clip; }   /* Server der Hosting-Szene starten rechts außerhalb – nie seitlich scrollbar */
.services .container { display: grid; gap: clamp(96px, 13vw, 200px); }
.service { display: grid; gap: clamp(40px, 6vw, 72px); align-items: center; }
.service__text { display: grid; gap: 20px; align-content: start; }
.service__num { display: none; font-size: var(--fs-14); font-weight: 600; color: var(--orange-deep); font-variant-numeric: tabular-nums; }
.service__title { max-width: 22ch; font-size: var(--fs-h2); letter-spacing: -0.02em; line-height: 1.12; }
.service__lead { max-width: 32em; font-size: var(--fs-20); line-height: 1.5; color: var(--text-2); }
.service__more { color: var(--text-2); }
.service__list-title { margin-top: 18px; font-family: var(--font-text); font-size: var(--fs-14); font-weight: 600; letter-spacing: 0.01em; color: var(--text-2); }
/* „Was dazugehört“ als ruhige Spezifikation mit Haarlinien */
.spec { display: grid; border-top: 1px solid var(--line); }
.spec li { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); font-weight: 500; }
.spec__mark { flex: none; width: 7px; height: 7px; background: var(--orange); transform: translateY(-1px); }
@media (min-width: 1000px) {
    /* Mockup 6 Spalten, eine Spalte Luft, Text 5 Spalten. Die Titelgröße wächst mit der Spalte mit,
       damit lange Wortpaare („eigenen Servern“) zusammen in eine Zeile passen – kein Einzelwort am Ende */
    .service { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
    .service__visual { grid-column: 1 / span 6; }
    .service__text { grid-column: 8 / -1; }
    .service--flip .service__visual { grid-column: 7 / -1; grid-row: 1; }
    .service--flip .service__text { grid-column: 1 / span 5; grid-row: 1; }
}

/* ---- Ablauf: Schritt für Schritt ----------------------------------------------------- */
.process { position: relative; padding-block: var(--section-y); background: var(--paper-2); }
.process__grid { display: grid; gap: clamp(40px, 6vw, 72px); }
.process__head { display: grid; gap: 20px; align-content: start; }
.process__title { font-size: var(--fs-h1); letter-spacing: -0.02em; line-height: 1.12; }
.process__count { display: none; font-family: var(--font-display); font-size: var(--fs-display); font-weight: 500; line-height: 1.12; letter-spacing: -0.02em; color: var(--orange-deep); font-variant-numeric: tabular-nums; }
.process__total { font-size: 0.25em; letter-spacing: 0; color: var(--text-2); vertical-align: top; }
.process__body { position: relative; padding-left: 36px; }
.process__track { position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px; background: var(--line-strong); }
.process__fill { position: absolute; inset: 0; background: var(--orange); transform: scaleY(1); transform-origin: 50% 0; }
.process__list { display: grid; gap: clamp(36px, 5vw, 56px); }
.process__step { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 12px; }
.process__step::before { content: ""; position: absolute; left: -35px; top: 0.55em; width: 11px; height: 11px; border-radius: 50%; background: var(--paper-2); box-shadow: inset 0 0 0 1.5px var(--orange); }
.process__num { padding-top: 0.5em; font-size: var(--fs-14); font-weight: 600; color: var(--orange-deep); font-variant-numeric: tabular-nums; }
.process__name { font-size: var(--fs-h3); letter-spacing: -0.02em; line-height: 1.15; }
.process__text { max-width: 30em; margin-top: 10px; font-size: var(--fs-17); color: var(--text-2); }
@media (min-width: 1000px) {
    .process__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
    .process__head { grid-column: 1 / span 5; }
    .process__body { grid-column: 7 / -1; }
    /* passt zur 5-spaltigen Kopfzeile: „arbeiten wir“ bleibt zusammen */
}
/* Desktop: die Überschrift bleibt stehen, während die Schritte ganz normal durchscrollen (nur CSS) */
@media (min-width: 1000px) and (min-height: 600px) {
    .process__head { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
}

/* ---- Abschluss (dunkel) -------------------------------------------------------------- */
.closing { padding-block: var(--section-y); }
.closing__grid { display: grid; gap: clamp(36px, 5vw, 64px); }
.closing__title { max-width: 22ch; font-size: var(--fs-h1); letter-spacing: -0.02em; line-height: 1.12; }
.closing__side { display: grid; gap: 28px; align-content: end; }
.closing__text { max-width: 26em; font-size: var(--fs-20); color: var(--on-ink-2); }
@media (min-width: 1000px) {
    .closing__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
    .closing__title { grid-column: 1 / span 8; }
    .closing__side { grid-column: 9 / -1; }
}

/* ---- Über uns ----------------------------------------------------------------------- */
.places { background: var(--paper-2); }
.places__grid { display: grid; gap: clamp(48px, 7vw, 96px); align-items: center; }
.places__map { width: min(100%, 520px); }
.places__text { display: grid; gap: 24px; }
.places__title { font-size: var(--fs-h1); letter-spacing: -0.02em; line-height: 1.12; }
@media (min-width: 1000px) {
    .places__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
    .places__map { grid-column: 1 / span 5; }
    .places__text { grid-column: 7 / -1; }
}
.about-values__head { display: grid; gap: 28px; margin-bottom: clamp(48px, 7vw, 96px); }
.about-values__word { font-size: var(--fs-h1); font-weight: 500; line-height: 1.12; letter-spacing: -0.02em; white-space: nowrap; }
.about-values__text { max-width: 26em; }
@media (max-width: 599px) {
    .about-values__word { white-space: normal; overflow-wrap: anywhere; }
}

/* ---- Kontakt ------------------------------------------------------------------------- */
.contact-page__grid { display: grid; gap: clamp(64px, 8vw, 112px); }
.contact-person { display: grid; align-content: start; gap: 32px; }
.contact-person__who { display: flex; align-items: center; gap: 18px; }
.contact-person__photo { flex: none; width: 88px; height: 88px; border-radius: 50%; }
.contact-person__photo .team-photo__initials { font-size: 2rem; }
.contact-person__photo.team-photo--placeholder::after { display: none; }
.contact-person__name { font-family: var(--font-display); font-size: var(--fs-32); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; }
.contact-person__role { margin-top: 4px; font-size: var(--fs-16); color: var(--text-2); }
.contact-form { position: relative; }
@media (min-width: 1000px) {
    .contact-page__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
    .contact-person { position: sticky; top: calc(var(--header-h) + 40px); grid-column: 1 / span 5; }
    .contact-panel { grid-column: 7 / -1; }
}

/* ---- Rechtliches: ruhige, gut lesbare Spalte ------------------------------------------ */
.legal-head { padding: calc(var(--header-h) + var(--safe-top) + clamp(56px, 10vh, 120px)) 0 clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--line); }
.legal-head__title { font-size: min(var(--fs-h1), 11.5vw); letter-spacing: -0.02em; line-height: 1.12; -webkit-hyphens: auto; hyphens: auto; }
.legal { padding-block: clamp(48px, 7vw, 96px) var(--section-y); }
.prose--legal { font-size: var(--fs-17); }
.prose--legal h2 { font-size: var(--fs-32); }
.legal__date { margin-top: 3em !important; font-size: var(--fs-14); color: var(--text-2); }
@media (min-width: 1000px) {
    .legal__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
    .prose--legal { grid-column: 3 / span 8; }
}

/* ---- Fehlerseite (dunkel): die Linien verfehlen sich knapp --------------------------- */
.error-page {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: min(100svh, 640px);
    padding: calc(var(--header-h) + 64px) 0 clamp(56px, 10vh, 120px);
    overflow: hidden;
    overflow: clip;
}
.error-page__inner { position: relative; z-index: 1; display: grid; gap: 24px; justify-items: start; }
.error-page__code { font-family: var(--font-display); font-size: var(--fs-14); font-weight: 600; letter-spacing: 0.08em; color: var(--orange); }
.error-page__title { max-width: 18ch; font-size: var(--fs-h1); letter-spacing: -0.02em; line-height: 1.12; }
.error-page__lines { position: absolute; top: 0; right: 0; width: min(56vw, 760px); height: 72%; pointer-events: none; }
.error-page__arm { position: absolute; top: -6%; width: 1px; height: 92%; transform-origin: 50% 0; }
.error-page__arm--a { left: 18%; background: var(--line-ink-strong); --r: -24deg; transform: rotate(var(--r)); }
.error-page__arm--b { right: 14%; height: 84%; background: var(--orange); --r: 28deg; transform: rotate(var(--r)); }

/* ---- Bewertungen ------------------------------------------------------------------------ */
.stars { display: inline-flex; font-size: 1.05em; letter-spacing: 0.08em; line-height: 1; white-space: nowrap; }
.stars__on { color: var(--orange); }
.stars__off { color: var(--paper-3); }
.reviews__grid { display: grid; gap: clamp(40px, 6vw, 72px); }
.reviews__summary { padding-bottom: 20px; border-bottom: 1px solid var(--line-strong); }
.reviews__average { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: var(--fs-24); }
.reviews__number { font-family: var(--font-display); font-size: var(--fs-display); font-weight: 500; line-height: 1; }
.reviews__count { margin-top: 6px; color: var(--text-2); }
.reviews__thanks { margin-bottom: 28px; padding: 18px 20px; border-left: 2px solid var(--orange); background: var(--paper-2); }
.reviews__thanks h2 { margin-bottom: 4px; font-size: var(--fs-24); }
.reviews__list { display: grid; }
.review { display: grid; gap: 10px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.review__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.review__name { font-weight: 600; }
.review__date { font-size: var(--fs-14); color: var(--text-2); }
.review__body { max-width: 44em; overflow-wrap: anywhere; }
.review__contact { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: var(--fs-14); color: var(--text-2); overflow-wrap: anywhere; }
.review__contact a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.review__reply { max-width: 42em; margin-top: 6px; padding: 12px 16px; border-left: 2px solid var(--line-strong); background: var(--paper-2); font-size: var(--fs-16); overflow-wrap: anywhere; }
.review__reply-head { margin-bottom: 4px; font-size: var(--fs-14); font-weight: 600; color: var(--text-2); }
/* Entfernte Bewertungen: unauffällig, aber für jeden auffindbar */
.reviews__removed { margin-top: 28px; font-size: var(--fs-14); color: var(--text-2); }
.reviews__removed summary { display: inline-block; padding-block: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.reviews__removed ul { display: grid; gap: 10px; margin-top: 12px; }
.reviews__removed li { overflow-wrap: anywhere; }
.reviews__side { display: grid; gap: 20px; align-content: start; }
.reviews__side-title { font-size: var(--fs-h3); }
.reviews__note { color: var(--text-2); }
.reviews__form > summary { display: inline-flex; list-style: none; }
.reviews__form > summary::-webkit-details-marker { display: none; }
.reviews__form[open] > summary { display: none; }
.reviews__form .form { margin-top: 8px; }
.reviews__hint { margin-top: 6px; }
.reviews__optional { display: grid; gap: 28px; min-width: 0; margin: 0; padding: 18px 18px 22px; border: 1px solid var(--line-strong); border-radius: var(--radius); }
.reviews__optional legend { padding: 0 8px; font-size: var(--fs-16); font-weight: 600; }
.reviews__warning { display: flex; gap: 10px; font-size: var(--fs-14); color: var(--error); }
.reviews__warning svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.reviews__rules { margin-top: 12px; padding-top: 20px; border-top: 1px solid var(--line); font-size: var(--fs-14); color: var(--text-2); }
.reviews__rules h3 { margin-bottom: 10px; font-family: var(--font-text); font-size: var(--fs-14); font-weight: 600; letter-spacing: 0; color: var(--ink); }
.reviews__rules ul { display: grid; gap: 8px; padding-left: 1.1em; list-style: disc; }
.reviews__rules a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.18em; }
@media (min-width: 1000px) {
    .reviews__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(48px, 6vw, 96px); align-items: start; }
}