/* eqon – Eingangsseite (Anmeldung). Gestaltung angelehnt an www.medeqon.com:
   weiße Kopfleiste · dunkler Heldenbereich (#0a1228) · blaues Band mit dem Fassadenfoto der Homepage (slogan-bg.jpg) · hellblauer Akzentpunkt. */
:root {
  --e-nacht: #0a1228;       /* Heldenbereich medeqon.com */
  --e-tinte: #0a1228;       /* Schrift auf Weiß */
  --e-akzent: #004aad;      /* Linie und Punkt */
  --e-rand: #d5dae0;
  --e-hell: #e8eef7;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body.eingang { font-family: var(--font-sans); color: var(--e-tinte); background: var(--e-nacht); min-height: 100vh; display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased; font-feature-settings: 'tnum' 1, 'lnum' 1; }
.eingang main { flex: 1; display: flex; flex-direction: column; }
.e-huelle { width: min(1080px, 100% - 48px); margin: 0 auto; }
.eingang .i { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.eingang .i16 { width: 16px; height: 16px; }
.eingang .i24 { width: 24px; height: 24px; }
/* Runder Punkt am Ende von Überschriften – wie der Punkt im eqon-Logo (Kreis, #004aad, kein Satzpunkt der Schrift) */
.e-punkt { display: inline-block; width: .18em; height: .18em; border-radius: 50%; background: var(--e-akzent); margin-left: .05em; vertical-align: baseline; }

/* Kopfleiste – weiß wie medeqon.com */
.e-kopf { background: #fff; border-bottom: 1px solid var(--e-rand); position: relative; z-index: 2; }
.e-kopf .e-huelle { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
/* Original-Logo medeqon (wie www.medeqon.com, Punkte rund) – 04_Design\medeqon_Logo_Druck.png */
.e-marke { display: block; height: 44px; width: auto; flex: none; }
.e-kopf-text { font-size: 17px; font-weight: 600; color: var(--e-tinte); letter-spacing: -0.005em; }

/* Heldenbereich – dunkles Nachtblau mit dem Logo */
.e-held { background: var(--e-nacht); color: #fff; padding: 72px 0 64px; }
.e-held-raster { display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; gap: 48px; }
.e-linie { width: 52px; height: 2px; background: var(--e-akzent); margin-bottom: 22px; }
.e-held h1 { font-family: var(--font-display); font-size: clamp(30px, 4vw, 50px); line-height: 1.12; font-weight: 700; letter-spacing: -0.025em; margin: 0 0 18px; text-wrap: balance; }
.e-zeile { white-space: nowrap; }
.e-held p { font-size: 19px; line-height: 1.55; color: rgba(255, 255, 255, .82); margin: 0; max-width: 34em; }
.e-logo { display: flex; justify-content: center; }
.e-logo img { width: min(360px, 100%); height: auto; filter: drop-shadow(0 12px 32px rgba(0, 0, 0, .35)); }

/* Blaues Band – Verlauf wie „Ihr Partner für den gesamten Lebenszyklus …“ über facettierter Glasfassade */
.e-band { position: relative; isolation: isolate; flex: 1; overflow: hidden; padding: 56px 0 64px; color: #fff;
  background: var(--e-nacht) url("eingang-hintergrund.a4c64d9376ca.jpg") center / cover no-repeat; }
.e-facetten { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 42, 95, .9) 0%, rgba(0, 36, 87, .84) 50%, rgba(6, 20, 44, .92) 100%); }
.e-band-raster { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 64px; align-items: center; }

/* Anmeldekarte */
.e-karte { background: #fff; color: var(--e-tinte); border-radius: 14px; padding: 32px 32px 26px; box-shadow: 0 24px 60px rgba(3, 10, 28, .45), 0 2px 6px rgba(3, 10, 28, .2); }
.e-karte-kopf h2 { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.e-karte-kopf p { margin: 4px 0 22px; color: #5a6677; font-size: 15px; }
.e-karte form { display: flex; flex-direction: column; gap: 16px; }
.e-feld { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.e-feld input { font: inherit; font-weight: 400; font-size: 16px; height: 46px; padding: 0 14px; border: 1px solid #c9d1dc; border-radius: 8px; background: #fff; color: var(--e-tinte);
  transition: border-color .15s, box-shadow .15s; }
.e-feld input:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(0, 74, 173, .18); }
.e-knopf { margin-top: 6px; height: 48px; border: 0; border-radius: 8px; background: var(--brand-500); color: #fff; font: inherit; font-size: 16px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; transition: background .15s, transform .15s; }
.e-knopf:hover { background: var(--brand-700); }
.e-knopf:hover .i { transform: translateX(3px); }
.e-knopf .i { transition: transform .15s; }
.e-knopf:focus-visible { outline: 3px solid rgba(0, 74, 173, .35); outline-offset: 2px; }
.e-fehler { display: flex; gap: 8px; align-items: flex-start; background: #fdecec; color: #9b1c1c; border: 1px solid #f5c2c2; border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.e-fehler .i { margin-top: 2px; }
.e-hinweis { display: flex; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #e6eaf0; color: #6b7686; font-size: 12.5px; line-height: 1.5; }
.e-hinweis .i { margin-top: 2px; color: #8b95a4; }

/* Nutzenpunkte rechts */
.e-punkte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.e-punkte li { display: flex; gap: 16px; align-items: flex-start; }
.e-sym { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; flex: none; color: #fff;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); }
.e-punkte b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 4px; }
.e-punkte span:not(.e-sym) { color: rgba(255, 255, 255, .78); font-size: 15.5px; line-height: 1.5; }

/* Fußzeile */
.e-fuss { background: var(--e-nacht); color: rgba(255, 255, 255, .6); font-size: 13px; border-top: 1px solid rgba(255, 255, 255, .08); }
.e-fuss .e-huelle { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 0; }
.e-fuss b { color: #fff; font-weight: 700; }
.e-fuss a { color: rgba(255, 255, 255, .85); text-decoration: none; border-bottom: 1px solid rgba(91, 155, 213, .6); }
.e-fuss a:hover { color: #fff; }

/* Laptop mit wenig Höhe: Heldenbereich kompakter */
@media (max-height: 860px) and (min-width: 900px) {
  .e-kopf .e-huelle { height: 64px; }
  .e-marke { height: 38px; }
  .e-held { padding: 34px 0 30px; }
  .e-held-raster { grid-template-columns: 1.4fr 1fr; }
  .e-linie { margin-bottom: 14px; }
  .e-held h1 { font-size: 40px; margin-bottom: 12px; }
  .e-held p { font-size: 17px; max-width: 40em; }
  .e-logo img { width: min(270px, 100%); }
  .e-band { padding: 28px 0 40px; }
  .e-karte { padding: 26px 28px 22px; }
  .e-karte-kopf p { margin-bottom: 16px; }
  .e-karte form { gap: 12px; }
  .e-feld input { height: 42px; }
  .e-knopf { height: 44px; margin-top: 4px; }
  .e-punkte { gap: 20px; }
}
/* Tablet und Telefon */
@media (max-width: 899px) {
  .e-held { padding: 44px 0 40px; }
  .e-held-raster { grid-template-columns: 1fr; gap: 28px; }
  .e-logo { display: none; }
  .e-band-raster { grid-template-columns: 1fr; gap: 40px; }
  .e-karte { max-width: 460px; }
}
@media (max-width: 520px) {
  .e-huelle { width: calc(100% - 32px); }
  .e-kopf .e-huelle { height: 64px; }
  .e-marke { height: 30px; }
  .e-kopf-text { font-size: 13px; text-align: right; max-width: 150px; line-height: 1.3; }
  .e-held h1 { font-size: 32px; }
  .e-held p { font-size: 17px; }
  .e-karte { padding: 24px 20px 20px; }
  .e-fuss .e-huelle { flex-direction: column; gap: 6px; }
}
@media (max-width: 400px) { .e-held h1 { font-size: 7.4vw; } }