:root {
    --bg:     #F4F1EC;
    --ink:    #1A1A18;
    --accent: #D94F00;
    --rule:   #C8C3B8;
    --warm:   #E8E3D8;
    --card-bg:#EDEAE2;
    --mono:    'IBM Plex Mono', monospace;
    --display: 'Bebas Neue', sans-serif;
    --text:    'Fraunces', serif;
    --t: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, fill 0.35s ease;
  }
  [data-theme="dark"] {
    --bg:     #111110;
    --ink:    #F0EDE6;
    --rule:   #2C2B28;
    --warm:   #191817;
    --card-bg:#1C1B19;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }

  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--text);
    overflow-x: hidden;
    transition: background 0.35s ease, color 0.35s ease;
  }

  body::before {
    content: '';
    position: fixed; inset: 0;
    background-image:
      linear-gradient(to right, var(--rule) 1px, transparent 1px),
      linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
    background-size: 80px 80px;
    opacity: 0.28;
    pointer-events: none;
    z-index: 0;
    transition: background-image 0.35s ease;
  }

  /* ── NAV ── */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 48px;
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
    transition: background 0.35s ease, border-color 0.35s ease;
  }

  .nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }

  .logo-svg { height: 34px; width: auto; }
  .logo-svg .lp { fill: var(--ink); transition: fill 0.35s ease; }

  .nav-wordmark {
    font-family: var(--mono); font-size: 12px; font-weight: 500;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink); line-height: 1.35;
    transition: color 0.35s ease;
  }
  .nav-wordmark small {
    display: block; font-size: 9px; letter-spacing: 0.16em;
    color: var(--accent); margin-top: 1px;
  }

  .nav-links { display: flex; gap: 36px; list-style: none; }
  .nav-links a {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink);
    text-decoration: none; opacity: 0.75; transition: opacity 0.2s;
  }
  .nav-links a:hover { opacity: 1; }

  .nav-right { display: flex; align-items: center; gap: 14px; }

  /* Theme toggle button */
  .theme-btn {
    width: 38px; height: 38px;
    background: none; border: 1px solid var(--rule); cursor: pointer;
    color: var(--ink); display: flex; align-items: center; justify-content: center;
    transition: border-color 0.2s, color 0.35s ease;
    flex-shrink: 0;
  }
  .theme-btn:hover { border-color: var(--ink); }
  .theme-btn svg { width: 18px; height: 18px; pointer-events: none; }
  .icon-sun  { display: none; }
  .icon-moon { display: block; }
  [data-theme="dark"] .icon-sun  { display: block; }
  [data-theme="dark"] .icon-moon { display: none; }

  .nav-cta {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--bg);
    background: var(--ink); padding: 0 20px; height: 38px;
    display: inline-flex; align-items: center;
    text-decoration: none; transition: background 0.2s, color 0.35s ease;
  }
  .nav-cta:hover { background: var(--accent); }

  /* ── HERO ── */
  .hero {
    position: relative; z-index: 1;
    min-height: 100vh; padding: 140px 48px 80px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }

  .hero-label {
    grid-column: 1; grid-row: 1;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em;
    text-transform: uppercase; color: var(--accent);
    padding-bottom: 24px;
    display: flex; align-items: center; gap: 12px;
  }
  .hero-label::before {
    content: ''; display: inline-block;
    width: 32px; height: 1px; background: var(--accent);
  }

  .hero-headline {
    grid-column: 1 / -1; grid-row: 2;
    font-family: var(--display);
    font-size: clamp(80px, 12vw, 180px);
    line-height: 0.92; letter-spacing: 0.01em;
    color: var(--ink); transition: color 0.35s ease;
  }
  .hero-headline .line-2 {
    color: transparent;
    -webkit-text-stroke: 2px var(--ink);
    display: block; padding-left: 80px;
    transition: -webkit-text-stroke-color 0.35s ease;
  }
  .hero-headline .accent-word { color: var(--accent); -webkit-text-stroke: 0; }

  .hero-bottom {
    grid-column: 1 / -1; grid-row: 3;
    display: flex; justify-content: space-between; align-items: flex-end;
    padding-top: 60px; margin-top: 48px;
    border-top: 1px solid var(--rule);
    transition: border-color 0.35s ease;
  }
  .hero-desc {
    max-width: 420px; font-size: 18px; font-weight: 300;
    line-height: 1.6; opacity: 0.72;
  }
  .hero-stats { display: flex; gap: 48px; }
  .stat { text-align: right; }
  .stat-number {
    font-family: var(--display); font-size: 48px; line-height: 1;
    color: var(--ink); transition: color 0.35s ease;
  }
  .stat-label {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
    text-transform: uppercase; opacity: 0.4; margin-top: 4px;
  }

  /* ── MARQUEE ── */
  .marquee-strip {
    position: relative; z-index: 1;
    background: var(--ink); padding: 14px 0; overflow: hidden;
    transition: background 0.35s ease;
  }
  .marquee-track {
    display: flex; white-space: nowrap;
    animation: marquee 24s linear infinite;
  }
  .marquee-item {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em;
    text-transform: uppercase; color: var(--bg);
    padding: 0 32px; opacity: 0.7;
    transition: color 0.35s ease;
  }
  .marquee-item.accent { color: var(--accent); opacity: 1; }
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* ── SERVICES ── */
  .services { position: relative; z-index: 1; padding: 120px 48px; }

  .section-header {
    display: flex; justify-content: space-between; align-items: baseline;
    border-top: 1px solid var(--rule); padding-top: 20px; margin-bottom: 64px;
    transition: border-color 0.35s ease;
  }
  .section-title {
    font-family: var(--display); font-size: 72px; line-height: 1;
    color: var(--ink); transition: color 0.35s ease;
  }
  .section-index {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em;
    text-transform: uppercase; opacity: 0.55;
  }

  /* 3-column grid: col 1 spans 2 rows, cols 2+3 have 2 rows each */
  .services-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 1px;
    background: var(--rule);
    transition: background 0.35s ease;
  }

  .service-card {
    background: var(--card-bg);
    padding: 44px 38px;
    display: flex; flex-direction: column;
    position: relative; z-index: 1;
    overflow: hidden;
    transition: background 0.28s ease;
  }
  /* Logo-Wasserzeichen unten links */
  .service-card::after {
    content: '';
    position: absolute;
    bottom: -20px; left: -20px;
    width: 160px; height: 160px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240.45 247.14'%3E%3Cpath fill='currentColor' d='M233.21,91.37l-2.89-11.86-77.62,60.22c-14.4,11.1-35.14,8.42-46.23-5.98l-3.88-5.04c-5.34-6.92-7.62-15.44-6.44-23.97,1.19-8.54,5.71-16.23,12.78-21.68l77.33-60.58-10.61-5.75C133.08-6.35,79.9-.49,43.3,31.31,6.54,63.24-6.45,115.38,10.97,161.06c1.56,4.08,6.13,6.13,10.22,4.57,4.08-1.56,6.13-6.13,4.58-10.21-15.06-39.5-3.85-84.57,27.91-112.16,28.98-25.17,68.34-31.68,103.19-17.88l-57.65,45.17c-10.33,7.96-16.98,19.33-18.75,32-1.78,12.78,1.63,25.5,9.58,35.82l3.88,5.04c7.94,10.3,19.4,16.9,32.29,18.59h.09c12.92,1.68,25.73-1.78,36.07-9.75l57.67-44.75c4.08,35-10.28,69.98-38.47,91.71-30.96,23.87-71.97,27.55-106.12,10.67l10.9-4.25c4.07-1.59,6.08-6.18,4.5-10.25s-6.18-6.08-10.25-4.5l-29.51,11.51c-.51.2-.99.44-1.43.73-1.77,1.14-2.97,2.92-3.42,4.91-.34,1.49-.25,3.09.35,4.61l10.59,27.15c1.09,2.79,3.58,4.61,6.35,4.97,1.28.17,2.61.02,3.9-.48,4.07-1.59,6.08-6.18,4.5-10.25l-4-10.27c11.78,5.9,24.26,9.73,36.95,11.39,30,3.94,61.08-3.93,86.37-23.42,36.47-28.11,52.94-75.37,41.96-120.38Z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom left;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    filter: invert(0);
  }
  /* Karten 02–05: Logo in Tintenfarbe, leicht sichtbar */
  .service-card:not(.sc-featured)::after {
    filter: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240.45 247.14'%3E%3Cpath fill='%231A1A18' d='M233.21,91.37l-2.89-11.86-77.62,60.22c-14.4,11.1-35.14,8.42-46.23-5.98l-3.88-5.04c-5.34-6.92-7.62-15.44-6.44-23.97,1.19-8.54,5.71-16.23,12.78-21.68l77.33-60.58-10.61-5.75C133.08-6.35,79.9-.49,43.3,31.31,6.54,63.24-6.45,115.38,10.97,161.06c1.56,4.08,6.13,6.13,10.22,4.57,4.08-1.56,6.13-6.13,4.58-10.21-15.06-39.5-3.85-84.57,27.91-112.16,28.98-25.17,68.34-31.68,103.19-17.88l-57.65,45.17c-10.33,7.96-16.98,19.33-18.75,32-1.78,12.78,1.63,25.5,9.58,35.82l3.88,5.04c7.94,10.3,19.4,16.9,32.29,18.59h.09c12.92,1.68,25.73-1.78,36.07-9.75l57.67-44.75c4.08,35-10.28,69.98-38.47,91.71-30.96,23.87-71.97,27.55-106.12,10.67l10.9-4.25c4.07-1.59,6.08-6.18,4.5-10.25s-6.18-6.08-10.25-4.5l-29.51,11.51c-.51.2-.99.44-1.43.73-1.77,1.14-2.97,2.92-3.42,4.91-.34,1.49-.25,3.09.35,4.61l10.59,27.15c1.09,2.79,3.58,4.61,6.35,4.97,1.28.17,2.61.02,3.9-.48,4.07-1.59,6.08-6.18,4.5-10.25l-4-10.27c11.78,5.9,24.26,9.73,36.95,11.39,30,3.94,61.08-3.93,86.37-23.42,36.47-28.11,52.94-75.37,41.96-120.38Z'/%3E%3C/svg%3E");
  }
  .service-card:not(.sc-featured):hover::after { opacity: 0.07; }

  /* Featured (01): Logo in Weiß beim Hover */
  .sc-featured::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240.45 247.14'%3E%3Cpath fill='%23ffffff' d='M233.21,91.37l-2.89-11.86-77.62,60.22c-14.4,11.1-35.14,8.42-46.23-5.98l-3.88-5.04c-5.34-6.92-7.62-15.44-6.44-23.97,1.19-8.54,5.71-16.23,12.78-21.68l77.33-60.58-10.61-5.75C133.08-6.35,79.9-.49,43.3,31.31,6.54,63.24-6.45,115.38,10.97,161.06c1.56,4.08,6.13,6.13,10.22,4.57,4.08-1.56,6.13-6.13,4.58-10.21-15.06-39.5-3.85-84.57,27.91-112.16,28.98-25.17,68.34-31.68,103.19-17.88l-57.65,45.17c-10.33,7.96-16.98,19.33-18.75,32-1.78,12.78,1.63,25.5,9.58,35.82l3.88,5.04c7.94,10.3,19.4,16.9,32.29,18.59h.09c12.92,1.68,25.73-1.78,36.07-9.75l57.67-44.75c4.08,35-10.28,69.98-38.47,91.71-30.96,23.87-71.97,27.55-106.12,10.67l10.9-4.25c4.07-1.59,6.08-6.18,4.5-10.25s-6.18-6.08-10.25-4.5l-29.51,11.51c-.51.2-.99.44-1.43.73-1.77,1.14-2.97,2.92-3.42,4.91-.34,1.49-.25,3.09.35,4.61l10.59,27.15c1.09,2.79,3.58,4.61,6.35,4.97,1.28.17,2.61.02,3.9-.48,4.07-1.59,6.08-6.18,4.5-10.25l-4-10.27c11.78,5.9,24.26,9.73,36.95,11.39,30,3.94,61.08-3.93,86.37-23.42,36.47-28.11,52.94-75.37,41.96-120.38Z'/%3E%3C/svg%3E");
  }
  .sc-featured:hover::after { opacity: 0.1; }

  .service-card:hover:not(.sc-featured) {
    background: var(--bg);
  }
  /* Nummer, Icon, Titel beim Hover */
  .service-card:not(.sc-featured):hover .svc-num {
    opacity: 1;
    color: var(--accent);
  }
  .service-card:not(.sc-featured):hover .svc-icon {
    color: var(--ink);
  }
  .service-card:not(.sc-featured):hover .svc-name {
    color: var(--accent);
  }
  /* Featured (01): Icon wird weiß beim Hover */
  .sc-featured:hover .svc-icon {
    color: #fff;
  }
  .svc-num {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
    text-transform: uppercase; opacity: 0.55; margin-bottom: 28px;
    transition: color 0.28s ease, opacity 0.28s ease;
  }
  /* Featured: column 1, both rows */
  .sc-featured { grid-column: 1; grid-row: 1 / 3; background: var(--ink); color: var(--bg); transition: background 0.35s ease, color 0.35s ease; }
  .sc-featured:hover { background: var(--accent) !important; }

  .sc-r1c2 { grid-column: 2; grid-row: 1; }
  .sc-r1c3 { grid-column: 3; grid-row: 1; }
  .sc-r2c2 { grid-column: 2; grid-row: 2; }
  .sc-r2c3 { grid-column: 3; grid-row: 2; }

  .svc-icon {
    width: 36px; height: 36px; margin-bottom: 18px;
    color: var(--accent); flex-shrink: 0;
    transition: color 0.28s ease;
  }
  .svc-name {
    font-family: var(--display); font-size: 36px; line-height: 1.05;
    margin-bottom: 14px;
    transition: color 0.28s ease;
  }
  .sc-featured .svc-name { font-size: 56px; }
  .svc-desc {
    font-size: 14px; font-weight: 300; line-height: 1.65;
    opacity: 0.82; flex-grow: 1;
  }
  .svc-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }
  .tag {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
    text-transform: uppercase; padding: 4px 9px;
    border: 1px solid currentColor; opacity: 0.7;
    text-decoration: none; color: inherit;
    transition: opacity 0.2s, background 0.2s, color 0.2s;
  }
  a.tag:hover {
    opacity: 1;
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
  .svc-link {
    display: inline-block; margin-top: 32px;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--accent);
    text-decoration: none; transition: letter-spacing 0.2s;
  }
  .sc-featured:hover .svc-link { color: var(--bg); }
  .svc-link:hover { letter-spacing: 0.18em; }

  /* Two-link row on each card */
  .svc-actions {
    display: flex; gap: 16px; margin-top: 28px;
    flex-wrap: wrap; align-items: center;
  }
  .svc-action-call {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--bg);
    text-decoration: none;
    background: var(--ink);
    padding: 9px 16px;
    transition: background 0.2s;
    white-space: nowrap;
  }
  .svc-action-call:hover { background: var(--accent); }
  .svc-action-appt {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--accent);
    text-decoration: none;
    transition: letter-spacing 0.2s;
    white-space: nowrap;
  }
  .svc-action-appt:hover { letter-spacing: 0.17em; }
  /* On dark featured card */
  .sc-featured .svc-action-call {
    background: var(--bg); color: var(--ink);
  }
  .sc-featured .svc-action-call:hover { background: var(--accent); color: var(--bg); }
  .sc-featured .svc-action-appt { color: var(--accent); }
  .sc-featured:hover .svc-action-appt { color: var(--bg); }

  /* ── PROCESS ── */
  .process {
    position: relative; z-index: 1;
    padding: 120px 48px;
    background: var(--warm);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    transition: background 0.35s ease, border-color 0.35s ease;
  }
  .process-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1px; background: var(--rule); margin-top: 64px;
    transition: background 0.35s ease;
  }
  .process-step {
    background: var(--warm); padding: 40px 32px;
    display: flex; flex-direction: column;
    cursor: pointer;
    transition: background 0.35s ease, transform 0.28s cubic-bezier(0.34,1.4,0.64,1), box-shadow 0.28s ease;
    position: relative; z-index: 1;
  }
  .process-step:hover {
    background: var(--bg);
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.10);
    z-index: 2;
  }
  [data-theme="dark"] .process-step:hover {
    box-shadow: 0 16px 40px rgba(0,0,0,0.35);
  }
  .step-num {
    font-family: var(--display); font-size: 96px; line-height: 0.85;
    color: var(--rule); margin-bottom: 24px; display: block;
    transition: color 0.28s ease;
  }
  .process-step:hover .step-num { color: var(--accent); }
  .step-title {
    font-family: var(--display); font-size: 28px; color: var(--ink);
    margin-bottom: 12px; transition: color 0.35s ease;
  }
  .step-desc { font-size: 14px; font-weight: 300; line-height: 1.6; opacity: 0.78; flex-grow: 1; }

  /* "Mehr erfahren" link on each step */
  .step-more {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 24px;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bg); background: var(--ink);
    border: none; cursor: pointer;
    padding: 9px 16px;
    transition: background 0.2s;
  }
  .step-more:hover { background: var(--accent); }
  .step-more::after { content: '→'; }

  /* ── MODAL ── */
  .modal-backdrop {
    position: fixed; inset: 0; z-index: 400;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    overflow-y: auto;
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .modal-backdrop.open {
    opacity: 1; pointer-events: all;
  }
  .modal {
    background: var(--bg);
    border: 1px solid var(--rule);
    max-width: 560px; width: 100%;
    padding: 48px;
    position: relative;
    overflow: hidden;
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.34,1.2,0.64,1), background 0.35s ease;
  }
  .modal-backdrop.open .modal { transform: translateY(0); }

  /* Logo-Wasserzeichen unten links im Modal */
  .modal::before {
    content: '';
    position: absolute;
    bottom: -24px; left: -24px;
    width: 200px; height: 200px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240.45 247.14'%3E%3Cpath fill='%231A1A18' d='M233.21,91.37l-2.89-11.86-77.62,60.22c-14.4,11.1-35.14,8.42-46.23-5.98l-3.88-5.04c-5.34-6.92-7.62-15.44-6.44-23.97,1.19-8.54,5.71-16.23,12.78-21.68l77.33-60.58-10.61-5.75C133.08-6.35,79.9-.49,43.3,31.31,6.54,63.24-6.45,115.38,10.97,161.06c1.56,4.08,6.13,6.13,10.22,4.57,4.08-1.56,6.13-6.13,4.58-10.21-15.06-39.5-3.85-84.57,27.91-112.16,28.98-25.17,68.34-31.68,103.19-17.88l-57.65,45.17c-10.33,7.96-16.98,19.33-18.75,32-1.78,12.78,1.63,25.5,9.58,35.82l3.88,5.04c7.94,10.3,19.4,16.9,32.29,18.59h.09c12.92,1.68,25.73-1.78,36.07-9.75l57.67-44.75c4.08,35-10.28,69.98-38.47,91.71-30.96,23.87-71.97,27.55-106.12,10.67l10.9-4.25c4.07-1.59,6.08-6.18,4.5-10.25s-6.18-6.08-10.25-4.5l-29.51,11.51c-.51.2-.99.44-1.43.73-1.77,1.14-2.97,2.92-3.42,4.91-.34,1.49-.25,3.09.35,4.61l10.59,27.15c1.09,2.79,3.58,4.61,6.35,4.97,1.28.17,2.61.02,3.9-.48,4.07-1.59,6.08-6.18,4.5-10.25l-4-10.27c11.78,5.9,24.26,9.73,36.95,11.39,30,3.94,61.08-3.93,86.37-23.42,36.47-28.11,52.94-75.37,41.96-120.38Z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom left;
    opacity: 0.06;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }
  [data-theme="dark"] .modal::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240.45 247.14'%3E%3Cpath fill='%23F0EDE6' d='M233.21,91.37l-2.89-11.86-77.62,60.22c-14.4,11.1-35.14,8.42-46.23-5.98l-3.88-5.04c-5.34-6.92-7.62-15.44-6.44-23.97,1.19-8.54,5.71-16.23,12.78-21.68l77.33-60.58-10.61-5.75C133.08-6.35,79.9-.49,43.3,31.31,6.54,63.24-6.45,115.38,10.97,161.06c1.56,4.08,6.13,6.13,10.22,4.57,4.08-1.56,6.13-6.13,4.58-10.21-15.06-39.5-3.85-84.57,27.91-112.16,28.98-25.17,68.34-31.68,103.19-17.88l-57.65,45.17c-10.33,7.96-16.98,19.33-18.75,32-1.78,12.78,1.63,25.5,9.58,35.82l3.88,5.04c7.94,10.3,19.4,16.9,32.29,18.59h.09c12.92,1.68,25.73-1.78,36.07-9.75l57.67-44.75c4.08,35-10.28,69.98-38.47,91.71-30.96,23.87-71.97,27.55-106.12,10.67l10.9-4.25c4.07-1.59,6.08-6.18,4.5-10.25s-6.18-6.08-10.25-4.5l-29.51,11.51c-.51.2-.99.44-1.43.73-1.77,1.14-2.97,2.92-3.42,4.91-.34,1.49-.25,3.09.35,4.61l10.59,27.15c1.09,2.79,3.58,4.61,6.35,4.97,1.28.17,2.61.02,3.9-.48,4.07-1.59,6.08-6.18,4.5-10.25l-4-10.27c11.78,5.9,24.26,9.73,36.95,11.39,30,3.94,61.08-3.93,86.37-23.42,36.47-28.11,52.94-75.37,41.96-120.38Z'/%3E%3C/svg%3E");
    opacity: 0.08;
  }

  .modal-step-num {
    font-family: var(--display); font-size: 64px; line-height: 0.85;
    color: var(--rule); display: block; margin-bottom: 16px;
    transition: color 0.35s ease;
  }
  .modal-title {
    font-family: var(--display); font-size: 42px; line-height: 1;
    color: var(--ink); margin-bottom: 24px;
    transition: color 0.35s ease;
  }
  .modal-body {
    font-size: 15px; font-weight: 300; line-height: 1.7;
    opacity: 0.75;
  }
  .modal-body p { margin-bottom: 14px; }
  .modal-body p:last-child { margin-bottom: 0; }
  .modal-body ul {
    margin: 12px 0 14px 0;
    padding-left: 0; list-style: none;
    display: flex; flex-direction: column; gap: 8px;
  }
  .modal-body ul li {
    display: flex; align-items: baseline; gap: 10px;
    font-size: 14px;
  }
  .modal-body ul li::before {
    content: '—';
    font-family: var(--mono); font-size: 10px;
    color: var(--accent); flex-shrink: 0;
  }
  .modal-close {
    position: absolute; top: 20px; right: 20px;
    background: none; border: 1px solid var(--rule);
    color: var(--ink); width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 18px; line-height: 1;
    transition: border-color 0.2s, background 0.2s;
  }
  .modal-close:hover { border-color: var(--ink); background: var(--warm); }
  .modal-footer {
    margin-top: 36px; padding-top: 24px;
    border-top: 1px solid var(--rule);
    display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
    transition: border-color 0.35s ease;
  }
  .modal-cta-call {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--bg);
    background: var(--ink); padding: 10px 20px;
    display: inline-flex; align-items: center;
    text-decoration: none; transition: background 0.2s;
  }
  .modal-cta-call:hover { background: var(--accent); }
  .modal-cta-appt {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--accent);
    padding: 10px 0; display: inline-flex; align-items: center;
    text-decoration: none; transition: letter-spacing 0.2s;
  }
  .modal-cta-appt:hover { letter-spacing: 0.16em; }

  /* ── CONTACT WIZARD ── */
  .contact-section {
    position: relative; z-index: 1;
    padding: 120px 48px;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    grid-template-rows: auto auto;
    gap: 0 80px;
    align-items: start;
  }
  .contact-left       { grid-column: 1; grid-row: 1 / 3; align-self: start; }
  .contact-index      { grid-column: 2; grid-row: 1; }
  .wizard             { grid-column: 2; grid-row: 2; }

  /* Left column: headline + meta */
  .contact-left {}
  .contact-headline {
    font-family: var(--display);
    font-size: clamp(56px, 7vw, 110px);
    line-height: 0.93; color: var(--ink);
    transition: color 0.35s ease;
  }
  .contact-headline em {
    font-style: italic; color: var(--accent);
    font-family: var(--text); font-weight: 300;
  }
  .contact-meta {
    margin-top: 48px;
    border-top: 1px solid var(--rule);
    padding-top: 32px;
    display: flex; flex-direction: column; gap: 20px;
    transition: border-color 0.35s ease;
  }
  .contact-meta-item {
    display: flex; flex-direction: column; gap: 4px;
  }
  .contact-meta-label {
    font-family: var(--mono); font-size: 10px;
    letter-spacing: 0.18em; text-transform: uppercase;
    opacity: 0.8;
  }
  .contact-meta-value {
    font-family: var(--mono); font-size: 15px;
    color: var(--ink); text-decoration: none;
    transition: color 0.2s;
  }
  a.contact-meta-value:hover { color: var(--accent); }

  /* Right column: wizard */
  .wizard {
    background: var(--card-bg);
    border: 1px solid var(--rule);
    transition: background 0.35s ease, border-color 0.35s ease;
  }

  /* Progress bar */
  .wizard-progress {
    display: flex;
    border-bottom: 1px solid var(--rule);
    transition: border-color 0.35s ease;
  }
  .wp-step {
    flex: 1; padding: 18px 20px;
    display: flex; align-items: center; gap: 10px;
    font-family: var(--mono); font-size: 12px;
    letter-spacing: 0.12em; text-transform: uppercase;
    opacity: 0.55; border-right: 1px solid var(--rule);
    transition: opacity 0.3s, background 0.3s, border-color 0.35s ease;
    cursor: default;
  }
  .wp-step:last-child { border-right: none; }
  .wp-step.active { opacity: 1; background: var(--bg); }
  .wp-step.done   { opacity: 0.6; }
  .wp-step.done .wp-num { background: var(--accent); color: #fff; border-color: var(--accent); }
  .wp-num {
    width: 22px; height: 22px; border-radius: 50%;
    border: 1px solid currentColor;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; flex-shrink: 0;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
  }
  .wp-step.active .wp-num { background: var(--ink); color: var(--bg); border-color: var(--ink); }

  /* Step panels */
  .wizard-body { padding: 40px; }

  .wz-step { display: none; }
  .wz-step.active { display: block; }

  .wz-step-title {
    font-family: var(--display); font-size: 32px;
    color: var(--ink); margin-bottom: 6px;
    transition: color 0.35s ease;
  }
  .wz-step-sub {
    font-family: var(--mono); font-size: 12px;
    letter-spacing: 0.08em; opacity: 0.65;
    margin-bottom: 32px;
  }

  /* Form fields */
  .wz-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
  .wz-row.full { grid-template-columns: 1fr; }

  .wz-field { display: flex; flex-direction: column; gap: 6px; }
  .wz-label {
    font-family: var(--mono); font-size: 11px;
    letter-spacing: 0.15em; text-transform: uppercase;
    opacity: 0.7;
  }
  .wz-input, .wz-select, .wz-textarea {
    background: var(--bg);
    border: 1px solid var(--rule);
    color: var(--ink);
    font-family: var(--text); font-size: 17px; font-weight: 300;
    padding: 12px 14px;
    outline: none;
    transition: border-color 0.2s, background 0.35s ease, color 0.35s ease;
    width: 100%;
    appearance: none; -webkit-appearance: none;
  }
  .wz-input:focus, .wz-select:focus, .wz-textarea:focus {
    border-color: var(--ink);
  }
  .wz-input.error, .wz-select.error, .wz-textarea.error {
    border-color: var(--accent);
  }
  .wz-textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
  .wz-select-wrap { position: relative; }
  .wz-select-wrap::after {
    content: '↓';
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    font-family: var(--mono); font-size: 11px;
    pointer-events: none; opacity: 0.5;
  }
  .wz-error-msg {
    font-family: var(--mono); font-size: 9px;
    letter-spacing: 0.1em; color: var(--accent);
    margin-top: 2px; display: none;
  }
  .wz-field.has-error .wz-error-msg { display: block; }

  /* Robot type selector */
  .wz-types {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
    margin-bottom: 24px;
  }
  .wz-type-btn {
    background: var(--bg); border: 1px solid var(--rule);
    color: var(--ink); cursor: pointer;
    padding: 14px 10px; text-align: center;
    transition: border-color 0.2s, background 0.2s;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
  }
  .wz-type-btn:hover { border-color: var(--ink); }
  .wz-type-btn.selected { border-color: var(--accent); background: var(--warm); }
  .wz-type-icon { font-size: 22px; line-height: 1; }
  .wz-type-label {
    font-family: var(--mono); font-size: 9px;
    letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7;
  }

  /* Char counter */
  .wz-counter {
    font-family: var(--mono); font-size: 9px;
    opacity: 0.35; text-align: right; margin-top: 4px;
  }

  /* Summary (step 3) */
  .wz-summary {
    background: var(--warm);
    border: 1px solid var(--rule);
    padding: 24px;
    margin-bottom: 24px;
    transition: background 0.35s ease, border-color 0.35s ease;
  }
  .wz-summary-row {
    display: flex; justify-content: space-between;
    padding: 8px 0; border-bottom: 1px solid var(--rule);
    transition: border-color 0.35s ease;
  }
  .wz-summary-row:last-child { border-bottom: none; }
  .wz-summary-key {
    font-family: var(--mono); font-size: 9px;
    letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.65;
  }
  .wz-summary-val {
    font-family: var(--text); font-size: 14px; font-weight: 300;
    text-align: right; max-width: 60%; word-break: break-word;
  }

  /* Wizard footer / nav */
  .wizard-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 24px 40px;
    border-top: 1px solid var(--rule);
    transition: border-color 0.35s ease;
  }
  .wz-btn {
    font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em;
    text-transform: uppercase; border: none; cursor: pointer;
    padding: 13px 28px; transition: background 0.2s, opacity 0.2s, transform 0.15s;
  }
  .wz-btn-back {
    background: none; color: var(--ink); opacity: 0.65;
    border: 1px solid var(--rule);
  }
  .wz-btn-back:hover { opacity: 1; }
  .wz-btn-next {
    background: var(--ink); color: var(--bg);
  }
  .wz-btn-next:hover { background: var(--accent); transform: translateY(-1px); }
  .wz-btn-submit {
    background: var(--accent); color: #fff;
  }
  .wz-btn-submit:hover { background: var(--ink); transform: translateY(-1px); }
  .wz-btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }

  /* Success state */
  .wz-success {
    display: none; text-align: center;
    padding: 60px 40px;
  }
  .wz-success.show { display: block; }
  .wz-success-icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; margin: 0 auto 24px;
  }
  .wz-success-title {
    font-family: var(--display); font-size: 42px;
    color: var(--ink); margin-bottom: 12px;
    transition: color 0.35s ease;
  }
  .wz-success-msg {
    font-size: 15px; font-weight: 300; line-height: 1.65;
    opacity: 0.65; max-width: 360px; margin: 0 auto;
  }

  /* Responsive */
  @media (max-width: 960px) {
    .contact-section { grid-template-columns: 1fr; padding: 80px 20px; gap: 48px; }
    .wz-row { grid-template-columns: 1fr; }
    .wizard-body { padding: 28px 24px; }
    .wizard-footer { padding: 20px 24px; }
    .wz-types { grid-template-columns: repeat(3, 1fr); }
  }

  /* ── FOOTER ── */
  footer {
    position: relative; z-index: 1;
    border-top: 1px solid var(--rule); padding: 36px 48px;
    display: flex; justify-content: space-between; align-items: center;
    transition: border-color 0.35s ease;
  }
  .footer-logo-wrap { display: flex; align-items: center; gap: 10px; }
  .footer-logo-svg { height: 22px; width: auto; opacity: 0.35; }
  .footer-logo-svg .lp { fill: var(--ink); transition: fill 0.35s ease; }
  .footer-brand {
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
    text-transform: uppercase; opacity: 0.65;
  }
  .footer-links { display: flex; gap: 28px; list-style: none; }
  .footer-links a {
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink);
    text-decoration: none; opacity: 0.85; transition: opacity 0.2s;
  }
  .footer-links a:hover { opacity: 1; }
  .footer-copy { font-family: var(--mono); font-size: 12px; opacity: 0.65; }

  /* ── INTRO OVERLAY ── */
  #intro-overlay {
    position: fixed; inset: 0; z-index: 500;
    background: var(--bg);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 32px;
    clip-path: inset(0 0 0 0);
    transition: background 0.35s ease;
  }

  /* Vorhang-Auflösung: dunkle Leiste zieht nach oben weg */
  #intro-overlay.curtain-up::after {
    content: '';
    position: fixed; inset: 0;
    background: var(--ink);
    animation: curtainUp 0.75s cubic-bezier(0.76, 0, 0.24, 1) forwards;
    z-index: 1;
  }
  #intro-overlay.curtain-up {
    animation: curtainFade 0.75s cubic-bezier(0.76, 0, 0.24, 1) forwards;
  }
  @keyframes curtainUp {
    0%   { clip-path: inset(0 0 0 0); }
    100% { clip-path: inset(0 0 100% 0); }
  }
  @keyframes curtainFade {
    0%   { opacity: 1; }
    60%  { opacity: 1; }
    100% { opacity: 0; }
  }

  /* Pulse rings — anchored to logo center via wrapper */
  .intro-logo-wrap {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 160px; height: 165px;
  }

  .intro-pulse {
    position: absolute;
    width: 220px; height: 220px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(217,79,0,0.22) 0%, transparent 68%);
    opacity: 0;
    pointer-events: none;
  }
  .intro-pulse-2 {
    position: absolute;
    width: 310px; height: 310px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.4);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(217,79,0,0.11) 0%, transparent 65%);
    opacity: 0;
    pointer-events: none;
  }

  /* Intro logo SVG */
  #intro-logo-svg {
    width: 160px; height: auto;
    position: relative; z-index: 1;
    flex-shrink: 0;
  }
  #intro-fill   { fill: var(--ink); opacity: 0; transition: fill 0.35s ease; }
  #intro-stroke {
    fill: none; stroke: var(--ink);
    stroke-width: 5.5;
    stroke-linecap: round; stroke-linejoin: round;
    transition: stroke 0.35s ease;
  }

  /* Intro wordmark */
  .intro-wordmark {
    font-family: var(--display); font-size: 40px;
    letter-spacing: 0.06em; color: var(--ink);
    opacity: 0; transform: translateY(10px);
    position: relative; z-index: 1;
    transition: color 0.35s ease;
  }
  .intro-sub {
    font-family: var(--mono); font-size: 10px;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--accent); opacity: 0;
    transform: translateY(6px);
    margin-top: -24px;
    position: relative; z-index: 1;
  }

  .fade-up {
    opacity: 0; transform: translateY(28px);
    transition: opacity 0.65s ease, transform 0.65s ease;
  }
  .fade-up.visible { opacity: 1; transform: translateY(0); }

  /* ── RESPONSIVE ── */
  @media (max-width: 960px) {
    nav { padding: 12px 20px; }
    .nav-links { display: none; }

    .hero { padding: 120px 20px 60px; grid-template-columns: 1fr; }
    .hero-headline .line-2 { padding-left: 20px; }
    .hero-bottom { flex-direction: column; gap: 32px; align-items: flex-start; }
    .hero-stats { gap: 28px; }

    .services { padding: 80px 20px; }
    .services-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
    .sc-featured, .sc-r1c2, .sc-r1c3, .sc-r2c2, .sc-r2c3 { grid-column: 1; grid-row: auto; }
    .sc-featured .svc-name { font-size: 44px; }

    .process { padding: 80px 20px; }
    .process-grid { grid-template-columns: 1fr; }

    .cta-section { padding: 100px 20px; grid-template-columns: 1fr; gap: 40px; }
    .cta-group { align-items: flex-start; }

    /* Modal: bei Überhöhe von oben zeigen + scrollbar, damit Close-Button erreichbar bleibt */
    .modal-backdrop { align-items: flex-start; padding: 16px; }
    .modal { padding: 36px 24px; }

    footer { padding: 28px 20px; flex-direction: column; gap: 20px; text-align: center; }
    .footer-links { flex-direction: column; align-items: center; gap: 14px; }
  }