:root {
      color-scheme: light;
      --granit: #26323D; --fels: #4A5A68; --stein: #7F95A3; --eis: #B9D3DD;
      --schnee: #F4F7F8; --gluehen: #E3A33A;
      --bg: var(--schnee); --text: var(--granit); --text-leise: var(--fels);
      --flaeche: #FFFFFF; --linie: var(--eis);
      --font-titel: "Poppins", "Segoe UI", system-ui, sans-serif;
      --font-text: "Caladea", "Cambria", Georgia, serif;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        color-scheme: dark;
        --bg: #1B242C; --text: #E8EEF1; --text-leise: #A9B9C3;
        --flaeche: #232E38; --linie: #3A4955;
      }
    }
    * { box-sizing: border-box; }
    body { margin: 0; background: var(--bg); color: var(--text);
           font-family: var(--font-text); font-size: 1.08rem; line-height: 1.6; }
    h1, h2, h3, legend, label, button, .vierzig, .untertitel, .hinweis, footer { font-family: var(--font-titel); }

    /* Kopf wie Einladungskarte */
    #kopf { position: relative; overflow: hidden; background: var(--bg); }
    .kopf-inhalt { position: relative; z-index: 1; max-width: 52rem; margin: 0 auto;
                   padding: 2rem 1.5rem 0; }
    .logo { position: absolute; top: 1.6rem; right: 1.5rem; width: 9rem; max-width: 30vw;
            padding: .4rem .5rem; border-radius: 6px; }
    @media (prefers-color-scheme: dark) { .logo { background: #FFFFFF; } }
    .vierzig { font-weight: 700; font-size: clamp(6rem, 22vw, 11rem); line-height: .85;
               margin: 3.5rem 0 .6rem; letter-spacing: -0.02em; }
    .vierzig-link { display: block; width: fit-content; color: inherit; text-decoration: none; }
    .vierzig-link:focus-visible { outline: 3px solid var(--gluehen); outline-offset: 4px; }
    #kopf h1 { font-size: clamp(1.4rem, 4.5vw, 2rem); font-weight: 500; line-height: 1.25; margin: 0; }
    .untertitel { margin: .8rem 0 0; color: var(--text-leise); font-weight: 300; }
    .berge { display: block; width: 100%; height: clamp(12rem, 30vw, 22rem); margin-top: -2.5rem; }
    @media (max-width: 40rem) { .berge { margin-top: .5rem; } .vierzig { margin-top: 4rem; } }
    .b-back  { fill: var(--eis); }   .b-mid  { fill: var(--stein); }
    .b-front { fill: var(--fels); }  .b-base { fill: var(--granit); }
    .bahn polyline { fill: none; stroke: var(--gluehen); stroke-width: .42; stroke-linejoin: round; stroke-linecap: round; }
    .bahn .grat { stroke-width: .56; }
    .auge circle { fill: var(--stein); stroke: var(--gluehen); stroke-width: 1.15; }
    .auge .via { stroke-width: .85; }
    .kopf-band { background: var(--granit); color: var(--schnee); }
    .kopf-band p { max-width: 52rem; margin: 0 auto; padding: 0 1.5rem 1.4rem;
                   font-family: var(--font-titel); font-weight: 300; }
    .kopf-band strong { font-weight: 500; display: block; font-size: 1.1rem; }

    main { max-width: 52rem; margin: 0 auto; padding: 1rem 1.5rem 3rem; }
    h2 { font-size: 1.5rem; font-weight: 700; margin: 2.6rem 0 .8rem; }
    h2::before { content: ""; display: block; width: 2.4rem; height: 3px; background: var(--gluehen);
                 margin-bottom: .6rem; border-radius: 2px; }
    h3 { font-size: 1.1rem; font-weight: 500; margin: 1.4rem 0 .4rem; }
    ul { padding-left: 1.2rem; } li { margin: .3rem 0; }
    address { font-style: normal; font-family: var(--font-titel); font-weight: 500; }
    .hinweis { font-size: .85rem; color: var(--text-leise); font-weight: 300; }

    form { background: var(--flaeche); border-radius: 10px; padding: 1.2rem 1.4rem 1.6rem;
           border: 1px solid var(--linie); }
    fieldset { border: 0; border-top: 1px solid var(--linie); margin: 1.2rem 0 0; padding: 1rem 0 0; }
    fieldset:first-of-type { border-top: 0; margin-top: 0; }
    legend { font-weight: 500; font-size: 1.1rem; padding: 0; }
    fieldset p { margin: .9rem 0 .3rem; }
    label { display: block; margin: .45rem 0 .2rem; font-size: .95rem; }
    input[type="text"], input[type="email"], textarea, select {
      width: 100%; max-width: 32rem; padding: .55rem .65rem; font: inherit; font-family: var(--font-text);
      color: var(--text); background: var(--bg); border: 1px solid var(--linie); border-radius: 6px; }
    input:focus, textarea:focus, select:focus { outline: 2px solid var(--gluehen); outline-offset: 1px; }
    input[type="radio"], input[type="checkbox"] { accent-color: var(--gluehen); margin-right: .45rem; }
    button { margin-top: 1.4rem; font-size: 1rem; font-weight: 500; padding: .8rem 1.6rem;
             background: var(--granit); color: var(--schnee); border: 0; border-radius: 6px; cursor: pointer; }
    button:hover { background: var(--fels); }
    @media (prefers-color-scheme: dark) { button { background: var(--gluehen); color: #1B242C; } }
    footer { background: var(--granit); color: var(--eis); font-weight: 300; font-size: .9rem; }
    footer p { max-width: 52rem; margin: 0 auto; padding: 1.4rem 1.5rem; }

/* ==== Ergänzungen für das Anmeldesystem (das bestehende Design bleibt unverändert) ==== */

.meldung { margin: 1.2rem 0; padding: .9rem 1.1rem; border-radius: 8px;
           font-family: var(--font-titel); font-size: .95rem; }
.meldung-erfolg { background: #E8F1EA; border: 1px solid #A9C7B2; color: #23503A; }
.meldung-fehler { background: #F8ECE7; border: 1px solid #D8A18F; color: #7C3A24; }

.feld-fehler { display: block; margin-top: .15rem; color: #A8492F;
               font-size: .85rem; font-family: var(--font-titel); }
[aria-invalid="true"] { border-color: #A8492F; }

/* Honeypot gegen Spam-Bots: aus dem Sichtbereich verschoben, aber nicht display:none */
.hp { position: absolute !important; left: -6000px !important; top: -6000px !important;
      width: 1px; height: 1px; overflow: hidden; }

.hinweis-box { background: var(--flaeche); border: 1px dashed var(--linie);
               border-radius: 8px; padding: .8rem 1rem;
               font-family: var(--font-titel); font-size: .9rem; margin: 1rem 0; }