/* Anmeldung: Die Seite ist die Bürowand. Das Team steht auf dem echten Boden, die Anmeldung hängt an der Wand.
   anmeldung-wand.webp und team-zuschnitt.webp sind so beschnitten, dass vom oberen Teil des Originals nichts übrig ist. */
.anmeldung-wand { position: relative; min-height: 100dvh; background: var(--wand); color: var(--auf-wand); overflow: hidden; }
.anmeldung-titel { position: relative; padding: 1.5rem 1rem .25rem; }
.anmeldung-name { font: 500 clamp(2rem, 10.5vw, 3.25rem)/1.02 var(--titel); color: #fff; }
.anmeldung-unter { margin-top: .375rem; color: var(--auf-wand-leise); font-size: 1.125rem; }
.anmeldung-bild-breit { display: none; }
.anmeldung-bild { width: 100%; height: auto; -webkit-mask-image: linear-gradient(transparent 0, #000 9%); mask-image: linear-gradient(transparent 0, #000 9%); }
.anmeldung-spalte { position: relative; padding: 0 0 1.5rem; }

.platte { padding: 1.25rem 1rem 1.5rem; background: var(--hemd); color: var(--tinte); border-top: 5px solid var(--bordeaux); }
.platte h1 { font-size: 1.625rem; margin-bottom: .25rem; }
.zugaenge { display: grid; gap: .5rem; margin: 1rem 0; }
.zugang {
  display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 3.5rem; padding: .375rem .75rem;
  background: var(--rose); border: 1px solid var(--linie); border-left: 4px solid var(--linie); border-radius: 2px;
  text-align: left; line-height: 1.2;
}
.zugang:hover { border-color: var(--rand); }
.zugang[aria-pressed="true"] { background: var(--hemd); border-color: var(--bordeaux); border-left-color: var(--bordeaux); box-shadow: 0 0 0 1px var(--bordeaux); }
.zugang strong, .zugang small { display: block; }
.anmeldeform { display: grid; gap: .75rem; }
.demo-zeile { color: var(--leise); font-size: .9688rem; line-height: 1.35; }
.anmeldung-fehler { padding: .5rem .75rem; background: var(--rose-2); border-left: 4px solid var(--bordeaux); color: var(--bordeaux-tief); font-weight: 600; }

.anmeldung-satz { margin-top: 1rem; max-width: 30rem; font-size: 1.125rem; color: var(--auf-wand); }
.anmeldung-daten { margin-top: 1rem; color: var(--auf-wand-leise); font-size: .9688rem; line-height: 1.45; }
.anmeldung-daten strong { color: var(--auf-wand); font-weight: 600; }
.anmeldung-daten a { color: var(--auf-wand); display: inline-block; min-height: 2.75rem; line-height: 2.75rem; }

/* Tablets im Hochformat: das Bild bleibt oben stehen, die Anmeldung rückt in den ersten Blick */
@media (min-width: 44rem) {
  .anmeldung-bild { max-height: 58dvh; object-fit: cover; object-position: 50% 0; }
  .platte { max-width: 32rem; margin: 0 auto; }
}

/* Breite Schirme wie die Team-Demo: links Marke, Agenturdaten und Bild, rechts das Formular auf Weiß */
@media (min-width: 60rem) and (min-aspect-ratio: 3/2) {
  .anmeldung-wand { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0; padding: 0; background: var(--bordeaux-tief); }
  .anmeldung-bild-breit { display: block; position: absolute; inset: 0 auto 0 0; width: 52%; height: 100%; object-fit: cover; object-position: left bottom; opacity: .28; }
  .anmeldung-bild { display: none; }
  .anmeldung-titel { display: flex; flex-direction: column; justify-content: center; min-height: 100dvh; padding: 3rem clamp(2rem, 5vw, 5rem); background: linear-gradient(180deg, rgb(21 68 52 / .82), rgb(21 68 52 / .95)); }
  .anmeldung-name { font-size: clamp(2.5rem, 4.2vw, 4.25rem); font-weight: 600; }
  .anmeldung-unter { font-size: 1.25rem; letter-spacing: .14em; text-transform: uppercase; }
  .anmeldung-daten { margin-top: auto; padding-top: 2.5rem; }
  .anmeldung-spalte { align-self: stretch; display: grid; place-items: center; padding: 2rem; background: var(--hemd); }
  .platte { width: 100%; max-width: 28rem; padding: 0; border-top: 0; box-shadow: none; }
  .platte h1 { font-size: 2rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .platte { animation: aufhaengen .45s cubic-bezier(.2, .7, .2, 1) both .1s; }
  @keyframes aufhaengen { from { transform: translateY(-.75rem); opacity: 0; } }
}