/* =========================
       1) Design Tokens (Neon)
       ========================= */
    :root {
      --bg: #0ff0ff;           /* Neon-Cyan Hintergrund */
      --paper: #63ffe1;        /* Mint / helle Flächen */
      --ink: #000000;          /* Textfarbe in Neon-Variante (schwarz für max. Kontrast) */
      --ink-inv: #ffffff;      /* inverse Textfarbe */
      --accent-1: #ff008c;     /* Neon-Magenta */
      --accent-2: #00ff66;     /* Neon-Grün */
      --accent-3: #f9ff00;     /* Neon-Gelb */
      --border: #ff008c;          /* Brutalistische, harte Rahmen */
      --shadow: 6px 6px 0 var(--border);
      --radius: 2px;           /* fast eckig */
      --gap: 20px;
      --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
      --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    }

    /* =========================
       2) Global Reset + Layout
       ========================= */
    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font-family: var(--font-sans);
      line-height: 1.35;
    }
    a { color: var(--ink); text-decoration: none; }
    img, svg { max-width: 100%; height: auto; display: block; }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 28px 20px 80px;
    }

    /* =========================
       3) Header + Theme Toggle
       ========================= */
    header {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: var(--gap);
      margin-bottom: 28px;
    }
    .brand {
      display: inline-flex;
      gap: 12px;
      align-items: center;
      font-weight: 800;
      letter-spacing: 0.5px;
      padding: 12px 14px;
      background: var(--paper);
      border: 3px solid var(--border);
      box-shadow: var(--shadow);
      text-transform: uppercase;
      color: var(--accent-1);
    }

    .toggle {
      display: inline-flex;
      border: 3px solid var(--border);
      background: var(--paper);
      box-shadow: var(--shadow);
      border-radius: var(--radius);
      overflow: hidden;
    }
    .toggle button {
      appearance: none;
      background: transparent;
      border: 0;
      padding: 12px 14px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      cursor: pointer;
      border-right: 3px solid var(--border);
    }
    .toggle button:last-child { border-right: 0; }
    .toggle button[aria-pressed="true"] {
      background: var(--accent-3);
      outline: 3px solid var(--border);
      /*color: var(--ink-inv);*/
      color: var(--accent-1);
    }

    /* =========================
       4) Sections
       ========================= */
    section {
      border: 3px solid var(--border);
      background: var(--paper);
      padding: 28px;
      margin-bottom: 24px;
      box-shadow: var(--shadow);
      border-radius: var(--radius);
    }

    .hero {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: var(--gap);
      align-items: center;
    }

    h1 {
      font-size: clamp(28px, 5vw, 60px);
      line-height: 1.05;
      margin: 0 0 16px 0;
      font-weight: 1000;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    .subline {
      display: inline-flex;
      gap: 12px;
      font-family: var(--font-mono);
      padding: 8px 12px;
      border: 3px solid var(--border);
      background: #fff;
    }
    .cta-row {
      display: flex;
      gap: 12px;
      margin-top: 16px;
      flex-wrap: wrap;
    }
    .btn {
      display: inline-block;
      background: var(--accent-2);
      color: var(--ink);
      border: 3px solid var(--border);
      padding: 12px 16px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      box-shadow: var(--shadow);
      border-radius: var(--radius);
    }
    .btn.secondary { background: var(--accent-1); color: var(--ink-inv); }

    .mockup {
      aspect-ratio: 16/10;
      background: url(img/neon.png);
      background-size: contain;
      /*background:
        linear-gradient(0deg, var(--accent-1) 0 20%, transparent 20% 100%),
        linear-gradient(90deg, var(--accent-2) 0 20%, var(--accent-3) 20% 40%, #111 40% 60%, var(--accent-2) 60% 80%, var(--accent-1) 80% 100%);
      border: 3px solid var(--border);
      box-shadow: var(--shadow);
      border-radius: var(--radius);*/
    }

    .services-grid, .portfolio-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--gap);
    }
    .card {
      border: 3px solid var(--border);
      background: var(--accent-3);
      padding: 20px;
      box-shadow: var(--shadow);
      border-radius: var(--radius);
    }
    .card h3 {
      margin: 0 0 10px 0;
      font-size: 20px;
      text-transform: uppercase;
    }
    .card ul { margin: 0; padding-left: 18px; }
    .card li { margin: 6px 0; }

    .portfolio-item {
      background: repeating-linear-gradient(
        45deg,
        #ffffff, #ffffff 10px,
        #eaeaea 10px, #eaeaea 20px
      );
      border: 3px solid var(--border);
      height: 200px;
      box-shadow: var(--shadow);
      border-radius: var(--radius);
      display: grid;
      place-items: end;
      padding-right: 4px;
      color: var(--ink-inv);
      font-weight: 900;
      text-transform: uppercase;
      background-size: cover;
      background-position: center center;
    }

    .mademoiselle {
      background-image: url(img/design-mademoiselle.jpg);

    }

    .holz {
      background-image: url(img/design-holz.jpg);
    }

    .wunschwetter {
      background-image: url(img/design-wunschwetter.jpg);
    }

    .chi {
      background-image: url(img/design-chi.jpg);
    }

    .mum {
      background-image: url(img/design-mum.jpg);
    }

    .medtrack {
      background-image: url(img/design-medtrack.jpg);
    }

    .process {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--gap);
      counter-reset: step;
    }
    .step {
      border: 3px dashed var(--border);
      background: var(--accent-3);
      padding: 18px;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      position: relative;
      margin: 10px;
    }
    .step-title {
      position: absolute;
      top: -14px;
      left: -14px;
      background: var(--accent-2);
      border: 3px solid var(--border);
      width: auto;
      padding: 0 4px 0 4px; 
      height: 36px;
      display: grid; place-items: center;
      font-weight: 1000;
      box-shadow: var(--shadow);
      border-radius: var(--radius);
      color: var(--ink);
    }

    .cta-big {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: var(--gap);
      align-items: center;
      background: var(--accent-2);
    }
    .cta-big h2 { margin: 0; text-transform: uppercase; }

    footer {
      text-transform: uppercase;
      /*border: 3px solid var(--border);
      background: var(--paper);
      box-shadow: var(--shadow);*/
      padding: 18px;
      text-align: center;
      font-weight: 800;
      border-radius: var(--radius);
    }

    /* =========================
       5) Schwarz-Weiß Theme
       ========================= */
    body.theme-bw {
      --bg: #ffffff;     /* Weißer Hintergrund */
      --paper: #f2f2f2;  /* leichtes Grau für Flächen */
      --ink: #000000;    /* Schwarzer Text */
      --ink-inv: #fff;/* weißer Text in S/W */
      --accent-1: #ff008c;
      --accent-2: #ffffff;
      --accent-3: #fff;
      --border: #000000;
      --shadow: 6px 6px 0 #000000;
    }
    /* Buttons in S/W klar lesbar */
    body.theme-bw .btn {
      background: #ffffff;
      color: #000000;
    }
    body.theme-bw .btn.secondary {
      background: #ffffff;
      color: #000000;
      border: 3px solid #000000;
    }

    /* =========================
       6) Responsive
       ========================= */
    @media (max-width: 980px) {
      .hero { grid-template-columns: 1fr; }
      .services-grid, .portfolio-grid { grid-template-columns: 1fr 1fr; }
      .process { grid-template-columns: 1fr 1fr; }
      .cta-big { grid-template-columns: 1fr; }
    }
    @media (max-width: 600px) {
      .services-grid, .portfolio-grid { grid-template-columns: 1fr; }
      .process { grid-template-columns: 1fr; }
      .subline { display: block; }
    }


    .impressum{
      margin-top: 80px;
    }

    /* =========================
       7) Modal
       ========================= */
    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      z-index: 1000;
      place-items: center;
      max-height: 100vh;
      overflow-y: auto;
    }
    .modal-overlay.active {
      display: grid;
    }
    .modal {
      background: var(--paper);
      border: 3px solid var(--border);
      box-shadow: var(--shadow);
      border-radius: var(--radius);
      padding: 32px;
      width: 90%;
      max-width: 480px;
      position: relative;
      animation: modal-pop 0.2s ease-out;
    }
    @keyframes modal-pop {
      from { transform: scale(0.9); opacity: 0; }
      to   { transform: scale(1);   opacity: 1; }
    }
    .modal-close {
      position: absolute;
      top: 10px;
      right: 14px;
      background: none;
      border: none;
      font-size: 28px;
      font-weight: 900;
      cursor: pointer;
      color: var(--ink);
      line-height: 1;
    }
    .modal label {
      display: block;
      font-weight: 800;
      text-transform: uppercase;
      font-size: 13px;
      letter-spacing: 0.5px;
      margin-top: 12px;
      margin-bottom: 4px;
    }
    .modal input,
    .modal textarea {
      width: 100%;
      padding: 10px 12px;
      border: 3px solid var(--border);
      border-radius: var(--radius);
      font-family: var(--font-sans);
      font-size: 15px;
      background: #fff;
      color: var(--ink);
    }
    .modal input:focus,
    .modal textarea:focus {
      outline: 3px solid var(--accent-1);
      outline-offset: -3px;
    }
    .modal textarea {
      resize: vertical;
    }
    .checkbox-fieldset {
      border: 3px solid var(--border);
      padding: 14px;
      margin: 0 0 8px;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      /* background: var(--accent-3); */
    }
    .checkbox-fieldset legend {
      font-weight: 900;
      text-transform: uppercase;
      font-size: 13px;
      letter-spacing: 0.5px;
      padding: 0 6px;
    }
    .checkbox-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 8px;
    }
    .checkbox-label {
      display: block;
      cursor: pointer;
      margin: 0;
      text-transform: none;
    }
    .checkbox-label input[type="checkbox"] {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }
    .checkbox-label span {
      display: inline-block;
      padding: 8px 14px;
      border: 3px solid var(--border);
      border-radius: var(--radius);
      font-weight: 800;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      background: var(--paper);
      color: var(--ink);
      box-shadow: 3px 3px 0 var(--border);
      transition: transform 0.1s, box-shadow 0.1s;
      user-select: none;
    }
    .checkbox-label span:hover {
      transform: translate(1px, 1px);
      box-shadow: 2px 2px 0 var(--border);
    }
    .checkbox-label input[type="checkbox"] + span {
      background: var(--accent-3);
    }
    .checkbox-label input[type="checkbox"]:checked + span {
      background: var(--accent-1);
      color: var(--ink-inv);
      box-shadow: 1px 1px 0 var(--border);
      transform: translate(2px, 2px);
    }