*, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    :root {
      --accent: #1a4a8a;
      --accent-hover: #0f3069;
      --text-muted: #888;
      --border-line: #c8c8c8;
      --card-shadow: 0 8px 40px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10);
      --card-width: 400px;
    }

    html, body {
      height: 100%;
    }

    body {
      font-family: 'DM Sans', sans-serif;
      font-weight: 400;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      /* Unsplash Placeholder – modernes Stadtbild */
      background-image: url('/media/img/pauline-heidmets-GTL39WM6QqA-unsplash.jpg');
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      position: relative;
    }

    /* leichter dunkler Overlay damit die Box besser schwebt */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background: rgba(10, 20, 40, 0.35);
      z-index: 0;
    }

    /* ─── LOGIN CARD ─────────────────────────────────────────── */
    .card {
      position: relative;
      z-index: 1;
      background: #fff;
      width: var(--card-width);
      max-width: 92vw;
      padding: 44px 48px 40px;
      border-radius: 4px;
      box-shadow: var(--card-shadow);
      display: flex;
      flex-direction: column;
      align-items: center;
      animation: floatIn .55s cubic-bezier(.22,1,.36,1) both;
    }

    @keyframes floatIn {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ─── LOGO ───────────────────────────────────────────────── */
    .logo {
      display: block;
      max-width: 240px;
      height: auto;
      margin-bottom: 32px;
    }

    /* ─── HEADING ────────────────────────────────────────────── */
    .card h1 {
      font-family: 'Outfit', sans-serif;
      font-size: 1.55rem;
      font-weight: 600;
      color: #1a1a2e;
      letter-spacing: .01em;
      margin-bottom: 28px;
      align-self: flex-start;
    }

    /* ─── FORM ───────────────────────────────────────────────── */
    .form-group {
      width: 100%;
      margin-bottom: 32px;
      position: relative;
    }

    .form-group input {
      width: 100%;
      border: none;
      border-bottom: 1.5px solid var(--border-line);
      outline: none;
      padding: 6px 0 8px;
      font-family: 'DM Sans', sans-serif;
      font-size: 1rem;
      color: #1a1a2e;
      background: transparent;
      transition: border-color .2s;
    }

    .form-group input::placeholder {
      color: var(--text-muted);
      font-weight: 300;
    }

    .form-group input:focus {
      border-bottom-color: var(--accent);
    }

    /* animated underline on focus */
    .form-group::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 1.5px;
      background: var(--accent);
      transition: width .25s ease;
    }
    .form-group:focus-within::after {
      width: 100%;
    }

    /* ─── ERROR TEXT ─────────────────────────────────────────── */
    .error-text {
      width: 100%;
      color: #555;
      font-size: 0.95rem;
      font-weight: 300;
      line-height: 1.6;
      margin-bottom: 32px;
    }

    /* ─── BUTTON ─────────────────────────────────────────────── */
    .btn-weiter {
      width: 100%;
      padding: 12px;
      background: var(--accent);
      color: #fff;
      border: none;
      border-radius: 2px;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.95rem;
      font-weight: 500;
      letter-spacing: .06em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background .2s, transform .1s;
	  text-decoration: none;
	  text-align: center;
    }

    .btn-weiter:hover {
      background: var(--accent-hover);
    }

    .btn-weiter:active {
      transform: scale(.98);
    }

    /* ─── FOOTER ─────────────────────────────────────────────── */
    footer {
      position: fixed;
      bottom: 16px;
      left: 24px;
      right: 24px;
      z-index: 2;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
    }

    footer a, footer span {
      color: rgba(255,255,255,0.80);
      text-decoration: none;
      font-size: 0.78rem;
      letter-spacing: .03em;
      transition: color .2s;
      white-space: nowrap;
    }

    footer a:hover {
      color: #fff;
      text-decoration: underline;
    }

    .footer-left {
      text-align: left;
      flex-shrink: 1;
      min-width: 0;
    }

    .footer-right {
      text-align: right;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 6px 16px;
      flex-shrink: 0;
    }

    /* ─── RESPONSIVE ─────────────────────────────────────────── */

    /* Tablet: Box etwas breiter, mehr Hintergrund sichtbar */
    @media (max-width: 768px) {
      :root {
        --card-width: 480px;
      }
      .card {
        padding: 36px 36px 32px;
      }
    }

    /* Smartphone: Box füllt den gesamten Bildschirm */
    @media (max-width: 480px) {
      body {
        justify-content: flex-start;
        background-attachment: scroll;
      }
      body::before {
        display: none;
      }
      .card {
        width: 100%;
        max-width: 100%;
        min-height: 100svh;
        border-radius: 0;
        box-shadow: none;
        padding: 48px 28px 40px;
        animation: none;
        justify-content: center;
      }
      footer {
        position: static;
        margin-top: auto;
        padding: 20px 28px 28px;
        width: 100%;
        background: #fff;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }
      footer a, footer span {
        color: var(--text-muted);
      }
      .footer-right {
        justify-content: flex-start;
      }
    }