/* Login "Nr. 1" (index.html): helles blaues Netzwerk, Karte in der Mitte,
   Slogan unten links, Impressum · Datenschutz unten in der Mitte. */
.lg4-body { background: #f7f9fc; }
.lg4 {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 26px max(32px, env(safe-area-inset-right, 0px)) 28px max(36px, env(safe-area-inset-left, 0px));
  background: radial-gradient(900px 600px at 88% -5%, rgba(42, 120, 214, 0.16), transparent 62%), radial-gradient(600px 500px at -5% 105%, rgba(42, 120, 214, 0.08), transparent 60%), linear-gradient(180deg, #f8f9fb, #eef2f8);
}
.lg4-raster { position: fixed; inset: 0; pointer-events: none; }
.lg4 > :not(.lg4-raster) { position: relative; z-index: 1; }

.lg4-kopf { display: flex; align-items: center; gap: 16px; }
.lg4-marke { font-size: 25px; font-weight: 800; letter-spacing: -0.03em; color: #0b0b0c; }
.lg4-marke span { color: #2a78d6; }

.lg4-mitte { display: flex; align-items: center; justify-content: center; padding: 32px 0; }
.lg4-karte {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border: 1px solid #e6ebf2;
  border-radius: 20px;
  padding: 40px 40px 34px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 24px 60px -24px rgba(16, 40, 80, 0.25);
}
.lg4-karte h1 { font-size: 27px; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 6px; }
.lg4-karte .subtitle { font-size: 13.5px; color: #7d8696; margin: 0 0 26px; }
.lg4-karte .btn-primary { margin-top: 6px; }

.lg4-fuss { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 16px; }
.lg4-claim { display: grid; gap: 12px; max-width: 470px; }
.lg4-strich { width: 36px; height: 2px; background: #2a78d6; }
.lg4-claim p { margin: 0; font-size: 31px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.22; color: #0b0b0c; text-wrap: balance; }
.lg4-claim p span { color: #5f6672; font-weight: 600; }
.lg4-recht { display: flex; align-items: center; gap: 14px; font-size: 12.5px; font-weight: 500; padding-bottom: 2px; }
.lg4-recht a { color: #5f6672; text-decoration: none; }
.lg4-recht a:hover { color: #2a78d6; text-decoration: underline; }
.lg4-recht .punkt { width: 3px; height: 3px; border-radius: 50%; background: #9aa3b2; }
.lg4-rechts { justify-self: end; display: flex; align-items: center; gap: 16px; padding-bottom: 2px; }
.lg4-copy { font-size: 12px; color: #8b919c; }
.lg4-sprache { display: inline-flex; align-items: center; gap: 6px; color: #5f6672; font-size: 12.5px; cursor: pointer; }
.lg4-sprache select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: inherit; font-weight: 500; color: inherit; padding: 2px 14px 2px 0; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%235f6672' stroke-width='3'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right center; }
.lg4-sprache:hover, .lg4-sprache select:hover { color: #2a78d6; }
.lg4-sprache select:focus-visible { outline: 2px solid #2a78d6; outline-offset: 2px; border-radius: 4px; }

@media (max-width: 860px) {
  .lg4 { padding: 18px 16px 22px; }
  .lg4-karte { padding: 30px 22px 26px; }
  .lg4-fuss { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 12px; }
  .lg4-claim { justify-items: center; }
  .lg4-claim p { font-size: 21px; }
  .lg4-rechts { justify-self: center; flex-direction: column; gap: 8px; }
}