:root {
      --color-primary: #005746;
      --color-secundary: #8DBF24;
      --color-mid-grey: #666666;
      --color-light-grey: #e5e5e5;
      --color-bg-grey: #f5f5f5;
      --color-white: #ffffff;

      /* Spacing System (4px Raster) */
      --space-4: 4px;
      --space-8: 8px;
      --space-12: 12px;
      --space-16: 16px;
      --space-20: 20px;
      --space-24: 24px;
      --space-32: 32px;

      /* Visual Elements */
      --border-thin: 1px solid var(--color-primary);
      --border-thick: 2px solid var(--color-primary);
      --radius-sm: 2px;
      --radius-md: 4px;
      --shadow-mono: 4px 4px 0px var(--color-primary);
      
      --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    /* Reset & Base 
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: var(--font-family);
      font-size: 16px;
      line-height: 1.5;
      color: var(--color-primary);
      background-color: var(--color-bg-grey);
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }
*/

    /* Typografie */
    .bringEventSignup-main h1 { font-size: 24px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; }
    .bringEventSignup-main h2 { font-size: 20px; font-weight: 700; margin-bottom: var(--space-8); }
    .bringEventSignup-main h3 { font-size: 16px; font-weight: 700; }
    .bringEventSignup-main p { color: var(--color-dark-grey); font-size: 15px; }

    /* Main Layout Container
    main {
      flex: 1;
      max-width: 840px;
      width: 100%;
      margin: var(--space-32) auto;
      padding: 0 var(--space-16);
    } */

    /* Hero Entry (Headerless) */
    .bringEventSignup-main .hero {
      background-color: var(--color-primary);
      color: var(--color-white);
      padding: var(--space-32);
      border-radius: var(--radius-md);
      margin-bottom: var(--space-24);
    }

    .bringEventSignup-main .hero h1 { color: var(--color-white); }
    .bringEventSignup-main .hero p { color: var(--color-light-grey); }

    .bringEventSignup-main .hero-tag {
      display: inline-block;
      border: 1px solid var(--color-white);
      padding: 2px 8px;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      margin-bottom: var(--space-12);
    }

    /* Card Container */
    .bringEventSignup-main .card {
      background-color: var(--color-white);
      border: var(--border-thick);
      border-radius: var(--radius-md);
      padding: var(--space-32);

    }

    /* Stepper Navigation */
    .bringEventSignup-main .steps-nav {
      display: flex;
      justify-content: space-between;
      margin-bottom: var(--space-32);
      position: relative;
    }

    .bringEventSignup-main .steps-nav::before {
      content: '';
      position: absolute;
      top: 18px;
      left: var(--space-16);
      right: var(--space-16);
      height: 2px;
      background-color: var(--color-primary);
      z-index: 1;
    }

    .bringEventSignup-main .step-item {
      position: relative;
      z-index: 2;
      background-color: var(--color-white);
      padding: 0 var(--space-8);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-4);
    }

    .bringEventSignup-main .step-number {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background-color: var(--color-white);
      border: var(--border-thick);
      color: var(--color-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 14px;
      transition: all 0.2s ease;
    }

    .bringEventSignup-main .step-item.active .step-number {
      background-color: var(--color-primary);
      color: var(--color-white);
    }

    .bringEventSignup-main .step-item.completed .step-number {
      background-color: var(--color-light-grey);
      color: var(--color-primary);
    }

    .bringEventSignup-main .step-label {
      font-size: 13px;
      font-weight: 600;
      color: var(--color-mid-grey);
    }

    .bringEventSignup-main .step-item.active .step-label {
      color: var(--color-primary);
      font-weight: 800;
    }

    /* Formular Elemente */
    .bringEventSignup-main .form-group {
      margin-bottom: var(--space-20);
    }

    .bringEventSignup-main .form-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-16);
    }

    .bringEventSignup-main .form-grid-2 {
      grid-template-columns: 1fr 1fr;
    }

    .bringEventSignup-main label {
      display: block;
      font-size: 14px;
      font-weight: 700;
      margin-bottom: var(--space-8);
      color: var(--color-primary);
    }

    .bringEventSignup-main input[type="text"],
    .bringEventSignup-main input[type="email"],
    .bringEventSignup-main input[type="tel"],
    .bringEventSignup-main input[type="date"] {
      width: 100%;
      padding: var(--space-12);
      font-size: 16px;
      border: var(--border-thin);
      border-radius: var(--radius-sm);
      background-color: var(--color-white);
      color: var(--color-primary);
      transition: outline 0.1s ease;
    }

    .bringEventSignup-main input:focus {
      outline: 2px solid var(--color-primary);
      outline-offset: 1px;
    }

    /* Dynamic Participant Cards */
    .bringEventSignup-main .participant-card, 
    .bringEventSignup-main .participant-summary, 
    .bringEventSignup-main .contact-summary, 
    .bringEventSignup-main .invoice-summary {
      border: var(--border-thin);
      background-color: var(--color-bg-grey);
      border-radius: var(--radius-sm);
      padding: var(--space-20);
      margin-bottom: var(--space-16);
    }

    .bringEventSignup-main .participant-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--space-16);
      padding-bottom: var(--space-8);
      border-bottom: var(--border-thin);
    }

    /* Badges & Notices */
    .bringEventSignup-main .status-badge {
      border: var(--border-thick);
      padding: var(--space-16);
      border-radius: var(--radius-sm);
      font-weight: 600;
      margin-bottom: var(--space-24);
      background-color: var(--color-bg-grey);
    }

    /* Buttons */
    .bringEventSignup-main .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-12) var(--space-24);
      font-size: 15px;
      font-weight: 700;
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: all 0.2s ease;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .bringEventSignup-main .btn-primary-event {
      background-color: var(--color-primary);
      color: var(--color-white);
      border: var(--border-thick);
    }

   .bringEventSignup-main .btn-secondary {
      background-color: var(--color-white);
      border: var(--border-thick);
      color: var(--color-primary);
    }

    .bringEventSignup-main .btn-secondary:hover {
      background-color: var(--color-primary);
      color: var(--color-white);
    }

    }

    .bringEventSignup-main .btn-danger {
      background-color: var(--color-white);
      border: var(--border-thin);
      color: var(--color-primary);
      padding: 4px 12px;
      font-size: 12px;
    }

    .bringEventSignup-main .btn-danger:hover {
      background-color: var(--color-primary);
      color: var(--color-white);
    }

    .bringEventSignup-main .actions-row {
      display: flex;
      justify-content: space-between;
      margin-top: var(--space-32);
      padding-top: var(--space-16);
      border-top: var(--border-thin);
    }

    .bringEventSignup-main .hidden {
      display: none !important;
    }

    /* Footer 
    footer {
      background-color: var(--color-white);
      border-top: var(--border-thick);
      padding: var(--space-24) var(--space-32);
      margin-top: auto;
      text-align: center;
      font-size: 14px;
      color: var(--color-dark-grey);
    }

    footer a {
      color: var(--color-primary);
      font-weight: 700;
      text-decoration: underline;
    }

    /* Responsive Breakpoints */
    @media (max-width: 600px) {
      .bringEventSignup-main .form-grid-2 {
        grid-template-columns: 1fr !important;
      }
    }

    @media (max-width: 599px) {
      .bringEventSignup-main .step-label { display: none; }
      .bringEventSignup-main .card { padding: var(--space-16); }
      .bringEventSignup-main .hero { padding: var(--space-20); }
    }

    .bringEventSignup-main input.error, 
    .bringEventSignup-main .error {
      border: 2px solid red !important;
    }