/* ============================================================
       SCHRIFTEN — lokal, kein externer Request
    ============================================================ */
    @font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/inter-300.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
    @font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/inter-ext-300.woff2') format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
    @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
    @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-ext-400.woff2') format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
    @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
    @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-ext-500.woff2') format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
    @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
    @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-ext-600.woff2') format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
    @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
    @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-ext-700.woff2') format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
    @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/space-grotesk-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
    @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/space-grotesk-ext-500.woff2') format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
    @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/space-grotesk-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
    @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/space-grotesk-ext-600.woff2') format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
    @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/space-grotesk-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
    @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/space-grotesk-ext-700.woff2') format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}

    /* ============================================================
       DESIGN TOKENS
    ============================================================ */
    :root {
      --bg:            #FFFFFF;
      --bg-subtle:     #F7F8FB;
      --bg-tint:       #FAFBFD;
      --text:          #0F1729;
      --text-strong:   #05091A;
      --text-muted:    #5A6378;
      --text-subtle:   #8891A4;
      --accent:        #2D55D9;
      --accent-hover:  #2447BC;
      --accent-light:  rgba(45, 85, 217, 0.08);
      --accent-mid:    rgba(45, 85, 217, 0.15);
      --accent-soft:   #EEF2FE;
      --accent-dark:   #0B1226;
      --border:        #E8ECF3;
      --border-soft:   #F0F2F7;
      --border-strong: rgba(45, 85, 217, 0.20);
      --dark:          #0B1226;
      --dark-soft:     #131B33;
      --glass:         rgba(255, 255, 255, 0.82);
      --gradient-blue: linear-gradient(135deg, #4172F5 0%, #2D55D9 100%);
      --shadow-xs:     0 1px 4px rgba(15, 23, 41, 0.06);
      --shadow-sm:     0 2px 10px rgba(15, 23, 41, 0.07);
      --shadow:        0 6px 28px rgba(15, 23, 41, 0.10);
      --shadow-md:     0 4px 12px rgba(15,23,41,0.06), 0 2px 4px rgba(15,23,41,0.04);
      --shadow-lg:     0 24px 60px -12px rgba(15,23,41,0.18), 0 8px 24px -8px rgba(15,23,41,0.10);
      --shadow-xl:     0 40px 100px -20px rgba(15,23,41,0.22), 0 12px 40px -12px rgba(15,23,41,0.12);
      --r-sm:          8px;
      --r:             14px;
      --r-lg:          20px;
      --r-xl:          28px;
      --font-d:        'Space Grotesk', sans-serif;
      --font-b:        'Inter', sans-serif;
      --ease:          cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* ============================================================
       RESET & BASE
    ============================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: #fff; }
    body {
      font-family: var(--font-b);
      font-size: 16px;
      line-height: 1.65;
      color: var(--text);
      background: var(--bg);
      overflow-x: hidden;
    }
    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    button { cursor: pointer; border: none; background: none; font-family: inherit; }
    ul { list-style: none; }
    ::selection { background: var(--accent); color: #fff; }

    /* ============================================================
       TYPOGRAPHY
    ============================================================ */
    h1, h2, h3, h4 {
      font-family: var(--font-d);
      font-weight: 700;
      line-height: 1.13;
      color: var(--text);
    }
    h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -0.03em; }
    h2 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); letter-spacing: -0.025em; }
    h3 { font-size: clamp(1.15rem, 2vw, 1.5rem);  letter-spacing: -0.015em; }
    p  { color: var(--text-muted); line-height: 1.65; }

    /* ============================================================
       LAYOUT
    ============================================================ */
    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 28px;
    }
    section { padding: 100px 0; }
    .section-header { max-width: 620px; margin-bottom: 64px; }
    .section-header h2 { margin-bottom: 14px; }
    .section-header p  { font-size: 1.05rem; }
    .section-header.center { text-align: center; margin-left: auto; margin-right: auto; }

    /* ============================================================
       BUTTONS
    ============================================================ */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-d);
      font-size: 0.9375rem;
      font-weight: 600;
      border-radius: 100px;
      padding: 14px 28px;
      transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), background 0.18s, border-color 0.18s, color 0.18s;
      white-space: nowrap;
      line-height: 1;
    }
    .btn svg { width: 15px; height: 15px; flex-shrink: 0; }
    .btn:hover { transform: translateY(-2px); }
    .btn:active { transform: translateY(0); }

    .btn-primary {
      background: var(--accent);
      color: #fff;
      box-shadow: 0 4px 20px var(--accent-glow);
    }
    .btn-primary:hover { box-shadow: 0 8px 36px var(--accent-glow-2); background: var(--accent-hover); }

    .btn-ghost {
      background: transparent;
      color: var(--text);
      border: 1.5px solid var(--border);
    }
    .btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }

    .btn-outline {
      background: transparent;
      color: var(--accent);
      border: 1.5px solid var(--accent);
    }
    .btn-outline:hover { background: var(--accent); color: #fff; }

    /* ============================================================
       SCROLL ANIMATIONS
    ============================================================ */
    .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
    .js .reveal.visible { opacity: 1; transform: none; }
    .d1 { transition-delay: 0.08s; }
    .d2 { transition-delay: 0.18s; }
    .d3 { transition-delay: 0.28s; }
    .d4 { transition-delay: 0.38s; }
    .d5 { transition-delay: 0.48s; }

    /* ============================================================
       NAVIGATION
    ============================================================ */
    #nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 1000;
      border-bottom: 1px solid transparent;
      transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s, box-shadow 0.3s;
    }
    #nav.scrolled {
      background: var(--glass);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-bottom-color: var(--border);
      box-shadow: var(--shadow-sm);
    }
    .nav-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
      padding: 20px 28px;
      max-width: 1200px;
      margin: 0 auto;
    }
    .nav-logo {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }
    .nav-logo img { height: 30px; width: auto; display: block; }
    .nav-logo-text {
      font-family: var(--font-d);
      font-size: 1.175rem;
      font-weight: 800;
      letter-spacing: -0.03em;
      color: var(--text);
    }
    .nav-logo-text em { color: var(--accent); font-style: normal; }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 34px;
    }
    .nav-links a {
      font-family: var(--font-d);
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--text-muted);
      position: relative;
      transition: color 0.2s;
    }
    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -2px; left: 0; right: 0;
      height: 1.5px;
      background: var(--accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.25s var(--ease);
    }
    .nav-links a:hover { color: var(--text); }
    .nav-links a:hover::after { transform: scaleX(1); }

    /* Hamburger */
    .hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 36px; height: 36px;
      padding: 6px;
      cursor: pointer;
    }
    .hamburger span {
      display: block;
      width: 22px; height: 2px;
      background: var(--text);
      border-radius: 2px;
      transition: transform 0.3s var(--ease), opacity 0.3s;
    }
    .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Mobile nav overlay */
    #mobile-nav {
      display: none;
      position: fixed;
      inset: 0;
      background: #fff;
      z-index: 999;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 36px;
      opacity: 0;
      transition: opacity 0.3s;
    }
    #mobile-nav.open { display: flex; opacity: 1; }
    #mobile-nav a {
      font-family: var(--font-d);
      font-size: 1.8rem;
      font-weight: 700;
      color: var(--text);
      transition: color 0.2s;
    }
    #mobile-nav a:hover { color: var(--accent); }
    #mobile-nav .btn { font-size: 1rem; margin-top: 8px; }

    /* ============================================================
       HERO
    ============================================================ */
    #hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding-top: 100px;
      padding-bottom: 80px;
      position: relative;
      overflow: hidden;
    }
    .hero-bg {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 75% 65% at 10% 60%, var(--tint-1) 0%, transparent 55%),
        radial-gradient(ellipse 55% 50% at 88% 12%, var(--tint-2) 0%, transparent 50%),
        radial-gradient(ellipse 45% 45% at 65% 92%, var(--tint-3) 0%, transparent 50%),
        #fff;
      pointer-events: none;
    }
    .hero-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(var(--tint-dots) 1px, transparent 1px);
      background-size: 30px 30px;
      mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 10%, transparent 75%);
      -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 10%, transparent 75%);
    }

    .hero-inner {
      position: relative;
      display: grid;
      grid-template-columns: 54fr 46fr;
      gap: 56px;
      align-items: center;
    }

    /* Hero text – load animations */
    .h-title  { margin: 18px 0 22px; opacity: 0; animation: fadeUp 0.65s var(--ease) 0.22s forwards; }
    .h-title .ac { color: var(--accent); }
    .h-sub    { font-size: 1.06rem; max-width: 490px; opacity: 0; animation: fadeUp 0.65s var(--ease) 0.36s forwards; }
    .h-ctas   { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; opacity: 0; animation: fadeUp 0.65s var(--ease) 0.50s forwards; }

    /* Old-site hero eyebrow + badges */

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: none; }
    }

    /* ---- Hero visual: white 3D browser + phone ---- */
    .hero-visual {
      position: relative;
      perspective: 1800px;
      min-height: 460px;
      opacity: 0;
      animation: fadeIn 1s var(--ease) 0.38s forwards;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: scale(0.96) translateY(14px); }
      to   { opacity: 1; transform: none; }
    }

    /* White 3D browser mockup */
    .browser-mockup {
      background: #fff;
      border-radius: 14px;
      box-shadow: var(--shadow-xl);
      overflow: hidden;
      border: 1px solid var(--border);
      transform: rotateY(-8deg) rotateX(4deg);
      transform-origin: center center;
      transition: transform .6s cubic-bezier(.2,.8,.2,1);
    }
    .browser-mockup:hover { transform: rotateY(-4deg) rotateX(2deg); }

    .browser-bar {
      display: flex; align-items: center; gap: 8px;
      padding: 12px 16px; background: var(--bg-tint);
      border-bottom: 1px solid var(--border-soft);
    }
    .browser-dots { display: flex; gap: 6px; }
    .browser-dots span { width: 11px; height: 11px; border-radius: 50%; }
    .browser-dots span:nth-child(1) { background: #FF5F57; }
    .browser-dots span:nth-child(2) { background: #FEBC2E; }
    .browser-dots span:nth-child(3) { background: #28C840; }
    .browser-url {
      flex: 1; background: #fff;
      border: 1px solid var(--border); border-radius: 7px;
      padding: 5px 12px; font-size: 0.78rem;
      color: var(--text-subtle); margin-left: 8px;
      display: flex; align-items: center; gap: 6px;
    }
    .browser-url svg { width: 11px; height: 11px; flex-shrink: 0; }

    .mock-site { padding: 22px 24px 28px; }
    .mock-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
    .mock-logo {
      font-family: var(--font-d); font-weight: 600;
      font-size: 0.88rem; color: var(--text-strong);
      display: flex; align-items: center; gap: 6px;
    }
    .mock-logo::before { content: ''; width: 16px; height: 16px; background: var(--gradient-blue); border-radius: 4px; }
    .mock-nav-items { display: flex; gap: 14px; }
    .mock-nav-items span { height: 5px; border-radius: 3px; background: var(--border); }
    .mock-nav-items span:nth-child(1) { width: 32px; }
    .mock-nav-items span:nth-child(2) { width: 40px; }
    .mock-nav-items span:nth-child(3) { width: 28px; }
    .mock-cta { height: 20px; width: 64px; background: var(--text-strong); border-radius: 5px; }

    .mock-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; align-items: center; }
    .mock-h1 { height: 13px; border-radius: 4px; background: var(--text-strong); margin-bottom: 7px; width: 92%; }
    .mock-h1.short { width: 64%; opacity: 0.55; }
    .mock-line { height: 5px; border-radius: 3px; background: var(--border); margin-bottom: 5px; }
    .mock-line.w-90 { width: 90%; }
    .mock-line.w-70 { width: 70%; }
    .mock-line.w-55 { width: 55%; }
    .mock-buttons { display: flex; gap: 7px; margin-top: 12px; }
    .mock-btn { height: 20px; border-radius: 5px; background: var(--accent); width: 64px; }
    .mock-btn.outline { background: transparent; border: 1px solid var(--border); width: 52px; }
    .mock-img {
      aspect-ratio: 1.1/1;
      background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent-a18) 100%),
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4), transparent 50%),
        var(--accent-flaeche);
      border-radius: 10px; position: relative; overflow: hidden;
    }
    .mock-img::before {
      content: ''; position: absolute; width: 52px; height: 52px;
      background: var(--gradient-blue); border-radius: 50%;
      top: 50%; left: 50%; transform: translate(-50%,-50%);
      box-shadow: 0 10px 26px var(--accent-a38);
    }
    .mock-img::after {
      content: ''; position: absolute; width: 18px; height: 18px;
      background: #fff; border-radius: 50%;
      top: 50%; left: 50%; transform: translate(-50%,-50%);
    }
    .mock-stats {
      display: grid; grid-template-columns: repeat(3,1fr);
      gap: 8px; margin-top: 18px; padding-top: 14px;
      border-top: 1px solid var(--border-soft);
    }
    .mock-stat { background: var(--bg-subtle); border-radius: 7px; padding: 8px 10px; }
    .mock-stat-num { height: 9px; width: 50%; background: var(--text-strong); border-radius: 3px; margin-bottom: 4px; }
    .mock-stat-label { height: 4px; width: 80%; background: var(--border); border-radius: 2px; }

    /* White phone mockup (next to browser) */
    .hero-phone {
      position: absolute;
      bottom: -12px;
      right: -24px;
      width: 104px;
      background: #fff;
      border-radius: 22px;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-xl);
      padding: 5px;
      z-index: 3;
    }
    .hero-phone-screen {
      background: var(--bg-subtle);
      border-radius: 18px;
      overflow: hidden;
      aspect-ratio: 9/18;
      padding: 9px 8px;
      display: flex; flex-direction: column; gap: 5px;
    }
    .hp-bar { height: 5px; border-radius: 3px; }
    .hp-bar.dark { background: var(--text-strong); width: 72%; }
    .hp-bar.mid  { background: var(--border); width: 55%; }
    .hp-img { flex: 1; background: var(--accent-flaeche); border-radius: 6px; margin: 3px 0; }
    .hp-txt { height: 4px; background: var(--border); border-radius: 2px; width: 90%; }
    .hp-txt.w65 { width: 65%; }
    .hp-cta { height: 15px; background: var(--accent); border-radius: 8px; opacity: 0.9; margin-top: 3px; }

    /* Floating info cards */
    @keyframes floatCard {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(-8px); }
    }

    /* ============================================================
       TRUST STRIP
    ============================================================ */

    /* ============================================================
       PROBLEM / SOLUTION
    ============================================================ */
    #problem {
      background: var(--bg-subtle);
      position: relative;
      overflow: hidden;
    }
    #problem::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1.5px;
      background: linear-gradient(90deg, transparent 0%, var(--accent) 40%, var(--accent-dark) 60%, transparent 100%);
      opacity: 0.35;
    }

    /* ============================================================
       PORTFOLIO — old-site project-card-clickable approach
    ============================================================ */
    .cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }

    /* Base card */
    .project-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      overflow: hidden;
      transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .25s;
    }
    .project-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: #d8dee9; }

    /* Clickable card variant */
    .project-card-clickable { cursor: pointer; position: relative; }
    .project-card-clickable::before {
      content: 'Konzeptbeispiel';
      position: absolute; top: 14px; left: 14px; z-index: 4;
      font-size: 0.68rem; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.12em;
      color: #FAFAF6;
      background: rgba(20,17,13,0.85);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(250,250,246,0.18);
      padding: 6px 12px; border-radius: 100px;
      pointer-events: none;
    }

    /* Static preview area */
    .project-preview-static {
      position: relative; height: 220px; overflow: hidden;
      background: #14110D;
      border-bottom: 1px solid var(--border-soft);
    }
    .preview-chrome {
      position: absolute; top: 0; left: 0; right: 0; height: 26px;
      background: rgba(255,255,255,0.94);
      backdrop-filter: blur(8px);
      display: flex; align-items: center; padding: 0 12px; gap: 10px; z-index: 2;
      border-bottom: 1px solid rgba(0,0,0,0.06);
    }
    .chrome-dots { display: inline-flex; gap: 5px; }
    .chrome-dots i { width: 8px; height: 8px; border-radius: 50%; display: block; }
    .chrome-dots i:nth-child(1) { background: #FF5F57; }
    .chrome-dots i:nth-child(2) { background: #FEBC2E; }
    .chrome-dots i:nth-child(3) { background: #28C840; }
    .chrome-url { font-size: 10px; font-weight: 500; color: #5A6378; letter-spacing: 0.02em; opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* Shimmer viewport */
    .preview-viewport {
      position: absolute; top: 26px; left: 0; right: 0; bottom: 0;
      overflow: hidden; background: #fff; isolation: isolate;
    }
        .preview-site-img {
      position: relative; z-index: 1; width: 100%; height: 100%;
      object-fit: cover; object-position: top center; display: block;
      transform: scale(1.018); transform-origin: center top;
      opacity: 0; filter: blur(8px);
      transition: opacity .42s cubic-bezier(.22,1,.36,1), filter .42s cubic-bezier(.22,1,.36,1), transform .72s cubic-bezier(.22,1,.36,1);
      background: #fff; will-change: opacity, filter, transform;
    }
    .preview-site-img.is-loaded { opacity: 1; filter: blur(0); transform: scale(1); }
    .project-card-clickable:hover .preview-site-img.is-loaded { transform: scale(1.025); }
    .project-preview-static::after {
      content: ''; position: absolute; top: 26px; left: 0; right: 0; bottom: 0;
      background: linear-gradient(180deg, rgba(20,17,13,0) 55%, rgba(20,17,13,0.55) 100%);
      pointer-events: none; transition: opacity .35s ease; z-index: 1;
    }
    .project-card-clickable:hover .project-preview-static::after { opacity: 0.4; }

    /* Showcase trigger pill */

    /* Per-card dark background colours */
    .project-1 .project-preview-static { background: linear-gradient(135deg, #2D3142 0%, #1F2330 100%); }
    .project-2 .project-preview-static { background: linear-gradient(135deg, #2A1F18 0%, #1A130E 100%); }
    .project-3 .project-preview-static { background: linear-gradient(135deg, #0F1729 0%, #0B1226 100%); }

    /* Card info area – flex column so all cards close at same height */
    .project-card { display: flex; flex-direction: column; }
    .project-info { padding: 22px 26px 26px; display: flex; flex-direction: column; flex: 1; }
    .project-tag { font-size: 0.78rem; font-weight: 500; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; }
    .project-title { font-family: var(--font-d); font-size: 1.1rem; font-weight: 600; margin-bottom: 7px; color: var(--text-strong); }
    .project-desc { font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; flex: 1; }
    .projects-note { text-align: center; margin-top: 36px; font-size: 0.88rem; color: var(--text-subtle); }

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

    .services-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .svc-card {
      background: var(--glass);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 32px 28px;
      transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.25s;
    }
    .svc-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow);
      border-color: var(--border-strong);
    }
    .svc-icon {
      width: 46px; height: 46px;
      border-radius: 11px;
      background: var(--accent-light);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
      margin-bottom: 20px;
    }
    .svc-icon svg { width: 22px; height: 22px; stroke-width: 1.75; }
    .svc-title { font-family: var(--font-d); font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
    .svc-desc  { font-size: 0.875rem; }
    .svc-cta {
      display: inline-flex; align-items: center; gap: 5px;
      margin-top: 16px; padding: 0; background: none; border: none;
      font-size: 0.82rem; font-weight: 600; color: var(--accent);
      cursor: pointer; font-family: var(--font-b);
      opacity: 0; transform: translateY(6px);
      transition: opacity .22s ease, transform .22s ease;
    }
    .svc-cta svg { width: 13px; height: 13px; transition: transform .2s; }
    .svc-card:hover .svc-cta { opacity: 1; transform: translateY(0); }
    .svc-card:hover .svc-cta:hover svg { transform: translateX(3px); }

    /* ============================================================
       WARUM EA
    ============================================================ */
    .why-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
    .why-card {
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 32px 26px;
      background: var(--bg);
      transition: transform 0.3s var(--ease), box-shadow 0.3s;
    }
    .why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
    .why-num {
      font-family: var(--font-d);
      font-size: 2.4rem;
      font-weight: 800;
      line-height: 1;
      margin-bottom: 16px;
      background: linear-gradient(135deg, var(--accent), var(--accent-dark));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .why-title { font-family: var(--font-d); font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
    .why-desc  { font-size: 0.875rem; }

    /* ============================================================
       ABLAUF
    ============================================================ */
    #ablauf { background: var(--bg-subtle); }

    .process-wrap { position: relative; }

    .process-steps {
      display: flex;
      align-items: flex-start;
    }
    .p-step { text-align: center; padding: 0 8px; flex: 1 0 0; min-width: 0; }
    .p-sep {
      flex: 0 0 36px;
      height: 2px;
      background: var(--border);
      margin-top: 26px;
      transition: background 0.4s ease;
    }
    .p-sep.lit { background: var(--accent); }
    .p-bubble {
      width: 54px; height: 54px;
      border-radius: 50%;
      background: var(--bg);
      border: 2px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      font-family: var(--font-d);
      font-size: 1.2rem;
      font-weight: 800;
      color: var(--text-muted);
      transition: border-color 0.35s, color 0.35s, background 0.35s, box-shadow 0.35s;
    }
    .p-step.lit .p-bubble {
      border-color: var(--accent);
      color: var(--accent);
      background: var(--accent-light);
      box-shadow: 0 0 0 7px var(--accent-light);
    }
    .p-title { font-family: var(--font-d); font-size: 0.9375rem; font-weight: 700; margin-bottom: 6px; }
    .p-desc  { font-size: 0.8rem; color: var(--text-muted); }

    /* ============================================================
       ÜBER MICH — old-site ueber-* approach
    ============================================================ */
    #ueber-mich { background: var(--bg-tint); position: relative; overflow: hidden; }
    .ueber-grid {
      display: grid; grid-template-columns: 0.85fr 1fr;
      gap: 70px; align-items: center; position: relative; z-index: 1;
    }
    .ueber-photo-wrap { position: relative; aspect-ratio: 4/5; max-width: 420px; }
    .ueber-photo-frame {
      position: relative; width: 100%; height: 100%;
      border-radius: 24px; overflow: hidden;
      background: var(--accent-flaeche);
      box-shadow: var(--shadow-xl); border: 1px solid var(--border);
    }
    .ueber-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
    .ueber-photo-fallback {
      width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
      color: var(--text-subtle); font-size: 0.92rem; font-weight: 500; text-align: center; padding: 20px;
      background: var(--accent-flaeche);
    }
    .ueber-text { max-width: 520px; }
    .ueber-text h2 { margin-bottom: 20px; }
    .ueber-text p { font-size: 1rem; line-height: 1.65; margin-bottom: 16px; color: var(--text-muted); }

    /* ============================================================
       FAQ
    ============================================================ */
    #faq { background: var(--bg-subtle); }

    .faq-list {
      max-width: 740px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .faq-item {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--r);
      overflow: hidden;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .faq-item[open] { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
    .faq-item summary {
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 24px;
      cursor: pointer;
      user-select: none;
      gap: 16px;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-q {
      font-family: var(--font-d);
      font-size: 0.9375rem;
      font-weight: 600;
      color: var(--text);
    }
    .faq-ico {
      width: 28px; height: 28px;
      border-radius: 50%;
      background: var(--accent-light);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      color: var(--accent);
      font-size: 1.3rem;
      font-weight: 300;
      line-height: 1;
      transition: transform 0.3s var(--ease), background 0.2s, color 0.2s;
    }
    .faq-item[open] .faq-ico { transform: rotate(45deg); background: var(--accent); color: #fff; }
    .faq-ans { padding: 0 24px 20px; font-size: 0.9375rem; color: var(--text-muted); line-height: 1.74; }

    /* ============================================================
       KONTAKT
    ============================================================ */
    #kontakt {
      background: linear-gradient(150deg, var(--bg-subtle) 0%, var(--accent-a025) 100%);
      position: relative;
      overflow: hidden;
    }
    #kontakt::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--accent), var(--accent-dark), var(--accent));
      opacity: 0.45;
    }

    .contact-wrap {
      display: grid;
      grid-template-columns: 1fr 480px;
      gap: 88px;
      align-items: start;
    }
    .contact-left h2 { margin-bottom: 14px; }
    .contact-left p  { font-size: 1.05rem; margin-bottom: 36px; }

    .contact-links { display: flex; flex-direction: column; gap: 14px; }
    .contact-link {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 0.9375rem;
      transition: color 0.2s;
    }
    .contact-link:hover { color: var(--accent); }
    .c-icon {
      width: 36px; height: 36px;
      background: var(--accent-light);
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      color: var(--accent);
      flex-shrink: 0;
    }
    .c-icon svg { width: 16px; height: 16px; stroke-width: 2; }

    /* Form */
    .c-form {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      padding: 40px 36px;
      box-shadow: var(--shadow);
    }
    .f-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 18px;
    }
    .f-group label {
      font-family: var(--font-d);
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--text);
    }
    .f-group input,
    .f-group textarea {
      font-family: var(--font-b);
      font-size: 0.9375rem;
      color: var(--text);
      background: var(--bg-subtle);
      border: 1.5px solid var(--border);
      border-radius: var(--r-sm);
      padding: 12px 16px;
      width: 100%;
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
      resize: none;
    }
    .f-group input::placeholder,
    .f-group textarea::placeholder { color: rgba(90,99,120,0.5); }
    .f-group input:focus,
    .f-group textarea:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-a10);
    }
    .f-group textarea { min-height: 110px; }

    /* DSGVO checkbox */
    .f-check {
      flex-direction: row;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 22px;
    }
    .f-check input[type="checkbox"] {
      width: 18px; height: 18px;
      min-width: 18px;
      border: 1.5px solid var(--border);
      border-radius: 4px;
      background: var(--bg-subtle);
      cursor: pointer;
      accent-color: var(--accent);
      margin-top: 2px;
      padding: 0;
    }
    .f-check label {
      font-family: var(--font-b);
      font-size: 0.8125rem;
      font-weight: 400;
      color: var(--text-muted);
      line-height: 1.55;
      cursor: pointer;
    }
    .f-check label a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
    .f-check label a:hover { color: var(--accent-hover); }

    .f-error {
      font-size: 0.8rem;
      color: #D94F4F;
      margin-top: -10px;
      margin-bottom: 14px;
      display: none;
    }
    .f-error.show { display: block; }

    .f-submit { width: 100%; justify-content: center; border-radius: var(--r-sm); }

    .f-success {
      display: none;
      text-align: center;
      padding: 32px 16px;
    }
    .f-success-ico {
      width: 56px; height: 56px;
      border-radius: 50%;
      background: var(--accent-light);
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 16px;
      color: var(--accent);
    }
    .f-success-ico svg { width: 26px; height: 26px; stroke-width: 2.5; }
    .f-success h3 { font-family: var(--font-d); color: var(--accent); margin-bottom: 8px; font-size: 1.25rem; }
    .f-success p  { font-size: 0.9375rem; }

    /* ============================================================
       FOOTER
    ============================================================ */
    footer {
      background: #0B1226;
      padding: 52px 0 32px;
    }
    .footer-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 24px;
      margin-bottom: 36px;
      padding-bottom: 32px;
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .footer-logo {
      display: flex;
      align-items: center;
    }
    .footer-logo img { height: 28px; width: auto; display: block; }
    .footer-logo-text {
      font-family: var(--font-d);
      font-size: 1.15rem;
      font-weight: 800;
      letter-spacing: -0.03em;
      color: rgba(255,255,255,0.9);
    }
    .footer-logo-text em { color: var(--accent); font-style: normal; }
    .footer-links { display: flex; flex-wrap: wrap; gap: 22px; }
    .footer-links a { font-size: 0.875rem; color: rgba(255,255,255,0.38); transition: color 0.2s; }
    .footer-links a:hover { color: rgba(255,255,255,0.78); }
    .footer-bottom {
      text-align: center;
      font-size: 0.8125rem;
      color: rgba(255,255,255,0.22);
    }
    .footer-bottom a { color: rgba(255,255,255,0.4); transition: color 0.2s; text-decoration: underline; text-underline-offset: 2px; }
    .footer-bottom a:hover { color: rgba(255,255,255,0.75); }
    .footer-legal {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-top: 12px;
    }
    .footer-legal a { font-size: 0.8125rem; color: rgba(255,255,255,0.32); transition: color 0.2s; }
    .footer-legal a:hover { color: rgba(255,255,255,0.65); }

    /* On touch devices: always show showcase trigger */
    @media (hover: none) {
    }

    /* ============================================================
       CASE STUDY IFRAME OVERLAY
    ============================================================ */
    .cs-overlay {
      position: fixed; inset: 0;
      background: rgba(8, 12, 22, 0.75);
      backdrop-filter: blur(14px) saturate(140%);
      -webkit-backdrop-filter: blur(14px) saturate(140%);
      z-index: 9000;
      opacity: 0; pointer-events: none;
      transition: opacity .35s ease;
      display: flex; align-items: center; justify-content: center;
      padding: 20px;
    }
    .cs-overlay.open { opacity: 1; pointer-events: auto; }
    body.cs-locked { overflow: hidden; }

    .cs {
      position: relative;
      width: 100%;
      max-width: 1260px;
      height: calc(100vh - 40px);
      max-height: 880px;
      background: var(--bg-subtle);
      border-radius: 20px;
      overflow: hidden;
      display: flex; flex-direction: column;
      transform: translateY(28px) scale(0.97);
      opacity: 0;
      transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
      box-shadow: 0 60px 120px -30px rgba(8,12,22,0.55), 0 24px 48px -12px rgba(8,12,22,0.28);
    }
    .cs-overlay.open .cs { transform: translateY(0) scale(1); opacity: 1; }

    .cs-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 18px 24px;
      background: #FFFFFF;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
      gap: 16px;
    }
    .cs-header-meta { display: flex; align-items: center; gap: 14px; min-width: 0; }
    .cs-badge {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 0.7rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.1em;
      color: #B45309;
      background: #FEF3C7;
      padding: 5px 12px;
      border-radius: 100px;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .cs-badge::before {
      content: ''; width: 6px; height: 6px; border-radius: 50%;
      background: #D97706;
      box-shadow: 0 0 0 3px rgba(217,119,6,0.18);
    }
    .cs-title {
      font-size: 0.95rem; font-weight: 600;
      color: var(--text);
      font-family: var(--font-d);
      letter-spacing: -0.01em;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .cs-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

    .cs-device-toggle {
      display: inline-flex;
      background: var(--bg-subtle);
      border: 1px solid var(--border);
      border-radius: 100px;
      padding: 3px;
      gap: 2px;
    }
    .cs-device-toggle button {
      display: inline-flex; align-items: center; gap: 6px;
      background: transparent; color: var(--text-muted);
      font-family: var(--font-b);
      font-size: 0.8rem; font-weight: 500;
      padding: 6px 14px; border: none;
      border-radius: 100px; cursor: pointer;
      transition: all .2s ease;
    }
    .cs-device-toggle button svg { width: 14px; height: 14px; }
    .cs-device-toggle button.active {
      background: var(--text); color: #fff;
      box-shadow: 0 2px 6px -2px rgba(15,23,42,0.4);
    }
    .cs-close {
      width: 36px; height: 36px;
      border: 1px solid var(--border); border-radius: 50%;
      background: #fff; cursor: pointer;
      display: grid; place-items: center;
      color: var(--text-muted);
      transition: all .2s ease;
    }
    .cs-close:hover { background: var(--text); color: #fff; border-color: var(--text); transform: rotate(90deg); }
    .cs-close svg { width: 16px; height: 16px; stroke-width: 2; stroke-linecap: round; }

    .cs-body {
      display: grid;
      grid-template-columns: 300px 1fr;
      flex: 1; min-height: 0; overflow: hidden;
    }
    .cs-info {
      padding: 30px 26px;
      background: #fff;
      border-right: 1px solid var(--border);
      overflow-y: auto;
      display: flex; flex-direction: column;
      gap: 0;
    }
    .cs-info h3 {
      font-family: var(--font-d);
      font-size: 1.15rem; font-weight: 700;
      color: var(--text);
      line-height: 1.28; margin-bottom: 10px;
    }
    .cs-info-lead {
      font-size: 0.88rem; color: var(--text-muted);
      line-height: 1.65; margin-bottom: 24px;
    }
    .cs-section-label {
      font-size: 0.68rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.12em;
      color: var(--text-muted);
      margin-bottom: 12px; margin-top: 6px;
    }
    .cs-highlights { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
    .cs-highlight { display: flex; gap: 11px; align-items: flex-start; }
    .cs-highlight-icon {
      width: 30px; height: 30px; flex-shrink: 0;
      border-radius: 8px;
      background: #FEF3C7;
      color: #B45309;
      display: grid; place-items: center;
    }
    .cs-stage::before {
      content: ''; position: absolute; inset: 0;
      background-image:
        radial-gradient(circle at 20% 30%, rgba(217,119,6,0.06) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, var(--tint-2) 0%, transparent 40%);
      pointer-events: none;
    }
    .cs-highlight-icon svg { width: 14px; height: 14px; stroke-width: 2; }
    .cs-highlight-text { flex: 1; min-width: 0; }
    .cs-highlight-text strong {
      display: block; font-size: 0.85rem; font-weight: 600;
      color: var(--text); margin-bottom: 2px;
    }
    .cs-highlight-text span { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }
    .cs-tech { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 24px; }
    .cs-tech span {
      font-size: 0.7rem;
      background: var(--bg-subtle); color: var(--text-muted);
      padding: 3px 9px; border-radius: 100px;
      border: 1px solid var(--border);
    }
    .cs-cta {
      margin-top: auto;
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 13px 20px;
      background: var(--text); color: #fff;
      font-family: var(--font-d);
      font-size: 0.875rem; font-weight: 600;
      border-radius: 100px; text-decoration: none;
      transition: all .25s ease;
    }
    .cs-cta:hover { background: var(--accent); transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(49,85,231,0.42); }
    .cs-cta svg { width: 14px; height: 14px; transition: transform .25s; }
    .cs-cta:hover svg { transform: translateX(3px); }

    .cs-stage {
      background: linear-gradient(135deg, #ECEEF3 0%, #DDE2EC 100%);
      padding: 32px;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden; position: relative;
    }
    .cs-stage::before {
      content: ''; position: absolute; inset: 0;
      background-image:
        radial-gradient(circle at 20% 30%, rgba(49,85,231,0.07) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(49,85,231,0.05) 0%, transparent 40%);
      pointer-events: none;
    }

    .cs-frame { display: none; position: relative; max-width: 100%; max-height: 100%; }
    .cs-frame.active { display: flex; flex-direction: column; }
    .cs-frame-desktop {
      width: 100%; height: 100%;
      border-radius: 12px; overflow: hidden;
      background: #1A1F2E;
      box-shadow: 0 30px 70px -15px rgba(15,23,42,0.45), 0 12px 30px -10px rgba(15,23,42,0.25);
    }
    .cs-browser-bar {
      height: 36px;
      background: linear-gradient(180deg, #2B3142 0%, #232938 100%);
      display: flex; align-items: center;
      padding: 0 14px; gap: 6px; flex-shrink: 0;
    }
    .cs-browser-bar i { width: 10px; height: 10px; border-radius: 50%; }
    .cs-browser-bar i:nth-child(1) { background: #FF5F57; }
    .cs-browser-bar i:nth-child(2) { background: #FEBC2E; }
    .cs-browser-bar i:nth-child(3) { background: #28C840; }
    .cs-browser-url {
      margin-left: 14px; flex: 1;
      background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.65);
      font-size: 0.75rem; padding: 4px 12px; border-radius: 100px;
      max-width: 320px; text-align: center;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .cs-frame-desktop iframe { flex: 1; width: 100%; border: none; background: #fff; min-height: 0; }

    .cs-frame-mobile { align-items: center; justify-content: center; height: 100%; }
    .cs-phone {
      width: 300px; height: 620px;
      max-height: calc(100vh - 220px);
      background: #14110D; border-radius: 34px; padding: 9px;
      box-shadow: 0 30px 70px -15px rgba(15,23,42,0.45), inset 0 0 0 1px rgba(255,255,255,0.08);
      position: relative;
    }
    .cs-phone::before {
      content: ''; position: absolute;
      top: 16px; left: 50%; transform: translateX(-50%);
      width: 80px; height: 20px;
      background: #14110D; border-radius: 100px; z-index: 2;
    }
    .cs-phone iframe { width: 100%; height: 100%; border: none; border-radius: 26px; background: #fff; }

    @media (max-width: 860px) {
      .cs-overlay { padding: 0; align-items: flex-end; }
      .cs { border-radius: 22px 22px 0 0; height: 96vh; max-height: none; }
      .cs-body { grid-template-columns: 1fr; }
      .cs-info { display: none; }
      .cs-stage { padding: 20px; }
      .cs-device-toggle { display: none; }
    }

    /* ============================================================
       MOBILE STICKY CTA
    ============================================================ */

    /* ============================================================
       RESPONSIVE
    ============================================================ */
    @media (max-width: 1060px) {
      .why-grid { grid-template-columns: 1fr 1fr; }
    }

    @media (max-width: 860px) {
      section { padding: 72px 0; }
      .hero-inner { grid-template-columns: 1fr; }
      .hero-visual { min-height: 340px; order: -1; overflow: visible; }
      .browser-mockup { transform: none; }
      .hero-phone { right: -10px; bottom: -6px; width: 88px; border-radius: 18px; }
      .cards-grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }
      .services-grid { grid-template-columns: 1fr 1fr; }
      .why-grid { grid-template-columns: 1fr; gap: 14px; }
      .ueber-grid { grid-template-columns: 1fr; gap: 60px; }
      .ueber-photo-wrap { max-width: 380px; margin: 0 auto; }
      .ueber-text { max-width: 100%; }
      .contact-wrap { grid-template-columns: 1fr; gap: 48px; }
      .nav-links { display: none; }
      .nav-wrap .btn { display: none; }
      .hamburger { display: flex; }
    }

    @media (max-width: 600px) {
      .container { padding: 0 18px; }
      .services-grid { grid-template-columns: 1fr; }
      .c-form { padding: 28px 20px; }
      .hero-visual { min-height: 240px; }
      .process-steps { flex-direction: column; gap: 0; }
      .p-sep { display: none; }
      .p-step {
        flex: none; width: 100%;
        text-align: left;
        display: flex;
        align-items: flex-start;
        gap: 16px;
        padding: 16px 0;
        border-bottom: 1px solid var(--border);
      }
      .p-step:last-child { border-bottom: none; }
      .p-bubble { margin: 0; flex-shrink: 0; }
      .p-step-body { padding-top: 10px; }
      .contact-wrap { grid-template-columns: 1fr; }
    }

    @media (max-width: 400px) {
      h1 { font-size: 2rem; }
      h2 { font-size: 1.7rem; }
      .cards-grid { max-width: 100%; }
    }
  
    /* ============================================================
       ERGÄNZUNGEN — gleiche Sprache, neue Bausteine
    ============================================================ */

    /* Einstieg: kein Vollbild mehr, der nächste Abschnitt blitzt durch */
    #hero { min-height: auto; padding-top: 148px; padding-bottom: 96px; }
    .hero-inner { grid-template-columns: 48fr 52fr; gap: 56px; align-items: center; }
    .hero-visual { min-height: 0; perspective: none; }
    .h-title { margin: 0 0 22px; }

    /* Echter Entwurf statt Platzhaltergrafik */
    .shot {
      position: relative;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      overflow: hidden;
      box-shadow: var(--shadow-xl);
    }
    .shot .preview-chrome { position: relative; height: 30px; backdrop-filter: none; }
    .shot img { width: 100%; display: block; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
    .shot-caption { margin-top: 14px; font-size: 0.82rem; color: var(--text-subtle); }
    .shot-badge {
      position: absolute; top: 44px; left: 14px; z-index: 3;
      font-size: 0.66rem; font-weight: 600; font-family: var(--font-d);
      text-transform: uppercase; letter-spacing: 0.12em;
      color: #fff; background: rgba(11,18,38,0.82);
      border: 1px solid rgba(255,255,255,0.2);
      padding: 5px 11px; border-radius: 100px;
    }

    /* Kopf einer Unterseite */
    .page-head { padding: 150px 0 0; }
    .page-head .container > h1 { max-width: 16ch; }
    .page-head p { font-size: 1.08rem; max-width: 60ch; margin-top: 18px; }
    .page-head .note { font-size: 0.88rem; color: var(--text-subtle); margin-top: 18px; max-width: 62ch; }

    /* Arbeiten: große Zeilen statt kleiner Kacheln */
    .work-row { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
    .work-row + .work-row { margin-top: 76px; }
    .work-body .project-tag { margin-bottom: 10px; }
    .work-body h3 { margin-bottom: 12px; }
    .work-body > p { font-size: 0.96rem; }
    .work-notes { margin-top: 20px; display: grid; gap: 12px; }
    .work-notes li {
      position: relative; padding-left: 26px;
      font-size: 0.88rem; color: var(--text-muted); line-height: 1.55;
    }
    .work-notes li::before {
      content: ''; position: absolute; left: 0; top: 0.55em;
      width: 14px; height: 2px; border-radius: 2px; background: var(--accent); opacity: .55;
    }
    .work-meta {
      margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border);
      display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
      font-size: 0.82rem; color: var(--text-subtle);
    }
    .work-side { display: flex; gap: 20px; align-items: flex-start; margin-top: 26px; }
    .work-phone { width: 132px; flex: 0 0 132px; }
    .work-phone img {
      width: 100%; border-radius: 14px; border: 1px solid var(--border);
      box-shadow: var(--shadow-md); display: block;
    }
    .work-phone figcaption { margin-top: 8px; font-size: 0.76rem; color: var(--text-subtle); text-align: center; }
    @media (min-width: 900px) {
      .work-row { grid-template-columns: 57fr 43fr; gap: 52px; align-items: start; }
      .work-row.rev .work-shot { order: 2; }
      .work-row.rev .work-body { order: 1; }
    }

    /* Zwei Angebote nebeneinander, Karten wie gehabt */
    .cards-grid.two { grid-template-columns: repeat(2, 1fr); }
    .services-grid.two { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .svc-card.lg { padding: 38px 34px; }
    .svc-card.lg .svc-title { font-size: 1.25rem; margin-bottom: 12px; }
    .svc-card.lg .svc-desc { font-size: 0.95rem; }
    .svc-list { margin-top: 22px; display: grid; gap: 10px; }
    .svc-list li {
      position: relative; padding-left: 26px;
      font-size: 0.875rem; color: var(--text-muted); line-height: 1.5;
    }
    .svc-list li::before {
      content: ''; position: absolute; left: 0; top: 0.5em;
      width: 14px; height: 2px; border-radius: 2px; background: var(--accent); opacity: .55;
    }
    .note-line {
      margin-top: 28px; padding: 18px 22px;
      background: var(--accent-light); border: 1px solid var(--border-strong);
      border-radius: var(--r); font-size: 0.9rem; color: var(--text-muted);
    }

    /* Kurzvorstellung auf der Startseite */
    .intro-grid { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: center; }
    .intro-photo img {
      width: 100%; border-radius: var(--r-lg); aspect-ratio: 4/5; object-fit: cover;
      border: 1px solid var(--border); box-shadow: var(--shadow-lg);
    }
    .intro-name { margin-top: 14px; font-size: 0.84rem; color: var(--text-subtle); }
    .intro-body p + p { margin-top: 16px; }
    .intro-body .btn { margin-top: 28px; }
    @media (max-width: 860px) {
      .intro-grid { grid-template-columns: 1fr; gap: 32px; }
      .intro-photo { max-width: 230px; }
      .work-row + .work-row { margin-top: 56px; }
      .services-grid.two, .cards-grid.two { grid-template-columns: 1fr; }
      .page-head { padding-top: 116px; }
      #hero { padding-top: 112px; padding-bottom: 64px; }
      .hero-inner { grid-template-columns: 1fr; gap: 40px; }
      .hero-visual { order: 0; }
    }

    /* Abschlussfläche */
    .cta-band { background: var(--dark); color: #fff; text-align: center; }
    .cta-band h2 { color: #fff; }
    .cta-band p { color: rgba(255,255,255,0.72); max-width: 46ch; margin: 14px auto 0; }
    .cta-band .btn { margin-top: 30px; }
    .cta-band .cta-mail { display: block; margin-top: 18px; font-size: 0.86rem; color: rgba(255,255,255,0.72); }
    .cta-band .cta-mail:hover { color: #fff; }

    /* Tastaturbedienung sichtbar machen */
    a:focus-visible, button:focus-visible, summary:focus-visible,
    input:focus-visible, textarea:focus-visible {
      outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px;
    }
    .skip-link {
      position: absolute; left: 18px; top: -3rem; z-index: 2000;
      background: var(--accent); color: #fff; padding: 10px 18px;
      border-radius: var(--r-sm); font-size: 0.9rem; transition: top .15s;
    }
    .skip-link:focus { top: 14px; }

    /* Wer Bewegung abbestellt hat, bekommt trotzdem alles zu sehen */
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
      }
      .h-title, .h-sub, .h-ctas, .hero-visual { opacity: 1 !important; animation: none !important; }
      .js .reveal { opacity: 1 !important; transform: none !important; }
    }

    /* Die Breiten-/Höhenattribute im Markup dürfen das Seitenverhältnis
       nicht überstimmen — sonst wird das Bild in die Länge gezogen. */
    img { height: auto; }
    .shot img {
      width: 100%; height: auto;
      aspect-ratio: 16 / 10; object-fit: cover; object-position: top center;
    }
    .intro-photo img { height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
    .work-phone img { height: auto; }
    .preview-site-img { height: 100%; }

    /* Kennzeichnung unten links — sie verdeckt dann keine Navigation im Bild */
    .shot-badge { top: auto; bottom: 14px; left: 14px; }
    .project-card-clickable::before { top: 36px; bottom: auto; left: 14px; }

    .form-hint { font-size: 0.82rem; color: var(--text-subtle); margin-top: 16px; line-height: 1.5; }
    .page-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
    .projects-note { margin-top: 40px; }
    .work-shot .shot { box-shadow: var(--shadow-lg); }
    .contact-link span:last-child { font-size: 0.95rem; }

    /* ============================================================
       RUHIGES SCHRIFTBILD
       Zwei Textfarben, sechs Größen. Keine Ausnahmen weiter unten.
    ============================================================ */
    :root {
      --text:        #0F1729;   /* Überschriften */
      --text-muted:  #4A5260;   /* alles, was Fließtext ist */
      --text-subtle: #4A5260;   /* bewusst gleich: kein drittes Grau */
      --text-strong: #0F1729;

      --fs-lead:  1.0625rem;
      --fs-body:  1rem;
      --fs-small: 0.875rem;
    }

    h1 { font-size: clamp(2.1rem, 4.4vw, 3.25rem); letter-spacing: -0.028em; }
    h2 { font-size: clamp(1.65rem, 2.8vw, 2.25rem); letter-spacing: -0.022em; }
    h3 { font-size: 1.125rem; letter-spacing: -0.01em; }

    body, p { font-size: var(--fs-body); color: var(--text-muted); }

    /* Eine Größe für Fließtext in allen Bausteinen */
    .svc-desc, .why-desc, .project-desc, .p-desc, .faq-ans,
    .work-notes li, .svc-list li, .note-line, .contact-left p,
    .intro-body p, .work-body > p, .page-head p, .cta-band p {
      font-size: var(--fs-body);
      line-height: 1.65;
      color: var(--text-muted);
    }
    .section-header p, .h-sub, .page-head > .container > p:first-of-type {
      font-size: var(--fs-lead);
      line-height: 1.6;
      color: var(--text-muted);
    }
    .shot-caption, .work-meta, .page-head .note, .intro-name, .form-hint,
    .footer-bottom, .footer-legal, .footer-links a, .project-tag, .chrome-url {
      font-size: var(--fs-small);
      color: var(--text-muted);
    }

    /* Titel in Karten: alle gleich */
    .svc-title, .why-title, .project-title, .p-title, .faq-q {
      font-family: var(--font-d);
      font-size: 1.125rem;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.01em;
    }
    .svc-card.lg .svc-title { font-size: 1.25rem; }
    .svc-card.lg .svc-desc  { font-size: var(--fs-body); }
    .project-tag {
      font-family: var(--font-d); font-weight: 600;
      letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--accent);
    }
    .work-meta { border-top: 1px solid var(--border); }
    .btn { font-size: 0.9375rem; }
    .nav-links a { font-size: 1rem; color: var(--text); }
    .nav-links { margin-left: auto; gap: 30px; }
    .nav-wrap { gap: 24px; }
    .nav-wrap > .btn { margin-left: 28px; }
    .nav-links a[aria-current="page"] { color: var(--accent); }

    /* Die Ziffern bleiben kräftig, aber ohne Farbverlauf-Effekt */
    .why-num { font-size: 2rem; }

    /* Einstieg: das ursprüngliche 3D-Modell, unverändert */
    .hero-visual { perspective: 1800px; min-height: 460px; }
    @media (max-width: 860px) {
      .hero-visual { perspective: none; min-height: 320px; }
      .browser-mockup { transform: none; }
      .hero-phone { width: 88px; right: -8px; bottom: -8px; }
    }

    .why-grid.three { grid-template-columns: repeat(3, 1fr); }
    @media (max-width: 1060px) { .why-grid.three { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 860px)  { .why-grid.three { grid-template-columns: 1fr; } }
    .why-card .svc-icon { margin-bottom: 18px; }

    .work-sub {
      font-family: var(--font-d); font-size: 0.8125rem; font-weight: 700;
      letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--text); margin: 26px 0 12px;
    }
    .work-parts { display: flex; flex-wrap: wrap; gap: 8px; }
    .work-parts li {
      font-size: var(--fs-small); color: var(--text-muted);
      background: var(--bg-subtle); border: 1px solid var(--border);
      border-radius: var(--r-sm); padding: 6px 12px;
    }

    /* Aufzählungszeichen: Punkt statt Strich */
    .svc-list li::before, .work-notes li::before {
      content: ''; position: absolute; left: 2px; top: 0.6em;
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--accent); opacity: 0.9;
    }
    .svc-list li, .work-notes li { padding-left: 22px; }

    /* Logo etwas größer, Leiste etwas luftiger */
    .nav-logo img { height: 34px; }
    .nav-wrap { padding: 22px 28px; }
    .footer-logo img { height: 30px; width: auto; }

    /* letzte Ausreißer in der Schriftgröße */
    .projects-note, .f-check label, .f-error, .f-group label,
    .work-parts li, .chrome-url, .browser-url {
      font-size: var(--fs-small);
    }
    .f-group label { color: var(--text); font-weight: 600; }

    /* Der Einstieg ist ohne JavaScript sofort da. Die Einblendung ist Zugabe. */
    .h-title, .h-sub, .h-ctas, .hero-visual { opacity: 1; animation: none; }
    .js .h-title    { opacity: 0; animation: fadeUp 0.6s var(--ease) 0.10s forwards; }
    .js .h-sub      { opacity: 0; animation: fadeUp 0.6s var(--ease) 0.20s forwards; }
    .js .h-ctas     { opacity: 0; animation: fadeUp 0.6s var(--ease) 0.30s forwards; }
    .js .hero-visual{ opacity: 0; animation: fadeIn 0.9s var(--ease) 0.24s forwards; }
    @media (prefers-reduced-motion: reduce) {
      .js .h-title, .js .h-sub, .js .h-ctas, .js .hero-visual {
        opacity: 1 !important; animation: none !important;
      }
    }

    /* Arbeiten: weniger Elemente, mehr Luft */
    .work-row { align-items: center; }
    .work-row + .work-row { margin-top: 84px; }
    @media (min-width: 900px) {
      .work-row { grid-template-columns: 58fr 42fr; gap: 60px; align-items: center; }
      .work-row.rev { grid-template-columns: 42fr 58fr; }
      .work-row + .work-row { margin-top: 110px; }
    }
    .work-body h3 { margin-bottom: 10px; }
    .work-body > p { margin-bottom: 0; }
    .work-notes { margin-top: 20px; display: grid; gap: 10px; }
    .work-notes li::before {
      width: 5px; height: 5px; top: 0.62em; opacity: 0.55;
    }
    .work-body .link-arrow { margin-top: 24px; color: var(--accent); }

    .link-arrow {
      display: inline-flex; align-items: center; gap: 7px;
      font-family: var(--font-d); font-weight: 600; font-size: 0.9375rem;
      color: var(--accent); transition: gap 0.2s var(--ease);
    }
    .link-arrow::after { content: '\2192'; }
    .link-arrow:hover { gap: 11px; }
    .work-body .link-arrow { margin-top: 26px; }

    /* Rückfallwerte, falls ein Konzept einen Wert nicht setzt */
    :root {
      --accent-glow:   rgba(45, 85, 217, 0.32);
      --accent-glow-2: rgba(45, 85, 217, 0.46);
      --tint-1: rgba(65,114,245,0.09);
      --tint-2: rgba(45,85,217,0.06);
      --tint-3: rgba(65,114,245,0.05);
      --tint-dots: rgba(65,114,245,0.06);
    }

    :root {
      --accent-a025: rgba(45,85,217,0.025);
      --accent-a10:  rgba(45,85,217,0.10);
      --accent-a18:  rgba(65,114,245,0.18);
      --accent-a38:  rgba(45,85,217,0.38);
      --accent-flaeche: linear-gradient(180deg, #EEF2FE 0%, #DCE5FB 100%);
    }

    /* ============================================================
       FARBKONZEPT: Kobalt
    ============================================================ */
    :root {
      --accent: #2A4A9E;
      --accent-hover: #233E85;
      --accent-light: rgba(42, 74, 158, 0.08);
      --accent-mid: rgba(42, 74, 158, 0.15);
      --accent-soft: #F0F2F8;
      --border-strong: rgba(42, 74, 158, 0.2);
      --accent-glow: rgba(42, 74, 158, 0.32);
      --accent-glow-2: rgba(42, 74, 158, 0.46);
      --gradient-blue: linear-gradient(135deg, #5972B3 0%, #2A4A9E 100%);
      --tint-1: rgba(80, 107, 175, 0.09);
      --tint-2: rgba(42, 74, 158, 0.06);
      --tint-3: rgba(80, 107, 175, 0.05);
      --tint-dots: rgba(80, 107, 175, 0.06);
      --accent-a025: rgba(42, 74, 158, 0.025);
      --accent-a10: rgba(42, 74, 158, 0.1);
      --accent-a18: rgba(42, 74, 158, 0.18);
      --accent-a38: rgba(42, 74, 158, 0.38);
      --accent-flaeche: linear-gradient(180deg, #EEF1F7 0%, #DDE2EF 100%);
      --dark: #0C1630;
      --accent-dark: #0C1630;
    }

    /* ============================================================
       KOPFZEILE: größer, schrumpft beim Scrollen
    ============================================================ */
    .nav-wrap { padding: 26px 28px; transition: padding 0.28s var(--ease); }
    .nav-logo img { height: 44px; transition: height 0.28s var(--ease); }
    .nav-links { gap: 34px; }
    .nav-links a { font-size: 1.0625rem; font-weight: 600; }
    .nav-wrap > .btn { font-size: 1rem; padding: 15px 30px; margin-left: 34px; }
    #nav.scrolled .nav-wrap { padding: 15px 28px; }
    #nav.scrolled .nav-logo img { height: 34px; }
    .hamburger { width: 50px; height: 50px; }
    .hamburger span { height: 2px; }
    @media (max-width: 860px) {
      .nav-wrap { padding: 18px 24px; }
      .nav-logo img { height: 38px; }
      #nav.scrolled .nav-wrap { padding: 12px 24px; }
    }
    /* Die Seite beginnt unter der höheren Leiste */
    #hero { padding-top: 168px; }
    .page-head { padding-top: 172px; }
    @media (max-width: 860px) {
      #hero { padding-top: 124px; }
      .page-head { padding-top: 128px; }
    }

    /* Fortschritt beim Scrollen */
    .nav-progress {
      position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
      background: var(--accent); transform-origin: left center;
      transition: opacity 0.25s;
      opacity: 0;
    }
    #nav.scrolled .nav-progress { opacity: 1; }

    /* ============================================================
       BEWEGUNG
       Ohne JavaScript ist alles sofort sichtbar. Die Klasse .js
       schaltet die Ausgangszustände erst ein.
    ============================================================ */
    .js .reveal { opacity: 0; transform: translateY(12px); }
    .js .reveal.visible {
      opacity: 1; transform: none;
      transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
    }
    .js .d1 { transition-delay: 0.06s; }
    .js .d2 { transition-delay: 0.12s; }
    .js .d3 { transition-delay: 0.18s; }
    .js .d4 { transition-delay: 0.24s; }

    /* Bilder ziehen sich beim Erscheinen leicht zusammen */
    .js .reveal img { transform: scale(1.035); transition: transform 0.8s var(--ease); }
    .js .reveal.visible img { transform: scale(1); }

    /* Einstieg: Modell folgt dem Scrollen langsamer und richtet sich auf */
    .hero-visual { will-change: transform; }
    .browser-mockup {
      transform: rotateY(calc(-8deg + var(--aufrichten, 0) * 4deg))
                 rotateX(calc(4deg - var(--aufrichten, 0) * 2deg));
      transition: none;
    }
    .browser-mockup:hover { transform: rotateY(-4deg) rotateX(2deg); transition: transform .6s var(--ease); }

    /* Das Modell baut sich beim Laden zeilenweise auf */
    @keyframes bausteinAuf { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
    .js .mock-nav, .js .mock-hero > div > *, .js .mock-img, .js .mock-stat {
      opacity: 0; animation: bausteinAuf 0.5s var(--ease) forwards;
    }
    .js .mock-nav            { animation-delay: 0.42s; }
    .js .mock-hero > div > *:nth-child(1) { animation-delay: 0.50s; }
    .js .mock-hero > div > *:nth-child(2) { animation-delay: 0.55s; }
    .js .mock-hero > div > *:nth-child(4) { animation-delay: 0.60s; }
    .js .mock-hero > div > *:nth-child(5) { animation-delay: 0.64s; }
    .js .mock-hero > div > *:nth-child(6) { animation-delay: 0.68s; }
    .js .mock-hero > div > *:nth-child(7) { animation-delay: 0.74s; }
    .js .mock-img            { animation-delay: 0.58s; }
    .js .mock-stat:nth-child(1) { animation-delay: 0.82s; }
    .js .mock-stat:nth-child(2) { animation-delay: 0.87s; }
    .js .mock-stat:nth-child(3) { animation-delay: 0.92s; }

    /* Ablaufphasen laufen nacheinander an. Ohne JavaScript stehen alle an. */
    .js .p-step:not(.lit) .p-bubble {
      border-color: var(--border); color: var(--text-muted);
      background: var(--bg); box-shadow: none;
    }
    .js .p-sep:not(.lit) { background: var(--border); }
    .p-bubble, .p-sep { transition: background 0.4s, border-color 0.4s, color 0.4s, box-shadow 0.4s; }

    @media (prefers-reduced-motion: reduce) {
      .js .reveal, .js .reveal img,
      .js .mock-nav, .js .mock-hero > div > *, .js .mock-img, .js .mock-stat {
        opacity: 1 !important; transform: none !important; animation: none !important;
      }
      .hero-visual { transform: none !important; }
      .browser-mockup { transform: rotateY(-8deg) rotateX(4deg) !important; }
      .nav-progress { display: none; }
    }

    /* Die Ladeanimation des Modells darf die Parallaxe nicht überschreiben:
       sie blendet nur ein, verschiebt nicht. */
    @keyframes nurEinblenden { from { opacity: 0; } to { opacity: 1; } }
    .js .hero-visual { opacity: 0; animation: nurEinblenden 0.8s var(--ease) 0.24s forwards; }

    /* ============================================================
       WENIGER LUFT, MEHR RHYTHMUS
    ============================================================ */
    section { padding: 84px 0; }
    @media (max-width: 860px) { section { padding: 60px 0; } }
    .section-header { margin-bottom: 44px; }
    .section-header h2 + p { margin-top: 12px; }

    /* Der Seitenkopf verschmilzt mit dem ersten Abschnitt */
    .page-head { padding: 172px 0 0; }
    .page-head + section { padding-top: 40px; }
    @media (max-width: 860px) {
      .page-head { padding-top: 128px; }
      .page-head + section { padding-top: 28px; }
    }

    /* Abwechselnde Flächen, damit die Seite atmet statt zu leuchten */
    .tont { background: var(--bg-subtle); }
    .tont-2 { background: var(--bg-tint); }

    /* Karten dürfen dichter stehen */
    .services-grid.two { gap: 22px; }
    .why-grid { gap: 18px; }
    .svc-card.lg { padding: 32px 30px; }
    .why-card { padding: 28px 24px; }

    /* Leistungsversprechen unter dem Einstieg */
    .kann-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    @media (max-width: 860px) { .kann-grid { grid-template-columns: 1fr; } }
    .kann-card {
      background: var(--bg); border: 1px solid var(--border);
      border-radius: var(--r-lg); padding: 28px 26px;
      transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.25s;
    }
    .kann-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--border-strong); }
    .kann-card .svc-icon { margin-bottom: 16px; }
    .kann-card h3 { margin-bottom: 8px; }

    /* Gründerwort */
    .wort {
      display: grid; gap: 26px; align-items: center;
      background: var(--bg); border: 1px solid var(--border);
      border-radius: var(--r-xl); padding: 38px 40px;
      box-shadow: var(--shadow-md);
    }
    @media (min-width: 900px) { .wort { grid-template-columns: 104px 1fr; gap: 34px; } }
    .wort img { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; }
    .wort blockquote { margin: 0; font-family: var(--font-d); font-size: 1.25rem;
      line-height: 1.45; color: var(--text); letter-spacing: -0.012em; }
    .wort figcaption { margin-top: 14px; font-size: var(--fs-small); color: var(--text-muted); }

    .visually-hidden {
      position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    /* Fußzeile folgt dem Farbkonzept und setzt sich vom Abschlussband ab */
    footer { background: var(--dark); border-top: 1px solid rgba(255,255,255,0.09); }
    .cta-band p { color: rgba(255,255,255,0.82); }

    /* ============================================================
       FEINSCHLIFF
       Ruhiges Erscheinen, einheitliche Zustaende, keine Bewegung
       an Bildern.
    ============================================================ */

    /* --- Erscheinen beim Scrollen ------------------------------ */
    .js .reveal { opacity: 0; transform: translateY(10px); }
    .js .reveal.visible {
      opacity: 1;
      transform: none;
      transition: opacity 0.52s cubic-bezier(0.22, 0.61, 0.36, 1),
                  transform 0.52s cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    /* Versatz zwischen benachbarten Elementen: 70 ms */
    .js .d1 { transition-delay: 0.07s; }
    .js .d2 { transition-delay: 0.14s; }
    .js .d3 { transition-delay: 0.21s; }
    .js .d4 { transition-delay: 0.28s; }
    /* Was beim Laden schon im Bild steht, ist sofort da */
    .js .reveal.sofort {
      opacity: 1; transform: none;
      transition: none; transition-delay: 0s;
    }

    /* Bilder bewegen sich nicht mehr mit */
    .js .reveal img,
    .js .reveal.visible img { transform: none; transition: none; }

    /* Der Einstieg steht ohne Verzoegerung */
    .js .hero-visual { opacity: 1; animation: none; }
    .hero-visual { will-change: auto; transform: none; }
    .browser-mockup,
    .browser-mockup:hover { transform: rotateY(-8deg) rotateX(4deg); transition: none; }
    .js .mock-nav, .js .mock-hero > div > *, .js .mock-img, .js .mock-stat {
      opacity: 1; animation: none;
    }

    /* --- Schaltflaechen ---------------------------------------- */
    .btn {
      transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease,
                  box-shadow 0.18s ease, transform 0.18s ease;
      min-height: 46px;
    }
    .btn svg { transition: transform 0.18s ease; }
    .btn:hover { transform: none; }
    .btn:hover svg { transform: translateX(3px); }
    .btn:active { transform: scale(0.985); }
    .btn-primary:hover { background: var(--accent-hover); box-shadow: 0 6px 22px var(--accent-glow-2); }
    .btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
    .btn-outline:hover { background: var(--accent); color: #fff; }

    /* --- Textlinks mit Pfeil ------------------------------------ */
    .link-arrow { transition: color 0.18s ease; }
    .link-arrow::after { display: inline-block; transition: transform 0.18s ease; }
    .link-arrow:hover { gap: 8px; }
    .link-arrow:hover::after { transform: translateX(3px); }

    /* --- Flaechen zum Antippen ---------------------------------- */
    .nav-links a { display: inline-flex; align-items: center; min-height: 44px; }
    #mobile-nav a { min-height: 48px; display: flex; align-items: center; }
    .hamburger { min-width: 44px; min-height: 44px; }
    .footer-links a, .footer-legal a { display: inline-block; padding: 6px 0; }

    /* --- Fokus ---------------------------------------------------- */
    a:focus-visible, button:focus-visible, summary:focus-visible,
    input:focus-visible, textarea:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
      border-radius: 6px;
    }
    a, button { -webkit-tap-highlight-color: transparent; }

    /* Kleinste Textgroesse bleibt lesbar */
    .projects-note { font-size: 0.9375rem; }

    @media (prefers-reduced-motion: reduce) {
      .js .reveal { opacity: 1 !important; transform: none !important; }
      .js .reveal.visible { transition: none !important; }
      .btn:active { transform: none; }
      .btn:hover svg, .link-arrow:hover::after { transform: none; }
    }

    /* ============================================================
       ÜBERARBEITUNG 09/2026
       Weniger Leerfläche, Blau ordnet Inhalte, Nachtblau als
       Schwerpunkt für Gründerbereich und Fußzeile.
    ============================================================ */
    :root {
      --blue-50:  #F3F6FC;   /* sehr helle Gruppierungsfläche */
      --blue-100: #E4EAF6;
      --blue-200: #C9D4EC;
      --night:    #12214A;   /* Nachtblau statt Schwarz */
      --night-2:  #1A2B5A;
      --red-50:   #FBF3F2;
      --red-200:  #EED6D3;
      --red-ink:  #A2463C;
      --bg-subtle: var(--blue-50);
      --dark: var(--night);
      --accent-dark: var(--night);
    }

    /* --- Abstände ------------------------------------------------ */
    section { padding: 64px 0; }
    .section-header { margin-bottom: 28px; max-width: 640px; }
    .section-header h2 + p { margin-top: 10px; }
    .page-head { padding: 128px 0 0; }
    .page-head p { margin-top: 12px; }
    .page-head + section { padding-top: 32px; }
    @media (max-width: 860px) {
      section { padding: 48px 0; }
      .section-header { margin-bottom: 22px; }
      .page-head { padding-top: 104px; }
      .page-head + section { padding-top: 24px; }
    }

    /* --- Kopfzeile: Logo sichtbar größer, Leiste bleibt flach ----- */
    .nav-wrap { padding: 14px 28px; }
    .nav-logo img { height: 60px; }
    #nav.scrolled .nav-wrap { padding: 8px 28px; }
    #nav.scrolled .nav-logo img { height: 46px; }
    .nav-wrap > .btn { padding: 14px 26px; }
    @media (max-width: 860px) {
      .nav-wrap { padding: 10px 18px; }
      .nav-logo img { height: 50px; }
      #nav.scrolled .nav-wrap { padding: 6px 18px; }
      #nav.scrolled .nav-logo img { height: 42px; }
    }

    /* --- Einstieg: helle blaue Fläche statt Verläufe ------------- */
    #hero { padding-top: 132px; padding-bottom: 64px; background: var(--blue-50); }
    .hero-bg { display: none; }
    .hero-visual { min-height: 0; }
    .h-ctas { margin-top: 28px; }
    .h-price { margin-top: 18px; font-size: var(--fs-small); }
    .h-price a, .text-link { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
    @media (max-width: 860px) {
      #hero { padding-top: 100px; padding-bottom: 44px; }
      .hero-inner { gap: 28px; }
      .hero-visual { min-height: 0; }
    }

    /* Flächen */
    .tont { background: var(--blue-50); }
    .ac { color: var(--accent); }

    /* --- Vergleich ---------------------------------------------- */
    .cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    .cmp-col { border-radius: var(--r-lg); padding: 26px 28px 10px; border: 1px solid; }
    .cmp-before { background: var(--red-50); border-color: var(--red-200); }
    .cmp-after  { background: var(--blue-50); border-color: var(--blue-200); }
    .cmp-head {
      font-family: var(--font-d); font-weight: 700; font-size: 0.8125rem;
      letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px;
    }
    .cmp-before .cmp-head { color: var(--red-ink); }
    .cmp-after .cmp-head  { color: var(--accent); }
    .cmp-item { display: flex; gap: 14px; padding: 14px 0; min-height: 96px; }
    .cmp-item + .cmp-item { border-top: 1px solid rgba(15,23,41,0.07); }
    .cmp-item strong { display: block; font-family: var(--font-d); color: var(--text); font-size: 1rem; margin-bottom: 2px; }
    .cmp-item p { margin: 0; }
    .cmp-ico { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; }
    .cmp-ico svg { width: 14px; height: 14px; }
    .cmp-before .cmp-ico { background: var(--red-200); color: var(--red-ink); }
    .cmp-after .cmp-ico  { background: var(--accent); color: #fff; }
    @media (max-width: 760px) {
      .cmp { grid-template-columns: 1fr; gap: 12px; }
      .cmp-col { padding: 20px 20px 6px; }
      .cmp-item { min-height: 0; }
    }

    /* --- Projekte auf der Startseite: ein großes, zwei kleine ---- */
    .split-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
    .split-head .section-header { margin-bottom: 0; }
    .split-head .link-arrow { flex-shrink: 0; padding-bottom: 4px; }
    .proj-mosaic { display: grid; grid-template-columns: 1.45fr 1fr; gap: 20px; }
    .proj-stack { display: grid; gap: 20px; }
    .project-card { border-color: var(--blue-100); }
    .project-card.is-large .project-preview-static { height: 360px; }
    .project-card.is-compact .project-preview-static { height: 150px; }
    .project-card.is-compact .project-info { padding: 16px 22px 20px; }
    .project-card.is-large .project-info { padding: 22px 26px 24px; }
    @media (max-width: 860px) {
      .split-head { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 22px; }
      .proj-mosaic { grid-template-columns: 1fr; gap: 16px; }
      .proj-stack { gap: 16px; }
      .project-card.is-large .project-preview-static { height: 220px; }
      .project-card.is-compact .project-preview-static { height: 180px; }
    }

    /* --- Angebot auf der Startseite ------------------------------ */
    .offer { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
    .offer-intro h2 { margin-bottom: 12px; }
    .price-strip {
      margin-top: 22px; padding: 16px 20px; border-radius: var(--r);
      background: var(--blue-50); border: 1px solid var(--blue-200);
      display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px;
    }
    .price-strip-row { display: flex; flex-wrap: wrap; gap: 6px 22px; color: var(--text); }
    .price-strip-row strong { font-family: var(--font-d); color: var(--accent); margin-right: 4px; }
    .offer-list { display: grid; gap: 0; }
    .offer-row { display: flex; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--border); }
    .offer-row:first-child { padding-top: 4px; }
    .offer-row .svc-icon { flex: 0 0 46px; margin: 0; }
    .offer-row h3 { margin-bottom: 4px; }
    .offer-list .btn { justify-self: start; margin-top: 22px; }
    @media (max-width: 860px) { .offer { grid-template-columns: 1fr; gap: 28px; } }

    /* Blaue Symbolflächen etwas kräftiger */
    .svc-icon { background: var(--blue-100); }

    /* --- Gründerbereich in Nachtblau ----------------------------- */
    .founder { background: var(--night); color: #fff; }
    .founder-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
    .founder-quote { display: flex; gap: 24px; align-items: flex-start; margin: 0; }
    .founder-quote img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid rgba(255,255,255,0.18); }
    .founder-quote blockquote { font-family: var(--font-d); font-size: 1.3rem; line-height: 1.45; color: #fff; letter-spacing: -0.01em; }
    .founder-quote figcaption { margin-top: 12px; font-size: var(--fs-small); color: rgba(255,255,255,0.78); }
    .founder .link-arrow { margin-top: 12px; color: #AFC2F0; }
    .founder-cta { background: var(--night-2); border-radius: var(--r-lg); padding: 30px 32px; }
    .founder-cta h2 { color: #fff; font-size: clamp(1.45rem, 2.4vw, 1.9rem); }
    .founder-cta p { color: rgba(255,255,255,0.82); margin-top: 10px; }
    .founder-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 22px; }
    .founder .btn-primary { background: #fff; color: var(--night); box-shadow: none; }
    .founder .btn-primary:hover { background: var(--blue-100); box-shadow: none; }
    .founder .cta-mail { color: rgba(255,255,255,0.82); font-size: var(--fs-small); }
    .founder .cta-mail:hover { color: #fff; }
    @media (max-width: 860px) {
      .founder-grid { grid-template-columns: 1fr; gap: 28px; }
      .founder-quote { flex-direction: column; gap: 16px; }
      .founder-quote img { width: 80px; height: 80px; }
      .founder-quote blockquote { font-size: 1.15rem; }
      .founder-cta { padding: 24px 20px; }
    }

    /* --- Abschluss auf Unterseiten: helle blaue Fläche ----------- */
    .cta-light { padding-top: 0; }
    .tont + .cta-light { padding-top: 64px; }
    .cta-box {
      display: flex; align-items: center; justify-content: space-between; gap: 20px 40px;
      background: var(--blue-50); border: 1px solid var(--blue-200);
      border-radius: var(--r-lg); padding: 30px 36px;
    }
    .cta-box h2 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); }
    .cta-box p { margin-top: 6px; max-width: 52ch; }
    .cta-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; }
    .cta-actions .cta-mail { font-size: var(--fs-small); color: var(--text-muted); }
    .cta-actions .cta-mail:hover { color: var(--accent); }
    @media (max-width: 760px) {
      .tont + .cta-light { padding-top: 48px; }
      .cta-box { flex-direction: column; align-items: flex-start; padding: 24px 20px; }
      .cta-actions { align-items: flex-start; }
    }

    /* --- Leistungen: zwei Wege ----------------------------------- */
    .ways-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    .way { padding: 26px 28px; border-radius: var(--r-lg); border: 1px solid var(--border); background: #fff; }
    .way-alt { background: var(--blue-50); border-color: var(--blue-200); }
    .way-top { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
    .way-top .svc-icon { margin: 0; flex: 0 0 46px; }
    .way-alt .svc-icon { background: #fff; }
    .way-title { font-size: 1.25rem; letter-spacing: -0.01em; }
    .way .svc-list { margin-top: 14px; gap: 8px; }
    @media (max-width: 860px) { .ways-grid { grid-template-columns: 1fr; gap: 12px; } .way { padding: 22px 20px; } }

    /* --- Pakete -------------------------------------------------- */
    .pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
    .pkg {
      display: flex; flex-direction: column;
      background: #fff; border: 1px solid var(--blue-200); border-radius: var(--r-lg); padding: 28px 26px;
    }
    .pkg h3 { font-size: 1.25rem; }
    .pkg-price { font-family: var(--font-d); font-weight: 700; font-size: 2.4rem; line-height: 1.1; color: var(--text); margin-top: 8px; letter-spacing: -0.02em; }
    .pkg-price span { font-family: var(--font-b); font-weight: 400; font-size: var(--fs-small); color: var(--text-muted); margin-left: 8px; letter-spacing: 0; }
    .pkg-lead { margin-top: 8px; }
    .pkg-list { margin: 18px 0 24px; padding-top: 18px; border-top: 1px solid var(--border); display: grid; gap: 9px; flex: 1; align-content: start; }
    .pkg-list li { position: relative; padding-left: 26px; color: var(--text); line-height: 1.5; }
    .pkg-list li::before {
      content: ''; position: absolute; left: 0; top: 0.2em; width: 16px; height: 16px; border-radius: 50%;
      background: var(--blue-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A4A9E' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 10px no-repeat;
    }
    .pkg .btn { justify-content: center; width: 100%; }
    .pkg.is-highlight { background: var(--accent); border-color: var(--accent); }
    .pkg.is-highlight h3, .pkg.is-highlight .pkg-price, .pkg.is-highlight .pkg-list li { color: #fff; }
    .pkg.is-highlight .pkg-price span, .pkg.is-highlight .pkg-lead { color: rgba(255,255,255,0.82); }
    .pkg.is-highlight .pkg-list { border-top-color: rgba(255,255,255,0.18); }
    .pkg.is-highlight .pkg-list li::before {
      background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A4A9E' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 10px no-repeat;
    }
    .btn-light { background: #fff; color: var(--accent); border: 1.5px solid #fff; }
    .btn-light:hover { background: var(--blue-100); border-color: var(--blue-100); }
    .btn-outline { border-color: var(--accent); }
    @media (max-width: 960px) { .pkg-grid { grid-template-columns: 1fr; max-width: 520px; } .pkg-list { flex: none; } }

    .price-notes { display: grid; grid-template-columns: 1fr 1.4fr; gap: 18px; margin-top: 18px; }
    .price-note { background: #fff; border: 1px solid var(--blue-200); border-radius: var(--r-lg); padding: 22px 26px; }
    .price-note h3 { margin-bottom: 6px; }
    .cost-list { display: grid; gap: 10px; }
    .cost-list li { color: var(--text-muted); }
    .cost-list strong { color: var(--text); font-weight: 600; }
    @media (max-width: 860px) { .price-notes { grid-template-columns: 1fr; } .price-note { padding: 20px; } }

    /* --- Ablauf, Zusatzinfos ------------------------------------- */
    .extra-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 40px; margin-top: 40px; }
    .extra { display: flex; gap: 16px; }
    .extra .svc-icon { flex: 0 0 46px; margin: 0; }
    .extra h3 { margin-bottom: 4px; }
    .section-header + .extra-grid { margin-top: 0; }
    @media (max-width: 760px) { .extra-grid { grid-template-columns: 1fr; margin-top: 28px; gap: 20px; } }
    .p-desc { max-width: 34ch; margin: 0 auto; }
    @media (max-width: 600px) { .p-desc { max-width: none; } }

    /* FAQ: Überschrift links, Fragen rechts */
    .faq-layout { display: grid; grid-template-columns: 0.8fr 1.6fr; gap: 40px; align-items: start; }
    .faq-layout .section-header { margin-bottom: 0; }
    .faq-layout .faq-list { max-width: none; margin: 0; }
    @media (max-width: 860px) { .faq-layout { grid-template-columns: 1fr; gap: 20px; } }
    .faq-item { border-color: var(--blue-200); }

    /* --- Über uns ------------------------------------------------ */
    .founder-panel {
      display: grid; grid-template-columns: 260px 1fr; gap: 44px; align-items: center;
      background: var(--night); border-radius: var(--r-xl); padding: 36px 40px;
    }
    .founder-panel .intro-photo img { box-shadow: none; border: 2px solid rgba(255,255,255,0.14); }
    .founder-panel h2 { color: #fff; font-size: clamp(1.45rem, 2.4vw, 2rem); margin: 6px 0 14px; }
    .founder-panel p { color: rgba(255,255,255,0.84); }
    .founder-kicker { font-family: var(--font-d); font-weight: 600; font-size: var(--fs-small) !important; color: #AFC2F0 !important; letter-spacing: 0.06em; text-transform: uppercase; }
    .founder-panel .intro-body .btn { margin-top: 22px; }
    @media (max-width: 860px) {
      .founder-panel { grid-template-columns: 1fr; gap: 22px; padding: 24px 20px; border-radius: var(--r-lg); }
      .founder-panel .intro-photo { max-width: 160px; }
    }
    .principles { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
    .principle { display: flex; gap: 20px; padding: 20px 0; border-top: 1px solid var(--blue-200); }
    .principle .why-num { font-size: 1.5rem; color: var(--accent); background: none; -webkit-text-fill-color: var(--accent); flex: 0 0 40px; margin: 0; line-height: 1.2; }
    .principle h3 { margin-bottom: 4px; }
    @media (max-width: 760px) { .principles { grid-template-columns: 1fr; } .principle { gap: 14px; padding: 16px 0; } }

    /* --- Kontakt ------------------------------------------------- */
    #kontakt { background: none; }
    #kontakt::before { display: none; }
    .contact-wrap { gap: 40px; grid-template-columns: 1fr 500px; }
    .contact-left { background: var(--blue-50); border: 1px solid var(--blue-200); border-radius: var(--r-lg); padding: 28px; }
    .contact-left p { margin-bottom: 20px; }
    .contact-person { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
    .contact-person img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
    .contact-person strong { display: block; font-family: var(--font-d); color: var(--text); font-size: 1.125rem; }
    .contact-person span { font-size: var(--fs-small); color: var(--text-muted); }
    .c-icon { background: #fff; }
    .contact-pkgs { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--blue-200); display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; color: var(--text); }
    .contact-pkgs strong { width: 100%; font-family: var(--font-d); }
    .contact-pkgs .link-arrow { width: 100%; margin-top: 6px; }
    .c-form { padding: 30px 30px; box-shadow: var(--shadow-md); }
    .f-group select {
      font-family: var(--font-b); font-size: 0.9375rem; color: var(--text);
      background: var(--bg-subtle) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5260' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 16px no-repeat;
      border: 1.5px solid var(--border); border-radius: var(--r-sm);
      padding: 12px 40px 12px 16px; width: 100%; outline: none; appearance: none; -webkit-appearance: none;
    }
    .f-group select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-a10); }
    .f-group select.is-preselected { border-color: var(--accent); background-color: #fff; }
    .f-group { margin-bottom: 14px; }
    @media (max-width: 860px) { .contact-wrap { grid-template-columns: 1fr; gap: 20px; } .contact-left { padding: 22px 20px; } }
    @media (max-width: 600px) { .c-form { padding: 22px 18px; } }

    /* --- Projekte-Seite dichter ---------------------------------- */
    .work-row + .work-row { margin-top: 56px; }
    @media (min-width: 900px) { .work-row + .work-row { margin-top: 72px; } }
    .work-row + .work-row { padding-top: 0; }
    main > section:has(.work-row) + .cta-light { padding-top: 0; }

    /* --- Fußzeile in Nachtblau, Logo hell ------------------------ */
    footer { background: var(--night); border-top: 1px solid rgba(255,255,255,0.1); padding: 40px 0 26px; }
    .founder + footer, main:has(> .founder:last-child) + footer { border-top-color: rgba(255,255,255,0.1); }
    .footer-top { margin-bottom: 22px; padding-bottom: 22px; border-bottom-color: rgba(255,255,255,0.12); }
    .footer-logo img { height: 40px; filter: brightness(0) invert(1); }
    .footer-links a { color: rgba(255,255,255,0.78); }
    .footer-links a:hover { color: #fff; }
    .footer-bottom { color: rgba(255,255,255,0.66); }
    .footer-bottom a { color: rgba(255,255,255,0.78); }
    .footer-legal a { color: rgba(255,255,255,0.66); }
    main:has(> .cta-light:last-child) { padding-bottom: 64px; }
    @media (max-width: 860px) { main:has(> .cta-light:last-child) { padding-bottom: 48px; } }
    .project-card.is-large .project-preview-static { height: auto; flex: 1; min-height: 320px; }
    .project-card.is-large .project-info { flex: 0 0 auto; }
    .founder-quote img, .contact-person img { aspect-ratio: 1 / 1; height: auto; object-position: center 20%; }
    @media (max-width: 860px) { .project-card.is-large .project-preview-static { min-height: 220px; flex: none; } }
    .price-notes { align-items: start; }
    main:has(> .cta-light:last-child) { padding-bottom: 0; }
    /* Logo ohne transparente Ränder: sichtbare Marke rund 35 % größer */
    .nav-logo img { height: 32px; width: auto; }
    #nav.scrolled .nav-logo img { height: 27px; }
    .nav-wrap { padding: 18px 28px; }
    #nav.scrolled .nav-wrap { padding: 10px 28px; }
    .footer-logo img { height: 28px; width: auto; }
    @media (max-width: 860px) {
      .nav-logo img { height: 30px; }
      #nav.scrolled .nav-logo img { height: 26px; }
      .nav-wrap { padding: 12px 18px; }
      #nav.scrolled .nav-wrap { padding: 8px 18px; }
    }
    @media (max-width: 860px) { .contact-wrap .c-form { order: -1; } }

    /* ============================================================
       ÜBERARBEITUNG 2: weniger Inhalt, mehr Luft
    ============================================================ */
    section { padding: 88px 0; }
    .section-header { margin-bottom: 40px; }
    .section-header h2 + p { margin-top: 14px; }
    .page-head { padding-top: 140px; }
    .page-head p { margin-top: 16px; }
    .page-head + section { padding-top: 48px; }
    @media (max-width: 860px) {
      section { padding: 60px 0; }
      .section-header { margin-bottom: 28px; }
      .page-head { padding-top: 112px; }
      .page-head + section { padding-top: 36px; }
    }
    #hero { padding-top: 148px; padding-bottom: 88px; }
    .h-ctas { margin-top: 34px; }
    @media (max-width: 860px) { #hero { padding-top: 112px; padding-bottom: 56px; } .hero-inner { gap: 40px; } }

    .cmp { gap: 24px; }
    .cmp-col { padding: 30px 32px 14px; }
    .cmp-item { padding: 18px 0; min-height: 0; }

    .split-head { margin-bottom: 40px; }
    .proj-mosaic, .proj-stack { gap: 24px; }
    .project-card .project-info { padding: 20px 24px 22px !important; flex: 0 0 auto; }
    .project-title { margin-bottom: 0; }
    .project-card.is-compact .project-preview-static { height: 200px; }
    @media (max-width: 860px) { .split-head { margin-bottom: 28px; } }

    /* Angebot: Text links, Preisangabe rechts */
    .offer { grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; }
    .offer-intro p { margin-top: 16px; max-width: 52ch; }
    .offer-price { background: var(--blue-50); border: 1px solid var(--blue-200); border-radius: var(--r-lg); padding: 32px 36px; }
    .offer-price p { margin: 0; }
    .offer-price-label { font-family: var(--font-d); font-weight: 600; color: var(--text) !important; }
    .offer-price-value { font-family: var(--font-d); font-weight: 700; font-size: 2.5rem !important; line-height: 1.15; color: var(--accent) !important; margin: 6px 0 2px !important; letter-spacing: -0.02em; }
    .offer-price .link-arrow { margin-top: 20px; }
    @media (max-width: 860px) { .offer { grid-template-columns: 1fr; gap: 32px; } .offer-price { padding: 26px 24px; } }

    /* Nachtblauer Abschluss der Startseite */
    .founder-row { display: flex; align-items: center; gap: 40px; }
    .founder-person { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; flex: 0 0 auto; text-align: center; }
    .founder-person img { width: 96px; height: 96px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; object-position: center 20%; border: 2px solid rgba(255,255,255,0.18); }
    .founder-person figcaption { font-family: var(--font-d); font-weight: 600; color: #fff; font-size: 1rem; }
    .founder-person figcaption span { display: block; font-family: var(--font-b); font-weight: 400; font-size: var(--fs-small); color: rgba(255,255,255,0.75); }
    .founder-text { flex: 1; }
    .founder-text h2 { color: #fff; }
    .founder-text p { color: rgba(255,255,255,0.82); margin-top: 12px; max-width: 54ch; }
    .founder-row .btn { flex-shrink: 0; }
    @media (max-width: 860px) {
      .founder-row { flex-direction: column; align-items: flex-start; gap: 24px; }
      .founder-person { flex-direction: row; text-align: left; }
      .founder-person img { width: 72px; height: 72px; }
    }

    /* Abschlussbox auf Unterseiten: nur Frage und Button */
    .cta-box { padding: 32px 40px; }
    .cta-box h2 { margin: 0; }
    .tont + .cta-light { padding-top: 88px; }
    .cta-light { padding-bottom: 88px; }
    @media (max-width: 760px) { .cta-box { padding: 26px 24px; gap: 18px; } .tont + .cta-light { padding-top: 60px; } .cta-light { padding-bottom: 60px; } }

    /* Pakete */
    .pkg-grid { gap: 24px; }
    .pkg { padding: 34px 32px; }
    .pkg-price { margin-top: 10px; }
    .pkg-lead { margin-top: 12px; }
    .pkg-list { margin: 22px 0 30px; padding-top: 22px; gap: 12px; }
    .price-notes { grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--blue-200); }
    .price-notes h3 { margin-bottom: 10px; }
    @media (max-width: 860px) { .price-notes { grid-template-columns: 1fr; gap: 28px; margin-top: 36px; padding-top: 32px; } }
    .p-desc { margin-top: 4px; }

    .faq-layout { gap: 56px; }
    .faq-list { gap: 12px; }
    .faq-item summary { padding: 22px 26px; }
    .faq-ans { padding: 0 26px 22px; }

    /* Über uns */
    .founder-panel { grid-template-columns: 240px 1fr; gap: 56px; padding: 48px 52px; }
    .founder-panel h2 { margin: 10px 0 18px; }
    .founder-panel .intro-body p + p { margin-top: 14px; }
    @media (max-width: 860px) { .founder-panel { padding: 30px 24px; gap: 26px; } .founder-panel .intro-photo { max-width: 160px; } }
    .principles { gap: 0 56px; }
    .principle { display: block; padding: 26px 0; }
    .principle h3 { margin-bottom: 8px; }

    /* Kontakt */
    .contact-wrap { gap: 48px; align-items: start; }
    .contact-left { padding: 32px; }
    .contact-person { margin-bottom: 22px; }
    .contact-left p { margin-bottom: 22px; }
    .c-form { padding: 36px; }
    .f-group { margin-bottom: 18px; }
    @media (max-width: 860px) { .contact-wrap { gap: 28px; } .contact-left { padding: 24px; } }
    @media (max-width: 600px) { .c-form { padding: 26px 20px; } }

    .work-row + .work-row { margin-top: 88px; }
    @media (max-width: 860px) { .work-row + .work-row { margin-top: 60px; } }
    #leistungen { background: var(--bg); }
    @media (max-width: 860px) { .founder-panel { grid-template-columns: 1fr; } }
    .page-head:has(+ .tont) { padding-bottom: 48px; }
    @media (max-width: 860px) { .page-head:has(+ .tont) { padding-bottom: 32px; } }

    /* ============================================================
       ÜBERARBEITUNG 3
    ============================================================ */
    /* Keine verzögerten Einblendungen: Inhalte und Bilder stehen sofort */
    .js .reveal, .js .reveal.visible, .js .h-title, .js .h-sub, .js .h-ctas, .js .hero-visual,
    .h-title, .h-sub, .h-ctas, .hero-visual {
      opacity: 1 !important; transform: none; animation: none !important; transition: none;
    }
    .browser-mockup { transform: rotateY(-8deg) rotateX(4deg); }
    @media (max-width: 860px) { .browser-mockup { transform: none; } }

    /* Drei Argumente */
    .benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
    .benefit { border-top: 2px solid var(--accent); padding-top: 22px; }
    .benefit h3 { margin-bottom: 10px; }
    @media (max-width: 860px) { .benefit-grid { grid-template-columns: 1fr; gap: 32px; } }

    /* Projektbeispiele: eine gleichmäßige Reihe */
    .pcard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .pcard { display: block; color: inherit; }
    .pcard-img {
      aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden;
      background: var(--blue-100); border: 1px solid var(--blue-200);
    }
    .pcard-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform 0.3s ease; }
    .pcard:hover .pcard-img img { transform: scale(1.02); }
    .pcard-title { margin-top: 14px; font-size: 1.125rem; }
    .pcard:hover .pcard-title { color: var(--accent); }
    .pcard-note { margin-top: 28px; font-size: var(--fs-small); color: var(--text-muted); }
    @media (max-width: 760px) { .pcard-grid { grid-template-columns: 1fr; gap: 28px; } }

    /* Preisüberblick Startseite */
    #pakete { background: var(--bg); }
    .pkg-overview { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
    .pkg-col { padding: 28px 28px 30px; }
    .pkg-col + .pkg-col { border-left: 1px solid var(--border); }
    .pkg-col h3 { margin-bottom: 10px; }
    .pkg-col.is-standard { background: var(--blue-50); }
    .pkg-col.is-standard h3 { color: var(--accent); }
    .pkg-overview-link { margin-top: 26px; }
    @media (max-width: 760px) {
      .pkg-overview { grid-template-columns: 1fr; }
      .pkg-col { padding: 22px 20px; }
      .pkg-col + .pkg-col { border-left: 0; border-top: 1px solid var(--border); }
    }
    .pkg-explain { margin-top: 24px; font-size: var(--fs-small); }

    /* Schlichter Footer */
    footer { padding: 40px 0 28px; }
    .footer-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 32px; margin-bottom: 20px; padding-bottom: 22px; }
    .footer-links { gap: 6px 24px; }
    .footer-copy { font-size: var(--fs-small); color: rgba(255,255,255,0.6); margin: 0; }
    @media (max-width: 760px) { .footer-top { flex-direction: column; align-items: flex-start; } }

    /* Seitenende ohne Abschlussbox: letzter Abschnitt direkt vor dem Footer */
    .contact-person img { width: 64px; height: 64px; }
    .benefits .section-header, #pakete .section-header { max-width: 820px; }

    /* ============================================================
       RUHIGE, RUNDE FORMENSPRACHE
       Ein Radius-System für alles, weniger Schatten, weiche Kanten.
    ============================================================ */
    :root { --r-sm: 12px; --r: 16px; --r-lg: 20px; --r-xl: 28px; }
    .cmp-col, .pkg, .price-note, .contact-left, .c-form, .cta-box, .faq-item,
    .project-card, .way, .offer-price, .h-price-box { border-radius: var(--r-lg); }
    .pcard-img, .shot, .work-shot .shot, .intro-photo img, .why-person img { border-radius: var(--r-lg); }
    .founder-panel { border-radius: var(--r-xl); }
    .svc-icon { border-radius: 14px; }
    .c-icon { border-radius: 12px; }
    .f-group input, .f-group textarea, .f-group select { border-radius: var(--r-sm); }
    .f-submit { border-radius: 100px; }
    .faq-item summary { border-radius: var(--r-lg); }

    /* Weniger Schatten, feine Linien statt harter Kanten */
    .c-form, .faq-item[open], .work-shot .shot, .shot { box-shadow: none; }
    .shot { border: 1px solid var(--blue-200); }
    .cmp-col { border-width: 1px; }
    .cmp-item + .cmp-item { border-top-color: rgba(15,23,41,0.05); }

    /* Preisüberblick Startseite: eine abgerundete Fläche statt offener Linien */
    .pkg-overview {
      border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
      border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    }
    .pkg-overview .pkg-col + .pkg-col { border-left: 1px solid var(--border); }
    @media (max-width: 760px) { .pkg-overview .pkg-col + .pkg-col { border-left: 0; border-top: 1px solid var(--border); } }

    .pcard-img { border-color: var(--blue-200); }
    .btn-outline, .btn-light, .btn-ghost { border-radius: 100px; }

    /* ============================================================
       ÜBERARBEITUNG 5: Preiskästchen und großer Footer
    ============================================================ */
    .price-card {
      display: flex; align-items: center; justify-content: space-between; gap: 24px 48px;
      background: var(--blue-50); border: 1px solid var(--blue-200); border-radius: var(--r-lg);
      padding: 40px 44px;
    }
    .price-card h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
    .price-card p { margin-top: 10px; max-width: 52ch; }
    .price-card .btn { flex-shrink: 0; }
    @media (max-width: 760px) { .price-card { flex-direction: column; align-items: flex-start; padding: 28px 24px; } }

    footer { padding: 80px 0 28px; }
    .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 0.8fr; gap: 48px; padding-bottom: 56px; }
    .footer-logo { display: inline-block; margin-bottom: 26px; }
    .footer-cta h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2rem); max-width: 18ch; }
    .footer-cta p { color: rgba(255,255,255,0.78); margin-top: 14px; max-width: 42ch; }
    .btn-footer { margin-top: 26px; background: #fff; color: var(--night); }
    .btn-footer:hover { background: var(--blue-100); }
    .footer-col { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
    .footer-col h3 { font-family: var(--font-d); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 6px; }
    .footer-col a { color: rgba(255,255,255,0.9); }
    .footer-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
    .footer-contact { font-family: var(--font-d); font-size: 1.125rem; }
    .footer-col p { color: rgba(255,255,255,0.6); font-size: var(--fs-small); margin: 4px 0 0; }
    .footer-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 24px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.12); }
    .footer-bar p { margin: 0; font-size: var(--fs-small); color: rgba(255,255,255,0.6); }
    .footer-bar .footer-legal { display: flex; gap: 22px; margin: 0; }
    .footer-bar .footer-legal a { font-size: var(--fs-small); color: rgba(255,255,255,0.7); }
    @media (max-width: 860px) {
      footer { padding-top: 56px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; padding-bottom: 40px; }
      .footer-cta { grid-column: 1 / -1; }
    }
    @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

    /* ============================================================
       FOOTER: ruhig, mittig, mattes Nachtblau
    ============================================================ */
    :root { --night: #101C3F; --dark: #101C3F; }
    footer { background: var(--night); border-top: 0; padding: 52px 0 32px; }
    .footer-top {
      display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 32px;
      margin-bottom: 30px; padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .footer-links { display: flex; flex-wrap: wrap; gap: 6px 24px; }
    .footer-links a { color: rgba(255,255,255,0.55); font-size: var(--fs-small); }
    .footer-links a:hover { color: rgba(255,255,255,0.85); }
    .footer-bottom { text-align: center; font-size: var(--fs-small); color: rgba(255,255,255,0.35); }
    .footer-bottom a { color: rgba(255,255,255,0.6); text-decoration: none; }
    .footer-bottom a:hover { color: rgba(255,255,255,0.9); }
    .footer-legal { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; padding: 0; border: 0; }
    .footer-legal span, .footer-legal a { font-size: var(--fs-small); color: rgba(255,255,255,0.35); }
    .footer-legal a:hover { color: rgba(255,255,255,0.7); }
    .footer-logo { margin: 0; display: flex; }
    .footer-logo img { height: 26px; width: auto; }
    @media (max-width: 760px) { .footer-top { flex-direction: column; align-items: center; text-align: center; } .footer-links { justify-content: center; } }
    .footer-legal { align-items: baseline; }
    .footer-legal span, .footer-legal a { line-height: 1.4; display: inline; padding: 0; }

    /* ============================================================
       RUHIGES BLAU: kein Leuchten, keine Verläufe
    ============================================================ */
    :root {
      --accent: #2F4D94;
      --accent-hover: #27407C;
      --accent-light: rgba(47, 77, 148, 0.08);
      --accent-mid: rgba(47, 77, 148, 0.15);
      --border-strong: rgba(47, 77, 148, 0.2);
      --accent-a10: rgba(47, 77, 148, 0.1);
      --accent-glow: transparent;
      --accent-glow-2: transparent;
      --gradient-blue: #2F4D94;
      --night: #111E44;
      --dark: #111E44;
    }
    .btn-primary, .btn-primary:hover, .btn-outline:hover, .f-submit { box-shadow: none; }
    .mock-img::before { box-shadow: none; }
    .mock-img { background: var(--accent-flaeche); }
    .p-step.lit .p-bubble { box-shadow: none; }
    .f-group input:focus, .f-group textarea:focus, .f-group select:focus { box-shadow: none; border-color: var(--accent); }
    .faq-item[open] { box-shadow: none; }
    .pkg-list li::before { background-color: var(--blue-100); }
    .pkg.is-highlight .pkg-list li::before { background-color: #fff; }

    /* ============================================================
       FOOTER: mehr Höhe, mittiger Abschluss mit Anfrage
    ============================================================ */
    footer { padding: 96px 0 36px; }
    .footer-cta { text-align: center; max-width: 620px; margin: 0 auto 72px; }
    .footer-cta h2 { color: #fff; font-size: clamp(1.6rem, 2.8vw, 2.25rem); margin: 0; }
    .footer-cta > p { color: rgba(255,255,255,0.7); margin: 16px auto 0; max-width: 46ch; }
    .btn-footer { margin-top: 30px; background: #fff; color: var(--night); box-shadow: none; }
    .btn-footer:hover { background: var(--blue-100); color: var(--night); }
    .footer-contact { margin-top: 26px; font-size: var(--fs-small); color: rgba(255,255,255,0.4); display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 12px; }
    .footer-contact a { color: rgba(255,255,255,0.65); }
    .footer-contact a:hover { color: #fff; }
    .footer-top { margin-bottom: 26px; padding-top: 32px; padding-bottom: 0; border-bottom: 0; border-top: 1px solid rgba(255,255,255,0.08); }
    .footer-legal { margin-top: 0; justify-content: flex-start; }
    @media (max-width: 860px) { footer { padding-top: 64px; } .footer-cta { margin-bottom: 48px; } .footer-legal { justify-content: center; } }

    /* Footer: alles mittig, mehr Abstand */
    footer { padding: 112px 0 44px; }
    .footer-cta { margin-bottom: 64px; }
    .footer-cta > p { margin-top: 18px; }
    .btn-footer { margin-top: 34px; }
    .footer-contact { margin-top: 34px; }
    .footer-top {
      flex-direction: column; align-items: center; justify-content: center; gap: 26px;
      padding-top: 56px; margin-bottom: 40px; border-top: 1px solid rgba(255,255,255,0.08);
    }
    .footer-logo img { height: 30px; }
    .footer-links { justify-content: center; gap: 8px 32px; }
    .footer-links a { font-size: 1rem; color: rgba(255,255,255,0.62); }
    .footer-legal { justify-content: center; gap: 8px 24px; }
    @media (max-width: 860px) {
      footer { padding: 72px 0 36px; }
      .footer-cta { margin-bottom: 48px; }
      .footer-top { padding-top: 40px; margin-bottom: 28px; gap: 20px; }
      .footer-links { gap: 6px 22px; }
    }
    /* Überschrift im Footer war durch eine Maximalbreite nach links gerückt */
    .footer-cta h2 { max-width: none; margin-left: auto; margin-right: auto; text-align: center; }
    .footer-cta > p { max-width: 46ch; margin-left: auto; margin-right: auto; text-align: center; }

    /* ============================================================
       IMPRESSUM UND DATENSCHUTZ: lesbar, mit Luft
    ============================================================ */
    .legal { max-width: 72ch; }
    .legal h1 { margin-bottom: 8px; }
    .legal h2 { font-size: 1.25rem; margin: 48px 0 14px; }
    .legal h3 { font-size: 1.05rem; margin: 28px 0 10px; }
    .legal p { margin-bottom: 18px; line-height: 1.7; }
    .legal ul { margin: 0 0 18px 20px; list-style: disc; }
    .legal li { margin-bottom: 8px; line-height: 1.65; color: var(--text-muted); }
    .legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
    .legal strong { color: var(--text); font-weight: 600; }
    .legal p[style] { margin-top: 48px !important; color: var(--text-muted) !important; font-size: var(--fs-small) !important; }
    .page-head:has(> .container:empty) { padding-top: 120px; }
    .page-head:has(> .container:empty) + section { padding-top: 0; padding-bottom: 96px; }
    @media (max-width: 860px) {
      .legal h2 { margin-top: 36px; }
      .page-head:has(> .container:empty) { padding-top: 96px; }
    }

    /* ============================================================
       ENTWURF-FENSTER
    ============================================================ */
    .shot-link { display: block; cursor: pointer; }
    .pcard, .shot-link { cursor: pointer; }
    body.viewer-offen { overflow: hidden; }
    .viewer { position: fixed; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center; padding: 24px; }
    .viewer[hidden] { display: none; }
    .viewer-backdrop { position: absolute; inset: 0; background: rgba(17, 30, 68, 0.72); }
    .viewer-panel {
      position: relative; width: 100%; max-width: 1280px; height: 100%; max-height: 900px;
      background: #fff; border-radius: var(--r-lg); overflow: hidden;
      display: flex; flex-direction: column;
    }
    .viewer-head {
      display: flex; align-items: center; gap: 18px; padding: 14px 18px 14px 24px;
      border-bottom: 1px solid var(--border); flex-shrink: 0;
    }
    .viewer-title { font-family: var(--font-d); font-weight: 700; color: var(--text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .viewer-toggle { display: inline-flex; background: var(--blue-50); border: 1px solid var(--blue-200); border-radius: 100px; padding: 3px; }
    .viewer-toggle button {
      font-family: var(--font-d); font-weight: 600; font-size: var(--fs-small); color: var(--text-muted);
      padding: 7px 16px; border-radius: 100px; transition: background 0.15s, color 0.15s;
    }
    .viewer-toggle button.is-active { background: var(--accent); color: #fff; }
    .viewer-newtab { font-size: var(--fs-small); color: var(--text-muted); white-space: nowrap; }
    .viewer-newtab:hover { color: var(--accent); }
    .viewer-close {
      width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
      color: var(--text); background: var(--blue-50); flex-shrink: 0;
    }
    .viewer-close:hover { background: var(--blue-100); }
    .viewer-close svg { width: 18px; height: 18px; }
    .viewer-stage { flex: 1; min-height: 0; background: var(--blue-50); padding: 24px; display: flex; justify-content: center; }
    .viewer-frame { display: flex; flex-direction: column; background: #fff; overflow: hidden; height: 100%; position: relative; }
    .viewer-frame.is-desktop { width: 100%; border: 1px solid var(--blue-200); border-radius: 14px; }
    .viewer-bar { display: flex; align-items: center; gap: 6px; padding: 9px 14px; background: var(--bg-tint); border-bottom: 1px solid var(--border); flex-shrink: 0; }
    .viewer-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--blue-200); }
    .viewer-url { margin-left: 10px; font-size: var(--fs-small); color: var(--text-muted); }
    .viewer-body { flex: 1; min-height: 0; position: relative; }
    .viewer-body iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
    .viewer-hinweis { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--text-muted); font-size: var(--fs-small); background: #fff; }
    .viewer-frame.is-loaded .viewer-hinweis { display: none; }
    /* Mobilansicht: ein Telefonrahmen in Nachtblau */
    .viewer-frame.is-mobil { width: 390px; max-width: 100%; border: 10px solid var(--night); border-radius: 40px; background: var(--night); }
    .viewer-frame.is-mobil .viewer-bar { display: none; }
    .viewer-frame.is-mobil .viewer-body { border-radius: 30px; overflow: hidden; background: #fff; }
    @media (max-width: 760px) {
      .viewer { padding: 0; }
      .viewer-panel { max-height: none; border-radius: 0; }
      .viewer-head { padding: 12px 12px 12px 18px; gap: 12px; }
      .viewer-toggle, .viewer-newtab { display: none; }
      .viewer-stage { padding: 0; }
      .viewer-frame.is-desktop, .viewer-frame.is-mobil { width: 100%; border: 0; border-radius: 0; background: #fff; }
      .viewer-frame .viewer-bar { display: none; }
      .viewer-frame.is-mobil .viewer-body { border-radius: 0; }
    }

    /* ============================================================
       EINSTIEG: MODELL IN BEWEGUNG (DESKTOP)
       Das 3D-Modell schwebt langsam und neigt sich leicht zur
       Mausposition. Auf dem Smartphone und bei reduzierter Bewegung
       steht es still.
    ============================================================ */
    @keyframes modellSchweben {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-9px); }
    }
    @media (min-width: 861px) {
      .js .hero-visual {
        animation: modellSchweben 7s ease-in-out infinite !important;
        will-change: transform;
      }
      .js .browser-mockup,
      .js .browser-mockup:hover {
        transform: rotateY(calc(-8deg + var(--mx, 0) * 5deg))
                   rotateX(calc(4deg - var(--my, 0) * 4deg));
        transition: transform 0.7s var(--ease);
      }
      .js .hero-phone {
        transform: translate(calc(var(--mx, 0) * -7px), calc(var(--my, 0) * -5px));
        transition: transform 0.7s var(--ease);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-visual { animation: none !important; }
      .browser-mockup, .browser-mockup:hover { transform: rotateY(-8deg) rotateX(4deg) !important; }
      .hero-phone { transform: none !important; }
    }

    /* ============================================================
       VORHER / NACHHER: ursprüngliche zwei Kästen, neue Texte,
       größere Kastenüberschriften, Zeilen beider Seiten auf gleicher Höhe
    ============================================================ */
    .cmp-section { background: #fff; }
    .cmp-section .section-header p strong { color: var(--text); font-weight: 600; }

    .cmp-head { font-size: 1.5rem; letter-spacing: 0.03em; line-height: 1.1; margin-bottom: 4px; }
    .cmp-sub { margin: 0 0 6px; font-size: var(--fs-small); color: var(--text-muted); }
    .cmp-col { padding: 30px 32px 14px; }
    .cmp-item { padding: 18px 0; }
    .cmp-item strong { font-size: 1.0625rem; }

    .cmp-cta { margin-top: 32px; text-align: center; }
    .cmp-cta .btn { white-space: normal; text-align: center; line-height: 1.25; }

    @supports (grid-template-rows: subgrid) {
      .cmp { grid-template-rows: auto auto repeat(3, auto); row-gap: 0; column-gap: 24px; }
      .cmp-col { display: grid; grid-template-rows: subgrid; grid-row: 1 / span 5; align-content: start; }
      .cmp-head, .cmp-sub { align-self: end; }
    }
    @media (max-width: 760px) {
      .cmp-head { font-size: 1.25rem; }
      .cmp-col { padding: 24px 22px 10px; }
      @supports (grid-template-rows: subgrid) {
        .cmp { grid-template-rows: none; }
        .cmp-col { display: block; grid-row: auto; }
      }
    }
    @media (max-width: 520px) {
      .cmp-cta .btn { width: 100%; justify-content: center; }
    }

    /* ============================================================
       ÜBER UNS: helle Fläche mit feiner Kontur, Porträt links, Text rechts
    ============================================================ */
    .ueber { padding-top: 24px; }
    .ueber-grid {
      display: grid; grid-template-columns: 320px 1fr; gap: 56px; align-items: center;
      background: var(--blue-50); border: 1px solid var(--blue-200); border-radius: var(--r-xl);
      padding: 44px 48px;
    }
    .ueber-foto { margin: 0; }
    .ueber-foto img {
      display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top;
      border-radius: var(--r-lg); border: 1px solid var(--blue-200); box-shadow: none;
    }
    .ueber-kicker {
      font-family: var(--font-d); font-weight: 600; font-size: var(--fs-small); letter-spacing: 0.06em;
      text-transform: uppercase; color: var(--accent); margin: 0 0 10px;
    }
    .ueber-text h1 { font-size: clamp(1.6rem, 2.6vw, 2.25rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 18px; color: var(--text); }
    .ueber-text p { font-size: 1.0625rem; line-height: 1.65; color: var(--text-muted); }
    .ueber-text p + p { margin-top: 14px; }
    .ueber-name { display: flex; flex-direction: column; gap: 2px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--blue-200); }
    .ueber-name strong { font-family: var(--font-d); font-weight: 700; font-size: 1.0625rem; color: var(--text); }
    .ueber-name span { font-size: var(--fs-small); color: var(--text-muted); }
    .ueber .link-arrow { margin-top: 18px; color: var(--accent); }

    @media (max-width: 1000px) {
      .ueber-grid { grid-template-columns: 280px 1fr; gap: 40px; padding: 36px 36px; }
    }
    @media (max-width: 860px) {
      .ueber { padding-top: 8px; }
      .ueber-grid { grid-template-columns: 1fr; gap: 28px; padding: 26px 22px; border-radius: var(--r-lg); align-items: start; }
      .ueber-foto { max-width: 300px; }
      .ueber-text h1 { font-size: clamp(1.5rem, 6.5vw, 1.85rem); }
      .ueber-text p { font-size: 1.0625rem; }
    }

    /* ============================================================
       ÜBER UNS: Nachtblaue Fläche wie zuvor, Text hell
    ============================================================ */
    .ueber-grid { background: var(--night); border: 0; }
    .ueber-foto img { border: 2px solid rgba(255,255,255,0.14); }
    .ueber-kicker { color: #AFC2F0; }
    .ueber-text h1 { color: #fff; }
    .ueber-text p { color: rgba(255,255,255,0.84); }
    .ueber-name { border-top: 1px solid rgba(255,255,255,0.14); }
    .ueber-name strong { color: #fff; }
    .ueber-name span { color: rgba(255,255,255,0.7); }
    .ueber .link-arrow { color: #fff; }
    .ueber .link-arrow:hover { color: #AFC2F0; }

    /* ============================================================
       ÜBER UNS: kompaktere Fläche, kleineres Porträt, weniger Innenabstand
    ============================================================ */
    .ueber-grid {
      grid-template-columns: 220px 1fr; gap: 40px;
      padding: 30px 34px; max-width: 900px; margin: 0 auto;
    }
    .ueber-foto img { border-radius: var(--r); }
    .ueber-kicker { margin-bottom: 8px; }
    .ueber-text h1 { font-size: clamp(1.4rem, 2vw, 1.75rem); margin-bottom: 12px; }
    .ueber-text p { font-size: 1rem; line-height: 1.6; }
    .ueber-text p + p { margin-top: 10px; }
    .ueber-name { margin-top: 18px; padding-top: 16px; }
    .ueber-name strong { font-size: 1rem; }
    .ueber .link-arrow { margin-top: 14px; }
    @media (max-width: 1000px) {
      .ueber-grid { grid-template-columns: 200px 1fr; gap: 32px; padding: 28px 30px; }
    }
    @media (max-width: 860px) {
      .ueber-grid { grid-template-columns: 1fr; gap: 20px; padding: 22px 20px; }
      .ueber-foto { max-width: 200px; }
      .ueber-text h1 { font-size: clamp(1.35rem, 5.5vw, 1.6rem); }
      .ueber-text p { font-size: 1rem; }
    }

    /* ============================================================
       ÜBER UNS: Größe wie ursprünglich (Porträt 240px, volle Breite), ohne Namenszeile
    ============================================================ */
    .ueber { padding-top: 0; }
    .ueber-grid {
      grid-template-columns: 240px 1fr; gap: 56px; align-items: center;
      padding: 48px 52px; max-width: none; margin: 0; border-radius: var(--r-xl);
    }
    .ueber-foto img { border-radius: var(--r-lg); }
    .ueber-kicker { margin-bottom: 10px; }
    .ueber-text h2 { color: #fff; font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 14px; }
    .ueber-text p { font-size: var(--fs-body); line-height: 1.65; }
    .ueber-text p + p { margin-top: 14px; }
    @media (max-width: 1000px) {
      .ueber-grid { grid-template-columns: 220px 1fr; gap: 40px; padding: 36px 36px; }
    }
    @media (max-width: 860px) {
      .ueber-grid { grid-template-columns: 1fr; gap: 24px; padding: 28px 22px; border-radius: var(--r-lg); align-items: start; }
      .ueber-foto { max-width: 180px; }
      .ueber-text h2 { font-size: clamp(1.35rem, 5.5vw, 1.6rem); }
    }

    /* ÜBER UNS: Textspalte nicht einengen, gekürzter Text soll ruhig laufen */
    .ueber-text { max-width: 68ch; }
    .ueber-text h2 { max-width: 20ch; }
    .ueber-text p + p { margin-top: 16px; }

    /* ============================================================
       ÜBER UNS: ABLAUF "So entsteht Ihre neue Website" (vier Schritte, feine Linie)
    ============================================================ */
    #ablauf-uu .section-header { margin-bottom: 40px; }
    #ablauf-uu .section-header p { margin-top: 10px; }
    .ablauf {
      list-style: none; margin: 0; padding: 0;
      display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 0; row-gap: 0;
    }
    .ablauf-step {
      position: relative; margin: 0;
      padding: 26px 28px 0 0; border-top: 1px solid var(--blue-200);
    }
    .ablauf-step::before {
      content: ""; position: absolute; left: 0; top: -5px;
      width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
    }
    .ablauf-num {
      display: block; font-family: var(--font-d); font-weight: 600;
      font-size: var(--fs-small); letter-spacing: 0.08em; color: var(--accent);
      margin-bottom: 10px; line-height: 1;
    }
    .ablauf-step h3 { font-size: 1.0625rem; line-height: 1.3; margin: 0 0 8px; color: var(--text); }
    .ablauf-step p { font-size: var(--fs-body); line-height: 1.6; color: var(--text-muted); margin: 0; }

    /* Zahlen, Titel und Texte über alle Spalten auf gleicher Höhe */
    @supports (grid-template-rows: subgrid) {
      .ablauf { grid-template-rows: auto auto auto; }
      .ablauf-step { display: grid; grid-template-rows: subgrid; grid-row: span 3; align-content: start; }
      .ablauf-step h3 { align-self: start; }
    }

    @media (max-width: 1000px) {
      .ablauf { grid-template-columns: 1fr 1fr; row-gap: 36px; column-gap: 40px; }
      .ablauf-step { padding-right: 0; }
      @supports (grid-template-rows: subgrid) {
        .ablauf { grid-template-rows: none; }
        .ablauf-step { display: block; grid-row: auto; }
      }
    }
    @media (max-width: 640px) {
      #ablauf-uu .section-header { margin-bottom: 28px; }
      .ablauf { grid-template-columns: 1fr; row-gap: 0; }
      .ablauf-step {
        border-top: 0; border-left: 1px solid var(--blue-200);
        padding: 0 0 28px 24px;
      }
      .ablauf-step:last-child { padding-bottom: 4px; }
      .ablauf-step::before { left: -5px; top: 2px; }
      .ablauf-num { margin-bottom: 6px; }
    }

    /* ABLAUF: Schrittzahlen einen Tick größer */
    .ablauf-num { font-size: 1rem; letter-spacing: 0.06em; margin-bottom: 12px; }

    /* Preise: Hinweiszeile über den Karten, gleiche Textstufe wie die Hinweise darunter */
    .pkg-intro { margin: 0 0 24px; font-size: var(--fs-small); color: var(--text-muted); }
    .pkg-explain .link-arrow { display: inline; }
    .pkg-explain .link-arrow::after { margin-left: 6px; }

    /* LEISTUNGEN: Abschnitte wieder abwechselnd (Preise blau, Ablauf weiß, FAQ blau) */
    #ablauf { background: #fff; }

    /* ABLAUF (Leistungen): vier Schritte, weicheres Aufleuchten, ab Tablet untereinander */
    .p-bubble, .p-sep { transition: background 0.55s ease, border-color 0.55s ease, color 0.55s ease, box-shadow 0.55s ease; }
    #ablauf .section-header p { margin-top: 10px; }
    @media (max-width: 900px) {
      .process-steps { flex-direction: column; gap: 0; }
      .p-sep { display: none; }
      .p-step { flex: none; width: 100%; text-align: left; display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border); }
      .p-step:last-child { border-bottom: none; }
      .p-bubble { margin: 0; flex-shrink: 0; }
      .p-step-body { padding-top: 10px; }
      .p-desc { max-width: none; margin: 4px 0 0; }
    }

    /* ============================================================
       HÄUFIGE FRAGEN (Über uns): kompakte Akkordeonliste mit feinen Linien
    ============================================================ */
    #faq .section-header p { margin-top: 10px; }
    .acc { border-top: 1px solid var(--blue-200); }
    .acc-item { border-bottom: 1px solid var(--blue-200); }
    .acc-h { margin: 0; font-size: inherit; }
    .acc-btn {
      display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 20px;
      padding: 22px 0; margin: 0; background: none; border: 0; border-radius: 6px; cursor: pointer; text-align: left;
      font-family: var(--font-d); font-weight: 600; font-size: 1.25rem; line-height: 1.35; letter-spacing: -0.01em; color: var(--text);
      transition: color 0.2s ease;
    }
    .acc-btn:hover { color: var(--accent); }
    .acc-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
    .acc-chev { flex: 0 0 auto; width: 20px; height: 20px; color: var(--accent); transition: transform 0.2s ease; }
    .acc-btn[aria-expanded="true"] .acc-chev { transform: rotate(180deg); }
    .acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.2s ease; }
    .acc-panel > div { overflow: hidden; min-height: 0; }
    .acc-panel.is-open { grid-template-rows: 1fr; }
    .acc-ans { margin: 0; padding: 0 44px 22px 0; font-size: 1.0625rem; line-height: 1.65; color: var(--text-muted); max-width: 62ch; }
    .faq-layout .acc { max-width: none; }
    @media (prefers-reduced-motion: reduce) { .acc-chev, .acc-panel, .acc-btn { transition: none; } }
    @media (max-width: 600px) {
      .acc-btn { font-size: 1.1875rem; padding: 20px 0; gap: 14px; }
      .acc-ans { font-size: 1.0625rem; padding-right: 0; }
    }

    /* Footer-Aufruf: kleiner Hinweis unter dem Button (Über uns) */
    .footer-hinweis { margin: 14px auto 0; font-size: var(--fs-small); color: rgba(255,255,255,0.55); max-width: 46ch; }
    .footer-hinweis + .footer-contact { margin-top: 22px; }

    /* ============================================================
       EINHEITLICHE DESIGNSPRACHE
       Eine Überschriftenskala, ein Kartenmaß, ein Listenmuster.
       Dieser Block ist die letzte Instanz, er gilt gegen alles davor.
    ============================================================ */

    /* --- Überschriften: genau drei Stufen ------------------------
       H1 Seitentitel, H2 Abschnitt, H3 Karte. Keine Zwischengrößen. */
    .price-card h2,
    .ueber-text h2 { font-size: clamp(1.65rem, 2.8vw, 2.25rem); }
    .pkg h3 { font-size: 1.125rem; }

    /* --- Flächen: ein Maß, ein Radius, eine Rahmenfarbe ---------- */
    .pkg,
    .cmp-col,
    .contact-left,
    .c-form { padding: 32px; border-color: var(--blue-200); }
    .cmp-col { padding-bottom: 14px; }
    .ueber-grid { border-radius: var(--r-lg); }

    /* --- Aufzählungen: ein Häkchen im hellblauen Kreis ----------- */
    .pkg-list li::before,
    .work-notes li::before {
      content: ''; position: absolute; left: 0; top: 0.2em;
      width: 16px; height: 16px; border-radius: 50%; opacity: 1;
      background: var(--blue-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F4D94' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 10px no-repeat;
    }
    .pkg-list li,
    .work-notes li { position: relative; padding-left: 26px; }
    .pkg.is-highlight .pkg-list li::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F4D94' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E");
      background-color: #fff;
    }

    @media (max-width: 600px) {
      .pkg, .cmp-col, .contact-left, .c-form { padding: 24px 20px; }
      .cmp-col { padding-bottom: 10px; }
    }

    /* Ausnahme mit eigener Farbfamilie: der Vorher-Kasten behält seinen
       roten Rahmen, damit Fläche und Kontur zusammenpassen. */
    .cmp-col.cmp-before { border-color: var(--red-200); }

    /* ============================================================
       VORHER / NACHHER: Schrift und Abstände zurück auf die
       ursprüngliche Fassung. Die Texte bleiben wie sie sind.
    ============================================================ */
    .cmp { column-gap: 18px; }
    .cmp-col { padding: 26px 28px 10px; }
    .cmp-head {
      font-size: 0.8125rem; letter-spacing: 0.08em; line-height: 1.3;
      text-transform: uppercase; margin-bottom: 2px;
    }
    .cmp-sub { margin: 0 0 10px; font-size: var(--fs-small); color: var(--text-muted); }
    .cmp-item { padding: 14px 0; min-height: 96px; gap: 14px; }
    .cmp-item strong { font-size: 1rem; margin-bottom: 2px; }
    .cmp-ico { flex: 0 0 26px; height: 26px; margin-top: 1px; }
    .cmp-ico svg { width: 14px; height: 14px; }

    @media (max-width: 760px) {
      .cmp-head { font-size: 0.8125rem; }
      .cmp-col { padding: 20px 20px 6px; }
      .cmp-item { min-height: 0; }
    }

    /* VORHER / NACHHER: Kennzeichnung etwas größer, damit die Seiten
       sofort auseinanderzuhalten sind. */
    .cmp-head { font-size: 1.0625rem; letter-spacing: 0.06em; margin-bottom: 3px; }
    .cmp-sub { margin-bottom: 12px; }
    @media (max-width: 760px) { .cmp-head { font-size: 1rem; } }

/* ============================================================
   PROJEKTE: Kennzeichnung größer, Liste luftiger.
============================================================ */
.project-tag {
  font-size: 1rem;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.work-notes { margin-top: 22px; gap: 14px; }
@media (max-width: 600px) {
  .project-tag { font-size: 0.9375rem; }
}

/* ============================================================
   EINSTIEG: Das Telefon steht in derselben Ebene wie der Browser.
   Vorher lag es flach davor und wirkte dadurch aufgeklebt.
============================================================ */
@media (min-width: 861px) {
  .hero-phone { transform: rotateY(-8deg) rotateX(4deg); }
  .js .hero-phone {
    transform: translate(calc(var(--mx, 0) * -7px), calc(var(--my, 0) * -5px))
               rotateY(calc(-8deg + var(--mx, 0) * 5deg))
               rotateX(calc(4deg - var(--my, 0) * 4deg));
    transition: transform 0.7s var(--ease);
  }
}
@media (min-width: 861px) and (prefers-reduced-motion: reduce) {
  .hero-phone,
  .js .hero-phone { transform: rotateY(-8deg) rotateX(4deg) !important; }
}

/* ============================================================
   FORMULAR AM SMARTPHONE: Eingabefelder mit 16px, sonst zoomt
   iOS Safari beim Antippen in das Feld hinein.
============================================================ */
@media (max-width: 860px) {
  .c-form input[type="text"],
  .c-form input[type="email"],
  .c-form select,
  .c-form textarea { font-size: 16px; }
}

/* ============================================================
   TELEFON-MODELL: neu gebaut in iPhone-Proportionen.
   Es steht weiterhin klein neben dem Browser, der Browser selbst
   bleibt unverändert.
============================================================ */
.hp-nav, .hp-cards { display: none; }

.hero-phone {
  padding: 3px;
  border-radius: 21px;
  border: 0;
  background: linear-gradient(150deg, #39445c 0%, #222b3f 42%, #171d2b 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.3) inset,
    0 16px 34px -12px rgba(17, 30, 68, 0.42),
    0 5px 12px -5px rgba(17, 30, 68, 0.28);
}
/* Seitentasten */
.hero-phone::before,
.hero-phone::after {
  content: '';
  position: absolute;
  width: 1.5px;
  border-radius: 2px;
  background: linear-gradient(180deg, #46526c, #2a3346);
}
.hero-phone::before { right: -1px; top: 28%; height: 13%; }
.hero-phone::after  { left: -1px; top: 22%; height: 8%; }

.hero-phone-screen {
  position: relative;
  aspect-ratio: 390 / 813;
  border-radius: 18px;
  background: #fff;
  padding: 13px 7px 9px;
  gap: 4px;
  overflow: hidden;
}
/* Dynamic Island */
.hero-phone-screen::before {
  content: '';
  position: absolute;
  top: 4px; left: 50%;
  transform: translateX(-50%);
  width: 30%; height: 5px;
  border-radius: 999px;
  background: #0d1220;
}
/* Bedienleiste unten */
.hero-phone-screen::after {
  content: '';
  position: absolute;
  bottom: 3px; left: 50%;
  transform: translateX(-50%);
  width: 32%; height: 2px;
  border-radius: 999px;
  background: var(--blue-200);
}

.hp-bar { height: 4px; border-radius: 2px; }
.hp-bar.dark { width: 80%; }
.hp-bar.mid  { width: 55%; }
.hp-img { flex: 1; min-height: 40px; border-radius: 5px; margin: 3px 0 2px; }
.hp-txt { height: 3px; }
.hp-cta { height: 11px; border-radius: 6px; margin-top: 3px; opacity: 1; }

@media (max-width: 860px) {
  .hero-phone { width: 84px; right: -6px; bottom: -8px; border-radius: 19px; padding: 2.5px; }
  .hero-phone-screen { border-radius: 17px; padding: 11px 6px 8px; }
  .hero-phone-screen::before { height: 4px; top: 3.5px; }
  .hp-img { min-height: 30px; }
  .hp-cta { height: 9px; }
}

/* ============================================================
   ENTWURFS-VORSCHAU, ANSICHT MOBIL: derselbe Telefonrahmen,
   damit Vorschau und Einstieg dieselbe Sprache sprechen.
============================================================ */
.viewer-stage { align-items: center; overflow: hidden; }
.viewer-frame.is-mobil {
  /* Fest 390 mal 844 Punkt, also die Maße eines iPhone. Der Entwurf
     wird dadurch genauso dargestellt wie auf einem echten Gerät.
     Passt der Rahmen nicht ins Fenster, verkleinert ihn das Skript
     als Ganzes. Das Seitenverhältnis bleibt immer erhalten. */
  width: 390px;
  height: 813px;          /* Verhältnis 1 zu 2,085 wie in der Vorlage */
  flex: 0 0 auto;
  transform: scale(var(--phone-skala, 1));
  transform-origin: center center;
  box-sizing: border-box;
  border: 7px solid #15192a;
  border-radius: 42px;
  background: #15192a;
  box-shadow:
    0 0 0 1.5px #8d93a4,
    0 24px 60px -22px rgba(17, 30, 68, 0.55);
}
.viewer-frame.is-mobil .viewer-body {
  border-radius: 35px;
  overflow: hidden;
  background: #fff;
  padding: 26px 0 16px;
}
.viewer-frame.is-mobil .viewer-body::before {
  content: '';
  position: absolute;
  top: 9px; left: 50%;
  transform: translateX(-50%);
  width: 27%; height: 21px;
  border-radius: 999px;
  background: #0d1220;
  z-index: 2;
  pointer-events: none;
}
.viewer-frame.is-mobil .viewer-body::after {
  content: '';
  position: absolute;
  bottom: 6px; left: 50%;
  transform: translateX(-50%);
  width: 32%; height: 4px;
  border-radius: 999px;
  background: var(--blue-200);
  z-index: 2;
  pointer-events: none;
}
@media (max-width: 760px) {
  /* Auf dem Telefon selbst füllt der Entwurf den Bildschirm.
     Kein Rahmen, keine Verkleinerung. */
  .viewer-frame.is-mobil {
    width: 100%; height: 100%;
    transform: none;
    border: 0; border-radius: 0; background: #fff;
    box-shadow: none;
  }
  .viewer-stage { align-items: stretch; }
  .viewer-frame.is-mobil .viewer-body { border-radius: 0; padding: 0; }
  .viewer-frame.is-mobil .viewer-body::before,
  .viewer-frame.is-mobil .viewer-body::after { display: none; }
}

/* Entwurfsvorschau: "In neuem Tab öffnen" ist auf Tablets ein Tippziel
   und braucht deshalb eine ausreichend hohe Trefferfläche. */
.viewer-newtab { display: inline-flex; align-items: center; min-height: 44px; }

/* ============================================================
   ABSTÄNDE AUF SCHMALEN BILDSCHIRMEN
   Am Rechner liegen viele Blöcke nebeneinander und trennen sich
   dadurch von selbst. Sobald alles untereinander steht, fehlt
   diese Trennung und muss ersetzt werden.
============================================================ */

/* Vorher und Nachher stoßen sonst direkt aneinander. */
@media (max-width: 760px) {
  .cmp { row-gap: 20px; }
}

/* Projekte: untereinander braucht jedes Projekt eine eigene
   Abgrenzung, sonst läuft alles in einen Fluss. */
@media (max-width: 860px) {
  .work-row + .work-row {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid var(--border);
  }
}

/* ============================================================
   BILDER SANFT EINBLENDEN
   Ein Bild, das noch lädt, ist eine leere Fläche. Statt dass es
   dann hart erscheint, liegt eine ruhige Platzhalterfläche darunter
   und das Bild blendet von unten ein.
============================================================ */
.shot,
.pcard-img,
.work-shot .shot { background: var(--blue-50); }
/* Die Platzhalterfläche liegt hinter dem Bild, nicht auf ihm.
   Sonst verschwindet sie mit dem Bild, solange es noch ausgeblendet ist. */
.ueber-foto { background: rgba(255, 255, 255, 0.10); border-radius: var(--r-lg); }
.contact-person picture { display: block; border-radius: 50%; background: var(--blue-100); }
.contact-person picture img { display: block; }

.bild-blende {
  opacity: 0;
  transform: translateY(10px);
}
.bild-blende.bild-da {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .bild-blende { transform: none; }
  .bild-blende.bild-da { transition: opacity 0.25s linear; }
}

/* ============================================================
   DUNKLE FARBVARIANTE
   Wird ausschließlich über data-theme="dark" am <html>-Element
   aktiviert. Ohne dieses Attribut gilt unverändert die bisherige
   Farbgestaltung. Es ändern sich nur Farben, keine Maße, keine
   Abstände, keine Schriftgrößen.
============================================================ */
:root[data-theme="dark"] {
  /* Flächen */
  --bg:            #0B0B0D;
  --bg-subtle:     #111114;
  --bg-tint:       #111114;
  --blue-50:       #111114;
  --blue-100:      #1C1C22;
  --blue-200:      #303036;

  /* Schrift */
  --text:          #F5F5F2;
  --text-strong:   #F5F5F2;
  --text-muted:    #B5B5BE;
  --text-subtle:   #B5B5BE;

  /* Akzent */
  --accent:        #7B97CE;
  --accent-hover:  #3B5CAE;
  --accent-light:  rgba(123, 151, 206, 0.10);
  --accent-mid:    rgba(123, 151, 206, 0.18);
  --accent-soft:   #16161A;
  --accent-dark:   #0B0B0D;
  --accent-a025:   rgba(123, 151, 206, 0.04);
  --accent-a10:    rgba(123, 151, 206, 0.10);
  --accent-a18:    rgba(123, 151, 206, 0.18);
  --accent-a38:    rgba(123, 151, 206, 0.38);
  --accent-flaeche: #1C1C22;
  --gradient-blue: #7B97CE;
  --accent-glow:   transparent;
  --accent-glow-2: transparent;

  /* Rahmen */
  --border:        #303036;
  --border-soft:   #26262B;
  --border-strong: rgba(123, 151, 206, 0.35);

  /* Abgesetzte dunkle Flächen (Fußzeile, Über-uns-Tafel) */
  --dark:          #161619;
  --dark-soft:     #161619;
  --night:         #161619;
  --night-2:       #1C1C22;
  --glass:         rgba(11, 11, 13, 0.86);

  /* Keine Verläufe, keine Leuchtflächen */
  --tint-1:    transparent;
  --tint-2:    transparent;
  --tint-3:    transparent;
  --tint-dots: transparent;

  /* Vorher-Spalte: gedämpftes Rot, damit die Bedeutung bleibt */
  --red-50:  #1A1315;
  --red-200: #3C2B2F;
  --red-ink: #E2A9A2;

  --shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.5);
  --shadow:    0 6px 28px rgba(0, 0, 0, 0.55);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 60px -12px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 40px 100px -20px rgba(0, 0, 0, 0.65);

  background: #0B0B0D;
  color-scheme: dark;
}

/* ---- Flächen, die im hellen Theme fest auf Weiß stehen ---- */
[data-theme="dark"] #mobile-nav,
[data-theme="dark"] .cmp-section,
[data-theme="dark"] #ablauf { background: var(--bg); }

[data-theme="dark"] .pkg,
[data-theme="dark"] .shot,
[data-theme="dark"] .project-card,
[data-theme="dark"] .preview-viewport,
[data-theme="dark"] .preview-site-img,
[data-theme="dark"] .price-note,
[data-theme="dark"] .way,
[data-theme="dark"] .c-icon,
[data-theme="dark"] .way-alt .svc-icon { background: #161619; }

[data-theme="dark"] .preview-chrome { background: rgba(22, 22, 25, 0.94); }
[data-theme="dark"] .chrome-url { color: var(--text-muted); }

/* ---- Schaltflächen: kräftigeres Blau als bei Links ---- */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-footer,
[data-theme="dark"] .btn-light {
  background: #2F4D94;
  color: #FFFFFF;
  border-color: #2F4D94;
}
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-footer:hover,
[data-theme="dark"] .btn-light:hover {
  background: #3B5CAE;
  border-color: #3B5CAE;
  color: #FFFFFF;
}
[data-theme="dark"] .btn-outline { color: var(--accent); border-color: var(--accent); }
[data-theme="dark"] .btn-outline:hover { background: #2F4D94; border-color: #2F4D94; color: #FFFFFF; }
[data-theme="dark"] .skip-link { background: #2F4D94; color: #FFFFFF; }
[data-theme="dark"] ::selection { background: #2F4D94; color: #FFFFFF; }
/* Der Link in der Einwilligung wird beim Überfahren heller, nicht dunkler. */
[data-theme="dark"] .f-check label a:hover { color: #93AADB; }

/* ---- Hervorgehobene Paketkarte: Rahmen statt Akzentfläche ---- */
[data-theme="dark"] .pkg.is-highlight {
  background: #161619;
  border: 1.5px solid var(--accent);
}
[data-theme="dark"] .pkg.is-highlight h3,
[data-theme="dark"] .pkg.is-highlight .pkg-price,
[data-theme="dark"] .pkg.is-highlight .pkg-list { color: var(--text); }
[data-theme="dark"] .pkg.is-highlight .pkg-price span,
[data-theme="dark"] .pkg.is-highlight .pkg-lead { color: var(--text-muted); }
[data-theme="dark"] .pkg.is-highlight .pkg-list { border-top-color: var(--border); }

/* ---- Haken- und Pfeilsymbole in der Akzentfarbe ---- */
[data-theme="dark"] .pkg-list li::before,
[data-theme="dark"] .work-notes li::before,
[data-theme="dark"] .svc-list li::before,
[data-theme="dark"] .pkg.is-highlight .pkg-list li::before {
  background: #1C1C22 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B97CE' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 10px no-repeat;
}
[data-theme="dark"] .cmp-after .cmp-ico { color: #FFFFFF; }

/* ---- Formular ---- */
[data-theme="dark"] .f-group input,
[data-theme="dark"] .f-group textarea,
[data-theme="dark"] .f-group select { background-color: #161619; color: var(--text); }
[data-theme="dark"] .f-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B5B5BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
[data-theme="dark"] .f-group select.is-preselected { background-color: #161619; }
[data-theme="dark"] .f-group input::placeholder,
[data-theme="dark"] .f-group textarea::placeholder { color: rgba(181, 181, 190, 0.55); }

/* ---- Modell im Einstieg ---- */
[data-theme="dark"] .browser-mockup { background: #161619; }
[data-theme="dark"] .browser-url { background: #0B0B0D; color: var(--text-muted); }
[data-theme="dark"] .mock-img::after { background: #161619; }
[data-theme="dark"] .hero-phone { background: #303036; }
[data-theme="dark"] .hero-phone-screen { background: #0B0B0D; }
[data-theme="dark"] .hero-phone-screen::before { background: #000; }

/* ---- Entwurfs-Vorschau ---- */
[data-theme="dark"] .viewer-panel { background: #0B0B0D; }
[data-theme="dark"] .viewer-frame,
[data-theme="dark"] .viewer-frame.is-desktop { background: #161619; }
[data-theme="dark"] .viewer-hinweis { background: #161619; color: var(--text-muted); }
[data-theme="dark"] .viewer-toggle button.is-active { color: #FFFFFF; }
[data-theme="dark"] .shot-badge { color: #FFFFFF; }
[data-theme="dark"] .faq-item[open] .faq-ico { color: #FFFFFF; }

/* ---- Kicker über der Über-uns-Tafel ---- */
[data-theme="dark"] .ueber-kicker,
[data-theme="dark"] .founder-kicker { color: var(--accent); }

/* Wortmarke in der Kopfzeile: im dunklen Theme hell ausgeben,
   die Bilddatei selbst bleibt unverändert. */
[data-theme="dark"] .nav-logo img { filter: brightness(0) invert(0.96); }

/* Mobiles Menü: der Button steht auf der Akzentfläche, deshalb
   dunkle Schrift. Der Selektor braucht die ID, um die
   Grundeinstellung des Menüs zu überschreiben. */
[data-theme="dark"] #mobile-nav .btn-primary { color: #FFFFFF; }

/* ============================================================
   AUTOMATISCHE UMSCHALTUNG
   Dieselben Regeln wie oben, nur an die Geräteeinstellung
   gekoppelt. Steht am <html>-Element data-theme="light", bleibt
   die Seite trotzdem hell. Mit data-theme="dark" bleibt sie
   trotzdem dunkel, dafür sorgt der Block darüber.
   Dieser Abschnitt ist eine Spiegelung und wird zusammen mit dem
   oberen Block gepflegt.
============================================================ */
@media (prefers-color-scheme: dark) {

  :root:not([data-theme="light"]) {
    /* Flächen */
    --bg:            #0B0B0D;
    --bg-subtle:     #111114;
    --bg-tint:       #111114;
    --blue-50:       #111114;
    --blue-100:      #1C1C22;
    --blue-200:      #303036;

    /* Schrift */
    --text:          #F5F5F2;
    --text-strong:   #F5F5F2;
    --text-muted:    #B5B5BE;
    --text-subtle:   #B5B5BE;

    /* Akzent */
    --accent:        #7B97CE;
    --accent-hover:  #3B5CAE;
    --accent-light:  rgba(123, 151, 206, 0.10);
    --accent-mid:    rgba(123, 151, 206, 0.18);
    --accent-soft:   #16161A;
    --accent-dark:   #0B0B0D;
    --accent-a025:   rgba(123, 151, 206, 0.04);
    --accent-a10:    rgba(123, 151, 206, 0.10);
    --accent-a18:    rgba(123, 151, 206, 0.18);
    --accent-a38:    rgba(123, 151, 206, 0.38);
    --accent-flaeche: #1C1C22;
    --gradient-blue: #7B97CE;
    --accent-glow:   transparent;
    --accent-glow-2: transparent;

    /* Rahmen */
    --border:        #303036;
    --border-soft:   #26262B;
    --border-strong: rgba(123, 151, 206, 0.35);

    /* Abgesetzte dunkle Flächen (Fußzeile, Über-uns-Tafel) */
    --dark:          #161619;
    --dark-soft:     #161619;
    --night:         #161619;
    --night-2:       #1C1C22;
    --glass:         rgba(11, 11, 13, 0.86);

    /* Keine Verläufe, keine Leuchtflächen */
    --tint-1:    transparent;
    --tint-2:    transparent;
    --tint-3:    transparent;
    --tint-dots: transparent;

    /* Vorher-Spalte: gedämpftes Rot, damit die Bedeutung bleibt */
    --red-50:  #1A1315;
    --red-200: #3C2B2F;
    --red-ink: #E2A9A2;

    --shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.5);
    --shadow:    0 6px 28px rgba(0, 0, 0, 0.55);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 24px 60px -12px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 40px 100px -20px rgba(0, 0, 0, 0.65);

    background: #0B0B0D;
    color-scheme: dark;
  }

  /* ---- Flächen, die im hellen Theme fest auf Weiß stehen ---- */
  :root:not([data-theme="light"]) #mobile-nav,
  :root:not([data-theme="light"]) .cmp-section,
  :root:not([data-theme="light"]) #ablauf { background: var(--bg); }

  :root:not([data-theme="light"]) .pkg,
  :root:not([data-theme="light"]) .shot,
  :root:not([data-theme="light"]) .project-card,
  :root:not([data-theme="light"]) .preview-viewport,
  :root:not([data-theme="light"]) .preview-site-img,
  :root:not([data-theme="light"]) .price-note,
  :root:not([data-theme="light"]) .way,
  :root:not([data-theme="light"]) .c-icon,
  :root:not([data-theme="light"]) .way-alt .svc-icon { background: #161619; }

  :root:not([data-theme="light"]) .preview-chrome { background: rgba(22, 22, 25, 0.94); }
  :root:not([data-theme="light"]) .chrome-url { color: var(--text-muted); }

  /* ---- Schaltflächen: kräftigeres Blau als bei Links ---- */
  :root:not([data-theme="light"]) .btn-primary,
  :root:not([data-theme="light"]) .btn-footer,
  :root:not([data-theme="light"]) .btn-light {
    background: #2F4D94;
    color: #FFFFFF;
    border-color: #2F4D94;
  }
  :root:not([data-theme="light"]) .btn-primary:hover,
  :root:not([data-theme="light"]) .btn-footer:hover,
  :root:not([data-theme="light"]) .btn-light:hover {
    background: #3B5CAE;
    border-color: #3B5CAE;
    color: #FFFFFF;
  }
  :root:not([data-theme="light"]) .btn-outline { color: var(--accent); border-color: var(--accent); }
  :root:not([data-theme="light"]) .btn-outline:hover { background: #2F4D94; border-color: #2F4D94; color: #FFFFFF; }
  :root:not([data-theme="light"]) .skip-link { background: #2F4D94; color: #FFFFFF; }
  :root:not([data-theme="light"]) ::selection { background: #2F4D94; color: #FFFFFF; }
  /* Der Link in der Einwilligung wird beim Überfahren heller, nicht dunkler. */
  :root:not([data-theme="light"]) .f-check label a:hover { color: #93AADB; }

  /* ---- Hervorgehobene Paketkarte: Rahmen statt Akzentfläche ---- */
  :root:not([data-theme="light"]) .pkg.is-highlight {
    background: #161619;
    border: 1.5px solid var(--accent);
  }
  :root:not([data-theme="light"]) .pkg.is-highlight h3,
  :root:not([data-theme="light"]) .pkg.is-highlight .pkg-price,
  :root:not([data-theme="light"]) .pkg.is-highlight .pkg-list { color: var(--text); }
  :root:not([data-theme="light"]) .pkg.is-highlight .pkg-price span,
  :root:not([data-theme="light"]) .pkg.is-highlight .pkg-lead { color: var(--text-muted); }
  :root:not([data-theme="light"]) .pkg.is-highlight .pkg-list { border-top-color: var(--border); }

  /* ---- Haken- und Pfeilsymbole in der Akzentfarbe ---- */
  :root:not([data-theme="light"]) .pkg-list li::before,
  :root:not([data-theme="light"]) .work-notes li::before,
  :root:not([data-theme="light"]) .svc-list li::before,
  :root:not([data-theme="light"]) .pkg.is-highlight .pkg-list li::before {
    background: #1C1C22 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B97CE' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 10px no-repeat;
  }
  :root:not([data-theme="light"]) .cmp-after .cmp-ico { color: #FFFFFF; }

  /* ---- Formular ---- */
  :root:not([data-theme="light"]) .f-group input,
  :root:not([data-theme="light"]) .f-group textarea,
  :root:not([data-theme="light"]) .f-group select { background-color: #161619; color: var(--text); }
  :root:not([data-theme="light"]) .f-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B5B5BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
  :root:not([data-theme="light"]) .f-group select.is-preselected { background-color: #161619; }
  :root:not([data-theme="light"]) .f-group input::placeholder,
  :root:not([data-theme="light"]) .f-group textarea::placeholder { color: rgba(181, 181, 190, 0.55); }

  /* ---- Modell im Einstieg ---- */
  :root:not([data-theme="light"]) .browser-mockup { background: #161619; }
  :root:not([data-theme="light"]) .browser-url { background: #0B0B0D; color: var(--text-muted); }
  :root:not([data-theme="light"]) .mock-img::after { background: #161619; }
  :root:not([data-theme="light"]) .hero-phone { background: #303036; }
  :root:not([data-theme="light"]) .hero-phone-screen { background: #0B0B0D; }
  :root:not([data-theme="light"]) .hero-phone-screen::before { background: #000; }

  /* ---- Entwurfs-Vorschau ---- */
  :root:not([data-theme="light"]) .viewer-panel { background: #0B0B0D; }
  :root:not([data-theme="light"]) .viewer-frame,
  :root:not([data-theme="light"]) .viewer-frame.is-desktop { background: #161619; }
  :root:not([data-theme="light"]) .viewer-hinweis { background: #161619; color: var(--text-muted); }
  :root:not([data-theme="light"]) .viewer-toggle button.is-active { color: #FFFFFF; }
  :root:not([data-theme="light"]) .shot-badge { color: #FFFFFF; }
  :root:not([data-theme="light"]) .faq-item[open] .faq-ico { color: #FFFFFF; }

  /* ---- Kicker über der Über-uns-Tafel ---- */
  :root:not([data-theme="light"]) .ueber-kicker,
  :root:not([data-theme="light"]) .founder-kicker { color: var(--accent); }

  /* Wortmarke in der Kopfzeile: im dunklen Theme hell ausgeben,
     die Bilddatei selbst bleibt unverändert. */
  :root:not([data-theme="light"]) .nav-logo img { filter: brightness(0) invert(0.96); }

  /* Mobiles Menü: der Button steht auf der Akzentfläche, deshalb
     dunkle Schrift. Der Selektor braucht die ID, um die
     Grundeinstellung des Menüs zu überschreiben. */
  :root:not([data-theme="light"]) #mobile-nav .btn-primary { color: #FFFFFF; }
}