
    :host { display: block; }
    .titel {
      font-family: var(--schrift-anzeige);
      font-size: 1.35rem;
      color: var(--farbe-primaer);
      margin-bottom: .35rem;
    }
    .untertitel {
      color: var(--farbe-text-ged);
      font-size: .88rem;
      margin-bottom: 1.75rem;
    }
    .feld { margin-bottom: 1.25rem; }
    label {
      display: block;
      font-size: .8rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .05em;
      color: var(--farbe-text-ged);
      margin-bottom: .35rem;
    }
    input[type="text"], input[type="email"] {
      width: 100%;
      max-width: 60ch;
      box-sizing: border-box;
      padding: .7rem .9rem;
      font-family: var(--schrift-text);
      font-size: .95rem;
      border: 1.5px solid var(--farbe-rahmen);
      border-radius: var(--radius);
      background: var(--farbe-hg);
      transition: var(--uebergang);
      outline: none;
    }
    input:focus {
      border-color: var(--farbe-akzent);
      box-shadow: 0 0 0 3px rgba(255,237,0,.2);
    }
    input.ungueltig {
      border-color: var(--farbe-gefahr);
      box-shadow: 0 0 0 3px rgba(164,36,59,.12);
    }
    .fehler-text {
      color: var(--farbe-gefahr);
      font-size: .78rem;
      margin-top: .3rem;
      display: none;
    }
    .fehler-text.sichtbar { display: block; }

    .zeile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
    .zeile > .feld { min-width: 0; }
    @media (max-width: 560px) { .zeile { grid-template-columns: 1fr; gap: 0; } }

    .kontrollkaestchen-zeile {
      display: flex;
      align-items: center;
      gap: .6rem;
      margin-bottom: .75rem;
      cursor: pointer;
    }
    .kontrollkaestchen-zeile input[type="checkbox"] {
      width: 18px; height: 18px;
      accent-color: var(--farbe-primaer);
      cursor: pointer;
    }
    .kontrollkaestchen-zeile span {
      font-size: .9rem;
      color: var(--farbe-text);
    }
  
