/* ==========================================================================
   pages.css — Layouts, die nur eine Seite betreffen.
   ========================================================================== */

@layer pages {

  /* --- Startseite: typografischer Einstieg -----------------------------
     Die Seite öffnet mit Schrift. Rechts daneben steht ab der Breite, in
     der wirklich Platz dafür ist, die Systemskizze — sie füllt eine sonst
     leere Fläche und zeigt auf einen Blick, dass hier Technik gebaut wird.
     Darunter stapelt sich beides. */

  .hero {
    padding-block: clamp(2.25rem, 1.5rem + 4vw, 4.75rem) clamp(2rem, 1.5rem + 3vw, 4rem);
  }

  .hero__inner { display: grid; gap: var(--space-xl); }

  .hero__text { display: grid; gap: var(--space-md); }

  .hero__visual { display: flex; justify-content: flex-start; }

  .hero--enterprise .hero__title { max-inline-size: 13ch; }

  .hero__visual {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-xs);
  }

  .hero__visual-note {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2xs);
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    letter-spacing: var(--track-mono);
    text-transform: uppercase;
    color: var(--muted);
  }

  .status-dot {
    inline-size: var(--indicator-size);
    block-size: var(--indicator-size);
    border-radius: 50%;
    background: var(--signal);
  }

  @media (width >= 64rem) {
    .hero__inner {
      grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
      align-items: center;
      column-gap: var(--space-2xl);
    }

    .hero__visual { justify-content: flex-end; }
    .trust-strip__inner {
      grid-template-columns: minmax(14rem, .8fr) minmax(0, 1.8fr);
    }
  }

  .hero__title {
    max-inline-size: 18ch;
    margin-block-start: var(--space-2xs);
  }

  .hero__lead { max-inline-size: 52ch; }

  .hero__actions { margin-block-start: var(--space-2xs); }

  .hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-md);
    margin-block-start: var(--space-md);
    padding-block-start: var(--space-md);
    border-block-start: var(--border);
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    color: var(--muted);
  }

  /* --- Enterprise trust strip ---------------------------------------- */

  .trust-strip {
    border-block: var(--border);
    background: var(--surface-sunk);
  }

  .trust-strip__inner {
    display: grid;
    gap: var(--space-lg);
    align-items: center;
    padding-block: var(--space-md);
  }

  .trust-strip__intro {
    max-inline-size: 28ch;
    font-family: var(--font-serif);
    font-size: var(--text-h3);
    line-height: var(--leading-snug);
  }

  .trust-strip__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-md);
  }

  .trust-strip__item {
    display: grid;
    gap: var(--space-3xs);
    padding-inline-start: var(--space-sm);
    border-inline-start: 1px solid var(--signal-edge);
  }

  .trust-strip__item dt {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--signal);
  }

  .trust-strip__item dd {
    font-size: var(--text-xs);
    color: var(--muted);
  }

  /* --- Enterprise architecture proof ------------------------------- */

  .architecture-section__grid {
    display: grid;
    gap: var(--space-xl);
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    align-items: center;
  }

  .architecture-section__head {
    margin-block-end: 0;
  }

  .architecture-section__head h2 { max-inline-size: 15ch; }

  .architecture-section__head .lead {
    max-inline-size: 48ch;
    color: var(--muted);
  }

  .architecture-panel {
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink);
  }

  .architecture-panel__bar,
  .architecture-panel__caption {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-md);
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    letter-spacing: var(--track-mono);
    text-transform: uppercase;
    color: var(--muted);
  }

  .architecture-panel__bar { border-block-end: var(--border); }

  .architecture-panel__body {
    display: grid;
    gap: var(--space-xl);
    padding: var(--space-xl) var(--space-lg);
  }

  .architecture-panel__flow {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }

  .architecture-node {
    display: grid;
    place-items: center;
    min-block-size: var(--architecture-node-height);
    padding-inline: var(--space-sm);
    border: 1px solid var(--line-strong);
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    letter-spacing: var(--track-mono);
    color: var(--muted);
  }

  .architecture-node--signal {
    border-color: var(--signal-edge);
    background: var(--signal-wash);
    color: var(--signal);
  }

  .architecture-connector {
    flex: 1;
    block-size: 1px;
    background: var(--signal-edge);
  }

  .architecture-panel__notes {
    display: grid;
    gap: var(--space-2xs);
    color: var(--ink-soft);
  }

  .architecture-panel__notes p {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: var(--space-2xs);
    padding-block-start: var(--space-2xs);
    border-block-start: var(--border);
    font-size: var(--text-sm);
  }

  .architecture-panel__notes span {
    font-family: var(--font-mono);
    color: var(--signal);
  }

  .architecture-panel__caption {
    justify-content: flex-start;
    border-block-start: var(--border);
    text-transform: none;
    letter-spacing: normal;
  }

  /* --- Startseite: Positionierung --------------------------------------- */

  .pitch {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
    align-items: start;
  }

  .pitch__statement {
    font-family: var(--font-serif);
    font-size: var(--text-h2);
    line-height: var(--leading-tight);
    letter-spacing: var(--track-display);
    text-wrap: balance;
  }

  .pitch__body { display: grid; gap: var(--space-sm); color: var(--muted); }

  .section__subhead {
    max-inline-size: 54ch;
    color: var(--muted);
  }

  .section-action {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-sm) var(--space-md);
    margin-block-start: var(--space-lg);
  }

  .section-action__note {
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    color: var(--muted);
  }

  /* --- Enterprise capability tracks ------------------------------- */

  .enterprise-tracks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
    align-items: stretch;
  }

  .enterprise-track {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    align-content: start;
    gap: var(--space-md);
    padding-block-start: var(--space-md);
    border-block-start: var(--line-weight-strong) solid var(--ink);
  }

  .enterprise-track[data-track="integrate"] { border-color: var(--signal); }
  .enterprise-track[data-track="operate"] { border-color: var(--accent); }

  .enterprise-track__topline {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    letter-spacing: var(--track-mono);
    text-transform: uppercase;
    color: var(--muted);
  }

  .enterprise-track__signal {
    inline-size: var(--indicator-size);
    block-size: var(--indicator-size);
    background: var(--ink);
  }

  .enterprise-track[data-track="integrate"] .enterprise-track__signal { background: var(--signal); }
  .enterprise-track[data-track="operate"] .enterprise-track__signal { background: var(--accent); }

  .enterprise-track__title {
    max-inline-size: 18ch;
    font-size: var(--text-h3);
  }

  .enterprise-track__text {
    max-inline-size: 36ch;
    color: var(--muted);
  }

  .enterprise-track__links {
    display: grid;
    gap: 0;
    margin-block-start: var(--space-2xs);
  }

  .enterprise-track__links li { border-block-start: var(--border); }

  .enterprise-track__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-block-size: var(--touch-target);
    color: var(--ink-soft);
    font-size: var(--text-sm);
    text-decoration: none;
  }

  /* --- Enterprise process ------------------------------------------ */

  .enterprise-process {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-md);
  }

  .enterprise-process__stage {
    display: grid;
    gap: var(--space-md);
    align-content: start;
    padding-block-start: var(--space-md);
    border-block-start: var(--border);
  }

  .enterprise-process__marker {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    color: var(--signal);
  }

  .enterprise-process__content {
    display: grid;
    gap: var(--space-2xs);
  }

  .enterprise-process__content h3 { font-size: var(--text-h3); }
  .enterprise-process__content p { color: var(--muted); }

  .enterprise-process__deliverable {
    margin-block-start: var(--space-xs);
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    color: var(--ink-soft);
  }

  /* --- Enterprise proof -------------------------------------------- */

  .enterprise-proof { display: grid; gap: var(--space-lg); }
  .enterprise-proof .section__head { margin-block-end: 0; }

  .enterprise-proof__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-md);
  }

  .enterprise-proof__item {
    display: grid;
    gap: var(--space-2xs);
    padding-block-start: var(--space-sm);
    border-block-start: 1px solid var(--signal-edge);
  }

  .enterprise-proof__item h3 { font-size: var(--text-body); }
  .enterprise-proof__item p { color: var(--muted); font-size: var(--text-sm); }

  .cta__note {
    align-self: center;
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    color: var(--muted);
  }

  /* --- Leistungsübersicht -------------------------------------------------- */

  .service-grid {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  }

  .service-grid + .btn-row { margin-block-start: var(--space-lg); }

  /* --- Leistungsdetail ------------------------------------------------------
     Ohne Foto: Der Ablauf der Arbeit trägt die Seite visuell, nicht ein
     Stimmungsbild. Das ist zugleich ehrlicher — es zeigt, wie gearbeitet
     wird, statt zu bebildern, wie es aussehen könnte. */

  .service-hero {
    padding-block: clamp(2.5rem, 1.5rem + 4.5vw, 5rem) var(--space-lg);
    border-block-end: var(--border);
    margin-block-end: var(--space-2xl);
  }

  .service-hero__inner { display: grid; gap: var(--space-sm); max-inline-size: 52rem; }

  .service-hero__lead { margin-block-start: var(--space-2xs); }

  .service-detail {
    display: grid;
    gap: var(--space-xl);
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: start;
  }

  @media (width < 56rem) {
    .service-detail { grid-template-columns: 1fr; gap: var(--space-lg); }
    .architecture-section__grid { grid-template-columns: 1fr; }
    .architecture-section__head h2 { max-inline-size: 22ch; }
    .enterprise-tracks { grid-template-columns: 1fr; gap: var(--space-xl); }
    .enterprise-track { grid-template-rows: none; }
    .enterprise-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .enterprise-proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  .service-aside {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--space-md));
    display: grid;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--surface);
    border: var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }

  @media (width < 56rem) {
    .service-aside { position: static; }
  }

  .service-aside__title { font-family: var(--font-serif); font-size: var(--text-h3); }

  .service-aside__text { font-size: var(--text-sm); color: var(--muted); }

  /* Verweise auf die übrigen Leistungen. */
  .related { display: grid; gap: var(--space-2xs); }

  .related__link {
    display: flex;
    align-items: baseline;
    gap: var(--space-2xs);
    min-block-size: var(--touch-target);
    padding-block: var(--space-2xs);
    border-block-start: var(--border);
    font-size: var(--text-sm);
    text-decoration: none;
    color: var(--ink-soft);
  }

  .related__link:hover { color: var(--accent); }

  .related__num {
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    color: var(--muted);
  }

  /* --- Über uns --------------------------------------------------------------- */

  .about-hero {
    padding-block: clamp(2.5rem, 1.5rem + 4.5vw, 5rem) var(--space-lg);
    border-block-end: var(--border);
    margin-block-end: var(--space-2xl);
  }

  .about-hero__inner { display: grid; gap: var(--space-sm); max-inline-size: 52rem; }

  /* --- Kontakt ------------------------------------------------------------------ */

  .contact-grid {
    display: grid;
    gap: var(--space-xl);
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
  }

  @media (width < 52rem) {
    .contact-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  }

  .contact-panel {
    display: grid;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--surface);
    border: var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }

  .address { font-style: normal; }

  /* Praktischer Hinweis über den Kontaktdaten: verbessert die Qualität der
     eingehenden Nachrichten, statt nur Fläche zu füllen. */
  .contact-hint {
    display: grid;
    gap: var(--space-2xs);
    padding-block-end: var(--space-md);
    border-block-end: var(--border);
  }

  .contact-hint__text { font-size: var(--text-sm); color: var(--muted); }

  .contact-hint__list {
    display: grid;
    gap: var(--space-3xs);
    font-size: var(--text-sm);
    color: var(--ink-soft);
  }

  .contact-hint__list li {
    position: relative;
    padding-inline-start: var(--space-md);
  }

  .contact-hint__list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: .6em;
    inline-size: 6px;
    block-size: 6px;
    background: var(--accent);
    rotate: 45deg;
  }

  /* --- Abschluss-Aufruf ----------------------------------------------------------- */

  .cta {
    display: grid;
    gap: var(--space-md);
    justify-items: start;
    padding: var(--space-xl);
    background: var(--surface);
    border: var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }

  .cta__title {
    font-family: var(--font-serif);
    font-size: var(--text-h2);
    line-height: var(--leading-tight);
    letter-spacing: var(--track-display);
    max-inline-size: 20ch;
  }

  .cta__text { color: var(--muted); max-inline-size: 48ch; }

  /* --- Seitenkopf für Unterseiten --------------------------------------------------- */

  .page-head {
    padding-block: clamp(2.5rem, 1.5rem + 4.5vw, 5rem) var(--space-lg);
    border-block-end: var(--border);
    margin-block-end: var(--space-2xl);
  }

  .page-head__inner { display: grid; gap: var(--space-sm); max-inline-size: 52rem; }

  /* --- Rechtstexte -------------------------------------------------------------------- */

  .legal-meta {
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    color: var(--muted);
    margin-block-end: var(--space-lg);
  }

  @media (width < 48rem) {
    .trust-strip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .trust-strip__intro { max-inline-size: 36ch; }
    .hero__visual-note { justify-content: flex-start; }
  }

  @media (width < 34rem) {
    .trust-strip__inner { gap: var(--space-md); }
    .trust-strip__list { gap: var(--space-sm); }
    .trust-strip__item { padding-inline-start: var(--space-2xs); }
    .architecture-panel__body { padding-inline: var(--space-sm); }
    .architecture-panel__flow { gap: var(--space-2xs); }
    .architecture-node { min-block-size: 3rem; padding-inline: var(--space-2xs); font-size: var(--text-xxs); }
    .enterprise-process { grid-template-columns: 1fr; }
    .enterprise-proof__grid { grid-template-columns: 1fr; }
  }
}