/* --- Reset / Basis --- */
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: #FFFFFF;
    color: #334155;
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; cursor: pointer; }

  /* --- Tokens (Handwerker-Designsystem) --- */
  :root {
    --bg: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-soft: #F8FAFC;
    --ink: #0F172A;
    --ink-soft: #64748B;
    --ink-body: #334155;
    --accent: #8B2C3C;            /* Bordeaux - Markenfarbe Individualentwicklung */
    --accent-hover: #6F1F2D;
    --accent-warm: rgba(139,44,60,0.08);
    --border: rgba(15,23,42,0.08);
    --border-strong: rgba(15,23,42,0.15);
    --serif: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --sans: 'DM Sans', system-ui, -apple-system, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  }

  /* --- Container --- */
  .wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 32px;
  }
  .wrap-narrow {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 32px;
  }

  /* --- Allgemeine Typo-Bausteine --- */
  .eyebrow {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 28px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--ink-soft);
    display: inline-block;
  }
  .eyebrow.accent { color: var(--accent); }
  .eyebrow.accent::before { background: var(--accent); }

  .section-label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding-top: 10px;
    border-top: 1px solid var(--ink-soft);
    display: inline-block;
  }

  /* --- Header --- */
  .site-header {
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(8px);
    background-color: rgba(250, 250, 247, 0.92);
  }
  .site-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    padding-bottom: 14px;
    flex-wrap: nowrap;
    gap: 20px;
  }
  .wordmark {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--ink);
    flex-shrink: 0;
  }
  .wordmark img {
    height: 28px;
    width: auto;
    display: block;
  }
  .wordmark .product {
    font-family: var(--mono);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    padding-left: 14px;
    border-left: 1px solid var(--border);
  }
  .site-header .back {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    text-transform: uppercase;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: color .2s ease, border-color .2s ease;
  }
  .site-header .back:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
  }

  /* --- Section-Nav (Desktop & Mobile-Drawer) --- */
  .section-nav--desktop {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-left: auto;
    margin-right: 20px;
    flex-wrap: nowrap;
  }
  .section-nav--desktop a {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 14px;
    color: var(--ink-soft);
    text-decoration: none;
    transition: color .2s ease;
    position: relative;
    padding: 4px 0;
    white-space: nowrap;
  }
  .section-nav--desktop a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
  }
  .section-nav--desktop a:hover { color: var(--accent); }
  .section-nav--desktop a:hover::after { transform: scaleX(1); }
  .section-nav--desktop a.cta {
    padding: 8px 18px;
    background: var(--accent);
    color: var(--bg);
    border-radius: 8px;
    font-weight: 600;
    font-size: 13.5px;
    box-shadow: 0 2px 8px rgba(139,44,60,0.2);
  }
  .section-nav--desktop a.cta::after { display: none; }
  .section-nav--desktop a.cta:hover {
    background: var(--accent-hover);
    color: var(--bg);
    transform: translateY(-1px);
  }
  .section-nav--mobile { display: none; }
  .nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-left: auto;
    color: var(--ink);
  }
  .nav-toggle svg { width: 24px; height: 24px; display: block; }
  html { scroll-behavior: smooth; }
  section[id] { scroll-margin-top: 80px; }

  /* --- Hero --- */
  .hero {
    padding: 80px 0 60px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-soft);
  }
  .hero .wrap {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: center;
  }
  .hero-text { max-width: 100%; }
  h1.headline {
    font-family: var(--serif);
    font-weight: 800;
    font-size: clamp(32px, 4vw, 56px);
    line-height: 1.1;
    letter-spacing: -0.6px;
    margin: 0 0 20px;
    color: var(--ink);
  }
  h1.headline em {
    font-style: normal;
    font-weight: 800;
    color: var(--accent);
  }
  .lede {
    font-family: var(--sans);
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.7;
    color: var(--ink-body);
    max-width: 55ch;
    margin: 0 0 28px;
  }
  .hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 15px;
    color: var(--bg);
    background: var(--accent);
    padding: 14px 28px;
    border-radius: 10px;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 4px 16px rgba(139,44,60,0.25);
  }
  .hero-cta:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(139,44,60,0.35); }
  .hero-cta span { transition: transform 0.25s ease; }
  .hero-cta:hover span { transform: translateX(4px); }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
  .hero-cta-ghost {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    box-shadow: none;
  }
  .hero-cta-ghost:hover {
    background: var(--accent);
    color: var(--bg);
    box-shadow: 0 4px 16px rgba(139,44,60,0.25);
  }

  .hero-media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--bg-soft);
    position: relative;
    border-radius: 16px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.12);
  }
  .hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.92);
  }
  .hero-media .caption {
    position: absolute;
    bottom: 16px;
    left: 18px;
    right: 18px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #FFFFFF;
    text-shadow: 0 1px 4px rgba(0,0,0,0.45);
  }

  /* --- Was wir bauen — redaktionelle Liste --- */
  .build {
    padding: 120px 0 96px;
  }
  .build .head,
  .industries .head,
  .manifest .head,
  .process .head,
  .faq .head {
    display: block;
    text-align: center;
    max-width: 760px;
    margin: 0 auto 56px;
  }
  .build .head .section-label,
  .industries .head .section-label,
  .manifest .head .section-label,
  .process .head .section-label,
  .faq .head .section-label {
    margin-bottom: 24px;
    border-top: none;
    padding-top: 0;
  }
  .build .head h2,
  .industries .head h2,
  .manifest .head h2,
  .process .head h2,
  .faq .head h2 {
    font-family: var(--serif);
    font-weight: 800;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.12;
    letter-spacing: -0.5px;
    margin: 0 0 14px;
    color: var(--ink);
    max-width: none;
  }
  .build .head h2 em,
  .industries .head h2 em,
  .manifest .head h2 em,
  .process .head h2 em,
  .faq .head h2 em { font-style: normal; color: var(--accent); }
  .build .head .intro,
  .industries .head .intro,
  .manifest .head .intro,
  .process .head .intro,
  .faq .head .intro {
    font-family: var(--sans);
    font-weight: 400;
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.65;
    color: var(--ink-body);
    margin: 0 auto;
    max-width: 56ch;
  }

  .build-list {
    border-top: 1px solid var(--border);
  }
  .build-item {
    display: grid;
    grid-template-columns: 80px 1.1fr 1.6fr;
    gap: 48px;
    padding: 36px 0;
    border-bottom: 1px solid var(--border);
    align-items: baseline;
  }
  .build-item .num {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--accent);
  }
  .build-item h3 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(22px, 2vw, 30px);
    line-height: 1.18;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--ink);
  }
  .build-item h3 em { font-style: normal; color: var(--accent); }
  .build-item p {
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0;
  }

  /* ===== FEATURED ITEMS — die 4 großen Projekttypen ===== */
  .featured-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    border-top: 1px solid var(--border);
    padding-top: 48px;
  }
  .featured-item {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 36px 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  }
  .featured-item:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(15,23,42,0.06);
  }
  .featured-head {
    display: flex;
    align-items: baseline;
    gap: 20px;
  }
  .featured-head .num {
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--accent);
    width: 24px;
    flex-shrink: 0;
  }
  .featured-head h3 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(24px, 2.2vw, 32px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--ink);
  }
  .featured-head h3 em { font-style: normal; color: var(--accent); }
  .featured-body p {
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-soft);
    margin: 0 0 18px;
  }
  .featured-list-inline {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .featured-list-inline li {
    font-family: var(--sans);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink);
    padding-left: 20px;
    position: relative;
  }
  .featured-list-inline li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
    opacity: 0.5;
  }

  /* ===== CASE STUDIES ===== */
  .cases {
    padding: 100px 5%;
    background: var(--bg-soft);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .cases-list {
    display: flex;
    flex-direction: column;
    gap: 48px;
    border-top: 1px solid var(--border);
    padding-top: 48px;
  }
  .case-item {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 48px;
    padding: 40px 40px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  }
  .case-item:hover {
    border-color: var(--accent);
    box-shadow: 0 8px 32px rgba(15,23,42,0.06);
  }
  .case-meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-right: 24px;
    border-right: 1px solid var(--border);
  }
  .case-label {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
  }
  .case-branche {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
  }
  .case-volumen {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink-soft);
    font-weight: 500;
    padding-top: 6px;
    border-top: 1px solid var(--border);
    margin-top: 6px;
  }
  .case-content h3 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(22px, 2vw, 30px);
    line-height: 1.18;
    letter-spacing: -0.01em;
    margin: 0 0 14px;
    color: var(--ink);
  }
  .case-content h3 em { font-style: normal; color: var(--accent); }
  .case-intro {
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-soft);
    margin: 0 0 28px;
  }
  .case-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .case-block h4 {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--accent);
    margin: 0 0 14px;
  }
  .case-block ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .case-block li {
    font-family: var(--sans);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink);
    padding-left: 20px;
    position: relative;
  }
  .case-block li::before {
    content: "→";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent);
    font-weight: 600;
    font-size: 13px;
  }
  .case-block li strong {
    color: var(--accent);
    font-weight: 700;
  }

  /* ===== ERSTANALYSE ===== */
  .erstanalyse {
    padding: 100px 5%;
    background: var(--bg);
  }
  .erstanalyse-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
  }
  .erstanalyse-text .section-label {
    display: inline-block;
    margin-bottom: 18px;
  }
  .erstanalyse-text h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(30px, 3.4vw, 48px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 22px;
  }
  .erstanalyse-text h2 em { font-style: normal; color: var(--accent); }
  .erstanalyse-text p {
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink-soft);
    margin: 0 0 28px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
  .erstanalyse-text ul {
    list-style: none;
    padding: 0;
    margin: 0 auto 32px;
    max-width: 640px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .erstanalyse-text ul li {
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
    padding-left: 26px;
    position: relative;
  }
  .erstanalyse-text ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent);
    font-weight: 700;
  }

  /* --- Branchen-Sektion --- */
  .industries {
    background: var(--bg-soft);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 120px 0;
  }
  .industries-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 64px;
    border-top: 1px solid var(--border);
  }
  .industry {
    padding: 28px 0;
    border-bottom: 1px solid var(--border);
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 28px;
    align-items: baseline;
  }
  .industry .tag {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .industry .label {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.3;
    color: var(--ink);
  }
  .industry .label .sub {
    display: block;
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink-soft);
    margin-top: 4px;
    font-weight: 400;
  }

  .industries-outro {
    margin-top: 56px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 1.5;
    color: var(--ink-body);
    text-align: center;
    max-width: 38ch;
    margin-left: auto;
    margin-right: auto;
  }

  /* --- Manifest --- */
  .manifest {
    padding: 130px 0;
  }
  .manifest-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px 80px;
  }
  .principle {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 24px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
  }
  .principle .num {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--accent);
    padding-top: 6px;
  }
  .principle h3 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 24px;
    line-height: 1.25;
    margin: 0 0 14px;
    color: var(--ink);
  }
  .principle h3 em { font-style: normal; color: var(--accent); }
  .principle p {
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-soft);
    margin: 0;
  }

  .pull-quote {
    margin: 96px auto 0;
    padding: 0 32px;
    max-width: 980px;
    text-align: center;
    position: relative;
  }
  .pull-quote::before,
  .pull-quote::after {
    content: "";
    display: block;
    width: 80px;
    height: 1px;
    background: var(--accent);
    margin: 0 auto;
  }
  .pull-quote::before { margin-bottom: 36px; }
  .pull-quote::after { margin-top: 36px; }
  .pull-quote blockquote {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .pull-quote blockquote .em {
    font-weight: 500;
    color: var(--accent);
  }
  .pull-quote cite {
    display: block;
    margin-top: 24px;
    font-family: var(--mono);
    font-style: normal;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  /* --- Prozess --- */
  .process {
    background: var(--bg-soft);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 120px 0;
  }
  .process-list {
    border-top: 1px solid var(--border);
  }
  .process-step {
    display: grid;
    grid-template-columns: 110px 1.1fr 1.6fr;
    gap: 48px;
    padding: 40px 0;
    border-bottom: 1px solid var(--border);
    align-items: baseline;
  }
  .process-step .num {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.12em;
    color: var(--accent);
  }
  .process-step h3 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(22px, 2vw, 30px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--ink);
  }
  .process-step h3 em { font-style: normal; color: var(--accent); }
  .process-step .desc {
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-soft);
    margin: 0;
  }
  .process-step .meta {
    display: inline-block;
    margin-top: 12px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    border-top: 1px solid var(--border);
    padding-top: 10px;
  }

  /* --- FAQ --- */
  .faq {
    padding: 130px 0;
  }
  .faq-list {
    border-top: 1px solid var(--border);
  }
  .faq-item {
    border-bottom: 1px solid var(--border);
  }
  .faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 28px 0;
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 32px;
    align-items: baseline;
    transition: color .2s ease;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary .q-num {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--accent);
  }
  .faq-item summary .q-text {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(20px, 1.7vw, 24px);
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .faq-item summary .q-text em { font-style: normal; color: var(--accent); font-weight: 600; }
  .faq-item summary .toggle {
    font-family: var(--mono);
    font-size: 22px;
    color: var(--accent);
    line-height: 1;
    transition: transform .25s ease;
    user-select: none;
  }
  .faq-item[open] summary .toggle { transform: rotate(45deg); }
  .faq-item .answer {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 32px;
    padding: 0 0 32px;
  }
  .faq-item .answer .spacer { grid-column: 1; }
  .faq-item .answer p {
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink-soft);
    margin: 0;
    max-width: 64ch;
  }

  /* --- Editorial-Bild zwischen Sektionen --- */
  .photo-break {
    padding: 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .photo-break figure {
    margin: 0;
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 56px;
    align-items: center;
    padding: 64px 0;
  }
  .photo-break figure .img {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--bg-soft);
  }
  .photo-break img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.9);
  }
  .photo-break figcaption {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 28ch;
  }
  .photo-break figcaption .author {
    display: block;
    margin-top: 16px;
    font-family: var(--mono);
    font-style: normal;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
  }

  /* --- Kontakt --- */
  .contact {
    background: var(--bg-soft);
    border-top: 1px solid var(--border);
    padding: 130px 0 110px;
  }
  .contact .lead {
    text-align: center;
    margin-bottom: 64px;
  }
  .contact .lead h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(36px, 5vw, 68px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 18px 0 24px;
    color: var(--ink);
    max-width: 18ch;
    margin-left: auto;
    margin-right: auto;
  }
  .contact .lead h2 em { font-style: normal; color: var(--accent); }
  .contact .lead p {
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0 auto;
    max-width: 56ch;
  }

  form.contact-form {
    max-width: 760px;
    margin: 0 auto;
    background: var(--bg-card);
    padding: 56px;
    border: 1px solid var(--border);
  }
  form.contact-form .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 32px;
    margin-bottom: 28px;
  }
  form.contact-form .field {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  form.contact-form .field.full { grid-column: 1 / -1; }
  form.contact-form label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  form.contact-form label .opt {
    font-style: normal;
    color: var(--ink-soft);
    opacity: 0.6;
    text-transform: none;
    letter-spacing: 0.04em;
    margin-left: 4px;
  }
  form.contact-form input,
  form.contact-form textarea {
    font-family: var(--sans);
    font-size: 16px;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    padding: 8px 0 12px;
    outline: none;
    transition: border-color .2s ease;
    resize: vertical;
  }
  form.contact-form input:focus,
  form.contact-form textarea:focus {
    border-bottom-color: var(--accent);
  }
  form.contact-form textarea {
    min-height: 140px;
    line-height: 1.55;
  }
  form.contact-form .submit-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
  }
  form.contact-form .legal {
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 38ch;
  }
  form.contact-form button[type="submit"] {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    background: var(--accent);
    border: 0;
    padding: 16px 32px;
    transition: background .2s ease, transform .15s ease;
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  form.contact-form button[type="submit"]:hover {
    background: #6F2230;
  }
  form.contact-form button[type="submit"] .arrow {
    transition: transform .25s ease;
  }
  form.contact-form button[type="submit"]:hover .arrow {
    transform: translateX(4px);
  }

  .contact-alt {
    text-align: center;
    margin-top: 40px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  .contact-alt a {
    color: var(--accent);
    border-bottom: 1px solid var(--accent);
    padding-bottom: 2px;
  }

  /* --- Footer --- */
  footer.site-footer {
    background: var(--bg);
    padding: 72px 0 32px;
  }
  footer.site-footer .grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 56px;
    border-bottom: 1px solid var(--border);
  }
  footer .col-title {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 18px;
  }
  footer .brand-block .wordmark {
    display: inline-flex;
    margin-bottom: 14px;
  }
  footer .brand-block .wordmark img {
    height: 24px;
    filter: brightness(0) invert(1);
  }
  footer address {
    font-style: normal;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-soft);
  }
  footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  footer ul a {
    font-size: 14px;
    color: var(--ink);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, color .2s ease;
  }
  footer ul a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
  }
  .copyline {
    padding-top: 28px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.05em;
    color: var(--ink-soft);
    text-transform: uppercase;
  }

  /* --- Responsive --- */
  @media (max-width: 900px) {
    .section-nav--desktop { display: none; }
    .section-nav--mobile {
      display: flex;
      position: fixed;
      top: 0; right: 0; bottom: 0;
      width: 280px;
      background: #ffffff;
      box-shadow: -10px 0 40px rgba(0,0,0,0.12);
      flex-direction: column;
      align-items: flex-start;
      padding: 80px 28px 28px;
      gap: 8px;
      margin: 0;
      transform: translateX(100%);
      transition: transform .3s cubic-bezier(0.4,0,0.2,1);
      z-index: 200;
    }
    .section-nav--mobile.open { transform: translateX(0); }
    .section-nav--mobile a {
      font-family: var(--sans);
      font-weight: 500;
      font-size: 16px;
      color: var(--ink);
      text-decoration: none;
      padding: 12px 0;
      width: 100%;
      border-bottom: 1px solid var(--border);
    }
    .section-nav--mobile a.cta {
      margin-top: 16px;
      border-bottom: none;
      padding: 12px 20px;
      text-align: center;
      background: var(--accent);
      color: var(--bg);
      border-radius: 8px;
      font-weight: 600;
      box-shadow: 0 2px 8px rgba(139,44,60,0.2);
    }
    .nav-toggle { display: block; z-index: 201; position: relative; }
    .site-header .back { display: none; }
  }
  @media (max-width: 1024px) {
    .wrap, .wrap-narrow { padding: 0 22px; }
    .site-header .wrap {
      flex-direction: row;
      align-items: baseline;
      gap: 12px;
      flex-wrap: wrap;
      padding-top: 18px;
      padding-bottom: 18px;
    }
    .wordmark { font-size: 18px; }
    .site-header .back { font-size: 10px; }

    .hero { padding: 44px 0 36px; }
    .hero .wrap {
      grid-template-columns: 1fr;
      gap: 28px;
    }
    h1.headline { font-size: clamp(26px, 6vw, 36px); margin-bottom: 14px; }
    .lede { font-size: 15px; margin-bottom: 22px; }
    .hero-media { aspect-ratio: 16 / 10; border-radius: 12px; }
    .hero-cta { width: 100%; justify-content: center; padding: 14px 24px; }

    .build, .industries, .manifest, .process, .faq { padding: 72px 0; }

    .build .head,
    .industries .head,
    .manifest .head,
    .process .head,
    .faq .head {
      margin-bottom: 40px;
      padding: 0 16px;
    }

    .build-item {
      grid-template-columns: 1fr;
      gap: 12px;
      padding: 28px 0;
    }
    .featured-list {
      grid-template-columns: 1fr;
      gap: 20px;
    }
    .featured-item {
      padding: 26px 24px 24px;
    }
    .featured-head {
      gap: 14px;
    }
    .cases { padding: 60px 5%; }
    .cases-list { gap: 24px; padding-top: 32px; }
    .case-item {
      grid-template-columns: 1fr;
      gap: 24px;
      padding: 28px 24px;
    }
    .case-meta {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 14px;
      padding-right: 0;
      padding-bottom: 16px;
      border-right: none;
      border-bottom: 1px solid var(--border);
      align-items: center;
    }
    .case-volumen {
      padding-top: 0;
      border-top: none;
      margin-top: 0;
    }
    .case-grid {
      grid-template-columns: 1fr;
      gap: 24px;
    }
    .erstanalyse { padding: 60px 5%; }
    .industries-grid {
      grid-template-columns: 1fr;
      gap: 0;
    }
    .industry {
      grid-template-columns: 80px 1fr;
      gap: 20px;
      padding: 22px 0;
    }
    .manifest-grid {
      grid-template-columns: 1fr;
      gap: 36px;
    }
    .principle {
      grid-template-columns: 44px 1fr;
      gap: 16px;
    }
    .pull-quote { margin-top: 64px; }
    .pull-quote::before,
    .pull-quote::after { width: 56px; }

    .process-step {
      grid-template-columns: 1fr;
      gap: 12px;
      padding: 28px 0;
    }

    .faq-item summary {
      grid-template-columns: 50px 1fr auto;
      gap: 16px;
      padding: 22px 0;
    }
    .faq-item .answer {
      grid-template-columns: 50px 1fr;
      gap: 16px;
      padding-bottom: 26px;
    }

    .photo-break figure {
      grid-template-columns: 1fr;
      gap: 24px;
      padding: 48px 0;
    }

    .contact { padding: 80px 0 72px; }
    form.contact-form {
      padding: 32px 24px;
    }
    form.contact-form .row {
      grid-template-columns: 1fr;
      gap: 22px;
    }
    form.contact-form .submit-row {
      flex-direction: column;
      align-items: stretch;
    }
    form.contact-form button[type="submit"] {
      justify-content: center;
      padding: 16px;
    }

    footer.site-footer { padding: 56px 0 24px; }
    footer.site-footer .grid {
      grid-template-columns: 1fr 1fr;
      gap: 36px;
    }
    .copyline { font-size: 10px; }
  }

  @media (max-width: 540px) {
    footer.site-footer .grid {
      grid-template-columns: 1fr;
    }
  }

  /* --- A11y --- */
  a:focus-visible,
  button:focus-visible,
  summary:focus-visible,
  input:focus-visible,
  textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }
  ::selection { background: var(--accent); color: #FAFAF7; }

/* ==========================================================================
   Ergaenzungen fuer die mehrseitige Struktur (Unterseiten, Referenzen)
   ========================================================================== */

/* --- Mega-Menue in der Kopfzeile, damit die Unterseiten erreichbar sind --- */
.nav-item{position:relative}
.nav-item > a{display:inline-flex;align-items:center;gap:6px}
.nav-item .caret{width:14px;height:14px;transition:transform .2s}
.nav-item:hover .caret{transform:rotate(180deg)}
.mega{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  background:var(--bg-card);border:1px solid var(--border);border-radius:14px;
  box-shadow:0 24px 60px -20px rgba(15,23,42,.22);padding:22px;min-width:560px;
  opacity:0;visibility:hidden;transition:all .18s;z-index:200}
.nav-item:hover .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.mega-col h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700;margin:0 0 10px}
.mega-item{display:block;padding:9px 10px;border-radius:9px;text-decoration:none;transition:background .15s}
.mega-item:hover{background:var(--accent-warm)}
.mega-item-title{display:block;font-weight:700;color:var(--ink);font-size:.93rem}
.mega-item-desc{display:block;font-size:.8rem;color:var(--ink-soft);margin-top:2px;line-height:1.45}
@media(max-width:900px){.mega{display:none}}

/* --- Detail-Kopf der Unterseiten --- */
.detail-hero{padding:64px 0 52px;border-bottom:1px solid var(--border)}
.detail-hero .breadcrumb{font-family:var(--mono);font-size:.74rem;color:var(--ink-soft);margin-bottom:18px}
.detail-hero .breadcrumb a{color:var(--ink-soft);text-decoration:none}
.detail-hero .breadcrumb a:hover{color:var(--accent)}
.detail-hero h1{font-family:var(--serif);font-weight:800;font-size:clamp(1.9rem,4vw,2.9rem);
  line-height:1.12;letter-spacing:-.8px;color:var(--ink);margin:0 0 16px;max-width:16ch}
.detail-hero .lede{font-size:1.08rem;line-height:1.7;color:var(--ink-body);max-width:62ch}

/* --- Ausgebaute Leistungsbloecke --- */
.detail-features{padding:56px 0}
.detail-feature{display:grid;grid-template-columns:56px 1fr;gap:22px;padding:26px 0;
  border-bottom:1px solid var(--border)}
.detail-feature:last-child{border-bottom:none}
.detail-feature .df-num{font-family:var(--mono);font-size:.8rem;font-weight:700;color:var(--accent);padding-top:4px}
.detail-feature h3{font-family:var(--serif);font-weight:700;font-size:1.2rem;color:var(--ink);margin:0 0 8px}
.detail-feature p{font-size:.99rem;line-height:1.68;color:var(--ink-body);margin:0}
@media(max-width:640px){.detail-feature{grid-template-columns:1fr;gap:8px}}

/* --- Referenzen / Kundenstimmen --------------------------------------------
   Bewusst schlicht gehalten: keine Sterne, keine Bewertungsskala. Solange keine
   verifizierten Bewertungen vorliegen, waere eine Sterne-Optik irrefuehrend und
   wettbewerbsrechtlich angreifbar. Es sind freigegebene Kundenstimmen, nicht mehr. */
.voices{padding:64px 0;background:var(--bg-soft);border-top:1px solid var(--border);
  border-bottom:1px solid var(--border)}
.voices-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin-top:34px}
.voice{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:26px 26px 22px;
  display:flex;flex-direction:column;gap:16px}
.voice-quote{font-size:1rem;line-height:1.7;color:var(--ink-body);margin:0}
/* Anfuehrungszeichen als eigenes, absolut gesetztes Zeichen: als ::before im
   Textfluss verschob es die erste Zeile und landete optisch neben Zeile zwei. */
.voice-quote{position:relative;padding-left:22px}
.voice-quote::before{content:"„";position:absolute;left:0;top:-2px;
  font-family:var(--serif);font-size:2rem;line-height:1;color:var(--accent)}
.voice-meta{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:14px;
  border-top:1px solid var(--border)}
.voice-initial{width:38px;height:38px;border-radius:50%;background:var(--accent-warm);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:800;font-size:.95rem;
  flex-shrink:0}
.voice-who{font-size:.88rem;line-height:1.4}
.voice-who strong{display:block;color:var(--ink);font-weight:700}
.voice-who span{color:var(--ink-soft)}
.voices-note{margin-top:26px;font-size:.85rem;color:var(--ink-soft);line-height:1.6;max-width:70ch}

/* --- Querverweise am Seitenende --- */
.related{padding:56px 0}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:26px}
.related-card{display:block;padding:22px;border:1px solid var(--border);border-radius:12px;
  text-decoration:none;transition:all .18s;background:var(--bg-card)}
.related-card:hover{border-color:var(--accent);transform:translateY(-2px);
  box-shadow:0 16px 40px -18px rgba(15,23,42,.18)}
.related-card strong{display:block;font-family:var(--serif);font-weight:700;color:var(--ink);
  font-size:1.02rem;margin-bottom:6px}
.related-card span{font-size:.87rem;color:var(--ink-soft);line-height:1.55}

/* --- Kompakte Faktentabelle auf Unterseiten --- */
.facts{width:100%;border-collapse:collapse;margin:26px 0;font-size:.95rem}
.facts th,.facts td{border:1px solid var(--border);padding:12px 14px;text-align:left;vertical-align:top}
.facts th{background:var(--bg-soft);font-family:var(--serif);font-weight:700;color:var(--ink)}
.facts td:first-child{font-weight:600;color:var(--ink)}

/* ==========================================================================
   FAQ auf den Unterseiten
   --------------------------------------------------------------------------
   Das Layout aus der Onepage erwartete eine dritte Spalte mit Fragennummer
   (.q-num, 80px). Die Unterseiten haben keine Nummerierung — ohne sie rutschte
   der Fragetext in die 80px-Spalte und brach Wort fuer Wort um. Deshalb hier
   ein eigenes, zweispaltiges Raster, das die Onepage-Regeln ueberschreibt.
   ========================================================================== */
.faq{padding:72px 0}
.faq-list{border-top:1px solid var(--border);margin-top:8px}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item summary{
  /* Robust gegen das Onepage-Raster: statt Grid ein Flex-Layout. Selbst wenn
     eine aeltere, zwischengespeicherte Fassung des Stylesheets die
     grid-template-columns setzt, greift display:flex und der Text bekommt die
     volle Breite — ein Grid mit 80px-Spalte kann ihn dann nicht mehr quetschen. */
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:22px 0;
}
.faq-item summary .q-num{display:none}   /* falls doch mal eine Nummer im HTML steht */
.faq-item summary .q-text{flex:1 1 auto;min-width:0}
.faq-item summary .q-text{
  font-size:clamp(17px,1.25vw,19px);
  font-weight:600;
  line-height:1.45;
}
/* Das Aufklapp-Zeichen wird per CSS gesetzt, damit im HTML kein Zeichen steht,
   das Screenreader vorlesen wuerden. */
.faq-item summary .toggle{width:22px;height:22px;position:relative;flex-shrink:0}
.faq-item summary .toggle::before,
.faq-item summary .toggle::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--accent);
  transform:translate(-50%,-50%);transition:transform .25s ease
}
.faq-item summary .toggle::before{width:14px;height:2px}
.faq-item summary .toggle::after{width:2px;height:14px}
.faq-item[open] summary .toggle::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-item[open] summary .toggle{transform:none}
.faq-item .answer{
  display:block !important;         /* kein Grid, keine Leerspalte */
  padding:0 0 24px;
}
.faq-item .answer .spacer{display:none}
.faq-item .answer p{font-size:16px;line-height:1.72;max-width:72ch}

/* --- Bild im Kopfbereich der Unterseiten ---------------------------------
   Zweispaltig auf grossen Schirmen (Text links, Bild rechts), darunter
   gestapelt. Das Bild traegt keine Information, sondern gibt der Seite ein
   Gesicht — deshalb leerer alt-Text waere falsch, aber ein knapper genuegt. */
.detail-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.detail-hero-media{border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:var(--bg-soft);
  box-shadow:0 24px 60px -28px rgba(15,23,42,.35)}
.detail-hero-media img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:900px){
  .detail-hero-grid{grid-template-columns:1fr;gap:28px}
  .detail-hero-media{aspect-ratio:16/9}
}

/* --- Bildband zwischen zwei Abschnitten --- */
.image-band{margin:0;padding:0}
.image-band img{width:100%;height:clamp(220px,32vw,420px);object-fit:cover;display:block}
.image-band figcaption{max-width:1320px;margin:0 auto;padding:12px 32px 0;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft)}

/* --- Bild in einer Verweis-Kachel --- */
.related-card.with-image{padding:0;overflow:hidden}
.related-card.with-image .rc-img{aspect-ratio:16/9;overflow:hidden;background:var(--bg-soft)}
.related-card.with-image .rc-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .3s ease}
.related-card.with-image:hover .rc-img img{transform:scale(1.04)}
.related-card.with-image .rc-body{padding:20px 22px 24px}

/* --------------------------------------------------------------------------
   Abschnittskoepfe auf den Unterseiten linksbuendig
   --------------------------------------------------------------------------
   Aus der Onepage kommen die Koepfe zentriert (max-width:760px, margin auto).
   Auf den Unterseiten steht der Text darunter aber linksbuendig — die zentrierte
   Ueberschrift wirkte dadurch wie versehentlich verrutscht. Ausserdem war der
   Abstand nach unten (56px) fuer die kompakteren Unterseiten zu gross.
   Die Startseite behaelt ihr zentriertes Layout, weil dort die Inhalte
   ebenfalls mittig stehen.
   -------------------------------------------------------------------------- */
.detail-hero ~ * .head,
.detail-features .head,
.related .head,
.faq .head,
.voices .head,
body:has(.detail-hero) .build .head {
  text-align:left;
  max-width:none;
  margin:0 0 28px;
}
body:has(.detail-hero) .build .head h2,
.faq .head h2,
.related .head h2,
.voices .head h2{
  font-size:clamp(24px,2.4vw,32px);
  line-height:1.2;
}
/* Abschnitte auf Unterseiten enger setzen als auf der Onepage */
body:has(.detail-hero) .build{padding:56px 0}
body:has(.detail-hero) .faq{padding:56px 0 64px}