:root {
      --bg:       #F2F0EC;
      --white:    #FFFFFF;
      --dark:     #1C1C1C;
      --mid:      #4A4A4A;
      --light:    #8A8A8A;
      --accent:   #B8926A;
      --steel:    #6B7E8A;
      --line:     #DEDAD4;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Outfit', sans-serif;
      background: var(--bg);
      color: var(--dark);
      line-height: 1.6;
      font-weight: 300;
    }

    /* ─── HERO ───────────────────────────────────────────────────── */
    .hero {
      position: relative;
      height: 100vh;
      min-height: 620px;
      display: flex;
      align-items: flex-end;
      padding-bottom: 80px;
      overflow: hidden;
    }

    .hero-img {
      position: absolute;
      inset: 0;
      background: #1C1C1C;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Placeholder image — elegant dark metal texture */
    .hero-img::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        repeating-linear-gradient(
          -45deg,
          transparent,
          transparent 2px,
          rgba(255,255,255,0.012) 2px,
          rgba(255,255,255,0.012) 4px
        ),
        linear-gradient(165deg, #2C2C2C 0%, #111111 60%, #1A1A1A 100%);
    }

    .hero-img::after {
      content: '[ Platzhalterbild ]';
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.8rem;
      letter-spacing: 0.2em;
      color: rgba(255,255,255,0.15);
    }

    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to top,
        rgba(10,10,10,0.88) 0%,
        rgba(10,10,10,0.45) 40%,
        rgba(10,10,10,0.1) 100%
      );
    }

    .hero-content {
      position: relative;
      z-index: 2;
      padding: 0 64px;
      max-width: 960px;
    }

    .hero-tag {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.78rem;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .hero-tag::before {
      content: '';
      display: block;
      width: 32px;
      height: 1px;
      background: var(--accent);
    }

    .hero h1 {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(3.6rem, 8vw, 7rem);
      line-height: 0.95;
      letter-spacing: 0.03em;
      color: var(--white);
      margin-bottom: 28px;
    }

    .hero h1 em {
      font-style: normal;
      color: var(--accent);
    }

    .hero-sub {
      font-family: 'Outfit', sans-serif;
      font-size: 1.05rem;
      font-weight: 300;
      color: rgba(255,255,255,0.65);
      max-width: 480px;
      line-height: 1.7;
    }

    .hero-cta {
      margin-top: 40px;
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    .btn-primary {
      display: inline-block;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.9rem;
      font-weight: 600;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--dark);
      background: var(--accent);
      padding: 14px 36px;
      text-decoration: none;
      transition: background 0.2s, transform 0.2s;
    }

    .btn-primary:hover { background: #c9a07a; transform: translateY(-1px); }

    .btn-ghost {
      display: inline-block;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.9rem;
      font-weight: 600;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.8);
      border: 1px solid rgba(255,255,255,0.3);
      padding: 14px 36px;
      text-decoration: none;
      transition: border-color 0.2s, color 0.2s;
    }

    .btn-ghost:hover { border-color: var(--white); color: var(--white); }

    /* ─── STRIP ──────────────────────────────────────────────────── */
    .strip {
      background: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 64px;
      padding: 24px 48px;
      overflow: hidden;
    }

    .strip-item {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.78rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(28,28,28,0.85);
      white-space: nowrap;
    }

    .strip-dot {
      width: 4px;
      height: 4px;
      background: rgba(28,28,28,0.4);
      border-radius: 50%;
    }

    /* ─── SECTION BASE ───────────────────────────────────────────── */
    section {
      padding: 100px 64px;
    }

    .section-tag {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.75rem;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .section-tag::before {
      content: '';
      display: block;
      width: 24px;
      height: 1px;
      background: var(--accent);
    }

    h2 {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(2.4rem, 5vw, 3.8rem);
      letter-spacing: 0.04em;
      color: var(--dark);
      line-height: 1.0;
      margin-bottom: 24px;
    }

    /* ─── INTRO / ÜBER UNS ──────────────────────────────────────── */
    #ueber-uns {
      background: var(--white);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }

    .intro-text p {
      font-size: 1.05rem;
      color: var(--mid);
      line-height: 1.8;
      margin-bottom: 20px;
    }

    .intro-img {
      position: relative;
      height: 480px;
      background: #E8E5E0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .intro-img::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        repeating-linear-gradient(
          90deg,
          transparent,
          transparent 3px,
          rgba(0,0,0,0.018) 3px,
          rgba(0,0,0,0.018) 6px
        ),
        linear-gradient(135deg, #DEDAD4 0%, #C8C4BC 100%);
    }

    .placeholder-label {
      position: relative;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.78rem;
      letter-spacing: 0.2em;
      color: rgba(0,0,0,0.25);
    }

    .stats-row {
      display: flex;
      gap: 48px;
      margin-top: 40px;
      padding-top: 40px;
      border-top: 1px solid var(--line);
    }

    .stat-num {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 2.8rem;
      letter-spacing: 0.04em;
      color: var(--accent);
      line-height: 1;
    }

    .stat-label {
      font-size: 0.82rem;
      color: var(--light);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-top: 4px;
    }

    /* ─── LEISTUNGEN ─────────────────────────────────────────────── */
    #leistungen {
      background: var(--bg);
    }

    #leistungen .section-inner {
      max-width: 1200px;
      margin: 0 auto;
    }

    #leistungen .section-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 64px;
    }

    #leistungen .section-header p {
      max-width: 400px;
      color: var(--mid);
      font-size: 1rem;
      line-height: 1.7;
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2px;
    }

    .card {
      background: var(--white);
      padding: 48px 40px;
      position: relative;
      overflow: hidden;
      transition: transform 0.3s;
    }

    .card:hover { transform: translateY(-4px); }

    .card::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 3px;
      background: var(--accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.35s ease;
    }

    .card:hover::after { transform: scaleX(1); }

    .card-icon {
      width: 52px;
      height: 52px;
      background: var(--bg);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 28px;
    }

    .card-icon svg { width: 26px; height: 26px; stroke: var(--accent); fill: none; stroke-width: 1.5; }

    .card h3 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.25rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--dark);
      margin-bottom: 16px;
    }

    .card p {
      font-size: 0.92rem;
      color: var(--mid);
      line-height: 1.75;
    }

    .card ul {
      margin-top: 16px;
      padding-left: 16px;
      list-style: none;
    }

    .card ul li {
      font-size: 0.88rem;
      color: var(--mid);
      line-height: 1.6;
      padding: 4px 0;
      padding-left: 16px;
      position: relative;
    }

    .card ul li::before {
      content: '—';
      position: absolute;
      left: 0;
      color: var(--accent);
      font-size: 0.75rem;
    }

    /* ─── MASCHINEN ──────────────────────────────────────────────── */
    #maschinen {
      background: var(--dark);
      color: var(--white);
      padding: 100px 64px;
    }

    #maschinen .section-tag { color: var(--accent); }
    #maschinen .section-tag::before { background: var(--accent); }
    #maschinen h2 { color: var(--white); }

    .maschinen-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
      max-width: 1200px;
      margin: 0 auto;
    }

    .maschinen-img {
      height: 440px;
      background: #2A2A2A;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .maschinen-img::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        repeating-linear-gradient(
          -60deg,
          transparent,
          transparent 4px,
          rgba(255,255,255,0.015) 4px,
          rgba(255,255,255,0.015) 8px
        ),
        linear-gradient(160deg, #2E2E2E 0%, #1A1A1A 100%);
    }

    .maschinen-img .placeholder-label { color: rgba(255,255,255,0.2); }

    .maschinen-text p {
      color: rgba(255,255,255,0.6);
      line-height: 1.8;
      font-size: 0.98rem;
      margin-bottom: 20px;
    }

    .feature-list {
      margin-top: 32px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .feature-item {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      background: rgba(255,255,255,0.04);
      padding: 16px 20px;
      border-left: 2px solid var(--accent);
    }

    .feature-item p {
      font-size: 0.88rem;
      color: rgba(255,255,255,0.55);
      margin: 0;
      line-height: 1.6;
    }

    /* ─── REFERENZ-STRIP ─────────────────────────────────────────── */
    .img-strip {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2px;
    }

    .img-tile {
      height: 260px;
      background: #DEDAD4;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
    }

    .img-tile:nth-child(even) { background: #E8E5DF; }
    .img-tile:nth-child(3) { background: #D6D2CB; }
    .img-tile:nth-child(4) { background: #CECAB2; }

    .img-tile::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        repeating-linear-gradient(
          45deg,
          transparent,
          transparent 8px,
          rgba(0,0,0,0.025) 8px,
          rgba(0,0,0,0.025) 9px
        );
    }

    .img-tile .placeholder-label { position: relative; }

    /* ─── KONTAKT ────────────────────────────────────────────────── */
    #kontakt {
      background: var(--white);
      max-width: 800px;
      margin: 0 auto;
    }

    .kontakt-info h2 { margin-bottom: 12px; }

    .kontakt-info p {
      color: var(--mid);
      font-size: 1rem;
      line-height: 1.8;
      margin-bottom: 40px;
    }

    .contact-block {
      margin-bottom: 32px;
    }

    .contact-block-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.72rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 8px;
    }

    .contact-block-body {
      font-size: 0.95rem;
      color: var(--mid);
      line-height: 1.8;
    }

    .contact-block-body a {
      color: var(--dark);
      text-decoration: none;
      font-weight: 500;
      transition: color 0.2s;
    }

    .contact-block-body a:hover { color: var(--accent); }

    /* ─── MAP PLACEHOLDER ───────────────────────────────────────── */
    .map-area {
      background: #E0DDD7;
      height: 260px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 48px;
      position: relative;
      overflow: hidden;
      grid-column: 1 / -1;
    }

    .map-area::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        repeating-linear-gradient(0deg, transparent, transparent 20px, rgba(0,0,0,0.03) 20px, rgba(0,0,0,0.03) 21px),
        repeating-linear-gradient(90deg, transparent, transparent 20px, rgba(0,0,0,0.03) 20px, rgba(0,0,0,0.03) 21px);
    }

    .map-area .placeholder-label { position: relative; }

    /* ─── FOOTER ─────────────────────────────────────────────────── */
    footer {
      background: var(--dark);
      padding: 56px 64px 40px;
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr;
      gap: 48px;
    }

    .footer-brand .footer-logo img { height: 44px; width: auto; display: block; margin-bottom: 16px; }

    .footer-brand

    .footer-brand p {
      font-size: 0.88rem;
      color: rgba(255,255,255,0.4);
      line-height: 1.7;
      max-width: 280px;
    }

    .footer-col h4 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.72rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.35);
      margin-bottom: 20px;
    }

    .footer-col ul { list-style: none; }

    .footer-col ul li {
      margin-bottom: 10px;
    }

    .footer-col ul li a {
      font-size: 0.88rem;
      color: rgba(255,255,255,0.55);
      text-decoration: none;
      transition: color 0.2s;
    }

    .footer-col ul li a:hover { color: var(--accent); }

    .footer-col address {
      font-style: normal;
      font-size: 0.88rem;
      color: rgba(255,255,255,0.45);
      line-height: 1.8;
    }

    .footer-bottom {
      background: var(--dark);
      padding: 20px 64px;
      border-top: 1px solid rgba(255,255,255,0.06);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .footer-bottom p {
      font-size: 0.78rem;
      color: rgba(255,255,255,0.25);
    }

    .footer-bottom a {
      font-size: 0.78rem;
      color: rgba(255,255,255,0.3);
      text-decoration: none;
      transition: color 0.2s;
    }

    .footer-bottom a:hover { color: var(--accent); }

    .footer-bottom-links { display: flex; gap: 24px; }

    /* ─── ANIMATIONS ─────────────────────────────────────────────── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(28px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .hero-tag  { animation: fadeUp 0.7s ease 0.2s both; }
    .hero h1   { animation: fadeUp 0.7s ease 0.4s both; }
    .hero-sub  { animation: fadeUp 0.7s ease 0.55s both; }
    .hero-cta  { animation: fadeUp 0.7s ease 0.7s both; }

    /* ─── MOBILE ─────────────────────────────────────────────────── */
    @media (max-width: 900px) {
      nav { padding: 0 24px; }
      section { padding: 72px 24px; }
      #ueber-uns, #kontakt, .maschinen-inner { grid-template-columns: 1fr; gap: 40px; }
      .hero-content { padding: 0 24px; }
      .cards { grid-template-columns: 1fr; }
      #leistungen .section-header { flex-direction: column; align-items: flex-start; gap: 16px; }
      .img-strip { grid-template-columns: 1fr 1fr; }
      footer { grid-template-columns: 1fr; gap: 32px; padding: 40px 24px 32px; }
      .footer-bottom { padding: 16px 24px; flex-direction: column; gap: 8px; }
      .stats-row { gap: 28px; }
      #maschinen { padding: 72px 24px; }
      .form-row { grid-template-columns: 1fr; }
    }