/* Landingpage - dunkles Gruen mit bewegtem Halbton-Hintergrund */
:root {
  --hell:#e8f6ed; --leise:#9dbdab; --gruen:#41a06e; --gruen-tief:#1b4430;
  --rand:rgba(255,255,255,.14);
}
* { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0; background:#04100a; color:var(--hell); overflow-x:hidden;
  font:15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh;
}
#flaeche { position:fixed; inset:0; width:100%; height:100%; z-index:-3;
  display:block; }
/* Legt sich ueber den Shader, damit die Schrift lesbar bleibt. */
.schleier {
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(ellipse 55% 60% at 20% 45%, rgba(3,12,8,.82),
                    transparent 70%),
    linear-gradient(100deg, rgba(3,12,8,.93) 0%, rgba(3,12,8,.55) 42%,
                    rgba(3,12,8,.4) 62%, rgba(3,12,8,.8) 100%);
}
.linien { position:fixed; inset:0; z-index:-1; pointer-events:none;
  overflow:hidden; }
/* Die Farbe muss in die Kurzschreibweise: "border-left:1px solid" allein
   setzt die Farbe auf currentColor zurueck - die Linien waeren dann weiss. */
.linie { position:absolute; display:block; }
.linie.a { top:-100px; left:-100px; width:620px; height:620px;
  border-left:1px solid rgba(255,255,255,.06);
  border-top:1px solid rgba(255,255,255,.06);
  transform:rotate(15deg); transform-origin:top left; }
.linie.b { top:-50px; left:200px; width:820px; height:820px;
  border-left:1px solid rgba(255,255,255,.05);
  transform:rotate(-25deg); transform-origin:top left; }
.linie.quer { top:20%; left:0; width:100%;
  border-top:1px solid rgba(255,255,255,.06); }

.buehne {
  flex:1; width:100%; max-width:1400px; margin:0 auto;
  padding:clamp(28px,6vw,80px) clamp(20px,5vw,72px);
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(36px,7vw,90px); flex-wrap:wrap;
}

/* ---------- Marke ---------- */
.marke { display:flex; gap:22px; align-items:flex-start;
  flex:1 1 380px; min-width:280px; }
.zeichen { color:var(--gruen); flex:none; }
.zeichen svg { width:clamp(48px,7vw,70px); height:auto; display:block;
  filter:drop-shadow(0 4px 22px rgba(65,160,110,.4)); }
h1 {
  margin:0; font-weight:600; letter-spacing:-.035em; line-height:.94;
  font-size:clamp(46px,8.5vw,104px); color:#fff;
}
h1 span { display:block; color:var(--gruen); }
.unterzeile { margin:20px 0 0; max-width:430px; color:var(--leise);
  font-size:clamp(14px,1.5vw,16.5px); }
.punkte { margin:22px 0 0; padding:0; list-style:none; display:flex;
  flex-direction:column; gap:8px; }
.punkte li { color:var(--leise); font-size:14px; display:flex;
  align-items:center; gap:10px; }
.punkte li::before {
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--gruen); flex:none;
}

/* ---------- Anmeldekasten ---------- */
.kasten { position:relative; flex:0 1 400px; min-width:280px; width:100%; }
/* Der versetzte Block hinter der Karte - aus der Vorlage uebernommen,
   dort rot, hier gruen. */
.versatz {
  position:absolute; inset:0; transform:translate(13px,13px);
  background:linear-gradient(135deg, var(--gruen), var(--gruen-tief));
  transition:transform .3s ease;
}
.kasten:hover .versatz { transform:translate(17px,17px); }
.rahmen {
  position:relative; z-index:1; padding:1px;
  background:linear-gradient(120deg, rgba(255,255,255,.42),
             rgba(255,255,255,.08) 55%, rgba(255,255,255,.3));
}
.karte { background:#0a1a12; padding:30px 28px 28px; }
.karte h2 { margin:0; font-size:21px; font-weight:640; letter-spacing:-.01em; }
.klein { margin:5px 0 0; color:var(--leise); font-size:13.5px; }

.wechsel { display:flex; gap:2px; padding:3px; margin:20px 0 18px;
  background:rgba(255,255,255,.06); border-radius:10px; }
.wechsel button {
  flex:1; padding:9px; border:none; border-radius:8px; background:none;
  color:var(--leise); font:inherit; font-size:14px; font-weight:600;
  cursor:pointer; transition:.15s;
}
.wechsel button[aria-pressed="true"] { background:rgba(255,255,255,.12);
  color:#fff; }

.feld { display:block; margin-bottom:13px; }
.feld[hidden] { display:none; }
.feld span { display:block; font-size:12.5px; font-weight:600;
  color:var(--leise); margin-bottom:6px; }
.feld input {
  width:100%; padding:11px 13px; border-radius:9px; font:inherit;
  color:#fff; background:rgba(255,255,255,.055);
  border:1.5px solid var(--rand); transition:.15s;
}
.feld input::placeholder { color:rgba(232,246,237,.34); }
.feld input:focus {
  outline:none; border-color:var(--gruen);
  background:rgba(255,255,255,.09);
  box-shadow:0 0 0 3px rgba(65,160,110,.22);
}
.senden {
  width:100%; margin-top:8px; padding:13px; border:none; border-radius:10px;
  background:var(--gruen); color:#04140c; font:inherit; font-size:15px;
  font-weight:700; cursor:pointer; transition:.15s;
}
.senden:hover { background:#57b581; }
.senden:disabled { opacity:.6; cursor:progress; }

.meldung {
  padding:11px 13px; border-radius:9px; font-size:13.5px; margin:2px 0 12px;
  background:rgba(190,70,70,.16); border:1px solid rgba(230,120,120,.32);
  color:#ffc9c9;
}
.meldung strong { display:block; margin-bottom:2px; color:#ffdede; }

/* ---------- Fuss ---------- */
.fuss {
  border-top:1px solid var(--rand); padding:16px clamp(20px,5vw,72px);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:12px; color:var(--leise);
  background:rgba(4,16,10,.55); backdrop-filter:blur(6px);
}
.fuss .warnung { color:#d8b46a; }

@media (max-width:860px) {
  /* Gestapelt darf der Platz nicht auseinandergezogen werden, sonst steht
     die Anmeldung weit unterhalb des sichtbaren Bereichs. */
  .buehne { flex-direction:column; align-items:stretch;
    justify-content:flex-start; gap:30px; }
  .marke { flex:none; gap:16px; }
  .kasten { flex:none; max-width:440px; }
  .unterzeile { margin-top:14px; }
  .punkte { display:none; }
  .linie.a, .linie.b { opacity:.5; }
  /* Der Verlauf ist auf das zweispaltige Layout gerechnet. Gestapelt liegt
     Text ueber der ganzen Breite und braucht eine gleichmaessige Abdunklung. */
  .schleier { background:
    linear-gradient(180deg, rgba(3,12,8,.9) 0%, rgba(3,12,8,.72) 40%,
                    rgba(3,12,8,.88) 100%); }
  .fuss { padding-bottom:22px; }
}